添加讲解员页面

admin/src/router/routes.js

@@ -93,12 +93,21 @@ export default [
           path: 'user',
           name: 'system',
           meta: {
-            title: '用户管理',
+            title: '管理员信息',
             noKeepAlive: true
           },
           component: resolve => require(['views/system/user/list'], resolve),
         },
         {
+          path: 'commentator',
+          name: 'commentator',
+          meta: {
+            title: '讲解员信息',
+            noKeepAlive: true
+          },
+          component: resolve => require(['views/system/commentator/list'], resolve),
+        },
+        {
           path: 'user/create',
           name: 'system',
           meta: {

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

@@ -0,0 +1,151 @@
+<template>
+  <div class="house-list">
+    <tables
+      :data-api="dataApi"
+      :columns="columns"
+      @toEdit="toEdit"
+      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 />
+        </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>
+        <FormItem label="手机号码">
+          <Input size="large" v-model="form.phone" disabled />
+        </FormItem>
+      </Form>
+    </CModal>
+  </div>
+</template>
+
+<script>
+import tables from 'components/tables'
+import { fetchUserList, updateUser, fetchRoleList } from 'api/'
+import CModal from 'components/Modal'
+
+const roleMap = {
+  0: '超级管理员',
+  1: '普通管理员',
+  2: '经纪人',
+}
+export default {
+  data() {
+    return {
+      show: false,
+      form: {},
+      // 传递给tables的表格列数据
+      dataApi: fetchUserList,
+      roleList: [],
+      columns: [
+        {
+          type: 'index',
+          title: '序号',
+          align: 'center',
+          width: 80
+        },
+        {
+          title: '账号ID',
+          key: 'admin_id',
+          align: 'center'
+        },
+        {
+          title: '账号名称',
+          key: 'name',
+          align: 'center'
+        },
+        {
+          title: '角色',
+          key: 'type',
+          align: 'center',
+          render: (h, params) => {
+            return h('span', roleMap[params.row.type])
+          }
+        },
+        {
+          title: '联系方式',
+          key: 'phone',
+          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: 'createTime',
+          align: 'center'
+        },
+        {
+          title: '操作',
+          slot: 'action',
+          tools: ['edit' ],
+          align: 'center'
+        }
+      ],
+    }
+  },
+  components: {
+    tables,
+    CModal
+  },
+  mounted () {
+    this.fetchRoleList()
+  },
+  methods: {
+    fetchRoleList () {
+      fetchRoleList().then(res => {
+        this.roleList = res.data
+      })
+    },
+    async changeUser () {
+      await updateUser(this.form)
+      this.closeModal()
+      this.$Message.success({
+        content: '修改成功'
+      })
+      this.$refs['table'].handleTableData()
+    },
+    toEdit (row) {
+      this.form = JSON.parse(JSON.stringify(row))
+      this.show = true
+    },
+    closeModal () {
+      this.show = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.house-list {
+  padding: 20px;
+  background: #252828;
+}
+
+</style>