1.设备台帐二维码上加上设备名称
2.设备保养和保修加上每次的保养保修金额
3.加一个汇总页面,可以看到每个设备的每个月的金额,也可以选择看每年的金额
| | |
| | | params: query
|
| | | })
|
| | | }
|
| | | // æ¥è¯¢å²ä½å表å
¨é¨
|
| | | export function listPostAll(query) {
|
| | | return request({
|
| | | url: '/system/post/listAll',
|
| | | method: 'get',
|
| | | params: query
|
| | | })
|
| | | }
|
| | |
|
| | | // æ¥è¯¢å²ä½è¯¦ç»
|
| | | export function getPost(postId) {
|
| | |
| | | }); |
| | | |
| | | const isPdf = computed(() => { |
| | | console.log(fileUrl.value) |
| | | return /\.pdf$/i.test(fileUrl.value); |
| | | }); |
| | | |
| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form :inline="true" :model="filters"> |
| | | <el-form-item label="æ¥ç模å¼"> |
| | | <el-radio-group v-model="mode" @change="buildColumns"> |
| | | <el-radio-button :value="'month'">ææ</el-radio-button> |
| | | <el-radio-button :value="'year'">æå¹´</el-radio-button> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item v-if="mode === 'month' || mode === 'year'" label="年份"> |
| | | <el-date-picker v-model="year" type="year" value-format="YYYY" format="YYYY" placeholder="è¯·éæ©å¹´ä»½" @change="refresh" /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="refresh">æ¥è¯¢</el-button> |
| | | <el-button @click="reset">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <div class="table_list"> |
| | | <PIMTable |
| | | rowKey="deviceId" |
| | | :column="columns" |
| | | :tableData="tableData" |
| | | :page="{ current: 1, size: tableData.length || 10, total: tableData.length }" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, computed } from "vue"; |
| | | |
| | | defineOptions({ name: "é颿±æ»" }); |
| | | |
| | | const mode = ref("month"); |
| | | const year = ref(new Date().getFullYear().toString()); |
| | | const filters = ref({}); |
| | | |
| | | const columns = ref([]); |
| | | const tableData = ref([]); |
| | | |
| | | const buildColumns = () => { |
| | | const base = [{ label: "设å¤åç§°", align: "center", prop: "deviceName", width: 180 }]; |
| | | if (mode.value === "month") { |
| | | const monthCols = Array.from({ length: 12 }, (_, i) => ({ |
| | | label: `${i + 1}æ`, |
| | | align: "center", |
| | | prop: `m${i + 1}`, |
| | | })); |
| | | columns.value = [ |
| | | ...base, |
| | | ...monthCols, |
| | | { label: "æ»è®¡", align: "center", prop: "total" }, |
| | | ]; |
| | | } else { |
| | | columns.value = [ |
| | | ...base, |
| | | { label: "éé¢", align: "center", prop: "yearAmount" }, |
| | | ]; |
| | | } |
| | | }; |
| | | |
| | | const refresh = async () => { |
| | | buildColumns(); |
| | | tableData.value = []; |
| | | }; |
| | | |
| | | const reset = () => { |
| | | mode.value = "month"; |
| | | year.value = new Date().getFullYear().toString(); |
| | | refresh(); |
| | | }; |
| | | |
| | | buildColumns(); |
| | | refresh(); |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .table_list { |
| | | margin-top: 10px; |
| | | } |
| | | </style> |
| | |
| | | <el-dialog v-model="qrDialogVisible" title="äºç»´ç " width="300px"> |
| | | <div style="text-align:center;"> |
| | | <img :src="qrCodeUrl" alt="äºç»´ç " style="width:200px;height:200px;" /> |
| | | <div style="margin-top:6px;font-size:14px;color:#333;">{{ qrRowData?.deviceName }}</div> |
| | | <div style="margin:10px 0;"> |
| | | <el-button type="primary" @click="downloadQRCode">ä¸è½½äºç»´ç å¾ç</el-button> |
| | | </div> |
| | |
| | | }; |
| | | |
| | | const downloadQRCode = () => { |
| | | const a = document.createElement("a"); |
| | | a.href = qrCodeUrl.value; |
| | | a.download = `${qrRowData.value.deviceName || "äºç»´ç "}.png`; |
| | | a.click(); |
| | | const name = qrRowData.value?.deviceName || "äºç»´ç "; |
| | | const img = new Image(); |
| | | img.src = qrCodeUrl.value; |
| | | img.onload = () => { |
| | | const padding = 10; |
| | | const qrSize = 200; |
| | | const textHeight = 24; // space for text |
| | | const width = qrSize + padding * 2; |
| | | const height = qrSize + padding * 2 + textHeight; |
| | | const canvas = document.createElement("canvas"); |
| | | canvas.width = width; |
| | | canvas.height = height; |
| | | const ctx = canvas.getContext("2d"); |
| | | // background |
| | | ctx.fillStyle = "#ffffff"; |
| | | ctx.fillRect(0, 0, width, height); |
| | | // draw QR centered |
| | | ctx.drawImage(img, padding, padding, qrSize, qrSize); |
| | | // draw name centered below |
| | | ctx.fillStyle = "#333"; |
| | | ctx.font = "14px Arial"; |
| | | ctx.textAlign = "center"; |
| | | ctx.textBaseline = "middle"; |
| | | const maxTextWidth = width - padding * 2; |
| | | let displayName = name; |
| | | // ellipsis if too long |
| | | while (ctx.measureText(displayName).width > maxTextWidth && displayName.length > 0) { |
| | | displayName = displayName.slice(0, -1); |
| | | } |
| | | if (displayName !== name) displayName = displayName + "â¦"; |
| | | ctx.fillText(displayName, width / 2, qrSize + padding + textHeight / 2); |
| | | |
| | | const dataUrl = canvas.toDataURL("image/png"); |
| | | const a = document.createElement("a"); |
| | | a.href = dataUrl; |
| | | a.download = `${name}.png`; |
| | | a.click(); |
| | | }; |
| | | }; |
| | | |
| | | onMounted(() => { |
| | |
| | | <template> |
| | | <el-dialog v-model="visible" :title="modalOptions.title" direction="ltr"> |
| | | <MaintainForm ref="maintainFormRef" /> |
| | | <el-form :model="form" :rules="rules" label-width="110px" ref="formRef"> |
| | | <el-form-item label="维修人" prop="maintenanceName"> |
| | | <el-input v-model="form.maintenanceName" placeholder="请è¾å
¥ç»´ä¿®äºº" /> |
| | | </el-form-item> |
| | | <el-form-item label="ç»´ä¿®ç»æ" prop="maintenanceResult"> |
| | | <el-input v-model="form.maintenanceResult" placeholder="请è¾å
¥ç»´ä¿®ç»æ" /> |
| | | </el-form-item> |
| | | <el-form-item label="æ¬æ¬¡ç»´ä¿®éé¢" prop="money"> |
| | | <el-input-number v-model="form.money" :min="0" :precision="2" style="width: 100%" /> |
| | | </el-form-item> |
| | | <el-form-item label="ç»´ä¿®æ¥æ" prop="maintenanceTime"> |
| | | <el-date-picker |
| | | v-model="form.maintenanceTime" |
| | | placeholder="è¯·éæ©ç»´ä¿®æ¥æ" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | type="datetime" |
| | | clearable |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button type="primary" @click="sendForm" :loading="loading"> |
| | | {{ modalOptions.confirmText }} |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, nextTick } from "vue"; |
| | | import { useModal } from "@/hooks/useModal"; |
| | | import MaintainForm from "../Form/MaintainForm.vue"; |
| | | import useFormData from "@/hooks/useFormData"; |
| | | import useUserStore from "@/store/modules/user"; |
| | | import dayjs from "dayjs"; |
| | | import { addMaintain } from "@/api/equipmentManagement/repair"; |
| | | |
| | | defineOptions({ |
| | | name: "ç»´ä¿®æ¨¡ææ¡", |
| | | }); |
| | | |
| | | const maintainFormRef = ref(); |
| | | const emits = defineEmits(["ok"]); |
| | | |
| | | const { |
| | |
| | | closeModal, |
| | | } = useModal({ title: "设å¤ç»´ä¿®" }); |
| | | |
| | | const userStore = useUserStore(); |
| | | const formRef = ref(); |
| | | const { form, resetForm } = useFormData({ |
| | | maintenanceName: undefined, // ç»´ä¿®åç§° |
| | | maintenanceResult: undefined, // ç»´ä¿®ç»æ |
| | | maintenanceTime: undefined, // ç»´ä¿®æ¥æ |
| | | money: undefined, // æ¬æ¬¡ç»´ä¿®éé¢ |
| | | }); |
| | | |
| | | const rules = { |
| | | maintenanceName: [{ required: true, message: "请è¾å
¥ç»´ä¿®äºº", trigger: "blur" }], |
| | | maintenanceResult: [{ required: true, message: "请è¾å
¥ç»´ä¿®ç»æ", trigger: "blur" }], |
| | | money: [{ required: true, message: "请è¾å
¥æ¬æ¬¡ç»´ä¿®éé¢", trigger: "change" }], |
| | | maintenanceTime: [{ required: true, message: "è¯·éæ©ç»´ä¿®æ¥æ", trigger: "change" }], |
| | | }; |
| | | |
| | | const setForm = (data) => { |
| | | form.maintenanceName = data.maintenanceName ?? userStore.nickName; |
| | | form.maintenanceResult = data.maintenanceResult; |
| | | form.money = data.money; |
| | | form.maintenanceTime = |
| | | dayjs(data.maintenanceTime).format("YYYY-MM-DD HH:mm:ss") ?? |
| | | dayjs().format("YYYY-MM-DD HH:mm:ss"); |
| | | }; |
| | | |
| | | const sendForm = async () => { |
| | | loading.value = true; |
| | | const form = await maintainFormRef.value.getForm(); |
| | | const { code } = await addMaintain({ id: id.value, ...form }); |
| | | if (code == 200) { |
| | | emits("ok"); |
| | | maintainFormRef.value.resetForm(); |
| | | closeModal(); |
| | | } |
| | | loading.value = false; |
| | | await formRef.value.validate(async (valid) => { |
| | | if (!valid) return; |
| | | loading.value = true; |
| | | const { code } = await addMaintain({ id: id.value, ...form }); |
| | | if (code == 200) { |
| | | emits("ok"); |
| | | resetForm(); |
| | | closeModal(); |
| | | } |
| | | loading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const open = async (id, row) => { |
| | | openModal(id); |
| | | await nextTick(); |
| | | maintainFormRef.value.setForm(row); |
| | | setForm(row); |
| | | }; |
| | | |
| | | defineExpose({ |
| | |
| | | <template> |
| | | <el-dialog v-model="visible" :title="modalOptions.title" @close="close"> |
| | | <RepairForm ref="repairFormRef" /> |
| | | <el-form :model="form" :rules="rules" ref="formRef" label-width="100px"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="设å¤åç§°" prop="deviceLedgerId"> |
| | | <el-select v-model="form.deviceLedgerId" @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> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="è§æ ¼åå·"> |
| | | <el-input v-model="form.deviceModel" placeholder="请è¾å
¥è§æ ¼åå·" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æ¥ä¿®æ¥æ" prop="repairTime"> |
| | | <el-date-picker |
| | | v-model="form.repairTime" |
| | | placeholder="è¯·éæ©æ¥ä¿®æ¥æ" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | type="date" |
| | | clearable |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æ¥ä¿®äºº" prop="repairName"> |
| | | <el-input v-model="form.repairName" placeholder="请è¾å
¥æ¥ä¿®äºº" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="æ
éç°è±¡" prop="remark"> |
| | | <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请è¾å
¥æ
éç°è±¡" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button type="primary" @click="sendForm" :loading="loading"> |
| | | {{ modalOptions.confirmText }} |
| | |
| | | <el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, nextTick } from "vue"; |
| | | import { useModal } from "@/hooks/useModal"; |
| | | import RepairForm from "../Form/RepairForm.vue"; |
| | | import useFormData from "@/hooks/useFormData"; |
| | | import useUserStore from "@/store/modules/user"; |
| | | import { |
| | | addRepair, |
| | | editRepair, |
| | | getRepairById, |
| | | } from "@/api/equipmentManagement/repair"; |
| | | import { getDeviceLedger } from "@/api/equipmentManagement/ledger"; |
| | | import { ElMessage } from "element-plus"; |
| | | |
| | | defineOptions({ |
| | |
| | | }); |
| | | |
| | | const emits = defineEmits(["ok"]); |
| | | |
| | | const repairFormRef = ref(); |
| | | const { |
| | | id, |
| | | visible, |
| | |
| | | closeModal, |
| | | } = useModal({ title: "è®¾å¤æ¥ä¿®" }); |
| | | |
| | | const userStore = useUserStore(); |
| | | const deviceOptions = ref([]); |
| | | const formRef = ref(); |
| | | const { form, resetForm } = useFormData({ |
| | | deviceLedgerId: undefined, // 设å¤Id |
| | | deviceName: undefined, // 设å¤åç§° |
| | | deviceModel: undefined, // è§æ ¼åå· |
| | | repairTime: undefined, // æ¥ä¿®æ¥æ |
| | | repairName: userStore.nickName, // æ¥ä¿®äºº |
| | | remark: undefined, // æ
éç°è±¡ |
| | | }); |
| | | |
| | | const rules = { |
| | | deviceLedgerId: [{ required: true, message: "è¯·éæ©è®¾å¤åç§°", trigger: "change" }], |
| | | repairTime: [{ required: true, message: "è¯·éæ©æ¥ä¿®æ¥æ", trigger: "change" }], |
| | | repairName: [{ required: true, message: "请è¾å
¥æ¥ä¿®äºº", trigger: "blur" }], |
| | | remark: [{ required: true, message: "请è¾å
¥æ
éç°è±¡", trigger: "blur" }], |
| | | }; |
| | | |
| | | const loadDeviceName = async () => { |
| | | const { data } = await getDeviceLedger(); |
| | | deviceOptions.value = data; |
| | | }; |
| | | |
| | | const setDeviceModel = (id) => { |
| | | const option = deviceOptions.value.find((item) => item.id === id); |
| | | form.deviceModel = option ? option.deviceModel : undefined; |
| | | }; |
| | | |
| | | const setForm = (data) => { |
| | | form.deviceLedgerId = data.deviceLedgerId; |
| | | form.deviceName = data.deviceName; |
| | | form.deviceModel = data.deviceModel; |
| | | form.repairTime = data.repairTime; |
| | | form.repairName = data.repairName ?? userStore.nickName; |
| | | form.remark = data.remark; |
| | | }; |
| | | |
| | | const sendForm = async () => { |
| | | loading.value = true; |
| | | const form = await repairFormRef.value.getForm(); |
| | | const { code } = id.value |
| | | ? await editRepair({ id: unref(id), ...form }) |
| | | : await addRepair(form); |
| | | if (code == 200) { |
| | | ElMessage.success(`${id ? "ç¼è¾" : "æ°å¢"}æ¥ä¿®æå`); |
| | | closeModal(); |
| | | emits("ok"); |
| | | } |
| | | loading.value = false; |
| | | await formRef.value.validate(async (valid) => { |
| | | if (!valid) return; |
| | | loading.value = true; |
| | | const payload = { ...form }; |
| | | const { code } = id.value |
| | | ? await editRepair({ id: id.value, ...payload }) |
| | | : await addRepair(payload); |
| | | if (code == 200) { |
| | | ElMessage.success(`${id.value ? "ç¼è¾" : "æ°å¢"}æ¥ä¿®æå`); |
| | | closeModal(); |
| | | emits("ok"); |
| | | } |
| | | loading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const openAdd = async () => { |
| | | openModal(); |
| | | await nextTick(); |
| | | await repairFormRef.value.loadDeviceName(); |
| | | await loadDeviceName(); |
| | | }; |
| | | |
| | | const openEdit = async (id) => { |
| | | const { data } = await getRepairById(id); |
| | | openModal(id); |
| | | const openEdit = async (editId) => { |
| | | const { data } = await getRepairById(editId); |
| | | openModal(editId); |
| | | await nextTick(); |
| | | await repairFormRef.value.loadDeviceName(); |
| | | await repairFormRef.value.setForm(data); |
| | | await loadDeviceName(); |
| | | setForm(data); |
| | | }; |
| | | |
| | | const close = () => { |
| | | repairFormRef.value.resetForm(); |
| | | resetForm(); |
| | | closeModal(); |
| | | }; |
| | | |
| | |
| | | style="width: 240px" |
| | | placeholder="请è¾å
¥è®¾å¤åç§°" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | @change="getTableData" |
| | | /> |
| | | </el-form-item> |
| | |
| | | style="width: 240px" |
| | | placeholder="è¯·éæ©è§æ ¼åå·" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | @change="getTableData" |
| | | /> |
| | | </el-form-item> |
| | |
| | | style="width: 240px" |
| | | placeholder="请è¾å
¥æ
éç°è±¡" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | @change="getTableData" |
| | | /> |
| | | </el-form-item> |
| | |
| | | style="width: 240px" |
| | | placeholder="请è¾å
¥ç»´ä¿®äºº" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | @change="getTableData" |
| | | /> |
| | | </el-form-item> |
| | |
| | | <div class="actions"> |
| | | <el-text class="mx-1" size="large">è®¾å¤æ¥ä¿®</el-text> |
| | | <div> |
| | | <el-button type="success" icon="Van" @click="addRepair"> |
| | | æ°å¢æ¥ä¿® |
| | | </el-button> |
| | | <el-button |
| | | type="primary" |
| | | icon="Plus" |
| | |
| | | @click="addMaintain" |
| | | > |
| | | æ°å¢ç»´ä¿® |
| | | </el-button> |
| | | <el-button type="success" icon="Van" @click="addRepair"> |
| | | æ°å¢æ¥ä¿® |
| | | </el-button> |
| | | <el-button @click="handleOut"> |
| | | å¯¼åº |
| | |
| | | <template #operation="{ row }"> |
| | | <el-button |
| | | type="primary" |
| | | text |
| | | icon="editPen" |
| | | link |
| | | @click="editRepair(row.id)" |
| | | > |
| | | ç¼è¾ |
| | | </el-button> |
| | | <el-button |
| | | type="danger" |
| | | text |
| | | icon="delete" |
| | | link |
| | | @click="delRepairByIds(row.id)" |
| | | > |
| | | å é¤ |
| | |
| | | dataType: "slot", |
| | | slot: "operation", |
| | | align: "center", |
| | | width: "200px", |
| | | width: "150px", |
| | | }, |
| | | ] |
| | | ); |
| | |
| | | <template> |
| | | <el-dialog v-model="visible" :title="modalOptions.title" direction="ltr"> |
| | | <MaintenanceForm ref="maintenanceFormRef" /> |
| | | <el-form :model="form" :rules="rules" label-width="110px" ref="formRef"> |
| | | <el-form-item label="å®é
ä¿å
»äºº" prop="maintenanceActuallyName"> |
| | | <el-input |
| | | v-model="form.maintenanceActuallyName" |
| | | placeholder="请è¾å
¥å®é
ä¿å
»äºº" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="å®é
ä¿å
»æ¥æ" prop="maintenanceActuallyTime"> |
| | | <el-date-picker |
| | | v-model="form.maintenanceActuallyTime" |
| | | placeholder="è¯·éæ©å®é
ä¿å
»æ¥æ" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | type="datetime" |
| | | clearable |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="ä¿å
ȍȾ" prop="maintenanceResult"> |
| | | <el-select v-model="form.maintenanceResult" placeholder="è¯·éæ©ä¿å
ȍȾ"> |
| | | <el-option label="å®å¥½" :value="1"></el-option> |
| | | <el-option label="ç»´ä¿®" :value="0"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="æ¬æ¬¡ç»´ä¿®éé¢" prop="money"> |
| | | <el-input-number v-model="form.money" :min="0" :precision="2" style="width: 100%" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button type="primary" @click="sendForm" :loading="loading"> |
| | | {{ modalOptions.confirmText }} |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import MaintenanceForm from "../Form/MaintenanceForm.vue"; |
| | | import { ref, nextTick } from "vue"; |
| | | import { useModal } from "@/hooks/useModal"; |
| | | import useFormData from "@/hooks/useFormData"; |
| | | import useUserStore from "@/store/modules/user"; |
| | | import dayjs from "dayjs"; |
| | | import { addMaintenance } from "@/api/equipmentManagement/upkeep"; |
| | | |
| | | defineOptions({ |
| | | name: "ä¿å
»æ¨¡ææ¡", |
| | | }); |
| | | |
| | | const maintenanceFormRef = ref(); |
| | | const emits = defineEmits(["ok"]); |
| | | |
| | | const { |
| | |
| | | /** |
| | | * @desc ä¿åä¿å
» |
| | | */ |
| | | const userStore = useUserStore(); |
| | | const formRef = ref(); |
| | | const { form, resetForm } = useFormData({ |
| | | maintenanceActuallyName: undefined, // å®é
ä¿å
»äºº |
| | | maintenanceActuallyTime: undefined, // å®é
ä¿å
»æ¥æ |
| | | maintenanceResult: undefined, // ä¿å
ȍȾ |
| | | money: undefined, // ä¿å
»éé¢ |
| | | }); |
| | | |
| | | const rules = { |
| | | maintenanceActuallyName: [ |
| | | { required: true, message: "请è¾å
¥å®é
ä¿å
»äºº", trigger: "blur" }, |
| | | ], |
| | | maintenanceActuallyTime: [ |
| | | { required: true, message: "è¯·éæ©å®é
ä¿å
»æ¥æ", trigger: "change" }, |
| | | ], |
| | | maintenanceResult: [ |
| | | { required: true, message: "è¯·éæ©ä¿å
ȍȾ", trigger: "change" }, |
| | | ], |
| | | money: [ |
| | | { required: true, message: "请è¾å
¥æ¬æ¬¡ä¿å
»éé¢", trigger: "change" }, |
| | | ], |
| | | }; |
| | | |
| | | const sendForm = async () => { |
| | | loading.value = true; |
| | | const form = await maintenanceFormRef.value.getForm(); |
| | | const { code } = await addMaintenance({ id: id.value, ...form }); |
| | | if (code == 200) { |
| | | emits("ok"); |
| | | maintenanceFormRef.value.resetForm(); |
| | | closeModal(); |
| | | } |
| | | loading.value = false; |
| | | await formRef.value.validate(async (valid) => { |
| | | if (!valid) return; |
| | | loading.value = true; |
| | | const { code } = await addMaintenance({ id: id.value, ...form }); |
| | | if (code == 200) { |
| | | emits("ok"); |
| | | resetForm(); |
| | | closeModal(); |
| | | } |
| | | loading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const open = async (id, row) => { |
| | | openModal(id); |
| | | await nextTick(); |
| | | maintenanceFormRef.value.setForm(row); |
| | | if (!row) { |
| | | resetForm(); |
| | | form.maintenanceActuallyName = userStore.nickName; |
| | | return; |
| | | } |
| | | form.maintenanceActuallyName = row.maintenanceActuallyName ?? userStore.nickName; |
| | | form.maintenanceActuallyTime = row.maintenanceActuallyTime |
| | | ? dayjs(row.maintenanceActuallyTime).format("YYYY-MM-DD HH:mm:ss") |
| | | : undefined; |
| | | form.maintenanceResult = row.maintenanceResult; |
| | | form.money = row.money; |
| | | }; |
| | | defineExpose({ |
| | | open, |
| | |
| | | width="30%" |
| | | @close="close" |
| | | > |
| | | <PlanForm ref="planFormRef"></PlanForm> |
| | | <el-form :model="form" :rules="rules" ref="formRef" label-width="110px"> |
| | | <el-form-item label="设å¤åç§°" prop="deviceLedgerId"> |
| | | <el-select |
| | | v-model="form.deviceLedgerId" |
| | | @change="setDeviceModel" |
| | | placeholder="è¯·éæ©è®¾å¤" |
| | | > |
| | | <el-option |
| | | v-for="(item, index) in deviceOptions" |
| | | :key="index" |
| | | :label="item.deviceName" |
| | | :value="item.id" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="è§æ ¼åå·"> |
| | | <el-input |
| | | v-model="form.deviceModel" |
| | | placeholder="请è¾å
¥è§æ ¼åå·" |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="计åä¿å
»æ¥æ" prop="maintenancePlanTime"> |
| | | <el-date-picker |
| | | style="width: 100%" |
| | | v-model="form.maintenancePlanTime" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | type="date" |
| | | placeholder="è¯·éæ©è®¡åä¿å
»æ¥ææ¥æ" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button type="primary" @click="sendForm" :loading="loading"> |
| | | {{ modalOptions.confirmText }} |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, nextTick, watch } from "vue"; |
| | | import { useModal } from "@/hooks/useModal"; |
| | | import PlanForm from "../Form/PlanForm"; |
| | | import useFormData from "@/hooks/useFormData"; |
| | | import { getDeviceLedger } from "@/api/equipmentManagement/ledger"; |
| | | import dayjs from "dayjs"; |
| | | import { |
| | | addUpkeep, |
| | | editUpkeep, |
| | |
| | | }); |
| | | |
| | | const emits = defineEmits(["ok"]); |
| | | const planFormRef = ref(); |
| | | const { |
| | | id, |
| | | visible, |
| | |
| | | closeModal, |
| | | } = useModal({ title: "设å¤ä¿å
»è®¡å" }); |
| | | |
| | | const openEdit = async (id) => { |
| | | const { data } = await getUpkeepById(id); |
| | | openModal(id); |
| | | const deviceOptions = ref([]); |
| | | const formRef = ref(); |
| | | const { form, resetForm } = useFormData({ |
| | | deviceLedgerId: undefined, // 设å¤Id |
| | | deviceName: undefined, // 设å¤åç§° |
| | | deviceModel: undefined, // è§æ ¼åå· |
| | | maintenancePlanTime: undefined, // 计åä¿å
»æ¥æ |
| | | }); |
| | | |
| | | const rules = { |
| | | deviceLedgerId: [{ required: true, message: "è¯·éæ©è®¾å¤", trigger: "change" }], |
| | | maintenancePlanTime: [ |
| | | { required: true, message: "è¯·éæ©è®¡åä¿å
»æ¥æ", trigger: "change" }, |
| | | ], |
| | | }; |
| | | |
| | | const loadDeviceName = async () => { |
| | | const { data } = await getDeviceLedger(); |
| | | deviceOptions.value = data; |
| | | }; |
| | | |
| | | const setDeviceModel = (id) => { |
| | | const option = deviceOptions.value.find((item) => item.id === id); |
| | | form.deviceModel = option ? option.deviceModel : undefined; |
| | | }; |
| | | |
| | | const setForm = (data) => { |
| | | form.deviceLedgerId = data.deviceLedgerId; |
| | | form.deviceName = data.deviceName; |
| | | form.deviceModel = data.deviceModel; |
| | | form.maintenancePlanTime = dayjs(data.maintenancePlanTime).format( |
| | | "YYYY-MM-DD HH:mm:ss" |
| | | ); |
| | | }; |
| | | |
| | | const openEdit = async (editId) => { |
| | | const { data } = await getUpkeepById(editId); |
| | | openModal(editId); |
| | | await nextTick(); |
| | | await planFormRef.value.setForm(data); |
| | | await loadDeviceName(); |
| | | setForm(data); |
| | | }; |
| | | |
| | | const sendForm = async () => { |
| | | loading.value = true; |
| | | const form = await planFormRef.value.getForm(); |
| | | const { code } = id.value |
| | | ? await editUpkeep({ id: unref(id), ...form }) |
| | | : await addUpkeep(form); |
| | | if (code == 200) { |
| | | ElMessage.success(`${id ? "ç¼è¾" : "æ°å¢"}计åæå`); |
| | | closeModal(); |
| | | emits("ok"); |
| | | } |
| | | loading.value = false; |
| | | await formRef.value.validate(async (valid) => { |
| | | if (!valid) return; |
| | | loading.value = true; |
| | | const payload = { ...form }; |
| | | const { code } = id.value |
| | | ? await editUpkeep({ id: id.value, ...payload }) |
| | | : await addUpkeep(payload); |
| | | if (code == 200) { |
| | | ElMessage.success(`${id.value ? "ç¼è¾" : "æ°å¢"}计åæå`); |
| | | closeModal(); |
| | | emits("ok"); |
| | | } |
| | | loading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const close = () => { |
| | | planFormRef.value.resetForm(); |
| | | resetForm(); |
| | | closeModal(); |
| | | }; |
| | | |
| | | // load device options whenever the dialog opens (covers add and edit) |
| | | watch( |
| | | () => visible.value, |
| | | async (val) => { |
| | | if (val) { |
| | | await nextTick(); |
| | | await loadDeviceName(); |
| | | } |
| | | } |
| | | ); |
| | | |
| | | defineExpose({ |
| | | openModal, |
| | | openEdit, |
| | |
| | | style="width: 240px" |
| | | placeholder="请è¾å
¥è®¾å¤åç§°" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | @change="getTableData" |
| | | /> |
| | | </el-form-item> |
| | |
| | | style="width: 240px" |
| | | placeholder="请è¾å
¥å®é
ä¿å
»äºº" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | @change="getTableData" |
| | | /> |
| | | </el-form-item> |
| | |
| | | <div class="actions"> |
| | | <el-text class="mx-1" size="large">设å¤ä¿å
»</el-text> |
| | | <div> |
| | | <el-button type="success" icon="Van" @click="addPlan"> |
| | | æ°å¢è®¡å |
| | | </el-button> |
| | | <el-button |
| | | type="primary" |
| | | icon="Plus" |
| | |
| | | @click="addMaintain" |
| | | > |
| | | æ°å¢ä¿å
» |
| | | </el-button> |
| | | <el-button type="success" icon="Van" @click="addPlan"> |
| | | æ°å¢è®¡å |
| | | </el-button> |
| | | <el-button @click="handleOut"> |
| | | å¯¼åº |
| | |
| | | <template #operation="{ row }"> |
| | | <el-button |
| | | type="primary" |
| | | text |
| | | icon="editPen" |
| | | link |
| | | @click="editPlan(row.id)" |
| | | > |
| | | ç¼è¾ |
| | | </el-button> |
| | | <el-button |
| | | type="danger" |
| | | text |
| | | icon="delete" |
| | | link |
| | | @click="delRepairByIds(row.id)" |
| | | > |
| | | å é¤ |
| | |
| | | dataType: "slot", |
| | | slot: "operation", |
| | | align: "center", |
| | | width: "200px", |
| | | width: "150px", |
| | | }, |
| | | ]); |
| | | // type == 1å®é
ä¿å
»æ¶é´ 2计åä¿å
»æ¶é´ |
| | |
| | | placeholder="è¯·éæ©" |
| | | :clearable="false" |
| | | > |
| | | <el-option :label="item.label" :value="item.value" v-for="(item,index) in jidu" :key="value" /> |
| | | <el-option :label="item.label" :value="item.value" v-for="(item,index) in jidu" :key="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="åå·¥åç§°:"> |
| | |
| | | @pagination="changePage" |
| | | > |
| | | <template #operation="{ row }"> |
| | | <el-button type="primary" text @click="edit(row)" icon="editPen"> |
| | | <el-button type="primary" link @click="edit(row)"> |
| | | ç¼è¾ |
| | | </el-button> |
| | | <el-button type="primary" :disabled="row.adoptedDate ? true : false" text @click="adopted(row)"> |
| | | <el-button type="success" :disabled="row.adoptedDate ? true : false" link @click="adopted(row)"> |
| | | é¢ç¨ |
| | | </el-button> |
| | | </template> |
| | |
| | | dataType: "slot", |
| | | slot: "operation", |
| | | align: "center", |
| | | width: "200px", |
| | | width: "150px", |
| | | }, |
| | | ] |
| | | ); |