From 3e26b9d02f44b33d03b1a9cddcdaf5cadab13143 Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期二, 19 七月 2022 18:30:11 +0800 Subject: [PATCH] 添加修改页面 --- src/views/basicRightsManagement/personnelShiftManagement/shiftManagement/index.vue | 8 src/router/route.ts | 16 src/views/IntelligentXjSys/inspectionTaskManagement/inspectionTask/index.vue | 828 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 840 insertions(+), 12 deletions(-) diff --git a/src/router/route.ts b/src/router/route.ts index a761c86..bc7dd8a 100644 --- a/src/router/route.ts +++ b/src/router/route.ts @@ -243,14 +243,6 @@ }, }, { - path: '/inspectionTaskSys', - name: 'inspectionTaskSys', - component: () => import('/@/views/IntelligentXjSys/inspectionTaskSys/index.vue'), - meta: { - title: '巡检任务管理' - }, - }, - { path: '/workingHours', name: 'workingHours', component: () => import('/@/views/basicRightsManagement/personnelShiftManagement/workingHours/index.vue'), @@ -289,5 +281,13 @@ meta: { title: '排班方案管理' }, + }, + { + path: '/inspectionTask', + name: 'inspectionTask', + component: () => import('/@/views/IntelligentXjSys/inspectionTaskManagement/inspectionTask/index.vue'), + meta: { + title: '巡检任务' + }, } ]; diff --git a/src/views/IntelligentXjSys/inspectionTaskManagement/inspectionTask/index.vue b/src/views/IntelligentXjSys/inspectionTaskManagement/inspectionTask/index.vue new file mode 100644 index 0000000..156c37e --- /dev/null +++ b/src/views/IntelligentXjSys/inspectionTaskManagement/inspectionTask/index.vue @@ -0,0 +1,828 @@ +<template> + <div class="home-container"> + <el-scrollbar height="100%"> + <el-row class="homeCard"> + <el-col :span="12"> + <div class="grid-content topInfo"> + <el-select v-model="searchType" @change="changeSearch"> + <el-option label="任务名称" value="任务名称" /> + <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%" + :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> + <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> + </el-scrollbar> + <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="JSON.parse(JSON.stringify(details.type)) == '循环班'"> + <div> + <div v-for="(item,index) in details.shiftSteps" class="stepItem"> + <div class="stepNum">{{index+1}}</div> + <div class="stepCard"> + <el-card class="box-card" shadow="hover"> + <template #header> + <div class="card-header"> + <div>第<span>{{index+1}}</span>班</div> + </div> + </template> + <div class="text item">排班名称:<span>{{item.name}}</span></div> + <div class="text item">工作天数:<span>{{item.days}}</span></div> + <div class="text item">休息天数:<span>{{item.rest}}</span></div> + <div class="text item">工作时段:<span>{{item.timeRange}}</span></div> + </el-card> + </div> + </div> + </div> + </el-form-item> + <el-form-item label="工作时段" prop="timeRange" v-if="JSON.parse(JSON.stringify(details.type)) == '固定班'"> + <el-input + v-model="details.timeRange" + 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-select v-model="addRecord.type"> + <el-option label="日常检查" value="日常检查" /> + <el-option label="周期检查" value="周期检查" /> + </el-select> + </el-form-item> + <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-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-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-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-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" shadow="hover"> + <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> + <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" sortable 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="80"> + <template #default="scope"> + <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-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="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="sort"> + <el-input-number v-model="addInspection.sort" :min="1" :max="999" placeholder="请输入用于确定该巡检点位置的序号"/> + </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" setup> + 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 { + + } + const userInfo = useUserInfo() + 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( + [ + { + 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: '开启' + } + ] + ) + const handleChange = (value) => { + addRecord.value.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'}], + 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 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.shiftSteps || addRecord.value.shiftSteps.length == 0){ + ElMessage({ + message: '请先设置自定义排班后再提交', + 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.push(addRecord.value) + } + }else{ + if(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 openAdd =()=>{ + addRecord.value.unit = '小时' + } + const closeAdd =()=>{ + addRecord.value={} + chosenIndex.value = -1 + addShift.value={} + chosenShiftIndex.value = -1 + } + const indexClear = ()=>{ + chosenIndex.value = -1 + } + const indexShiftClear = ()=>{ + chosenShiftIndex.value = -1 + } + const indexInspectionClear = ()=>{ + chosenInspectionIndex.value = -1 + chosenShiftIndex.value = -1 + } + const editRecord =(index, row)=>{ + dialogAddRecord.value = true + chosenIndex.value = index + addRecord.value = JSON.parse(JSON.stringify(row)) + } + + // 排序 + 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 + } + 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 addSysInspection =(index)=>{ + dialogAddInspection.value = true + chosenShiftIndex.value = index + } + const confirmAddInspection = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + if(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{ + addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData = [] + addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.unshift(addInspection.value) + addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.sort(compare('sort')) + } + dialogAddInspection.value = false + } else { + console.log('error submit!', fields) + } + }) + } + const deleteInspection = (i,index) =>{ + chosenShiftIndex.value = i + chosenInspectionIndex.value = index + deleteInspectionDialog.value = true + console.log(chosenShiftIndex.value,chosenInspectionIndex.value) + } + const conFirmInspectionDelete=()=>{ + addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.splice( chosenInspectionIndex.value,1) + deleteInspectionDialog.value = false + } + + const closeAddShift =()=>{ + addShift.value={} + chosenShiftIndex.value = -1 + } + const closeAddInspection =()=>{ + addInspection.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%; + overflow: hidden; + padding: 20px; + .homeCard{ + width: 100%; + padding: 20px; + background: #fff; + border-radius: 4px; + } + .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; + } + } + } + .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; + } + } + } + .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/basicRightsManagement/personnelShiftManagement/shiftManagement/index.vue b/src/views/basicRightsManagement/personnelShiftManagement/shiftManagement/index.vue index 45e4a65..4fa92bd 100644 --- a/src/views/basicRightsManagement/personnelShiftManagement/shiftManagement/index.vue +++ b/src/views/basicRightsManagement/personnelShiftManagement/shiftManagement/index.vue @@ -114,8 +114,8 @@ </el-select> </el-form-item> <el-form-item label="自定义循环班" v-if="addRecord.type && JSON.parse(JSON.stringify(addRecord.type)) == '循环班'"> - <div v-if="!addRecord.shiftSteps || addRecord.shiftSteps.length == 0"> - <el-button type="primary" size="default" @click="dialogAddShift = true">新增排班</el-button> + <div style="width: 100%;margin-bottom: 20px"> + <el-button type="primary" size="default" :icon="Plus" @click="dialogAddShift = true">新增排班</el-button> </div> <div> <div v-for="(item,index) in addRecord.shiftSteps" class="stepItem"> @@ -391,7 +391,7 @@ addRecord.value.shiftSteps.splice(chosenShiftIndex.value+1,0,addShift.value) }else{ addRecord.value.shiftSteps = [] - addRecord.value.shiftSteps.push(addShift.value) + addRecord.value.shiftSteps.unshift(addShift.value) } dialogAddShift.value = false } else { @@ -552,7 +552,7 @@ } span{ font-weight: bold; - margin-left: 10px; + margin: 0 10px; } } } -- Gitblit v1.9.2