api用户管理

src/views/system/user/index.vue

@@ -4,18 +4,17 @@
       <!--侧边部门数据-->
       <div class="elect-cont-left">
         <div class="head-container">
-          <el-input v-model="filterText" clearable size="small" placeholder="输入全宗名称搜索" prefix-icon="el-icon-search" class="filter-item" />
+          <el-input v-model="filterText" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" class="filter-item" />
         </div>
         <el-tree ref="tree" v-loading="crud.loading" :data="fondsDatas" :props="defaultProps" :expand-on-click-node="false" :default-expanded-keys="defaultExpandedKeys" node-key="id" highlight-current :filter-node-method="filterNode" @node-click="handleNodeClick">
           <template slot-scope="{ node, data }">
             <div :class="{'top-level': data.id === 0}">
-              <span style="color: #0C0E1E;">
+              <span>
                 {{ data.fondsName }}
-                <span style="color: #545B65;">{{ data.deptsName }}</span>
+                <span>{{ data.deptsName }}</span>
               </span>
             </div>
           </template>
-
         </el-tree>
       </div>
       <!--用户数据-->
@@ -33,6 +32,12 @@
             <rrOperation />
           </div>
           <crudOperation :permission="permission">
+            <template v-slot:middle>
+              <el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">
+                <i class="iconfont icon-shanchu" />
+                删除
+              </el-button>
+            </template>
             <el-button slot="right" icon="el-icon-refresh-left" size="mini" :disabled="crud.selections.length !== 1" @click="handlePwdReset(crud.selections)">密码重置</el-button>
           </crudOperation>
         </div>
@@ -45,8 +50,8 @@
             <span class="dialog-left-bottom" /> -->
             <div class="setting-dialog">
               <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="90px">
-                <el-form-item label="账号" prop="userName">
-                  <el-input v-model="form.userName" @keydown.native="keydown($event)" />
+                <el-form-item label="账号" prop="username">
+                  <el-input v-model="form.username" @keydown.native="keydown($event)" />
                 </el-form-item>
                 <el-form-item label="电话" prop="phone">
                   <el-input v-model.number="form.phone" />
@@ -57,9 +62,9 @@
                 <el-form-item label="邮箱" prop="email">
                   <el-input v-model="form.email" />
                 </el-form-item>
-                <el-form-item label="所属全宗" prop="fondsId">
+                <el-form-item label="所属全宗" prop="fonds.id">
                   <!-- <treeselect v-model="form.fondsId" :options="fondsOptions" placeholder="选择全宗" :normalizer="fondsNormalizer" @input="changeFonds" /> -->
-                  <el-select v-model="form.fondsId" placeholder="请选择" style="width: 225px;" @change="changeFondsValue($event)">
+                  <el-select v-model="form.fonds.id" placeholder="请选择" style="width: 225px;" @change="changeFondsValue($event)">
                     <el-option
                       v-for="(item,index) in fondsOptions"
                       :key="index"
@@ -68,10 +73,10 @@
                     />
                   </el-select>
                 </el-form-item>
-                <el-form-item label="所属部门" prop="deptsId">
+                <el-form-item label="所属部门" prop="dept.id">
                   <!-- <treeselect v-model="form.deptsId" :options="depts" :load-options="loadDepts" placeholder="选择部门" /> -->
                   <treeselect
-                    v-model="form.deptsId"
+                    v-model="form.dept.id"
                     :options="depts"
                     :load-options="loadDepts"
                     placeholder="选择部门"
@@ -101,9 +106,9 @@
                     <el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.id" />
                   </el-select>
                 </el-form-item>
-                <el-form-item style="margin-bottom: 0;" label="岗位" prop="jobs" class="is-required">
-                  <el-select v-model="jobDatas" style="width: 584px" multiple placeholder="请选择" @remove-tag="deleteTag" @change="changeJob">
-                    <el-option v-for="item in jobs" :key="item.postName" :label="item.postName" :value="item.id" />
+                <el-form-item style="margin-bottom: 0;" label="岗位" prop="posts" class="is-required">
+                  <el-select ref="paramsSelect" v-model="postDatas" style="width: 584px" multiple placeholder="请选择" @remove-tag="deleteTag" @change="changePost">
+                    <el-option v-for="item in postsOptions" :key="item.id" :label="item.postName" :value="item.id" />
                   </el-select>
                 </el-form-item>
               </el-form>
