部门管理api

src/api/system/dept.js

@@ -1,13 +1,5 @@
 import request from '@/utils/request'
 
-export function getDeptsList(params) {
-  return request({
-    url: 'api/depts/initDeptsList',
-    method: 'get',
-    params
-  })
-}
-
 export function getDepts(params) {
   return request({
     url: 'api/depts/initDeptsList',
@@ -33,11 +25,11 @@ export function add(data) {
   })
 }
 
-export function del(ids) {
+export function del(data) {
   return request({
     url: 'api/depts/delDepts',
     method: 'post',
-    data: ids
+    data
   })
 }
 
@@ -49,4 +41,20 @@ export function edit(data) {
   })
 }
 
-export default { add, edit, del, getDepts, getDeptSuperior, getDeptsList }
+export function FetchUpdateDeptsStatus(data) {
+  return request({
+    url: '/api/depts/updateDeptsStatus',
+    method: 'post',
+    data
+  })
+}
+
+export function FetchSonDepts(params) {
+  return request({
+    url: '/api/depts/getSonDepts',
+    method: 'get',
+    params
+  })
+}
+
+export default { add, edit, del, getDepts, getDeptSuperior, FetchUpdateDeptsStatus, FetchSonDepts }

src/components/Crud/crud.js

@@ -32,7 +32,7 @@ function CRUD(options) {
     // 重置表单
     defaultForm: () => {},
     // 排序规则，默认 id 降序， 支持多字段排序 ['id,desc', 'createTime,asc']
-    sort: ['update_time,desc'],
+    sort: [],
     // 等待时间
     time: 50,
     // CRUD Method

src/views/system/dept/index.vue

@@ -4,10 +4,9 @@
       <!--侧边部门数据-->
       <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>
-        <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 @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" />
       </div>
       <!--用户数据-->
       <div class="elect-cont-right">
@@ -15,22 +14,35 @@
         <div class="head-container">
           <div class="head-search">
             <!-- 搜索 -->
-            <el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-            <date-range-picker v-model="query.createTime" class="date-item" />
-            <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
+            <el-input v-model="query.blurry" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+            <date-range-picker v-model="blurryTime" class="date-item" />
+            <el-select v-model="query.status" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
               <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 />
           </div>
-          <crudOperation :permission="permission" />
+          <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>
+            <template v-slot:right>
+              <el-button :loading="crud.downloadLoading" size="mini" :disabled="crud.selections.length === 0" @click="doExport(crud.selections)">
+                <i class="iconfont icon-daochu" />
+                导出
+              </el-button>
+            </template>
+          </crudOperation>
         </div>
         <!--表单组件-->
         <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
           <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;">
+                <el-select v-model="form.fondsId" placeholder="请选择" style="width: 225px;" @change="changeValue($event)">
                   <el-option
                     v-for="(item,index) in fondsOptions"
                     :key="index"
@@ -65,13 +77,13 @@
               <el-form-item v-if="form.isTop === '0'" label="上级部门" prop="deptsParentsId">
                 <treeselect
                   v-model="form.deptsParentsId"
-                  :load-options="loadDepts"
                   :options="depts"
-                  placeholder="选择上级类目"
+                  placeholder="选择所属全宗后再选上级部门"
+                  :normalizer="normalizer"
+                  :default-expand-level="2"
                 />
               </el-form-item>
               <el-form-item label="状态" prop="deptsStatus" :style="form.isTop === '0'? 'margin-left:0': 'margin:0 0 0 360px'">
-                <!-- <el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.deptsStatus" :label="item.value">{{ item.label }}</el-radio> -->
                 <el-radio-group v-model="form.deptsStatus">
                   <el-radio :label="1">启用</el-radio>
                   <el-radio :label="0">停用</el-radio>
@@ -99,23 +111,39 @@
             @select="crud.selectChange"
             @select-all="crud.selectAllChange"
             @selection-change="crud.selectionChangeHandler"
+            @expand-change="expandChange"
           >
-            <el-table-column :selectable="checkboxT" type="selection" align="center" width="55" />
+            <el-table-column type="selection" align="center" width="55" />
+            <el-table-column type="expand" width="20">
+              <template slot-scope="props">
+                <div v-if="props.row.sonNum">
+                  <el-table :data="expandData" :show-header="false">
+                    <el-table-column type="selection" align="center" width="55" />
+                    <el-table-column label="部门名称" prop="deptsName" />
+                    <el-table-column label="部门编码" prop="deptsCode" />
+                    <el-table-column label="部门人数" prop="deptsTotalPeoNum" />
+                    <el-table-column label="排序" prop="deptsOrders" />
+                    <el-table-column label="所属全宗" prop="fondsName" />
+                    <el-table-column label="状态" align="center" prop="deptsStatus">
+                      <template slot-scope="scope">
+                        <el-switch v-model="scope.row.deptsStatus" active-color="#409EFF" inactive-color="#F56C6C" :active-value="1" :inactive-value="0" @change="changeStatus(scope.row, scope.row.deptsStatus)" />
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="createTime" label="创建日期">
+                      <template slot-scope="scope">
+                        <div>{{ scope.row.createTime | parseTime }}</div>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </template>
+            </el-table-column>
             <el-table-column label="部门名称" prop="deptsName" />
             <el-table-column label="部门编码" prop="deptsCode" />
             <el-table-column label="部门人数" prop="deptsTotalPeoNum" />
             <el-table-column label="排序" prop="deptsOrders" />
             <el-table-column label="所属全宗" prop="fondsName" />
             <el-table-column label="状态" align="center" prop="deptsStatus">
-              <!-- <template slot-scope="scope">
-                <el-switch
-                  v-model="scope.row.deptsStatus"
-                  :disabled="scope.row.id === 1"
-                  active-color="#409EFF"
-                  inactive-color="#F56C6C"
-                  @change="changeEnabled(scope.row, scope.row.deptsStatus,)"
-                />
-              </template> -->
               <template slot-scope="scope">
                 <el-switch v-model="scope.row.deptsStatus" active-color="#409EFF" inactive-color="#F56C6C" :active-value="1" :inactive-value="0" @change="changeStatus(scope.row, scope.row.deptsStatus)" />
               </template>
@@ -143,17 +171,26 @@ import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
-// import udOperation from '@crud/UD.operation'
 import DateRangePicker from '@/components/DateRangePicker'
 import pagination from '@crud/Pagination'
 import Vue from 'vue'
+import { exportFile } from '@/utils/index'
+import qs from 'qs'
+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 },
   cruds() {
-    return CRUD({ title: '部门', url: 'api/depts/initDeptsList', crudMethod: { ...crudDept }})
+    return CRUD({ title: '部门', idField: 'deptsId', url: 'api/depts/initDeptsList', crudMethod: { ...crudDept }, optShow: {
+      add: true,
+      edit: true,
+      del: false,
+      reset: true,
+      download: false,
+      group: false
+    }})
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   // 设置数据字典
@@ -187,11 +224,14 @@ export default {
           { required: true, message: '请选择状态', trigger: 'change' }
         ]
       },
