fix :修复部分bug

src/views/modules/sys/menu/index.vue

@@ -2,7 +2,12 @@
   <el-card class="mod-menu">
     <el-form :inline="true" :model="dataForm">
       <el-form-item>
-        <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="handleAddOrUpdate()">新增</el-button>
+        <el-button
+          icon="el-icon-plus"
+          v-if="isAuth('sys:menu:save')"
+          type="primary"
+          @click="handleAddOrUpdate()"
+        >新增菜单</el-button>
       </el-form-item>
     </el-form>
     <el-table :data="dataList" row-key="menuId" border style="width: 100%;">

src/views/modules/sys/role/index.vue

@@ -6,7 +6,12 @@
       </el-form-item>
       <el-form-item>
         <el-button @click="handleGetTableList()">查询</el-button>
-        <el-button v-if="isAuth('sys:role:save')" type="primary" @click="handleAddOrUpdate()">新增</el-button>
+        <el-button
+          icon="el-icon-plus"
+          v-if="isAuth('sys:role:save')"
+          type="primary"
+          @click="handleAddOrUpdate()"
+        >新增角色</el-button>
         <el-button
           v-if="isAuth('sys:role:delete')"
           type="danger"
@@ -138,7 +143,7 @@ export default {
       let ids = id ? [id] : this.dataListSelections.map(item => {
         return item.roleId
       })
-      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+      this.$confirm(`确定删除该角色吗？删除后该角色所有关联账号将无法使用相关权限。`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'

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

@@ -1,14 +1,33 @@
 <template>
   <el-dialog
-    :title="!dataForm.id ? '新增' : '编辑'"
+    :title="!dataForm.id ? '新增角色' : '编辑角色'"
     :close-on-click-modal="false"
-    :visible.sync="visible">
+    :visible.sync="visible"
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="handleConfirm()" label-width="80px">
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="handleConfirm()"
+      label-width="80px"
+    >
       <el-form-item label="角色名称" prop="roleName">
-        <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
+        <el-input
+          clearable
+          maxlength="20"
+          show-word-limit
+          v-model="dataForm.roleName"
+          placeholder="角色名称"
+        ></el-input>
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+        <el-input
+          clearable
+          maxlength="30"
+          show-word-limit
+          v-model="dataForm.remark"
+          placeholder="备注"
+        ></el-input>
       </el-form-item>
       <el-form-item size="mini" label="授权">
         <el-tree
@@ -17,8 +36,8 @@
           node-key="menuId"
           ref="menuListTree"
           :default-expand-all="true"
-          show-checkbox>
+          show-checkbox
-        </el-tree>
+        ></el-tree>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -29,99 +48,105 @@
 </template>
 
 <script>
-  import { treeDataTranslate } from '@/utils'
+import { treeDataTranslate } from '@/utils'
-  import { apiSysMenuList, apiSysRoleInfo, apiSysRoleConfirm } from '@/api/api_sys'
+import { apiSysMenuList, apiSysRoleInfo, apiSysRoleConfirm } from '@/api/api_sys'
 
-  export default {
+export default {
-    data () {
+  data () {
-      return {
+    return {
-        visible: false,
+      visible: false,
-        menuList: [],
+      menuList: [],
-        menuListTreeProps: {
+      menuListTreeProps: {
-          label: 'name',
+        label: 'name',
-          children: 'children'
+        children: 'children'
-        },
+      },
-        dataForm: {
+      dataForm: {
+        id: 0,
+        roleName: '',
+        remark: ''
+      },
+      dataRule: {
+        roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
+      },
+      tempKey: -666666, // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
+      apiType: '' // api类型
+    }
+  },
+  methods: {
+    init (id) {
+      this.handleGetSysMenuList()
+      if (id) {
+        this.dataForm.id = id || 0
+        this.handleEdit()
+        this.apiType = '/update'
+      } else {
+        this.dataForm = {
           id: 0,
           roleName: '',
           remark: ''
-        },
+        }
-        dataRule: {
+        this.apiType = '/save'
-          roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
-        },
-        tempKey: -666666, // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
-        apiType: '' // api类型
       }
     },
-    methods: {
+    // 获取权限列表
-      init (id) {
+    handleGetSysMenuList () {
-        this.handleGetSysMenuList()
+      apiSysMenuList({}).then(res => {
-        if (id) {
+        this.menuList = treeDataTranslate(res, 'menuId')
-          this.dataForm.id = id || 0
+        this.visible = true
-          this.handleEdit()
+        this.$nextTick(() => {
-          this.apiType = '/update'
+          this.$refs['dataForm'].resetFields()
-        } else {
+          this.$refs.menuListTree.setCheckedKeys([])
-          this.apiType = '/save'
-        }
-      },
-      // 获取权限列表
-      handleGetSysMenuList () {
-        apiSysMenuList({}).then(res => {
-          this.menuList = treeDataTranslate(res, 'menuId')
-          this.visible = true
-          this.$nextTick(() => {
-            this.$refs['dataForm'].resetFields()
-            this.$refs.menuListTree.setCheckedKeys([])
-          })
         })
-      },
+      })
-      // 编辑
+    },
-      handleEdit () {
+    // 编辑
-        apiSysRoleInfo({}, `/${this.dataForm.id}`).then(res => {
+    handleEdit () {
-          if (res && res.code === 0) {
+      apiSysRoleInfo({}, `/${this.dataForm.id}`).then(res => {
-            this.dataForm.roleName = res.role.roleName
+        if (res && res.code === 0) {
-            this.dataForm.remark = res.role.remark
+          this.dataForm.roleName = res.role.roleName
-            var idx = res.role.menuIdList.indexOf(this.tempKey)
+          this.dataForm.remark = res.role.remark
-            if (idx !== -1) {
+          var idx = res.role.menuIdList.indexOf(this.tempKey)
-              res.role.menuIdList.splice(idx, res.role.menuIdList.length - idx)
+          if (idx !== -1) {
-            }
+            res.role.menuIdList.splice(idx, res.role.menuIdList.length - idx)
-            this.dataDemo = res.role.menuIdList
-            setTimeout(() => {
-              this.$nextTick(() => {
-                this.$refs.menuListTree.setCheckedKeys(res.role.menuIdList)
-              })
-            }, 50)
           }
-        })
+          this.dataDemo = res.role.menuIdList
-      },
+          setTimeout(() => {
-      // 提交
+            this.$nextTick(() => {
-      handleConfirm () {
+              console.log(' this.dataForm: ', this.dataForm)
-        this.$refs['dataForm'].validate((valid) => {
+              this.$refs.menuListTree.setCheckedKeys(res.role.menuIdList)
-          if (valid) {
-            let params = {
-              'roleId': this.dataForm.id || undefined,
-              'roleName': this.dataForm.roleName,
-              'remark': this.dataForm.remark,
-              'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())
-            }
-            apiSysRoleConfirm(params, this.apiType).then(res => {
-              if (res && res.code === 0) {
-                this.$message({
-                  message: '操作成功',
-                  type: 'success',
-                  duration: 1500,
-                  onClose: () => {
-                    this.visible = false
-                    this.$emit('refreshDataList')
-                  }
-                })
-              } else {
-                this.$message.error(res.msg)
-              }
             })
+          }, 50)
+        }
+      })
+    },
+    // 提交
+    handleConfirm () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          let params = {
+            'roleId': this.dataForm.id || undefined,
+            'roleName': this.dataForm.roleName,
+            'remark': this.dataForm.remark,
+            'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())
           }
-        })
+          apiSysRoleConfirm(params, this.apiType).then(res => {
-      }
+            if (res && res.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        }
+      })
     }
   }
+}
 </script>

src/views/modules/sys/user/index.vue

@@ -2,11 +2,11 @@
   <el-card class="mod-user">
     <el-form :inline="true" :model="dataForm" @keyup.enter.native="handleGetTableList()">
       <el-form-item>
-        <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
+        <el-input v-model="dataForm.userName" placeholder="员工姓名" clearable></el-input>
       </el-form-item>
       <el-form-item>
         <el-button @click="handleGetTableList()">查询</el-button>
-        <el-button v-if="isAuth('sys:user:save')" type="primary" @click="handleAddOrUpdate()">新增</el-button>
+        <el-button v-if="isAuth('sys:user:save')" type="primary" @click="handleAddOrUpdate()">新增账户</el-button>
         <el-button
           v-if="isAuth('sys:user:delete')"
           type="danger"
@@ -24,8 +24,8 @@
     >
       <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
       <el-table-column prop="userId" header-align="center" align="center" width="80" label="ID"></el-table-column>
-      <el-table-column prop="username" header-align="center" align="center" label="用户名"></el-table-column>
+      <el-table-column prop="username" header-align="center" align="center" label="员工姓名"></el-table-column>
-      <el-table-column prop="email" header-align="center" align="center" label="邮箱"></el-table-column>
+      <el-table-column prop="email" header-align="center" align="center" label="账号"></el-table-column>
       <el-table-column prop="mobile" header-align="center" align="center" label="手机号"></el-table-column>
       <el-table-column prop="status" header-align="center" align="center" label="状态">
         <template slot-scope="scope">
@@ -145,7 +145,7 @@ export default {
       let userIds = id ? [id] : this.dataListSelections.map(item => {
         return item.userId
       })
-      this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+      this.$confirm(`确定删除该账户吗？删除后该账户将无法使用`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'

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

@@ -2,9 +2,16 @@
   <el-dialog
     :title="!dataForm.id ? '新增' : '编辑'"
     :close-on-click-modal="false"
-    :visible.sync="visible">
+    :visible.sync="visible"
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="handleConfirm()" label-width="80px">
+  >
-      <el-form-item label="用户名" prop="username">
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="handleConfirm()"
+      label-width="80px"
+    >
+      <el-form-item label="员工姓名" prop="username">
         <el-input v-model="dataForm.username" placeholder="登录帐号"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
@@ -21,7 +28,11 @@
       </el-form-item>
       <el-form-item label="角色" size="mini" prop="roleIdList">
         <el-checkbox-group v-model="dataForm.roleIdList">
-          <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
+          <el-checkbox
+            v-for="role in roleList"
+            :key="role.roleId"
+            :label="role.roleId"
+          >{{ role.roleName }}</el-checkbox>
         </el-checkbox-group>
       </el-form-item>
       <el-form-item label="状态" size="mini" prop="status">
@@ -39,140 +50,140 @@
 </template>
 
 <script>
-  import { isEmail, isMobile } from '@/utils/validate'
+import { isEmail, isMobile } from '@/utils/validate'
-  import { apiSysUserInfo, apiSysRoleSelect, apiSysUserConfirm } from '@/api/api_sys'
+import { apiSysUserInfo, apiSysRoleSelect, apiSysUserConfirm } from '@/api/api_sys'
 
-  export default {
+export default {
-    data () {
+  data () {
-      var validatePassword = (rule, value, callback) => {
+    var validatePassword = (rule, value, callback) => {
-        if (!this.dataForm.id && !/\S/.test(value)) {
+      if (!this.dataForm.id && !/\S/.test(value)) {
-          callback(new Error('密码不能为空'))
+        callback(new Error('密码不能为空'))
-        } else {
+      } else {
-          callback()
+        callback()
-        }
-      }
-      var validateComfirmPassword = (rule, value, callback) => {
-        if (!this.dataForm.id && !/\S/.test(value)) {
-          callback(new Error('确认密码不能为空'))
-        } else if (this.dataForm.password !== value) {
-          callback(new Error('确认密码与密码输入不一致'))
-        } else {
-          callback()
-        }
-      }
-      var validateEmail = (rule, value, callback) => {
-        if (!isEmail(value)) {
-          callback(new Error('邮箱格式错误'))
-        } else {
-          callback()
-        }
-      }
-      var validateMobile = (rule, value, callback) => {
-        if (!isMobile(value)) {
-          callback(new Error('手机号格式错误'))
-        } else {
-          callback()
-        }
-      }
-      return {
-        visible: false,
-        roleList: [],
-        dataForm: {
-          id: 0,
-          username: '',
-          password: '',
-          comfirmPassword: '',
-          salt: '',
-          email: '',
-          mobile: '',
-          roleIdList: [],
-          status: 1
-        },
-        dataRule: {
-          username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
-          password: [{ validator: validatePassword, trigger: 'blur' }],
-          comfirmPassword: [{ validator: validateComfirmPassword, trigger: 'blur' }],
-          email: [
-            { required: true, message: '邮箱不能为空', trigger: 'blur' },
-            { validator: validateEmail, trigger: 'blur' }
-          ],
-          mobile: [
-            { required: true, message: '手机号不能为空', trigger: 'blur' },
-            { validator: validateMobile, trigger: 'blur' }
-          ]
-        },
-        apiType: '' // api类型
-      }
-    },
-    methods: {
-      init (id) {
-        this.handleGetSysRoleSelect()
-        if (id) {
-          this.dataForm.id = id || 0
-          this.handleEdit()
-          this.apiType = '/update'
-        } else {
-          this.apiType = '/save'
-        }
-      },
-      // 获取角色选择列表
-      handleGetSysRoleSelect (id) {
-        apiSysRoleSelect({}).then(res => {
-          this.roleList = res && res.code === 0 ? res.list : []
-          this.visible = true
-          this.$nextTick(() => {
-            this.$refs['dataForm'].resetFields()
-          })
-        })
-      },
-      // 编辑
-      handleEdit () {
-        apiSysUserInfo({}, `/${this.dataForm.id}`).then(res => {
-          if (res && res.code === 0) {
-            this.$nextTick(() => {
-              this.dataForm.username = res.user.username
-              this.dataForm.salt = res.user.salt
-              this.dataForm.email = res.user.email
-              this.dataForm.mobile = res.user.mobile
-              this.dataForm.roleIdList = res.user.roleIdList
-              this.dataForm.status = res.user.status
-            })
-            this.visible = true
-          }
-        })
-      },
-      // 提交
-      handleConfirm () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            let params = {
-              'userId': this.dataForm.id || undefined,
-              'username': this.dataForm.username,
-              'password': this.dataForm.password,
-              'salt': this.dataForm.salt,
-              'email': this.dataForm.email,
-              'mobile': this.dataForm.mobile,
-              'status': this.dataForm.status,
-              'roleIdList': this.dataForm.roleIdList
-            }
-            apiSysUserConfirm(params, this.apiType).then(res => {
-              if (res && res.code === 0) {
-                this.$message({
-                  message: '操作成功',
-                  type: 'success',
-                  duration: 1500,
-                  onClose: () => {
-                    this.visible = false
-                    this.$emit('refreshDataList')
-                  }
-                })
-              } else {
-                this.$message.error(res.msg)
-              }
-            })
-          }
-        })
       }
     }
+    var validateComfirmPassword = (rule, value, callback) => {
+      if (!this.dataForm.id && !/\S/.test(value)) {
+        callback(new Error('确认密码不能为空'))
+      } else if (this.dataForm.password !== value) {
+        callback(new Error('确认密码与密码输入不一致'))
+      } else {
+        callback()
+      }
+    }
+    var validateEmail = (rule, value, callback) => {
+      if (!isEmail(value)) {
+        callback(new Error('邮箱格式错误'))
+      } else {
+        callback()
+      }
+    }
+    var validateMobile = (rule, value, callback) => {
+      if (!isMobile(value)) {
+        callback(new Error('手机号格式错误'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      visible: false,
+      roleList: [],
+      dataForm: {
+        id: 0,
+        username: '',
+        password: '',
+        comfirmPassword: '',
+        salt: '',
+        email: '',
+        mobile: '',
+        roleIdList: [],
+        status: 1
+      },
+      dataRule: {
+        username: [{ required: true, message: '员工姓名不能为空', trigger: 'blur' }],
+        password: [{ validator: validatePassword, trigger: 'blur' }],
+        comfirmPassword: [{ validator: validateComfirmPassword, trigger: 'blur' }],
+        email: [
+          { required: true, message: '邮箱不能为空', trigger: 'blur' },
+          { validator: validateEmail, trigger: 'blur' }
+        ],
+        mobile: [
+          { required: true, message: '手机号不能为空', trigger: 'blur' },
+          { validator: validateMobile, trigger: 'blur' }
+        ]
+      },
+      apiType: '' // api类型
+    }
+  },
+  methods: {
+    init (id) {
+      this.handleGetSysRoleSelect()
+      if (id) {
+        this.dataForm.id = id || 0
+        this.handleEdit()
+        this.apiType = '/update'
+      } else {
+        this.apiType = '/save'
+      }
+    },
+    // 获取角色选择列表
+    handleGetSysRoleSelect (id) {
+      apiSysRoleSelect({}).then(res => {
+        this.roleList = res && res.code === 0 ? res.list : []
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()
+        })
+      })
+    },
+    // 编辑
+    handleEdit () {
+      apiSysUserInfo({}, `/${this.dataForm.id}`).then(res => {
+        if (res && res.code === 0) {
+          this.$nextTick(() => {
+            this.dataForm.username = res.user.username
+            this.dataForm.salt = res.user.salt
+            this.dataForm.email = res.user.email
+            this.dataForm.mobile = res.user.mobile
+            this.dataForm.roleIdList = res.user.roleIdList
+            this.dataForm.status = res.user.status
+          })
+          this.visible = true
+        }
+      })
+    },
+    // 提交
+    handleConfirm () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          let params = {
+            'userId': this.dataForm.id || undefined,
+            'username': this.dataForm.username,
+            'password': this.dataForm.password,
+            'salt': this.dataForm.salt,
+            'email': this.dataForm.email,
+            'mobile': this.dataForm.mobile,
+            'status': this.dataForm.status,
+            'roleIdList': this.dataForm.roleIdList
+          }
+          apiSysUserConfirm(params, this.apiType).then(res => {
+            if (res && res.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        }
+      })
+    }
   }
+}
 </script>