@@ -142,7 +147,7 @@
           <!--表格渲染-->
           <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @row-click="clickRowHandler" @selection-change="crud.selectionChangeHandler">
             <el-table-column :selectable="checkboxT" type="selection" align="center" width="55" />
-            <el-table-column :show-overflow-tooltip="true" prop="userName" label="账号" />
+            <el-table-column :show-overflow-tooltip="true" prop="username" label="账号" />
             <el-table-column :show-overflow-tooltip="true" prop="nickName" label="用户名" />
             <el-table-column prop="gender" label="性别" width="60" />
             <el-table-column :show-overflow-tooltip="true" prop="phone" label="电话" />
@@ -179,7 +184,7 @@ import crudUser, { resetpassword } from '@/api/system/user'
 import { isvalidPhone } from '@/utils/validate'
 import { getDepts, FetchSonDepts } from '@/api/system/dept'
 import { FetchFondsAll } from '@/api/system/fonds'
-import { getAll, getLevel } from '@/api/system/role'
+import { getAll } from '@/api/system/role'
 import { getAllJob } from '@/api/system/job'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
@@ -193,13 +198,20 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 import Vue from 'vue'
 let userRoles = []
-let userJobs = []
-const defaultForm = { id: null, userName: null, nickName: null, gender: '男', email: null, enabled: null, fondsId: null, roles: [], jobs: [], deptsId: null, phone: null }
+let userPosts = []
+const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: null, fonds: { id: null }, roles: [], posts: [], dept: { id: null }, phone: null }
 export default {
   name: 'User',
   components: { Treeselect, crudOperation, rrOperation, pagination, DateRangePicker },
   cruds() {
-    return CRUD({ title: '用户', url: 'api/users/initUserList', sort: 'update_time,asc', crudMethod: { ...crudUser }})
+    return CRUD({ title: '用户', url: 'api/users/initUserList', sort: '', crudMethod: { ...crudUser }, optShow: {
+      add: true,
+      edit: true,
+      del: false,
+      reset: true,
+      download: true,
+      group: false
+    }})
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   // 数据字典
@@ -215,9 +227,15 @@ export default {
         callback()
       }
     }
-    var validateJob = (rule, value, callback) => {
-      console.log(value)
-      if (this.jobDatas.length > 0) {
+    const validateRole = (rule, value, callback) => {
+      if (this.roleDatas.length > 0) {
+        callback()
+      } else {
+        callback(new Error('请选择角色'))
+      }
+    }
+    const validatePost = (rule, value, callback) => {
+      if (this.postDatas.length > 0) {
         callback()
       } else {
         callback(new Error('请选择岗位'))
@@ -230,13 +248,13 @@ export default {
       blurryTime: null,
       btnLoading: false,
       resetVisible: false,
-      // delVisible: false,
-      // deleteData: {},
       height: document.documentElement.clientHeight - 180 + 'px;',
-      deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
-      jobDatas: [], roleDatas: [], // 多选时使用
+      deptName: '', depts: [], deptDatas: [], postsOptions: [], level: 3, roles: [],
+      postDatas: [], roleDatas: [], // 多选时使用
       fondsDatas: [],
       fondsOptions: [],
+      leftFondsId: '',
+      leftDeptsId: '',
       filterText: '',
       defaultExpandedKeys: [],
       defaultProps: { children: 'children', label: 'fondsName' },
@@ -249,9 +267,9 @@ export default {
         { key: '1', display_name: '激活' },
         { key: '0', display_name: '锁定' }
       ],
-
+      deleteData: [],
       rules: {
-        userName: [
+        username: [
           { required: true, message: '请输入用户名', trigger: 'blur' },
           { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
         ],
@@ -266,17 +284,23 @@ export default {
         phone: [
           { required: true, trigger: 'blur', validator: validPhone }
         ],
-        'deptsId': [
+        'dept.id': [
           { required: true, trigger: 'blur', message: '请选择部门' }
         ],
+        'fonds.id': [
+          { required: true, trigger: 'blur', message: '请选择全宗' }
+        ],
         gender: [
           { required: true, trigger: 'change', message: '请选择性别' }
         ],
         enabled: [
           { required: true, trigger: 'change', message: '请选择状态' }
         ],
-        jobs: [
-          { trigger: 'blur', validator: validateJob }
+        roles: [
+          { trigger: 'blur', validator: validateRole }
+        ],
+        posts: [
+          { trigger: 'blur', validator: validatePost }
         ]
       }
     }
@@ -316,10 +340,104 @@ export default {
         this.crud.query.endTime = this.blurryTime[1]
       }
     },
+    // 新增与编辑前做的操作
+    [CRUD.HOOK.afterToCU](crud, form) {
+      this.getRoles()
+      this.getPosts()
+      console.log('postsvvvv', this.postsOptions)
+      console.log('form', form)
+      console.log(this.crud.status.edit)
+      // if (this.crud.status.edit) {
+      //   if (form.postIds.includes(',')) {
+      //     const arr = form.postIds.split(',')
+      //     console.log(arr)
+      //     arr.forEach(item => {
+      //       const json = {}
+      //       json.id = item
+      //       this.postDatas.push(json)
+      //       this.posts.push({
+
+      //       })
+      //       console.log(this.postDatas)
+      //     })
+      //   } else {
+      //     this.postDatas.push(form.postIds)
+      //   }
+      // }
+    },
+    // 新增前将多选的值设置为空
+    [CRUD.HOOK.beforeToAdd]() {
+      this.postDatas = []
+      this.roleDatas = []
+    },
+    // 初始化编辑时候的角色与岗位
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      console.log('beforeToEdit', crud)
+      console.log('beforeToEditform.roles', form.roles)
+      this.postDatas = []
+      this.roleDatas = []
+      userRoles = []
+      userPosts = []
+      const _this = this
+      form.roles.forEach(function(role, index) {
+        _this.roleDatas.push(role.id)
+        const rol = { id: role.id }
+        userRoles.push(rol)
+      })
+      if (form.postIds.includes(',')) {
+        const arr = form.postIds.split(',')
+        console.log(arr)
+        _this.postDatas = arr
+        arr.forEach(function(id, index) {
+          const data = { id: id }
+          userPosts.push(data)
+          form.posts.push(data)
+        })
+        console.log('userPosts', userPosts)
+      }
+    },
+    // 提交前做的操作
+    [CRUD.HOOK.afterValidateCU](crud) {
+      console.log(crud)
+      console.log(crud.form)
+      if (!crud.form.fonds.id) {
+        this.$message({
+          message: '全宗不能为空',
+          type: 'warning'
+        })
+        return false
+      } else if (!crud.form.dept.id) {
+        this.$message({
+          message: '部门不能为空',
+          type: 'warning'
+        })
+        return false
+      } else if (this.postDatas.length === 0) {
+        this.$message({
+          message: '岗位不能为空',
+          type: 'warning'
+        })
+        return false
+      } else if (this.roleDatas.length === 0) {
+        this.$message({
+          message: '角色不能为空',
+          type: 'warning'
+        })
+        return false
+      }
+      crud.form.id = crud.form.userId
+      crud.form.roles = userRoles
+      crud.form.posts = userPosts
+      delete crud.form.deptsId
+      delete crud.form.deptsName
+      delete crud.form.job
+      return false
+    },
     clickRowHandler(row) {
       this.$refs.table.clearSelection()
       this.$refs.table.toggleRowSelection(row)
     },
+    // 重置密码
     handlePwdReset() {
       this.resetVisible = true
     },
@@ -327,7 +445,6 @@ export default {
     pwdReset(data) {
       const params = data.map(item => { return item.userName })
       this.btnLoading = true
-      console.log(params)
       resetpassword(params).then(res => {
         if (res === 'SUCCESS') {
           this.$message({
@@ -355,11 +472,36 @@ export default {
         userRoles.push(role)
       })
     },
-    changeJob(value) {
-      userJobs = []
-      value.forEach(function(data, index) {
-        const job = { id: data }
-        userJobs.push(job)
+    changePost(val) {
+      // const allValues = []
+      // // 保留所有值
+      // for (const item of this.organOptions) {
+      //   allValues.push(item.id)
+      // }
+      // // 用来储存上一次的值，可以进行对比
+      // const oldVal = this.oldSearchClassify.length === 1 ? this.oldSearchClassify[0] : []
+      // // 若是全部选择
+      // if (val.includes('ALL_SELECT')) this.searchClassify = allValues
+      // // 取消全部选中 上次有 当前没有 表示取消全选
+      // if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.searchClassify = []
+      // // 点击非全部选中 需要排除全部选中 以及 当前点击的选项
+      // // 新老数据都有全部选中
+      // if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
+      //   const index = val.indexOf('ALL_SELECT')
+      //   val.splice(index, 1) // 排除全选选项
+      //   this.searchClassify = val
+      // }
+      // // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
+      // if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
+      //   if (val.length === allValues.length - 1) this.searchClassify = ['ALL_SELECT'].concat(val)
+      // }
+      // // 储存当前最后的结果 作为下次的老数据
+      // this.oldSearchClassify[0] = this.searchClassify
+
+      userPosts = []
+      val.forEach(function(data, index) {
+        const post = { id: data }
+        userPosts.push(post)
       })
     },
     deleteTag(value) {
@@ -369,6 +511,27 @@ export default {
         }
       })
     },
+    // 切换部门
+    handleNodeClick(data) {
+      console.log('nodeiD', data.id)
+      console.log('nodeName', data.deptsName)
+      const selectedKey = this.$refs.tree.getCurrentNode()
+      console.log('selectedKey', selectedKey)
+      const selectedParentVal = this.$refs.tree.getNode(selectedKey).parent.data.id
+      console.log('selectedParentVal', selectedParentVal)
+      if (data.pid === 0) {
+        this.query.deptsId = null
+        this.query.deptsName = null
+        this.leftFondsId = null
+        this.leftDeptsId = null
+      } else {
+        this.query.deptsId = data.id
+        this.query.deptsName = data.deptsName
+        this.leftFondsId = selectedParentVal
+        this.leftDeptsId = data.id
+      }
+      this.crud.toQuery()
+    },
     getFondsDatas() {
       const parent = {}
       parent.id = 0
@@ -380,24 +543,22 @@ export default {
         parent.children = res
         this.fondsDatas.push(parent)
         this.fondsOptions = res
-        // this.fondsOptions = JSON.parse(JSON.stringify(this.fondsDatas))
-        // this.fondsOptions[0].children.map(item => {
-        //   console.log(item)
-        //   delete item.children
-        // })
         this.$nextTick(() => {
-          Vue.set(this.defaultExpandedKeys, 0, this.fondsDatas[0].children[0].id)
-          this.$refs.tree.setCurrentKey(this.fondsDatas[0].children[0].id)
-          this.handleNodeClick(this.fondsDatas[0].children[0])
+          Vue.set(this.defaultExpandedKeys, 0, this.fondsDatas[0].children[0].children[0].id)
+          this.$refs.tree.setCurrentKey(this.fondsDatas[0].children[0].children[0].id)
+          this.handleNodeClick(this.fondsDatas[0].children[0].children[0])
         })
       })
     },
     filterNode(value, data) {
       if (!value) return true
-      return data.fondsName.indexOf(value) !== -1
-    },
-    changeFonds(val) {
-      console.log('val', val)
+      if (data.deptsName) {
+        if (data.deptsName.includes(value)) {
+          return true
+        } else {
+          return false
+        }
+      }
     },
     changeFondsValue(value) {
       this.depts = []
@@ -413,89 +574,6 @@ export default {
       }
       this.getDepts(params)
     },
-    // 新增与编辑前做的操作
-    [CRUD.HOOK.afterToCU](crud, form) {
-      console.log(form)
-      this.getRoles()
-      if (form.id == null) {
-        this.getDepts()
-      } else {
-        // this.getSupDepts(form.deptsId)
-      }
-      this.getRoleLevel()
-      this.getJobs()
-      form.enabled = form.enabled.toString()
-    },
-    // 新增前将多选的值设置为空
-    [CRUD.HOOK.beforeToAdd]() {
-      this.jobDatas = []
-      this.roleDatas = []
-    },
-    // 初始化编辑时候的角色与岗位
-    [CRUD.HOOK.beforeToEdit](crud, form) {
-      this.getJobs(this.form.deptsId)
-      this.jobDatas = []
-      this.roleDatas = []
-      userRoles = []
-      userJobs = []
-      const _this = this
-      form.roles.forEach(function(role, index) {
-        _this.roleDatas.push(role.id)
-        const rol = { id: role.id }
-        userRoles.push(rol)
-      })
-      form.jobs.forEach(function(job, index) {
-        _this.jobDatas.push(job.id)
-        const data = { id: job.id }
-        userJobs.push(data)
-      })
-    },
-    // 提交前做的操作
-    [CRUD.HOOK.afterValidateCU](crud) {
-      if (!crud.form.deptsId) {
-        this.$message({
-          message: '部门不能为空',
-          type: 'warning'
-        })
-        return false
-      } else if (this.jobDatas.length === 0) {
-        this.$message({
-          message: '岗位不能为空',
-          type: 'warning'
-        })
-        return false
-      } else if (this.roleDatas.length === 0) {
-        this.$message({
-          message: '角色不能为空',
-          type: 'warning'
-        })
-        return false
-      }
-      crud.form.roles = userRoles
-      crud.form.jobs = userJobs
-      return true
-    },
-    // 获取左侧部门数据
-    getDeptDatas(node, resolve) {
-      const sort = 'update_time,desc'
-      const params = { sort: sort }
-      if (typeof node !== 'object') {
-        if (node) {
-          params['name'] = node
-        }
-      } else if (node.level !== 0) {
-        params['pid'] = node.data.id
-      }
-      setTimeout(() => {
-        getDepts(params).then(res => {
-          if (resolve) {
-            resolve(res.content)
-          } else {
-            this.deptDatas = res.content
-          }
-        })
-      }, 100)
-    },
     getDepts(params) {
       getDepts(params).then(res => {
         this.depts = res.content.map(function(obj) {
@@ -532,18 +610,33 @@ export default {
         })
       }
     },
-    // 切换部门
-    handleNodeClick(data) {
-      if (data.pid === 0) {
-        this.query.deptId = null
-      } else {
-        this.query.deptId = data.id
-      }
-      this.crud.toQuery()
+    // 删除用户
+    toDelete(datas) {
+      this.deleteData = datas
+      this.$confirm('此操作将删除当前所选' + this.crud.title + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.crud.delAllLoading = true
+        const userIds = []
+        this.deleteData.forEach(val => {
+          userIds.push(val.userId)
+        })
+        crudUser.del(userIds).then(() => {
+          this.crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+          this.crud.delAllLoading = false
+          this.crud.refresh()
+        }).catch(err => {
+          this.crud.delAllLoading = false
+          console.log(err)
+        })
+      }).catch(() => {
+      })
     },
     // 改变状态
     changeEnabled(data, val) {
-      // '此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 你是否继续？',
       this.$confirm('此操作将禁用 / 启用用户 “' + data.username + '”' + '<span>你是否还要继续？</span>', '提示', {
         confirmButtonText: '继续',
         cancelButtonText: '取消',
@@ -552,11 +645,13 @@ export default {
       }).then(() => {
         crudUser.edit(data).then(res => {
           this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+          this.crud.refresh()
         }).catch(() => {
           data.enabled = !data.enabled
         })
       }).catch(() => {
-        data.enabled = !data.enabled
+        this.crud.notify('已取消修改', CRUD.NOTIFICATION_TYPE.INFO)
+        data.enabled = data.enabled ? 0 : 1
       })
     },
     // 获取弹窗内角色数据
@@ -566,15 +661,9 @@ export default {
       }).catch(() => { })
     },
     // 获取弹窗内岗位数据
-    getJobs() {
+    getPosts() {
       getAllJob().then(res => {
-        this.jobs = res.content
-      }).catch(() => { })
-    },
-    // 获取权限级别
-    getRoleLevel() {
-      getLevel().then(res => {
-        this.level = res.level
+        this.postsOptions = res.content
       }).catch(() => { })
     },
     checkboxT(row, rowIndex) {
@@ -608,10 +697,12 @@ export default {
 ::v-deep .el-tree{
   .el-tree-node__content{
     font-size: 14px;
+    color: #545B65;
   }
   .top-level{
     font-size: 16px;
     font-weight: 600;
+    color: #0C0E1E;
   }
 }
 </style>