acs用户管理更新

acs/nladmin-ui/src/views/login.vue

@@ -9,7 +9,7 @@
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
+        <el-input v-model="loginForm.password" type="password" auto-complete="new-password" placeholder="密码" @keyup.enter.native="handleLogin">
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
@@ -120,14 +120,12 @@ export default {
           code: this.loginForm.code,
           uuid: this.loginForm.uuid
         }
-        if (user.password !== this.cookiePass) {
-          user.password = encrypt(user.password)
-        }
+        user.password = encrypt(user.password)
         if (valid) {
           this.loading = true
           if (user.rememberMe) {
             Cookies.set('username', user.username, { expires: Config.passCookieExpires })
-            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
+            Cookies.set('password', this.loginForm.password, { expires: Config.passCookieExpires })
             Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
           } else {
             Cookies.remove('username')

acs/nladmin-ui/src/views/system/user/index.vue

@@ -80,7 +80,7 @@
             <el-form-item label="邮箱" prop="email">
               <el-input v-model="form.email" style="width: 200px;" />
             </el-form-item>
-            <el-form-item label="部门" prop="dept.id">
+            <el-form-item label="部门" prop="dept.id" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
               <treeselect
                 v-model="form.dept.id"
                 :options="depts"
@@ -89,7 +89,10 @@
                 placeholder="选择部门"
               />
             </el-form-item>
-
+            <br v-if="!crud.status.add">
+            <el-form-item label="密码" prop="password" v-if="crud.status.add">
+              <el-input v-model="form.password" style="width: 200px;" show-password auto-complete="new-password"/>
+            </el-form-item>
             <el-form-item label="性别">
               <el-radio-group v-model="form.gender" style="width: 178px">
                 <el-radio label="男">男</el-radio>
@@ -168,16 +171,25 @@
           <el-table-column
             v-permission="['admin','user:edit','user:del']"
             label="操作"
-            width="115"
+            width="200"
             align="center"
             fixed="right"
           >
             <template slot-scope="scope">
               <udOperation
+                style="display: inline"
                 :data="scope.row"
                 :permission="permission"
                 :disabled-dle="scope.row.id === user.id"
               />
+              <el-button
+                type="text"
+                slot="left"
+                icon="el-icon-refresh-left"
+                v-permission="permission.edit"
+                @click="resetPassword(scope.row)">
+                重置密码
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -189,260 +201,284 @@
 </template>
 
 <script>
-import crudUser from '@/api/system/user'
-import { getDepts, getDeptSuperior } from '@/api/system/dept'
-import { getAll, getLevel } from '@/api/system/role'
-import CRUD, { crud, form, header, presenter } from '@crud/crud'
-import rrOperation from '@crud/RR.operation'
-import crudOperation from '@crud/CRUD.operation'
-import udOperation from '@crud/UD.operation'
-import pagination from '@crud/Pagination'
-import DateRangePicker from '@/components/DateRangePicker'
-import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
-import { mapGetters } from 'vuex'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+  import crudUser from '@/api/system/user'
+  import { getDepts, getDeptSuperior } from '@/api/system/dept'
+  import { getAll, getLevel } from '@/api/system/role'
+  import CRUD, { crud, form, header, presenter } from '@crud/crud'
+  import rrOperation from '@crud/RR.operation'
+  import crudOperation from '@crud/CRUD.operation'
+  import udOperation from '@crud/UD.operation'
+  import pagination from '@crud/Pagination'
+  import DateRangePicker from '@/components/DateRangePicker'
+  import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
+  import { mapGetters } from 'vuex'
+  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
-let userRoles = []
-const defaultForm = {
-  id: null,
-  username: null,
-  nickName: null,
-  gender: '男',
-  email: null,
-  enabled: 'true',
-  roles: [],
-  dept: { id: null },
-  phone: null
-}
-export default {
-  name: 'User',
-  components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
-  cruds() {
-    return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
-  },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
-  // 数据字典
-  dicts: ['user_status'],
-  data() {
-    return {
-      height: document.documentElement.clientHeight - 180 + 'px;',
-      deptName: '', depts: [], deptDatas: [], level: 3, roles: [],
-      roleDatas: [], // 多选时使用
-      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
-      permission: {
-        add: ['admin', 'user:add'],
-        edit: ['admin', 'user:edit'],
-        del: ['admin', 'user:del']
-      },
-      enabledTypeOptions: [
-        { key: 'true', display_name: '激活' },
-        { key: 'false', display_name: '锁定' }
-      ],
-      rules: {
-        username: [
-          { required: true, message: '请输入用户名', trigger: 'blur' },
-          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+  let userRoles = []
+  const defaultForm = {
+    id: null,
+    username: null,
+    nickName: null,
+    gender: '男',
+    email: null,
+    enabled: 'true',
+    roles: [],
+    dept: { id: null },
+    phone: null,
+    password: null
+  }
+  export default {
+    name: 'User',
+    components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
+    cruds() {
+      return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
+    },
+    mixins: [presenter(), header(), form(defaultForm), crud()],
+    // 数据字典
+    dicts: ['user_status'],
+    data() {
+      return {
+        height: document.documentElement.clientHeight - 180 + 'px;',
+        deptName: '', depts: [], deptDatas: [], level: 3, roles: [],
+        roleDatas: [], // 多选时使用
+        defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
+        permission: {
+          add: ['admin', 'user:add'],
+          edit: ['admin', 'user:edit'],
+          del: ['admin', 'user:del']
+        },
+        enabledTypeOptions: [
+          { key: 'true', display_name: '激活' },
+          { key: 'false', display_name: '锁定' }
         ],
-        nickName: [
-          { required: true, message: '请输入用户姓名', trigger: 'blur' },
-          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'user'
-    ])
-  },
-  created() {
-    this.crud.msg.add = '新增成功，默认密码：123456'
-  },
-  mounted: function() {
-    const that = this
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 180 + 'px;'
-    }
-  },
-  methods: {
-    changeRole(value) {
-      userRoles = []
-      value.forEach(function(data, index) {
-        const role = { id: data }
-        userRoles.push(role)
-      })
-    },
-    deleteTag(value) {
-      userRoles.forEach(function(data, index) {
-        if (data.id === value) {
-          userRoles.splice(index, value)
+        rules: {
+          username: [
+            { required: true, message: '请输入用户名', trigger: 'blur' },
+            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+          ],
+          nickName: [
+            { required: true, message: '请输入用户姓名', trigger: 'blur' },
+            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+          ]
         }
-      })
-    },
-    // 新增与编辑前做的操作
-    [CRUD.HOOK.afterToCU](crud, form) {
-      this.getRoles()
-      if (form.id == null) {
-        this.getDepts()
-      } else {
-        this.getSupDepts(form.dept.id)
       }
-      this.getRoleLevel()
-      form.enabled = form.enabled.toString()
     },
-    // 新增前将多选的值设置为空
-    [CRUD.HOOK.beforeToAdd]() {
-      this.roleDatas = []
+    computed: {
+      ...mapGetters([
+        'user'
+      ])
     },
-    // 初始化编辑时候的角色与岗位
-    [CRUD.HOOK.beforeToEdit](crud, form) {
-      this.roleDatas = []
-      userRoles = []
-      const _this = this
-      form.roles.forEach(function(role, index) {
-        _this.roleDatas.push(role.id)
-        const rol = { id: role.id }
-        userRoles.push(rol)
-      })
+    created() {
+      this.crud.msg.add = '新增成功'
     },
-    // 提交前做的操作
-    [CRUD.HOOK.afterValidateCU](crud) {
-      if (!crud.form.dept.id) {
-        this.$message({
-          message: '部门不能为空',
-          type: 'warning'
+    mounted: function() {
+      const that = this
+      window.onresize = function temp() {
+        that.height = document.documentElement.clientHeight - 180 + 'px;'
+      }
+    },
+    methods: {
+      changeRole(value) {
+        userRoles = []
+        value.forEach(function(data, index) {
+          const role = { id: data }
+          userRoles.push(role)
         })
-        return false
-      } else if (this.roleDatas.length === 0) {
-        this.$message({
-          message: '角色不能为空',
-          type: 'warning'
-        })
-        return false
-      }
-      crud.form.roles = userRoles
-      return true
-    },
-    // 获取左侧部门数据
-    getDeptDatas(node, resolve) {
-      console.log('node', node)
-      console.log('resolve', resolve)
-      const sort = 'id,desc'
-      const params = { sort: sort }
-      if (typeof node !== 'object') {
-        if (node) {
-          params['name'] = node
-        }
-      } else if (node.level !== 0) {
-        params['pid'] = node.data.id
-      }
-      console.log('params', params)
-      setTimeout(() => {
-        getDepts(params).then(res => {
-          console.log('res', res)
-          if (resolve) {
-            resolve(res.content)
-          } else {
-            this.deptDatas = res.content
+      },
+      deleteTag(value) {
+        userRoles.forEach(function(data, index) {
+          if (data.id === value) {
+            userRoles.splice(index, value)
           }
         })
-      }, 100)
-    },
-    getDepts() {
-      console.log('获取部门')
-      getDepts({ enabled: true }).then(res => {
-        console.log('获取的部门信息', res)
-        this.depts = res.content.map(function(obj) {
-          if (obj.hasChildren) {
-            obj.children = null
-          }
-          return obj
+      },
+      // 新增与编辑前做的操作
+      [CRUD.HOOK.afterToCU](crud, form) {
+        this.getRoles()
+        if (form.id == null) {
+          this.getDepts()
+        } else {
+          this.getSupDepts(form.dept.id)
+        }
+        this.getRoleLevel()
+        form.enabled = form.enabled.toString()
+      },
+      // 新增前将多选的值设置为空
+      [CRUD.HOOK.beforeToAdd]() {
+        this.form.password = '123456'
+        this.roleDatas = []
+      },
+      // 初始化编辑时候的角色与岗位
+      [CRUD.HOOK.beforeToEdit](crud, form) {
+        this.roleDatas = []
+        userRoles = []
+        const _this = this
+        form.roles.forEach(function(role, index) {
+          _this.roleDatas.push(role.id)
+          const rol = { id: role.id }
+          userRoles.push(rol)
         })
-      })
-    },
-    getSupDepts(deptId) {
-      getDeptSuperior(deptId).then(res => {
-        console.log('父部门', res)
-        const date = res.content
-        this.buildDepts(date)
-        this.depts = date
-      })
-    },
-    buildDepts(depts) {
-      depts.forEach(data => {
-        if (data.children) {
-          this.buildDepts(data.children)
+      },
+      // 提交前做的操作
+      [CRUD.HOOK.afterValidateCU](crud) {
+        if (!crud.form.dept.id) {
+          this.$message({
+            message: '部门不能为空',
+            type: 'warning'
+          })
+          return false
+        } else if (this.roleDatas.length === 0) {
+          this.$message({
+            message: '角色不能为空',
+            type: 'warning'
+          })
+          return false
         }
-        if (data.hasChildren && !data.children) {
-          data.children = null
+        crud.form.roles = userRoles
+        return true
+      },
+      // 获取左侧部门数据
+      getDeptDatas(node, resolve) {
+        console.log('node', node)
+        console.log('resolve', resolve)
+        const sort = 'id,desc'
+        const params = { sort: sort }
+        if (typeof node !== 'object') {
+          if (node) {
+            params['name'] = node
+          }
+        } else if (node.level !== 0) {
+          params['pid'] = node.data.id
         }
-      })
-    },
-    // 获取弹窗内部门数据
-    loadDepts({ action, parentNode, callback }) {
-      if (action === LOAD_CHILDREN_OPTIONS) {
-        getDepts({ enabled: true, pid: parentNode.id }).then(res => {
-          parentNode.children = res.content.map(function(obj) {
+        console.log('params', params)
+        setTimeout(() => {
+          getDepts(params).then(res => {
+            console.log('res', res)
+            if (resolve) {
+              resolve(res.content)
+            } else {
+              this.deptDatas = res.content
+            }
+          })
+        }, 100)
+      },
+      getDepts() {
+        console.log('获取部门')
+        getDepts({ enabled: true }).then(res => {
+          console.log('获取的部门信息', res)
+          this.depts = res.content.map(function(obj) {
             if (obj.hasChildren) {
               obj.children = null
             }
             return obj
           })
-          setTimeout(() => {
-            callback()
-          }, 200)
         })
-      }
-    },
-    // 切换部门
-    handleNodeClick(data) {
-      if (data.pid === 0) {
-        this.query.deptId = null
-      } else {
-        this.query.deptId = data.id
-      }
-      this.crud.toQuery()
-    },
-    // 改变状态
-    changeEnabled(data, val) {
-      this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        crudUser.edit(data).then(res => {
-          this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+      },
+      getSupDepts(deptId) {
+        getDeptSuperior(deptId).then(res => {
+          console.log('父部门', res)
+          const date = res.content
+          this.buildDepts(date)
+          this.depts = date
+        })
+      },
+      buildDepts(depts) {
+        depts.forEach(data => {
+          if (data.children) {
+            this.buildDepts(data.children)
+          }
+          if (data.hasChildren && !data.children) {
+            data.children = null
+          }
+        })
+      },
+      // 获取弹窗内部门数据
+      loadDepts({ action, parentNode, callback }) {
+        if (action === LOAD_CHILDREN_OPTIONS) {
+          getDepts({ enabled: true, pid: parentNode.id }).then(res => {
+            parentNode.children = res.content.map(function(obj) {
+              if (obj.hasChildren) {
+                obj.children = null
+              }
+              return obj
+            })
+            setTimeout(() => {
+              callback()
+            }, 200)
+          })
+        }
+      },
+      // 切换部门
+      handleNodeClick(data) {
+        if (data.pid === 0) {
+          this.query.deptId = null
+        } else {
+          this.query.deptId = data.id
+        }
+        this.crud.toQuery()
+      },
+      // 改变状态
+      changeEnabled(data, val) {
+        this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          crudUser.edit(data).then(res => {
+            this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+          }).catch(() => {
+            data.enabled = !data.enabled
+          })
         }).catch(() => {
           data.enabled = !data.enabled
         })
-      }).catch(() => {
-        data.enabled = !data.enabled
-      })
-    },
-    // 获取弹窗内角色数据
-    getRoles() {
-      getAll().then(res => {
-        this.roles = res
-      }).catch(() => {
-      })
-    },
-    // 获取权限级别
-    getRoleLevel() {
-      getLevel().then(res => {
-        this.level = res.level
-      }).catch(() => {
-      })
-    },
-    checkboxT(row, rowIndex) {
-      return row.id !== this.user.id
+      },
+      // 获取弹窗内角色数据
+      getRoles() {
+        getAll().then(res => {
+          this.roles = res
+        }).catch(() => {
+        })
+      },
+      // 获取权限级别
+      getRoleLevel() {
+        getLevel().then(res => {
+          this.level = res.level
+        }).catch(() => {
+        })
+      },
+      checkboxT(row, rowIndex) {
+        return row.id !== this.user.id
+      },
+      resetPassword(row) {
+        row.password = null
+        this.$prompt('', '重置密码', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          inputPlaceholder: '请输入新的密码',
+          inputPattern: /^[A-Z|a-z|0-9|(._~!@#$^&*)]{6,20}$/,
+          inputErrorMessage: '密码格式不正确,只能是6-20位密码',
+          closeOnClickModal: false
+        }).then(({ value }) => {
+          row.password = value
+          crudUser.edit(row).then(res => {
+            this.crud.toQuery()
+            this.crud.notify('密码重置成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '取消输入'
+          })
+        })
+      }
     }
   }
-}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
-  height: 30px;
-  line-height: 30px;
-}
+  ::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
+    height: 30px;
+    line-height: 30px;
+  }
 </style>