提交组织架构

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/system/role/index.vue

@@ -65,7 +65,7 @@
       :before-close="handleClose">
       <div class="permissionsData">
         <div v-for="(item, index) in permissionsData" :key="index" class="list">
-          <div class="itemName">
+          <div class="itemName" v-if="item.name.indexOf('详情') == -1">
             <el-checkbox size="large" v-model="item.checked" style="width: 16px; font-weight: bold;"
               @change="changeCheckBox(item, true)">{{ item.name }}</el-checkbox>
           </div>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/team/api.ts

@@ -7,3 +7,6 @@ export const GET_ADDDEPT = '/department/add'
 export const DETELE_DEPT = '/department/delete'
 export const ADD_USER = '/user/insertUser'
 export const GET_USERINFO = '/user/getUserInfo'
+export const BACTHUPDATEDEPT = `/user/batchUpdateDept`
+export const BACTHUPDATEROLE = `/user/batchUpdateRole`
+export const BACTHSERROLE = `/user/setActiveByIds`

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/team/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full flex flex-col teamstyle">
+  <div class="h-full flex flex-col teamstyle overflow-hidden">
     <!-- 头部 -->
     <div class="bg-white flex justify-between team-header">
       <div class="flex items-center">
@@ -10,7 +10,8 @@
         <span class="textSpan">共 0 人</span>
       </div>
       <div class="teamForm flex items-center">
-        <el-input v-model="teamForm.keyword" style="max-width: 650px" size="default" placeholder="请输入姓名搜索" class="mr-6">
+        <el-input v-model="teamForm.keyword" style="max-width: 650px" size="default" placeholder="请输入姓名搜索" class="mr-6"
+          clearable @clear="getTableData()" @keyup.enter.native="getTableData()">
           <template #prepend>
             <el-select v-model="teamForm.matchingType" style="width: 80px">
               <el-option label="姓名" :value="0" />
@@ -19,19 +20,21 @@
             </el-select>
           </template>
           <template #append>
-            <el-button :icon="Search" />
+            <el-button :icon="Search" @click="getTableData()" />
           </template>
         </el-input>
 
         <div class="formItem mr-6 flex items-center">
           <div class="text-nowrap">状态：</div>
-          <el-select v-model="teamForm.status" placeholder="请选择" size="default" style="width: 100px">
+          <el-select v-model="teamForm.status" placeholder="请选择" size="default" style="width: 100px"
+            @change="getTableData()">
             <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </div>
         <div class="formItem mr-6 flex items-center">
           <div class="text-nowrap">角色：</div>
-          <el-select v-model="teamForm.roleId" placeholder="请选择" size="default" style="width: 150px">
+          <el-select v-model="teamForm.roleId" placeholder="请选择" size="default" style="width: 150px" clearable
+            @change="getTableData()">
             <el-option v-for="item in roleList" :key="item.id" :label="item.rolename" :value="item.id" />
           </el-select>
         </div>
@@ -42,11 +45,9 @@
           </el-button>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item @click="addPersone(false)">添加人员</el-dropdown-item>
-              <el-dropdown-item>导出人员</el-dropdown-item>
-              <el-dropdown-item>批量导入</el-dropdown-item>
-              <el-dropdown-item>导入薪资</el-dropdown-item>
-              <el-dropdown-item>自定义配置</el-dropdown-item>
+              <el-dropdown-item @click="addPersone(false)" v-permission="['teamAdd']">添加人员</el-dropdown-item>
+              <el-dropdown-item v-permission="['teamExport']">导出人员</el-dropdown-item>
+              <el-dropdown-item v-permission="['teamImport']">批量导入</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -54,7 +55,7 @@
     </div>
     <!-- 内容 -->
     <div class="flex-1 flex">
-      <div class="p-5 w-80 pr-0">
+      <div class="p-4 w-80 pr-0">
         <div class="bg-white w-full h-full shadow-md rounded-md flex flex-col">
           <div class="flex-1 overflow-y-auto const-left">
             <el-tree style="max-width: 600px" :data="deptList" :props="treeProps" @node-click="treeNode">
