From add68a0d028ec0e6626402aca724cc8c134c81ff Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期二, 09 八月 2022 10:31:21 +0800 Subject: [PATCH] 图标 --- src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue | 603 +++--------------------------------------------------- 1 files changed, 40 insertions(+), 563 deletions(-) diff --git a/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue b/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue index 4e37911..e6e1635 100644 --- a/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue +++ b/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue @@ -40,12 +40,12 @@ <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="primary" :icon="Plus" size="default" @click="openDialog('新增', {})">新建</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 ref="multipleTableRef" :data="tableData.inspectTaskData" 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="任务类型" /> @@ -61,7 +61,7 @@ <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-button link type="primary" size="small" :icon="Edit" @click="openDialog('修改', 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> @@ -73,305 +73,17 @@ </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> + <inspect-task-dialog ref="inspectTaskDialogRef"></inspect-task-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 { toRefs, reactive, ref, onMounted } from 'vue'; 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'; +import { inspectTaskApi } from '/@/api/intellectInspectSystem/inspectTask'; +import inspectTaskDialog from './components/inspectTaskDialog.vue'; +import InspectTask from '/@/views/intellectInspect/inspectTaskManage/inspectTask/components/inspectTaskDialog.vue'; let global: any = { homeChartOne: null, homeChartTwo: null, @@ -385,290 +97,55 @@ interface type {} export default { name: 'index', - components: {}, + components: { inspectTaskDialog }, setup() { - const userInfo = useUserInfo(); - const { userInfos } = storeToRefs(userInfo); - const state = reactive({ - searchType: '任务名称', - typeOptions: [ - { - name: '日常检查', - value: '日常检查' - }, - { - name: '周期检查', - value: '周期检查' + tableData: { + inspectTaskData: [], + total: 0, + loading: false, + params: { + pageIndex: 1, + pageSize: 10, + unitName: null, + workType: null, + createUserId: null, + execClassgroupId: null, + checkCycle: null, + checkCycleUnit: null } - ], - 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: [], - addRecord: { - name: '', - type: '', - creater: '', - inspector: '', - frequency: 1, - unit: '小时', - startTime: '', - validTime: '', - createTime: '', - chainLength: 0, - status: '开启', - shiftSteps: [] - }, - addShift: { - secondReferenceSign: '>', - thirdReferenceSign: '<' - }, - details: {} + } }); //获取巡检任务数据 - const getInspectionTask = () => {}; - - // 顶部筛选搜索 - const changeSearch = () => { - state.searchContent = ''; + const getInspectionTask = async () => { + let res = await inspectTaskApi().getInspectTaskList(state.tableData.params); + if (res.data.code === '200') { + state.tableData.inspectTaskData = res.data.data; + state.tableData.total = res.data.count; + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } }; - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); - }; - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); - }; + const openDialog = () => {}; - // 时间格式化 - 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' }] + // 页面加载时 + onMounted(() => { + getInspectionTask(); }); - 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; - }; 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, + openDialog, + getInspectionTask, ...toRefs(state) }; } -- Gitblit v1.9.2