From d592747d5eaa2cfbe698f8ac61222eb3aa75d1fc Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期二, 02 八月 2022 09:09:12 +0800 Subject: [PATCH] 添加修改页面 --- src/views/basicRightsManagement/personnelShiftManagement/personnelManagement/index.vue | 324 ++++++++++++++++++++++++----------------------------- 1 files changed, 149 insertions(+), 175 deletions(-) diff --git a/src/views/basicRightsManagement/personnelShiftManagement/personnelManagement/index.vue b/src/views/basicRightsManagement/personnelShiftManagement/personnelManagement/index.vue index 6274717..9ed7d58 100644 --- a/src/views/basicRightsManagement/personnelShiftManagement/personnelManagement/index.vue +++ b/src/views/basicRightsManagement/personnelShiftManagement/personnelManagement/index.vue @@ -1,6 +1,6 @@ <template> <div class="home-container"> - <el-scrollbar height="100%"> + <div style="height: 100%"> <el-row class="homeCard"> <el-col :span="8"> <div class="grid-content topInfo"> @@ -24,6 +24,7 @@ ref="multipleTableRef" :data="tableData" style="width: 100%" + height="calc(100% - 100px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > @@ -42,22 +43,22 @@ </template> </el-table-column> </el-table> - </div> - <div class="pageBtn"> - <el-pagination - v-model:currentPage="currentPage" - v-model:page-size="pageSize" - :page-sizes="[10, 15]" - small=false - background - layout="total, sizes, prev, pager, next, jumper" - :total="100" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> + <div class="pageBtn"> + <el-pagination + v-model:currentPage="currentPage" + v-model:page-size="pageSize" + :page-sizes="[10, 15]" + small=false + background + layout="total, sizes, prev, pager, next, jumper" + :total="100" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> </div> </div> - </el-scrollbar> + </div> <el-dialog v-model="dialogDetails" title="人员排班"> <el-form :model="details" label-width="120px"> <el-form-item label="排班名称"> @@ -164,148 +165,152 @@ interface type { } - // export default defineComponent({ - // name: 'workCheckinRecord', - // setup() { - const userInfo = useUserInfo() - const { userInfos } = storeToRefs(userInfo); - const state = reactive<stateType>({}); - const currentPage = ref(1) - const pageSize = ref(10) - const chosenIndex = ref(-1) - const casProps = { - expandTrigger: 'hover', - multiple: true, - emitPath: false, - checkStrictly: false + const userInfo = useUserInfo() + const { userInfos } = storeToRefs(userInfo); + const state = reactive<stateType>({}); + const currentPage = ref(1) + const pageSize = ref(10) + const chosenIndex = ref(-1) + const casProps = { + expandTrigger: 'hover', + multiple: true, + emitPath: false, + checkStrictly: false + } + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`) + } + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`) + } + const tableData = reactive( + [ + { + schedName: 'A车间三班三倒', + schedPlan: '三班三倒', + restType: ['每周公休假日'], + team: 'A车间班组', + startTime: '2022-07-14', + endTime: '2022-07-16' + }, + { + schedName: 'B车间常白班', + schedPlan: '常白班', + restType: ['自定义休息日/每周'], + team: 'B车间班组', + startTime: '2022-07-16', + endTime: '2022-07-20' + }, + ] + ) + const addRef = ref<FormInstance>() + const addRules = reactive<FormRules>({ + schedName:[{required: true, message: '该内容不能为空',trigger:'blur'}], + schedPlan:[{required: true, message: '该内容不能为空',trigger:'blur'}], + restType:[{required: true, message: '该内容不能为空',trigger:'blur'}], + team:[{required: true, message: '该内容不能为空',trigger:'blur'}], + timeRange:[{required: true, message: '该内容不能为空',trigger:'blur'}] + }) + const dialogDetails = ref(false) + const dialogAddRecord = ref(false) + const deleteDialog = ref(false) + const addRecord = ref({}) + const details = ref({}) + const viewRecord = (row) =>{ + details.value = JSON.parse(JSON.stringify(row)) + dialogDetails.value = true + } + const deleteRecord = (index) =>{ + chosenIndex.value = index + deleteDialog.value = true + } + const conFirmDelete = ()=> { + tableData.splice(chosenIndex.value,1) + deleteDialog.value = false + } + const confirmAddRecord = async (formEl: FormInstance | undefined) =>{ + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + if(chosenIndex.value == -1){ + addRecord.value.startTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[0] + addRecord.value.endTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[1] + tableData.unshift(addRecord.value) + }else{ + addRecord.value.startTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[0] + addRecord.value.endTimeTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[1] + tableData[chosenIndex.value] = addRecord.value + } + dialogAddRecord.value =false + } else { + console.log('error submit!', fields) } - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`) - } - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`) - } - const tableData = reactive( - [ - { - schedName: 'A车间三班三倒', - schedPlan: '三班三倒', - restType: ['每周公休假日'], - team: 'A车间班组', - startTime: '2022-07-14', - endTime: '2022-07-16' - }, - { - schedName: 'B车间常白班', - schedPlan: '常白班', - restType: ['自定义休息日/每周'], - team: 'B车间班组', - startTime: '2022-07-16', - endTime: '2022-07-20' - }, - ] - ) - const addRef = ref<FormInstance>() - const addRules = reactive<FormRules>({ - schedName:[{required: true, message: '该内容不能为空',trigger:'blur'}], - schedPlan:[{required: true, message: '该内容不能为空',trigger:'blur'}], - restType:[{required: true, message: '该内容不能为空',trigger:'blur'}], - team:[{required: true, message: '该内容不能为空',trigger:'blur'}], - timeRange:[{required: true, message: '该内容不能为空',trigger:'blur'}] - }) - const dialogDetails = ref(false) - const dialogAddRecord = ref(false) - const deleteDialog = ref(false) - const addRecord = ref({}) - const details = ref({}) - const viewRecord = (row) =>{ - details.value = JSON.parse(JSON.stringify(row)) - dialogDetails.value = true - } - const deleteRecord = (index) =>{ - chosenIndex.value = index - deleteDialog.value = true - } - const conFirmDelete = ()=> { - tableData.splice(chosenIndex.value,1) - deleteDialog.value = false - } - const confirmAddRecord = async (formEl: FormInstance | undefined) =>{ - if (!formEl) return - await formEl.validate((valid, fields) => { - if (valid) { - if(chosenIndex.value == -1){ - addRecord.value.startTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[0] - addRecord.value.endTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[1] - tableData.unshift(addRecord.value) - }else{ - addRecord.value.startTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[0] - addRecord.value.endTimeTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[1] - tableData[chosenIndex.value] = addRecord.value - } - dialogAddRecord.value =false - } else { - console.log('error submit!', fields) - } - }) + }) - } - const closeAdd =()=>{ - addRecord.value={} - chosenIndex.value = -1 - } - const indexClear = ()=>{ - chosenIndex.value = -1 - } - const editRecord =(index, row)=>{ - dialogAddRecord.value = true - chosenIndex.value = index - addRecord.value = JSON.parse(JSON.stringify(row)) - addRecord.value.timeRange= [addRecord.value.startTime,addRecord.value.endTime] - } - // 折线图 - const renderMenu = async (value: string) => { - Session.set('projectId',value) - userInfos.value.projectId = value - await initBackEndControlRoutes(); - }; - // return { - // renderMenu, - // multipleTableRef, - // tableData, - // currentPage, - // pageSize, - // dialogDetails, - // details, - // deleteDialog, - // dialogAddRecord, - // viewRecord, - // deleteRecord, - // handleSizeChange, - // handleCurrentChange, - // Plus, - // Edit, - // Delete, - // Search, - // Download, - // handleSelectionChange, - // Refresh, - // ...toRefs(state), - // }; - // }, - // }); + } + const closeAdd =()=>{ + addRecord.value={} + chosenIndex.value = -1 + } + const indexClear = ()=>{ + chosenIndex.value = -1 + } + const editRecord =(index, row)=>{ + dialogAddRecord.value = true + chosenIndex.value = index + addRecord.value = JSON.parse(JSON.stringify(row)) + addRecord.value.timeRange= [addRecord.value.startTime,addRecord.value.endTime] + } + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId',value) + userInfos.value.projectId = value + await initBackEndControlRoutes(); + }; </script> <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; .homeCard{ width: 100%; padding: 20px; + box-sizing: border-box; background: #fff; border-radius: 4px; + + .main-card{ + width: 100%; + height: 100%; + .cardTop{ + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + .mainCardBtn{ + margin: 0; + } + } + .pageBtn{ + height: 60px; + display: flex; + align-items: center; + justify-content: right; + + .demo-pagination-block + .demo-pagination-block { + margin-top: 10px; + } + .demo-pagination-block .demonstration { + margin-bottom: 16px; + } + } + } + &:last-of-type{ + height: calc(100% - 100px); + } } .el-row{ display: flex; @@ -329,37 +334,6 @@ white-space: nowrap; margin-right: 20px; } - } - } - .mainPages{ - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - } - .main-card{ - width: 100%; - .cardTop{ - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 20px; - .mainCardBtn{ - margin: 0; - } - } - } - .pageBtn{ - display: flex; - align-items: center; - justify-content: right; - margin-top: 20px; - - .demo-pagination-block + .demo-pagination-block { - margin-top: 10px; - } - .demo-pagination-block .demonstration { - margin-bottom: 16px; } } } -- Gitblit v1.9.2