@@ -75,45 +76,51 @@
           </div>
         </div>
       </div>
-      <div class="flex-1 p-5 overflow-auto">
-        <div class="bg-white w-full h-full shadow-md rounded-md flex flex-col">
-          <div class="flex-1 p-3">
+      <div class="flex-1 p-4 overflow-auto">
+        <div class="bg-white w-full h-full shadow-md rounded-md flex flex-col overflow-hidden pt-2 pl-2 pr-2">
+          <div class="flex-1">
             <el-table ref="multipleTableRef" :data="tableData" v-loading="loadingFrom.tableLoading"
-              style="width: 100%;height: 100%;">
+              @selection-change="changeBatch" style="width: 100%;height: 100%;">
               <el-table-column type="selection" width="55" />
               <el-table-column label="姓名" property="name" width="150"></el-table-column>
-              <el-table-column label="手机" property="phone" ></el-table-column>
+              <el-table-column label="手机" property="phone"></el-table-column>
               <el-table-column label="工号" property="jobNumber"></el-table-column>
               <el-table-column label="部门" property="departmentName"></el-table-column>
               <el-table-column label="角色" property="roleName"></el-table-column>
               <el-table-column label="创建时间" property="createTime"></el-table-column>
-              <el-table-column label="操作" width="150" fixed="right">
+              <el-table-column label="操作" width="200" fixed="right">
                 <template #default="scope">
                   <el-button :size="'small'">重置</el-button>
                   <el-button type="primary" :size="'small'" @click="addPersone(scope.row)">编辑</el-button>
+                  <el-button :size="'small'" v-if="scope.row.isActive == 1">停用</el-button>
+                  <el-button :size="'small'" v-if="scope.row.isActive == 0">启用</el-button>
                 </template>
               </el-table-column>
             </el-table>
           </div>
-          <div class="flex items-center justify-between p-3 bg-slate-100">
+          <div class="flex justify-between pb-2 pt-2 pl-3 pr-3">
             <div class="flex">
-              <el-button size="default">取消</el-button>
+              <el-button size="default" @click="changeBatch(false)"
+                :disabled="batchTableData.length == 0">取消</el-button>
               <el-dropdown class="ml-3">
                 <el-button type="primary">
                   更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                 </el-button>
                 <template #dropdown>
                   <el-dropdown-menu>
-                    <el-dropdown-item>批量修改部门</el-dropdown-item>
-                    <el-dropdown-item>批量修改角色</el-dropdown-item>
-                    <el-dropdown-item>修正工时所属部门</el-dropdown-item>
-                    <el-dropdown-item>批量启用员工</el-dropdown-item>
+                    <el-dropdown-item @click="batchItem('批量修改部门', 'dept', deptList)"
+                      :disabled="batchTableData.length == 0">批量修改部门</el-dropdown-item>
+                    <el-dropdown-item @click="batchItem('批量修改角色', 'role', roleList)"
+                      :disabled="batchTableData.length == 0">批量修改角色</el-dropdown-item>
+                    <el-dropdown-item @click="batchEnableItem"
+                      :disabled="batchTableData.length == 0">批量启用员工</el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
             </div>
             <div class="pr-4">
-              <el-pagination layout="total, prev, pager, next, sizes" :total="totalTable" :hide-on-single-page="true" />
+              <el-pagination layout="total, prev, pager, next, sizes" :total="totalTable" :page-size="teamForm.pageSize"
+                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
             </div>
           </div>
         </div>
@@ -123,7 +130,7 @@
     <!-- 新增部门 -->
     <el-dialog v-model="dialogFrom.addDeptDialogVisible" :title="deptListItem.label || '创建部门'" width="500"
       :before-close="handleClose">
-      <div>
+      <div class="pt-2">
         <el-form ref="deptRuleFormRef" style="max-width: 500px" :model="deptForm" :rules="deptRules" label-width="auto"
           size="large" status-icon>
           <el-form-item label="部门名称" prop="name">
