|
@@ -0,0 +1,197 @@
|
|
|
+<template>
|
|
|
+ <div class="house-list">
|
|
|
+ <tables
|
|
|
+ :buttonList="buttonList"
|
|
|
+ :data-api="dataApi"
|
|
|
+ :deleteApi="toDel"
|
|
|
+ :columns="columns"
|
|
|
+ @toEdit="toEdit"
|
|
|
+ @create="authShow = true"
|
|
|
+ placeholder="账号名称"
|
|
|
+ ref="table"
|
|
|
+ />
|
|
|
+
|
|
|
+ <CModal :show="show" title="讲解员信息" :width="420" @submit="updateUser" @close="closeModal">
|
|
|
+ <Form :label-width="100">
|
|
|
+ <FormItem label="讲解员ID">
|
|
|
+ <p>{{form.viewerId}}</p>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="讲解员名称">
|
|
|
+ <Input size="large" v-model="form.name" />
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="公司名称">
|
|
|
+ <Input size="large" v-model="form.companyName" />
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="手机号码">
|
|
|
+ <Input size="large" v-model="form.phoneNum" />
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="头像">
|
|
|
+ <picUpload class="pic-upload" tips="只能上传jpg/png文件,且不超过500kb" ref="post-upload" :limit="1" :multiple="false" :preUploads="postPreUploads" :hasUploads="postHasUploads" />
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ </CModal>
|
|
|
+
|
|
|
+ <CModal :show="authShow" title="新增讲解员" :width="640" @submit="authSubmit" @close="authClose">
|
|
|
+ <UserList @selected="s => selectViews = s" />
|
|
|
+ </CModal>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import picUpload from '@/components/upload'
|
|
|
+import UserList from './userList'
|
|
|
+import tables from 'components/tables'
|
|
|
+import { fetchGuidList, updateGuide, updateViewerToGuide } from 'api/'
|
|
|
+import CModal from 'components/Modal'
|
|
|
+
|
|
|
+const roleMap = {
|
|
|
+ 0: '超级管理员',
|
|
|
+ 1: '普通管理员',
|
|
|
+ 2: '经纪人',
|
|
|
+}
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ postPreUploads: [],
|
|
|
+ postHasUploads: [],
|
|
|
+ buttonList: [
|
|
|
+ {
|
|
|
+ text: '新增',
|
|
|
+ handle: 'create'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ authShow: false,
|
|
|
+ show: false,
|
|
|
+ form: {},
|
|
|
+ // 传递给tables的表格列数据
|
|
|
+ dataApi: fetchGuidList,
|
|
|
+ roleList: [],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ type: 'index',
|
|
|
+ title: '序号',
|
|
|
+ align: 'center',
|
|
|
+ width: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '头像',
|
|
|
+ key: 'avatar',
|
|
|
+ align: 'center',
|
|
|
+ render: (h, params) => {
|
|
|
+ return h('img', {
|
|
|
+ domProps: {
|
|
|
+ src: params.row.avatar,
|
|
|
+ className: 'avatar'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'ID',
|
|
|
+ key: 'viewerId',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '讲解员名称',
|
|
|
+ key: 'name',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '公司名称',
|
|
|
+ key: 'companyName',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '手机号码',
|
|
|
+ key: 'phoneNum',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创建时间',
|
|
|
+ key: 'createTime',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ slot: 'action',
|
|
|
+ tools: ['edit', 'del'],
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ selectViews: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ UserList,
|
|
|
+ picUpload,
|
|
|
+ tables,
|
|
|
+ CModal
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ authClose() {
|
|
|
+ this.selectViews = []
|
|
|
+ this.authShow = false
|
|
|
+ },
|
|
|
+ async authSubmit() {
|
|
|
+ this.authShow = false
|
|
|
+ let ps = this.selectViews.map(id => updateViewerToGuide(id))
|
|
|
+
|
|
|
+ await Promise.all(ps)
|
|
|
+
|
|
|
+ this.$refs['table'].handleTableData()
|
|
|
+ },
|
|
|
+ async changeUser (msg = '修改成功') {
|
|
|
+ if (this.postPreUploads.length) {
|
|
|
+ let fs = await this.$refs['post-upload'].uploadfiles()
|
|
|
+ this.form.avatar = fs[0]
|
|
|
+ }
|
|
|
+
|
|
|
+ await updateGuide(this.form)
|
|
|
+ this.closeModal()
|
|
|
+ this.$Message.success({
|
|
|
+ content: msg
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async updateUser() {
|
|
|
+ await this.changeUser()
|
|
|
+ this.$refs['table'].handleTableData()
|
|
|
+ },
|
|
|
+ toEdit (row) {
|
|
|
+ this.form = JSON.parse(JSON.stringify(row))
|
|
|
+ this.postHasUploads = [{img: this.form.avatar}]
|
|
|
+ this.show = true
|
|
|
+ },
|
|
|
+ toDel(row) {
|
|
|
+ this.toEdit(row[0])
|
|
|
+ this.show = false
|
|
|
+ this.enable = 0
|
|
|
+ this.changeUser('删除成功')
|
|
|
+ },
|
|
|
+ closeModal () {
|
|
|
+ this.show = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.house-list {
|
|
|
+ padding: 20px;
|
|
|
+ background: #252828;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.avatar {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.pic-upload .tips {
|
|
|
+ bottom: auto;
|
|
|
+}
|
|
|
+</style>
|