修改

src/components/SideBar.vue

@@ -9,6 +9,15 @@
       <el-menu-item index="/user">用户管理</el-menu-item>
       <el-menu-item index="/views/certificate/index">凭证管理</el-menu-item>
       <el-menu-item index="/account/register">账号管理</el-menu-item>
+      <el-submenu>
+        <template #title>
+          权限管理
+        </template>
+        <el-menu-item index="/group">群组管理</el-menu-item>
+        <el-menu-item index="/resources">资源管理</el-menu-item>
+        <el-menu-item index="/role">角色管理</el-menu-item>
+        <el-menu-item index="/confer">权限授予</el-menu-item>
+      </el-submenu>
     </el-menu>
   </scroll-bar>
 </template>

src/router.js

@@ -37,6 +37,26 @@ export default new Router({
           name: 'register',
           component: () => import('./views/account/register.vue'),
         },
+        {
+          path: '/group',
+          name: 'group',
+          component: () => import('./views/role/group.vue'),
+        },
+        {
+          path: '/resources',
+          name: 'resources',
+          component: () => import('./views/role/group.vue'),
+        },
+        {
+          path: '/role',
+          name: 'role',
+          component: () => import('./views/role/role.vue'),
+        },
+        {
+          path: '/confer',
+          name: 'confer',
+          component: () => import('./views/role/group.vue'),
+        },
       ],
     },
   ],

src/views/UserMes/userMes.vue

@@ -1,102 +1,106 @@
 <template lang="html">
   <div id="userMes">
-    <el-row>
-      <el-col :span="6" class="sizeA"><span>用户管理</span></el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="4" class="sizeA">
-        <el-button type="primary" @click="dialogFormVisible = true">用户注册</el-button>
-
-        <el-dialog title="用户注册" :visible.sync="dialogFormVisible">
-          <el-form :model="form" label-position="left" label-width="auto" style="padding: 0 5px;">
-            <el-row :gutter="20">
-              <el-col :span="12">
-                <el-form-item label="公民身份号码">
-                  <el-input v-model="form.ID_num" clearable></el-input>
-                </el-form-item>
-                <el-form-item label="姓名">
-                  <el-input v-model="form.name" clearable></el-input>
-                </el-form-item>
-                <el-form-item label="年龄">
-                  <el-input v-model="form.age" clearable></el-input>
-                </el-form-item>
-                <el-form-item label="性别">
-                  <el-radio v-model="form.sex" label="男">男</el-radio>
-                  <el-radio v-model="form.sex" label="女">女</el-radio>
-                </el-form-item>
-                <el-form-item label="民族">
-                  <el-select v-model="form.nation" filterable placeholder="汉族">
-                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="登录密码">
-                  <el-input v-model="form.password" show-password></el-input>
-                </el-form-item>
-                <el-form-item label="确认密码">
-                  <el-input v-model="form.repass" show-password></el-input>
-                </el-form-item>
-                <el-form-item label="手机号码">
-                  <el-input v-model="form.phone" clearable></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="QQ">
-                  <el-input v-model="form.ID_qq" clearable></el-input>
-                </el-form-item>
-                <el-form-item label="微信">
-                  <el-input v-model="form.wechat" clearable></el-input>
-                </el-form-item>
-                <el-form-item label="家庭电话">
-                  <el-input v-model="form.famcall"></el-input>
-                </el-form-item>
-                <el-form-item label="地址">
-                  <el-input v-model="form.address" clearable></el-input>
-                </el-form-item>
-                <el-form-item label="电子邮箱">
-                  <el-input v-model="form.Email" clearable></el-input>
-                </el-form-item>
-                <el-form-item label="备注"> <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="textarea"> </el-input> </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-          <div slot="footer" class="dialog-footer">
-            <el-button @click="dialogFormVisible = false">取 消</el-button>
-            <el-button type="primary" @click="handleEdit">确 定</el-button>
-          </div>
-        </el-dialog>
+    <el-row class="register">
+      <el-col :span="24" class="btn">
+        <el-row :gutter="10">
+          <el-col :span="16"><h3>用户管理</h3></el-col>
+          <!-- 批量导入按钮没加 -->
+          <el-col :span="4"><el-button type="success" icon="el-icon-plus">批量导入</el-button></el-col>
+          <el-col :span="4"><el-button type="success" icon="el-icon-plus" @click="dialogFormVisible = true">用户注册</el-button></el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="24" class="search">
+        <el-col :span="5" class="searchInp"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
+        <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col>
       </el-col>