@@ -159,6 +166,10 @@
       roleList: roleList,
       personnelFromData: personnelFromData
     }" @closeModal="closeModal" @personnelModalConfirm="personnelModalConfirm" />
+
+    <!-- 批量操作 -->
+    <BatchOperation :batchData="visibleData" :batchNode="batchTableData" :visibleText="allText.batchText"
+      :popup="visibleType" :batchOperationVisible="dialogFrom.batchOperationVisible" @close="closeModal" />
   </div>
 </template>
 
@@ -168,12 +179,13 @@ import { dayjs } from 'element-plus'
 import { Search, CirclePlusFilled, Edit, CirclePlus, Delete } from '@element-plus/icons-vue'
 import { FormInstance, FormRules, ElMessageBox } from 'element-plus'
 import { useStore } from '@/store/index'
-import { GET_DATA_LIST, DETELE_DEPT, MOD, GET_USERINFO, GET_ROUTELIST, GET_DEPTLIST, GET_USERLIST, GET_ADDDEPT, ADD_USER } from './api'
+import { GET_DATA_LIST, DETELE_DEPT, MOD, GET_USERINFO, GET_ROUTELIST, GET_DEPTLIST, BACTHSERROLE, GET_USERLIST, GET_ADDDEPT, ADD_USER } from './api'
 import { post } from "@/utils/request";
 import { getFromValue, updateDepTreeData, resetFromValue } from '@/utils/tools'
 
 // 导入页面
 import AddPersonnelModal from './module/AddPersonnelModal.vue'
+import BatchOperation from './module/BatchOperation.vue'
 
 const { getFunctionList, getUserInfoVal } = useStore()
 const globalPopup = inject<GlobalPopup>('globalPopup')
@@ -198,13 +210,21 @@ const loadingFrom = reactive({ // 所有加载状态
 })
 const dialogFrom: any = reactive({ // 所有弹窗状态
   addDeptDialogVisible: false,
-  addPersonnelDialogVisible: false
+  addPersonnelDialogVisible: false,
+  batchOperationVisible: false
 });
+const allText = reactive({
+  batchText: '批量操作'
+})
+const visibleType = ref<batchOperationType>('dept') // 弹窗类型
+const visibleData = ref<any>([]) // 批量弹窗数据源
 const totalTable = ref(0) // 表格总数
 const tableData: any = ref([]) // 表格数据
 const roleList: any = ref([]) // 角色列表
 const userList: any = ref([]) // 用户列表
 const deptList: any = ref([]) // 部门数据
+const batchTableData: any = ref([]) // 批量数据
+const multipleTableRef: any = ref()
 const deptListUntreated: any = ref([]) // 部门数据(未处理)
 const deptListItem: any = ref({}) // 选中的部门数据
 const personnelFromData = ref({}) // 人员表单数据
@@ -237,17 +257,39 @@ const deptRules = reactive<FormRules<typeof deptForm>>({ // 部门表单校验
 })
 
 // 定义方法
