|
|
@@ -9,335 +9,79 @@
|
|
|
:max-height="1000"
|
|
|
scrollable
|
|
|
centered
|
|
|
- destroyOnClose
|
|
|
:bodyStyle="{ padding: '20px' }"
|
|
|
>
|
|
|
- <a-form
|
|
|
- ref="formRef"
|
|
|
- :model="formData"
|
|
|
- :rules="formRules"
|
|
|
- layout="horizontal"
|
|
|
- :label-col="{ span: 4 }"
|
|
|
- :wrapper-col="{ span: 20 }"
|
|
|
- >
|
|
|
- <div class="edit-container">
|
|
|
- <div class="mine-base-info">
|
|
|
- <!-- 添加 key 强制重新渲染 -->
|
|
|
- <a-form-item
|
|
|
- v-for="schema in visibleFormSchemas"
|
|
|
- :key="schema.field + formKey"
|
|
|
- :name="schema.field"
|
|
|
- :label="schema.label"
|
|
|
- :rules="schema.rules"
|
|
|
- >
|
|
|
- <!-- Upload 组件特殊处理 -->
|
|
|
- <template v-if="schema.component === 'Upload'">
|
|
|
- <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>
|
|
|
- 上传文件
|
|
|
- </a-button>
|
|
|
- </a-upload>
|
|
|
- </template>
|
|
|
- <!-- 其他组件动态渲染 -->
|
|
|
- <template v-else>
|
|
|
- <component
|
|
|
- :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%"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </a-form-item>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </a-form>
|
|
|
+ <BasicForm @register="register">
|
|
|
+ <template #fileupload="{ model, field }">
|
|
|
+ <Upload v-model:file-list="model[field]" :maxCount="1" :customRequest="handleCustomUpload">
|
|
|
+ <a-button>
|
|
|
+ <template #icon><UploadOutlined /></template>
|
|
|
+ 上传文件
|
|
|
+ </a-button>
|
|
|
+ </Upload>
|
|
|
+ </template>
|
|
|
+ </BasicForm>
|
|
|
</BasicModal>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, computed, nextTick } from 'vue';
|
|
|
+ import { message, Upload } from 'ant-design-vue';
|
|
|
+ import { formSchema } from '../cad.data';
|
|
|
+ import { BasicForm, useForm } from '/@/components/Form';
|
|
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
- import { mapEditForm } from '../cad.data';
|
|
|
- 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 vjmap from 'vjmap';
|
|
|
+ import { env } from '../env';
|
|
|
import dayjs from 'dayjs';
|
|
|
- import { useMineDepartmentStore } from '/@/store/modules/mine';
|
|
|
+ import { addMineFile, updateMineFile } from '../cad.api';
|
|
|
|
|
|
- // 表单 key（用于强制重新渲染）
|
|
|
- const formKey = ref(0);
|
|
|
- // 标识当前是否为新增模式
|
|
|
- const isAddMode = ref(false);
|
|
|
-
|
|
|
- // 组件映射表（Upload 单独处理）
|
|
|
- const componentMap: Record<string, any> = {
|
|
|
- Input,
|
|
|
- Select,
|
|
|
- InputTextArea: Input.TextArea,
|
|
|
- MineCascader,
|
|
|
- };
|
|
|
-
|
|
|
- // 定义事件发射
|
|
|
const emit = defineEmits(['success']);
|
|
|
|
|
|
- // 表单实例
|
|
|
- const formRef = ref<FormInstance>();
|
|
|
-
|
|
|
- // 表单数据
|
|
|
- const formData = ref({
|
|
|
- id: '',
|
|
|
- mineCode: '',
|
|
|
- mineName: '',
|
|
|
- fileName: '',
|
|
|
- fileType: '',
|
|
|
- fileAttach: [] as any[],
|
|
|
- remark: '',
|
|
|
- filePath: '',
|
|
|
- createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ const [register, { setFieldsValue, resetFields, validate }] = useForm({
|
|
|
+ schemas: formSchema,
|
|
|
+ showActionButtonGroup: false,
|
|
|
});
|
|
|
-
|
|
|
- // 获取部门信息
|
|
|
- const mineStore = useMineDepartmentStore();
|
|
|
|
|
|
- // 表单规则
|
|
|
- const formRules = computed(() => {
|
|
|
- const rules: Record<string, any> = {};
|
|
|
- mapEditForm.forEach((item) => {
|
|
|
- if (item.rules) {
|
|
|
- rules[item.field] = item.rules;
|
|
|
- }
|
|
|
- });
|
|
|
- return rules;
|
|
|
+ // 注册模态框并初始化数据
|
|
|
+ const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
|
|
|
+ setModalProps({ confirmLoading: false });
|
|
|
+
|
|
|
+ resetFields().then(() => setFieldsValue(data));
|
|
|
});
|
|
|
|
|
|
- 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);;
|
|
|
- });
|
|
|
- });
|
|
|
+ async function handleSubmit() {
|
|
|
+ const formData = await validate();
|
|
|
|
|
|
- // 获取组件
|
|
|
- const getComponent = (componentName: string) => {
|
|
|
- return componentMap[componentName] || Input;
|
|
|
- };
|
|
|
+ setModalProps({ confirmLoading: true });
|
|
|
|
|
|
- // 处理值更新
|
|
|
- const handleUpdateValue = (field: string, value: any) => {
|
|
|
- formData.value[field as keyof typeof formData.value] = value;
|
|
|
- };
|
|
|
+ formData.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
|
|
|
|
|
- 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 = '';
|
|
|
- }
|
|
|
+ if (!formData.id) {
|
|
|
+ await addMineFile(formData);
|
|
|
+ message.success('新增成功');
|
|
|
+ } else {
|
|
|
+ await updateMineFile(formData);
|
|
|
+ message.success('修改成功');
|
|
|
}
|
|
|
-
|
|
|
- };
|
|
|
|
|
|
- /**
|
|
|
- * 自定义上传请求
|
|
|
- * 使用 defHttp 封装的 uploadFile 接口
|
|
|
- */
|
|
|
- const handleCustomUpload = async (options: any) => {
|
|
|
+ emit('success', true);
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+
|
|
|
+ async function handleCustomUpload(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);
|
|
|
+ const svc = new vjmap.Service(env.serviceUrl, env.accessToken);
|
|
|
+ const res = await svc.uploadMap(file);
|
|
|
|
|
|
- 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}`);
|
|
|
- }
|
|
|
+ setFieldsValue({ wjId: res.mapid });
|
|
|
+ onSuccess(res);
|
|
|
} 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 = {
|
|
|
- id: '',
|
|
|
- mineCode: '',
|
|
|
- mineName: '',
|
|
|
- fileName: '',
|
|
|
- fileType: '',
|
|
|
- fileAttach: [],
|
|
|
- filePath: '',
|
|
|
- remark: '',
|
|
|
- createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- };
|
|
|
- // 编辑模式时填充现有数据
|
|
|
- if (data && !isAddMode.value) {
|
|
|
- const record = data;
|
|
|
- // 处理文件回显
|
|
|
- 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 = {
|
|
|
- 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'),
|
|
|
- };
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 提交表单处理
|
|
|
- async function handleSubmit() {
|
|
|
- try {
|
|
|
- if (!formRef.value) return;
|
|
|
- await formRef.value.validate();
|
|
|
-
|
|
|
- setModalProps({ confirmLoading: true });
|
|
|
-
|
|
|
- // 构造提交数据
|
|
|
- const submitData = {
|
|
|
- ...formData.value,
|
|
|
- };
|
|
|
-
|
|
|
- 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);
|
|
|
- }
|
|
|
-
|
|
|
- message.success(isAddMode.value ? '新增成功' : '修改成功');
|
|
|
- emit('success',true);
|
|
|
- closeModal();
|
|
|
- } catch (error: any) {
|
|
|
- console.error('提交失败：', error);
|
|
|
- message.error(error.message || '操作失败，请检查必填项');
|
|
|
- } finally {
|
|
|
- setModalProps({ confirmLoading: false });
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -348,4 +92,4 @@
|
|
|
border-radius: 5px;
|
|
|
background-color: #f8f9fc;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
houzekong