【市北代码迁移至安宁】【权限管理-角色管理】-王公峰-2020-09-17

src/views/modules/sys/role-add-or-update.vue

@@ -6,12 +6,11 @@
     <el-form :model="dataForm"
              :rules="dataRule"
              ref="dataForm"
+             @keyup.enter.native="dataFormSubmitHandle()"
              label-width="120px">
       <el-form-item prop="name"
                     :label="$t('role.name')">
         <el-input v-model="dataForm.name"
-                  maxlength="30"
-                  show-word-limit
                   :placeholder="$t('role.name')"></el-input>
       </el-form-item>
       <el-form-item label="角色类型">
@@ -27,12 +26,10 @@
       <el-form-item prop="remark"
                     :label="$t('role.remark')">
         <el-input v-model="dataForm.remark"
-                  maxlength="100"
-                  show-word-limit
                   :placeholder="$t('role.remark')"></el-input>
       </el-form-item>
       <el-row>
-        <el-col :span="8">
+        <el-col :span="5">
           <el-form-item size="mini"
                         :label="$t('role.menuList')">
             <el-tree :data="menuList"
@@ -44,7 +41,7 @@
             </el-tree>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="5">
           <el-form-item size="mini"
                         :label="$t('role.deptList')">
             <el-tree :data="deptList"
@@ -56,7 +53,7 @@
             </el-tree>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="4">
           <el-form-item size="mini"
                         :label="$t('role.appMenuList')">
             <el-tree :data="appMenuList"
@@ -68,7 +65,32 @@
             </el-tree>
           </el-form-item>
         </el-col>
-        <el-col :span="10">
+        <el-col :span="4">
+          <el-form-item size="mini"
+                        :label="$t('role.categoryList')">
+            <el-tree :data="categoryList"
+                     :props="{ label: 'name', children: 'children' }"
+                     node-key="id"
+                     ref="categoryListTree"
+                     accordion
+                     show-checkbox>
+            </el-tree>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item size="mini"
+                        :label="$t('role.whistleDeptList')">
+            <el-tree :data="whistleDeptList"
+                     :props="{ label: 'name', children: 'children' }"
+                     node-key="id"
+                     ref="whistleDeptListTree"
+                     accordion
+                     show-checkbox
+                     check-strictly=true>
+            </el-tree>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
           <el-form-item size="mini"
                         :label="$t('role.analysisMenuList')">
             <el-tree :data="analysisMenuList"
@@ -98,15 +120,19 @@ export default {
       visible: false,
       menuList: [],
       deptList: [],
+      whistleDeptList: [],
       appMenuList: [],
-      analysisMenuList:[],
+      categoryList: [],
       roleTypeList: [],
+      analysisMenuList: [],
       dataForm: {
         id: '',
         name: '',
         menuIdList: [],
         deptIdList: [],
         appMenuIdList: [],
+        categoryIdList: [],
+        whistleDeptIdList: [],
         analysisMenuIdList: [],
         remark: '',
         typeKey: ''
@@ -133,11 +159,15 @@ export default {
         this.$refs.menuListTree.setCheckedKeys([])
         this.$refs.deptListTree.setCheckedKeys([])
         this.$refs.appMenuListTree.setCheckedKeys([])
+        this.$refs.categoryListTree.setCheckedKeys([])
+        this.$refs.whistleDeptListTree.setCheckedKeys([])
         this.$refs.analysisMenuListTree.setCheckedKeys([])
         Promise.all([
           this.getMenuList(),
           this.getDeptList(),
           this.getAppMenuList(),
+          this.getCategoryList(),
+          this.getWhistleDeptList(),
           this.getAnalysisMenuList()
         ]).then(() => {
           if (this.dataForm.id) {
@@ -164,6 +194,15 @@ export default {
         this.deptList = res.data
       }).catch(() => { })
     },
+    // 获取吹哨部门列表
+    getWhistleDeptList () {
+      return this.$http.get('/sys/dept/list').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.whistleDeptList = res.data
+      }).catch(() => { })
+    },
     // 获取App菜单列表
     getAppMenuList () {
       return this.$http.get('/sys/appmenu/select').then(({ data: res }) => {
@@ -173,6 +212,15 @@ export default {
         this.appMenuList = res.data
       }).catch(() => { })
     },
+    // 获取项目处理类型授权
+    getCategoryList () {
+      return this.$http.get('/events/handlecategory/getCategoryList').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.categoryList = res.data
+      }).catch(() => { })
+    },
     getAnalysisMenuList () {
       return this.$http.get('/sys/analysismenu/select').then(({ data: res }) => {
         if (res.code !== 0) {
@@ -194,7 +242,9 @@ export default {
         this.dataForm.menuIdList.forEach(item => this.$refs.menuListTree.setChecked(item, true))
         this.$refs.deptListTree.setCheckedKeys(this.dataForm.deptIdList)
         this.dataForm.appMenuIdList.forEach(item => this.$refs.appMenuListTree.setChecked(item, true))
+        this.dataForm.categoryIdList.forEach(item => this.$refs.categoryListTree.setChecked(item, true))
         this.dataForm.analysisMenuIdList.forEach(item => this.$refs.analysisMenuListTree.setChecked(item, true))
+        this.$refs.whistleDeptListTree.setCheckedKeys(this.dataForm.whistleDeptIdList)
       }).catch(() => { })
     },
     // 表单提交
@@ -212,10 +262,15 @@ export default {
           ...this.$refs.appMenuListTree.getCheckedKeys(),
           ...this.$refs.appMenuListTree.getHalfCheckedKeys()
         ]
+        this.dataForm.categoryIdList = [
+          ...this.$refs.categoryListTree.getCheckedKeys(),
+          ...this.$refs.categoryListTree.getHalfCheckedKeys()
+        ]
         this.dataForm.analysisMenuIdList = [
           ...this.$refs.analysisMenuListTree.getCheckedKeys(),
           ...this.$refs.analysisMenuListTree.getHalfCheckedKeys()
         ]
+        this.dataForm.whistleDeptIdList = this.$refs.whistleDeptListTree.getCheckedKeys()
         this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/role', this.dataForm).then(({ data: res }) => {
           if (res.code !== 0) {
             return this.$message.error(res.msg)
@@ -243,8 +298,15 @@ export default {
   }
 }
 </script>
-<style scoped>
-.el-dialog__wrapper /deep/ .el-dialog__footer {
-    text-align: center!important;
+// 添加树样式
+<style lang="scss">
+.el-tree {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.el-tree>.el-tree-node {
+  display: inline-block;
+  min-width: 100%;
 }
 </style>