+function batchEnableItem() {
+  const userIds = batchTableData.value.map((item: any) => item.id)
+  post(BACTHSERROLE, { ids: JSON.stringify(userIds), isActive: 1 }).then(() => {
+    globalPopup?.showSuccess('操作成功')
+    changeBatch(false)
+    getTableData()
+  }).catch((err) => {
+    globalPopup?.showError(err.msg)
+  })
+}
+
+function changeBatch(flag: boolean = true) {
+  if (flag) {
+    batchTableData.value = multipleTableRef.value && multipleTableRef.value.getSelectionRows()
+  } else {
+    batchTableData.value = []
+    multipleTableRef.value && multipleTableRef.value.clearSelection()
+  }
+}
+
 function addPersone(item: any) {
   console.log(item)
-  if(!item) {
+  if (!item) {
+    personnelFromData.value = {}
     dialogFrom.addPersonnelDialogVisible = true
     return
-  } 
+  }
   post(GET_USERINFO, { userId: item.id }).then(res => {
     const { id, name, phone, jobNumber, roleId, departmentCascade, inductionDate } = res.data
-    let newData = { id, name, phone, jobNumber, roleId, departmentId: 
-      departmentCascade && departmentCascade.split(',').map(Number).reverse(), 
-      inductionDate 
+    let newData = {
+      id, name, phone, jobNumber, roleId, departmentId:
+        departmentCascade && departmentCascade.split(',').map(Number).reverse(),
+      inductionDate
     }
     personnelFromData.value = newData
     dialogFrom.addPersonnelDialogVisible = true
@@ -382,17 +424,39 @@ function dialogFromCli(type: string, data: any = {}, flag: boolean = false) {
   dialogFrom[type] = true
 }
 
+function handleSizeChange(val: number) {
+  teamForm.pageIndex = 1
+  teamForm.pageSize = val
+  getTableData()
+}
+
+function handleCurrentChange(val: number) {
+  teamForm.pageIndex = val
+  getTableData()
+}
+
 function resetDialog() {
   let newDeptForm = resetFromValue(deptForm)
   Object.assign(deptForm, newDeptForm)
 }
 
+function batchItem(text: string, type: batchOperationType, data: any) {
+  allText.batchText = text,
+    visibleType.value = type
+  visibleData.value = data
+  dialogFrom.batchOperationVisible = true
+}
+
 function handleClose(done: any) {
   done()
 }
 
-function closeModal(modelType: string) {
+function closeModal(modelType: string, flag: boolean = false) {
   dialogFrom[modelType] = false
+  if (flag) {
+    changeBatch(false)
+    getTableData()
+  }
 }
 
 onBeforeMount(() => {
@@ -411,6 +475,7 @@ onMounted(() => {
 .teamstyle {
   .team-header {
     padding: 0.75rem 1.25rem;
+    box-sizing: border-box
   }
 
   .textFont {
@@ -449,6 +514,7 @@ onMounted(() => {
     }
   }
 }
+
 .operation {
   cursor: pointer;
 }

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/team/module/AddPersonnelModal.vue

@@ -1,6 +1,6 @@
 <template>
     <el-dialog v-model="data.addPersonnelDialogVisible" :title="'添加人员'" width="500" :before-close="handleClose">
-        <div>
+        <div class="pt-3">
             <el-form ref="personnelRuleFormRef" style="max-width: 500px" :model="personnelFrom" :rules="personnelRules"
                 label-width="auto" size="large" status-icon>
                 <el-form-item label="姓名" prop="name">
@@ -67,7 +67,7 @@ const data = ref<Props['data']>({
     personnelFromData: {}
 })
 const personnelRuleFormRef = ref<FormInstance>() // 表单实例
-const personnelFrom = reactive<personnelFromType>({ // 填写的内容
+const personnelFrom = ref<personnelFromType>({ // 填写的内容
     id: '',
     name: '',
     phone: '',
@@ -88,15 +88,16 @@ const personnelRules = reactive<FormRules<typeof personnelFrom>>({ // 部门表
 // 定义方法
 function addPersonel(formEl: FormInstance | undefined) {
     if (!formEl) return
-    let dataForm = getFromValue(personnelFrom)
+    let dataForm = getFromValue(personnelFrom.value)
     const { departmentId } = dataForm
     emit('personnelModalConfirm', { ...dataForm, departmentId: departmentId && departmentId[departmentId.length - 1]  }, 'addPersonnelDialogVisible')
 }
 
 // 监听 Props 的变化
 watch(() => props.data, (newValue) => {
+    console.log('开始执行', newValue)
     data.value = newValue
-    Object.assign(personnelFrom, newValue.personnelFromData)
+    personnelFrom.value = newValue.personnelFromData
 });
 
 const handleClose = () => {

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/team/module/BatchOperation.vue

@@ -0,0 +1,100 @@
+<template>
+    <el-dialog v-model="props.batchOperationVisible" width="800px" :show-close="false" :close-on-click-modal="false"
+        top="10vh">
+        <template #header="{ titleId, titleClass }">
+            <div class="flex justify-between items-center border-b pb-3">
+                <h4 :id="titleId">{{ '批量操作' }}</h4>
+                <div>
+                    <el-button @click="cancel">取消</el-button>
+                    <el-button type="primary" @click="confirm" v-loading="confirmloading">确认</el-button>
+                </div>
+            </div>
+        </template>
+        <div class="pt-4 pb-2">
+            <template v-if="props.popup == 'dept'">
+                <div class="w-full flex items-center">
+                    <div class="w-[100px] text-right">设置部门：</div>
+                    <div class="flex-1 pl-3">
+                        <el-cascader v-model="bindingVal" :options="props.batchData" class="w-full"
+                            :props="cascaderProps" />
+                    </div>
+                </div>
+            </template>
+            <template v-if="props.popup == 'role'">
+                <div class="w-full flex items-center">
+                    <div class="w-[100px] text-right">设置角色：</div>
+                    <div class="flex-1 pl-3">
+                        <el-select v-model="bindingVal" placeholder="请选择" class="w-full" filterable>
+                            <el-option v-for="item in props.batchData" :key="item.id" :label="item.rolename"
+                                :value="item.id" />
+                        </el-select>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, onUnmounted, defineExpose, inject, watchEffect } from 'vue'
+import type { CascaderProps } from 'element-plus'
+import { Props } from './type';
+import { BACTHUPDATEDEPT, BACTHUPDATEROLE } from '../api';
+import { post } from '@/utils/request';
+const props = defineProps<Props>()
+const emits = defineEmits(['close']);
+
+const globalPopup = inject<GlobalPopup>('globalPopup')
+const confirmloading = ref<boolean>(false)
+const cascaderProps = ref<CascaderProps>({
+    value: 'id',
+    expandTrigger: 'hover',
+    checkStrictly: true
+})
+const bindingVal = ref<any>([])
+
+const submitParameters = ref<any>({
+    'dept': {
+        url: BACTHUPDATEDEPT, // 请求地址
+        whether_str: false, // 是否转成字符串
+        filed: 'deptId', // 参数字段
+        param: {}
+    },
+    'role': {
+        url: BACTHUPDATEROLE, // 请求地址
+        whether_str: false, // 是否转成字符串
+        filed: 'roleId', // 参数字段
+        param: {}
+    }
+})
+
+function confirm() {
+    let params = processingParameters()
+    confirmloading.value = true
+    post(params.url, { ...params.param }).then(_res => {
+        globalPopup?.showSuccess('操作成功')
+        cancel()
+    }).catch(err => {
+        globalPopup?.showError(err.msg)
+    }).finally(() => {
+        confirmloading.value = false
+    })
+}
+
+function processingParameters() {
+    let { url, whether_str, filed, param } = submitParameters.value[props.popup]
+    const userIds = props.batchNode.map((item: any) => item.id)
+    let val = bindingVal.value
+    if (Array.isArray(bindingVal.value)) {
+        val = bindingVal.value[bindingVal.value.length - 1]
+    }
+    let rsult = { [filed]: val, userIds: !whether_str ? JSON.stringify(userIds) : userIds.join(',') }
+    return { url, param: { ...param, ...rsult } }
+}
+
+function cancel() {
+    emits('close', 'batchOperationVisible', true)
+}
+</script>
+
+<style lang="scss"></style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/team/module/type.ts

@@ -0,0 +1,26 @@
+export interface Props {
+    /**
+     *  弹窗是否显示
+     */
+    batchOperationVisible: boolean;
+    /**
+     * 弹窗标题
+     */
+    visibleText: String;
+    /**
+     * 弹窗类型
+     */
+    popup: batchOperationType;
+    /**
+     * 数据源
+     */
+    batchData: any;
+    /**
+     * 批量节点
+     */
+    batchNode: any[]
+    /**
+     * 其他配置
+     */
+    otherConfig?: any;
+  }

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/team/type.d.ts

@@ -0,0 +1 @@
+type batchOperationType = 'dept' | 'role'