api-部门+用户

src/views/system/dept/index.vue

@@ -20,7 +20,9 @@
               <i slot="prefix" class="iconfont icon-zhuangtai" />
               <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
             </el-select>
-            <rrOperation />
+            <!-- <rrOperation /> -->
+            <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
+            <el-button v-if="crud.optShow.reset" class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
           </div>
           <crudOperation :permission="permission">
             <template v-slot:middle>
@@ -30,7 +32,7 @@
               </el-button>
             </template>
             <template v-slot:right>
-              <el-button :loading="crud.downloadLoading" size="mini" :disabled="selections.length === 0" @click="doExport(selections)">
+              <el-button :loading="crud.downloadLoading" size="mini" :disabled="crud.selections.length === 0" @click="doExport(crud.selections)">
                 <i class="iconfont icon-daochu" />
                 导出
               </el-button>
@@ -42,7 +44,7 @@
           <div class="setting-dialog">
             <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px">
               <el-form-item label="所属全宗" prop="fondsId">
-                <el-select v-model="form.fondsId" placeholder="请选择" style="width: 225px;" @change="changeValue($event)">
+                <el-select v-model="form.fondsId" placeholder="请选择" style="width: 225px;" @change="changeFondsValue($event)">
                   <el-option
                     v-for="(item,index) in fondsOptions"
                     :key="index"
@@ -61,7 +63,7 @@
                 <el-input v-model="form.deptsAbbr" />
               </el-form-item>
               <el-form-item label="顶级部门" prop="isTop">
-                <el-radio-group v-model="form.isTop">
+                <el-radio-group v-model="form.isTop" @input="changeIsTop">
                   <el-radio label="1">是</el-radio>
                   <el-radio label="0">否</el-radio>
                 </el-radio-group>
@@ -83,7 +85,6 @@
                   placeholder="选择所属全宗后再选上级部门"
                   :normalizer="normalizer"
                   :default-expand-level="levelNumber"
-                  @select="node => tenantIdHandleSelect(node)"
                 >
                   <div slot="value-label" slot-scope="{ node }">{{ getAutoNameUnknown(node.label) }}</div>
                 </treeselect>
@@ -113,6 +114,8 @@
             :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
             :data="tableData"
             :row-key="getRowKey"
+            @select-all="selectAll"
+            @select="selectTr"
             @selection-change="crud.selectionChangeHandler"
             @row-click="clickRowHandler"
           >
@@ -149,7 +152,7 @@ import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
-import rrOperation from '@crud/RR.operation'
+// import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import DateRangePicker from '@/components/DateRangePicker'
 import pagination from '@crud/Pagination'
