From e5c3a10ffc181fadd32c19ed0dc566d8a0cb93d7 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 17 三月 2026 16:10:59 +0800
Subject: [PATCH] fix: 库存报表页面未做页码分页（仓储物流的入库管理也没有分页）
---
src/views/equipmentManagement/repair/Modal/RepairModal.vue | 318 ++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 280 insertions(+), 38 deletions(-)
diff --git a/src/views/equipmentManagement/repair/Modal/RepairModal.vue b/src/views/equipmentManagement/repair/Modal/RepairModal.vue
index 586960d..efbb17f 100644
--- a/src/views/equipmentManagement/repair/Modal/RepairModal.vue
+++ b/src/views/equipmentManagement/repair/Modal/RepairModal.vue
@@ -1,24 +1,117 @@
<template>
- <el-dialog v-model="visible" :title="modalOptions.title" @close="close">
- <RepairForm ref="repairFormRef" />
- <template #footer>
- <el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
- <el-button type="primary" @click="sendForm" :loading="loading">
- {{ modalOptions.confirmText }}
- </el-button>
- </template>
- </el-dialog>
+ <FormDialog
+ v-model="visible"
+ :title="id ? '缂栬緫璁惧鎶ヤ慨' : '鏂板璁惧鎶ヤ慨'"
+ width="800px"
+ @confirm="sendForm"
+ @cancel="handleCancel"
+ @close="handleClose"
+ >
+ <el-form :model="form" label-width="100px">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="璁惧鍚嶇О">
+ <el-select v-model="form.deviceLedgerId" @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-col :span="12">
+ <el-form-item label="鎶ヤ慨鏃ユ湡">
+ <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="鎶ヤ慨浜�">
+ <el-input v-model="form.repairName" placeholder="璇疯緭鍏ユ姤淇汉" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row v-if="id">
+ <el-col :span="12">
+ <el-form-item label="鎶ヤ慨鐘舵��">
+ <el-select v-model="form.status">
+ <el-option label="寰呯淮淇�" :value="0"></el-option>
+ <el-option label="瀹岀粨" :value="1"></el-option>
+ <el-option label="澶辫触" :value="2"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="24">
+ <el-form-item label="鏁呴殰鐜拌薄">
+ <el-input
+ v-model="form.remark"
+ :rows="2"
+ type="textarea"
+ placeholder="璇疯緭鍏ユ晠闅滅幇璞�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="24">
+ <el-form-item label="鐜板満鐓х墖">
+ <div class="repair-upload-area">
+ <el-upload
+ v-model:file-list="uploadFileList"
+ :action="uploadUrl"
+ :headers="uploadHeaders"
+ accept="image/*"
+ list-type="picture-card"
+ :limit="uploadLimit"
+ :on-success="handleUploadSuccess"
+ :on-remove="handleRemoveFile"
+ :before-upload="beforeUpload"
+ >
+ <el-icon><Plus /></el-icon>
+ </el-upload>
+ <div v-if="repairFileList.length === 0" class="upload-tip">璇蜂笂浼犵幇鍦虹収鐗囷紝鏈�澶� {{ uploadLimit }} 寮�</div>
+ </div>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </FormDialog>
</template>
<script setup>
-import { useModal } from "@/hooks/useModal";
-import RepairForm from "../Form/RepairForm.vue";
+import FormDialog from "@/components/Dialog/FormDialog.vue";
import {
addRepair,
editRepair,
getRepairById,
} from "@/api/equipmentManagement/repair";
import { ElMessage } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
+import dayjs from "dayjs";
+import useFormData from "@/hooks/useFormData";
+import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
+import useUserStore from "@/store/modules/user";
+import { getToken } from "@/utils/auth";
defineOptions({
name: "璁惧鎶ヤ慨寮圭獥",
@@ -26,45 +119,194 @@
const emits = defineEmits(["ok"]);
-const repairFormRef = ref();
-const {
- id,
- visible,
- loading,
- openModal,
- modalOptions,
- handleConfirm,
- closeModal,
-} = useModal({ title: "璁惧鎶ヤ慨" });
+const id = ref();
+const visible = ref(false);
+const loading = ref(false);
+
+const userStore = useUserStore();
+const deviceOptions = ref([]);
+
+// 鐜板満鐓х墖涓婁紶锛堜笌 APP 瀛楁涓�鑷达細fileList / commonFileList锛�
+const uploadUrl = import.meta.env.VITE_APP_BASE_API + "/file/upload";
+const uploadLimit = 10;
+const uploadFileList = ref([]);
+const repairFileList = ref([]);
+const uploadHeaders = { Authorization: "Bearer " + getToken() };
+const baseApi = import.meta.env.VITE_APP_BASE_API || "";
+
+const formatFileUrl = (url) => {
+ if (!url) return "";
+ if (url.startsWith("http://") || url.startsWith("https://")) return url;
+ const isLocalAbsolutePath = /^[a-zA-Z]:\\|^\\|^\//.test(url);
+ if (isLocalAbsolutePath) {
+ return url;
+ }
+ const path = url.replace(/^\/+/, "");
+ return path ? baseApi + "/" + path : baseApi;
+};
+
+const loadDeviceName = async () => {
+ const { data } = await getDeviceLedger();
+ deviceOptions.value = data;
+};
+
+const { form, resetForm } = useFormData({
+ deviceLedgerId: undefined,
+ deviceName: undefined,
+ deviceModel: undefined,
+ repairTime: dayjs().format("YYYY-MM-DD"),
+ repairName: userStore.nickName,
+ remark: undefined,
+ status: 0,
+});
+
+const setDeviceModel = (deviceId) => {
+ const option = deviceOptions.value.find((item) => item.id === deviceId);
+ form.deviceModel = option.deviceModel;
+};
+
+const beforeUpload = (file) => {
+ const isImage = file.type.startsWith("image/");
+ if (!isImage) {
+ ElMessage.warning("鍙兘涓婁紶鍥剧墖");
+ return false;
+ }
+ if (repairFileList.value.length >= uploadLimit) {
+ ElMessage.warning(`鏈�澶氫笂浼� ${uploadLimit} 寮犲浘鐗嘸);
+ return false;
+ }
+ return true;
+};
+
+const handleUploadSuccess = (res, file) => {
+ if (res?.code !== 200 && res?.code !== 0) {
+ ElMessage.error(res?.msg || "涓婁紶澶辫触");
+ const idx = uploadFileList.value.findIndex((f) => f.uid === file.uid);
+ if (idx > -1) uploadFileList.value.splice(idx, 1);
+ return;
+ }
+ const d = res?.data !== undefined ? res.data : res;
+ if (!d) return;
+ const item = {
+ uid: file.uid,
+ id: d.id,
+ url: d.url || d.downloadUrl || d.tempPath,
+ downloadUrl: d.downloadUrl || d.url,
+ bucketFilename: d.bucketFilename || d.originalFilename || file.name,
+ originalFilename: d.originalFilename || d.bucketFilename || file.name,
+ name: d.bucketFilename || d.originalFilename || file.name,
+ size: d.size ?? d.byteSize ?? file.size,
+ byteSize: d.byteSize ?? d.size ?? file.size,
+ uploadResponse: res,
+ };
+ repairFileList.value.push(item);
+};
+
+const handleRemoveFile = (file) => {
+ const targetUrl = file.url || file.response?.data?.url || file.response?.data?.downloadUrl;
+ repairFileList.value = repairFileList.value.filter(
+ (f) => f.uid !== file.uid && (f.url || f.downloadUrl) !== targetUrl
+ );
+};
+
+const setForm = (data) => {
+ form.deviceLedgerId = data.deviceLedgerId;
+ form.deviceName = data.deviceName;
+ form.deviceModel = data.deviceModel;
+ form.repairTime = data.repairTime;
+ form.repairName = data.repairName;
+ form.remark = data.remark;
+ form.status = data.status;
+ const list = data.fileList || data.commonFileList || [];
+ repairFileList.value = (Array.isArray(list) ? list : []).map((f, i) => ({
+ uid: f.id || "existing-" + i,
+ id: f.id,
+ url: f.url || f.downloadUrl,
+ downloadUrl: f.downloadUrl || f.url,
+ bucketFilename: f.bucketFilename || f.originalFilename || f.name,
+ originalFilename: f.originalFilename || f.bucketFilename || f.name,
+ name: f.bucketFilename || f.originalFilename || f.name || "鍥剧墖",
+ size: f.size ?? f.byteSize,
+ byteSize: f.byteSize ?? f.size,
+ ...f,
+ }));
+ uploadFileList.value = repairFileList.value.map((f, i) => ({
+ uid: f.uid || "existing-" + i,
+ name: f.name || f.bucketFilename || "鍥剧墖",
+ url: formatFileUrl(f.url || f.downloadUrl),
+ status: "success",
+ }));
+};
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");
+ try {
+ const fileList = repairFileList.value.map((f) => {
+ const d = f.uploadResponse?.data !== undefined ? f.uploadResponse.data : f.uploadResponse;
+ return d ? { ...d } : (f.id || f.url ? { ...f } : null);
+ }).filter(Boolean);
+ const submitData = { ...form };
+ if (fileList.length) submitData.fileList = fileList;
+ const { code } = id.value
+ ? await editRepair({ id: unref(id), ...submitData })
+ : await addRepair(submitData);
+ if (code == 200) {
+ ElMessage.success(`${id.value ? "缂栬緫" : "鏂板"}鎶ヤ慨鎴愬姛`);
+ visible.value = false;
+ emits("ok");
+ }
+ } finally {
+ loading.value = false;
}
- loading.value = false;
};
-const openEdit = async (id) => {
- const { data } = await getRepairById(id);
- openModal(id);
+const handleCancel = () => {
+ resetForm();
+ repairFileList.value = [];
+ uploadFileList.value = [];
+ visible.value = false;
+};
+
+const handleClose = () => {
+ resetForm();
+ repairFileList.value = [];
+ uploadFileList.value = [];
+ visible.value = false;
+};
+
+const openAdd = async () => {
+ id.value = undefined;
+ repairFileList.value = [];
+ uploadFileList.value = [];
+ visible.value = true;
await nextTick();
- await repairFormRef.value.setForm(data);
+ await loadDeviceName();
};
-const close = () => {
- repairFormRef.value.resetForm();
- closeModal();
+const openEdit = async (editId) => {
+ const { data } = await getRepairById(editId);
+ id.value = editId;
+ visible.value = true;
+ await nextTick();
+ await loadDeviceName();
+ setForm(data);
};
defineExpose({
- openModal,
+ openAdd,
openEdit,
});
</script>
+
+<style lang="scss" scoped>
+.repair-upload-area {
+ :deep(.el-upload-list--picture-card) {
+ --el-upload-list-picture-card-size: 100px;
+ }
+}
+.upload-tip {
+ font-size: 12px;
+ color: var(--el-text-color-secondary);
+ margin-top: 8px;
+}
+</style>
--
Gitblit v1.9.3