班组接口对接

Admin

2022-08-05 4a125073dfb0acfefc473e9439ff6a551735e0e5

 src/views/system/personShiftManage/personTimeManage/holidayTime/index.vue

copy from src/views/system/personShiftManage/workingHoursSet/index.vue
copy to src/views/system/personShiftManage/personTimeManage/holidayTime/index.vue
文件从 src/views/system/personShiftManage/workingHoursSet/index.vue 复制
@@ -4,7 +4,7 @@
      <el-row class="homeCard">
         <el-col :span="8">
            <div class="grid-content topInfo">
               <el-input v-model="searchWord" placeholder="休息时间组名称"></el-input>
               <el-input v-model="searchWord" placeholder="休息日名称"></el-input>
               <el-button type="primary" @click="searchRecord">查询</el-button>
               <el-button plain @click="clearSearch">重置</el-button>
            </div>
@@ -29,8 +29,10 @@
                  @selection-change="handleSelectionChange"
            >
               <el-table-column type="selection" width="100" />
               <el-table-column property="name" label="工作时间组名称"/>
               <el-table-column property="list" :formatter="toNames" label="关联工作时段"/>
               <el-table-column property="name" label="休息日名称"/>
               <el-table-column property="typeName" label="休息日类型"/>
               <el-table-column property="ruleName" label="休息日规则"/>
               <el-table-column property="ruleNumber" label="休息日"/>
               <el-table-column property="info" label="描述信息"/>
               <el-table-column fixed="right" label="操作" align="center" width="250">
                  <template #default="scope">
@@ -56,17 +58,29 @@
         </div>
      </div>
      </div>
      <el-dialog v-model="dialogDetails" title="工作时间组">
      <el-dialog v-model="dialogDetails" title="休息时间">
         <el-form :model="details" label-width="120px">
            <el-form-item label="时间组名称">
            <el-form-item label="名称">
               <el-input
                     v-model="details.name"
                     readonly
               />
            </el-form-item>
            <el-form-item label="关联工作时段" v-if="details.list.length>0">
            <el-form-item label="休假类型">
               <el-input
                     v-model="details.list"
                     v-model="details.typeName"
                     readonly
               />
            </el-form-item>
            <el-form-item label="休假规则" v-if="details.type == 2">
               <el-input
                     v-model="details.ruleName"
                     readonly
               />
            </el-form-item>
            <el-form-item label="休假时间" v-if="details.type == 2">
               <el-input
                     v-model="details.ruleNumber"
                     readonly
               />
            </el-form-item>
@@ -82,18 +96,33 @@
            </el-form-item>
         </el-form>
      </el-dialog>
      <el-dialog v-model="dialogAddRecord" title="工作时间组编辑" @close="closeAdd" @open="openAdd">
      <el-dialog v-model="dialogAddRecord" title="休息时间编辑" @close="closeAdd">
         <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
            <el-form-item label="时间组名称" prop="name">
            <el-form-item label="休息日名称" prop="name">
               <el-input
                     v-model="addRecord.name"
               >
               </el-input>
            </el-form-item>
            <el-form-item label="关联工作时段" prop="list">
               <el-select v-model="addRecord.list" multiple>
                  <el-option v-for="(item,index) in workTimeList" :key="index" :label="item.name" :value="item.id" />
            <el-form-item label="休假类型" prop="type">
               <el-select v-model="addRecord.type" placeholder="请选择休假类型" style="width: 100%" @change="typeChange">
                  <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.value"/>
               </el-select>
            </el-form-item>
            <el-form-item label="休假规则" prop="rule" v-if="addRecord.type == '自定义休息日' || addRecord.type == 2">
               <el-select v-model="addRecord.rule" placeholder="请选择休假规则" style="width: 100%" @change="ruleChange">
                  <el-option v-for="(item,index) in ruleList" :key="index" :label="item.name" :value="item.value"/>
               </el-select>
            </el-form-item>
            <el-form-item label="选择休假时间" prop="ruleNumber" v-if="addRecord.rule == '每周'|| addRecord.rule == 1">
               <el-checkbox-group v-model="addRecord.ruleNumber">
                  <el-checkbox v-for="(item,i) in weekDays" :label="item.value" :key="i">{{item.name}}</el-checkbox>
               </el-checkbox-group>
            </el-form-item>
            <el-form-item label="选择休假时间" prop="ruleNumber" v-if="addRecord.rule == '每月'|| addRecord.rule == 2">
               <el-checkbox-group v-model="addRecord.ruleNumber">
                  <el-checkbox v-for="index in 31" :label="index" :key="index"/>
               </el-checkbox-group>
            </el-form-item>
            <el-form-item label="描述信息" prop="info">
               <el-input
