添加讲解员界面

admin/src/api/index.js

@@ -25,10 +25,44 @@ export function fetchUserList (params= {}) {
   return request.get('listAdmin', {params: Object.assign(defaultParams, params)})
 }
 
+
+// 获取讲解员列表
+export function fetchViewerList (params= {}) {
+  const defaultParams = {
+    registerType: 1,
+    keyword: params.searchKey,
+    pageSize: 10,
+    pageNum: 1
+  }
+  return request.get('viewer/queryViewerList', {params: Object.assign(defaultParams, params)})
+}
+
+
+// 观众修改为讲解员
+export function updateViewerToGuide (id) {
+  return request.get('viewer/changeToGuide', {params: {viewerId: id}})
+}
+
+
+// 获取讲解员列表
+export function fetchGuidList (params= {}) {
+  const defaultParams = {
+    keyword: params.searchKey,
+    pageSize: 10,
+    pageNum: 1
+  }
+  return request.get('viewer/queryGuidList', {params: Object.assign(defaultParams, params)})
+}
+
 export function updateUser (data) {
   return request.post('changeInfo', data)
 }
 
+// 修改讲解员资料
+export function updateGuide (data) {
+  return request.post('viewer/updateGuide', data)
+}
+
 // 修改首页运营的数据
 export function upadteActivity (data) {
   return request.post('activity/update', data)

admin/src/components/tables/tables.vue

@@ -230,7 +230,7 @@ export default {
     async handleRowBtn(param) {
       if (param.action === 'toDel') {
         // 获取对应的id字段得值
-        await this.deleteApi([param.row[this.deleteIdKey] || param.row[Object.keys(param.row).find(item => item.indexOf('_id') > -1)]])
+        await this.deleteApi([param.row[this.deleteIdKey] || param.row[Object.keys(param.row).find(item => item.indexOf('_id') > -1)] || param.row])
         this.handleTableData()
         return
       }

admin/src/views/system/commentator/list.vue

@@ -1,34 +1,48 @@
 <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="changeUser" @close="closeModal">
-      <Form :label-width="75">
-        <FormItem label="用户名称">
-          <Input size="large" v-model="form.name" disabled />
+
+    <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="用户角色">
-          <Select v-model="form.type" size="large">
-            <Option :value="-1">未分配</Option>
-            <Option :value="item.roleType" v-for="item in roleList" :key="item.roleId">{{ item.remark }}</Option>
-          </Select>
+        <FormItem label="公司名称">
+          <Input size="large" v-model="form.companyName" />
         </FormItem>
         <FormItem label="手机号码">
-          <Input size="large" v-model="form.phone" disabled />
+          <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 { fetchUserList, updateUser, fetchRoleList } from 'api/'
+import { fetchGuidList, updateGuide, updateViewerToGuide } from 'api/'
 import CModal from 'components/Modal'
 
 const roleMap = {
@@ -39,10 +53,19 @@ const roleMap = {
 export default {
   data() {
     return {
+      postPreUploads: [],
+      postHasUploads: [],
+      buttonList: [
+        {
+          text: '新增',
+          handle: 'create'
+        }
+      ],
+      authShow: false,
       show: false,
       form: {},
       // 传递给tables的表格列数据
-      dataApi: fetchUserList,
+      dataApi: fetchGuidList,
       roleList: [],
       columns: [
         {
@@ -52,49 +75,37 @@ export default {
           width: 80
         },
         {
-          title: '账号ID',
-          key: 'admin_id',
-          align: 'center'
+          title: '头像',
+          key: 'avatar',
+          align: 'center',
+          render: (h, params) => {
+            return h('img', {
+              domProps: {
+                src: params.row.avatar,
+                className: 'avatar'
+              }
+            })
+          }
         },
         {
-          title: '账号名称',
-          key: 'name',
+          title: 'ID',
+          key: 'viewerId',
           align: 'center'
         },
         {
-          title: '角色',
-          key: 'type',
-          align: 'center',
-          render: (h, params) => {
-            return h('span', roleMap[params.row.type])
-          }
+          title: '讲解员名称',
+          key: 'name',
+          align: 'center'
         },
         {
-          title: '联系方式',
-          key: 'phone',
+          title: '公司名称',
+          key: 'companyName',
           align: 'center'
         },
         {
-          title: '启动状态',
-          key: 'name',
-          align: 'center',
-          render: (h, params) => {
-            return h('i-switch', {
-              props: {
-                trueValue: 1,
-                falseValue: 0,
-                value: params.row.enable,
-                // disabled: params.row.roleKey === 'admin'
-              },
-              on: {
-                'on-change': (val) => {
-                  updateUser(Object.assign(params.row, {enable: val})).catch (err => {
-                    params.row.enable = !val ? 1 : 0
-                  })
-                }
-              }
-            })
-          }
+          title: '手机号码',
+          key: 'phoneNum',
+          align: 'center'
         },
         {
           title: '创建时间',
@@ -104,37 +115,61 @@ export default {
         {
           title: '操作',
           slot: 'action',
-          tools: ['edit' ],
+          tools: ['edit', 'del'],
           align: 'center'
         }
       ],
+      selectViews: []
     }
   },
   components: {
+    UserList,
+    picUpload,
     tables,
     CModal
   },
   mounted () {
-    this.fetchRoleList()
   },
   methods: {
-    fetchRoleList () {
-      fetchRoleList().then(res => {
-        this.roleList = res.data
-      })
+    authClose() {
+      this.selectViews = []
+      this.authShow = false
     },
-    async changeUser () {
-      await updateUser(this.form)
+    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: '修改成功'
+        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
     }
@@ -147,5 +182,16 @@ export default {
   padding: 20px;
   background: #252828;
 }
+</style>
+
+<style>
+.avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+}
 
+.pic-upload .tips {
+  bottom: auto;
+}
 </style>

admin/src/views/system/commentator/userList.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="house-list">
+    <tables
+      :data-api="dataApi"
+      :columns="columns"
+      @chooseSelection="chooseSelection"
+      placeholder="输入名称"
+      ref="table"
+    />
+  </div>
+</template>
+
+<script>
+import tables from 'components/tables'
+import { fetchViewerList, updateGuide } from 'api/'
+
+const roleMap = {
+  0: '超级管理员',
+  1: '普通管理员',
+  2: '经纪人',
+}
+export default {
+  data() {
+    return {
+      // 传递给tables的表格列数据
+      dataApi: fetchViewerList,
+      roleList: [],
+      columns: [
+        {
+          type: 'selection',
+          width: 60,
+          align: 'center'
+        },
+        {
+          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: '名称',
+          key: 'name',
+          align: 'center'
+        },
+        {
+          title: '授权时间',
+          key: 'createTime',
+          align: 'center'
+        }
+      ],
+      selecteds: []
+    }
+  },
+  components: {
+    tables
+  },
+  methods: {
+    chooseSelection (selection) {
+      this.selecteds = selection.map(item => item.viewerId)
+      this.$emit('selected', this.selecteds)
+    },
+  }
+}
+</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>