| | |
| | | <el-form ref="formRef" :model="form" :rules="rules" label-width="120px"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="设备名称" prop="taskId"> |
| | | <el-select v-model="form.taskId" @change="setDeviceModel"> |
| | | <el-option |
| | | v-for="(item, index) in deviceOptions" |
| | | :key="index" |
| | | :label="item.deviceName" |
| | | :value="item.id" |
| | | ></el-option> |
| | | </el-select> |
| | | <el-form-item label="设备名称" prop="taskName"> |
| | | <div style="display: flex; gap: 8px; width: 100%"> |
| | | <el-input v-model="form.taskName" placeholder="请选择设备" readonly style="flex: 1" /> |
| | | <el-button @click="openDeviceDialog">选择设备</el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <!-- 选择巡检设备弹窗 --> |
| | | <el-dialog v-model="deviceDialogVisible" title="选择巡检设备" width="760px" draggable append-to-body> |
| | | <div class="device-select-wrap"> |
| | | <div class="device-select-tree"> |
| | | <div class="all-device-node" |
| | | :class="{ active: deviceAreaId === null }" |
| | | @click="selectAllDevice"> |
| | | 全部设备 |
| | | </div> |
| | | <el-tree |
| | | ref="deviceAreaTreeRef" |
| | | v-loading="deviceAreaLoading" |
| | | :data="areaTree" |
| | | node-key="id" |
| | | :props="{ label: 'label', children: 'children' }" |
| | | default-expand-all |
| | | :expand-on-click-node="false" |
| | | highlight-current |
| | | :current-node-key="deviceAreaId" |
| | | @node-click="onDeviceAreaClick" |
| | | /> |
| | | </div> |
| | | <div class="device-select-list"> |
| | | <el-table |
| | | :data="deviceList" |
| | | v-loading="deviceListLoading" |
| | | border |
| | | height="420" |
| | | style="cursor: pointer" |
| | | @row-click="selectDevice" |
| | | > |
| | | <el-table-column prop="deviceName" label="设备名称" min-width="140" /> |
| | | <el-table-column prop="deviceModel" label="规格型号" min-width="120" /> |
| | | <el-table-column prop="areaName" label="所属区域" min-width="120" /> |
| | | <el-table-column label="操作" width="80" align="center"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" @click.stop="selectDevice(scope.row)">选择</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import {addOrEditTimingTask} from "@/api/inspectionManagement/index.js"; |
| | | import {userListNoPageByTenantId} from "@/api/system/user.js"; |
| | | import { getDeviceLedger } from "@/api/equipmentManagement/ledger"; |
| | | import { getDeviceAreaTree } from "@/api/equipmentManagement/area"; |
| | | |
| | | const { proxy } = getCurrentInstance() |
| | | const emit = defineEmits() |
| | |
| | | const dialogVisitable = ref(false); |
| | | const operationType = ref('add'); |
| | | const deviceOptions = ref([]); |
| | | |
| | | // 设备选择弹窗相关 |
| | | const deviceDialogVisible = ref(false); |
| | | const areaTree = ref([]); |
| | | const deviceAreaId = ref(null); |
| | | const deviceAreaLoading = ref(false); |
| | | const deviceAreaTreeRef = ref(); |
| | | const deviceList = ref([]); |
| | | const deviceListLoading = ref(false); |
| | | |
| | | const data = reactive({ |
| | | form: { |
| | | taskId: undefined, |
| | |
| | | time: '' |
| | | }, |
| | | rules: { |
| | | taskId: [{ required: true, message: "请选择设备", trigger: "change" },], |
| | | taskName: [{ required: true, message: "请选择设备", trigger: "change" },], |
| | | inspector: [{ required: true, message: "请输入巡检人", trigger: "blur" },], |
| | | dateStr: [{ required: true, message: "请选择登记时间", trigger: "change" }], |
| | | frequencyType: [{ required: true, message: "请选择任务频率", trigger: "change" }], |
| | |
| | | |
| | | const loadDeviceName = async () => { |
| | | const { data } = await getDeviceLedger(); |
| | | deviceOptions.value = data; |
| | | deviceOptions.value = data || []; |
| | | }; |
| | | |
| | | const setDeviceModel = (id) => { |
| | |
| | | } |
| | | } |
| | | |
| | | // 加载区域树 |
| | | const loadDeviceAreaTree = () => { |
| | | deviceAreaLoading.value = true; |
| | | getDeviceAreaTree() |
| | | .then((res) => { |
| | | areaTree.value = res.data || []; |
| | | }) |
| | | .finally(() => { |
| | | deviceAreaLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | // 加载设备列表 |
| | | const loadDevices = (areaId) => { |
| | | deviceListLoading.value = true; |
| | | getDeviceLedger(areaId ? { areaId } : undefined) |
| | | .then((res) => { |
| | | deviceList.value = res.data || []; |
| | | }) |
| | | .finally(() => { |
| | | deviceListLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | // 打开设备选择弹窗 |
| | | const openDeviceDialog = () => { |
| | | deviceDialogVisible.value = true; |
| | | deviceAreaId.value = null; |
| | | loadDeviceAreaTree(); |
| | | loadDevices(); |
| | | }; |
| | | |
| | | // 选择全部设备 |
| | | const selectAllDevice = () => { |
| | | deviceAreaId.value = null; |
| | | loadDevices(); |
| | | }; |
| | | |
| | | // 点击区域节点 |
| | | const onDeviceAreaClick = (data) => { |
| | | deviceAreaId.value = data.id; |
| | | loadDevices(data.id); |
| | | }; |
| | | |
| | | // 选中设备回填 |
| | | const selectDevice = (row) => { |
| | | form.value.taskId = row.id; |
| | | form.value.taskName = row.deviceName; |
| | | deviceDialogVisible.value = false; |
| | | }; |
| | | |
| | | // 打开弹框 |
| | | const openDialog = async (type, row) => { |
| | | dialogVisitable.value = true |
| | | operationType.value = type |
| | | |
| | | |
| | | // 重置表单 |
| | | resetForm(); |
| | | |
| | | |
| | | // 加载用户列表 |
| | | userListNoPageByTenantId().then((res) => { |
| | | userList.value = res.data; |
| | | }); |
| | | |
| | | // 加载设备列表 |
| | | |
| | | // 加载设备列表(编辑回显用) |
| | | await loadDeviceName(); |
| | | |
| | | |
| | | if (type === 'edit' && row) { |
| | | form.value = {...row} |
| | | form.value.inspector = form.value.inspectorIds.split(',').map(Number) |
| | | |
| | | |
| | | // 如果有设备ID,自动设置设备信息 |
| | | if (form.value.taskId) { |
| | | setDeviceModel(form.value.taskId); |
| | | if (!form.value.taskName) { |
| | | setDeviceModel(form.value.taskId); |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | try { |
| | | form.value.inspectorIds = form.value.inspector.join(',') |
| | | delete form.value.inspector |
| | | |
| | | |
| | | if (form.value.frequencyType === 'WEEKLY') { |
| | | let frequencyDetail = '' |
| | | frequencyDetail = form.value.week + ',' + form.value.time |
| | | form.value.frequencyDetail = frequencyDetail |
| | | } |
| | | |
| | | |
| | | let res = await userStore.getInfo() |
| | | form.value.registrantId = res.user.userId |
| | | |
| | | |
| | | await addOrEditTimingTask(form.value) |
| | | cancel() |
| | | proxy.$modal.msgSuccess('提交成功') |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
| | | .device-select-wrap { |
| | | display: flex; |
| | | } |
| | | .device-select-tree { |
| | | width: 260px; |
| | | flex-shrink: 0; |
| | | padding-right: 12px; |
| | | border-right: 1px solid #ebeef5; |
| | | max-height: 460px; |
| | | overflow-y: auto; |
| | | } |
| | | .device-select-list { |
| | | flex: 1; |
| | | min-width: 0; |
| | | padding-left: 12px; |
| | | } |
| | | .all-device-node { |
| | | padding: 8px 12px; |
| | | cursor: pointer; |
| | | font-size: 14px; |
| | | border-radius: 4px; |
| | | margin-bottom: 8px; |
| | | } |
| | | .all-device-node:hover { |
| | | background: #f5f7fa; |
| | | } |
| | | .all-device-node.active { |
| | | background: #ecf5ff; |
| | | color: #409eff; |
| | | } |
| | | </style> |