@@ -138,35 +167,42 @@
   import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
   import { ElTable } from 'element-plus'
   import { FormInstance, FormRules, ElMessage } from 'element-plus'
   import { workingHoursSetApi } from '/@/api/basicDateManage/personShiftManage/workingHoursSet';
   import { workingHoursApi } from '/@/api/basicDateManage/personShiftManage/workingHours';
   import { holidayTimeApi } from '/@/api/basicDateManage/personShiftManage/holidayTime';
   import {workingHoursSetApi} from "/@/api/basicDateManage/personShiftManage/workingHoursSet";



   // 定义接口来定义对象的类型
   interface stateType {
      tableData: Array<string>,
      pageRecord: Array<string>,
      workTimeList: Array<string>,
      multipleSelection: Array<any>,
      deleteArr: Array<any>,
      weekDays: Array<any>,
      typeList: Array<any>,
      ruleList: Array<any>,
      dialogDetails: boolean,
      dialogAddRecord: boolean,
      deleteDialog: boolean,
      deleteSetDialog: boolean;
      deleteSetDialog: boolean,
      pageIndex: number,
      pageSize: number,
      chosenIndex: null | number,
      deleteId: null | number,
      searchWord: string,
      chosenIndex: null| number,
      casProps: object,
      deleteId: null| number,
      totalSize: number,
      addRecord: {
         name: string,
         list: Array<any>,
         type: number | string,
         rule: number | string,
         ruleNumber: Array<number> | string,
         info: string
      },
      details: {
         name: string,
         list: Array<any>,
         type: string,
         rule: string,
         ruleNumber: string,
         info: string
      }
   }
@@ -185,21 +221,80 @@
         chosenIndex: null,
         searchWord: '',
         tableData: [],
         pageRecord: [],
         workTimeList: [],
         typeList: [
            {
               name: '每周公休假日',
               value: 0
            },
            {
               name: '国家法定节假日',
               value: 1
            },
            {
               name: '自定义休息日',
               value: 2
            }
         ],
         ruleList: [
            {
               name: '每周',
               value: 1
            },
            {
               name: '每月',
               value: 2
            }
         ],
         multipleSelection: [],
         dialogDetails: false,
         dialogAddRecord: false,
         deleteDialog: false,
         deleteSetDialog: false,
         weekDays: [
            {
               name: '周一',
               value: 1
            },
            {
               name: '周二',
               value: 2
            },
            {
               name: '周三',
               value: 3
            },
            {
               name: '周四',
               value: 4
            },
            {
               name: '周五',
               value: 5
            },
            {
               name: '周六',
               value: 6
            },
            {
               name: '周日',
               value: 7
            }
         ],
         casProps: {
            expandTrigger: 'hover',
         },
         addRecord: {
            name: '',
            list: [],
            type: '',
            rule: '',
            ruleNumber: [],
            info: ''
         },
         details: {
            name: '',
            list: [],
            type: '',
            rule: '',
            ruleNumber: '',
            info: ''
         },
         deleteId: null,