-      deptName: '', deptDatas: [], jobs: [], level: 3, roles: [],
+      fondsName: '', deptDatas: [], jobs: [], level: 3, roles: [],
       jobDatas: [], roleDatas: [], // 多选时使用
       fondsDatas: [],
+      filterText: '',
       defaultExpandedKeys: [],
       fondsOptions: [],
+      blurryTime: null,
+      deleteData: [],
       defaultProps: { children: 'children', label: 'fondsName' },
       permission: {
         add: ['admin', 'dept:add'],
@@ -199,15 +239,54 @@ export default {
         del: ['admin', 'dept:del']
       },
       enabledTypeOptions: [
-        { key: 'true', display_name: '正常' },
-        { key: 'false', display_name: '禁用' }
-      ]
+        { key: '1', display_name: '激活' },
+        { key: '0', display_name: '锁定' }
+      ],
+      expandData: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
     }
   },
   mounted() {
     this.getFondsDatas()
   },
   methods: {
+    expandChange(row, expandRow) {
+      crudDept.FetchSonDepts({ deptsId: row.deptsId }).then(res => {
+        console.log(res)
+        this.expandData = res
+      })
+    },
+    tableRowInserted({ row, parentRow, $index }) {
+      if (parentRow) {
+        crudDept.FetchSonDepts({ deptsId: row.deptsId }).then(res => {
+          console.log(res)
+          parentRow.children.splice(1, 0, 1)
+        })
+
+        parentRow.children.splice(1)
+        // const data = crud.FetchSonDepts(row.id) // 使用异步请求获取数据
+        // data.then((result) => {
+        //   result.forEach((item, index) => {
+        //     parentRow.children.splice($index + index + 1, 0, item) // 将新数据插入到父行的children属性中
+        //   })
+        // })
+      }
+    },
+    [CRUD.HOOK.beforeRefresh]() {
+      if (this.blurryTime) {
+        this.crud.query.startTime = this.blurryTime[0]
+        this.crud.query.endTime = this.blurryTime[1]
+      }
+    },
     getDeptDatas(tree, treeNode, resolve) {
       const params = { pid: tree.id }
       setTimeout(() => {
@@ -227,60 +306,48 @@ export default {
         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
+    },
     handleNodeClick(val) {
       if (val) {
-        console.log(val)
-        const params = {
-          fondsName: val.fondsName,
-          fondsNo: val.fondsNo
+        if (val.id !== 0) {
+          this.query.fondsName = val.fondsName
+          this.query.fondsNo = val.fondsNo
+          this.crud.toQuery()
         }
-        crudDept.getDeptsList(params).then(res => {
-          console.log(res)
+      }
+    },
+    changeValue(value) {
+      var obj = {}
+      obj = this.fondsOptions.find(function(item) {
+        return item.id === value
       })
+      this.form.deptsParentsId = null
+      const params = {
+        'fondsId': obj.id,
+        'fondsName': obj.fondsName,
+        'status': 1
       }
+      this.getDepts(params)
     },
     // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
-      // if (form.isTop === '1') {
-      //   form.deptsParentsId = 0
-      // } else {
-      //   form.deptsParentsId = ''
-      // }
-      // console.log(form)
-      // if (form.pid !== null) {
-      //   form.isTop = '0'
-      // } else if (form.id !== null) {
-      //   form.isTop = '1'
-      // }
-      // form.enabled = `${form.enabled}`
-      // if (form.id != null) {
-      //   this.getSupDepts(form.id)
-      // } else {
-      //   this.getDepts()
-      // }
-    },
-    getSupDepts(id) {
-      crudDept.getDeptSuperior(id).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
+      if (form.fondsId !== null) {
+        this.getDepts()
       }
-      })
     },
-    getDepts() {
-      crudDept.getDepts({ enabled: true }).then(res => {
+    // 编辑前
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      crud.form.id = form.deptsId
+    },
+    getDepts(params) {
+      crudDept.getDepts(params).then(res => {
         this.depts = res.content.map(function(obj) {
           if (obj.hasChildren) {
             obj.children = null
@@ -292,7 +359,7 @@ export default {
     // 获取弹窗内部门数据
     loadDepts({ action, parentNode, callback }) {
       if (action === LOAD_CHILDREN_OPTIONS) {
-        crudDept.getDepts({ enabled: true, pid: parentNode.id }).then(res => {
+        crudDept.getDepts({ status: 1, pid: parentNode.id }).then(res => {
           parentNode.children = res.content.map(function(obj) {
             if (obj.hasChildren) {
               obj.children = null
@@ -306,41 +373,84 @@ export default {
       }
     },
     // 提交前的验证
-    [CRUD.HOOK.afterValidateCU]() {
-      if (this.form.pid !== null && this.form.pid === this.form.id) {
-        this.$message({
-          message: '上级部门不能为空',
-          type: 'warning'
-        })
-        return false
-      }
-      if (this.form.isTop === '1') {
-        this.form.deptsParentsId = null
+    [CRUD.HOOK.afterValidateCU](crud) {
+      if (crud.form.isTop === '1') {
+        crud.form.deptsParentsId = null
       }
-      delete this.form.isTop
-      console.log(form)
+      delete crud.form.isTop
       return true
     },
+    toDelete(datas) {
+      this.deleteData = datas
+      this.$confirm('此操作将删除当前所选' + this.crud.title + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.crud.delAllLoading = true
+        const ids = []
+        this.deleteData.forEach(val => {
+          ids.push(val.deptsId)
+        })
+        crudDept.del(ids).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(() => {
+      })
+    },
     // 改变状态
     changeStatus(data, val) {
+      data.id = data.deptsId
       this.$confirm('此操作将禁用 / 启用部门 “' + data.deptsName + '”' + '<span>你是否还要继续？</span>', '提示', {
         confirmButtonText: '继续',
         cancelButtonText: '取消',
         type: 'warning',
         dangerouslyUseHTMLString: true
       }).then(() => {
-        crudDept.edit(data).then(res => {
-          this.crud.notify(this.dict.label.dept_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
-        }).catch(err => {
-          data.enabled = !data.enabled
-          console.log(err.response.data.message)
+        crudDept.FetchUpdateDeptsStatus(data).then(res => {
+          this.crud.notify('修改成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+        }).catch(() => {
+          data.deptsStatus = !data.deptsStatus
+        })
+      }).catch(() => {
+        this.crud.notify('已取消修改', CRUD.NOTIFICATION_TYPE.INFO)
+        data.deptsStatus = data.deptsStatus ? 0 : 1
+      })
+    },
+    doExport(data) {
+      crud.downloadLoading = true
+      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        const ids = []
+        data.forEach(val => {
+          ids.push(val.deptsId)
         })
+        const params = {
+          'deptsIds': ids
+        }
+        exportFile(this.baseApi + '/api/depts/download?' + qs.stringify(params, { indices: false }))
       }).catch(() => {
-        data.enabled = !data.enabled
       })
     },
-    checkboxT(row, rowIndex) {
-      return row.id !== 1
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.deptsId,
+        label: node.deptsName,
+        children: node.children
+      }
     }
   }
 }

src/views/system/groupManage/index.vue

@@ -285,7 +285,7 @@ export default {
         })
       }).catch(() => {
         this.crud.notify('已取消修改', CRUD.NOTIFICATION_TYPE.INFO)
-        data.fondsStatus = !data.fondsStatus
+        data.fondsStatus = data.fondsStatus ? 0 : 1
       })
     },
     doExport(data) {