gengxin

src/layout/room/detailInfo.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="messgae">
+          <el-form ref="form" :model="form" label-width="120px" :rules="rules">
+            <el-form-item label="名称" prop="name">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+
+            <el-form-item label="主播" proo="anchorid">
+              <el-select v-model="form.anchorid" placeholder="请选择主播">
+                <el-option v-for="item in newlist" :key="item.id" :label="item.name" :value="item.id"> </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="类型" proo="type">
+              <el-radio v-model="form.type" label="0">直播</el-radio>
+              <el-radio v-model="form.type" label="1">会议</el-radio>
+            </el-form-item>
+
+            <el-form-item label="头像图片" prop="filedir">
+              <upload :limit="1" :data="form.filedir" type="filedir" :url="'/files/filedir/upload'" @upload="uploadSuccess"></upload>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit()">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import upload from '@/components/upload.vue';
+export default {
+  name: 'detail',
+  props: {
+    form: null,
+    newlist: null,
+  },
+  components: {
+    upload,
+  },
+  data: () => ({
+    rules: {
+      name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+
+      anchorid: [{ required: true, message: '请选择主播', trigger: 'blur' }],
+      type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+      filedir: [{ required: true, message: '请选择头像图片', trigger: 'blur' }],
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    uploadSuccess({ type, data }) {
+      console.log(type, data);
+      this.$set(this.form, `${type}`, data.uri);
+    },
+    onSubmit() {
+      this.$emit('submitDate', { data: this.form, id: this.form.id });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  padding: 15px 0;
+}
+.top .topTitle {
+  text-align: left;
+}
+.top .topBtn {
+  text-align: right;
+  padding: 0 5px;
+}
+</style>

src/router/index.js

@@ -41,6 +41,12 @@ const routes = [
     meta: { title: '房间管理' },
     component: () => import('../views/room/index.vue'),
   },
+
+  {
+    path: '/room/detail',
+    meta: { title: '房间详情' },
+    component: () => import('../views/room/detail.vue'),
+  },
   {
     path: '/stat/index',
     meta: { title: '统计管理' },

src/store/roomuser.js

@@ -27,7 +27,7 @@ const actions = {
     return res;
   },
   async update({ commit }, { id, ...info } = {}) {
-    const res = await this.$axios.$post(`${api.roomuserInfo}/${id}`, { ...info });
+    const res = await this.$axios.$post(`${api.roomuserInfo}/update/${id}`, { ...info });
     return res;
   },
   async delete({ commit }, payload) {

src/views/anchor/detail.vue

@@ -38,7 +38,7 @@ export default {
   },
   data: function() {
     return {
-      drawerIsNew: true,
+      drawerIsNew: false,
       form: {},
       fields: [
         { label: '姓名', prop: 'name', model: 'name' },
@@ -61,20 +61,32 @@ export default {
       },
     };
   },
-  created() {},
+  created() {
+    this.search();
+  },
   methods: {
-    ...roomuser(['query', 'delete', 'update', 'create']),
-    async search() {},
+    ...roomuser(['query', 'delete', 'update', 'create', 'fetch']),
+    async search() {
+      let res = await this.fetch(this.id);
+      console.log(res.data);
+      this.$set(this, `form`, res.data);
+    },
     // 创建&修改
     async drawerSave({ data, isNew }) {
       let res;
       let msg;
-      if (isNew) {
-        res = await this.create(data);
-        msg = `${this.keyWord}添加成功`;
-      } else {
+      console.log(this.isNew);
+
+      if (this.isNew) {
+        console.log(data);
+
         res = await this.update(data);
+        console.log();
+
         msg = `${this.keyWord}修改成功`;
+      } else {
+        res = await this.create(data);
+        msg = `${this.keyWord}添加成功`;
       }
       if (this.$checkRes(res, msg)) this.$router.push({ path: './index' });
     },
@@ -84,12 +96,24 @@ export default {
       return this.$route.query.id;
     },
     isNew() {
-      return this.$route.query.id ? false : true;
+      return this.$route.query.id ? true : false;
     },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
+    mainTitle() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      let sub = meta.sub || '';
+      return `${main}${sub}`;
+    },
+    keyWord() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      return main;
+    },
   },
+
   metaInfo() {
     return { title: this.$route.meta.title };
   },

src/views/anchor/index.vue

@@ -6,7 +6,7 @@
           <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-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">
@@ -31,7 +31,7 @@ export default {
   data: () => ({
     opera: [
       {
-        label: '审核',
+        label: '编辑',
         icon: 'el-icon-edit',
         method: 'edit',
       },
@@ -68,8 +68,14 @@ export default {
         this.$set(this, `total`, res.total);
       }
     },
-    toEdit({ data }) {},
-    async toDelete({ data }) {},
+    toEdit({ data }) {
+      this.$router.push({ path: './detail', query: { id: data.id } });
+    },
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      this.$checkRes(res, '删除成功', '删除失败');
+      this.search();
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/role/detail.vue

@@ -30,12 +30,12 @@ export default {
       drawerIsNew: true,
       form: {},
       fields: [
-        { label: '权限名称', prop: 'role_', model: 'role_' },
+        { label: '权限名称', prop: 'role_name', model: 'role_name' },
         { label: '权限code', prop: 'code', model: 'code' },
         { label: '权限路由', prop: 'url', model: 'url' },
       ],
       rules: {
-        role_: [{ required: true, message: '权限名称' }],
+        role_name: [{ required: true, message: '权限名称' }],
         code: [{ required: true, message: '权限code' }],
         url: [{ required: true, message: '请输入权限路由' }],
       },
@@ -43,18 +43,21 @@ export default {
   },
   created() {},
   methods: {
-    ...role(['query', 'delete', 'update', 'create']),
-    async search() {},
+    ...role(['query', 'delete', 'update', 'create', 'fetch']),
+    async search() {
+      let res = await this.fetch(this.id);
+      this.$set(this, `form`, res.data);
+    },
     // 创建&修改
     async drawerSave({ data, isNew }) {
       let res;
       let msg;
-      if (isNew) {
-        res = await this.create(data);
-        msg = `${this.keyWord}添加成功`;
-      } else {
+      if (this.isNew) {
         res = await this.update(data);
         msg = `${this.keyWord}修改成功`;
+      } else {
+        res = await this.create(data);
+        msg = `${this.keyWord}添加成功`;
       }
       if (this.$checkRes(res, msg)) this.$router.push({ path: './index' });
     },
@@ -69,6 +72,17 @@ export default {
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
+    mainTitle() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      let sub = meta.sub || '';
+      return `${main}${sub}`;
+    },
+    keyWord() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      return main;
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };

src/views/role/index.vue

@@ -20,7 +20,7 @@ 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');
+const { mapActions: role } = createNamespacedHelpers('role');
 export default {
   name: 'index',
   props: {},
@@ -31,7 +31,7 @@ export default {
   data: () => ({
     opera: [
       {
-        label: '审核',
+        label: '编辑',
         icon: 'el-icon-edit',
         method: 'edit',
       },
@@ -43,9 +43,9 @@ export default {
       },
     ],
     fields: [
-      { label: '权限名称', prop: 'name' },
+      { label: '权限名称', prop: 'role_name' },
       { label: '权限code', prop: 'code' },
-      { label: 'url', prop: 'deptname' },
+      { label: 'url', prop: 'url' },
     ],
     list: [],
     total: 0,
@@ -54,14 +54,24 @@ export default {
     this.search();
   },
   methods: {
-    ...role(['query', 'delete', 'update']),
+    ...role(['query', 'delete', 'update', 'fetch']),
 
     async search({ skip = 0, limit = 10, ...info } = {}) {
       let res = await this.query();
       console.log(res.data);
+      this.$set(this, `list`, res.data);
+    },
+    toEdit({ data }) {
+      console.log('1');
+
+      this.$router.push({ path: './detail', query: { id: data.id } });
+    },
+
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      this.$checkRes(res, '删除成功', '删除失败');
+      this.search();
     },
-    toEdit({ data }) {},
-    async toDelete({ data }) {},
   },
   computed: {
     ...mapState(['user']),

src/views/room/detail.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="top">
+        <topInfo :topTitle="pageTitle"></topInfo>
+      </el-col>
+      <el-col :span="24" class="main">
+        <detailInfo :form="form" @submitDate="onSubmit" :newlist="newlist"></detailInfo>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/public/top.vue';
+import detailInfo from '@/layout/room/detailInfo.vue';
+import { createNamespacedHelpers, mapState } from 'vuex';
+const { mapActions: roomuser } = createNamespacedHelpers('roomuser');
+const { mapActions: room } = createNamespacedHelpers('room');
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    detailInfo,
+    topInfo,
+  },
+  data: () => ({
+    form: {},
+    newlist: [],
+  }),
+  created() {
+    this.search();
+  },
+  methods: {
+    ...roomuser({ roomuserquery: 'query' }),
+
+    ...room({ roomquery: 'query', roomfetch: 'fetch', roomupdate: 'update', roomcreate: 'create' }),
+    async search() {
+      const res = await this.roomuserquery();
+      console.log(res.data);
+
+      this.$set(this, `newlist`, res.data);
+    },
+    async onSubmit({ data }) {
+      if (this.id) {
+      } else {
+        console.log(data);
+        let res = this.create(data);
+        this.$checkRes(res, '创建房间成功', '创建房间失败');
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 20px;
+  margin: 10px 20px;
+  border: 1px solid #ccc;
+  width: 96%;
+}
+</style>

src/views/room/index.vue

@@ -1,20 +1,78 @@
 <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: '房间类型', prop: 'type', format: i => (i == '0' ? '直播' : i == '1' ? '会议' : '临时用户') },
+      { label: '房间地址', prop: 'url' },
+    ],
+    list: [],
+    total: 0,
+  }),
+  created() {
+    this.search();
+  },
+  methods: {
+    ...role(['query', 'delete', 'update', 'fetch']),
+
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.query();
+      console.log(res.data);
+      this.$set(this, `list`, res.data);
+    },
+    toEdit({ data }) {
+      console.log('1');
+
+      this.$router.push({ path: './detail', query: { id: data.id } });
+    },
+
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      this.$checkRes(res, '删除成功', '删除失败');
+      this.search();
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -26,5 +84,10 @@ export default {
   },
 };
 </script>
-
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.add {
+  height: 40px;
+  line-height: 35px;
+  padding: 0 15px;
+}
+</style>