@@ -207,9 +302,28 @@
      })
      interface User {
         name: string,
         list: [],
         type: number | string,
         rule: number | string,
         ruleNumber: Array<number> | string,
         info: string
      }

      // 排序
      const compare = (x,y)=> {
         if (x < y) {
            return -1;
         } else if (x > y) {
            return 1;
         } else {
            return 0;
         }
      }

      const handleChange = (value) => {
         state.addRecord.content = []
         console.log(JSON.parse(JSON.stringify(value)))
      }

      const multipleTableRef = ref<InstanceType<typeof ElTable>>()
      const toggleSelection = (rows?: User[]) => {
         if (rows) {
@@ -224,6 +338,16 @@
         }
      }

      // 休息类型改变时操作
      const typeChange =()=>{
         state.addRecord.rule = ''
         state.addRecord.ruleNumber = []
      }
      // 休息规则改变时操作
      const ruleChange =()=>{
         state.addRecord.ruleNumber = []
      }

      // 多选
      const handleSelectionChange = (val: User[]) => {
         state.multipleSelection = JSON.parse(JSON.stringify(val))
@@ -236,61 +360,34 @@
      const addRef = ref<FormInstance>()
      const addRules = reactive<FormRules>({
         name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
         list: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
         type: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
         rule: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
         ruleNumber: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
      })

      // 页面载入时执行方法
      onMounted(() => {
         // getWorkTimePeriod()
         getListByPage()
         getWorkTimePeriod()
      })

      // 分页获取工作时间组列表
      // 休假类型格式化
      // const typeName =(row, column, cellValue, index) =>{
      //    return row.type == 0? '每周公休假日':(row.type == 1? '国家法定节假日': '自定义休息日')
      // }

      // 分页获取工作时段列表
      const getListByPage = async ()=>{
         const data = {pageSize: state.pageSize,pageIndex: state.pageIndex,searchParams:{name: state.searchWord}}
         let res = await workingHoursSetApi().postWorkTimeGroupPage(data);
         let res = await holidayTimeApi().getAllBreakTimeRuleByPage(data);
         if (res.data.code === '200') {
            state.pageRecord = res.data.data
            state.tableData = res.data.data.map((item)=>{
               if(item.list == null){
                  item.list = []
               }else{
                  item.list= Array.from(item.list,({workTimePeriodId})=>workTimePeriodId)
               }
               item.typeName = item.type===0?'每周公休假日':(item.type===1?'国家法定节假日':(item.type===2?'自定义休息日':''))
               item.ruleName = item.rule===1?'每周':(item.rule===2?'每月':'')
               return item
            })
            console.log(state.tableData,'列表获取的tableData')
            state.totalSize = res.data.total
         } else {
            ElMessage({
               type: 'warning',
               message: res.data.msg
            });
         }
      }

      // 表格数据格式化
      const toNames =(row, column, cellValue, index) => {
         if(row.list==[]){
            return []
         }else{
            const nameList = []
            for(let i=0;i<row.list.length;i++){
               for(let t=0;t<state.workTimeList.length;t++){
                  if(row.list[i]==state.workTimeList[t].id){
                     nameList.push(state.workTimeList[t].name)
                  }
               }
            }
            return nameList.join()
         }
      }

      // 获取工作时段列表
      const getWorkTimePeriod = async () => {
         let res = await workingHoursApi().getWorkTimePeriod();
         if (res.data.code === '200') {
            state.workTimeList = res.data.data
            console.log(state.workTimeList,'list')
         } else {
            ElMessage({
               type: 'warning',
@@ -316,9 +413,9 @@
         getListByPage()
      }

      // 添加工作时段方法
      // 添加休息时间
      const addRecord = async (data:any) => {
         let res = await workingHoursSetApi().addWorkTimeGroup(data);
         let res = await holidayTimeApi().addBreakTime(data);
         if (res.data.code === '200') {
            ElMessage({
               type: 'success',
@@ -333,9 +430,21 @@
         }
      };

      // 修改工作时段方法
      // 修改休息时间
      const editRecordBtn = (index, row) => {
         state.dialogAddRecord = true
         state.chosenIndex = index
         console.log(row,'编辑时的row')
         console.log(state.tableData,'编辑时的tableData')
         state.addRecord = JSON.parse(JSON.stringify(row))
         state.addRecord.ruleNumber = row.ruleNumber.split(',').map((i)=>{
            return Number(i)
         })
         console.log(state.addRecord)
      }

      const editRecord = async (data:any) => {
         let res = await workingHoursSetApi().updateWorkTimeGroup(data);
         let res = await holidayTimeApi().updateBreakTime(data);
         if (res.data.code === '200') {
            ElMessage({
               type: 'success',
@@ -358,13 +467,23 @@
               const data = {
                  name: state.addRecord.name,
                  info: state.addRecord.info,
                  workTimePeriodIds: state.addRecord.list
                  type: Number(state.addRecord.type),
                  rule: Number(state.addRecord.rule),
                  ruleNumber: state.addRecord.ruleNumber.sort(compare).join(',')
               }
               if (state.chosenIndex == null) {
                  await addRecord(data)
                  if(data.type == 2 && data.ruleNumber==''){
                     ElMessage({
                        type: 'warning',
                        message: '请至少选择一个休息时间'
                     });
                     return
               } else {
                  data.id = JSON.stringify(state.addRecord.id),
                        console.log(data,'修改参数')
                     await addRecord(data)
                  }
               } else {
                  data.id = state.addRecord.id,
                  console.log(data,'提交时的参数data')
                  await editRecord(data)
               }
               state.dialogAddRecord = false
@@ -374,10 +493,20 @@
         })

      }
      const closeAdd = () => {
         state.addRecord = {
            name: '',
            type: '',
            rule: '',
            ruleNumber: [],
            info: ''
         }
         state.chosenIndex = null
      }

      // 删除工作时间组方法
      // 删除工作时段
      const deleteRecord = async (data:any) => {
         let res = await workingHoursSetApi().deleteWorkTimeGroup(data);
         let res = await holidayTimeApi().deleteBreakTime(data);
         if (res.data.code === '200') {
            ElMessage({
               type: 'success',
@@ -415,7 +544,7 @@
      };

      const conFirmDeleteBatch = async () => {
         let res = await workingHoursSetApi().deletBatchWorkTimeGroup({ids: state.deleteArr});
         let res = await holidayTimeApi().deleteBatch({ids: state.deleteArr});
         if (res.data.code === '200') {
            state.deleteSetDialog = false
            ElMessage({
@@ -444,18 +573,6 @@
      // 查看记录
      const viewRecord = (row) => {
         state.details = JSON.parse(JSON.stringify(row))
         if(row.list==[]){
            state.details.list = []
         }else{
            state.details.list = []
            for(let i=0;i<row.list.length;i++){
               for(let t=0;t<state.workTimeList.length;t++){
                  if(row.list[i]==state.workTimeList[t].id){
                     state.details.list.push(state.workTimeList[t].name)
                  }
               }
            }
         }
         state.dialogDetails = true
      }

@@ -463,21 +580,7 @@
      const reLoadData = async () =>{
         getListByPage()
      }
      // 点击修改
      const editRecordBtn = (index, row) => {
         state.dialogAddRecord = true
         state.chosenIndex = index
         state.addRecord = JSON.parse(JSON.stringify(row))
      }
      const closeAdd = () => {
         state.addRecord = {}
         state.chosenIndex = null
      }
      const openAdd = () => {
         if (state.chosenIndex == null) {
            state.addRecord.info = ''
         }
      }

      const indexClear = () => {
         state.deleteId = null
      }
@@ -496,25 +599,25 @@
         Delete,
         Refresh,
         Plus,
         toNames,
         typeChange,
         ruleChange,
         compare,
         toggleSelection,
         handleSelectionChange,
         deleteBatchBtn,
         conFirmDeleteBatch,
         searchRecord,
         clearSearch,
         viewRecord,
         deleteRecordBtn,
         conFirmDelete,
         getListByPage,
         getWorkTimePeriod,
         reLoadData,
         deleteRecord,
         deleteBatchBtn,
         conFirmDeleteBatch,
         handleSizeChange,
         handleCurrentChange,
         confirmAddRecord,
         closeAdd,
         openAdd,
         indexClear,
         editRecordBtn,
         ...toRefs(state)