| | |
| | | <template> |
| | | <FormDialog |
| | | v-model="dialogVisitable" |
| | | :title="operationType === 'add' ? '新增保养任务' : '编辑保养任务'" |
| | | width="800px" |
| | | :operation-type="operationType" |
| | | @confirm="submitForm" |
| | | @cancel="cancel" |
| | | @close="cancel" |
| | | > |
| | | <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" filterable> |
| | | <el-option |
| | | v-for="(item, index) in deviceOptions" |
| | | :key="index" |
| | | :label="item.deviceName" |
| | | :value="item.id" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="规格型号"> |
| | | <el-input |
| | | v-model="form.deviceModel" |
| | | placeholder="请输入规格型号" |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="录入人" prop="inspector"> |
| | | <el-select |
| | | v-model="form.inspector" |
| | | filterable |
| | | default-first-option |
| | | :reserve-keyword="false" |
| | | placeholder="请选择" |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="item in userList" |
| | | :label="item.nickName" |
| | | :value="item.userId" |
| | | :key="item.userId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="登记时间" prop="registrationDate"> |
| | | <el-date-picker |
| | | v-model="form.registrationDate" |
| | | type="date" |
| | | placeholder="选择登记日期" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="保养项目" prop="machineryCategory"> |
| | | <el-input |
| | | v-model.trim="form.machineryCategory" |
| | | type="textarea" |
| | | placeholder="请输入保养项目" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="保养人" prop="maintenancePerson"> |
| | | <el-input |
| | | v-model.trim="form.maintenancePerson" |
| | | placeholder="请输入保养人姓名" |
| | | maxlength="100" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="任务频率" prop="frequencyType"> |
| | | <el-select v-model="form.frequencyType" placeholder="请选择" clearable> |
| | | <el-option label="每日" value="DAILY"/> |
| | | <el-option label="每周" value="WEEKLY"/> |
| | | <el-option label="每月" value="MONTHLY"/> |
| | | <el-option label="季度" value="QUARTERLY"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.frequencyType === 'DAILY' && form.frequencyType"> |
| | | <el-form-item label="日期" prop="frequencyDetail"> |
| | | <el-time-picker v-model="form.frequencyDetail" placeholder="选择时间" format="HH:mm" |
| | | value-format="HH:mm" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.frequencyType === 'WEEKLY' && form.frequencyType"> |
| | | <el-form-item label="日期" prop="frequencyDetail"> |
| | | <el-select v-model="form.week" placeholder="请选择" clearable style="width: 50%"> |
| | | <el-option label="周一" value="MON"/> |
| | | <el-option label="周二" value="TUE"/> |
| | | <el-option label="周三" value="WED"/> |
| | | <el-option label="周四" value="THU"/> |
| | | <el-option label="周五" value="FRI"/> |
| | | <el-option label="周六" value="SAT"/> |
| | | <el-option label="周日" value="SUN"/> |
| | | </el-select> |
| | | <el-time-picker v-model="form.time" placeholder="选择时间" format="HH:mm" |
| | | value-format="HH:mm" style="width: 50%"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.frequencyType === 'MONTHLY' && form.frequencyType"> |
| | | <el-form-item label="日期" prop="frequencyDetail"> |
| | | <el-date-picker |
| | | v-model="form.frequencyDetail" |
| | | type="datetime" |
| | | clearable |
| | | placeholder="选择开始日期" |
| | | format="DD,HH:mm" |
| | | value-format="DD,HH:mm" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.frequencyType === 'QUARTERLY' && form.frequencyType"> |
| | | <el-form-item label="日期" prop="frequencyDetail"> |
| | | <el-date-picker |
| | | v-model="form.frequencyDetail" |
| | | type="datetime" |
| | | clearable |
| | | placeholder="选择开始日期" |
| | | format="MM,DD,HH:mm" |
| | | value-format="MM,DD,HH:mm" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="定时任务"> |
| | | <el-switch |
| | | v-model="form.isActive" |
| | | :active-value="1" |
| | | :inactive-value="0" |
| | | active-text="开启" |
| | | inactive-text="关闭" |
| | | inline-prompt |
| | | /> |
| | | <span style="margin-left: 12px; color: #909399; font-size: 12px;"> |
| | | {{ form.isActive === 1 ? '任务将按计划执行' : '任务暂停执行' }} |
| | | </span> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="备注" prop="remarks"> |
| | | <el-input v-model="form.remarks" placeholder="请输入备注" type="textarea" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </FormDialog> |
| | | <FormDialog |
| | | v-model="dialogVisitable" |
| | | :title="operationType === 'add' ? '新增保养任务' : '编辑保养任务'" |
| | | width="800px" |
| | | :operation-type="operationType" |
| | | @confirm="submitForm" |
| | | @cancel="cancel" |
| | | @close="cancel" |
| | | > |
| | | <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" filterable> |
| | | <el-option |
| | | v-for="(item, index) in deviceOptions" |
| | | :key="index" |
| | | :label="item.deviceName" |
| | | :value="item.id" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="规格型号"> |
| | | <el-input v-model="form.deviceModel" placeholder="请输入规格型号" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="录入人" prop="inspector"> |
| | | <el-select |
| | | v-model="form.inspector" |
| | | filterable |
| | | default-first-option |
| | | :reserve-keyword="false" |
| | | placeholder="请选择" |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="item in userList" |
| | | :label="item.nickName" |
| | | :value="item.userId" |
| | | :key="item.userId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="登记时间" prop="registrationDate"> |
| | | <el-date-picker |
| | | v-model="form.registrationDate" |
| | | type="date" |
| | | placeholder="选择登记日期" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="保养人" prop="maintenancePerson"> |
| | | <el-input |
| | | v-model.trim="form.maintenancePerson" |
| | | placeholder="请输入保养人姓名" |
| | | maxlength="100" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="任务频率" prop="frequencyType"> |
| | | <el-select |
| | | v-model="form.frequencyType" |
| | | placeholder="请选择(日、周、月、季度)" |
| | | clearable |
| | | @change="onFrequencyChange" |
| | | > |
| | | <el-option label="每日" value="DAILY" /> |
| | | <el-option label="每周" value="WEEKLY" /> |
| | | <el-option label="每月" value="MONTHLY" /> |
| | | <el-option label="季度" value="QUARTERLY" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.frequencyType === 'DAILY' && form.frequencyType"> |
| | | <el-form-item label="日期" prop="frequencyDetail"> |
| | | <el-time-picker |
| | | v-model="form.frequencyDetail" |
| | | placeholder="选择时间" |
| | | format="HH:mm" |
| | | value-format="HH:mm" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.frequencyType === 'WEEKLY' && form.frequencyType"> |
| | | <el-form-item label="日期" prop="frequencyDetail"> |
| | | <el-select v-model="form.week" placeholder="请选择" clearable style="width: 50%"> |
| | | <el-option label="周一" value="MON" /> |
| | | <el-option label="周二" value="TUE" /> |
| | | <el-option label="周三" value="WED" /> |
| | | <el-option label="周四" value="THU" /> |
| | | <el-option label="周五" value="FRI" /> |
| | | <el-option label="周六" value="SAT" /> |
| | | <el-option label="周日" value="SUN" /> |
| | | </el-select> |
| | | <el-time-picker |
| | | v-model="form.time" |
| | | placeholder="选择时间" |
| | | format="HH:mm" |
| | | value-format="HH:mm" |
| | | style="width: 50%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.frequencyType === 'MONTHLY' && form.frequencyType"> |
| | | <el-form-item label="日期" prop="frequencyDetail"> |
| | | <el-date-picker |
| | | v-model="form.frequencyDetail" |
| | | type="datetime" |
| | | clearable |
| | | placeholder="选择开始日期" |
| | | format="DD,HH:mm" |
| | | value-format="DD,HH:mm" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.frequencyType === 'QUARTERLY' && form.frequencyType"> |
| | | <el-form-item label="日期" prop="frequencyDetail"> |
| | | <el-date-picker |
| | | v-model="form.frequencyDetail" |
| | | type="datetime" |
| | | clearable |
| | | placeholder="选择开始日期" |
| | | format="MM,DD,HH:mm" |
| | | value-format="MM,DD,HH:mm" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="保养项目" prop="maintenanceItemIds"> |
| | | <div class="maintenance-selection"> |
| | | <div class="selection-toolbar"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | :disabled="!form.taskId || !form.frequencyType" |
| | | @click="itemSelectorVisible = true" |
| | | >选择保养项目</el-button |
| | | > |
| | | <span v-if="!form.taskId || !form.frequencyType" class="selection-hint" |
| | | >请先选择设备和任务频率,设备绑定的保养项目将自动带出</span |
| | | > |
| | | <span v-else class="selection-hint" |
| | | >设备绑定项目已自动带出,可额外选择通用项目,或添加本任务专用项目</span |
| | | > |
| | | </div> |
| | | <div class="custom-input"> |
| | | <el-input |
| | | v-model="customItemProject" |
| | | maxlength="200" |
| | | clearable |
| | | placeholder="输入本任务专用的保养项目" |
| | | /> |
| | | <el-input |
| | | v-model="customItemName" |
| | | maxlength="2000" |
| | | clearable |
| | | placeholder="输入项目对应的保养内容" |
| | | @keyup.enter="addCustomItem" |
| | | /> |
| | | <el-button |
| | | :disabled="!customItemProject.trim() || !customItemName.trim()" |
| | | @click="addCustomItem" |
| | | >添加</el-button |
| | | > |
| | | </div> |
| | | <div class="selected-panel"> |
| | | <div class="selected-header"> |
| | | <span class="selected-title">已选 {{ selectedList.length }} 项</span> |
| | | <span v-if="sourceStats.length" class="selected-stats"> |
| | | <span v-for="stat in sourceStats" :key="stat.source" class="selected-stat" |
| | | >{{ stat.label }} {{ stat.count }}</span |
| | | > |
| | | </span> |
| | | </div> |
| | | <ol v-if="selectedList.length" class="selected-list"> |
| | | <li v-for="(item, index) in selectedList" :key="item.key" class="selected-row"> |
| | | <span class="row-index">{{ index + 1 }}</span> |
| | | <el-tag size="small" effect="light" :type="sourceMeta[item.source].type">{{ |
| | | sourceMeta[item.source].label |
| | | }}</el-tag> |
| | | <span class="row-text" :title="item.itemProject">{{ item.itemProject }}</span> |
| | | <el-button link type="danger" @click="removeSelectedItem(item)">移除</el-button> |
| | | </li> |
| | | </ol> |
| | | <el-empty v-else :image-size="56" description="尚未选择保养项目" /> |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="定时任务"> |
| | | <el-switch |
| | | v-model="form.isActive" |
| | | :active-value="1" |
| | | :inactive-value="0" |
| | | active-text="开启" |
| | | inactive-text="关闭" |
| | | inline-prompt |
| | | /> |
| | | <span style="margin-left: 12px; color: #909399; font-size: 12px"> |
| | | {{ form.isActive === 1 ? "任务将按计划执行" : "任务暂停执行" }} |
| | | </span> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="备注" prop="remarks"> |
| | | <el-input v-model="form.remarks" placeholder="请输入备注" type="textarea" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </FormDialog> |
| | | <MaintenanceItemSelector |
| | | v-model:visible="itemSelectorVisible" |
| | | :selected-items="selectedItems" |
| | | :device-ledger-id="form.taskId" |
| | | :frequency-type="form.frequencyType" |
| | | @confirm="applyMaintenanceItems" |
| | | /> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import FormDialog from "@/components/Dialog/FormDialog.vue"; |
| | | import { reactive, ref, getCurrentInstance, toRefs } from "vue"; |
| | | import {userListNoPageByTenantId} from "@/api/system/user.js"; |
| | | import { computed, reactive, ref, getCurrentInstance, toRefs } from "vue"; |
| | | import { userListNoPageByTenantId } from "@/api/system/user.js"; |
| | | import { getDeviceLedger } from "@/api/equipmentManagement/ledger"; |
| | | import { deviceMaintenanceTaskAdd, deviceMaintenanceTaskEdit } from "@/api/equipmentManagement/upkeep"; |
| | | import { |
| | | deviceMaintenanceTaskAdd, |
| | | deviceMaintenanceTaskEdit, |
| | | getMaintenanceItemList, |
| | | } from "@/api/equipmentManagement/upkeep"; |
| | | import { getCurrentDate } from "@/utils/index.js"; |
| | | import useUserStore from "@/store/modules/user.js"; |
| | | import MaintenanceItemSelector from "./MaintenanceItemSelector.vue"; |
| | | |
| | | const { proxy } = getCurrentInstance() |
| | | const emit = defineEmits() |
| | | const { proxy } = getCurrentInstance(); |
| | | const emit = defineEmits(); |
| | | const dialogVisitable = ref(false); |
| | | const operationType = ref('add'); |
| | | const operationType = ref("add"); |
| | | const deviceOptions = ref([]); |
| | | const itemSelectorVisible = ref(false); |
| | | const userStore = useUserStore(); |
| | | const data = reactive({ |
| | | form: { |
| | | taskId: undefined, |
| | | taskName: undefined, |
| | | // 录入人:单选一个用户 id |
| | | inspector: undefined, |
| | | machineryCategory: "", |
| | | remarks: '', |
| | | frequencyType: '', |
| | | frequencyDetail: '', |
| | | week: '', |
| | | time: '', |
| | | deviceModel: undefined, // 规格型号 |
| | | registrationDate: '', |
| | | maintenancePerson: '', // 保养人 |
| | | isActive: 0 // 定时任务开关:0=关闭,1=开启 |
| | | }, |
| | | rules: { |
| | | taskId: [{ required: true, message: "请选择设备", trigger: "change" },], |
| | | inspector: [{ required: true, message: "请选择录入人", trigger: "blur" },], |
| | | registrationDate: [{ required: true, message: "请选择登记时间", trigger: "change" }], |
| | | machineryCategory: [{ required: true, message: "请输入保养项目", trigger: "blur" }] |
| | | } |
| | | }) |
| | | const { form, rules } = toRefs(data) |
| | | const userList = ref([]) |
| | | form: { |
| | | taskId: undefined, |
| | | taskName: undefined, |
| | | // 录入人:单选一个用户 id |
| | | inspector: undefined, |
| | | maintenanceItemIds: [], |
| | | remarks: "", |
| | | frequencyType: "", |
| | | frequencyDetail: "", |
| | | week: "", |
| | | time: "", |
| | | deviceModel: undefined, // 规格型号 |
| | | registrationDate: "", |
| | | maintenancePerson: "", // 保养人 |
| | | isActive: 0, // 定时任务开关:0=关闭,1=开启 |
| | | }, |
| | | rules: { |
| | | taskId: [{ required: true, message: "请选择设备", trigger: "change" }], |
| | | inspector: [{ required: true, message: "请选择录入人", trigger: "blur" }], |
| | | registrationDate: [{ required: true, message: "请选择登记时间", trigger: "change" }], |
| | | maintenanceItemIds: [ |
| | | { type: "array", required: true, min: 1, message: "请勾选保养项目", trigger: "change" }, |
| | | ], |
| | | frequencyType: [{ required: true, message: "请选择任务频率", trigger: "change" }], |
| | | frequencyDetail: [ |
| | | { |
| | | validator: (_, value, callback) => { |
| | | const valid = |
| | | form.value.frequencyType === "WEEKLY" |
| | | ? Boolean(form.value.week && form.value.time) |
| | | : Boolean(value); |
| | | callback(valid ? undefined : new Error("请选择执行日期和时间")); |
| | | }, |
| | | trigger: "change", |
| | | }, |
| | | ], |
| | | }, |
| | | }); |
| | | const { form, rules } = toRefs(data); |
| | | const userList = ref([]); |
| | | // 从保养内容清单中选中的项(设备绑定或通用) |
| | | const selectedItems = ref([]); |
| | | // 仅属于本任务的自定义内容,不写入保养内容清单 |
| | | const customItems = ref([]); |
| | | const customItemProject = ref(""); |
| | | const customItemName = ref(""); |
| | | const sourceMeta = { |
| | | device: { label: "本设备", type: "primary" }, |
| | | common: { label: "通用", type: "info" }, |
| | | custom: { label: "自定义", type: "warning" }, |
| | | other: { label: "其它设备", type: "danger" }, |
| | | saved: { label: "已保存", type: "success" }, |
| | | }; |
| | | const getSource = (item) => { |
| | | if (item.deviceLedgerId === undefined) return "saved"; |
| | | if (item.deviceLedgerId === null) return "common"; |
| | | return String(item.deviceLedgerId) === String(form.value.taskId) ? "device" : "other"; |
| | | }; |
| | | const selectedList = computed(() => [ |
| | | ...selectedItems.value.map((item) => ({ |
| | | key: `item-${item.id}`, |
| | | id: item.id, |
| | | itemProject: item.itemProject, |
| | | source: getSource(item), |
| | | })), |
| | | ...customItems.value.map((item) => ({ |
| | | key: item.key, |
| | | id: null, |
| | | itemProject: item.itemProject, |
| | | itemName: item.itemName, |
| | | source: "custom", |
| | | })), |
| | | ]); |
| | | const sourceStats = computed(() => |
| | | Object.keys(sourceMeta) |
| | | .map((source) => ({ |
| | | source, |
| | | label: sourceMeta[source].label, |
| | | count: selectedList.value.filter((item) => item.source === source).length, |
| | | })) |
| | | .filter((stat) => stat.count > 0) |
| | | ); |
| | | const syncItemIds = () => { |
| | | form.value.maintenanceItemIds = [ |
| | | ...selectedItems.value.map((item) => item.id), |
| | | ...customItems.value.map((item) => item.key), |
| | | ]; |
| | | proxy.$refs.formRef?.clearValidate("maintenanceItemIds"); |
| | | }; |
| | | const applyMaintenanceItems = (items) => { |
| | | selectedItems.value = items; |
| | | syncItemIds(); |
| | | }; |
| | | const addCustomItem = () => { |
| | | const project = customItemProject.value.trim(); |
| | | const name = customItemName.value.trim(); |
| | | if (!project || !name) return; |
| | | if (selectedList.value.some((item) => item.itemProject === project)) { |
| | | proxy.$modal.msgWarning("已存在相同的保养项目"); |
| | | return; |
| | | } |
| | | customItems.value = [ |
| | | ...customItems.value, |
| | | { key: `custom-${Date.now()}`, itemProject: project, itemName: name }, |
| | | ]; |
| | | customItemProject.value = ""; |
| | | customItemName.value = ""; |
| | | syncItemIds(); |
| | | }; |
| | | const removeSelectedItem = (item) => { |
| | | if (item.source === "custom") |
| | | customItems.value = customItems.value.filter((custom) => custom.key !== item.key); |
| | | else |
| | | selectedItems.value = selectedItems.value.filter( |
| | | (selected) => String(selected.id) !== String(item.id) |
| | | ); |
| | | syncItemIds(); |
| | | }; |
| | | |
| | | const loadDeviceName = async () => { |
| | | const { data } = await getDeviceLedger(); |
| | | deviceOptions.value = data; |
| | | const { data } = await getDeviceLedger(); |
| | | deviceOptions.value = data; |
| | | }; |
| | | |
| | | // 选择设备时,回填设备名称(taskName)和规格型号(deviceModel) |
| | | const setDeviceModel = (id) => { |
| | | const option = deviceOptions.value.find((item) => item.id === id); |
| | | if (option) { |
| | | form.value.taskId = option.id; |
| | | form.value.taskName = option.deviceName; |
| | | form.value.deviceModel = option.deviceModel; |
| | | } |
| | | } |
| | | const setDeviceModel = (id, preserveItems = false) => { |
| | | const option = deviceOptions.value.find((item) => item.id === id); |
| | | if (option) { |
| | | form.value.taskId = option.id; |
| | | form.value.taskName = option.deviceName; |
| | | form.value.deviceModel = option.deviceModel; |
| | | if (!preserveItems) autoFillBoundItems(id); |
| | | } |
| | | }; |
| | | const clearSelectedItems = () => { |
| | | selectedItems.value = []; |
| | | syncItemIds(); |
| | | }; |
| | | const onFrequencyChange = () => autoFillBoundItems(); |
| | | // 按设备和频率自动带出该设备绑定的保养内容;通用内容(无设备)需用户手动额外选择 |
| | | const autoFillBoundItems = async (deviceId) => { |
| | | const id = deviceId ?? form.value.taskId; |
| | | const frequency = form.value.frequencyType; |
| | | if (!id || !frequency) return clearSelectedItems(); |
| | | const { code, data } = await getMaintenanceItemList({ |
| | | deviceLedgerId: id, |
| | | frequencyType: frequency, |
| | | isActive: 1, |
| | | }); |
| | | if (code !== 200 || id !== form.value.taskId || frequency !== form.value.frequencyType) return; |
| | | applyMaintenanceItems(data || []); |
| | | }; |
| | | |
| | | // 打开弹框 |
| | | 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 } |
| | | // 编辑时用接口返回的 registrantId 回显录入人 |
| | | if (row.registrantId) { |
| | | form.value.inspector = row.registrantId |
| | | } |
| | | dialogVisitable.value = true; |
| | | operationType.value = type; |
| | | |
| | | // 如果有设备ID,自动设置设备信息 |
| | | if (form.value.taskId) { |
| | | setDeviceModel(form.value.taskId); |
| | | } |
| | | } else if (type === 'add') { |
| | | // 新增时设置登记日期为当天 |
| | | form.value.registrationDate = getCurrentDate(); |
| | | // 新增时设置录入人为当前登录账户 |
| | | form.value.inspector = userStore.id; |
| | | } |
| | | } |
| | | // 重置表单 |
| | | resetForm(); |
| | | |
| | | // 加载用户列表 |
| | | userListNoPageByTenantId().then((res) => { |
| | | userList.value = res.data; |
| | | }); |
| | | // 加载设备列表 |
| | | await loadDeviceName(); |
| | | |
| | | if (type === "edit" && row) { |
| | | form.value = { ...row }; |
| | | const savedItems = row.maintenanceItems || []; |
| | | selectedItems.value = savedItems |
| | | .filter((item) => item.maintenanceItemId != null) |
| | | .map((item) => ({ |
| | | id: item.maintenanceItemId, |
| | | itemProject: item.itemProject, |
| | | itemName: item.itemName, |
| | | })); |
| | | customItems.value = savedItems |
| | | .filter((item) => item.maintenanceItemId == null) |
| | | .map((item, index) => ({ |
| | | key: `custom-saved-${index}`, |
| | | itemProject: item.itemProject, |
| | | itemName: item.itemName, |
| | | })); |
| | | syncItemIds(); |
| | | // 编辑时用接口返回的 registrantId 回显录入人 |
| | | if (row.registrantId) { |
| | | form.value.inspector = row.registrantId; |
| | | } |
| | | |
| | | // 如果有设备ID,自动设置设备信息 |
| | | if (form.value.taskId) { |
| | | setDeviceModel(form.value.taskId, true); |
| | | } |
| | | } else if (type === "add") { |
| | | // 新增时设置登记日期为当天 |
| | | form.value.registrationDate = getCurrentDate(); |
| | | // 新增时设置录入人为当前登录账户 |
| | | form.value.inspector = userStore.id; |
| | | } |
| | | }; |
| | | |
| | | // 关闭对话框 |
| | | const cancel = () => { |
| | | resetForm() |
| | | dialogVisitable.value = false |
| | | emit('closeDia') |
| | | } |
| | | itemSelectorVisible.value = false; |
| | | resetForm(); |
| | | dialogVisitable.value = false; |
| | | emit("closeDia"); |
| | | }; |
| | | |
| | | // 重置表单函数 |
| | | const resetForm = () => { |
| | | if (proxy.$refs.formRef) { |
| | | proxy.$refs.formRef.resetFields() |
| | | } |
| | | // 重置表单数据确保设备信息正确重置 |
| | | form.value = { |
| | | taskId: undefined, |
| | | taskName: undefined, |
| | | inspector: undefined, |
| | | machineryCategory: "", |
| | | remarks: '', |
| | | frequencyType: '', |
| | | frequencyDetail: '', |
| | | week: '', |
| | | time: '', |
| | | deviceModel: undefined, |
| | | registrationDate: '', |
| | | maintenancePerson: '', |
| | | isActive: 0 |
| | | } |
| | | } |
| | | itemSelectorVisible.value = false; |
| | | selectedItems.value = []; |
| | | customItems.value = []; |
| | | customItemProject.value = ""; |
| | | customItemName.value = ""; |
| | | if (proxy.$refs.formRef) { |
| | | proxy.$refs.formRef.resetFields(); |
| | | } |
| | | // 重置表单数据确保设备信息正确重置 |
| | | form.value = { |
| | | taskId: undefined, |
| | | taskName: undefined, |
| | | inspector: undefined, |
| | | maintenanceItemIds: [], |
| | | remarks: "", |
| | | frequencyType: "", |
| | | frequencyDetail: "", |
| | | week: "", |
| | | time: "", |
| | | deviceModel: undefined, |
| | | registrationDate: "", |
| | | maintenancePerson: "", |
| | | isActive: 0, |
| | | }; |
| | | }; |
| | | |
| | | // 提交表单 |
| | | const submitForm = () => { |
| | | proxy.$refs["formRef"].validate(async valid => { |
| | | if (valid) { |
| | | try { |
| | | const payload = { ...form.value } |
| | | // 不再向后端传保养人字段,仅使用接口要求的 registrant / registrantId |
| | | // 根据选择的"录入人"设置 registrant / registrantId |
| | | if (payload.inspector) { |
| | | const selectedUser = userList.value.find( |
| | | (u) => String(u.userId) === String(payload.inspector) |
| | | ) |
| | | if (selectedUser) { |
| | | payload.registrantId = selectedUser.userId |
| | | payload.registrant = selectedUser.nickName |
| | | } |
| | | } |
| | | delete payload.inspector |
| | | delete payload.inspectorIds |
| | | delete payload.active |
| | | proxy.$refs["formRef"].validate(async (valid) => { |
| | | if (valid) { |
| | | try { |
| | | const payload = { ...form.value }; |
| | | payload.maintenanceItemIds = selectedItems.value.map((item) => item.id); |
| | | payload.customItems = customItems.value.map((item) => ({ |
| | | itemProject: item.itemProject, |
| | | itemName: item.itemName, |
| | | })); |
| | | // 不再向后端传保养人字段,仅使用接口要求的 registrant / registrantId |
| | | // 根据选择的"录入人"设置 registrant / registrantId |
| | | if (payload.inspector) { |
| | | const selectedUser = userList.value.find( |
| | | (u) => String(u.userId) === String(payload.inspector) |
| | | ); |
| | | if (selectedUser) { |
| | | payload.registrantId = selectedUser.userId; |
| | | payload.registrant = selectedUser.nickName; |
| | | } |
| | | } |
| | | delete payload.inspector; |
| | | delete payload.inspectorIds; |
| | | delete payload.active; |
| | | |
| | | if (payload.frequencyType === 'WEEKLY') { |
| | | let frequencyDetail = '' |
| | | frequencyDetail = payload.week + ',' + payload.time |
| | | payload.frequencyDetail = frequencyDetail |
| | | } |
| | | if (payload.frequencyType === "WEEKLY") { |
| | | let frequencyDetail = ""; |
| | | frequencyDetail = payload.week + "," + payload.time; |
| | | payload.frequencyDetail = frequencyDetail; |
| | | } |
| | | |
| | | // 录入日期:直接使用表单里的 registrationDate 字段 |
| | | // 一些默认状态字段 |
| | | if (payload.status === undefined || payload.status === null || payload.status === '') { |
| | | payload.status = '0' // 默认状态,可按实际枚举调整 |
| | | } |
| | | payload.deleted = 0 |
| | | // 录入日期:直接使用表单里的 registrationDate 字段 |
| | | // 一些默认状态字段 |
| | | if (payload.status === undefined || payload.status === null || payload.status === "") { |
| | | payload.status = "0"; // 默认状态,可按实际枚举调整 |
| | | } |
| | | payload.deleted = 0; |
| | | |
| | | if (operationType.value === 'edit') { |
| | | await deviceMaintenanceTaskEdit(payload) |
| | | } else { |
| | | await deviceMaintenanceTaskAdd(payload) |
| | | } |
| | | cancel() |
| | | proxy.$modal.msgSuccess('提交成功') |
| | | } catch (error) { |
| | | proxy.$modal.msgError('提交失败,请重试') |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | defineExpose({ openDialog }) |
| | | if (operationType.value === "edit") { |
| | | await deviceMaintenanceTaskEdit(payload); |
| | | } else { |
| | | await deviceMaintenanceTaskAdd(payload); |
| | | } |
| | | cancel(); |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | } catch (error) { |
| | | proxy.$modal.msgError("提交失败,请重试"); |
| | | } |
| | | } |
| | | }); |
| | | }; |
| | | defineExpose({ openDialog }); |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | .maintenance-selection { |
| | | width: 100%; |
| | | } |
| | | .selection-toolbar { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 10px; |
| | | } |
| | | .selection-hint { |
| | | color: #909399; |
| | | font-size: 12px; |
| | | } |
| | | .custom-input { |
| | | display: flex; |
| | | gap: 8px; |
| | | margin-top: 10px; |
| | | } |
| | | .custom-input .el-input:first-child { |
| | | flex: 0 0 30%; |
| | | } |
| | | .custom-input .el-input:nth-child(2) { |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | .selected-panel { |
| | | margin-top: 10px; |
| | | border: 1px solid #ebeef5; |
| | | border-radius: 4px; |
| | | background: #fafafa; |
| | | } |
| | | .selected-header { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 8px 12px; |
| | | border-bottom: 1px solid #ebeef5; |
| | | } |
| | | .selected-title { |
| | | font-weight: 600; |
| | | color: #303133; |
| | | } |
| | | .selected-stats { |
| | | display: flex; |
| | | gap: 12px; |
| | | color: #909399; |
| | | font-size: 12px; |
| | | } |
| | | .selected-list { |
| | | max-height: 220px; |
| | | margin: 0; |
| | | padding: 4px 0; |
| | | overflow-y: auto; |
| | | list-style: none; |
| | | } |
| | | .selected-row { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 10px; |
| | | padding: 6px 12px; |
| | | } |
| | | .selected-row:hover { |
| | | background: #f0f7ff; |
| | | } |
| | | .row-index { |
| | | width: 24px; |
| | | flex-shrink: 0; |
| | | color: #909399; |
| | | text-align: right; |
| | | } |
| | | .row-text { |
| | | flex: 1; |
| | | min-width: 0; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | color: #303133; |
| | | } |
| | | </style> |