From d592747d5eaa2cfbe698f8ac61222eb3aa75d1fc Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期二, 02 八月 2022 09:09:12 +0800 Subject: [PATCH] 添加修改页面 --- src/assets/loginPage/map-bg.png | 0 src/api/basicDateManage/personShiftManage/workingHours/index.ts | 58 src/assets/loginPage/map-bg.jpg | 0 src/views/riskWarningSys/accidentLevel/index.vue | 102 src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveLinkSetting/index.vue | 103 src/views/basicRightsManagement/personnelShiftManagement/teamManagement/index.vue | 408 +- src/api/basicDateManage/personShiftManage/workingHoursSet/index.ts | 14 src/views/basicRightsManagement/personnelShiftManagement/holidayTimeSet/index.vue | 567 +++ src/views/basicRightsManagement/personnelShiftManagement/workingHoursSet/index.vue | 573 +++ src/views/basicRightsManagement/personnelShiftManagement/shiftManagement/index.vue | 458 +- src/views/IntelligentXjSys/inspectionTaskManagement/index.vue | 459 +- src/views/specialWorkSystem/afterWorkManagement/workTicketCheck/index.vue | 97 src/views/specialWorkSystem/workApplyManagement/myApply/index.vue | 416 +- src/views/riskWarningSys/educationAndTraining/index.vue | 102 src/views/specialWorkSystem/approveProcessManagement/approveProcessList/index.vue | 99 src/views/specialWorkSystem/workBasicManagementSetting/personalProtectDevices/index.vue | 97 src/assets/loginPage/equipment.JPG | 0 src/views/basicRightsManagement/personnelShiftManagement/holidayManagement/index.vue | 361 +- src/views/basicRightsManagement/personnelShiftManagement/holidayTime/index.vue | 625 ++++ src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue | 954 ++++++ src/assets/loginPage/wind.JPG | 0 src/views/riskWarningSys/emergencyDrills/index.vue | 102 src/views/basicRightsManagement/personnelShiftManagement/personnelManagement/index.vue | 324 - src/assets/loginPage/xj-bg.png | 0 /dev/null | 0 src/views/IntelligentXjSys/inspectionTaskManage/index.vue | 1028 ++++++ src/views/specialWorkSystem/workBasicManagementSetting/certificateFilterSetting/index.vue | 297 - src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/reportTypeSetting/index.vue | 124 src/views/specialWorkSystem/afterWorkManagement/workTicketRecord/index.vue | 97 src/assets/loginPage/watersys.JPG | 0 src/views/IntelligentXjSys/intelligentMap/index.vue | 716 ++++ src/views/basicRightsManagement/personnelShiftManagement/workingHours/index.vue | 638 ++- src/assets/loginPage/xj-icon.png | 0 src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveTypeSetting/index.vue | 97 src/views/riskWarningSys/riskLevel/index.vue | 96 35 files changed, 6,910 insertions(+), 2,102 deletions(-) diff --git a/src/api/basicDateManage/personShiftManage/workingHours/index.ts b/src/api/basicDateManage/personShiftManage/workingHours/index.ts new file mode 100644 index 0000000..aea7e48 --- /dev/null +++ b/src/api/basicDateManage/personShiftManage/workingHours/index.ts @@ -0,0 +1,58 @@ +import request from '/@/utils/request'; + +export function workingHoursApi() { + return { + // 获取工作时间段列表 + getWorkTimePeriod: () =>{ + return request({ + url: `/workTime/getWorkTimePeriod`, + method: 'get' + }) + }, + + //工作时间段分页列表 + postPeriodPage: (data: object)=>{ + return request({ + url: `/workTime/getWorkTimePeriodByPage?pageSiz`, + method: 'post', + data: data + }) + }, + + // 新增工作时间段 + postWorkTimePeriod: (data: object) => { + return request({ + url: `/workTime/addWorkTimePeriod`, + method: 'post', + data: data + }); + }, + + // 修改工作时间段 + updateWorkTimePeriod: (data: object) =>{ + return request({ + url: `/workTime/updateWorkTimePeriod`, + method: 'post', + data: data + }); + }, + + // 删除工作时间段 + deletWorkTimePeriod: (data: object) =>{ + return request({ + url: `/workTime/deletWorkTimePeriod`, + method: 'post', + data: data + }); + }, + + // 批量删除 + deleteBatchWorkTimePeriod: (data: any) =>{ + return request({ + url: `/workTime/deleteBatchWorkTimePeriod`, + method: 'post', + data: data + }); + } + }; +} diff --git a/src/api/basicDateManage/personShiftManage/workingHoursSet/index.ts b/src/api/basicDateManage/personShiftManage/workingHoursSet/index.ts new file mode 100644 index 0000000..93c72af --- /dev/null +++ b/src/api/basicDateManage/personShiftManage/workingHoursSet/index.ts @@ -0,0 +1,14 @@ +import request from '/@/utils/request'; + +export function workingHoursApi() { + return { + //工作时间组分页列表 + postWorkTimeGroupPage: (data: object)=>{ + return request({ + url: `/workTime/getWorkTimeGroupByPage`, + method: 'post', + data: data + }) + } + }; +} diff --git a/src/assets/loginPage/equipment.JPG b/src/assets/loginPage/equipment.JPG new file mode 100644 index 0000000..301d435 --- /dev/null +++ b/src/assets/loginPage/equipment.JPG Binary files differ diff --git a/src/assets/loginPage/map-bg.jpg b/src/assets/loginPage/map-bg.jpg new file mode 100644 index 0000000..a377e7c --- /dev/null +++ b/src/assets/loginPage/map-bg.jpg Binary files differ diff --git a/src/assets/loginPage/map-bg.png b/src/assets/loginPage/map-bg.png new file mode 100644 index 0000000..e642a41 --- /dev/null +++ b/src/assets/loginPage/map-bg.png Binary files differ diff --git a/src/assets/loginPage/watersys.JPG b/src/assets/loginPage/watersys.JPG new file mode 100644 index 0000000..dc1c159 --- /dev/null +++ b/src/assets/loginPage/watersys.JPG Binary files differ diff --git a/src/assets/loginPage/wind.JPG b/src/assets/loginPage/wind.JPG new file mode 100644 index 0000000..2def54d --- /dev/null +++ b/src/assets/loginPage/wind.JPG Binary files differ diff --git a/src/assets/loginPage/xj-bg.png b/src/assets/loginPage/xj-bg.png new file mode 100644 index 0000000..f4b281f --- /dev/null +++ b/src/assets/loginPage/xj-bg.png Binary files differ diff --git a/src/assets/loginPage/xj-icon.png b/src/assets/loginPage/xj-icon.png new file mode 100644 index 0000000..62111ab --- /dev/null +++ b/src/assets/loginPage/xj-icon.png Binary files differ diff --git a/src/assets/menu/bg_home.jpg b/src/assets/menu/bg_home.jpg deleted file mode 100644 index ab60219..0000000 --- a/src/assets/menu/bg_home.jpg +++ /dev/null Binary files differ diff --git a/src/views/IntelligentXjSys/inspectionTaskManage/index.vue b/src/views/IntelligentXjSys/inspectionTaskManage/index.vue new file mode 100644 index 0000000..9bcbeb1 --- /dev/null +++ b/src/views/IntelligentXjSys/inspectionTaskManage/index.vue @@ -0,0 +1,1028 @@ +<template> + <div class="home-container"> + <div style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="12"> + <div class="grid-content topInfo"> + <el-select v-model="searchType" @change="changeSearch" placeholder="任务名称"> + <el-option label="巡检任务类型" value="巡检任务类型" /> + <el-option label="创建人" value="创建人" /> + <el-option label="巡检人" value="巡检人" /> + <el-option label="检查频次" value="检查频次" /> + <el-option label="开始时间" value="开始时间" /> + </el-select> + <el-input v-model="searchContent" v-if="searchType == '任务名称'" placeholder="请输入任务名称"></el-input> + <el-input + v-else-if="searchType == '检查频次'" + v-model="searchContent" + placeholder="请输入检查频次" + > + <template #append> + <el-select v-model="searchUnit" placeholder="选择单位"> + <el-option label="分钟" value="分钟" /> + <el-option label="小时" value="小时" /> + <el-option label="天" value="天" /> + </el-select> + </template> + </el-input> + <el-select v-model="searchContent" v-else-if="searchType == '巡检任务类型'" placeholder="请选择任务类型"> + <el-option v-for="(item,index) in typeOptions" :label="item.name" :value="item.value" :key="index"/> + </el-select> + <el-select v-model="searchContent" v-else-if="searchType == '创建人'" placeholder="请选择创建人"> + <el-option v-for="(item,index) in createrOptions" :label="item.name" :value="item.value" :key="index"/> + </el-select> + <el-select v-model="searchContent" v-else-if="searchType == '巡检人'" placeholder="请选择巡检人"> + <el-option v-for="(item,index) in inspectorOptions" :label="item.name" :value="item.value" :key="index"/> + </el-select> + <el-date-picker + v-model="searchContent" + type="date" + v-else + :placeholder="'请选择' + searchType" + size="large" + style="margin-right: 20px" + /> + <el-button type="primary">查询</el-button> + <el-button plain>重置</el-button> + </div> + </el-col> + </el-row> + <div class="homeCard"> + <div class="main-card"> + <el-row class="cardTop"> + <el-col :span="12" class="mainCardBtn"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button> + <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button> + </el-col> + <el-button type="primary" :icon="Refresh" size="default"/> + </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-column type="selection" width="55" /> + <el-table-column property="name" label="任务名称" width="200"/> + <el-table-column property="type" label="任务类型"/> + <el-table-column property="creater" label="创建人"/> + <el-table-column property="inspector" label="巡检人"/> + <el-table-column property="frequency" label="检查频次"/> + <el-table-column property="unit" label="频次单位"/> + <el-table-column property="startTime" label="任务开始时间" width="180"/> + <el-table-column property="validTime" label="任务有效时间" width="180"/> + <el-table-column property="createTime" label="创建时间" width="180"/> + <el-table-column property="chainLength" label="巡检链长度" width="160"/> + <el-table-column property="status" label="状态" width="60"/> + <el-table-column fixed="right" label="操作" align="center" width="300"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> + <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button> + <el-switch + v-model="scope.row.status" + inline-prompt + active-text="开" + inactive-text="关" + active-value="开启" + inactive-value="关闭" + style="margin: 0 10px" + /> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button> + </template> + </el-table-column> + </el-table> + <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> + </div> + <el-dialog v-model="dialogDetails" title="巡检任务"> + <el-form :model="details" label-width="120px"> + <el-row> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务名称"> + <el-input + v-model="details.name" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务类型"> + <el-input + v-model="details.type" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="执行巡检班组"> + <el-input + v-model="details.inspector" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="检查频次"> + <el-input + v-model="details.inspector" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="检查频次" prop="frequency"> + <el-input + v-model="details.frequency" + readonly + > + <template #append> + <el-input + v-model="details.unit" + readonly + /> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="周期开始时间"> + <el-input + v-model="details.startTime" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="周期有效时间"> + <el-input + v-model="details.validTime" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="24" style="margin-bottom: 20px"> + <el-form-item label="巡检链"> + <div style="width: 100%;margin-left: -30px"> + <div v-for="(item,index) in details.shiftSteps" class="stepItem"> + <div class="stepNum">{{index+1}}</div> + <div class="stepCard"> + <el-card class="box-card"> + <template #header> + <div class="card-header"> + <div>{{item.name}}</div> + </div> + </template> + <div class="inspect-chain"> + <el-table :data="item.inspectorData" style="width: 100%" + :default-sort="{ prop: 'sort', order: 'ascending'}" + :header-cell-style="{background: '#fafafa',padding: '5px'}" + > + <el-table-column property="sort" label="排序"/> + <el-table-column property="name" label="巡检点名称"/> + <el-table-column property="section" label="所属设备区域"/> + <el-table-column property="rfid" label="关联RFID"/> + <el-table-column property="norm" label="巡检指标"/> + <el-table-column property="reference" label="数据参考值"/> + </el-table> + </div> + </el-card> + </div> + </div> + </div> + </el-form-item> + </el-col> + <el-form-item> + <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> + </el-form-item> + </el-row> + </el-form> + </el-dialog> + <el-dialog v-model="dialogAddRecord" title="巡检任务编辑" @close="closeAdd" @open="openAdd"> + <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules"> + <el-row> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务名称" prop="name"> + <el-input + v-model="addRecord.name" + > + </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务类型" prop="type"> + <el-select v-model="addRecord.type"> + <el-option label="日常检查" value="日常检查" /> + <el-option label="周期检查" value="周期检查" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="执行巡检人员" prop="inspector"> + <el-select v-model="addRecord.inspector"> + <el-option label="张三" value="张三" /> + <el-option label="李四" value="李四" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="检查频次" prop="frequency"> + <el-input + v-model="addRecord.frequency" + placeholder="请输入检查频次" + > + <template #append> + <el-select v-model="addRecord.unit" placeholder="选择单位"> + <el-option label="分钟" value="分钟" /> + <el-option label="小时" value="小时" /> + <el-option label="天" value="天" /> + </el-select> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="周期开始时间" prop="startTime"> + <el-date-picker + v-model="addRecord.startTime" + type="datetime" + format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="周期有效时间" prop="validTime"> + <el-select v-model="addRecord.validTime" placeholder="选择时间"> + <el-option label="15分钟" value="15分钟" /> + <el-option label="30分钟" value="30分钟" /> + <el-option label="45分钟" value="45分钟" /> + <el-option label="60分钟" value="60分钟" /> + <el-option label="75分钟" value="75分钟" /> + <el-option label="90分钟" value="90分钟" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="创建巡检链"> + <div style="width: 100%;margin-bottom: 20px"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogAddShift = true">新增巡检设备区域</el-button> + </div> + <div style="width: 100%;margin-left: -30px"> + <div v-for="(item,index) in addRecord.shiftSteps" class="stepItem"> + <div class="stepNum">{{index+1}}</div> + <div class="stepCard"> + <el-card class="box-card"> + <template #header> + <div class="card-header"> + <div>{{item.name}}</div> + <div> + <el-button type="primary" size="default" @click="addFlow(index)">新增下一区域</el-button> + <el-button type="danger" size="default" @click="deleteFlow(index)">删除</el-button> + </div> + </div> + </template> + <div class="inspect-chain" style="display: flex;flex-direction: column;align-items: center"> + <el-button type="primary" size="default" :icon="Plus" plain @click="addSysInspection(index)" style="margin-bottom: 10px">添加巡检点</el-button> + <el-table + :data="item.inspectorData" + style="width: 100%" + :default-sort="{ prop: 'sort', order: 'ascending' }" + :header-cell-style="{background: '#fafafa',padding: '5px'}" + > + <el-table-column property="sort" label="排序"/> + <el-table-column property="name" label="巡检点名称"/> + <el-table-column property="section" label="所属设备区域"/> + <el-table-column property="rfid" label="关联RFID"/> + <el-table-column property="norm" label="巡检指标"/> + <el-table-column property="reference" label="数据参考值"/> + <el-table-column fixed="right" label="操作" align="center" width="100"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="Edit" @click="editInspection(index,scope.$index ,scope.row)">修改</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteInspection(index,scope.$index)">删除</el-button> + </template> + </el-table-column> + </el-table> + </div> + </el-card> + </div> + </div> + </div> + </el-form-item> + </el-col> + </el-row> + <el-form-item> + <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> + <span>您确定要删除该条记录吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> + <el-dialog v-model="deleteShiftDialog" title="提示" width="30%" center @close="indexShiftClear"> + <span>您确定要删除该班次吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteShiftDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmShiftDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> + <el-dialog v-model="deleteInspectionDialog" title="提示" width="30%" center @close="indexInspectionClear"> + <span>您确定要删除该巡检点吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteInspectionDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmInspectionDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> + <el-dialog v-model="dialogAddShift" title="新增巡检设施区域" @close="closeAddShift"> + <el-form :model="addShift" label-width="120px" ref="addShiftRef" :rules="addShiftRules"> + <el-form-item label="选择巡检设施区域" prop="name"> + <el-select v-model="addShift.name"> + <el-option label="风机系统" value="风机系统" /> + <el-option label="A车间" value="A车间" /> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="warning" @click="dialogAddShift = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddShift(addShiftRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="dialogAddInspection" title="新增巡检点" @close="closeAddInspection"> + <el-form :model="addInspection" label-width="120px" ref="addInspectionRef" :rules="addInspectionRules"> + <el-form-item label="输入巡检点排序" prop="sort"> + <el-input-number v-model="addInspection.sort" :min="1" :max="999" placeholder="巡检点排序"/> + </el-form-item> + <el-form-item label="选择巡检点" prop="name"> + <el-select v-model="addInspection.name"> + <el-option label="73011" value="73011" /> + <el-option label="73012" value="73012" /> + <el-option label="73013" value="73013" /> + </el-select> + </el-form-item> + <el-form-item label="选择巡检指标" prop="norm"> + <el-select v-model="addInspection.norm"> + <el-option label="风机声音" value="风机声音" /> + <el-option label="设备温度" value="设备温度" /> + <el-option label="压力" value="压力" /> + <el-option label="震动" value="震动" /> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="warning" @click="dialogAddInspection = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddInspection(addInspectionRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + </div> +</template> + +<script lang="ts"> + import { toRefs, reactive, ref } from 'vue'; + import { storeToRefs } from 'pinia'; + import { initBackEndControlRoutes } from '/@/router/backEnd'; + 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, ElMessage } from 'element-plus' + import { FormInstance, FormRules } from 'element-plus' + let global: any = { + homeChartOne: null, + homeChartTwo: null, + homeCharThree: null, + dispose: [null, '', undefined], + }; + + interface stateType { + homeOne: Array <type> + } + interface type { + + } + export default { + name: 'workingHoursSet', + components: {}, + setup() { + const userInfo = useUserInfo() + const {userInfos} = storeToRefs(userInfo); + + const state = reactive({ + searchType: '任务名称', + typeOptions: [ + { + name: '日常检查', + value: '日常检查' + }, + { + name: '周期检查', + value: '周期检查' + } + ], + createrOptions: [ + { + name: '张三', + value: '张三' + }, + { + name: '李四', + value: '李四' + } + ], + inspectorOptions: [ + { + name: '李四', + value: '李四' + }, + { + name: '张三', + value: '张三' + } + ], + searchUnit: '小时', + searchContent: '', + currentPage: 1, + pageSize: 10, + chosenIndex: null, + chosenShiftIndex: null, + chosenInspectionIndex: null, + dialogDetails: false, + dialogAddRecord: false, + deleteDialog: false, + deleteShiftDialog: false, + deleteInspectionDialog: false, + dialogAddShift: false, + dialogAddInspection: false, + tableData: [ + { + name: '甲醛装置()列现场岗位巡检', + type: '周期检查', + creater: '管理员A', + inspector: '张三', + frequency: 2, + unit: '小时', + startTime: '2022-07-02 13:01:37', + validTime: '30分钟', + createTime: '2022-07-02 12:03:47', + chainLength: 20, + status: '开启', + shiftSteps: [ + { + name: '风机系统', + inspectorData: [ + { + sort: 1, + name: '73011', + section: '风机系统', + rfid: '风机系统1标签', + norm: '风机声音', + reference: '10<正常<50' + }, + { + sort: 2, + name: '73012', + section: '风机系统', + rfid: '风机系统2标签', + norm: '设备温度', + reference: '20<正常<50' + }, + { + sort: 3, + name: '73013', + section: '风机系统', + rfid: '风机系统3标签', + norm: '风机震动', + reference: '30<正常<50' + } + ] + + }, + { + name: 'A场所', + inspectorData: [ + { + sort: 1, + name: '73021', + section: '风机系统', + rfid: '风机系统1标签', + norm: '风机声音', + reference: '10<正常<50' + }, + { + sort: 2, + name: '73022', + section: '风机系统', + rfid: '风机系统2标签', + norm: '设备温度', + reference: '20<正常<50' + }, + { + sort: 3, + name: '73023', + section: '风机系统', + rfid: '风机系统3标签', + norm: '风机震动', + reference: '30<正常<50' + } + ] + } + ] + }, + { + name: 'A车间日常巡检', + type: '日常检查', + creater: '管理员B', + inspector: '李四', + frequency: 4, + unit: '小时', + startTime: '2022-07-02 12:45:37', + validTime: '30分钟', + createTime: '2022-07-02 08:15:41', + chainLength: 15, + status: '开启' + } + ], + addRecord: { + name: '', + type: '', + creater: '', + inspector: '', + frequency: 1, + unit: '小时', + startTime: '', + validTime: '', + createTime: '', + chainLength: 0, + status: '开启', + shiftSteps: [] + }, + addShift: {}, + addInspection: {}, + details: {} + }) + + // 顶部筛选搜索 + const changeSearch = () => { + state.searchContent = '' + } + + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`) + } + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`) + } + + // 时间格式化 + const timeForm = { + hour12: false, + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + } + const handleChange = (value) => { + state.addRecord.content = [] + console.log(JSON.parse(JSON.stringify(value))) + } + const addRef = ref<FormInstance>() + const addShiftRef = ref<FormInstance>() + const addInspectionRef = ref<FormInstance>() + + // 表单校验 + const addRules = reactive<FormRules>({ + name: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + type: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + inspector: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + frequency: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + unit: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + validTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}] + }) + const addShiftRules = reactive<FormRules>({ + name: [{required: true, message: '该内容不能为空', trigger: 'blur'}] + }) + const addInspectionRules = reactive<FormRules>({ + name: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + norm: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + sort: [{required: true, message: '该内容不能为空', trigger: 'blur'}] + }) + + // 查看记录 + const viewRecord = (row) => { + state.details = JSON.parse(JSON.stringify(row)) + state.dialogDetails = true + } + + // 删除记录 + const deleteRecord = (index) => { + state.chosenIndex = index + state.deleteDialog = true + } + const conFirmDelete = () => { + state.tableData.splice(state.chosenIndex, 1) + state.deleteDialog = false + } + + // 修改添加记录 + const editRecord = (index, row) => { + state.chosenIndex = index + state.dialogAddRecord = true + state.addRecord = JSON.parse(JSON.stringify(row)) + } + const confirmAddRecord = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + if (state.chosenIndex == null) { + if (!state.addRecord.shiftSteps || state.addRecord.shiftSteps.length == 0) { + ElMessage({ + message: '请先设置巡检链后再提交', + type: 'warning', + }) + return + // 判断每个区域是否都设置了至少一个巡检点,没有的话提示设置 + } else if (state.addRecord.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length == 0)) { + for (let i = 0; i < state.addRecord.shiftSteps.length; i++) { + if (!state.addRecord.shiftSteps[i].inspectorData || state.addRecord.shiftSteps[i].inspectorData.length == 0) { + ElMessage({ + message: '请为' + state.addRecord.shiftSteps[i].name + '设置巡检点', + type: 'warning', + }) + } + } + return + } else { + state.addRecord.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-') + state.addRecord.chainLength = state.addRecord.shiftSteps.length + state.addRecord.status = '开启' + state.tableData.unshift(state.addRecord) + } + } else { + if (state.addRecord.shiftSteps.length == 0) { + ElMessage({ + message: '请先设置巡检链后再提交', + type: 'warning', + }) + return + // 判断每个区域是否都设置了至少一个巡检点,没有的话提示设置 + } else if (state.addRecord.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length == 0)) { + for (let i = 0; i < state.addRecord.shiftSteps.length; i++) { + if (!state.addRecord.shiftSteps[i].inspectorData || state.addRecord.shiftSteps[i].inspectorData.length == 0) { + ElMessage({ + message: '请为' + state.addRecord.shiftSteps[i].name + '设置巡检点', + type: 'warning', + }) + } + } + return + } else { + state.tableData[state.chosenIndex] = state.addRecord + } + } + state.dialogAddRecord = false + } else { + console.log('error submit!', fields) + } + }) + + } + + // 添加弹窗打开前预操作 + const openAdd = () => { + state.addRecord.unit = '小时' + } + + // 弹窗关闭后判断数据初始化 + const closeAdd = () => { + state.addRecord = {} + state.chosenIndex = null + state.addShift = {} + state.chosenShiftIndex = null + } + const indexClear = () => { + state.chosenIndex = null + } + const indexShiftClear = () => { + state.chosenShiftIndex = null + } + const indexInspectionClear = () => { + state.chosenInspectionIndex = null + state.chosenShiftIndex = null + } + + // 排序 + function compare(key) { + return function (value1, value2) { + var val1 = value1[key]; + var val2 = value2[key]; + return val1 - val2; + } + } + + // 添加删除巡检设施区域 + const addFlow = (index) => { + state.dialogAddShift = true + state.chosenShiftIndex = index + } + + // 删除巡检区域 + const deleteFlow = (index) => { + state.deleteShiftDialog = true + state.chosenShiftIndex = index + } + const conFirmShiftDelete = () => { + state.addRecord.shiftSteps.splice(state.chosenShiftIndex, 1) + state.deleteShiftDialog = false + } + + const confirmAddShift = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + if (state.addRecord.shiftSteps) { + state.addRecord.shiftSteps.splice(state.chosenShiftIndex + 1, 0, state.addShift) + } else { + state.addRecord.shiftSteps = [] + state.addRecord.shiftSteps.unshift(state.addShift) + } + state.dialogAddShift = false + } else { + console.log('error submit!', fields) + } + }) + } + + + const addSysInspection = (index) => { + state.dialogAddInspection = true + state.chosenShiftIndex = index + } + const confirmAddInspection = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + if (state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData) { + if (state.chosenInspectionIndex == null) { + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.unshift(state.addInspection) + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort')) + } else { + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData[state.chosenInspectionIndex] = state.addInspection + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort')) + } + } else { + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData = [] + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.unshift(state.addInspection) + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort')) + } + state.dialogAddInspection = false + } else { + console.log('error submit!', fields) + } + }) + } + const deleteInspection = (i, index) => { + state.chosenShiftIndex = i + state.chosenInspectionIndex = index + state.deleteInspectionDialog = true + } + const editInspection = (i, index, row) => { + state.chosenShiftIndex = i + state.chosenInspectionIndex = index + state.dialogAddInspection = true + state.addInspection = JSON.parse(JSON.stringify(row)) + } + const conFirmInspectionDelete = () => { + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.splice(state.chosenInspectionIndex, 1) + state.deleteInspectionDialog = false + } + + const closeAddShift = () => { + state.addShift = {} + state.chosenShiftIndex = null + } + const closeAddInspection = () => { + state.addInspection = {} + state.chosenShiftIndex = null + } + + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId', value) + userInfos.value.projectId = value + await initBackEndControlRoutes(); + }; + + return { + addRef, + addShiftRef, + addInspectionRef, + addRules, + addShiftRules, + addInspectionRules, + View, + Edit, + Delete, + Refresh, + Plus, + changeSearch, + handleSizeChange, + handleCurrentChange, + handleChange, + viewRecord, + deleteRecord, + conFirmDelete, + openAdd, + editRecord, + confirmAddRecord, + closeAdd, + addFlow, + conFirmShiftDelete, + confirmAddShift, + closeAddShift, + deleteInspection, + addSysInspection, + confirmAddInspection, + conFirmInspectionDelete, + closeAddInspection, + editInspection, + deleteFlow, + indexClear, + indexShiftClear, + indexInspectionClear, + renderMenu, + ...toRefs(state) + } + } + } +</script> + +<style scoped lang="scss"> + $homeNavLengh: 8; + .home-container { + 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; + align-items: center; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content{ + align-items: center; + min-height: 36px; + } + + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + &>div{ + white-space: nowrap; + margin-right: 20px; + } + } + } + } + .stepItem{ + width: 100%; + display: flex; + align-items: flex-start; + margin-bottom: 30px; + margin-left: 30px; + padding-bottom: 30px; + border-left: 2px solid #ccc; + &:first-of-type{ + margin-top: 30px; + } + &:last-of-type{ + margin-bottom: 0; + border-left: none; + } + .stepNum { + width: 30px; + height: 30px; + border-radius: 15px; + box-sizing: border-box; + color: #333; + border: 1px solid #999; + line-height: 28px; + text-align: center; + margin-right: 10px; + margin-left: -16px; + margin-top: -30px; + } + .stepCard { + width: 100%; + margin-top: -30px; + + .box-card { + width: 100%; + &:deep(.el-card__header){ + padding: 10px 15px + } + .card-header { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + &>div:first-of-type{ + margin-right: 80px; + font-size: 18px; + font-weight: bold; + } + } + } + } + &:hover .card-header{ + color: #0098F5; + } + &:hover .stepNum{ + border: 2px solid #0098F5; + color: #0098F5; + } + } + .el-input{ + width: 100% !important; + } + :deep(.el-date-editor){ + width: 100%; + } + .el-select{ + width: 100%; + } + + .inspect-chain :deep(.el-table__row){ + background: #fff; + + } + + .inspect-chain :deep(.el-table__cell){ + background: #fff; + } +</style> diff --git a/src/views/IntelligentXjSys/inspectionTaskManagement/index.vue b/src/views/IntelligentXjSys/inspectionTaskManagement/index.vue index 5f1e4a9..5e5aedb 100644 --- a/src/views/IntelligentXjSys/inspectionTaskManagement/index.vue +++ b/src/views/IntelligentXjSys/inspectionTaskManagement/index.vue @@ -399,7 +399,7 @@ </div> </template> -<script lang="ts" setup> +<script lang="ts"> import { toRefs, reactive, ref } from 'vue'; import { storeToRefs } from 'pinia'; import { initBackEndControlRoutes } from '/@/router/backEnd'; @@ -421,72 +421,60 @@ interface type { } + export default { + name: 'workingHoursSet', + components: {}, + setup() { const userInfo = useUserInfo() - const { userInfos } = storeToRefs(userInfo); + const {userInfos} = storeToRefs(userInfo); - // 顶部筛选搜索 - const searchType = ref('任务名称') - const typeOptions = ref([ - { - name: '日常检查', - value: '日常检查' - }, - { - name: '周期检查', - value: '周期检查' - } - ]) - const createrOptions = ref([ - { - name: '张三', - value: '张三' - }, - { - name: '李四', - value: '李四' - } - ]) - const inspectorOptions = ref([ - { - name: '李四', - value: '李四' - }, - { - name: '张三', - value: '张三' - } - ]) - const searchUnit = ref('小时') - const changeSearch =()=>{ - searchContent.value='' - } - const searchContent = ref() - - - const currentPage = ref(1) - const pageSize = ref(10) - const chosenIndex = ref(-1) - const chosenShiftIndex = ref(-1) - const chosenInspectionIndex = ref(-1) - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`) - } - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`) - } - - // 时间格式化 - const timeForm = { - hour12: false, - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - second: '2-digit' - } - const tableData = reactive( - [ + const state = reactive({ + searchType: '任务名称', + typeOptions: [ + { + name: '日常检查', + value: '日常检查' + }, + { + name: '周期检查', + value: '周期检查' + } + ], + createrOptions: [ + { + name: '张三', + value: '张三' + }, + { + name: '李四', + value: '李四' + } + ], + inspectorOptions: [ + { + name: '李四', + value: '李四' + }, + { + name: '张三', + value: '张三' + } + ], + searchUnit: '小时', + searchContent: '', + currentPage: 1, + pageSize: 10, + chosenIndex: null, + chosenShiftIndex: null, + chosenInspectionIndex: null, + dialogDetails: false, + dialogAddRecord: false, + deleteDialog: false, + deleteShiftDialog: false, + deleteInspectionDialog: false, + dialogAddShift: false, + dialogAddInspection: false, + tableData: [ { name: '甲醛装置()列现场岗位巡检', type: '周期检查', @@ -497,12 +485,12 @@ startTime: '2022-07-02 13:01:37', validTime: '30分钟', createTime: '2022-07-02 12:03:47', - chainLength: '20', + chainLength: 20, status: '开启', - shiftSteps:[ + shiftSteps: [ { name: '风机系统', - inspectorData:[ + inspectorData: [ { sort: 1, name: '73011', @@ -532,7 +520,7 @@ }, { name: 'A场所', - inspectorData:[ + inspectorData: [ { sort: 1, name: '73021', @@ -571,122 +559,153 @@ startTime: '2022-07-02 12:45:37', validTime: '30分钟', createTime: '2022-07-02 08:15:41', - chainLength: '15', + chainLength: 15, status: '开启' } - ] - ) + ], + addRecord: { + name: '', + type: '', + creater: '', + inspector: '', + frequency: 1, + unit: '小时', + startTime: '', + validTime: '', + createTime: '', + chainLength: 0, + status: '开启', + shiftSteps: [] + }, + addShift: {}, + addInspection: {}, + details: {} + }) + + // 顶部筛选搜索 + const changeSearch = () => { + state.searchContent = '' + } + + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`) + } + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`) + } + + // 时间格式化 + const timeForm = { + hour12: false, + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + } const handleChange = (value) => { - addRecord.value.content = [] + state.addRecord.content = [] console.log(JSON.parse(JSON.stringify(value))) } const addRef = ref<FormInstance>() const addShiftRef = ref<FormInstance>() const addInspectionRef = ref<FormInstance>() - // 表单校验 + // 表单校验 const addRules = reactive<FormRules>({ - name:[{required: true, message: '该内容不能为空',trigger:'blur'}], - type:[{required: true, message: '该内容不能为空',trigger:'blur'}], - inspector:[{required: true, message: '该内容不能为空',trigger:'blur'}], - frequency:[{required: true, message: '该内容不能为空',trigger:'blur'}], - unit:[{required: true, message: '该内容不能为空',trigger:'blur'}], - startTime:[{required: true, message: '该内容不能为空',trigger:'blur'}], - validTime:[{required: true, message: '该内容不能为空',trigger:'blur'}] + name: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + type: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + inspector: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + frequency: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + unit: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + validTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}] }) const addShiftRules = reactive<FormRules>({ - name:[{required: true, message: '该内容不能为空',trigger:'blur'}] + name: [{required: true, message: '该内容不能为空', trigger: 'blur'}] }) const addInspectionRules = reactive<FormRules>({ - name:[{required: true, message: '该内容不能为空',trigger:'blur'}], - norm:[{required: true, message: '该内容不能为空',trigger:'blur'}], - sort:[{required: true, message: '该内容不能为空',trigger:'blur'}] + name: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + norm: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + sort: [{required: true, message: '该内容不能为空', trigger: 'blur'}] }) - const dialogDetails = ref(false) - const dialogAddRecord = ref(false) - const deleteDialog = ref(false) - const deleteShiftDialog = ref(false) - const deleteInspectionDialog = ref(false) - const dialogAddShift = ref(false) - const dialogAddInspection = ref(false) - const addRecord = ref({}) - const addShift = ref({}) - const addInspection = ref({}) - const details = ref({}) - // 查看记录 - const viewRecord = (row) =>{ - details.value = JSON.parse(JSON.stringify(row)) - dialogDetails.value = true + // 查看记录 + const viewRecord = (row) => { + state.details = JSON.parse(JSON.stringify(row)) + state.dialogDetails = true } // 删除记录 - const deleteRecord = (index) =>{ - chosenIndex.value = index - deleteDialog.value = true + const deleteRecord = (index) => { + state.chosenIndex = index + state.deleteDialog = true } - const conFirmDelete = ()=> { - tableData.splice(chosenIndex.value,1) - deleteDialog.value = false + const conFirmDelete = () => { + state.tableData.splice(state.chosenIndex, 1) + state.deleteDialog = false } // 修改添加记录 - const editRecord =(index, row)=>{ - chosenIndex.value = index - dialogAddRecord.value = true - addRecord.value = JSON.parse(JSON.stringify(row)) + const editRecord = (index, row) => { + state.chosenIndex = index + state.dialogAddRecord = true + state.addRecord = JSON.parse(JSON.stringify(row)) } - const confirmAddRecord = async (formEl: FormInstance | undefined) =>{ + const confirmAddRecord = async (formEl: FormInstance | undefined) => { if (!formEl) return await formEl.validate((valid, fields) => { if (valid) { - if(chosenIndex.value == -1){ - if(!addRecord.value.shiftSteps || addRecord.value.shiftSteps.length == 0){ + if (state.chosenIndex == null) { + if (!state.addRecord.shiftSteps || state.addRecord.shiftSteps.length == 0) { ElMessage({ message: '请先设置巡检链后再提交', type: 'warning', }) return - // 判断每个区域是否都设置了至少一个巡检点,没有的话提示设置 - }else if(addRecord.value.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length==0)){ - for(let i =0;i<addRecord.value.shiftSteps.length;i++){ - if(!addRecord.value.shiftSteps[i].inspectorData||addRecord.value.shiftSteps[i].inspectorData.length==0){ + // 判断每个区域是否都设置了至少一个巡检点,没有的话提示设置 + } else if (state.addRecord.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length == 0)) { + for (let i = 0; i < state.addRecord.shiftSteps.length; i++) { + if (!state.addRecord.shiftSteps[i].inspectorData || state.addRecord.shiftSteps[i].inspectorData.length == 0) { ElMessage({ - message: '请为'+ addRecord.value.shiftSteps[i].name +'设置巡检点', + message: '请为' + state.addRecord.shiftSteps[i].name + '设置巡检点', type: 'warning', }) } } return - }else{ - addRecord.value.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-') - addRecord.value.chainLength = addRecord.value.shiftSteps.length - addRecord.value.status = '开启' - tableData.unshift(addRecord.value) + } else { + state.addRecord.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-') + state.addRecord.chainLength = state.addRecord.shiftSteps.length + console.log('11111111111111') + state.addRecord.status = '开启' + console.log('222222222222222') + state.tableData.unshift(state.addRecord) } - }else{ - if(addRecord.value.shiftSteps.length == 0){ + } else { + if (state.addRecord.shiftSteps.length == 0) { ElMessage({ message: '请先设置巡检链后再提交', type: 'warning', }) return - // 判断每个区域是否都设置了至少一个巡检点,没有的话提示设置 - }else if(addRecord.value.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length==0)){ - for(let i =0;i<addRecord.value.shiftSteps.length;i++){ - if(!addRecord.value.shiftSteps[i].inspectorData||addRecord.value.shiftSteps[i].inspectorData.length==0){ + // 判断每个区域是否都设置了至少一个巡检点,没有的话提示设置 + } else if (state.addRecord.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length == 0)) { + for (let i = 0; i < state.addRecord.shiftSteps.length; i++) { + if (!state.addRecord.shiftSteps[i].inspectorData || state.addRecord.shiftSteps[i].inspectorData.length == 0) { ElMessage({ - message: '请为'+ addRecord.value.shiftSteps[i].name +'设置巡检点', + message: '请为' + state.addRecord.shiftSteps[i].name + '设置巡检点', type: 'warning', }) } } return - }else{ - tableData[chosenIndex.value] = addRecord.value + } else { + state.tableData[state.chosenIndex] = state.addRecord } } - dialogAddRecord.value =false + state.dialogAddRecord = false } else { console.log('error submit!', fields) } @@ -695,64 +714,64 @@ } // 添加弹窗打开前预操作 - const openAdd =()=>{ - addRecord.value.unit = '小时' + const openAdd = () => { + state.addRecord.unit = '小时' } // 弹窗关闭后判断数据初始化 - const closeAdd =()=>{ - addRecord.value={} - chosenIndex.value = -1 - addShift.value={} - chosenShiftIndex.value = -1 + const closeAdd = () => { + state.addRecord = {} + state.chosenIndex = null + state.addShift = {} + state.chosenShiftIndex = null } - const indexClear = ()=>{ - chosenIndex.value = -1 + const indexClear = () => { + state.chosenIndex = null } - const indexShiftClear = ()=>{ - chosenShiftIndex.value = -1 + const indexShiftClear = () => { + state.chosenShiftIndex = null } - const indexInspectionClear = ()=>{ - chosenInspectionIndex.value = -1 - chosenShiftIndex.value = -1 + const indexInspectionClear = () => { + state.chosenInspectionIndex = null + state.chosenShiftIndex = null } // 排序 - function compare(key){ - return function(value1,value2){ - var val1=value1[key]; - var val2=value2[key]; - return val1-val2; + function compare(key) { + return function (value1, value2) { + var val1 = value1[key]; + var val2 = value2[key]; + return val1 - val2; } } // 添加删除巡检设施区域 const addFlow = (index) => { - dialogAddShift.value = true - chosenShiftIndex.value = index + state.dialogAddShift = true + state.chosenShiftIndex = index } // 删除巡检区域 const deleteFlow = (index) => { - deleteShiftDialog.value = true - chosenShiftIndex.value = index + state.deleteShiftDialog = true + state.chosenShiftIndex = index } const conFirmShiftDelete = () => { - addRecord.value.shiftSteps.splice( chosenShiftIndex.value,1) - deleteShiftDialog.value = false + state.addRecord.shiftSteps.splice(state.chosenShiftIndex, 1) + state.deleteShiftDialog = false } const confirmAddShift = async (formEl: FormInstance | undefined) => { if (!formEl) return await formEl.validate((valid, fields) => { if (valid) { - if(addRecord.value.shiftSteps){ - addRecord.value.shiftSteps.splice(chosenShiftIndex.value+1,0,addShift.value) - }else{ - addRecord.value.shiftSteps = [] - addRecord.value.shiftSteps.unshift(addShift.value) + if (state.addRecord.shiftSteps) { + state.addRecord.shiftSteps.splice(state.chosenShiftIndex + 1, 0, state.addShift) + } else { + state.addRecord.shiftSteps = [] + state.addRecord.shiftSteps.unshift(state.addShift) } - dialogAddShift.value = false + state.dialogAddShift = false } else { console.log('error submit!', fields) } @@ -760,63 +779,107 @@ } - const addSysInspection =(index)=>{ - dialogAddInspection.value = true - chosenShiftIndex.value = index + const addSysInspection = (index) => { + state.dialogAddInspection = true + state.chosenShiftIndex = index } const confirmAddInspection = async (formEl: FormInstance | undefined) => { if (!formEl) return await formEl.validate((valid, fields) => { if (valid) { - if(addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData){ - if(chosenInspectionIndex.value == -1){ - addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.unshift(addInspection.value) - addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.sort(compare('sort')) - }else{ - addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData[chosenInspectionIndex.value] = addInspection.value - addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.sort(compare('sort')) + if (state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData) { + if (state.chosenInspectionIndex == null) { + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.unshift(state.addInspection) + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort')) + } else { + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData[state.chosenInspectionIndex] = state.addInspection + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort')) } - }else{ - addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData = [] - addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.unshift(addInspection.value) - addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.sort(compare('sort')) + } else { + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData = [] + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.unshift(state.addInspection) + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort')) } - dialogAddInspection.value = false + state.dialogAddInspection = false } else { console.log('error submit!', fields) } }) } - const deleteInspection = (i,index) =>{ - chosenShiftIndex.value = i - chosenInspectionIndex.value = index - deleteInspectionDialog.value = true + const deleteInspection = (i, index) => { + state.chosenShiftIndex = i + state.chosenInspectionIndex = index + state.deleteInspectionDialog = true } - const editInspection =(i,index, row)=>{ - chosenShiftIndex.value = i - chosenInspectionIndex.value = index - dialogAddInspection.value = true - addInspection.value = JSON.parse(JSON.stringify(row)) + const editInspection = (i, index, row) => { + state.chosenShiftIndex = i + state.chosenInspectionIndex = index + state.dialogAddInspection = true + state.addInspection = JSON.parse(JSON.stringify(row)) } - const conFirmInspectionDelete=()=>{ - addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.splice( chosenInspectionIndex.value,1) - deleteInspectionDialog.value = false + const conFirmInspectionDelete = () => { + state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.splice(state.chosenInspectionIndex, 1) + state.deleteInspectionDialog = false } - const closeAddShift =()=>{ - addShift.value={} - chosenShiftIndex.value = -1 + const closeAddShift = () => { + state.addShift = {} + state.chosenShiftIndex = null } - const closeAddInspection =()=>{ - addInspection.value={} - chosenShiftIndex.value = -1 + const closeAddInspection = () => { + state.addInspection = {} + state.chosenShiftIndex = null } + // 折线图 const renderMenu = async (value: string) => { - Session.set('projectId',value) + Session.set('projectId', value) userInfos.value.projectId = value await initBackEndControlRoutes(); }; + + return { + addRef, + addShiftRef, + addInspectionRef, + addRules, + addShiftRules, + addInspectionRules, + View, + Edit, + Delete, + Refresh, + Plus, + changeSearch, + handleSizeChange, + handleCurrentChange, + handleChange, + viewRecord, + deleteRecord, + conFirmDelete, + openAdd, + editRecord, + confirmAddRecord, + closeAdd, + addFlow, + conFirmShiftDelete, + confirmAddShift, + closeAddShift, + deleteInspection, + addSysInspection, + confirmAddInspection, + conFirmInspectionDelete, + closeAddInspection, + editInspection, + deleteFlow, + indexClear, + indexShiftClear, + indexInspectionClear, + renderMenu, + ...toRefs(state) + } + } + } </script> <style scoped lang="scss"> diff --git a/src/views/IntelligentXjSys/intelligentMap/index.vue b/src/views/IntelligentXjSys/intelligentMap/index.vue new file mode 100644 index 0000000..3df2f3c --- /dev/null +++ b/src/views/IntelligentXjSys/intelligentMap/index.vue @@ -0,0 +1,716 @@ +<template> + <div class="container"> + <div class="big-title"><span></span>大型实验室智能巡检系统<span></span></div> + <div style="font-size: 14px;color: #00ffff">{{present}}</div> + <div class="blocks"> + <div class="current-data"> + <div class="data-area"> + <img src="../../../assets/loginPage/xj-icon.png"> + <div>当前巡检:<span>实验室装置区</span></div> + </div> + <div class="data-spot"> + <div> + <span>巡检点</span> + <p>3970A</p> + </div> + <div> + <span>指标</span> + <p>压力</p> + </div> + </div> + </div> + <div class="line-map"> + <div class="item item-t item-l"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>73017</span></div> + <div><span>定位状态:</span><span>已完成</span></div> + <div><span>压力:</span><span>3.6Bar</span></div> + </div> + </div> + <div class="item item-l"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>73018</span></div> + <div><span>定位状态:</span><span>已完成</span></div> + <div><span>压力:</span><span>3.6Bar</span></div> + </div> + </div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="item item-l"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>73016</span></div> + <div><span>定位状态:</span><span>已完成</span></div> + <div><span>压力:</span><span>3.6Bar</span></div> + </div> + </div> + <div class="item item-l"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>73019</span></div> + <div><span>定位状态:</span><span>已完成</span></div> + <div><span>温度:</span><span>80℃</span></div> + </div> + </div> + <div></div> + <div></div> + <div class="item item-t item-l undone"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>3970C</span></div> + <div><span>定位状态:</span><span>未完成</span></div> + <div><span>压力:</span><span>--</span></div> + </div> + </div> + <div class="item item-t undone"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>3970D</span></div> + <div><span>定位状态:</span><span>未完成</span></div> + <div><span>压力:</span><span>--</span></div> + </div> + </div> + <div class="item finish"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <span></span> + <p> + 完成巡检 + </p> + </div> + <div class="item start"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <span></span> + <p> + 开始巡检 + </p> + </div> + <div class="item item-l"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>73020</span></div> + <div><span>定位状态:</span><span>已完成</span></div> + <div><span>压力:</span><span>3.6Bar</span></div> + </div> + </div> + <div></div> + <div></div> + <div class="item item-l undone"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>3970B</span></div> + <div><span>定位状态:</span><span>未完成</span></div> + <div><span>压力:</span><span>--</span></div> + </div> + </div> + <div class="pic-tit water"> + <img src="../../../assets/loginPage/equipment.JPG"> + <p>实验室装置区</p> + </div> + <div></div> + <div class="pic-tit"> + <img src="../../../assets/loginPage/wind.JPG"> + <p>实验室风机系统</p> + </div> + <div class="item item-l warning"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>73021</span></div> + <div><span>定位状态:</span><span>已完成</span></div> + <div><span>温度:</span><span>130℃</span></div> + </div> + </div> + <div></div> + <div></div> + <div class="item item-l undone"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>3970A</span></div> + <div><span>定位状态:</span><span>未完成</span></div> + <div><span>压力:</span><span>--</span></div> + </div> + </div> + <div></div> + <div></div> + <div class="pic-tit water"> + <img src="../../../assets/loginPage/watersys.JPG"> + <p>实验室循环水系统</p> + </div> + <div class="item item-t"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>80210</span></div> + <div><span>定位状态:</span><span>已完成</span></div> + <div><span>温度:</span><span>80摄氏度</span></div> + </div> + </div> + <div class="item item-t"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>80211</span></div> + <div><span>定位状态:</span><span>已完成</span></div> + <div><span>温度:</span><span>80摄氏度</span></div> + </div> + </div> + <div class="item item-t"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>80212</span></div> + <div><span>定位状态:</span><span>已完成</span></div> + <div><span>温度:</span><span>80摄氏度</span></div> + </div> + </div> + <div class="item"> + <section> + <div class="dot"></div> + <div class="pulse"></div> + <div class="pulse1"></div> + </section> + <div> + <div><span>巡检点:</span><span>80213</span></div> + <div><span>定位状态:</span><span>已完成</span></div> + <div><span>温度:</span><span>80摄氏度</span></div> + </div> + </div> + <div></div> + <div></div> + </div> + <div class="section-1"> + + </div> + <div class="section-2"> + + </div> + <div class="section-3"> + + </div> + </div> + </div> +</template> + +<script> +export default { + name: 'NewForm', + props: { + + }, + data(){ + return{ + present: '' + } + }, + created() { + setInterval(() => { + this.present = new Date().toLocaleString() + }, 1000) + } +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped lang="scss"> + @keyframes warn { + 0% { + transform: scale(0.3); + -webkit-transform: scale(0.3); + opacity: 0.0; + } + + 25% { + transform: scale(0.3); + -webkit-transform: scale(0.3); + opacity: 0.1; + } + + 50% { + transform: scale(0.5); + -webkit-transform: scale(0.5); + opacity: 0.3; + } + + 75% { + transform: scale(0.8); + -webkit-transform: scale(0.8); + opacity: 0.6; + } + + 100% { + transform: scale(1); + -webkit-transform: scale(1); + opacity: 0.0; + } + } + + @keyframes warn1 { + 0% { + transform: scale(0.3); + -webkit-transform: scale(0.3); + opacity: 0.0; + } + + 25% { + transform: scale(0.3); + -webkit-transform: scale(0.3); + opacity: 0.1; + } + + 50% { + transform: scale(0.3); + -webkit-transform: scale(0.3); + opacity: 0.3; + } + + 75% { + transform: scale(0.5); + -webkit-transform: scale(0.5); + opacity: 0.6; + } + + 100% { + transform: scale(0.8); + -webkit-transform: scale(0.8); + opacity: 0.0; + } + } + + @keyframes circle { + 0% { + transform: rotate(0); + -webkit-transform: rotate(0); + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + } + } + .container{ + width: 100%; + height: 100%; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + background: url("../../../assets/loginPage/map-bg.jpg") no-repeat center; + background-size: 100% 100%; + .big-title{ + height: 40px; + line-height: 40px; + font-size: 28px; + font-weight: bold; + margin: 10px 0 20px; + text-align: center; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + + span{ + width: 60px; + height: 1px; + background: #36FCFC; + margin: 0 20px; + } + } + + .blocks{ + position: relative; + width: 100%; + height: 100%; + padding: 20px 20px 20px 100px; + box-sizing: border-box; + .line-map{ + position: absolute; + width: calc(100% - 120px); + left: 110px; + top: 10px; + flex-direction: column; + align-items: center; + z-index: 99; + display: grid; + grid-template-columns: repeat(7,1fr); + grid-gap: 0; + + .item{ + width: calc((100vw - 120px)/ 7); + height: calc((100vh - 130px)/ 5); + padding: 20px 40px 20px 20px; + position: relative; + box-sizing: border-box; + + section{ + width: 28px; + height: 28px; + border-radius: 50%; + position: absolute; + border: 1px solid #00ff66; + top: -14px; + left: -14px; + + .dot { + position: absolute; + width: 18px; + height: 18px; + left: 4px; + top: 4px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border: 1px solid #00ff66; + border-radius: 50%; + background-color:#00ff66; + z-index: 2; + } + .pulse { + position: absolute; + width: 56px; + height: 56px; + left: -15px; + top: -15px; + border: 1px solid #00ff66; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + z-index: 1; + opacity: 0; + -webkit-animation: warn 2s ease-out; + -moz-animation: warn 2s ease-out; + animation: warn 2s ease-out; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-iteration-count: infinite; + box-shadow: 1px 1px 30px #00ff66; + } + .pulse1 { + position: absolute; + width: 56px; + height: 56px; + left: -15px; + top: -15px; + border: 1px solid #3399ff; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + z-index: 1; + opacity: 0; + -webkit-animation: warn1 2s ease-out; + -moz-animation: warn1 2s ease-out; + animation: warn1 2s ease-out; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-iteration-count: infinite; + box-shadow: 1px 1px 30px #3399ff; + } + } + &>div{ + padding: 10px 0; + border-radius: 8px; + background-image: linear-gradient(to right,rgba(8,109,209,.4),rgba(11,255,255,.2)); + border: 1px solid rgba(54,252,252,.6); + display: flex; + flex-direction: column; + justify-content: center; + + div{ + &:nth-of-type(2){ + margin: 5px 0; + } + + span{ + display: inline-block; + width: 50%; + font-size: 14px; + color: #fff; + text-align: left; + + &:first-of-type{ + text-align: right; + color: rgba(255,255,255,.8); + } + } + } + } + + p{ + width: 140px; + height: 50px; + font-size: 18px; + line-height: 48px; + text-align: center; + color: #fff; + border-radius: 8px; + background-image: linear-gradient(to right,rgba(11,255,255,.2),rgba(8,109,209,.4)); + border: 1px solid rgba(54,252,252,.6); + } + } + + .item-t{ + border-top: 1px solid #36FCFC; + } + .item-l{ + border-left: 1px solid #36FCFC; + } + .warning{ + &>section{ + border: 1px solid #ff0000; + + .dot{ + border: 1px solid #ff0000; + background: #ff0000; + } + .pulse{ + border: 1px solid #ff0000; + box-shadow: 1px 1px 30px #ff0000; + } + .pulse1{ + border: 1px solid #ff0000; + box-shadow: 1px 1px 30px #ff0000; + } + } + + &>div{ + div:last-of-type{ + span:nth-of-type(2){ + color: #ff0000; + } + } + } + } + .undone{ + &>section{ + border: 1px solid #ccc; + + .dot{ + border: 1px solid #ccc; + background: #ccc; + } + .pulse{ + display: none; + } + .pulse1{ + display: none; + } + } + } + .pic-tit{ + display: flex; + width: calc((100vw - 120px)/ 7); + height: 160px; + padding: 20px; + transform: translate(-20px,-40%); + flex-direction: column; + align-items: flex-start; + + img{ + width: calc((100vw - 120px)/ 7 - 40px); + height: 90px; + margin-bottom: 10px; + border-radius: 4px; + } + p{ + font-size: 16px; + color: #00ffff; + font-weight: bold; + } + } + + .water{ + transform: none; + } + .start{ + padding: 40px 0; + p{ + margin-top: -21px; + margin-left: 20px; + } + span{ + width: 1px; + height: 50px; + background: #36FCFC; + position: absolute; + top: -10px; + left: 0; + } + section{ + position: absolute; + top: 30px; + left: -14px; + } + } + .finish{ + padding: 0 40px; + p{ + margin-top: -25px; + margin-left: 4px; + } + span{ + width: 100%; + height: 1px; + background: #36FCFC; + position: absolute; + top: 0; + left: calc(40px - 100%); + } + section{ + position: absolute; + top: -14px; + left: 30px; + } + } + } + .current-data{ + position: absolute; + z-index: 999999; + width: 270px; + height: 142px; + left: 50%; + padding: 20px 30px; + box-sizing: border-box; + transform: translateX(-65%); + background: url("../../../assets/loginPage/xj-bg.png") no-repeat center; + background-size: 100% 100%; + + .data-area{ + display: flex; + align-items: center; + border-bottom: 1px solid #00FFFF; + font-weight: bold; + padding-bottom: 10px; + box-sizing: border-box; + + img{ + width: 30px; + height: 30px; + margin-right: 10px; + animation: circle 1s ease-in-out infinite; + } + + div{ + font-size: 15px; + color: rgba(255,255,255,.8); + + span{ + color: #00FFFF; + } + } + } + + .data-spot{ + display: flex; + align-items: flex-start; + margin-top: 10px; + + &>div{ + display: flex; + flex-direction: column; + align-items: center; + width: 50%; + font-size: 14px; + color: rgba(255,255,255,.8); + + p{ + margin-top: 6px; + color: #00FFFF; + } + + &:first-of-type{ + border-right: 1px solid #36FCFC; + } + } + } + } + .section-1{ + position: absolute; + left: 70px; + top: -10px; + width: calc((200vw - 240px) / 7 + 60px); + height: 630px; + background: rgba(0,100,190,.1); + border: 1px solid rgba(0,100,190,.4); + border-radius: 8px; + } + .section-2{ + position: absolute; + left: calc((400vw - 480px)/ 7 + 70px); + top: 150px; + width: calc((200vw - 240px) / 7 + 60px); + height: 470px; + background: rgba(0,100,190,.1); + border: 1px solid rgba(0,100,190,.4); + border-radius: 8px; + } + .section-3{ + position: absolute; + left: 100px; + top: 630px; + width: calc((500vw - 600px)/ 7 + 30px); + height: 180px; + background: rgba(0,100,190,.1); + border: 1px solid rgba(0,100,190,.4); + border-radius: 8px; + } + } + } +</style> diff --git a/src/views/basicRightsManagement/personnelShiftManagement/holidayManagement/index.vue b/src/views/basicRightsManagement/personnelShiftManagement/holidayManagement/index.vue index 5ffe431..dcd595a 100644 --- a/src/views/basicRightsManagement/personnelShiftManagement/holidayManagement/index.vue +++ b/src/views/basicRightsManagement/personnelShiftManagement/holidayManagement/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,12 +24,14 @@ 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="55" /> <el-table-column property="name" label="休息日名称"/> <el-table-column property="type" label="休息类型"/> + <el-table-column property="info" label="描述信息"/> <el-table-column fixed="right" label="操作" align="center" width="250"> <template #default="scope"> <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> @@ -38,22 +40,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="名称"> @@ -145,171 +147,175 @@ 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 handleSizeChange = (val: number) => { - console.log(`${val} items per page`) + const userInfo = useUserInfo() + const { userInfos } = storeToRefs(userInfo); + const state = reactive<stateType>({}); + const currentPage = ref(1) + const pageSize = ref(10) + const chosenIndex = ref(-1) + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`) + } + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`) + } + const casProps = { + expandTrigger: 'hover', + } + const tableData = reactive( + [ + { + name: '周末休息', + type: '每周公休假日', + content: '' + }, + { + name: '节假日休息', + type: '每年法定节假日', + content: '' + }, + { + name: '每周一、周四休息', + type: '自定义休息日,每周', + content: ['周一','周四'] + }, + { + name: '每月休息日休息', + type: '自定义休息日,每月', + content: ['5','15','25'] } - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`) - } - const casProps = { - expandTrigger: 'hover', - } - const tableData = reactive( - [ - { - name: '周末休息', - type: '每周公休假日', - content: '' - }, - { - name: '节假日休息', - type: '每年法定节假日', - content: '' - }, - { - name: '每周一、周四休息', - type: '自定义休息日,每周', - content: ['周一','周四'] - }, - { - name: '每月休息日休息', - type: '自定义休息日,每月', - content: ['5','15','25'] - } - ] - ) - const holidayList =reactive([ + ] + ) + const holidayList =reactive([ + { + value: '每周公休假日', + label: '每周公休假日' + }, + { + value: '每年法定节假日', + label: '每年法定节假日' + }, + { + value: '自定义休息日', + label: '自定义休息日', + children: [ { - value: '每周公休假日', - label: '每周公休假日' + value: '每周', + label: '每周', }, { - value: '每年法定节假日', - label: '每年法定节假日' - }, - { - value: '自定义休息日', - label: '自定义休息日', - children: [ - { - value: '每周', - label: '每周', - }, - { - value: '每月', - label: '每月', - } - ] + value: '每月', + label: '每月', } - ]) - const handleChange = (value) => { - addRecord.value.content = [] - console.log(JSON.parse(JSON.stringify(value))) + ] + } + ]) + const handleChange = (value) => { + addRecord.value.content = [] + console.log(JSON.parse(JSON.stringify(value))) + } + const weekDays = reactive(['周一','周二','周三','周四','周五','周六','周日']) + const addRef = ref<FormInstance>() + const addRules = reactive<FormRules>({ + name:[{required: true, message: '该内容不能为空',trigger:'blur'}], + type:[{required: true, message: '该内容不能为空',trigger:'blur'}], + content:[{required: true, message: '该内容不能为空'}] + }) + 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){ + tableData.unshift(addRecord.value) + }else{ + tableData[chosenIndex.value] = addRecord.value + } + dialogAddRecord.value =false + } else { + console.log('error submit!', fields) } - const weekDays = reactive(['周一','周二','周三','周四','周五','周六','周日']) - const addRef = ref<FormInstance>() - const addRules = reactive<FormRules>({ - name:[{required: true, message: '该内容不能为空',trigger:'blur'}], - type:[{required: true, message: '该内容不能为空',trigger:'blur'}], - content:[{required: true, message: '该内容不能为空'}] - }) - 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){ - tableData.unshift(addRecord.value) - }else{ - 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)) - } - // 折线图 - 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)) + } + // 折线图 + 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; @@ -333,37 +339,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; } } } diff --git a/src/views/basicRightsManagement/personnelShiftManagement/holidayTime/index.vue b/src/views/basicRightsManagement/personnelShiftManagement/holidayTime/index.vue new file mode 100644 index 0000000..7bfacde --- /dev/null +++ b/src/views/basicRightsManagement/personnelShiftManagement/holidayTime/index.vue @@ -0,0 +1,625 @@ +<template> + <div class="home-container"> + <div style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="8"> + <div class="grid-content topInfo"> + <el-input v-model="searchWord" placeholder="休息日名称"></el-input> + <el-button type="primary" @click="searchRecord">查询</el-button> + <el-button plain @click="clearSearch">重置</el-button> + </div> + </el-col> + </el-row> + <div class="homeCard"> + <div class="main-card"> + <el-row class="cardTop"> + <el-col :span="12" class="mainCardBtn"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button> +<!-- <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>--> + <el-button type="danger" :icon="Delete" size="default" plain @click="deleteWorkTimePeriods">删除</el-button> + </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-column type="selection" width="100" /> + <el-table-column property="name" label="休息日名称"/> + <el-table-column property="type" label="休息日类型"/> + <el-table-column property="info" label="描述信息"/> + <el-table-column fixed="right" label="操作" align="center" width="250"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> + <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.row)">删除</el-button> + </template> + </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" + /> + </div> + </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-form-item> + <el-form-item label="休假类型"> + <el-input + v-model="details.type" + readonly + /> + </el-form-item> + <el-form-item label="休假时间" v-if="details.content.length>0"> + <el-input + v-model="details.content" + readonly + /> + </el-form-item> + <el-form-item label="描述信息" v-if="details.info"> + <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-form-item> + </el-form> + </el-dialog> + <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-form-item> + <el-form-item label="休假类型" prop="type"> + <el-cascader + v-model="addRecord.type" + :options="holidayList" + :props="casProps" + @change="handleChange" + /> + </el-form-item> + <el-form-item label="选择休假时间" prop="content" v-if="addRecord.type && JSON.parse(JSON.stringify(addRecord.type))[1] == '每周'"> + <el-checkbox-group v-model="addRecord.content"> + <el-checkbox v-for="(item,i) in weekDays" :label="item" :key="i"/> + </el-checkbox-group> + </el-form-item> + <el-form-item label="选择休假时间" prop="content" v-if="addRecord.type && JSON.parse(JSON.stringify(addRecord.type))[1] == '每月'"> + <el-checkbox-group v-model="addRecord.content"> + <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 + 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> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> + <span>您确定要删除该条记录吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script lang="ts"> + import { toRefs, reactive, ref, onMounted } from 'vue'; + import { storeToRefs } from 'pinia'; + import { initBackEndControlRoutes } from '/@/router/backEnd'; + 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 { workingHoursApi } from '/@/api/basicDateManage/personShiftManage/workingHours'; + + + + // 定义接口来定义对象的类型 + interface stateType { + tableData: Array<string>, + multipleSelection: Array<any>, + deleteArr: Array<any>, + dialogDetails: boolean, + dialogAddRecord: boolean, + deleteDialog: boolean, + pageIndex: number, + pageSize: number, + searchWord: string, + totalSize: number, + addRecord: { + name: string, + type: string, + content: Array<any>, + info: string + }, + details: { + name: string, + type: string, + content: Array<any>, + info: string + } + } + + export default { + name: 'workingHours', + components:{}, + setup() { + const userInfo = useUserInfo() + const {userInfos} = storeToRefs(userInfo); + + const state = reactive<stateType>({ + pageIndex: 1, + pageSize: 10, + totalSize: 0, + chosenIndex: null, + searchWord: '', + tableData: [], + multipleSelection: [], + dialogDetails: false, + dialogAddRecord: false, + deleteDialog: false, + holidayList:[ + { + value: '每周公休假日', + label: '每周公休假日' + }, + { + value: '每年法定节假日', + label: '每年法定节假日' + }, + { + value: '自定义休息日', + label: '自定义休息日', + children: [ + { + value: '每周', + label: '每周', + }, + { + value: '每月', + label: '每月', + } + ] + } + ], + weekDays: ['周一','周二','周三','周四','周五','周六','周日'], + casProps: { + expandTrigger: 'hover', + }, + addRecord: { + name: '', + type: '', + content: [], + info: '' + }, + details: { + name: '', + type: '', + content: [], + info: '' + }, + deleteId: null, + deleteArr: [] + }) + interface User { + name: string, + type: string, + content: [], + info: string + } + + 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) { + 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) + }) + } else { + multipleTableRef.value!.clearSelection() + } + } + + // 多选 + const handleSelectionChange = (val: User[]) => { + state.multipleSelection = JSON.parse(JSON.stringify(val)) + state.deleteArr = state.multipleSelection.map((item)=>{ + item = item.id + return item + }) + } + + const addRef = ref<FormInstance>() + const addRules = reactive<FormRules>({ + name: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + type: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + content: [{required: true, message: '该内容不能为空', trigger: 'blur'}] + }) + + // 页面载入时执行方法 + onMounted(() => { + // getWorkTimePeriod() + getListByPage() + }) + + // 获取工作时段列表 + const getWorkTimePeriod = async () => { + let res = await workingHoursApi().getWorkTimePeriod({name: state.searchWord}); + if (res.data.code === '200') { + state.tableData = res.data.data.map((item)=>{ + item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString()) + item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString()) + item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString()) + item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString()) + item.startTime = item.startHour + ':' + item.startMin + item.endTime = item.endHour + ':' + item.endMin + return item + }) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + // 分页获取工作时段列表 + const getListByPage = async ()=>{ + const data = {pageSize: state.pageSize,pageIndex: state.pageIndex,searchParams:{name: state.searchWord}} + let res = await workingHoursApi().postPeriodPage(data); + if (res.data.code === '200') { + state.tableData = res.data.data.map((item)=>{ + item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString()) + item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString()) + item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString()) + item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString()) + item.startTime = item.startHour + ':' + item.startMin + item.endTime = item.endHour + ':' + item.endMin + return item + }) + state.totalSize = res.data.total + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + // 关键词查询记录 + const searchRecord = async()=>{ + if(state.searchWord==''){ + ElMessage({ + type: 'warning', + message: '请输入查询关键词' + }); + }else{ + getListByPage() + } + } + + const clearSearch = async()=>{ + state.searchWord='' + getListByPage() + } + + // 添加工作时段 + const addWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().postWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 修改工作时段 + const editWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().updateWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + // 删除工作时段 + const deleteWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().deletWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + const deleteRecord = (row) => { + state.deleteId = row.id + state.deleteDialog = true + } + + const conFirmDelete = () => { + deleteWorkTimePeriod({ id: state.deleteId }) + state.deleteDialog = false + } + + // 批量删除 + const deleteWorkTimePeriods = async () => { + if(state.deleteArr.length>0){ + console.log(state.deleteArr) + let res = await workingHoursApi().deleteBatchWorkTimePeriod({ids: state.deleteArr}); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }else{ + ElMessage({ + type: 'warning', + message: '请先选择要删除的记录' + }); + } + } + + const handleSizeChange = (val: number) => { + state.pageSize = val + getListByPage() + } + const handleCurrentChange = (val: number) => { + state.pageIndex = val + getListByPage() + } + + // 查看记录 + const viewRecord = (row) => { + state.details = row + state.dialogDetails = true + } + + // 刷新 + const reLoadData = async () =>{ + getListByPage() + } + const editRecord = (index, row) => { + state.dialogAddRecord = true + state.chosenIndex = index + state.addRecord = JSON.parse(JSON.stringify(row)) + } + + // 新增修改记录 + const confirmAddRecord = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate(async (valid, fields) => { + if (valid) { + const data = { + name: state.addRecord.name, + info: state.addRecord.info, + startHour: Number(state.addRecord.startTime.substring(0, 2)), + startMin: Number(state.addRecord.startTime.substring(3)), + endHour: Number(state.addRecord.endTime.substring(0, 2)), + endMin: Number(state.addRecord.endTime.substring(3)) + } + if (state.chosenIndex == null) { + // if (state.addRecord.startTime >= state.addRecord.endTime) { + // state.addRecord.endTime = '次日' + state.addRecord.endTime + // } + // state.tableData.unshift(data) + await addWorkTimePeriod(data) + } else { + // if (state.addRecord.startTime >= state.addRecord.endTime) { + // state.addRecord.endTime = '次日' + state.addRecord.endTime + // } + // state.tableData[state.chosenIndex] = state.addRecord + data.id = state.addRecord.id, + await editWorkTimePeriod(data) + } + state.dialogAddRecord = false + } else { + console.log('error submit!', fields) + } + }) + + } + const closeAdd = () => { + state.addRecord = {} + state.chosenIndex = null + } + const openAdd = () => { + if (state.chosenIndex == null) { + state.addRecord.info = '' + } + } + const indexClear = () => { + state.deleteId = null + } + + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId', value) + userInfos.value.projectId = value + await initBackEndControlRoutes(); + }; + return { + addRef, + addRules, + View, + Edit, + Delete, + Refresh, + Plus, + toggleSelection, + handleSelectionChange, + deleteWorkTimePeriods, + searchRecord, + clearSearch, + viewRecord, + deleteRecord, + conFirmDelete, + getWorkTimePeriod, + getListByPage, + reLoadData, + deleteWorkTimePeriod, + handleSizeChange, + handleCurrentChange, + confirmAddRecord, + closeAdd, + openAdd, + indexClear, + editRecord, + ...toRefs(state) + }; + } + } +</script> + +<style scoped lang="scss"> + $homeNavLengh: 8; + .home-container { + 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; + align-items: center; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content{ + align-items: center; + min-height: 36px; + } + + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + &>div{ + white-space: nowrap; + margin-right: 20px; + } + } + } + } + .el-input{ + width: 100% !important; + } + .el-date-editor::v-deep{ + width: 100%; + } + .el-select{ + width: 100%; + } +</style> diff --git a/src/views/basicRightsManagement/personnelShiftManagement/holidayTimeSet/index.vue b/src/views/basicRightsManagement/personnelShiftManagement/holidayTimeSet/index.vue new file mode 100644 index 0000000..a3531bc --- /dev/null +++ b/src/views/basicRightsManagement/personnelShiftManagement/holidayTimeSet/index.vue @@ -0,0 +1,567 @@ +<template> + <div class="home-container"> + <div style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="8"> + <div class="grid-content topInfo"> + <el-input v-model="searchWord" placeholder="休息时间组名称"></el-input> + <el-button type="primary" @click="searchRecord">查询</el-button> + <el-button plain @click="clearSearch">重置</el-button> + </div> + </el-col> + </el-row> + <div class="homeCard"> + <div class="main-card"> + <el-row class="cardTop"> + <el-col :span="12" class="mainCardBtn"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button> +<!-- <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>--> + <el-button type="danger" :icon="Delete" size="default" plain @click="deleteWorkTimePeriods">删除</el-button> + </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-column type="selection" width="100" /> + <el-table-column property="name" label="休息时间组名称"/> + <el-table-column property="content" label="关联休息时间"/> + <el-table-column property="info" label="描述信息"/> + <el-table-column fixed="right" label="操作" align="center" width="250"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> + <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.row)">删除</el-button> + </template> + </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" + /> + </div> + </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-form-item> + <el-form-item label="关联休息时间" v-if="details.content.length>0"> + <el-input + v-model="details.content" + readonly + /> + </el-form-item> + <el-form-item label="描述信息" v-if="details.info"> + <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-form-item> + </el-form> + </el-dialog> + <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-form-item> + <el-form-item label="关联休息时间" prop="content"> + <el-select v-model="addRecord.content"> + <el-option label="周末休息" value="周末休息" /> + <el-option label="节假日休息" value="节假日休息" /> + </el-select> + </el-form-item> + <el-form-item label="描述信息" prop="info"> + <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> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> + <span>您确定要删除该条记录吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script lang="ts"> + import { toRefs, reactive, ref, onMounted } from 'vue'; + import { storeToRefs } from 'pinia'; + import { initBackEndControlRoutes } from '/@/router/backEnd'; + 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 { workingHoursApi } from '/@/api/basicDateManage/personShiftManage/workingHours'; + + + + // 定义接口来定义对象的类型 + interface stateType { + tableData: Array<string>, + multipleSelection: Array<any>, + deleteArr: Array<any>, + dialogDetails: boolean, + dialogAddRecord: boolean, + deleteDialog: boolean, + pageIndex: number, + pageSize: number, + searchWord: string, + totalSize: number, + addRecord: { + name: string, + content: Array<any>, + info: string + }, + details: { + name: string, + content: Array<any>, + info: string + } + } + + export default { + name: 'workingHours', + components:{}, + setup() { + const userInfo = useUserInfo() + const {userInfos} = storeToRefs(userInfo); + + const state = reactive<stateType>({ + pageIndex: 1, + pageSize: 10, + totalSize: 0, + chosenIndex: null, + searchWord: '', + tableData: [], + multipleSelection: [], + dialogDetails: false, + dialogAddRecord: false, + deleteDialog: false, + addRecord: { + name: '', + content: [], + info: '' + }, + details: { + name: '', + content: [], + info: '' + }, + deleteId: null, + deleteArr: [] + }) + interface User { + name: string, + content: [], + info: string + } + 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) + }) + } else { + multipleTableRef.value!.clearSelection() + } + } + + // 多选 + const handleSelectionChange = (val: User[]) => { + state.multipleSelection = JSON.parse(JSON.stringify(val)) + state.deleteArr = state.multipleSelection.map((item)=>{ + item = item.id + return item + }) + } + + const addRef = ref<FormInstance>() + const addRules = reactive<FormRules>({ + name: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + content: [{required: true, message: '该内容不能为空', trigger: 'blur'}] + }) + + // 页面载入时执行方法 + onMounted(() => { + // getWorkTimePeriod() + getListByPage() + }) + + // 获取工作时段列表 + const getWorkTimePeriod = async () => { + let res = await workingHoursApi().getWorkTimePeriod({name: state.searchWord}); + if (res.data.code === '200') { + state.tableData = res.data.data.map((item)=>{ + item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString()) + item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString()) + item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString()) + item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString()) + item.startTime = item.startHour + ':' + item.startMin + item.endTime = item.endHour + ':' + item.endMin + return item + }) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + // 分页获取工作时段列表 + const getListByPage = async ()=>{ + const data = {pageSize: state.pageSize,pageIndex: state.pageIndex,searchParams:{name: state.searchWord}} + let res = await workingHoursApi().postPeriodPage(data); + if (res.data.code === '200') { + state.tableData = res.data.data.map((item)=>{ + item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString()) + item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString()) + item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString()) + item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString()) + item.startTime = item.startHour + ':' + item.startMin + item.endTime = item.endHour + ':' + item.endMin + return item + }) + state.totalSize = res.data.total + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + // 关键词查询记录 + const searchRecord = async()=>{ + if(state.searchWord==''){ + ElMessage({ + type: 'warning', + message: '请输入查询关键词' + }); + }else{ + getListByPage() + } + } + + const clearSearch = async()=>{ + state.searchWord='' + getListByPage() + } + + // 添加工作时段 + const addWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().postWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 修改工作时段 + const editWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().updateWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + // 删除工作时段 + const deleteWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().deletWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + const deleteRecord = (row) => { + state.deleteId = row.id + state.deleteDialog = true + } + + const conFirmDelete = () => { + deleteWorkTimePeriod({ id: state.deleteId }) + state.deleteDialog = false + } + + // 批量删除 + const deleteWorkTimePeriods = async () => { + if(state.deleteArr.length>0){ + console.log(state.deleteArr) + let res = await workingHoursApi().deleteBatchWorkTimePeriod({ids: state.deleteArr}); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }else{ + ElMessage({ + type: 'warning', + message: '请先选择要删除的记录' + }); + } + } + + const handleSizeChange = (val: number) => { + state.pageSize = val + getListByPage() + } + const handleCurrentChange = (val: number) => { + state.pageIndex = val + getListByPage() + } + + // 查看记录 + const viewRecord = (row) => { + state.details = row + state.dialogDetails = true + } + + // 刷新 + const reLoadData = async () =>{ + getListByPage() + } + const editRecord = (index, row) => { + state.dialogAddRecord = true + state.chosenIndex = index + state.addRecord = JSON.parse(JSON.stringify(row)) + } + + // 新增修改记录 + const confirmAddRecord = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate(async (valid, fields) => { + if (valid) { + const data = { + name: state.addRecord.name, + info: state.addRecord.info, + startHour: Number(state.addRecord.startTime.substring(0, 2)), + startMin: Number(state.addRecord.startTime.substring(3)), + endHour: Number(state.addRecord.endTime.substring(0, 2)), + endMin: Number(state.addRecord.endTime.substring(3)) + } + if (state.chosenIndex == null) { + // if (state.addRecord.startTime >= state.addRecord.endTime) { + // state.addRecord.endTime = '次日' + state.addRecord.endTime + // } + // state.tableData.unshift(data) + await addWorkTimePeriod(data) + } else { + // if (state.addRecord.startTime >= state.addRecord.endTime) { + // state.addRecord.endTime = '次日' + state.addRecord.endTime + // } + // state.tableData[state.chosenIndex] = state.addRecord + data.id = state.addRecord.id, + await editWorkTimePeriod(data) + } + state.dialogAddRecord = false + } else { + console.log('error submit!', fields) + } + }) + + } + const closeAdd = () => { + state.addRecord = {} + state.chosenIndex = null + } + const openAdd = () => { + if (state.chosenIndex == null) { + state.addRecord.info = '' + } + } + const indexClear = () => { + state.deleteId = null + } + + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId', value) + userInfos.value.projectId = value + await initBackEndControlRoutes(); + }; + return { + addRef, + addRules, + View, + Edit, + Delete, + Refresh, + Plus, + toggleSelection, + handleSelectionChange, + deleteWorkTimePeriods, + searchRecord, + clearSearch, + viewRecord, + deleteRecord, + conFirmDelete, + getWorkTimePeriod, + getListByPage, + reLoadData, + deleteWorkTimePeriod, + handleSizeChange, + handleCurrentChange, + confirmAddRecord, + closeAdd, + openAdd, + indexClear, + editRecord, + ...toRefs(state) + }; + } + } +</script> + +<style scoped lang="scss"> + $homeNavLengh: 8; + .home-container { + 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; + align-items: center; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content{ + align-items: center; + min-height: 36px; + } + + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + &>div{ + white-space: nowrap; + margin-right: 20px; + } + } + } + } + .el-input{ + width: 100% !important; + } + .el-date-editor::v-deep{ + width: 100%; + } + .el-select{ + width: 100%; + } +</style> 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; } } } diff --git a/src/views/basicRightsManagement/personnelShiftManagement/shiftManagement/index.vue b/src/views/basicRightsManagement/personnelShiftManagement/shiftManagement/index.vue index 97994c2..4d5b471 100644 --- a/src/views/basicRightsManagement/personnelShiftManagement/shiftManagement/index.vue +++ b/src/views/basicRightsManagement/personnelShiftManagement/shiftManagement/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" > @@ -38,22 +39,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="名称"> @@ -230,223 +231,227 @@ 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 chosenShiftIndex = ref(-1) - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`) - } - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`) - } - const casProps = { - expandTrigger: 'hover', - } - const tableData = reactive( - [ + const userInfo = useUserInfo() + const { userInfos } = storeToRefs(userInfo); + const state = reactive<stateType>({}); + const currentPage = ref(1) + const pageSize = ref(10) + const chosenIndex = ref(-1) + const chosenShiftIndex = ref(-1) + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`) + } + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`) + } + const casProps = { + expandTrigger: 'hover', + } + const tableData = reactive( + [ + { + name: '三班三倒', + type: '循环班', + shiftSteps:[ { - name: '三班三倒', - type: '循环班', - shiftSteps:[ - { - name: '第一班', - days: '5', - rest: '1', - timeRange: '三班三倒早班' - }, - { - name: '第二班', - days: '5', - rest: '2', - timeRange: '三班三倒中班' - }, - { - name: '第三班', - days: '5', - rest: '3', - timeRange: '三班三倒夜班' - } - ] + name: '第一班', + days: '5', + rest: '1', + timeRange: '三班三倒早班' }, { - name: '常白班', - type: '固定班' + name: '第二班', + days: '5', + rest: '2', + timeRange: '三班三倒中班' + }, + { + name: '第三班', + days: '5', + rest: '3', + timeRange: '三班三倒夜班' } ] - ) - const handleChange = (value) => { - addRecord.value.content = [] - console.log(JSON.parse(JSON.stringify(value))) + }, + { + name: '常白班', + type: '固定班' } - const addRef = ref<FormInstance>() - const addShiftRef = ref<FormInstance>() - const addRules = reactive<FormRules>({ - name:[{required: true, message: '该内容不能为空',trigger:'blur'}], - type:[{required: true, message: '该内容不能为空',trigger:'blur'}], - timeRange:[{required: true, message: '该内容不能为空',trigger:'blur'}] - }) - const addShiftRules = reactive<FormRules>({ - name:[{required: true, message: '该内容不能为空',trigger:'blur'}], - days:[{required: true, message: '该内容不能为空',trigger:'blur'}], - rest:[{required: true,message: '该内容不能为空',trigger: 'blur'}], - timeRange:[{required: true, message: '该内容不能为空',trigger:'blur'}] - }) - const dialogDetails = ref(false) - const dialogAddRecord = ref(false) - const deleteDialog = ref(false) - const deleteShiftDialog = ref(false) - const dialogAddShift = ref(false) - const addRecord = ref({}) - const addShift = 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){ - if(addRecord.value.type == '循环班' && (!addRecord.value.shiftSteps || addRecord.value.shiftSteps.length == 0)){ - ElMessage({ - message: '请先设置自定义排班后再提交', - type: 'warning', - }) - return - }else{ - tableData.unshift(addRecord.value) - } - }else{ - if(addRecord.value.type == '循环班' && addRecord.value.shiftSteps.length == 0){ - ElMessage({ - message: '请先设置自定义排班后再提交', - type: 'warning', - }) - return - }else{ - if(addRecord.value.type == '固定班'){delete addRecord.value.shiftSteps} - console.log(addRecord.value,'addRecord') - tableData[chosenIndex.value] = addRecord.value - } - } - dialogAddRecord.value =false - } else { - console.log('error submit!', fields) + ] + ) + const handleChange = (value) => { + addRecord.value.content = [] + console.log(JSON.parse(JSON.stringify(value))) + } + const addRef = ref<FormInstance>() + const addShiftRef = ref<FormInstance>() + const addRules = reactive<FormRules>({ + name:[{required: true, message: '该内容不能为空',trigger:'blur'}], + type:[{required: true, message: '该内容不能为空',trigger:'blur'}], + timeRange:[{required: true, message: '该内容不能为空',trigger:'blur'}] + }) + const addShiftRules = reactive<FormRules>({ + name:[{required: true, message: '该内容不能为空',trigger:'blur'}], + days:[{required: true, message: '该内容不能为空',trigger:'blur'}], + rest:[{required: true,message: '该内容不能为空',trigger: 'blur'}], + timeRange:[{required: true, message: '该内容不能为空',trigger:'blur'}] + }) + const dialogDetails = ref(false) + const dialogAddRecord = ref(false) + const deleteDialog = ref(false) + const deleteShiftDialog = ref(false) + const dialogAddShift = ref(false) + const addRecord = ref({}) + const addShift = 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){ + if(addRecord.value.type == '循环班' && (!addRecord.value.shiftSteps || addRecord.value.shiftSteps.length == 0)){ + ElMessage({ + message: '请先设置自定义排班后再提交', + type: 'warning', + }) + return + }else{ + tableData.unshift(addRecord.value) } - }) - - } - const closeAdd =()=>{ - addRecord.value={} - chosenIndex.value = -1 - addShift.value={} - chosenShiftIndex.value = -1 - } - const indexClear = ()=>{ - chosenIndex.value = -1 - } - const indexShiftClear = ()=>{ - chosenShiftIndex.value = -1 - } - const editRecord =(index, row)=>{ - dialogAddRecord.value = true - chosenIndex.value = index - addRecord.value = JSON.parse(JSON.stringify(row)) - } - - // 添加删除排班步骤 - const addFlow = (index) => { - dialogAddShift.value = true - chosenShiftIndex.value = index - } - const deleteFlow = (index) => { - deleteShiftDialog.value = true - chosenShiftIndex.value = index - } - const conFirmShiftDelete = () => { - addRecord.value.shiftSteps.splice( chosenShiftIndex.value,1) - deleteShiftDialog.value = false - } - const confirmAddShift = async (formEl: FormInstance | undefined) => { - if (!formEl) return - await formEl.validate((valid, fields) => { - if (valid) { - if(addRecord.value.shiftSteps){ - addRecord.value.shiftSteps.splice(chosenShiftIndex.value+1,0,addShift.value) - }else{ - addRecord.value.shiftSteps = [] - addRecord.value.shiftSteps.unshift(addShift.value) - } - dialogAddShift.value = false - } else { - console.log('error submit!', fields) + }else{ + if(addRecord.value.type == '循环班' && addRecord.value.shiftSteps.length == 0){ + ElMessage({ + message: '请先设置自定义排班后再提交', + type: 'warning', + }) + return + }else{ + if(addRecord.value.type == '固定班'){delete addRecord.value.shiftSteps} + console.log(addRecord.value,'addRecord') + tableData[chosenIndex.value] = addRecord.value } - }) + } + dialogAddRecord.value =false + } else { + console.log('error submit!', fields) + } + }) + } + const closeAdd =()=>{ + addRecord.value={} + chosenIndex.value = -1 + addShift.value={} + chosenShiftIndex.value = -1 + } + const indexClear = ()=>{ + chosenIndex.value = -1 + } + const indexShiftClear = ()=>{ + chosenShiftIndex.value = -1 + } + const editRecord =(index, row)=>{ + dialogAddRecord.value = true + chosenIndex.value = index + addRecord.value = JSON.parse(JSON.stringify(row)) + } + + // 添加删除排班步骤 + const addFlow = (index) => { + dialogAddShift.value = true + chosenShiftIndex.value = index + } + const deleteFlow = (index) => { + deleteShiftDialog.value = true + chosenShiftIndex.value = index + } + const conFirmShiftDelete = () => { + addRecord.value.shiftSteps.splice( chosenShiftIndex.value,1) + deleteShiftDialog.value = false + } + const confirmAddShift = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + if(addRecord.value.shiftSteps){ + addRecord.value.shiftSteps.splice(chosenShiftIndex.value+1,0,addShift.value) + }else{ + addRecord.value.shiftSteps = [] + addRecord.value.shiftSteps.unshift(addShift.value) + } + dialogAddShift.value = false + } else { + console.log('error submit!', fields) } - const closeAddShift =()=>{ - addShift.value={} - chosenShiftIndex.value = -1 - } - // 折线图 - 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 closeAddShift =()=>{ + addShift.value={} + chosenShiftIndex.value = -1 + } + // 折线图 + 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; @@ -470,37 +475,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; } } } diff --git a/src/views/basicRightsManagement/personnelShiftManagement/teamManagement/index.vue b/src/views/basicRightsManagement/personnelShiftManagement/teamManagement/index.vue index 04f674a..c0bbe06 100644 --- a/src/views/basicRightsManagement/personnelShiftManagement/teamManagement/index.vue +++ b/src/views/basicRightsManagement/personnelShiftManagement/teamManagement/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" > @@ -38,22 +39,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="班组名称"> @@ -127,194 +128,198 @@ 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 handleSizeChange = (val: number) => { - console.log(`${val} items per page`) - } - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`) - } - const workerList =reactive([ + 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 workerList =reactive([ + { + value: 'A部门车间', + label: 'A部门车间', + children: [ { - value: 'A部门车间', - label: 'A部门车间', - children: [ - { - value: '刘能', - label: '刘能', - }, - { - value: '赵四', - label: '赵四', - }, - { - value: '谢广坤', - label: '谢广坤', - }, - { - value: '王大拿', - label: '王大拿', - }, - { - value: '刘能', - label: '刘能', - }, - { - value: '赵四', - label: '赵四', - } - ] + value: '刘能', + label: '刘能', }, { - value: 'B部门车间', - label: 'B部门车间', - children: [ - { - value: '刘备', - label: '刘备', - }, - { - value: '关羽', - label: '关羽', - }, - { - value: '张飞', - label: '张飞', - }, - { - value: '赵云', - label: '赵云', - }, - { - value: '黄忠', - label: '黄忠', - }, - { - value: '马超', - label: '马超', - } - ] + value: '赵四', + label: '赵四', + }, + { + value: '谢广坤', + label: '谢广坤', + }, + { + value: '王大拿', + label: '王大拿', + }, + { + value: '刘能', + label: '刘能', + }, + { + value: '赵四', + label: '赵四', } - ]) - const tableData = reactive( - [ - { - teamName: 'A车间班组', - teamMember: ['张三','李四','李羽飞'] - }, - { - teamName: 'B车间班组', - teamMember: ['刘能','赵四','谢广坤'] - }, - ] - ) - const addRef = ref<FormInstance>() - const addRules = reactive<FormRules>({ - teamName:[{required: true, message: '该内容不能为空',trigger:'blur'}], - teamMember:[{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 + ] + }, + { + value: 'B部门车间', + label: 'B部门车间', + children: [ + { + value: '刘备', + label: '刘备', + }, + { + value: '关羽', + label: '关羽', + }, + { + value: '张飞', + label: '张飞', + }, + { + value: '赵云', + label: '赵云', + }, + { + value: '黄忠', + label: '黄忠', + }, + { + value: '马超', + label: '马超', + } + ] + } + ]) + const tableData = reactive( + [ + { + teamName: 'A车间班组', + teamMember: ['张三','李四','李羽飞'] + }, + { + teamName: 'B车间班组', + teamMember: ['刘能','赵四','谢广坤'] + }, + ] + ) + const addRef = ref<FormInstance>() + const addRules = reactive<FormRules>({ + teamName:[{required: true, message: '该内容不能为空',trigger:'blur'}], + teamMember:[{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){ + tableData.unshift(addRecord.value) + }else{ + tableData[chosenIndex.value] = addRecord.value + } + dialogAddRecord.value =false + } else { + console.log('error submit!', fields) } - 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){ - tableData.unshift(addRecord.value) - }else{ - 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)) - } - // 折线图 - 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)) + } + // 折线图 + 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; @@ -338,37 +343,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; } } } diff --git a/src/views/basicRightsManagement/personnelShiftManagement/workingHours/index.vue b/src/views/basicRightsManagement/personnelShiftManagement/workingHours/index.vue index bb15eed..682c49e 100644 --- a/src/views/basicRightsManagement/personnelShiftManagement/workingHours/index.vue +++ b/src/views/basicRightsManagement/personnelShiftManagement/workingHours/index.vue @@ -1,12 +1,12 @@ <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"> <el-input v-model="searchWord" placeholder="工作时段名称"></el-input> - <el-button type="primary">查询</el-button> - <el-button plain>重置</el-button> + <el-button type="primary" @click="searchRecord">查询</el-button> + <el-button plain @click="clearSearch">重置</el-button> </div> </el-col> </el-row> @@ -16,57 +16,70 @@ <el-col :span="12" class="mainCardBtn"> <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button> <!-- <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>--> - <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button> + <el-button type="danger" :icon="Delete" size="default" plain @click="deleteWorkTimePeriods">删除</el-button> </el-col> - <el-button type="primary" :icon="Refresh" size="default"/> + <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-column type="selection" width="100" /> <el-table-column property="name" label="工作时段名称"/> - <el-table-column property="range" label="排班时段"/> + <el-table-column property="startTime" label="开始时间"/> + <el-table-column property="endTime" label="结束时间"/> + <el-table-column property="info" label="描述信息"/> <el-table-column fixed="right" label="操作" align="center" width="250"> <template #default="scope"> <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button> - <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.row)">删除</el-button> </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="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-scrollbar> + </div> <el-dialog v-model="dialogDetails" title="工作时段"> <el-form :model="details" label-width="120px"> <el-form-item label="工作时段名称"> <el-input v-model="details.name" - class="input-with-select" readonly /> </el-form-item> - <el-form-item label="排班时段"> + <el-form-item label="开始时间"> <el-input - v-model="details.range" - class="input-with-select" + v-model="details.startTime" + readonly + /> + </el-form-item> + <el-form-item label="结束时间"> + <el-input + v-model="details.endTime" + readonly + /> + </el-form-item> + <el-form-item label="描述信息"> + <el-input + v-model="details.info" readonly /> </el-form-item> @@ -75,7 +88,7 @@ </el-form-item> </el-form> </el-dialog> - <el-dialog v-model="dialogAddRecord" title="工作时段编辑" @close="closeAdd"> + <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 @@ -84,22 +97,27 @@ </el-input> </el-form-item> <el-form-item label="上班开始时间" prop="startTime"> - <el-time-select + <el-time-picker v-model="addRecord.startTime" - start="00:00" - step="00:15" - end="24:00" + format="HH:mm" + value-format="HH:mm" placeholder="Select time" /> </el-form-item> <el-form-item label="上班结束时间" prop="endTime"> - <el-time-select + <el-time-picker v-model="addRecord.endTime" - start="00:00" - step="00:15" - end="24:00" + format="HH:mm" + value-format="HH:mm" placeholder="Select time" /> + </el-form-item> + <el-form-item label="描述信息" prop="info"> + <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> @@ -119,167 +137,420 @@ </div> </template> -<script lang="ts" setup> - import { toRefs, reactive, ref } from 'vue'; +<script lang="ts"> + import { toRefs, reactive, ref, onMounted } from 'vue'; import { storeToRefs } from 'pinia'; import { initBackEndControlRoutes } from '/@/router/backEnd'; 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 } from 'element-plus' - let global: any = { - homeChartOne: null, - homeChartTwo: null, - homeCharThree: null, - dispose: [null, '', undefined], - }; + import { FormInstance, FormRules, ElMessage } from 'element-plus' + import { workingHoursApi } from '/@/api/basicDateManage/personShiftManage/workingHours'; + + + // 定义接口来定义对象的类型 interface stateType { - homeOne: Array <type> + tableData: Array<string>, + multipleSelection: Array<any>, + deleteArr: Array<any>, + dialogDetails: boolean, + dialogAddRecord: boolean, + deleteDialog: boolean, + pageIndex: number, + pageSize: number, + searchWord: string, + totalSize: number, + addRecord: { + name: string, + startTime: string, + endTime: string, + info: string + }, + details: { + name: string, + startTime: string, + endTime: string, + info: string + } } - 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 handleSizeChange = (val: number) => { - console.log(`${val} items per page`) - } - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`) - } - const tableData = reactive( - [ - { - name: '四班三倒早班', - range: '04:00 - 12:00' - }, - { - name: '四班三倒中班', - range: '12:00 - 20:00' - }, - { - name: '四班三倒中班', - range: '20:00 - 次日04:00' - }, - { - name: '常白班', - range: '08:00 - 18:00' - } - ] - ) - const addRef = ref<FormInstance>() - const addRules = reactive<FormRules>({ - name:[{required: true, message: '该内容不能为空',trigger:'blur'}], - startTime:[{required: true, message: '该内容不能为空',trigger:'blur'}], - endTime:[{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){ - if(addRecord.value.startTime >= addRecord.value.endTime){ - addRecord.value.endTime = '次日' + addRecord.value.endTime - } - addRecord.value.range = addRecord.value.startTime + '\xa0-\xa0' + addRecord.value.endTime - tableData.unshift(addRecord.value) - }else{ - if(addRecord.value.startTime >= addRecord.value.endTime){ - addRecord.value.endTime = '次日' + addRecord.value.endTime - } - addRecord.value.range = addRecord.value.startTime + '\xa0-\xa0' + addRecord.value.endTime - tableData[chosenIndex.value] = addRecord.value - } - dialogAddRecord.value =false - } else { - console.log('error submit!', fields) - } + export default { + name: 'workingHours', + components:{}, + setup() { + const userInfo = useUserInfo() + const {userInfos} = storeToRefs(userInfo); + + const state = reactive<stateType>({ + pageIndex: 1, + pageSize: 10, + totalSize: 0, + chosenIndex: null, + searchWord: '', + tableData: [], + multipleSelection: [], + dialogDetails: false, + dialogAddRecord: false, + deleteDialog: false, + addRecord: { + name: '', + startTime: '', + endTime: '', + info: '' + }, + details: { + name: '', + startTime: '', + endTime: '', + info: '' + }, + deleteId: null, + deleteArr: [] + }) + interface User { + name: string, + startTime: string, + endTime: string, + info: string + } + 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) }) + } else { + multipleTableRef.value!.clearSelection() + } + } + // 多选 + const handleSelectionChange = (val: User[]) => { + state.multipleSelection = JSON.parse(JSON.stringify(val)) + state.deleteArr = state.multipleSelection.map((item)=>{ + item = item.id + return item + }) + } + + const addRef = ref<FormInstance>() + const addRules = reactive<FormRules>({ + name: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + endTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}] + }) + + // 页面载入时执行方法 + onMounted(() => { + // getWorkTimePeriod() + getListByPage() + }) + + // 获取工作时段列表 + const getWorkTimePeriod = async () => { + let res = await workingHoursApi().getWorkTimePeriod({name: state.searchWord}); + if (res.data.code === '200') { + state.tableData = res.data.data.map((item)=>{ + item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString()) + item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString()) + item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString()) + item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString()) + item.startTime = item.startHour + ':' + item.startMin + item.endTime = item.endHour + ':' + item.endMin + return item + }) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); } - const closeAdd =()=>{ - addRecord.value={} - chosenIndex.value = -1 + } + + // 分页获取工作时段列表 + const getListByPage = async ()=>{ + const data = {pageSize: state.pageSize,pageIndex: state.pageIndex,searchParams:{name: state.searchWord}} + let res = await workingHoursApi().postPeriodPage(data); + if (res.data.code === '200') { + state.tableData = res.data.data.map((item)=>{ + item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString()) + item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString()) + item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString()) + item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString()) + item.startTime = item.startHour + ':' + item.startMin + item.endTime = item.endHour + ':' + item.endMin + return item + }) + state.totalSize = res.data.total + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); } - const indexClear = ()=>{ - chosenIndex.value = -1 + } + + // 关键词查询记录 + const searchRecord = async()=>{ + if(state.searchWord==''){ + ElMessage({ + type: 'warning', + message: '请输入查询关键词' + }); + }else{ + getListByPage() } - const editRecord =(index, row)=>{ - dialogAddRecord.value = true - chosenIndex.value = index - addRecord.value = JSON.parse(JSON.stringify(row)) - addRecord.value.startTime = addRecord.value.range.substring(0,5) - addRecord.value.endTime = addRecord.value.range.substring(8) + } + + const clearSearch = async()=>{ + state.searchWord='' + getListByPage() + } + + // 添加工作时段 + const addWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().postWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); } - // 折线图 - 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 editWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().updateWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + // 删除工作时段 + const deleteWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().deletWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + const deleteRecord = (row) => { + state.deleteId = row.id + state.deleteDialog = true + } + + const conFirmDelete = () => { + deleteWorkTimePeriod({ id: state.deleteId }) + state.deleteDialog = false + } + + // 批量删除 + const deleteWorkTimePeriods = async () => { + if(state.deleteArr.length>0){ + console.log(state.deleteArr) + let res = await workingHoursApi().deleteBatchWorkTimePeriod({ids: state.deleteArr}); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }else{ + ElMessage({ + type: 'warning', + message: '请先选择要删除的记录' + }); + } + } + + const handleSizeChange = (val: number) => { + state.pageSize = val + getListByPage() + } + const handleCurrentChange = (val: number) => { + state.pageIndex = val + getListByPage() + } + + // 查看记录 + const viewRecord = (row) => { + state.details = row + state.dialogDetails = true + } + + // 刷新 + const reLoadData = async () =>{ + getListByPage() + } + const editRecord = (index, row) => { + state.dialogAddRecord = true + state.chosenIndex = index + state.addRecord = JSON.parse(JSON.stringify(row)) + } + + // 新增修改记录 + const confirmAddRecord = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate(async (valid, fields) => { + if (valid) { + const data = { + name: state.addRecord.name, + info: state.addRecord.info, + startHour: Number(state.addRecord.startTime.substring(0, 2)), + startMin: Number(state.addRecord.startTime.substring(3)), + endHour: Number(state.addRecord.endTime.substring(0, 2)), + endMin: Number(state.addRecord.endTime.substring(3)) + } + if (state.chosenIndex == null) { + // if (state.addRecord.startTime >= state.addRecord.endTime) { + // state.addRecord.endTime = '次日' + state.addRecord.endTime + // } + // state.tableData.unshift(data) + await addWorkTimePeriod(data) + } else { + // if (state.addRecord.startTime >= state.addRecord.endTime) { + // state.addRecord.endTime = '次日' + state.addRecord.endTime + // } + // state.tableData[state.chosenIndex] = state.addRecord + data.id = state.addRecord.id, + await editWorkTimePeriod(data) + } + state.dialogAddRecord = false + } else { + console.log('error submit!', fields) + } + }) + + } + const closeAdd = () => { + state.addRecord = {} + state.chosenIndex = null + } + const openAdd = () => { + if (state.chosenIndex == null) { + state.addRecord.info = '' + } + } + const indexClear = () => { + state.deleteId = null + } + + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId', value) + userInfos.value.projectId = value + await initBackEndControlRoutes(); + }; + return { + addRef, + addRules, + View, + Edit, + Delete, + Refresh, + Plus, + toggleSelection, + handleSelectionChange, + deleteWorkTimePeriods, + searchRecord, + clearSearch, + viewRecord, + deleteRecord, + conFirmDelete, + getWorkTimePeriod, + getListByPage, + reLoadData, + deleteWorkTimePeriod, + handleSizeChange, + handleCurrentChange, + confirmAddRecord, + closeAdd, + openAdd, + indexClear, + editRecord, + ...toRefs(state) + }; + } + } </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; @@ -303,37 +574,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; } } } diff --git a/src/views/basicRightsManagement/personnelShiftManagement/workingHoursSet/index.vue b/src/views/basicRightsManagement/personnelShiftManagement/workingHoursSet/index.vue new file mode 100644 index 0000000..31dc29b --- /dev/null +++ b/src/views/basicRightsManagement/personnelShiftManagement/workingHoursSet/index.vue @@ -0,0 +1,573 @@ +<template> + <div class="home-container"> + <div style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="8"> + <div class="grid-content topInfo"> + <el-input v-model="searchWord" placeholder="工作时段名称"></el-input> + <el-button type="primary" @click="searchRecord">查询</el-button> + <el-button plain @click="clearSearch">重置</el-button> + </div> + </el-col> + </el-row> + <div class="homeCard"> + <div class="main-card"> + <el-row class="cardTop"> + <el-col :span="12" class="mainCardBtn"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button> +<!-- <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>--> + <el-button type="danger" :icon="Delete" size="default" plain @click="deleteWorkTimePeriods">删除</el-button> + </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-column type="selection" width="100" /> + <el-table-column property="name" label="工作时间组名称"/> + <el-table-column property="timeRange" label="关联工作时段"/> + <el-table-column property="info" label="描述信息"/> + <el-table-column fixed="right" label="操作" align="center" width="250"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> + <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.row)">删除</el-button> + </template> + </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" + /> + </div> + </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-form-item> + <el-form-item label="关联工作时段"> + <el-input + v-model="details.timeRange" + readonly + /> + </el-form-item> + <el-form-item label="描述信息"> + <el-input + v-model="details.info" + readonly + /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <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-form-item> + <el-form-item label="关联工作时段" prop="timeRange"> + <el-select v-model="addRecord.timeRange" multiple placeholder="请选择"> + <el-option v-for="(item,index) in timeList" :key="index" :label="item.name" :value="item.name" /> + </el-select> + </el-form-item> + <el-form-item label="描述信息" prop="info"> + <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> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> + <span>您确定要删除该条记录吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script lang="ts"> + import { toRefs, reactive, ref, onMounted } from 'vue'; + import { storeToRefs } from 'pinia'; + import { initBackEndControlRoutes } from '/@/router/backEnd'; + 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 { workingHoursApi } from '/@/api/basicDateManage/personShiftManage/workingHoursSet'; + + + + // 定义接口来定义对象的类型 + interface stateType { + tableData: Array<string>, + multipleSelection: Array<any>, + deleteArr: Array<any>, + timeList: Array<any>, + dialogDetails: boolean, + dialogAddRecord: boolean, + deleteDialog: boolean, + pageIndex: number, + chosenIndex: any, + deleteId: any, + pageSize: number, + searchWord: string, + totalSize: number, + addRecord: { + name: string, + timeRange: Array<any>, + info: string, + startTime: string, + endTime: string + }, + details: { + name: string, + timeRange: Array<any>, + info: string + } + } + + export default { + name: 'workingHoursSet', + components:{}, + setup() { + const userInfo = useUserInfo() + const {userInfos} = storeToRefs(userInfo); + + const state = reactive<stateType>({ + pageIndex: 1, + pageSize: 10, + totalSize: 0, + chosenIndex: null, + searchWord: '', + tableData: [], + timeList: [], + multipleSelection: [], + dialogDetails: false, + dialogAddRecord: false, + deleteDialog: false, + addRecord: { + name: '', + timeRange: [], + info: '', + startTime: '', + endTime: '' + }, + details: { + name: '', + timeRange: [], + info: '' + }, + deleteId: null, + deleteArr: [] + }) + interface User { + name: string, + timeRange: [], + info: string + } + 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) + }) + } else { + multipleTableRef.value!.clearSelection() + } + } + + // 多选 + const handleSelectionChange = (val: User[]) => { + state.multipleSelection = JSON.parse(JSON.stringify(val)) + state.deleteArr = state.multipleSelection.map((item)=>{ + item = item.id + return item + }) + } + + const addRef = ref<FormInstance>() + const addRules = reactive<FormRules>({ + name: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + endTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}] + }) + + // 页面载入时执行方法 + onMounted(() => { + // getWorkTimePeriod() + getListByPage() + }) + + // 获取工作时段列表 + // const getWorkTimePeriod = async () => { + // let res = await workingHoursApi().getWorkTimePeriod({ name: state.searchWord }); + // if (res.data.code === '200') { + // state.tableData = res.data.data.map((item)=>{ + // item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString()) + // item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString()) + // item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString()) + // item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString()) + // item.startTime = item.startHour + ':' + item.startMin + // item.endTime = item.endHour + ':' + item.endMin + // return item + // }) + // } else { + // ElMessage({ + // type: 'warning', + // message: res.data.msg + // }); + // } + // } + + // 分页获取工作时段列表 + const getListByPage = async ()=>{ + const data = {pageSize: state.pageSize,pageIndex: state.pageIndex,searchParams:{name: state.searchWord}} + let res = await workingHoursApi().postPeriodPage(data); + if (res.data.code === '200') { + state.tableData = res.data.data.map((item)=>{ + item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString()) + item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString()) + item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString()) + item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString()) + item.startTime = item.startHour + ':' + item.startMin + item.endTime = item.endHour + ':' + item.endMin + return item + }) + state.totalSize = res.data.total + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + // 关键词查询记录 + const searchRecord = async()=>{ + if(state.searchWord==''){ + ElMessage({ + type: 'warning', + message: '请输入查询关键词' + }); + }else{ + getListByPage() + } + } + + const clearSearch = async()=>{ + state.searchWord='' + getListByPage() + } + + // 添加工作时段 + const addWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().postWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 修改工作时段 + const editWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().updateWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + // 删除工作时段 + const deleteWorkTimePeriod = async (data:any) => { + let res = await workingHoursApi().deletWorkTimePeriod(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + + const deleteRecord = (row) => { + state.deleteId = row.id + state.deleteDialog = true + } + + const conFirmDelete = () => { + deleteWorkTimePeriod({ id: state.deleteId }) + state.deleteDialog = false + } + + // 批量删除 + const deleteWorkTimePeriods = async () => { + if(state.deleteArr.length>0){ + console.log(state.deleteArr) + let res = await workingHoursApi().deleteBatchWorkTimePeriod({ids: state.deleteArr}); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }else{ + ElMessage({ + type: 'warning', + message: '请先选择要删除的记录' + }); + } + } + + const handleSizeChange = (val: number) => { + state.pageSize = val + getListByPage() + } + const handleCurrentChange = (val: number) => { + state.pageIndex = val + getListByPage() + } + + // 查看记录 + const viewRecord = (row) => { + state.details = row + state.dialogDetails = true + } + + // 刷新 + const reLoadData = async () =>{ + getListByPage() + } + const editRecord = (index, row) => { + state.dialogAddRecord = true + state.chosenIndex = index + state.addRecord = JSON.parse(JSON.stringify(row)) + } + + // 新增修改记录 + const confirmAddRecord = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate(async (valid, fields) => { + if (valid) { + const data = { + name: state.addRecord.name, + info: state.addRecord.info, + startHour: Number(state.addRecord.startTime.substring(0, 2)), + startMin: Number(state.addRecord.startTime.substring(3)), + endHour: Number(state.addRecord.endTime.substring(0, 2)), + endMin: Number(state.addRecord.endTime.substring(3)) + } + if (state.chosenIndex == null) { + // if (state.addRecord.startTime >= state.addRecord.endTime) { + // state.addRecord.endTime = '次日' + state.addRecord.endTime + // } + // state.tableData.unshift(data) + await addWorkTimePeriod(data) + } else { + // if (state.addRecord.startTime >= state.addRecord.endTime) { + // state.addRecord.endTime = '次日' + state.addRecord.endTime + // } + // state.tableData[state.chosenIndex] = state.addRecord + data.id = state.addRecord.id, + await editWorkTimePeriod(data) + } + state.dialogAddRecord = false + } else { + console.log('error submit!', fields) + } + }) + + } + const closeAdd = () => { + state.addRecord = {} + state.chosenIndex = null + } + const openAdd = () => { + if (state.chosenIndex == null) { + state.addRecord.info = '' + } + } + const indexClear = () => { + state.deleteId = null + } + + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId', value) + userInfos.value.projectId = value + await initBackEndControlRoutes(); + }; + return { + addRef, + addRules, + View, + Edit, + Delete, + Refresh, + Plus, + toggleSelection, + handleSelectionChange, + deleteWorkTimePeriods, + searchRecord, + clearSearch, + viewRecord, + deleteRecord, + conFirmDelete, + getListByPage, + reLoadData, + deleteWorkTimePeriod, + handleSizeChange, + handleCurrentChange, + confirmAddRecord, + closeAdd, + openAdd, + indexClear, + editRecord, + ...toRefs(state) + }; + } + } +</script> + +<style scoped lang="scss"> + $homeNavLengh: 8; + .home-container { + 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; + align-items: center; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content{ + align-items: center; + min-height: 36px; + } + + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + &>div{ + white-space: nowrap; + margin-right: 20px; + } + } + } + } + .el-input{ + width: 100% !important; + } + .el-date-editor::v-deep{ + width: 100%; + } + .el-select{ + width: 100%; + } +</style> diff --git a/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue b/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue index fe95193..3af583a 100644 --- a/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue +++ b/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue @@ -1,11 +1,953 @@ <template> - <div>1235</div> + <div class="home-container"> + <div style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="12"> + <div class="grid-content topInfo"> + <el-select v-model="searchType" @change="changeSearch" placeholder="任务名称"> + <el-option label="巡检任务类型" value="巡检任务类型" /> + <el-option label="创建人" value="创建人" /> + <el-option label="巡检班组" value="巡检班组" /> + <el-option label="检查频次" value="检查频次" /> + <el-option label="开始时间" value="开始时间" /> + </el-select> + <el-input v-model="searchContent" v-if="searchType == '任务名称'" placeholder="请输入任务名称"></el-input> + <el-input + v-else-if="searchType == '检查频次'" + v-model="searchContent" + placeholder="请输入检查频次" + > + <template #append> + <el-select v-model="searchUnit" placeholder="选择单位"> + <el-option label="分钟" value="分钟" /> + <el-option label="小时" value="小时" /> + <el-option label="天" value="天" /> + </el-select> + </template> + </el-input> + <el-select v-model="searchContent" v-else-if="searchType == '巡检任务类型'" placeholder="请选择任务类型"> + <el-option v-for="(item,index) in typeOptions" :label="item.name" :value="item.value" :key="index"/> + </el-select> + <el-select v-model="searchContent" v-else-if="searchType == '创建人'" placeholder="请选择创建人"> + <el-option v-for="(item,index) in createrOptions" :label="item.name" :value="item.value" :key="index"/> + </el-select> + <el-select v-model="searchContent" v-else-if="searchType == '巡检班组'" placeholder="请选择巡检班组"> + <el-option v-for="(item,index) in inspectorOptions" :label="item.name" :value="item.value" :key="index"/> + </el-select> + <el-date-picker + v-model="searchContent" + type="date" + v-else + :placeholder="'请选择' + searchType" + size="large" + style="margin-right: 20px" + /> + <el-button type="primary">查询</el-button> + <el-button plain>重置</el-button> + </div> + </el-col> + </el-row> + <div class="homeCard"> + <div class="main-card"> + <el-row class="cardTop"> + <el-col :span="12" class="mainCardBtn"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button> + <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button> + </el-col> + <el-button type="primary" :icon="Refresh" size="default"/> + </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-column type="selection" width="55" /> + <el-table-column property="name" label="任务名称" width="200"/> + <el-table-column property="type" label="任务类型"/> + <el-table-column property="execClassgroup" label="巡检班组"/> + <el-table-column property="frequency" label="检查频次"/> + <el-table-column property="unit" label="频次单位"/> + <el-table-column property="chainLength" label="巡检链长度" width="160"/> + <el-table-column property="startTime" label="任务开始时间" width="180"/> +<!-- <el-table-column property="validTime" label="任务有效时间" width="180"/>--> + <el-table-column property="creater" label="创建人"/> + <el-table-column property="createTime" label="创建时间" width="180"/> + <el-table-column property="status" label="状态" width="60"/> + <el-table-column fixed="right" label="操作" align="center" width="300"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> + <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button> + <el-switch + v-model="scope.row.status" + inline-prompt + active-text="开" + inactive-text="关" + active-value="开启" + inactive-value="关闭" + style="margin: 0 10px" + /> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button> + </template> + </el-table-column> + </el-table> + <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> + </div> + + <el-dialog v-model="dialogDetails" title="巡检任务"> + <el-form :model="details" label-width="120px"> + <el-row> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务名称"> + <el-input + v-model="details.name" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务类型"> + <el-input + v-model="details.type" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="巡检部门"> + <el-input + v-model="details.execDepId" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="巡检班组"> + <el-input + v-model="details.execClassgroup" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="检查频次" prop="frequency"> + <el-input + v-model="details.frequency" + readonly + > + <template #append> + <el-input + v-model="details.unit" + readonly + /> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="提前通知时间"> + <el-input + v-model="details.noticeTime" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务开始时间"> + <el-input + v-model="details.startTime" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="周期有效时间"> + <el-input + v-model="details.validTime" + readonly + /> + </el-form-item> + </el-col> + <el-col :span="24" style="margin-bottom: 20px"> + <el-form-item label="巡检链"> + <div style="width: 100%;margin-left: -30px"> + <div v-for="(item,index) in details.shiftSteps" class="stepItem"> + <div class="stepNum">{{index+1}}</div> + <div class="stepCard"> + <el-card class="box-card"> + <template #header> + <div class="card-header"> + <div>{{item.pointId}}</div> + </div> + </template> + <div class="text item">所属设备区域:<span>{{item.regionUuid}}</span></div> + <div class="text item">关联RFID:<span>{{item.rfidId}}</span></div> + <div class="text item">巡检指标:<span>{{item.quotaId}}</span></div> + <div class="text item">数据填报类型:<span>{{item.dataReportType}}</span></div> + <div class="text item">数据参考值:<span>{{item.firstReferenceValue?item.firstReferenceValue:(item.secondReferenceValue?item.secondReferenceValue:item.thirdReferenceValue)}}</span></div> + </el-card> + </div> + </div> + </div> + </el-form-item> + </el-col> + <el-form-item> + <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> + </el-form-item> + </el-row> + </el-form> + </el-dialog> + + <el-dialog v-model="dialogAddRecord" title="巡检任务编辑" @close="closeAdd" @open="openAdd"> + <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules"> + <el-row> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务名称" prop="name"> + <el-input + v-model="addRecord.name" + > + </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务类型" prop="type"> + <el-select v-model="addRecord.type"> + <el-option label="日常检查" value="日常检查" /> + <el-option label="周期检查" value="周期检查" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="巡检部门" prop="validTime"> + <el-select v-model="addRecord.execDepId" placeholder="请选择"> + <el-option label="部门一" value="部门一" /> + <el-option label="部门二" value="部门二" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="巡检班组" prop="execClassgroupId"> + <el-select v-model="addRecord.execClassgroup" placeholder="请选择"> + <el-option label="班组1" value="班组1" /> + <el-option label="班组2" value="班组2" /> + <el-option label="班组3" value="班组3" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="检查频次" prop="frequency"> + <el-input + v-model="addRecord.frequency" + placeholder="请输入检查频次" + > + <template #append> + <el-select v-model="addRecord.unit" placeholder="选择单位"> + <el-option label="分钟" value="分钟" /> + <el-option label="小时" value="小时" /> + <el-option label="天" value="天" /> + </el-select> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="提前通知时间" prop="noticeTime"> + <el-select v-model="addRecord.noticeTime" placeholder="选择时间"> + <el-option label="15分钟" value="15分钟" /> + <el-option label="30分钟" value="30分钟" /> + <el-option label="45分钟" value="45分钟" /> + <el-option label="60分钟" value="60分钟" /> + <el-option label="75分钟" value="75分钟" /> + <el-option label="90分钟" value="90分钟" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="周期开始时间" prop="startTime"> + <el-date-picker + v-model="addRecord.startTime" + type="datetime" + format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" + /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务有效时间" prop="validTime"> + <el-select v-model="addRecord.validTime" placeholder="选择时间"> + <el-option label="15分钟" value="15分钟" /> + <el-option label="30分钟" value="30分钟" /> + <el-option label="45分钟" value="45分钟" /> + <el-option label="60分钟" value="60分钟" /> + <el-option label="75分钟" value="75分钟" /> + <el-option label="90分钟" value="90分钟" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="创建巡检链"> + <div style="width: 100%;margin-bottom: 20px"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogAddShift = true">新增巡检点</el-button> + </div> + <div style="width: 100%;margin-left: -30px"> + <div v-for="(item,index) in addRecord.shiftSteps" class="stepItem"> + <div class="stepNum">{{index+1}}</div> + <div class="stepCard"> + <el-card class="box-card"> + <template #header> + <div class="card-header"> + <div>{{item.pointId}}</div> + </div> + </template> + <div class="text item">所属设备区域:<span>{{item.regionUuid}}</span></div> + <div class="text item">关联RFID:<span>{{item.rfidId}}</span></div> + <div class="text item">巡检指标:<span>{{item.quotaId}}</span></div> + <div class="text item">数据填报类型:<span>{{item.dataReportType}}</span></div> + <div class="text item">数据参考值:<span>{{item.firstReferenceValue?item.firstReferenceValue:(item.secondReferenceValue?item.secondReferenceValue:item.thirdReferenceValue)}}</span></div> + </el-card> + </div> + <div> +<!-- <el-button type="primary" size="default" @click="addFlow(index)">新增下一区域</el-button>--> + <el-button type="primary" size="default" @click="editFlow(index)">修改</el-button> + <el-button type="danger" size="default" @click="deleteFlow(index)">删除</el-button> + </div> + </div> + </div> + </el-form-item> + </el-col> + </el-row> + <el-form-item> + <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> + <span>您确定要删除该条记录吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> + <el-dialog v-model="deleteShiftDialog" title="提示" width="30%" center @close="indexShiftClear"> + <span>您确定要删除该巡检点吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteShiftDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmShiftDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> + <el-dialog v-model="dialogAddShift" title="新增巡检点" @close="closeAddShift"> + <el-form :model="addShift" label-width="120px" ref="addShiftRef" :rules="addShiftRules"> + <el-form-item label="选择巡检点" prop="pointId"> + <el-select v-model="addShift.pointId"> + <el-option label="73011" value="73011" /> + <el-option label="73012" value="73012" /> + </el-select> + </el-form-item> + <el-form-item label="所属设备区域"> + <el-input + v-model="addShift.regionId" + readonly + /> + </el-form-item> + <el-form-item label="关联RFID"> + <el-input + v-model="addShift.rfidId" + readonly + /> + </el-form-item> + <el-form-item label="选择巡检指标" prop="quotaId"> + <el-input v-model="addShift.quotaId" placeholder="Please input"> + <template #append>{{addShift.quotaUnit}}</template> + </el-input> + </el-form-item> + <el-form-item label="数据填报类型" prop="dataReportType"> + <el-select v-model="addShift.dataReportType"> + <el-option label="选择" value="选择" /> + <el-option label="填空" value="填空" /> + <el-option label="选择并填空" value="选择并填空" /> + </el-select> + </el-form-item> + <el-form-item v-if="addShift.dataReportType == '选择' || addShift.dataReportType == '选择并填空'" label="数据参考值" prop="firstReferenceValue"> + <el-select v-model="addShift.firstReferenceValue"> + <el-option label="正常" value="正常" /> + <el-option label="异常" value="异常" /> + </el-select> + </el-form-item> + <el-form-item v-if="addShift.dataReportType == '填空' || addShift.dataReportType == '选择并填空'" label="数据参考值"> + <el-input + v-model="addShift.secondReferenceValue" + type="number" + placeholder="请根据需求选择前方符号后再填写参考值,非必填" + > + <template #prepend> + <el-select v-model="addShift.secondReferenceSign" placeholder="Select" style="width: 115px"> + <el-option label=">" value=">" /> + <el-option label=">=" value=">=" /> + </el-select> + </template> + </el-input> + </el-form-item> + <el-form-item v-if="addShift.dataReportType == '填空' || addShift.dataReportType == '选择并填空'" label=""> + <el-input + v-model="addShift.thirdReferenceValue" + type="number" + placeholder="请根据需求选择前方符号后再填写参考值,非必填" + > + <template #prepend> + <el-select v-model="addShift.thirdReferenceSign" placeholder="Select" style="width: 115px"> + <el-option label="<" value="<"/> + <el-option label="<=" value="<="/> + </el-select> + </template> + </el-input> + </el-form-item> + <el-form-item> + <el-button type="warning" @click="dialogAddShift = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddShift(addShiftRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + </div> </template> -<script> -export default { - name: 'index' -}; +<script lang="ts"> + import { toRefs, reactive, ref } from 'vue'; + import { storeToRefs } from 'pinia'; + import { initBackEndControlRoutes } from '/@/router/backEnd'; + 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, ElMessage } from 'element-plus' + import { FormInstance, FormRules } from 'element-plus' + let global: any = { + homeChartOne: null, + homeChartTwo: null, + homeCharThree: null, + dispose: [null, '', undefined], + }; + + interface stateType { + homeOne: Array <type> + } + interface type { + + } + export default { + name: 'workingHoursSet', + components: {}, + setup() { + const userInfo = useUserInfo() + const {userInfos} = storeToRefs(userInfo); + + const state = reactive({ + searchType: '任务名称', + typeOptions: [ + { + name: '日常检查', + value: '日常检查' + }, + { + name: '周期检查', + value: '周期检查' + } + ], + createrOptions: [ + { + name: '张三', + value: '张三' + }, + { + name: '李四', + value: '李四' + } + ], + inspectorOptions: [ + { + name: '李四', + value: '李四' + }, + { + name: '张三', + value: '张三' + } + ], + searchUnit: '小时', + searchContent: '', + currentPage: 1, + pageSize: 10, + chosenIndex: null, + chosenShiftIndex: null, + chosenInspectionIndex: null, + dialogDetails: false, + dialogAddRecord: false, + deleteDialog: false, + deleteShiftDialog: false, + deleteInspectionDialog: false, + dialogAddShift: false, + tableData: [ + { + name: '甲醛装置()列现场岗位巡检', + type: '周期检查', + creater: '管理员A', + execClassgroup: '张三', + frequency: 2, + unit: '小时', + noticeTime: '2022-07-02 13:01:37', + startTime: '2022-07-02 13:01:37', + validTime: '30分钟', + createTime: '2022-07-02 12:03:47', + chainLength: 20, + status: '开启', + shiftSteps: [ + { + pointId: 73011, + regionUuid: '风机系统', + rfidId: 21054, + quotaId: '压力', + dataReportType: '选择' + }, + { + name: 'A场所', + inspectorData: [ + { + sort: 1, + name: '73021', + section: '风机系统', + rfid: '风机系统1标签', + norm: '风机声音', + reference: '10<正常<50' + }, + { + sort: 2, + name: '73022', + section: '风机系统', + rfid: '风机系统2标签', + norm: '设备温度', + reference: '20<正常<50' + }, + { + sort: 3, + name: '73023', + section: '风机系统', + rfid: '风机系统3标签', + norm: '风机震动', + reference: '30<正常<50' + } + ] + } + ] + }, + { + name: 'A车间日常巡检', + type: '日常检查', + creater: '管理员B', + execClassgroup: '李四', + frequency: 4, + unit: '小时', + noticeTime: '2022-07-02 13:01:37', + startTime: '2022-07-02 12:45:37', + validTime: '30分钟', + createTime: '2022-07-02 08:15:41', + chainLength: 15, + status: '开启' + } + ], + addRecord: { + name: '', + type: '', + creater: '', + inspector: '', + frequency: 1, + unit: '小时', + startTime: '', + validTime: '', + createTime: '', + chainLength: 0, + status: '开启', + shiftSteps: [] + }, + addShift: { + secondReferenceSign: '>', + thirdReferenceSign: '<' + }, + details: {} + }) + + // 顶部筛选搜索 + const changeSearch = () => { + state.searchContent = '' + } + + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`) + } + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`) + } + + // 时间格式化 + const timeForm = { + hour12: false, + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + } + const handleChange = (value) => { + state.addRecord.content = [] + console.log(JSON.parse(JSON.stringify(value))) + } + const addRef = ref<FormInstance>() + const addShiftRef = ref<FormInstance>() + const addInspectionRef = ref<FormInstance>() + + // 表单校验 + const addRules = reactive<FormRules>({ + name: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + type: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + execClassgroupId: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + frequency: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + unit: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + noticeTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + validTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}] + }) + const addShiftRules = reactive<FormRules>({ + pointId: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + quotaId: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + dataReportType: [{required: true, message: '该内容不能为空', trigger: 'blur'}], + firstReferenceValue: [{required: true, message: '该内容不能为空', trigger: 'blur'}] + }) + + // 查看记录 + const viewRecord = (row) => { + state.details = JSON.parse(JSON.stringify(row)) + state.dialogDetails = true + } + + // 删除记录 + const deleteRecord = (index) => { + state.chosenIndex = index + state.deleteDialog = true + } + const conFirmDelete = () => { + state.tableData.splice(state.chosenIndex, 1) + state.deleteDialog = false + } + + // 修改添加记录 + const editRecord = (index, row) => { + state.chosenIndex = index + state.dialogAddRecord = true + state.addRecord = JSON.parse(JSON.stringify(row)) + } + const confirmAddRecord = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + if (state.chosenIndex == null) { + if (!state.addRecord.shiftSteps || state.addRecord.shiftSteps.length == 0) { + ElMessage({ + message: '请先设置巡检链后再提交', + type: 'warning', + }) + return + } else { + state.addRecord.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-') + state.addRecord.chainLength = state.addRecord.shiftSteps.length + state.addRecord.status = '开启' + state.tableData.unshift(state.addRecord) + } + } else { + if (state.addRecord.shiftSteps.length == 0) { + ElMessage({ + message: '请先设置巡检链后再提交', + type: 'warning', + }) + return + } else { + state.tableData[state.chosenIndex] = state.addRecord + } + } + state.dialogAddRecord = false + } else { + console.log('error submit!', fields) + } + }) + + } + + // 添加弹窗打开前预操作 + const openAdd = () => { + state.addRecord.unit = '小时' + } + + // 弹窗关闭后判断数据初始化 + const closeAdd = () => { + state.addRecord = {} + state.chosenIndex = null + state.addShift = {} + state.chosenShiftIndex = null + } + const indexClear = () => { + state.chosenIndex = null + } + const indexShiftClear = () => { + state.chosenShiftIndex = null + } + + // 排序 + // function compare(key) { + // return function (value1, value2) { + // var val1 = value1[key]; + // var val2 = value2[key]; + // return val1 - val2; + // } + // } + + // 添加删除巡检设施区域 + // const addFlow = (index) => { + // state.dialogAddShift = true + // state.chosenShiftIndex = index + // } + + // 编辑巡检点 + const editFlow = (index) =>{ + state.chosenShiftIndex = index + state.addShift = JSON.parse(JSON.stringify(state.addRecord.shiftSteps[index])) + state.dialogAddShift = true + } + + // 删除巡检点 + const deleteFlow = (index) => { + state.deleteShiftDialog = true + state.chosenShiftIndex = index + } + const conFirmShiftDelete = () => { + state.addRecord.shiftSteps.splice(state.chosenShiftIndex, 1) + state.deleteShiftDialog = false + } + // 增加修改巡检点 + const confirmAddShift = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + if(state.chosenShiftIndex == null){ + if(!state.addRecord.shiftSteps){state.addRecord.shiftSteps = []} + state.addRecord.shiftSteps.push(state.addShift) + }else{ + state.addRecord.shiftSteps[state.chosenShiftIndex] = state.addShift + } + state.dialogAddShift = false + } else { + console.log('error submit!', fields) + } + }) + } + + const closeAddShift = () => { + state.addShift = {} + state.chosenShiftIndex = null + } + + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId', value) + userInfos.value.projectId = value + await initBackEndControlRoutes(); + }; + + return { + addRef, + addShiftRef, + addInspectionRef, + addRules, + addShiftRules, + View, + Edit, + Delete, + Refresh, + Plus, + changeSearch, + handleSizeChange, + handleCurrentChange, + handleChange, + viewRecord, + deleteRecord, + conFirmDelete, + openAdd, + editRecord, + confirmAddRecord, + closeAdd, + conFirmShiftDelete, + confirmAddShift, + closeAddShift, + editFlow, + deleteFlow, + indexClear, + indexShiftClear, + renderMenu, + ...toRefs(state) + } + } + } </script> -<style scoped></style> +<style scoped lang="scss"> + $homeNavLengh: 8; + .home-container { + 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; + align-items: center; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content{ + align-items: center; + min-height: 36px; + } + + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + &>div{ + white-space: nowrap; + margin-right: 20px; + } + } + } + } + .stepItem{ + width: 100%; + display: flex; + align-items: flex-start; + margin-bottom: 30px; + margin-left: 30px; + padding-bottom: 30px; + border-left: 2px solid #ccc; + &:first-of-type{ + margin-top: 30px; + } + &:last-of-type{ + margin-bottom: 0; + border-left: none; + } + .stepNum { + width: 30px; + height: 30px; + border-radius: 15px; + box-sizing: border-box; + color: #333; + border: 1px solid #999; + line-height: 28px; + text-align: center; + margin-right: 10px; + margin-left: -16px; + margin-top: -30px; + } + .stepCard { + width: 100%; + margin-top: -30px; + + .box-card { + width: 100%; + &:deep(.el-card__header){ + padding: 10px 15px + } + .card-header { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + &>div:first-of-type{ + margin-right: 80px; + font-size: 18px; + font-weight: bold; + } + } + } + } + &:hover .card-header{ + color: #0098F5; + } + &:hover .stepNum{ + border: 2px solid #0098F5; + color: #0098F5; + } + } + .el-input{ + width: 100% !important; + } + :deep(.el-date-editor){ + width: 100%; + } + .el-select{ + width: 100%; + } +</style> diff --git a/src/views/riskWarningSys/accidentLevel/index.vue b/src/views/riskWarningSys/accidentLevel/index.vue index a876414..0fecae2 100644 --- a/src/views/riskWarningSys/accidentLevel/index.vue +++ b/src/views/riskWarningSys/accidentLevel/index.vue @@ -1,6 +1,6 @@ <template> <div class="home-container"> - <el-scrollbar height="100%"> + <div style="height: 100%"> <div class="homeCard"> <div class="main-card"> <el-row class="cardTop"> @@ -15,6 +15,7 @@ ref="multipleTableRef" :data="tableData" style="width: 100%" + height="calc(100% - 100px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > @@ -36,22 +37,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="所属月份"> @@ -264,7 +265,7 @@ ) const addRef = ref<FormInstance>() const addRules = reactive<FormRules>({ - month:[{required: true, message: '该内容不能为空'}], + month:[{required: true, message: '该内容不能为空',trigger:'blur'}], level:[{required: true, message: '该内容不能为空',trigger:'blur'}], amount:[{required: true, message: '该内容不能为空',trigger:'blur'}], death:[{required: true, message: '该内容不能为空',trigger:'blur'}], @@ -330,14 +331,48 @@ <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; - padding: 20px; + .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: 100%; + } + } .el-row{ display: flex; @@ -361,37 +396,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; } } } diff --git a/src/views/riskWarningSys/educationAndTraining/index.vue b/src/views/riskWarningSys/educationAndTraining/index.vue index 39b1979..54ddaf0 100644 --- a/src/views/riskWarningSys/educationAndTraining/index.vue +++ b/src/views/riskWarningSys/educationAndTraining/index.vue @@ -1,6 +1,6 @@ <template> <div class="home-container"> - <el-scrollbar height="100%"> + <div style="height: 100%"> <div class="homeCard"> <div class="main-card"> <el-row class="cardTop"> @@ -15,6 +15,7 @@ ref="multipleTableRef" :data="tableData" style="width: 100%" + height="calc(100% - 100px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > @@ -33,22 +34,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="所属月份"> @@ -203,7 +204,7 @@ ) const addRef = ref<FormInstance>() const addRules = reactive<FormRules>({ - month:[{required: true, message: '该内容不能为空'}], + month:[{required: true, message: '该内容不能为空',trigger:'blur'}], level:[{required: true, message: '该内容不能为空',trigger:'blur'}], amount:[{required: true, message: '该内容不能为空',trigger:'blur'}], eduTime:[{required: true, message: '该内容不能为空',trigger:'blur'}] @@ -266,14 +267,48 @@ <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; - padding: 20px; + .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: 100%; + } + } .el-row{ display: flex; @@ -297,37 +332,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; } } } diff --git a/src/views/riskWarningSys/emergencyDrills/index.vue b/src/views/riskWarningSys/emergencyDrills/index.vue index 76722d5..d3e372d 100644 --- a/src/views/riskWarningSys/emergencyDrills/index.vue +++ b/src/views/riskWarningSys/emergencyDrills/index.vue @@ -1,6 +1,6 @@ <template> <div class="home-container"> - <el-scrollbar height="100%"> + <div style="height: 100%"> <div class="homeCard"> <div class="main-card"> <el-row class="cardTop"> @@ -15,6 +15,7 @@ ref="multipleTableRef" :data="tableData" style="width: 100%" + height="calc(100% - 100px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > @@ -33,22 +34,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="所属月份"> @@ -202,7 +203,7 @@ ) const addRef = ref<FormInstance>() const addRules = reactive<FormRules>({ - month:[{required: true, message: '该内容不能为空'}], + month:[{required: true, message: '该内容不能为空',trigger:'blur'}], level:[{required: true, message: '该内容不能为空',trigger:'blur'}], amount:[{required: true, message: '该内容不能为空',trigger:'blur'}], aftTime:[{required: true, message: '该内容不能为空',trigger:'blur'}] @@ -265,14 +266,48 @@ <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; - padding: 20px; + .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: 100%; + } + } .el-row{ display: flex; @@ -296,37 +331,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; } } } diff --git a/src/views/riskWarningSys/riskLevel/index.vue b/src/views/riskWarningSys/riskLevel/index.vue index c4cfb64..a9f8673 100644 --- a/src/views/riskWarningSys/riskLevel/index.vue +++ b/src/views/riskWarningSys/riskLevel/index.vue @@ -1,6 +1,6 @@ <template> <div class="home-container"> - <el-scrollbar height="100%"> + <div style="height: 100%"> <div class="homeCard"> <div class="main-card"> <el-row class="cardTop"> @@ -15,6 +15,7 @@ ref="multipleTableRef" :data="tableData" style="width: 100%" + height="calc(100% - 100px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > @@ -32,7 +33,6 @@ </template> </el-table-column> </el-table> - </div> <div class="pageBtn"> <el-pagination v-model:currentPage="currentPage" @@ -46,8 +46,9 @@ @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="所属月份"> @@ -178,12 +179,30 @@ level: '高风险', amount: 2, updateTime: '2022-07-26 15:55:00' + }, + { + month: '2022-07', + level: '低风险', + amount: 1, + updateTime: '2022-07-26 15:55:00' + }, + { + month: '2022-06', + level: '高风险', + amount: 2, + updateTime: '2022-07-26 15:55:00' + }, + { + month: '2022-07', + level: '低风险', + amount: 1, + updateTime: '2022-07-26 15:55:00' } ] ) const addRef = ref<FormInstance>() const addRules = reactive<FormRules>({ - month:[{required: true, message: '该内容不能为空'}], + month:[{required: true, message: '该内容不能为空',trigger:'blur'}], level:[{required: true, message: '该内容不能为空',trigger:'blur'}], amount:[{required: true, message: '该内容不能为空',trigger:'blur'}] }) @@ -245,14 +264,48 @@ <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; - padding: 20px; + .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: 100%; + } + } .el-row{ display: flex; @@ -276,37 +329,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; } } } diff --git a/src/views/specialWorkSystem/afterWorkManagement/workTicketCheck/index.vue b/src/views/specialWorkSystem/afterWorkManagement/workTicketCheck/index.vue index 35df32c..59447c5 100644 --- a/src/views/specialWorkSystem/afterWorkManagement/workTicketCheck/index.vue +++ b/src/views/specialWorkSystem/afterWorkManagement/workTicketCheck/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"> @@ -25,6 +25,7 @@ ref="multipleTableRef" :data="tableData" style="width: 100%" + height="calc(100% - 100px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > @@ -43,22 +44,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="作业证编号"> @@ -293,14 +294,45 @@ <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; - padding: 20px; .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; @@ -324,37 +356,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; } } } diff --git a/src/views/specialWorkSystem/afterWorkManagement/workTicketRecord/index.vue b/src/views/specialWorkSystem/afterWorkManagement/workTicketRecord/index.vue index 13b184e..aa99570 100644 --- a/src/views/specialWorkSystem/afterWorkManagement/workTicketRecord/index.vue +++ b/src/views/specialWorkSystem/afterWorkManagement/workTicketRecord/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="12"> <div class="grid-content topInfo"> @@ -28,6 +28,7 @@ ref="multipleTableRef" :data="tableData" style="width: 100%" + height="calc(100% - 100px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > @@ -44,22 +45,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="作业证编号"> @@ -241,14 +242,45 @@ <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; - padding: 20px; .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; @@ -272,37 +304,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; } } } diff --git a/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveLinkSetting/index.vue b/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveLinkSetting/index.vue index 5eb9a0b..242b17e 100644 --- a/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveLinkSetting/index.vue +++ b/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveLinkSetting/index.vue @@ -1,6 +1,6 @@ <template> <div class="home-container"> - <el-scrollbar height="100%"> + <div style="height: 100%"> <div class="homeCard"> <div class="main-card"> <el-row class="cardTop"> @@ -14,6 +14,7 @@ ref="multipleTableRef" :data="tableData" style="width: 100%" + height="calc(100% - 100px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > @@ -33,22 +34,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="环节名称"> @@ -264,14 +265,48 @@ <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; - padding: 20px; + .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: 100%; + } + } .el-row{ display: flex; @@ -297,40 +332,6 @@ } } } - .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; - } - } - } - .el-input{ - width: 100% !important; } .el-date-editor::v-deep{ width: 100%; diff --git a/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveTypeSetting/index.vue b/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveTypeSetting/index.vue index 3e6b942..2a146f7 100644 --- a/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveTypeSetting/index.vue +++ b/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveTypeSetting/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="审批类型名称"> @@ -258,14 +259,45 @@ <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; - padding: 20px; .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; @@ -289,37 +321,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; } } } diff --git a/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/reportTypeSetting/index.vue b/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/reportTypeSetting/index.vue index 440ed57..6eb9979 100644 --- a/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/reportTypeSetting/index.vue +++ b/src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/reportTypeSetting/index.vue @@ -1,26 +1,47 @@ <template> <div class="home-container"> - <el-scrollbar height="100%"> + <div style="height: 100%"> <div class="homeCard"> - <el-row> - <el-button type="primary" size="large" @click="addReport">新建上报类型</el-button> - </el-row> - <el-row> - <el-table :data="tableData" border style="width: 100%"> - <el-table-column type="index" label="标识" width="100"/> - <el-table-column prop="type" label="上报数据类型名称" width="180" /> - <el-table-column prop="founder" label="创建人"/> - <el-table-column prop="createTime" label="创建时间" width="180" /> - <el-table-column prop="editor" label="最新编辑人" width="180" /> - <el-table-column prop="editeTime" label="最新编辑时间" /> - <el-table-column fixed="right" label="操作" align="center" width="180"> - <template #default="scope"> - <el-button link type="primary" size="small" :icon="Edit" @click="editeRow(scope.$index,scope.row)">编辑</el-button> - <el-button link type="danger" size="small" :icon="Delete" @click="deleteRow(scope.$index)">删除</el-button> - </template> - </el-table-column> - </el-table> - </el-row> + <div class="main-card"> + <el-row class="cardTop"> + <el-col :span="12" class="mainCardBtn"> + <el-button type="primary" size="default" @click="addReport">新建上报类型</el-button> + </el-col> + </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-column type="index" label="标识" width="100"/> + <el-table-column prop="type" label="上报数据类型名称" width="180" /> + <el-table-column prop="founder" label="创建人"/> + <el-table-column prop="createTime" label="创建时间" width="180" /> + <el-table-column prop="editor" label="最新编辑人" width="180" /> + <el-table-column prop="editeTime" label="最新编辑时间" /> + <el-table-column fixed="right" label="操作" align="center" width="180"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="Edit" @click="editeRow(scope.$index,scope.row)">编辑</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRow(scope.$index)">删除</el-button> + </template> + </el-table-column> + </el-table> + <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> </div> <el-dialog v-model="dialogAddForm" title="新建上报类型" @close="dialogColse"> <el-form :model="reportForm" label-width="120px" ref="ruleFormRef" :rules="addRules"> @@ -46,7 +67,6 @@ </el-form-item> </el-form> </el-dialog> - </el-scrollbar> </div> </template> @@ -212,20 +232,72 @@ <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; - padding: 20px; + .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: 100%; + } + } .el-row{ + display: flex; + align-items: center; margin-bottom: 20px; - } - .el-row:last-child { - margin-bottom: 0; + &:last-child { + margin-bottom: 0; + } + .grid-content{ + align-items: center; + min-height: 36px; + } + + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + &>div{ + white-space: nowrap; + margin-right: 20px; + } + } } } </style> diff --git a/src/views/specialWorkSystem/approveProcessManagement/approveProcessList/index.vue b/src/views/specialWorkSystem/approveProcessManagement/approveProcessList/index.vue index 6b0615c..ecc00ac 100644 --- a/src/views/specialWorkSystem/approveProcessManagement/approveProcessList/index.vue +++ b/src/views/specialWorkSystem/approveProcessManagement/approveProcessList/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"> @@ -16,7 +16,7 @@ <el-col :span="12" class="mainCardBtn"> <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true" v-throttle>新建</el-button> <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button> - <el-button type="success" size="default">设置分类</el-button> + <el-button type="success" size="default" plain>设置分类</el-button> </el-col> <el-button type="primary" :icon="Refresh" size="default"/> </el-row> @@ -24,6 +24,7 @@ ref="multipleTableRef" :data="tableData" style="width: 100%" + height="calc(100% - 100px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > @@ -50,22 +51,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="dialogAddRecord" title="审批流程编辑" @close="closeAdd"> <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules"> <el-form-item label="流程名称" prop="name"> @@ -331,14 +332,45 @@ <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; - padding: 20px; .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; @@ -362,37 +394,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; } } } diff --git a/src/views/specialWorkSystem/workApplyManagement/myApply/index.vue b/src/views/specialWorkSystem/workApplyManagement/myApply/index.vue index 6e0a5b8..44f571a 100644 --- a/src/views/specialWorkSystem/workApplyManagement/myApply/index.vue +++ b/src/views/specialWorkSystem/workApplyManagement/myApply/index.vue @@ -2,7 +2,7 @@ <div class="home-container"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tab-pane label="申请中" name="Applying"> - <el-scrollbar height="100%"> + <div style="height: 100%"> <el-row class="homeCard"> <el-col :span="8"> <div class="grid-content topInfo"> @@ -26,11 +26,12 @@ ref="multipleTableRef" :data="applyData" style="width: 100%" + height="calc(100% - 100px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" /> - <el-table-column property="num" label="作业证编号" width="200"/> + <el-table-column type="index" label="作业证编号" width="200"/> <el-table-column property="level" label="作业证等级" width="180" sortable /> <el-table-column property="applyDate" label="申请日期" sortable /> <el-table-column property="name" label="申请人" width="180"/> @@ -47,107 +48,100 @@ </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-dialog v-model="dialogDetails" title="作业票查看"> - <el-form :model="details" label-width="120px"> - <el-form-item label="作业证编号"> - <el-input - v-model="details.num" - readonly - /> - </el-form-item> - <el-form-item label="作业证等级"> - <el-input - v-model="details.level" - readonly - /> - </el-form-item> - <el-form-item label="申请日期"> - <el-input - v-model="details.applyDate" - readonly - /> - </el-form-item> - <el-form-item label="申请人"> - <el-input - v-model="details.name" - readonly - /> - </el-form-item> - <el-form-item label="申请部门"> - <el-input - v-model="details.department" - readonly - /> - </el-form-item> - <el-form-item label="状态"> - <el-input - v-model="details.status" - readonly - /> - </el-form-item> - <el-form-item> - <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> - </el-form-item> - </el-form> - </el-dialog> - <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> - <span>您确定要删除该条记录吗?</span> - <template #footer> - <span class="dialog-footer"> - <el-button @click="deleteDialog = false" size="default">取消</el-button> - <el-button type="primary" @click="conFirmDelete" size="default" v-throttle>确认</el-button> - </span> - </template> - </el-dialog> - </el-scrollbar> + </div> + <el-dialog v-model="dialogDetails" title="作业票查看"> + <el-form :model="details" label-width="120px"> + <el-form-item label="作业证等级"> + <el-input + v-model="details.level" + readonly + /> + </el-form-item> + <el-form-item label="申请日期"> + <el-input + v-model="details.applyDate" + readonly + /> + </el-form-item> + <el-form-item label="申请人"> + <el-input + v-model="details.name" + readonly + /> + </el-form-item> + <el-form-item label="申请部门"> + <el-input + v-model="details.department" + readonly + /> + </el-form-item> + <el-form-item label="状态"> + <el-input + v-model="details.status" + readonly + /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> + <span>您确定要删除该条记录吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmDelete" size="default" v-throttle>确认</el-button> + </span> + </template> + </el-dialog> </el-tab-pane> <el-tab-pane label="已通过" name="passed"> - <el-scrollbar height="100%"> - <el-row> - <div class="homeCard"> - <el-col :span="8"> - <div class="grid-content topInfo"> - <el-input v-model="searchWord" placeholder="作业证名称"></el-input> - <el-button type="primary">查询</el-button> - <el-button plain>重置</el-button> - </div> - </el-col> - </div> + <div style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="8"> + <div class="grid-content topInfo"> + <el-input v-model="searchWord" placeholder="作业证名称"></el-input> + <el-button type="primary">查询</el-button> + <el-button plain>重置</el-button> + </div> + </el-col> </el-row> <div class="homeCard"> <div class="main-card"> <!-- <el-row class="cardTop">--> <!-- <el-col :span="12" class="mainCardBtn">--> <!-- <el-button type="primary" :icon="Plus" size="default">申请</el-button>--> - <!--<el-button type="danger" :icon="Delete" size="default">删除</el-button>--> - <!--<el-button type="success" size="default">设置分类</el-button>--> +<!-- <el-button type="danger" :icon="Delete" size="default">删除</el-button>--> +<!-- <el-button type="success" size="default">设置分类</el-button>--> <!-- </el-col>--> -<!-- <el-button type="primary" :icon="Refresh" />--> +<!-- <el-button type="primary" size="default" :icon="Refresh" />--> <!-- </el-row>--> <el-table ref="multipleTableRef" :data="passedData" style="width: 100%" + height="calc(100% - 48px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" /> - <el-table-column property="num" label="作业证编号" width="200"/> + <el-table-column type="index" label="编号" width="200"/> <el-table-column property="level" label="作业证等级" width="180" sortable /> <el-table-column property="applyDate" label="申请日期" sortable /> <el-table-column property="name" label="申请人" width="180"/> @@ -158,28 +152,28 @@ </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-tab-pane> </el-tabs> </div> </template> -<script lang="ts"> +<script lang="ts" setup> import { toRefs, reactive, defineComponent, ref } from 'vue'; import { storeToRefs } from 'pinia'; import { initBackEndControlRoutes } from '/@/router/backEnd'; @@ -209,99 +203,136 @@ department: string status: string } - export default defineComponent({ - name: 'myApply', - setup() { - const userInfo = useUserInfo() - const { userInfos } = storeToRefs(userInfo); - const state = reactive<stateType>({}); - const activeName = ref('Applying') - const handleClick = (tab: TabsPaneContext, event: Event) => { - console.log(tab, event) - } - const multipleTableRef = ref<InstanceType<typeof ElTable>>() - const multipleSelection = ref<User[]>([]) - const handleSelectionChange = (val: User[]) => { - multipleSelection.value = val - } - const currentPage = ref(1) - const pageSize = ref(10) - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`) - } - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`) - } - const applyData = reactive([ + const userInfo = useUserInfo() + const { userInfos } = storeToRefs(userInfo); + const activeName = ref('Applying') + const handleClick = (tab: TabsPaneContext, event: Event) => { + console.log(tab, event) + } + const multipleTableRef = ref<InstanceType<typeof ElTable>>() + const multipleSelection = ref<User[]>([]) + const handleSelectionChange = (val: User[]) => { + multipleSelection.value = val + } + const currentPage = ref(1) + const pageSize = ref(10) + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`) + } + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`) + } + const applyData = reactive([ + { + level: '等级一', + applyDate: '2022-07-27 14:19:33', + name: '张三', + department: '部门一', + status: '审核中' - ]) - const chosenIndex = ref(-1) - const passedData: User[] = [] - const dialogDetails = ref(false) - const details = ref({}) - const deleteDialog = ref(false) - - // 查看记录 - const viewRecord = (row) =>{ - details.value = JSON.parse(JSON.stringify(row)) - dialogDetails.value = true - } - - // 删除记录 - const applyRecord = (index) =>{ - chosenIndex.value = index - deleteDialog.value = true - } - - // 弹窗确认删除记录 - const conFirmDelete = ()=> { - applyData.splice(chosenIndex.value,1) - deleteDialog.value = false - } - // 折线图 - const renderMenu = async (value: string) => { - Session.set('projectId',value) - userInfos.value.projectId = value - await initBackEndControlRoutes(); - }; - return { - renderMenu, - multipleTableRef, - applyData, - passedData, - currentPage, - pageSize, - activeName, - handleClick, - handleSizeChange, - handleCurrentChange, - Plus, - Delete, - handleSelectionChange, - Refresh, - ...toRefs(state), - }; }, - }); + { + level: '等级一', + applyDate: '2022-07-27 14:19:33', + name: '张三', + department: '部门一', + status: '审核中' + + }, + { + level: '等级一', + applyDate: '2022-07-27 14:19:33', + name: '张三', + department: '部门一', + status: '审核中' + + } + ]) + const chosenIndex = ref(-1) + const passedData: User[] = [] + const dialogDetails = ref(false) + const details = ref({}) + const deleteDialog = ref(false) + + // 查看记录 + const viewRecord = (row) =>{ + details.value = JSON.parse(JSON.stringify(row)) + dialogDetails.value = true + } + + // 删除记录 + const deleteRecord = (index) =>{ + chosenIndex.value = index + deleteDialog.value = true + } + + // 弹窗确认删除记录 + const conFirmDelete = ()=> { + applyData.splice(chosenIndex.value,1) + deleteDialog.value = false + } + // 折线图 + 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; - padding: 20px; - .demo-tabs > .el-tabs__content { - padding: 32px; - color: #6b778c; - font-size: 32px; - font-weight: 600; + .demo-tabs{ + width: 100%; + height: 100%; + + &::v-deep(.el-tabs__content){ + height: calc(100% - 60px); + } + + .el-tab-pane{ + height: 100%; + } } .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; @@ -325,37 +356,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; } } } diff --git a/src/views/specialWorkSystem/workBasicManagementSetting/certificateFilterSetting/index.vue b/src/views/specialWorkSystem/workBasicManagementSetting/certificateFilterSetting/index.vue index 4d8d77a..91a85f7 100644 --- a/src/views/specialWorkSystem/workBasicManagementSetting/certificateFilterSetting/index.vue +++ b/src/views/specialWorkSystem/workBasicManagementSetting/certificateFilterSetting/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"> @@ -27,6 +27,7 @@ ref="multipleTableRef" :data="tableData" style="width: 100%" + height="calc(100% - 100px)" :header-cell-style="{background: '#fafafa'}" @selection-change="handleSelectionChange" > @@ -41,22 +42,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="证书名称"> @@ -134,136 +135,139 @@ 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 searchType=ref('') - const chosenIndex = ref(-1) - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`) + const userInfo = useUserInfo() + const { userInfos } = storeToRefs(userInfo); + const state = reactive<stateType>({}); + const currentPage = ref(1) + const pageSize = ref(10) + const searchType=ref('') + const chosenIndex = ref(-1) + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`) + } + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`) + } + const tableData = reactive( + [ + { + certificate: '登高作业证', + jobType: '高处作业' + }, + { + certificate: '焊接与热切割作业', + jobType: '动火作业' + }, + { + certificate: '低压电工证', + jobType: '临时用电' + }, + { + certificate: '化工自动化控制仪表作业', + jobType: '设备检修' } - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`) + ] + ) + const addRef = ref<FormInstance>() + const addRules = reactive<FormRules>({ + certificate:[{required: true, message: '该内容不能为空',trigger:'blur'}], + jobType:[{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){ + tableData.unshift(addRecord.value) + }else{ + tableData[chosenIndex.value] = addRecord.value + } + dialogAddRecord.value =false + } else { + console.log('error submit!', fields) } - const tableData = reactive( - [ - { - certificate: '登高作业证', - jobType: '高处作业' - }, - { - certificate: '焊接与热切割作业', - jobType: '动火作业' - }, - { - certificate: '低压电工证', - jobType: '临时用电' - }, - { - certificate: '化工自动化控制仪表作业', - jobType: '设备检修' - } - ] - ) - const addRef = ref<FormInstance>() - const addRules = reactive<FormRules>({ - certificate:[{required: true, message: '该内容不能为空',trigger:'blur'}], - jobType:[{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){ - tableData.unshift(addRecord.value) - }else{ - 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)) - } - // 折线图 - 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)) + } + // 折线图 + 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; - padding: 20px; .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; @@ -287,37 +291,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; } } } diff --git a/src/views/specialWorkSystem/workBasicManagementSetting/personalProtectDevices/index.vue b/src/views/specialWorkSystem/workBasicManagementSetting/personalProtectDevices/index.vue index 8a5eb25..f5eba70 100644 --- a/src/views/specialWorkSystem/workBasicManagementSetting/personalProtectDevices/index.vue +++ b/src/views/specialWorkSystem/workBasicManagementSetting/personalProtectDevices/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" > @@ -37,22 +38,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="防护用品名称"> @@ -208,14 +209,45 @@ <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: 100%; + height: calc(100vh - 114px); + box-sizing: border-box; overflow: hidden; - padding: 20px; .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; @@ -239,37 +271,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