-      <el-col :span="10" style="padding: 30px 0;">
-        <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
-          <el-button slot="append" icon="el-icon-search"></el-button>
-        </el-input>
+      <el-col :span="24" class="list">
+        <el-table :data="tableData" style="width: 100%" border stripe>
+          <el-table-column prop="name" align="center" label="姓名" width="100"> </el-table-column>
+          <el-table-column prop="age" align="center" label="年龄" width="100"> </el-table-column>
+          <el-table-column prop="nation" align="center" label="民族"> </el-table-column>
+          <el-table-column prop="date" align="center" label="身份证号"> </el-table-column>
+          <el-table-column prop="address" align="center" label="地址"> </el-table-column>
+          <el-table-column align="center" prop="state" label="状态" width="80">
+            <template v-slot="scoped">
+              {{ scoped.row.state === '0' ? '冻结' : '使用中' }}
+            </template>
+          </el-table-column>
+          <el-table-column fixed="right" align="center" label="操作" width="250">
+            <template v-slot="scoped">
+              <el-row type="flex" justify="center">
+                <el-col :span="6">
+                  <el-button size="small" type="text" @click="openDialog(scoped.$index)">用户变更</el-button>
+                </el-col>
+                <el-col :span="6">
+                  <el-button v-if="scoped.row.state == 1" size="small" type="text" @click="open1(scoped.$index)">注销</el-button>
+                  <el-button v-if="scoped.row.state == 0" size="small" type="text" @click="open2(scoped.$index)">恢复</el-button>
+                </el-col>
+              </el-row>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-col class="paging">
+          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
+        </el-col>
       </el-col>
-      <el-col :span="4"><el-button type="success" icon="el-icon-plus">批量导入</el-button></el-col>
     </el-row>
