feat: 角色管理完善

frontend/src/business/components/settings/sys/role.vue

@@ -4,12 +4,12 @@
             <el-aside width="70%" style="border: 1px solid #eee">
                 <el-card class="table-card">
                     <template v-slot:header>
-                        <ms-table-header :condition.sync="condition" @search="search" @create="create" :create-tip="$t('user.create')" :title="$t('commons.user')"/>
+                        <ms-table-header :condition.sync="condition" @search="search" @create="create" :create-tip="$t('role.add')" :title="$t('commons.role')"/>
                     </template>
-                    <el-table border class="adjust-table" :data="tableData" style="width: 100%;">
+                    <el-table border highlight-current-row class="adjust-table" :data="tableData" style="width: 100%;" @row-click="rowClick">
 
                         <el-table-column prop="name" label="名称" />
-                        <el-table-column :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期">
+                        <el-table-column :show-overflow-tooltip="true"  prop="createTime" label="创建日期">
                             <template v-slot:default="scope">
                                 <span>{{ scope.row.createTime | timestampFormatDate }}</span>
                             </template>
@@ -35,9 +35,8 @@
                             :load="getMenuDatas"
                             :props="defaultProps"
                             check-strictly
-                            accordion
                             show-checkbox
-                            node-key="menuId"
+                            node-key="id"
                             @check="menuChange"
                         />
                     </el-tab-pane>
@@ -45,6 +44,26 @@
                 </el-tabs>
             </el-main>
         </el-container>
+        <el-dialog :close-on-click-modal="false" :title="formType=='add' ? $t('role.add') : $t('role.modify')" :visible.sync="dialogVisible" width="580px" @closed="closeFunc"
+               :destroy-on-close="true">
+            <el-form ref="roleForm" inline :model="form" :rules="rule" size="small" label-width="80px">
+
+                <el-form-item label="角色名称" prop="name">
+                    <el-input v-model="form.name" style="width: 380px;" />
+                </el-form-item>
+
+                <el-form-item label="描述信息" prop="description">
+                    <el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" />
+                </el-form-item>
+            </el-form>
+
+            <template v-slot:footer>
+                <ms-dialog-footer
+                @cancel="dialogVisible = false"
+                @confirm="saveRole('roleForm')"/>
+            </template>
+        </el-dialog>
+
     </div>
 
 </template>
@@ -55,7 +74,10 @@ import MsTableHeader from "../../common/components/MsTableHeader";
 import MsTableOperator from "../../common/components/MsTableOperator";
 import MsDialogFooter from "../../common/components/MsDialogFooter";
 import MsTableOperatorButton from "../../common/components/MsTableOperatorButton";
-
+import {
+  listenGoBack,
+  removeGoBackListener
+} from "@/common/js/utils";
 export default {
     name: 'role',
     components: {
@@ -70,9 +92,12 @@ export default {
       return {
         result: {},
         queryPath: '/api/role/roleGrid',
-        deletePath: '/user/special/delete/',
-        createPath: '/user/special/add',
-        updatePath: '/user/special/update',
+        deletePath: '/api/role/delete/',
+        createPath: '/api/role/create',
+        updatePath: '/api/role/update',
+        queryMenusPath: '/api/menu/childNodes/',
+        childMenusPath: '/api/menu/childMenus/',
+        saveRoleMenusPath: '/api/role/saveRolesMenus',
         currentPage: 1,
         pageSize: 10,
         total: 0,
@@ -80,37 +105,147 @@ export default {
         tableData: [],
         menus: [],
         menuIds: [],
-        defaultProps: {},
-        activeName: 'second'
+        defaultProps: { children: 'children', label: 'label' ,isLeaf: 'isLeaf'},
+        activeName: 'first',
+        dialogVisible: false,
+        formType: 'add',
+        form: {},
+        rule: {
+            name: [
+                { required: true, message: '请输入名称', trigger: 'blur' }
+            ]
+        },
+        currentRow: null
       };
     },
     activated() {
         this.search();
     },
+    watch: {
+        currentRow: 'currentRowChange'
+    },
     methods: {
       handleClick(tab, event) {
         console.log(tab, event);
       },
-      create(){},
+      create(){
+          this.form = {}
+          this.formType = "add";
+          this.dialogVisible = true
+          listenGoBack(this.closeFunc)
+      },
       search(){
         this.result = this.$post(this.queryPath+ "/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
-            let data = response.data;
-            this.total = data.itemCount;
-            this.tableData = data.listObject;
+            let data = response.data
+            this.total = data.itemCount
+            this.tableData = data.listObject
         })
       },
 
       edit(row){
-
+        this.formType = 'modify'
+        this.dialogVisible = true
+        this.form = Object.assign({}, row)
+        listenGoBack(this.closeFunc)
       },
-      getMenuDatas(node, resolve){
 
+      saveRole(roleForm){
+        this.$refs[roleForm].validate(valid => {
+            if (valid) {
+                const url = this.formType=='add' ? this.createPath : this.updatePath
+                this.result = this.$post(url, this.form, () => {
+                    this.$success(this.$t('commons.save_success'))
+                    this.search();
+                    this.dialogVisible = false
+                });
+            } else {
+                return false;
+            }
+        })
+      },
+
+      closeFunc() {
+        this.dialogVisible = false
+        removeGoBackListener(this.closeFunc);
+      },
+
+      getMenuDatas(node, resolve){
+          this.$post(this.queryMenusPath+(node.data.id ? node.data.id : 0), null, (res) => {
+            const datas = res.data
+            const nodes = datas.map(data => this.formatNode(data))
+            resolve && resolve(nodes)
+        })
+      },
+      formatNode(node) {
+          const result = {
+              id: node.menuId,
+              label: node.title,
+              isLeaf: !node.hasChildren,
+              children: node.children
+          }
+          return result
       },
       menuChange(menu){
+          this.$post(this.childMenusPath + menu.id, null, res => {
+            const childIds = res.data
+            if (this.menuIds.indexOf(menu.id) !== -1) {
+                for (let i = 0; i < childIds.length; i++) {
+                    const index = this.menuIds.indexOf(childIds[i])
+                    if (index !== -1) {
+                        this.menuIds.splice(index, 1)
+                    }
+                }
+            } else {
+                for (let i = 0; i < childIds.length; i++) {
+                    const index = this.menuIds.indexOf(childIds[i])
+                    if (index === -1) {
+                        this.menuIds.push(childIds[i])
+                    }
+                }
+            }
+            console.log(this.menuIds)
+            this.$refs.menu.setCheckedKeys(this.menuIds)
+            this.saveMenus()
+          })
+      },
+      saveMenus(){
+        if (!this.currentRow) {
+            return
+        }
+        const param = {roleId: this.currentRow.roleId, menuIds: this.menuIds}
+        this.$post(this.saveRoleMenusPath, param, res => {
+            this.search()
+        })
+      },
+      rowClick(row,column, event){
+        this.currentRow = row
+      },
+      currentRowChange(newVal, oldVal){
+          if (newVal == oldVal) {
+              return
+          }
+          if (!newVal) {
+              this.menuIds = []
+              return
+          }
 
+          this.menuIds = newVal.menuIds;
+          this.$refs.menu.setCheckedKeys(this.menuIds)
       },
       handleDelete(row){
+        this.$confirm('确认删除角色['+row.name+']？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+        }).then(() => {
+                const url = this.deletePath+row.roleId
+                this.$post(url, null, () => {
+                    this.$success(this.$t('commons.modify_success'))
+                    this.search()
+                });
+            }).catch(() => {
 
+            })
       }
     }
 }

frontend/src/i18n/zh-CN.js

@@ -385,6 +385,8 @@ export default {
     test_user: '测试人员',
     test_viewer: '只读用户',
     add: '添加角色',
+    delete: '删除角色',
+    modify: '修改角色',
   },
   report: {
     api_test_report: '接口测试报告',