|
|
@@ -3,7 +3,7 @@
|
|
|
v-bind="$attrs"
|
|
|
@register="registerModal"
|
|
|
@ok="handleSubmit"
|
|
|
- title="修改图纸管理"
|
|
|
+ title="图纸管理"
|
|
|
width="900px"
|
|
|
:min-height="600"
|
|
|
:max-height="1000"
|
|
|
@@ -24,7 +24,7 @@
|
|
|
<div class="mine-base-info">
|
|
|
<!-- 添加 key 强制重新渲染 -->
|
|
|
<a-form-item
|
|
|
- v-for="schema in mapEditForm"
|
|
|
+ v-for="schema in visibleFormSchemas"
|
|
|
:key="schema.field + formKey"
|
|
|
:name="schema.field"
|
|
|
:label="schema.label"
|
|
|
@@ -35,6 +35,9 @@
|
|
|
<a-upload
|
|
|
v-model:file-list="formData[schema.field]"
|
|
|
v-bind="schema.componentProps"
|
|
|
+ @change="(info) => handleUploadChange(info, schema.field)"
|
|
|
+ :customRequest="handleCustomUpload"
|
|
|
+ :maxCount="1"
|
|
|
>
|
|
|
<a-button>
|
|
|
<template #icon><UploadOutlined /></template>
|
|
|
@@ -48,6 +51,7 @@
|
|
|
:is="getComponent(schema.component)"
|
|
|
:value="formData[schema.field]"
|
|
|
@update:value="handleUpdateValue(schema.field, $event)"
|
|
|
+ @change="(val) => handleComponentChange(schema.field, val, schema)"
|
|
|
v-bind="schema.componentProps"
|
|
|
:placeholder="`请输入${schema.label}`"
|
|
|
style="width: 100%"
|
|
|
@@ -64,13 +68,19 @@
|
|
|
import { ref, computed, nextTick } from 'vue';
|
|
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
import { mapEditForm } from '../cad.data';
|
|
|
- import { Select, Input, Upload, message } from 'ant-design-vue';
|
|
|
+ import { Select, Input, message } from 'ant-design-vue';
|
|
|
import { UploadOutlined } from '@ant-design/icons-vue';
|
|
|
import MineCascader from '/@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
|
|
|
import type { FormInstance } from 'ant-design-vue/es/form';
|
|
|
+ import { uploadFile, updateMineFile, addMineFile } from '../cad.api';
|
|
|
+ import type { UploadChangeParam, UploadFile } from 'ant-design-vue/es/upload/interface';
|
|
|
+ import dayjs from 'dayjs';
|
|
|
+ import { useMineDepartmentStore } from '/@/store/modules/mine';
|
|
|
|
|
|
// 表单 key（用于强制重新渲染）
|
|
|
const formKey = ref(0);
|
|
|
+ // 标识当前是否为新增模式
|
|
|
+ const isAddMode = ref(false);
|
|
|
|
|
|
// 组件映射表（Upload 单独处理）
|
|
|
const componentMap: Record<string, any> = {
|
|
|
@@ -88,13 +98,19 @@
|
|
|
|
|
|
// 表单数据
|
|
|
const formData = ref({
|
|
|
- mineCodeList: '',
|
|
|
- mappingName: '',
|
|
|
- mappingClass: '',
|
|
|
- mappingType: '',
|
|
|
- mappingAttach: [] as any[],
|
|
|
+ id: '',
|
|
|
+ mineCode: '',
|
|
|
+ mineName: '',
|
|
|
+ fileName: '',
|
|
|
+ fileType: '',
|
|
|
+ fileAttach: [] as any[],
|
|
|
remark: '',
|
|
|
+ filePath: '',
|
|
|
+ createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
});
|
|
|
+
|
|
|
+ // 获取部门信息
|
|
|
+ const mineStore = useMineDepartmentStore();
|
|
|
|
|
|
// 表单规则
|
|
|
const formRules = computed(() => {
|
|
|
@@ -107,56 +123,186 @@
|
|
|
return rules;
|
|
|
});
|
|
|
|
|
|
+ const visibleFormSchemas = computed(() => {
|
|
|
+ // 定义新增模式下允许显示的字段
|
|
|
+ const allowedFieldsInAddMode = ['mineCode', 'fileName', 'fileType', 'fileAttach' , 'remark'];
|
|
|
+ const allowedFieldsInEditMode = ['mineCode', 'fileName', 'fileType', 'fileAttach', 'remark'];
|
|
|
+
|
|
|
+ return mapEditForm.filter(item => {
|
|
|
+ // 1. 基础隐藏逻辑
|
|
|
+ if (item.ifShow === false || item.show === false) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 2. 如果是新增模式，只保留允许显示的字段
|
|
|
+ if (isAddMode.value) {
|
|
|
+ return allowedFieldsInAddMode.includes(item.field);
|
|
|
+ }
|
|
|
+
|
|
|
+ return allowedFieldsInEditMode.includes(item.field);;
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
// 获取组件
|
|
|
const getComponent = (componentName: string) => {
|
|
|
return componentMap[componentName] || Input;
|
|
|
};
|
|
|
|
|
|
- // 处理值更新（替代 v-model）
|
|
|
+ // 处理值更新
|
|
|
const handleUpdateValue = (field: string, value: any) => {
|
|
|
formData.value[field as keyof typeof formData.value] = value;
|
|
|
};
|
|
|
|
|
|
+ const handleComponentChange = (field: string, value: any, schema: any) => {
|
|
|
+ console.log(`字段 ${field} 触发 change 事件，新值为:`, schema, value);
|
|
|
+
|
|
|
+ if (field === 'mineCode') {
|
|
|
+ if (value) {
|
|
|
+ const depart = mineStore.findDepartById(value, mineStore.getDepartTree);
|
|
|
+ if (depart) {
|
|
|
+ // 同步更新 formData 中的 mineName
|
|
|
+ formData.value.mineName = depart.departName;
|
|
|
+ console.log('自动填充矿区名称:', depart.departName);
|
|
|
+ } else {
|
|
|
+ // 如果没找到，可能数据还没加载完，或者 ID 无效
|
|
|
+ console.warn('未找到对应的矿区名称');
|
|
|
+ formData.value.mineName = '';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果清空了选择，也清空名称
|
|
|
+ formData.value.mineName = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 自定义上传请求
|
|
|
+ * 使用 defHttp 封装的 uploadFile 接口
|
|
|
+ */
|
|
|
+ const handleCustomUpload = async (options: any) => {
|
|
|
+ const { file, onSuccess, onError } = options;
|
|
|
+
|
|
|
+ // 构建 FormData
|
|
|
+ const formDataObj = new FormData();
|
|
|
+ formDataObj.append('file', file);
|
|
|
+ // 添加其他参数
|
|
|
+ // formDataObj.append('biz', 'cadFile');
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 调用上传接口
|
|
|
+ const res = await uploadFile(formDataObj);
|
|
|
+
|
|
|
+ if (res&& res.success && res.message) {
|
|
|
+ // 成功回调，将后端返回的路径挂载到 file 对象上，方便后续提交或展示
|
|
|
+ formData.value.filePath = res.message;
|
|
|
+ const uploadedFileItem = {
|
|
|
+ uid: file.uid || Date.now(), // 唯一标识
|
|
|
+ name: file.name, // 文件名
|
|
|
+ status: 'done', // 状态：完成
|
|
|
+ url: res.message, // 预览地址（如果有）
|
|
|
+ response: res // 原始响应
|
|
|
+ };
|
|
|
+
|
|
|
+ // 更新表单中的 fileAttach 数组，触发视图更新
|
|
|
+ formData.value.fileAttach = [uploadedFileItem];
|
|
|
+ onSuccess(res, file);
|
|
|
+ } else {
|
|
|
+ throw new Error(`${res.message}`);
|
|
|
+ }
|
|
|
+ } catch (err: any) {
|
|
|
+ console.error('上传错误:', err);
|
|
|
+ message.error(err.message || '文件上传失败');
|
|
|
+ onError(err);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 上传状态改变处理
|
|
|
+ * @param info 上传信息
|
|
|
+ * @param field 当前绑定的表单字段名
|
|
|
+ */
|
|
|
+ const handleUploadChange = async (info: UploadChangeParam, field: string) => {
|
|
|
+ const { fileList } = info;
|
|
|
+ // const status = info.file.status;
|
|
|
+
|
|
|
+ // // 1. 更新文件列表显示
|
|
|
+ // // formData.value[field as keyof typeof formData.value] = fileList;
|
|
|
+
|
|
|
+ // // 2. 如果上传成功，提取 filePath 并存储
|
|
|
+
|
|
|
+ // if (info.file.status === 'done') {
|
|
|
+ // const response = info.file.response;
|
|
|
+ // // 假设后端返回的 message 就是我们要的 filePath
|
|
|
+ // const filePath = response?.message;
|
|
|
+
|
|
|
+ // if (filePath) {
|
|
|
+ // const currentFile = fileList[fileList.length - 1];
|
|
|
+ // if(currentFile) {
|
|
|
+ // currentFile.customPath = filePath;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // message.success(`${info.file.name} 文件上传成功`);
|
|
|
+ // }
|
|
|
+ // } else if (info.file.status === 'error') {
|
|
|
+ // message.error(`${info.file.name} 文件上传失败`);
|
|
|
+ // }
|
|
|
+ };
|
|
|
+
|
|
|
// 注册模态框并初始化数据
|
|
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
|
|
setModalProps({ confirmLoading: false });
|
|
|
// 先重置 formKey 强制重新渲染
|
|
|
formKey.value++;
|
|
|
+ // 如果没有data或者id为空则为新增模式
|
|
|
+ isAddMode.value = !data || !data.id;
|
|
|
|
|
|
// 重置表单数据
|
|
|
await nextTick();
|
|
|
formData.value = {
|
|
|
- mineCodeList: '',
|
|
|
- mappingName: '',
|
|
|
- mappingClass: '',
|
|
|
- mappingType: '',
|
|
|
- mappingAttach: [],
|
|
|
+ id: '',
|
|
|
+ mineCode: '',
|
|
|
+ mineName: '',
|
|
|
+ fileName: '',
|
|
|
+ fileType: '',
|
|
|
+ fileAttach: [],
|
|
|
+ filePath: '',
|
|
|
remark: '',
|
|
|
+ createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
};
|
|
|
- // 填充现有数据
|
|
|
- if (data) {
|
|
|
+ // 编辑模式时填充现有数据
|
|
|
+ if (data && !isAddMode.value) {
|
|
|
const record = data;
|
|
|
- console.log('当前记录数据：', record);
|
|
|
+ // 处理文件回显
|
|
|
+ let fileList: UploadFile[] = [];
|
|
|
+ if (record.filePath) {
|
|
|
+
|
|
|
+ const originalFileName = record.filePath.split('/').pop() || record.filePath.split('\\').pop() || '已上传文件';
|
|
|
+ // 后端返回了 filePath，构造一个 fake file 对象用于展示
|
|
|
+ fileList = [{
|
|
|
+ uid: '-1',
|
|
|
+ name: originalFileName,
|
|
|
+ status: 'done',
|
|
|
+ url: record.filePath,
|
|
|
+ response: { message: record.filePath }
|
|
|
+ } as UploadFile];
|
|
|
+ }
|
|
|
|
|
|
// 使用 nextTick 确保数据填充后视图更新
|
|
|
await nextTick();
|
|
|
formData.value = {
|
|
|
- mineCodeList: record.mineCode || record.mineCodeList || '',
|
|
|
- mappingName: record.mappingName || '',
|
|
|
- mappingClass: record.mappingClass || '',
|
|
|
- mappingType: record.mappingType || '',
|
|
|
- mappingAttach: record.mappingAttach || [],
|
|
|
+ id: record.id || '',
|
|
|
+ mineCode: record.mineCode || '',
|
|
|
+ mineName: record.mineName || '',
|
|
|
+ fileName: record.fileName || '',
|
|
|
+ fileType: record.fileType || '',
|
|
|
+ fileAttach: fileList || [],
|
|
|
+ filePath: record.filePath || '',
|
|
|
remark: record.remark || '',
|
|
|
+ createTime: record.createTime || dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
};
|
|
|
|
|
|
- console.log('填充后的表单数据：', formData.value);
|
|
|
}
|
|
|
-
|
|
|
- // 重置表单校验状态
|
|
|
- // if (formRef.value) {
|
|
|
- // await nextTick();
|
|
|
- // formRef.value.resetFields();
|
|
|
- // }
|
|
|
});
|
|
|
|
|
|
// 提交表单处理
|
|
|
@@ -167,17 +313,28 @@
|
|
|
|
|
|
setModalProps({ confirmLoading: true });
|
|
|
|
|
|
- const result = {
|
|
|
+ // 构造提交数据
|
|
|
+ const submitData = {
|
|
|
...formData.value,
|
|
|
- mineCode: formData.value.mineCodeList,
|
|
|
};
|
|
|
+
|
|
|
+ submitData.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ delete submitData.fileAttach;
|
|
|
+
|
|
|
+ // 调用更新接口
|
|
|
+ await updateMineFile(submitData);
|
|
|
+ if (isAddMode.value) {
|
|
|
+ await addMineFile(submitData);
|
|
|
+ } else {
|
|
|
+ await updateMineFile(submitData);
|
|
|
+ }
|
|
|
|
|
|
- console.log('最终提交数据：', result);
|
|
|
- emit('success', result);
|
|
|
+ message.success(isAddMode.value ? '新增成功' : '修改成功');
|
|
|
+ emit('success',true);
|
|
|
closeModal();
|
|
|
} catch (error: any) {
|
|
|
console.error('提交失败：', error);
|
|
|
- message.error(error.message || '表单校验失败，请检查必填项');
|
|
|
+ message.error(error.message || '操作失败，请检查必填项');
|
|
|
} finally {
|
|
|
setModalProps({ confirmLoading: false });
|
|
|
}
|
wangkeyi