@@ -161,7 +164,8 @@ import { mapGetters } from 'vuex'
 const defaultForm = { id: null, fondsId: null, deptsCode: '', deptsName: '', deptsAbbr: '', isTop: '1', deptsParentsId: null, deptsOrders: 999, deptsStatus: null }
 export default {
   name: 'Dept',
-  components: { Treeselect, crudOperation, rrOperation, DateRangePicker, pagination },
+  // rrOperation,
+  components: { Treeselect, crudOperation, DateRangePicker, pagination },
   cruds() {
     return CRUD({ title: '部门', idField: 'deptsId', url: 'api/depts/initDeptsList', crudMethod: { ...crudDept }, optShow: {
       add: true,
@@ -177,7 +181,6 @@ export default {
   dicts: ['dept_status'],
   data() {
     return {
-      selections: [],
       depts: [],
       tableData: [],
       rules: {
@@ -223,7 +226,8 @@ export default {
         { key: '1', display_name: '激活' },
         { key: '0', display_name: '锁定' }
       ],
-      levelNumber: 0
+      levelNumber: 0,
+      isAllSelect: false
     }
   },
   computed: {
@@ -251,11 +255,24 @@ export default {
     getRowKey(row) {
       return row.deptsId
     },
+    resetQuery() {
+      this.crud.query.blurry = ''
+      this.blurryTime = null
+      this.crud.query.startTime = null
+      this.crud.query.endTime = null
+      this.crud.query.status = null
+      this.crud.toQuery()
+    },
     [CRUD.HOOK.beforeRefresh]() {
+      this.tableData = []
       if (this.blurryTime) {
         this.crud.query.startTime = this.blurryTime[0]
         this.crud.query.endTime = this.blurryTime[1]
+      } else {
+        this.crud.query.startTime = null
+        this.crud.query.endTime = null
       }
+      // this.handleNodeClick()
     },
     [CRUD.HOOK.afterRefresh](crud) {
       crud.data.forEach(function(item, index) {
@@ -272,8 +289,6 @@ export default {
     },
     // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
-      console.log(crud)
-      console.log(form)
       this.depts = []
       this.levelNumber = 0
       if (form.id != null) {
@@ -288,7 +303,6 @@ export default {
           }
           this.getDepts(params)
           this.levelNumber = 4
-          console.log(this.depts)
         }
       }
     },
@@ -339,7 +353,7 @@ export default {
         }
       }
     },
-    changeValue(value) {
+    changeFondsValue(value) {
       this.depts = []
       var obj = {}
       obj = this.fondsOptions.find(function(item) {
@@ -353,6 +367,63 @@ export default {
       }
       this.getDepts(params)
     },
+    changeIsTop(val) {
+      if (this.crud.status.edit) {
+        if (val === '0') {
+          const params = {
+            'fondsId': this.form.fondsId,
+            'fondsName': this.form.fondsName,
+            'status': 1
+          }
+          this.getDepts(params)
+        }
+      }
+    },
+    selectAll() {
+      this.isAllSelect = !this.isAllSelect
+      const data = this.tableData
+      this.toggleSelect(data, this.isAllSelect, 'all')
+    },
+    // 选择某行
+    selectTr(selection, row) {
+      this.$set(row, 'isChecked', !row.isChecked)
+      this.$nextTick(() => {
+        this.isAllSelect = row.isChecked
+        this.toggleSelect(row, row.isChecked, 'tr')
+      })
+    },
+    // 递归子级
+    toggleSelect(data, flag, type) {
+      if (type === 'all') {
+        if (data.length > 0) {
+          data.forEach((item) => {
+            this.toggleSelection(item, flag)
+            if (item.children && item.children.length > 0) {
+              this.toggleSelect(item.children, flag, type)
+            }
+          })
+        }
+      } else {
+        if (data.children && data.children.length > 0) {
+          data.children.forEach((item) => {
+            item.isChecked = flag
+            this.$refs.table.toggleRowSelection(item, flag)
+            this.toggleSelect(item, flag, type)
+          })
+        }
+      }
+    },
+    // 改变选中
+    toggleSelection(row, flag) {
+      this.$set(row, 'isChecked', flag)
+      this.$nextTick(() => {
+        if (flag) {
+          this.$refs.table.toggleRowSelection(row, flag)
+        } else {
+          this.$refs.table.clearSelection()
+        }
+      })
+    },
     clickRowHandler(row) {
       this.$refs.table.clearSelection()
       this.$refs.table.toggleRowSelection(row)
@@ -446,6 +517,7 @@ export default {
       }).then(() => {
         crudDept.FetchUpdateDeptsStatus(data).then(res => {
           this.crud.notify('修改成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+          this.crud.refresh()
         }).catch(() => {
           data.deptsStatus = !data.deptsStatus
         })

src/views/system/user/index.vue

@@ -4,13 +4,19 @@
       <!--侧边部门数据-->
       <div class="elect-cont-left">
         <div class="head-container">
-          <el-input v-model="deptName" clearable size="small" placeholder="输入全宗名称搜索" prefix-icon="el-icon-search" class="filter-item" @input="getDeptDatas" />
+          <el-input v-model="filterText" clearable size="small" placeholder="输入全宗名称搜索" prefix-icon="el-icon-search" class="filter-item" />
         </div>
-        <div class="container-left">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <el-tree :data="deptDatas" :load="getDeptDatas" :props="defaultProps" :expand-on-click-node="false" lazy @node-click="handleNodeClick" />
+        <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;">
+                {{ data.fondsName }}
+                <span style="color: #545B65;">{{ data.deptsName }}</span>
+              </span>
             </div>
+          </template>
+
+        </el-tree>
       </div>
       <!--用户数据-->
       <div class="elect-cont-right">
@@ -39,8 +45,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" />
@@ -51,17 +57,29 @@
                 <el-form-item label="邮箱" prop="email">
                   <el-input v-model="form.email" />
                 </el-form-item>
-                <el-form-item label="所属全宗" prop="dept.id">
-                  <treeselect v-model="form.dept.id" :options="depts" placeholder="选择全宗" />
+                <el-form-item label="所属全宗" prop="fondsId">
+                  <!-- <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-option
+                      v-for="(item,index) in fondsOptions"
+                      :key="index"
+                      :label="item.fondsName"
+                      :value="item.id"
+                    />
+                  </el-select>
                 </el-form-item>
-                <el-form-item label="所属部门" prop="dept.id">
-                  <treeselect v-model="form.dept.id" :options="depts" :load-options="loadDepts" placeholder="选择部门" />
+                <el-form-item label="所属部门" prop="deptsId">
+                  <!-- <treeselect v-model="form.deptsId" :options="depts" :load-options="loadDepts" placeholder="选择部门" /> -->
+                  <treeselect
+                    v-model="form.deptsId"
+                    :options="depts"
+                    :load-options="loadDepts"
+                    placeholder="选择部门"
+                    :normalizer="normalizer"
+                  >
+                    <div slot="value-label" slot-scope="{ node }">{{ getAutoNameUnknown(node.label) }}</div>
+                  </treeselect>
                 </el-form-item>
-                <!-- <el-form-item label="岗位" prop="jobs" class="is-required">
-                  <el-select v-model="jobDatas" style="width: 184px" multiple placeholder="请选择" @remove-tag="deleteTag" @change="changeJob">
-                    <el-option v-for="item in jobs" :key="item.name" :label="item.name" :value="item.id" />
-                  </el-select>
-                </el-form-item> -->
                 <el-form-item label="性别" prop="gender">
                   <el-radio-group v-model="form.gender">
                     <el-radio label="男">男</el-radio>
@@ -69,13 +87,23 @@
                   </el-radio-group>
                 </el-form-item>
                 <el-form-item label="状态" prop="enabled">
+                  <!-- <el-radio-group v-model="form.enabled" :disabled="form.id === user.id">
+                    <el-radio v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">{{ item.display_name }}</el-radio>
+                  </el-radio-group> -->
                   <el-radio-group v-model="form.enabled" :disabled="form.id === user.id">
-                    <el-radio v-for="item in dict.user_status" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
+                    <el-radio :label="1">激活</el-radio>
+                    <el-radio :label="0">禁用</el-radio>
                   </el-radio-group>
                 </el-form-item>
-                <el-form-item style="margin-bottom: 0;" label="角色" prop="roles" class="is-required selecct-dropdown">
-                  <el-select v-model="roleDatas" style="width: 584x" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="deleteTag" @change="changeRole">
-                    <el-option v-for="item in roles" :key="item.name" :disabled="level !== 1 && item.level <= level" :label="item.name" :value="item.id" />
+                <el-form-item style="width: 100%;" label="角色" prop="roles" class="is-required selecct-dropdown">
+                  <el-select v-model="roleDatas" style="width: 584px" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="deleteTag" @change="changeRole">
+                    <!-- :disabled="level !== 1 && item.level <= level" -->
+                    <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-select>
                 </el-form-item>
               </el-form>
@@ -149,7 +177,8 @@
 import { getToken } from '@/utils/auth'
 import crudUser, { resetpassword } from '@/api/system/user'
 import { isvalidPhone } from '@/utils/validate'
-import { getDepts, getDeptSuperior } from '@/api/system/dept'
+import { getDepts, FetchSonDepts } from '@/api/system/dept'
+import { FetchFondsAll } from '@/api/system/fonds'
 import { getAll, getLevel } from '@/api/system/role'
 import { getAllJob } from '@/api/system/job'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
@@ -162,9 +191,10 @@ import Treeselect from '@riophae/vue-treeselect'
 import { mapGetters } from 'vuex'
 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: 'true', roles: [], jobs: [], dept: { id: null }, phone: null }
+const defaultForm = { id: null, userName: null, nickName: null, gender: '男', email: null, enabled: null, fondsId: null, roles: [], jobs: [], deptsId: null, phone: null }
 export default {
   name: 'User',
   components: { Treeselect, crudOperation, rrOperation, pagination, DateRangePicker },
@@ -185,14 +215,14 @@ export default {
         callback()
       }
     }
-    // var validateJob = (rule, value, callback) => {
-    //   console.log(value)
-    //   if (this.jobDatas.length > 0) {
-    //     callback()
-    //   } else {
-    //     callback(new Error('请选择岗位'))
-    //   }
-    // }
+    var validateJob = (rule, value, callback) => {
+      console.log(value)
+      if (this.jobDatas.length > 0) {
+        callback()
+      } else {
+        callback(new Error('请选择岗位'))
+      }
+    }
     return {
       headers: {
         Authorization: getToken()
@@ -205,7 +235,11 @@ export default {
       height: document.documentElement.clientHeight - 180 + 'px;',
       deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
       jobDatas: [], roleDatas: [], // 多选时使用
-      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
+      fondsDatas: [],
+      fondsOptions: [],
+      filterText: '',
+      defaultExpandedKeys: [],
+      defaultProps: { children: 'children', label: 'fondsName' },
       permission: {
         add: ['admin', 'user:add'],
         edit: ['admin', 'user:edit'],
@@ -215,8 +249,9 @@ export default {
         { key: '1', display_name: '激活' },
         { key: '0', display_name: '锁定' }
       ],
+
       rules: {
-        username: [
+        userName: [
           { required: true, message: '请输入用户名', trigger: 'blur' },
           { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
         ],
@@ -231,7 +266,7 @@ export default {
         phone: [
           { required: true, trigger: 'blur', validator: validPhone }
         ],
-        'dept.id': [
+        'deptsId': [
           { required: true, trigger: 'blur', message: '请选择部门' }
         ],
         gender: [
@@ -239,11 +274,10 @@ export default {
         ],
         enabled: [
           { required: true, trigger: 'change', message: '请选择状态' }
+        ],
+        jobs: [
+          { trigger: 'blur', validator: validateJob }
         ]
-        // ,
-        // jobs: [
-        //   { trigger: 'blur', validator: validateJob }
-        // ]
       }
     }
   },
@@ -252,6 +286,11 @@ export default {
       'user'
     ])
   },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
   created() {
     this.crud.msg.add = '新增成功，默认密码：123456'
   },
@@ -261,8 +300,16 @@ export default {
       that.height = document.documentElement.clientHeight - 180 + 'px;'
     }
     console.log(this.user)
+    this.getFondsDatas()
   },
   methods: {
+    getAutoNameUnknown(name) {
+      if (name.lastIndexOf('unknown') > -1) {
+        return name.split('(')[0]
+      } else {
+        return name
+      }
+    },
     [CRUD.HOOK.beforeRefresh]() {
       if (this.blurryTime) {
         this.crud.query.startTime = this.blurryTime[0]
@@ -270,15 +317,17 @@ export default {
       }
     },
     clickRowHandler(row) {
-      // this.$refs.table.toggleRowSelection(row) // 单击选中
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
     },
     handlePwdReset() {
       this.resetVisible = true
     },
     // 重置密码
     pwdReset(data) {
-      const params = data.map(item => { return item.username })
+      const params = data.map(item => { return item.userName })
       this.btnLoading = true
+      console.log(params)
       resetpassword(params).then(res => {
         if (res === 'SUCCESS') {
           this.$message({
@@ -320,13 +369,58 @@ export default {
         }
       })
     },
+    getFondsDatas() {
+      const parent = {}
+      parent.id = 0
+      parent.fondsName = '全宗选择'
+      FetchFondsAll().then(res => {
+        res.forEach(item => {
+          item.children = item.depts
+        })
+        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])
+        })
+      })
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      return data.fondsName.indexOf(value) !== -1
+    },
+    changeFonds(val) {
+      console.log('val', val)
+    },
+    changeFondsValue(value) {
+      this.depts = []
+      var obj = {}
+      obj = this.fondsOptions.find(function(item) {
+        return item.id === value
+      })
+      this.form.deptsId = null
+      const params = {
+        'fondsId': obj.id,
+        'fondsName': obj.fondsName,
+        'status': 1
+      }
+      this.getDepts(params)
+    },
     // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
+      console.log(form)
       this.getRoles()
       if (form.id == null) {
         this.getDepts()
       } else {
-        this.getSupDepts(form.dept.id)
+        // this.getSupDepts(form.deptsId)
       }
       this.getRoleLevel()
       this.getJobs()
@@ -339,7 +433,7 @@ export default {
     },
     // 初始化编辑时候的角色与岗位
     [CRUD.HOOK.beforeToEdit](crud, form) {
-      this.getJobs(this.form.dept.id)
+      this.getJobs(this.form.deptsId)
       this.jobDatas = []
       this.roleDatas = []
       userRoles = []
@@ -358,7 +452,7 @@ export default {
     },
     // 提交前做的操作
     [CRUD.HOOK.afterValidateCU](crud) {
-      if (!crud.form.dept.id) {
+      if (!crud.form.deptsId) {
         this.$message({
           message: '部门不能为空',
           type: 'warning'
@@ -402,9 +496,14 @@ export default {
         })
       }, 100)
     },
-    getDepts() {
-      getDepts({ enabled: true }).then(res => {
+    getDepts(params) {
+      getDepts(params).then(res => {
         this.depts = res.content.map(function(obj) {
+          if (obj.sonNum !== 0) {
+            obj.hasChildren = true
+          } else {
+            obj.hasChildren = false
+          }
           if (obj.hasChildren) {
             obj.children = null
           }
@@ -412,28 +511,16 @@ export default {
         })
       })
     },
-    getSupDepts(deptId) {
-      getDeptSuperior(deptId).then(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) {
+        FetchSonDepts({ deptsId: parentNode.deptsId }).then(res => {
+          parentNode.children = res.map(function(obj) {
+            if (obj.sonNum !== 0) {
+              obj.hasChildren = true
+            } else {
+              obj.hasChildren = false
+            }
             if (obj.hasChildren) {
               obj.children = null
             }
@@ -441,7 +528,7 @@ export default {
           })
           setTimeout(() => {
             callback()
-          }, 200)
+          }, 100)
         })
       }
     },
@@ -492,10 +579,39 @@ export default {
     },
     checkboxT(row, rowIndex) {
       return row.userId !== this.user.id
+    },
+    fondsNormalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.fondsName,
+        children: node.children
+      }
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.deptsId,
+        label: node.deptsName,
+        children: node.children
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-tree{
+  .el-tree-node__content{
+    font-size: 14px;
+  }
+  .top-level{
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
 </style>