-    <el-table :data="tableData" style="width: 100%" border stripe>
-      <el-table-column prop="name" align="center" label="姓名" width="100"> </el-table-column>
-      <el-table-column prop="age" align="center" label="年龄" width="100"> </el-table-column>
-      <el-table-column prop="nation" align="center" label="民族"> </el-table-column>
-      <el-table-column prop="date" align="center" label="身份证号"> </el-table-column>
-      <el-table-column prop="address" align="center" label="地址"> </el-table-column>
-      <el-table-column align="center" prop="state" label="状态" width="80">
-        <template v-slot="scope">
-          {{ scope.row.state === '0' ? '冻结' : '使用中' }}
-        </template>
-      </el-table-column>
-      <el-table-column fixed="right" align="center" label="操作" width="250">
-        <template v-slot="scope">
-          <el-row type="flex" justify="center">
-            <el-col :span="6">
-              <el-button size="small" type="text" @click="openDialog(scope.$index)">用户变更</el-button>
-            </el-col>
-            <el-col :span="6">
-              <el-button v-if="scope.row.state == 1" size="small" type="text" @click="open1(scope.$index)">注销</el-button>
-              <el-button v-if="scope.row.state == 0" size="small" type="text" @click="open2(scope.$index)">恢复</el-button>
-            </el-col>
-          </el-row>
-        </template>
-      </el-table-column>
-    </el-table>
+    <el-dialog title="用户注册" :visible.sync="dialogFormVisible">
+      <el-form :model="form" label-position="left" label-width="auto" style="padding: 0 5px;">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="公民身份号码">
+              <el-input v-model="form.ID_num" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="姓名">
+              <el-input v-model="form.name" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="年龄">
+              <el-input v-model="form.age" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="性别">
+              <el-radio v-model="form.sex" label="男">男</el-radio>
+              <el-radio v-model="form.sex" label="女">女</el-radio>
+            </el-form-item>
+            <el-form-item label="民族">
+              <el-select v-model="form.nation" filterable placeholder="汉族">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="登录密码">
+              <el-input v-model="form.password" show-password></el-input>
+            </el-form-item>
+            <el-form-item label="确认密码">
+              <el-input v-model="form.repass" show-password></el-input>
+            </el-form-item>
+            <el-form-item label="手机号码">
+              <el-input v-model="form.phone" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="QQ">
+              <el-input v-model="form.ID_qq" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="微信">
+              <el-input v-model="form.wechat" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="家庭电话">
+              <el-input v-model="form.famcall"></el-input>
+            </el-form-item>
+            <el-form-item label="地址">
+              <el-input v-model="form.address" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="电子邮箱">
+              <el-input v-model="form.Email" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="备注"> <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="textarea"> </el-input> </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleEdit">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -192,6 +196,7 @@ export default {
     handleEdit() {
       let chData = this.form;
       const { index, ...form } = chData;
+      form['state'] = 1;
       console.log(index, form);
       if (index !== undefined) {
         this.$set(this.tableData, `${index}`, form);
@@ -220,7 +225,7 @@ export default {
         .catch(_ => {});
     },
     open1() {
-      this.$confirm('此操作将永久注销该账号, 是否继续?', '提示', {
+      this.$confirm('此操作将注销该账号, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
@@ -264,6 +269,43 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+.register {
+  width: 100%;
+  padding: 20px;
+}
+.btn {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  margin: 20px 0;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+  margin: 0 0 20px 0;
+}
+.searchSel .el-select {
+  border-radius: 0;
+}
+/deep/.searchInp .el-input__inner {
+  border-radius: 0;
+}
+.searchBtn .el-button {
+  border-radius: 0;
+}
+.paging {
+  text-align: right;
+  margin: 10px 0;
+}
 .sizeA {
   padding: 30px;
 }

src/views/account/register.vue

@@ -24,24 +24,24 @@
           :load="load"
           :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         >
-          <el-table-column label="姓名" width="180">
-            <template v-slot="scope">
-              <el-tag type="success" v-if="owner(scope.row.hasChildren)">主</el-tag>
+          <el-table-column align="center" label="姓名" width="180">
+            <template v-slot="scoped">
+              <el-tag type="success" v-if="owner(scoped.row.hasChildren)">主</el-tag>
               <el-tag type="warning" v-else>从</el-tag>
-              {{ scope.row.name }}
+              {{ scoped.row.name }}
             </template>
           </el-table-column>
-          <el-table-column prop="address" label="地址"> </el-table-column>
-          <el-table-column prop="state" label="状态">
-            <template v-slot="scope">
-              {{ scope.row.state === '0' ? '已冻结' : '使用中' }}
+          <el-table-column align="center" prop="address" label="地址"> </el-table-column>
+          <el-table-column align="center" prop="state" label="状态">
+            <template v-slot="scoped">
+              {{ scoped.row.state === '0' ? '已冻结' : '使用中' }}
             </template>
           </el-table-column>
-          <el-table-column label="操作">
-            <template v-slot="scope">
-              <el-button size="mini" @click="openDialog(scope.$index)">修改</el-button>
-              <el-button v-if="scope.row.state == 1" size="mini" type="danger" @click="open1(scope.$index)">注销</el-button>
-              <el-button v-if="scope.row.state == 0" type="success" size="mini" @click="open2(scope.$index)">恢复</el-button>
+          <el-table-column align="center" label="操作">
+            <template v-slot="scoped">
+              <el-button size="mini" @click="openDialog(scoped.$index)">修改</el-button>
+              <el-button v-if="scoped.row.state == 1" size="mini" type="danger" @click="open1(scoped.$index)">注销</el-button>
+              <el-button v-if="scoped.row.state == 0" type="success" size="mini" @click="open2(scoped.$index)">恢复</el-button>
             </template>
           </el-table-column>
         </el-table>

src/views/certificate/index.vue

@@ -20,15 +20,15 @@
           <el-table-column align="center" prop="certificate" label="证书"> </el-table-column>
           <el-table-column align="center" prop="fingerprint" label="指纹"> </el-table-column>
           <el-table-column align="center" prop="state" label="状态">
-            <template v-slot="scope">
-              {{ scope.row.state === '0' ? '冻结' : '使用中' }}
+            <template v-slot="scoped">
+              {{ scoped.row.state === '0' ? '冻结' : '使用中' }}
             </template>
           </el-table-column>
           <el-table-column align="center" label="操作" width="300">
-            <template v-slot="scope">
+            <template v-slot="scoped">
               <el-button icon="el-icon-edit" @click="dialogFormVisible = true">修改</el-button>
-              <el-button v-if="scope.row.state == 1" type="danger" icon="el-icon-delete" @click="open1(scope.$index)">注销</el-button>
-              <el-button v-if="scope.row.state == 0" type="danger" icon="el-icon-delete" @click="open2(scope.$index)">恢复</el-button>
+              <el-button v-if="scoped.row.state == 1" type="danger" icon="el-icon-delete" @click="open1(scoped.$index)">注销</el-button>
+              <el-button v-if="scoped.row.state == 0" type="danger" icon="el-icon-delete" @click="open2(scoped.$index)">恢复</el-button>
             </template>
           </el-table-column>
         </el-table>

src/views/role/group.vue

@@ -0,0 +1,208 @@
+<template lang="html">
+  <div id="group">
+    <el-row class="register">
+      <el-col :span="24" class="btn">
+        <el-row :gutter="10">
+          <el-col :span="20"><h3>群组管理</h3></el-col>
+          <!-- 批量导入按钮没加 -->
+          <el-col :span="4"><el-button type="success" icon="el-icon-plus" @click="dialog = true">群组添加</el-button></el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="24" class="search">
+        <el-col :span="5" class="searchInp"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
+        <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col>
+      </el-col>
+      <el-col :span="24" class="list">
+        <el-table :data="tableData" style="width: 100%" border stripe>
+          <el-table-column prop="name" align="center" label="群组名称"> </el-table-column>
+          <el-table-column prop="charge" align="center" label="责任人"> </el-table-column>
+          <el-table-column prop="tel" align="center" label="责任人电话"> </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template v-slot="scoped">
+              <el-row type="flex" justify="center">
+                <el-col :span="6">
+                  <el-button size="mini" type="text" @click="openDialog(scoped.$index, 'udpate')">修改</el-button>
+                </el-col>
+                <el-col :span="6">
+                  <el-button size="mini" type="text" @click="openDialog(scoped.$index, 'assign')">分配人员</el-button>
+                </el-col>
+              </el-row>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-col class="paging">
+          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog title="群组编辑" :visible.sync="dialog">
+      <el-form :model="form" label-position="left" label-width="auto" style="padding: 0 5px;">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="群组名称">
+              <el-input v-model="form.name" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="责任人">
+              <el-input v-model="form.charge" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="责任人电话">
+              <el-input v-model="form.tel" clearable></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialog = false">取 消</el-button>
+        <el-button type="primary" @click="handleEdit">确 定</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title="分配人员" :visible.sync="dialogAssign" style="padding:0 5rem;">
+      <el-transfer v-model="assignFrom.personList" :data="personList" :titles="['未添加', '已添加']" :button-texts="['删除', '添加']"></el-transfer>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogAssign = false">取 消</el-button>
+        <el-button type="primary" @click="handleAssign">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'group',
+  props: {},
+  components: {},
+  data: () => ({
+    input: '',
+    textarea: '',
+    tableData: [
+      {
+        name: '群组1',
+        charge: '责任人1',
+        tel: '1100000000',
+        personList: [1],
+      },
+      {
+        name: '群组2',
+        charge: '责任人2',
+        tel: '1200000000',
+        personList: [2, 3],
+      },
+      {
+        name: '群组3',
+        charge: '责任人3',
+        tel: '1300000000',
+      },
+      {
+        name: '群组4',
+        charge: '责任人4',
+        tel: '1400000000',
+      },
+    ],
+    personList: [],
+    value: '',
+    dialog: false,
+    dialogAssign: false,
+    form: {},
+    assignFrom: {},
+  }),
+  created() {
+    let list = [];
+    for (let i = 0; i < 10; i++) {
+      list.push({
+        key: i,
+        label: `人员${i}`,
+      });
+    }
+    this.$set(this, `personList`, list);
+  },
+  computed: {},
+  methods: {
+    handleEdit() {
+      let chData = this.form;
+      const { index, ...form } = chData;
+      form['state'] = 1;
+      console.log(index, form);
+      if (index !== undefined) {
+        this.$set(this.tableData, `${index}`, form);
+        this.$message.success('修改成功');
+      } else {
+        this.tableData.push(form);
+      }
+
+      this.handleCancel();
+    },
+    handleCancel() {
+      this.form = {};
+      this.dialog = false;
+    },
+    openDialog(index, type) {
+      let data = JSON.parse(JSON.stringify(this.tableData[index]));
+      data[`index`] = index;
+      if (type === 'update') {
+        this.dialog = true;
+        this.$set(this, `form`, data);
+      } else {
+        this.dialogAssign = true;
+
+        this.$set(this, `assignFrom`, data);
+      }
+    },
+    handleAssign() {
+      let data = this.assignFrom;
+      const { index, ...form } = data;
+      this.$set(this.tableData[index], `personList`, form.personList);
+      this.dialogAssign = false;
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+.register {
+  width: 100%;
+  padding: 20px;
+}
+.btn {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  margin: 20px 0;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+  margin: 0 0 20px 0;
+}
+.searchSel .el-select {
+  border-radius: 0;
+}
+/deep/.searchInp .el-input__inner {
+  border-radius: 0;
+}
+.searchBtn .el-button {
+  border-radius: 0;
+}
+.paging {
+  text-align: right;
+  margin: 10px 0;
+}
+.sizeA {
+  padding: 30px;
+}
+</style>

src/views/role/role.vue

@@ -0,0 +1,192 @@
+<template lang="html">
+  <div id="role">
+    <el-row class="register">
+      <el-col :span="24" class="btn">
+        <el-row :gutter="10">
+          <el-col :span="20"><h3>角色管理</h3></el-col>
+          <!-- 批量导入按钮没加 -->
+          <el-col :span="4"><el-button type="success" icon="el-icon-plus" @click="dialog = true">角色添加</el-button></el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="24" class="search">
+        <el-col :span="5" class="searchInp"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
+        <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col>
+      </el-col>
+      <el-col :span="24" class="list">
+        <el-table :data="tableData" style="width: 100%" border stripe>
+          <el-table-column prop="name" align="center" label="角色名称"> </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template v-slot="scoped">
+              <el-row type="flex" justify="center">
+                <el-col :span="6">
+                  <el-button size="mini" type="text" @click="openDialog(scoped.$index, 'udpate')">修改</el-button>
+                </el-col>
+                <el-col :span="6">
+                  <el-button size="mini" type="text" @click="openDialog(scoped.$index, 'assign')">分配人员</el-button>
+                </el-col>
+              </el-row>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-col class="paging">
+          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog title="角色编辑" :visible.sync="dialog">
+      <el-form :model="form" label-position="left" label-width="auto" style="padding: 0 5px;">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="角色名称">
+              <el-input v-model="form.name" clearable></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialog = false">取 消</el-button>
+        <el-button type="primary" @click="handleEdit">确 定</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title="分配人员" :visible.sync="dialogAssign" style="padding:0 5rem;">
+      <el-transfer v-model="assignFrom.personList" :data="personList" :titles="['未添加', '已添加']" :button-texts="['删除', '添加']"></el-transfer>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogAssign = false">取 消</el-button>
+        <el-button type="primary" @click="handleAssign">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'role',
+  props: {},
+  components: {},
+  data: () => ({
+    input: '',
+    textarea: '',
+    tableData: [
+      {
+        name: '角色1',
+        personList: [1],
+      },
+      {
+        name: '角色2',
+        personList: [2, 3],
+      },
+      {
+        name: '角色3',
+      },
+      {
+        name: '角色4',
+      },
+    ],
+    personList: [],
+    value: '',
+    dialog: false,
+    dialogAssign: false,
+    form: {},
+    assignFrom: {},
+  }),
+  created() {
+    let list = [];
+    for (let i = 0; i < 10; i++) {
+      list.push({
+        key: i,
+        label: `人员${i}`,
+      });
+    }
+    this.$set(this, `personList`, list);
+  },
+  computed: {},
+  methods: {
+    handleEdit() {
+      let chData = this.form;
+      const { index, ...form } = chData;
+      form['state'] = 1;
+      console.log(index, form);
+      if (index !== undefined) {
+        this.$set(this.tableData, `${index}`, form);
+        this.$message.success('修改成功');
+      } else {
+        this.tableData.push(form);
+      }
+
+      this.handleCancel();
+    },
+    handleCancel() {
+      this.form = {};
+      this.dialog = false;
+    },
+    openDialog(index, type) {
+      let data = JSON.parse(JSON.stringify(this.tableData[index]));
+      data[`index`] = index;
+      if (type === 'update') {
+        this.dialog = true;
+        this.$set(this, `form`, data);
+      } else {
+        this.dialogAssign = true;
+
+        this.$set(this, `assignFrom`, data);
+      }
+    },
+    handleAssign() {
+      let data = this.assignFrom;
+      const { index, ...form } = data;
+      this.$set(this.tableData[index], `personList`, form.personList);
+      this.dialogAssign = false;
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+.register {
+  width: 100%;
+  padding: 20px;
+}
+.btn {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  margin: 20px 0;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+  margin: 0 0 20px 0;
+}
+.searchSel .el-select {
+  border-radius: 0;
+}
+/deep/.searchInp .el-input__inner {
+  border-radius: 0;
+}
+.searchBtn .el-button {
+  border-radius: 0;
+}
+.paging {
+  text-align: right;
+  margin: 10px 0;
+}
+.sizeA {
+  padding: 30px;
+}
+</style>