CN-32 CN-33 : 角色菜单添加用户管理界面bug修改

2021-06-16 15:01:58 +08:00
parent e5823523cc
commit a808dae7c1
9 changed files with 424 additions and 10 deletions
--- a/src/components/rightBox/settings/RoleBox.vue
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -0,0 +1,196 @@
+<template>
+  <div v-click-outside="{object: editRole, func: esc}" class="right-box right-box-role">
+    <div class="right-box__header">
+      <div class="header__title">{{editRole.id ? $t('config.roles.editRole') : $t('config.roles.createRole')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{object: editRole, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form :disabled="detail" :model="editRole" :rules="rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px" ref="roleForm">
+          <!--name-->
+          <el-form-item :label="$t('config.roles.name')" prop="name">
+            <el-input  maxlength="64" placeholder="" id="role-box-input-name"
+                       show-word-limit size="small" type="text" v-model="editRole.name"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('overall.remark')">
+            <el-input maxlength="256" show-word-limit :rows="2" size='mini' type="textarea" v-model="editRole.remark" id="role-box-input-remark"/>
+          </el-form-item>
+
+          <el-form-item :label="$t('config.roles.permission')">
+            <!--<div class="tree-option">
+              <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
+              <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
+            </div>-->
+            <el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
+              <template #default="{ node, data }">
+              <span>
+                <i v-if="data.type == '1'" class="el-icon-menu"></i>
+                <i v-if="data.type == '2'" class="el-icon-edit"></i>
+              </span>
+                {{$t(data.i18n)}}
+              </template>
+            </el-tree>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{object: editRole, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import rightBoxMixin from '@/mixins/rightBox'
+  import { get, post, put } from '@/utils/http'
+export default {
+  name: 'userBox',
+  mixins: [rightBoxMixin],
+  components: {
+  },
+  props: {
+    object: {
+      type: Object
+    },
+    detail: Boolean
+  },
+  data () {
+    return {
+      editRole: {},
+      url: 'sys/role',
+      rightBox: { model: { show: false } },
+      rules: { // 表单校验规则
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      menus: [],
+      selectedIds: [],
+      selectAllFlag: false,
+      expandAllFlag: true
+    }
+  },
+  watch: {
+    object: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.editRole = JSON.parse(JSON.stringify(n))
+        if (this.editRole.roles && this.editRole.roles.length > 0) {
+          this.editRole.roleIds = this.editRole.roles.map(t => t.id)
+        }
+      }
+    }
+  },
+  mounted () {
+    this.getMenus().then(() => {
+      if (this.$refs.menuTree && this.selectedIds && this.selectedIds.length > 0) {
+        this.$refs.menuTree.setCheckedKeys(this.selectedIds, true)
+      }
+    })
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    getMenus: function () {
+      const self = this
+      return new Promise(resolve => {
+        self.menus = []
+        if (self.editRole.id) {
+          get('/sys/role/menu/' + self.editRole.id).then(response => {
+            if (response.code == 200) {
+              self.menus = response.data.menus
+              self.selectedIds = response.data.selectedIds
+            } else {
+              self.$message.error('load menu faild')
+            }
+            resolve()
+          })
+        } else {
+          get('/sys/menu').then(response => {
+            if (response.code == 200) {
+              self.menus = response.data.list
+            } else {
+              self.$message.error('load menu faild')
+            }
+            resolve()
+          })
+        }
+      })
+    },
+    labelFormatter: function (data, node) {
+      return data && data.i18n ? this.$t(data.i18n) : data.name
+    },
+    selectChange: function (data, isCheck, childIsCheck) {
+      if (this.$refs.menuTree) {
+        this.editRole.menuIds = this.$refs.menuTree.getCheckedKeys(true)
+      }
+    },
+    selectAllOrNone: function () {
+      if (this.$refs.menuTree) {
+        if (!this.selectAllFlag) {
+          this.$refs.menuTree.setCheckedNodes(this.menus)
+        } else {
+          this.$refs.menuTree.setCheckedNodes([])
+        }
+        this.selectAllFlag = !this.selectAllFlag
+      }
+    },
+    expandAllOrNone: function () {
+      this.expandAllFlag = !this.expandAllFlag
+      const $self = this
+      if (this.$refs.menuTree) {
+        this.menus.forEach(t => {
+          $self.$refs.menuTree.store.nodesMap[t.id].expanded = $self.expandAllFlag
+        })
+      }
+    },
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+
+      this.$refs.roleForm.validate((valid) => {
+        if (valid) {
+          if (this.editRole.id) {
+            put(this.url, this.editRole).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            post(this.url, this.editRole).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
--- a/src/components/rightBox/settings/UserBox.vue
+++ b/src/components/rightBox/settings/UserBox.vue
@@ -56,8 +56,12 @@
          </el-form-item>
          <!--enable-->
          <el-form-item :label="$t('config.user.enable')">
-            <el-switch id="account-input-status" v-model="editObject.status" :disabled="isCurrentUser(editObject.username) || (editObject.username==='admin' && editObject.id==1) " active-color="#ee9d3f" active-value="1"
-                       inactive-value="0">
+            <el-switch
+               id="account-input-status"
+               v-model="editObject.status"
+               :disabled="(editObject.username === loginName) || (editObject.username==='admin' && editObject.id==1)"
+               :active-value="1"
+               :inactive-value="0">
            </el-switch>
          </el-form-item>

@@ -98,6 +102,7 @@ export default {
    }
    return {
      url: 'sys/user',
+      loginName: localStorage.getItem('cn-username'),
      rules: { // 表单校验规则
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
@@ -142,10 +147,8 @@ export default {
    this.getRoleData()
  },
  methods: {
-    isCurrentUser () {
-      return function (username) {
-        return localStorage.getItem('cn-username') === username
-      }
+    isCurrentUser (username) {
+      return localStorage.getItem('cn-username') === username
    },
    /* 密码失去焦点 检验确认密码 */
    pinBlur () {
@@ -188,12 +191,23 @@ export default {
    },
   getRoleData (){
     get('sys/role?pageSize=-1').then(response => {
-        console.log(response);
        if (response.code === 200) {
          this.roleData = response.data.list
        }
      })
    }
+  },
+  watch: {
+    object: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.editObject = JSON.parse(JSON.stringify(n))
+        if ( !this.editObject.roleIds && this.editObject.roles ) {
+          this.editObject.roleIds = this.editObject.roles[0].id
+        }
+      }
+    }
  }
 }
 </script>
--- a/src/components/table/settings/RoleTable.vue
+++ b/src/components/table/settings/RoleTable.vue
@@ -0,0 +1,106 @@
+<template>
+  <el-table
+    id="roleTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template #header>
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template  #default="scope" :column="item">
+        <template v-if="item.prop === 'name'">
+          <template v-if="scope.row.i18n">
+            <span>{{$t(scope.row.i18n)}}</span>
+          </template>
+          <template v-else-if="scope.row.name">
+            <span>{{scope.row.name}}</span>
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <span v-else>{{scope.row[item.prop]}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+            :resizable="false"
+            :width="operationWidth"
+            fixed="right">
+      <template #header>
+        <div class="table-operation-title">{{$t('overall.option')}}</div>
+      </template>
+      <template #default="scope">
+        <div class="table-operation-items">
+          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-view1"></i></button>
+          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+            <div class="table-operation-item table-operation-item--more">
+              <i class="nz-icon nz-icon-more3"></i>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu >
+                <el-dropdown-item v-has="'user_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+                <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  import table from '@/mixins/table'
+  import { put } from '@/utils/http'
+export default {
+  name: 'roleTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable:'custom'
+        }, {
+          label: this.$t('config.roles.name'),
+          prop: 'name',
+          show: true,
+          sortable:'custom'
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true
+        }
+      ]
+    }
+  }
+}
+</script>
--- a/src/components/table/settings/UserTable.vue
+++ b/src/components/table/settings/UserTable.vue
@@ -45,6 +45,7 @@
                  v-model="scope.row.status"
                  :active-color="theme.themeColor"
                  active-value="1"
+                  :disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id==1) "
                  inactive-value="0"
                  @change="()=>{statusChange(scope.row)}">
          </el-switch>
@@ -88,6 +89,7 @@ export default {
  mixins: [table],
  data () {
    return {
+      loginName: localStorage.getItem('cn-username'),
      tableTitle: [ // 原始table列
        {
          label: 'ID',