更新

src/router/index.js

@@ -11,14 +11,26 @@ const routes = [
   },
   {
     path: '/anchor/index',
-    meta: { title: '用户管理' },
+    meta: { title: '主播管理' },
     component: () => import('../views/anchor/index.vue'),
   },
+
+  {
+    path: '/anchor/detail',
+    meta: { title: '主播详情' },
+    component: () => import('../views/anchor/detail.vue'),
+  },
   {
     path: '/role/index',
     meta: { title: '权限管理' },
     component: () => import('../views/role/index.vue'),
   },
+
+  {
+    path: '/role/detail',
+    meta: { title: '权限详情' },
+    component: () => import('../views/role/detail.vue'),
+  },
   {
     path: '/live/index',
     meta: { title: '直播管理' },

src/views/anchor/detail.vue

@@ -0,0 +1,109 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="index">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="pageTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <data-form :fields="fields" :data="form" :rules="rules" @save="drawerSave" :isNew="drawerIsNew">
+            <template #radios="{item}">
+              <template v-if="item.model === 'gender'">
+                <el-radio label="男" value="男"></el-radio>
+                <el-radio label="女" value="女"></el-radio>
+              </template>
+              <template v-else>
+                <el-radio label="3">主播</el-radio>
+                <el-radio label="4">房间用户</el-radio>
+              </template>
+            </template>
+          </data-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/public/top.vue';
+import dataForm from '@/components/form.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: roomuser } = createNamespacedHelpers('roomuser');
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    topInfo,
+    dataForm,
+  },
+  data: function() {
+    return {
+      drawerIsNew: true,
+      form: {},
+      fields: [
+        { label: '姓名', prop: 'name', model: 'name' },
+        { label: '电话', prop: 'phone', model: 'phone' },
+        { label: '密码', prop: 'passwd', model: 'passwd', type: 'paswword' },
+        { label: '机构名称', prop: 'deptname', model: 'deptname' },
+        { label: '职务', prop: 'level', model: 'level' },
+        { label: '个人简介', prop: 'title', model: 'title', type: 'textarea' },
+        { label: '备注', prop: 'remark', model: 'remark', type: 'textarea' },
+        { label: '用戶类型', required: true, model: 'role', type: 'radio' },
+      ],
+      rules: {
+        name: [{ required: true, message: '请输入姓名' }],
+        passwd: [{ required: true, message: '请输入密码' }],
+        phone: [{ required: true, message: '请输入电话' }],
+        deptname: [{ required: true, message: '请输入机构名称' }],
+        title: [{ required: true, message: '请输入个人简介' }],
+        remark: [{ required: true, message: '备注' }],
+        role: [{ required: true, message: '请选择用戶类型' }],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    ...roomuser(['query', 'delete', 'update', 'create']),
+    async search() {},
+    // 创建&修改
+    async drawerSave({ data, isNew }) {
+      let res;
+      let msg;
+      if (isNew) {
+        res = await this.create(data);
+        msg = `${this.keyWord}添加成功`;
+      } else {
+        res = await this.update(data);
+        msg = `${this.keyWord}修改成功`;
+      }
+      if (this.$checkRes(res, msg)) this.$router.push({ path: './index' });
+    },
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    isNew() {
+      return this.$route.query.id ? false : true;
+    },
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    isNew: {
+      handler(val) {
+        if (!val) {
+          this.search();
+        }
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/anchor/index.vue

@@ -1,20 +1,73 @@
 <template>
   <div id="index">
-    <p>用户管理</p>
+    <el-row>
+      <el-col :span="24" class="index">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="pageTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="add" style="text-align:right">
+          <el-button size="mini" type="primary" @click="$router.push({ path: './detail' })" icon="el-icon-plus">添加主播</el-button>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="info">
+        <data-table :fields="fields" @delete="toDelete" :data="list" :opera="opera" @edit="toEdit" :total="total" @query="search"></data-table>
+      </el-col>
+    </el-row>
   </div>
 </template>
-
 <script>
-import { mapState, createNamespacedHelpers } from 'vuex';
+import topInfo from '@/layout/public/top.vue';
+import dataTable from '@/components/data-table.vue';
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+
+const { mapActions: roomuser } = createNamespacedHelpers('roomuser');
 export default {
   name: 'index',
   props: {},
-  components: {},
-  data: function() {
-    return {};
+  components: {
+    topInfo,
+    dataTable,
+  },
+  data: () => ({
+    opera: [
+      {
+        label: '审核',
+        icon: 'el-icon-edit',
+        method: 'edit',
+      },
+      {
+        label: '删除',
+        icon: 'el-icon-delete',
+        method: 'delete',
+        confirm: true,
+      },
+    ],
+    fields: [
+      { label: '姓名', prop: 'name', filter: 'input' },
+      { label: '电话', prop: 'phone', filter: 'input' },
+      { label: '用戶类型', prop: 'role', format: i => (i == '3' ? '主播' : i == '4' ? '房间用户' : '临时用户') },
+      // { label: '状态', prop: 'status', format: i => (i == '0' ? '待审核' : i == '1' ? '审核成功' : i == '2' ? '审核拒绝' : '待认证') },
+      { label: '机构名称', prop: 'deptname', filter: 'input' },
+      { label: '职务', prop: 'level', filter: 'input' },
+      { label: '个人简介', prop: 'title', filter: 'input' },
+      { label: '备注', prop: 'remark', filter: 'input' },
+    ],
+    list: [],
+    total: 0,
+  }),
+  created() {
+    this.search();
+  },
+  methods: {
+    ...roomuser(['query', 'delete', 'update']),
+
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.query();
+      console.log(res.data);
+    },
+    toEdit({ data }) {},
+    async toDelete({ data }) {},
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -26,5 +79,10 @@ export default {
   },
 };
 </script>
-
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.add {
+  height: 40px;
+  line-height: 35px;
+  padding: 0 15px;
+}
+</style>

src/views/role/detail.vue

@@ -0,0 +1,89 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="index">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="pageTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <data-form :fields="fields" :data="form" :rules="rules" @save="drawerSave" :isNew="drawerIsNew"> </data-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/public/top.vue';
+import dataForm from '@/components/form.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: role } = createNamespacedHelpers('role');
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    topInfo,
+    dataForm,
+  },
+  data: function() {
+    return {
+      drawerIsNew: true,
+      form: {},
+      fields: [
+        { label: '权限名称', prop: 'role_', model: 'role_' },
+        { label: '权限code', prop: 'code', model: 'code' },
+        { label: '权限路由', prop: 'url', model: 'url' },
+      ],
+      rules: {
+        role_: [{ required: true, message: '权限名称' }],
+        code: [{ required: true, message: '权限code' }],
+        url: [{ required: true, message: '请输入权限路由' }],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    ...role(['query', 'delete', 'update', 'create']),
+    async search() {},
+    // 创建&修改
+    async drawerSave({ data, isNew }) {
+      let res;
+      let msg;
+      if (isNew) {
+        res = await this.create(data);
+        msg = `${this.keyWord}添加成功`;
+      } else {
+        res = await this.update(data);
+        msg = `${this.keyWord}修改成功`;
+      }
+      if (this.$checkRes(res, msg)) this.$router.push({ path: './index' });
+    },
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    isNew() {
+      return this.$route.query.id ? false : true;
+    },
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    isNew: {
+      handler(val) {
+        if (!val) {
+          this.search();
+        }
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/role/index.vue

@@ -1,20 +1,68 @@
 <template>
   <div id="index">
-    <p>权限管理</p>
+    <el-row>
+      <el-col :span="24" class="index">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="pageTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="add" style="text-align:right">
+          <el-button size="mini" type="primary" @click="$router.push({ path: './detail' })" icon="el-icon-plus">添加主播</el-button>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="info">
+        <data-table :fields="fields" @delete="toDelete" :data="list" :opera="opera" @edit="toEdit" :total="total" @query="search"></data-table>
+      </el-col>
+    </el-row>
   </div>
 </template>
-
 <script>
-import { mapState, createNamespacedHelpers } from 'vuex';
+import topInfo from '@/layout/public/top.vue';
+import dataTable from '@/components/data-table.vue';
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+
+const { mapActions: role  } = createNamespacedHelpers('role');
 export default {
   name: 'index',
   props: {},
-  components: {},
-  data: function() {
-    return {};
+  components: {
+    topInfo,
+    dataTable,
+  },
+  data: () => ({
+    opera: [
+      {
+        label: '审核',
+        icon: 'el-icon-edit',
+        method: 'edit',
+      },
+      {
+        label: '删除',
+        icon: 'el-icon-delete',
+        method: 'delete',
+        confirm: true,
+      },
+    ],
+    fields: [
+      { label: '权限名称', prop: 'name' },
+      { label: '权限code', prop: 'code' },
+      { label: 'url', prop: 'deptname' },
+    ],
+    list: [],
+    total: 0,
+  }),
+  created() {
+    this.search();
+  },
+  methods: {
+    ...role(['query', 'delete', 'update']),
+
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.query();
+      console.log(res.data);
+    },
+    toEdit({ data }) {},
+    async toDelete({ data }) {},
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -26,5 +74,10 @@ export default {
   },
 };
 </script>
-
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.add {
+  height: 40px;
+  line-height: 35px;
+  padding: 0 15px;
+}
+</style>