| | |
| | | </el-col> |
| | | <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()"/> |
| | | </el-row> |
| | | <el-table |
| | | ref="multipleTableRef" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | height="calc(100% - 100px)" |
| | | :header-cell-style="{background: '#fafafa'}" |
| | | @selection-change="handleSelectionChange" |
| | | > |
| | | <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }" @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> |
| | | </el-table> |
| | | <div class="pageBtn"> |
| | | <el-pagination |
| | | v-model:currentPage="pageIndex" |
| | | v-model:page-size="pageSize" |
| | | :page-sizes="[10, 15]" |
| | | small=false |
| | | background |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="totalSize" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <el-dialog v-model="dialogDetails" title="工作时间组"> |
| | | <el-form :model="details" label-width="120px"> |
| | | <el-form-item label="时间组名称"> |
| | | <el-input |
| | | v-model="details.name" |
| | | readonly |
| | | /> |
| | | <el-input v-model="details.name" readonly /> |
| | | </el-form-item> |
| | | <el-form-item label="关联工作时段" v-if="details.list.length>0"> |
| | | <el-input |
| | | v-model="details.list" |
| | | readonly |
| | | /> |
| | | <el-input v-model="details.list" readonly /> |
| | | </el-form-item> |
| | | <el-form-item label="描述信息" v-if="details.info"> |
| | | <el-input |
| | | v-model="details.info" |
| | | type="textarea" |
| | | readonly |
| | | /> |
| | | <el-input v-model="details.info" type="textarea" readonly /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> |
| | |
| | | <el-dialog v-model="dialogAddRecord" title="工作时间组编辑" @close="closeAdd" @open="openAdd"> |
| | | <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules"> |
| | | <el-form-item label="时间组名称" prop="name"> |
| | | <el-input |
| | | v-model="addRecord.name" |
| | | > |
| | | </el-input> |
| | | <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-select> |
| | | </el-form-item> |
| | | <el-form-item label="描述信息" prop="info"> |
| | | <el-input |
| | | v-model="addRecord.info" |
| | | type="textarea" |
| | | > |
| | | </el-input> |
| | | <el-input v-model="addRecord.info" type="textarea"> </el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button> |
| | |
| | | import { toRefs, reactive, ref, onMounted } from 'vue'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { initBackEndControlRoutes } from '/@/router/backEnd'; |
| | | import {useUserInfo} from "/@/stores/userInfo"; |
| | | import { useUserInfo } from '/@/stores/userInfo'; |
| | | import { Session } from '/@/utils/storage'; |
| | | 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 { 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/systemManage/basicDateManage/personShiftManage/workingHoursSet'; |
| | | import { workingHoursApi } from '/@/api/systemManage/basicDateManage/personShiftManage/workingHours'; |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface stateType { |
| | | tableData: Array<string>, |
| | | workTimeList: Array<string>, |
| | | multipleSelection: Array<any>, |
| | | deleteArr: Array<any>, |
| | | dialogDetails: boolean, |
| | | dialogAddRecord: boolean, |
| | | deleteDialog: boolean, |
| | | tableData: Array<string>; |
| | | workTimeList: Array<string>; |
| | | multipleSelection: Array<any>; |
| | | deleteArr: Array<any>; |
| | | dialogDetails: boolean; |
| | | dialogAddRecord: boolean; |
| | | deleteDialog: boolean; |
| | | deleteSetDialog: boolean; |
| | | pageIndex: number, |
| | | pageSize: number, |
| | | chosenIndex: null | number, |
| | | deleteId: null | number, |
| | | searchWord: string, |
| | | totalSize: number, |
| | | pageIndex: number; |
| | | pageSize: number; |
| | | chosenIndex: null | number; |
| | | deleteId: null | number; |
| | | searchWord: string; |
| | | totalSize: number; |
| | | addRecord: { |
| | | name: string, |
| | | list: Array<any>, |
| | | info: string |
| | | }, |
| | | name: string; |
| | | list: Array<any>; |
| | | info: string; |
| | | }; |
| | | details: { |
| | | name: string, |
| | | list: Array<any>, |
| | | info: string |
| | | } |
| | | name: string; |
| | | list: Array<any>; |
| | | info: string; |
| | | }; |
| | | } |
| | | |
| | | export default { |
| | | name: 'workingHours', |
| | | components:{}, |
| | | setup() { |
| | | const userInfo = useUserInfo() |
| | | const userInfo = useUserInfo(); |
| | | const {userInfos} = storeToRefs(userInfo); |
| | | |
| | | const state = reactive<stateType>({ |
| | |
| | | }, |
| | | deleteId: null, |
| | | deleteArr: [] |
| | | }) |
| | | }); |
| | | interface User { |
| | | name: string, |
| | | list: [], |
| | | info: string |
| | | name: string; |
| | | list: []; |
| | | info: string; |
| | | } |
| | | const multipleTableRef = ref<InstanceType<typeof ElTable>>() |
| | | const multipleTableRef = ref<InstanceType<typeof ElTable>>(); |
| | | const toggleSelection = (rows?: User[]) => { |
| | | if (rows) { |
| | | rows.forEach((row) => { |
| | | // TODO: improvement typing when refactor table |
| | | // eslint-disable-next-line @typescript-eslint/ban-ts-comment |
| | | // @ts-expect-error |
| | | multipleTableRef.value!.toggleRowSelection(row, undefined) |
| | | }) |
| | | multipleTableRef.value!.toggleRowSelection(row, undefined); |
| | | }); |
| | | } else { |
| | | multipleTableRef.value!.clearSelection() |
| | | multipleTableRef.value!.clearSelection(); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | // 多选 |
| | | const handleSelectionChange = (val: User[]) => { |
| | | state.multipleSelection = JSON.parse(JSON.stringify(val)) |
| | | state.multipleSelection = JSON.parse(JSON.stringify(val)); |
| | | state.deleteArr = state.multipleSelection.map((item)=>{ |
| | | item = item.id |
| | | return item |
| | | }) |
| | | } |
| | | item = item.id; |
| | | return item; |
| | | }); |
| | | }; |
| | | |
| | | const addRef = ref<FormInstance>() |
| | | const addRef = ref<FormInstance>(); |
| | | const addRules = reactive<FormRules>({ |
| | | name: [{required: true, message: '该内容不能为空', trigger: 'blur'}], |
| | | list: [{required: true, message: '该内容不能为空', trigger: 'blur'}] |
| | | }) |
| | | }); |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | getListByPage() |
| | | getWorkTimePeriod() |
| | | }) |
| | | getListByPage(); |
| | | getWorkTimePeriod(); |
| | | }); |
| | | |
| | | // 分页获取工作时间组列表 |
| | | const getListByPage = async ()=>{ |
| | | const data = {pageSize: state.pageSize,pageIndex: state.pageIndex,searchParams:{name: state.searchWord}} |
| | | const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { name: state.searchWord } }; |
| | | let res = await workingHoursSetApi().postWorkTimeGroupPage(data); |
| | | if (res.data.code === '200') { |
| | | state.tableData = res.data.data.map((item)=>{ |
| | | if(item.list == null){ |
| | | item.list = [] |
| | | item.list = []; |
| | | }else{ |
| | | item.list= Array.from(item.list,({workTimePeriodId})=>workTimePeriodId) |
| | | item.list = Array.from(item.list, ({ workTimePeriodId }) => workTimePeriodId); |
| | | } |
| | | return item |
| | | }) |
| | | state.totalSize = res.data.total |
| | | return item; |
| | | }); |
| | | state.totalSize = res.data.total; |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | // 表格数据格式化 |
| | | const toNames =(row, column, cellValue, index) => { |
| | | if(row.list==[]){ |
| | | return [] |
| | | return []; |
| | | }else{ |
| | | const nameList = [] |
| | | 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) |
| | | nameList.push(state.workTimeList[t].name); |
| | | } |
| | | } |
| | | } |
| | | return nameList.join() |
| | | 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') |
| | | state.workTimeList = res.data.data; |
| | | console.log(state.workTimeList, 'list'); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | // 关键词查询记录 |
| | | const searchRecord = async()=>{ |
| | |
| | | message: '请输入查询关键词' |
| | | }); |
| | | }else{ |
| | | getListByPage() |
| | | getListByPage(); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | const clearSearch = async()=>{ |
| | | state.searchWord='' |
| | | getListByPage() |
| | | } |
| | | state.searchWord = ''; |
| | | getListByPage(); |
| | | }; |
| | | |
| | | // 添加工作时段方法 |
| | | const addRecord = async (data:any) => { |
| | |
| | | type: 'success', |
| | | message: res.data.msg |
| | | }); |
| | | getListByPage() |
| | | getListByPage(); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | |
| | | type: 'success', |
| | | message: res.data.msg |
| | | }); |
| | | getListByPage() |
| | | getListByPage(); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | // 新增修改记录 |
| | | const confirmAddRecord = async (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return |
| | | if (!formEl) return; |
| | | await formEl.validate(async (valid, fields) => { |
| | | if (valid) { |
| | | const data = { |
| | | name: state.addRecord.name, |
| | | info: state.addRecord.info, |
| | | workTimePeriodIds: state.addRecord.list |
| | | } |
| | | }; |
| | | if (state.chosenIndex == null) { |
| | | await addRecord(data) |
| | | await addRecord(data); |
| | | } else { |
| | | data.id = JSON.stringify(state.addRecord.id), |
| | | console.log(data,'修改参数') |
| | | await editRecord(data) |
| | | (data.id = JSON.stringify(state.addRecord.id)), console.log(data, '修改参数'); |
| | | await editRecord(data); |
| | | } |
| | | state.dialogAddRecord = false |
| | | state.dialogAddRecord = false; |
| | | } else { |
| | | console.log('error submit!', fields) |
| | | console.log('error submit!', fields); |
| | | } |
| | | }) |
| | | |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | // 删除工作时间组方法 |
| | | const deleteRecord = async (data:any) => { |
| | |
| | | type: 'success', |
| | | message: res.data.msg |
| | | }); |
| | | getListByPage() |
| | | getListByPage(); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | const deleteRecordBtn = (row) => { |
| | | state.deleteId = row.id |
| | | state.deleteDialog = true |
| | | } |
| | | state.deleteId = row.id; |
| | | state.deleteDialog = true; |
| | | }; |
| | | |
| | | const conFirmDelete = () => { |
| | | deleteRecord({ id: state.deleteId }) |
| | | state.deleteDialog = false |
| | | } |
| | | deleteRecord({ id: state.deleteId }); |
| | | state.deleteDialog = false; |
| | | }; |
| | | |
| | | // 批量删除 |
| | | const deleteBatchBtn = async () => { |
| | | if (state.deleteArr.length > 0) { |
| | | state.deleteSetDialog = true |
| | | state.deleteSetDialog = true; |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | |
| | | const conFirmDeleteBatch = async () => { |
| | | let res = await workingHoursSetApi().deletBatchWorkTimeGroup({ids: state.deleteArr}); |
| | | if (res.data.code === '200') { |
| | | state.deleteSetDialog = false |
| | | state.deleteSetDialog = false; |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: res.data.msg |
| | | }); |
| | | getListByPage() |
| | | getListByPage(); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | state.deleteSetDialog = false |
| | | state.deleteSetDialog = false; |
| | | } |
| | | } |
| | | }; |
| | | |
| | | const handleSizeChange = (val: number) => { |
| | | state.pageSize = val |
| | | getListByPage() |
| | | } |
| | | state.pageSize = val; |
| | | getListByPage(); |
| | | }; |
| | | const handleCurrentChange = (val: number) => { |
| | | state.pageIndex = val |
| | | getListByPage() |
| | | } |
| | | state.pageIndex = val; |
| | | getListByPage(); |
| | | }; |
| | | |
| | | // 查看记录 |
| | | const viewRecord = (row) => { |
| | | state.details = JSON.parse(JSON.stringify(row)) |
| | | state.details = JSON.parse(JSON.stringify(row)); |
| | | if(row.list==[]){ |
| | | state.details.list = [] |
| | | state.details.list = []; |
| | | }else{ |
| | | state.details.list = [] |
| | | 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.details.list.push(state.workTimeList[t].name); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | state.dialogDetails = true |
| | | } |
| | | state.dialogDetails = true; |
| | | }; |
| | | |
| | | // 刷新 |
| | | const reLoadData = async () =>{ |
| | | getListByPage() |
| | | } |
| | | getListByPage(); |
| | | }; |
| | | // 点击修改 |
| | | const editRecordBtn = (index, row) => { |
| | | state.dialogAddRecord = true |
| | | state.chosenIndex = index |
| | | state.addRecord = JSON.parse(JSON.stringify(row)) |
| | | } |
| | | state.dialogAddRecord = true; |
| | | state.chosenIndex = index; |
| | | state.addRecord = JSON.parse(JSON.stringify(row)); |
| | | }; |
| | | const closeAdd = () => { |
| | | state.addRecord = {} |
| | | state.chosenIndex = null |
| | | } |
| | | state.addRecord = {}; |
| | | state.chosenIndex = null; |
| | | }; |
| | | const openAdd = () => { |
| | | if (state.chosenIndex == null) { |
| | | state.addRecord.info = '' |
| | | state.addRecord.info = ''; |
| | | } |
| | | } |
| | | }; |
| | | const indexClear = () => { |
| | | state.deleteId = null |
| | | } |
| | | state.deleteId = null; |
| | | }; |
| | | |
| | | // 折线图 |
| | | const renderMenu = async (value: string) => { |
| | | Session.set('projectId', value) |
| | | userInfos.value.projectId = value |
| | | Session.set('projectId', value); |
| | | userInfos.value.projectId = value; |
| | | await initBackEndControlRoutes(); |
| | | }; |
| | | return { |
| | |
| | | ...toRefs(state) |
| | | }; |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |