feat: 添加购买人自拍和发票附件上传功能，优化附件管理逻辑

apps/web-ele/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElTag: typeof import('element-plus/es')['ElTag']
     RouterLink: typeof import('vue-router')['RouterLink']

apps/web-ele/src/api/file/index.ts

@@ -1,8 +1,9 @@
 import type { AttachmentEntity, PageConfig } from '@vben/types';
 
+import { useAccessStore } from '@vben/stores';
 import { parseQueryValues } from '@vben/utils';
 
-import { requestClient } from '#/api/request';
+import { baseRequestClient, requestClient } from '#/api/request';
 
 interface AttachmentPartialEntity
   extends Partial<Omit<AttachmentEntity, 'attid'>> {
@@ -28,22 +29,32 @@ export async function getAttachmentListApi(params: AttachmentQueryParams) {
 /**
  * 新增图片并返回id
  */
-export async function addImageApi(params: AttachmentEntity) {
-  return requestClient.post<any>('/api/attachment/addimg?pagevalue=93', {
-    ...params,
-  });
+export async function addImageApi(data: FormData) {
+  const token = useAccessStore().accessToken;
+  return baseRequestClient.post<any>(
+    '/api/attachment/addtopath?pagevalue=93',
+    data,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        token,
+      },
+    },
+  );
 }
 
 /**
  * 添加附件记录并返回路径
  */
-export async function addAttachmentApi(data: { id: number }) {
-  return requestClient.post<any>(
+export async function addAttachmentApi(data: FormData) {
+  return baseRequestClient.post<any>(
     '/api/attachment/addtopath?pagevalue=94',
+    data,
     {
-      ...parseQueryValues(data),
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
     },
-    { formatData: true },
   );
 }
 

apps/web-ele/src/views/order-manage/form.vue

@@ -10,7 +10,7 @@ import { ElImage, ElMessage } from 'element-plus';
 
 import { useVbenForm, z } from '#/adapter/form';
 import { getDictListApi } from '#/api/dict';
-import { getAttachmentListApi } from '#/api/file';
+import { addImageApi, getAttachmentListApi } from '#/api/file';
 import { addOrdersApi, editOrdersApi, getOrdersDetailApi } from '#/api/orders';
 
 const emit = defineEmits(['finish']);
@@ -27,6 +27,7 @@ const getTitle = computed(() => titleMap[formType.value]);
 
 const invoiceDataList = ref<any[]>([{}]);
 const certificateDataList = ref<any[]>([]);
+const buyerPhotoDataList = ref<any[]>([]);
 
 const [BaseForm, baseFormApi] = useVbenForm({
   showDefaultActions: false,
@@ -211,6 +212,7 @@ const [Modal, modalApi] = useVbenModal({
 
         invoiceDataList.value = [];
         certificateDataList.value = [];
+        buyerPhotoDataList.value = [];
 
         // 去掉schema中invoiceAttachments和certificateAttachments字段，避免页面不更新
         baseFormApi.setState({
@@ -219,7 +221,8 @@ const [Modal, modalApi] = useVbenModal({
             ?.schema?.filter(
               (item) =>
                 item.fieldName !== 'invoiceAttachments' &&
-                item.fieldName !== 'certificateAttachments',
+                item.fieldName !== 'certificateAttachments' &&
+                item.fieldName !== 'buyerPhotoAttachments',
             ),
         });
 
@@ -228,6 +231,7 @@ const [Modal, modalApi] = useVbenModal({
           getOrderDetail(data.value.row.ordersid, baseFormApi),
           getOrderInvoice(data.value.row.ordersid, filePrefix),
           getOrderCertificate(data.value.row.ordersid, filePrefix),
+          getOrderBuyerPhoto(data.value.row.ordersid, filePrefix),
         ]);
 
         // 更新schema
@@ -238,19 +242,32 @@ const [Modal, modalApi] = useVbenModal({
           (item) => item.fieldName === 'invoiceAttachments',
         );
 
-        // 如果不存在，则添加发票附件字段
-        if (!hasInvoiceAttachments && invoiceDataList.value.length > 0) {
+        // 检查schema中是否已存在certificateAttachments字段
+        const hasCertificateAttachments = schema.some(
+          (item) => item.fieldName === 'certificateAttachments',
+        );
+
+        // 检查schema中是否已存在buyerPhotoAttachments字段
+        const hasBuyerPhotoAttachments = schema.some(
+          (item) => item.fieldName === 'buyerPhotoAttachments',
+        );
+
+        // 首先添加购买人照片
+        // 如果不存在，则添加购买人自拍附件字段
+        if (!hasBuyerPhotoAttachments && buyerPhotoDataList.value.length > 0) {
           baseFormApi.setState({
             schema: [
-              ...schema,
+              ...(baseFormApi.getState()?.schema ?? []),
               {
                 component: h(
                   'div',
                   { class: 'grid-cols-1 lg:grid-cols-2 flex flex-wrap gap-3' },
-                  invoiceDataList.value.map((item) => {
+                  buyerPhotoDataList.value.map((item) => {
                     return h(ElImage, {
                       src: item.url,
-                      previewSrcList: invoiceDataList.value.map((i) => i.url),
+                      previewSrcList: buyerPhotoDataList.value.map(
+                        (i) => i.url,
+                      ),
                       fit: 'cover',
                       style: 'width: 100px; height: 100px;',
                       class: 'border rounded',
@@ -258,17 +275,16 @@ const [Modal, modalApi] = useVbenModal({
                     });
                   }),
                 ),
-                fieldName: 'invoiceAttachments',
-                label: '发票附件',
+                fieldName: 'buyerPhotoAttachments',
+                label: '购买人',
                 // formItemClass: 'lg:col-span-2',
               },
             ],
           });
         } else {
-          // 设置空数据提示
           baseFormApi.setState({
             schema: [
-              ...schema,
+              ...(baseFormApi.getState()?.schema ?? []),
               {
                 component: h(
                   'div',
@@ -278,19 +294,15 @@ const [Modal, modalApi] = useVbenModal({
                   },
                   '暂无',
                 ),
-                fieldName: 'invoiceAttachments',
-                label: '发票附件',
+                fieldName: 'buyerPhotoAttachments',
+                label: '购买人',
                 // formItemClass: 'lg:col-span-2',
               },
             ],
           });
         }
 
-        // 检查schema中是否已存在certificateAttachments字段
-        const hasCertificateAttachments = schema.some(
-          (item) => item.fieldName === 'certificateAttachments',
-        );
-
+        // 然后添加证书附件
         // 如果不存在，则添加证书附件字段
         if (
           !hasCertificateAttachments &&
@@ -343,6 +355,175 @@ const [Modal, modalApi] = useVbenModal({
           });
         }
 
+        // 最后添加发票附件
+        // 如果不存在，则添加发票附件字段
+        if (!hasInvoiceAttachments && invoiceDataList.value.length > 0) {
+          baseFormApi.setState({
+            schema: [
+              ...(baseFormApi.getState()?.schema ?? []),
+              {
+                component: h(
+                  'div',
+                  { class: 'grid-cols-1 lg:grid-cols-2 flex flex-wrap gap-3' },
+                  invoiceDataList.value.map((item) => {
+                    return h(ElImage, {
+                      src: item.url,
+                      previewSrcList: invoiceDataList.value.map((i) => i.url),
+                      fit: 'cover',
+                      style: 'width: 100px; height: 100px;',
+                      class: 'border rounded',
+                      previewTeleported: true,
+                    });
+                  }),
+                ),
+                fieldName: 'invoiceAttachments',
+                label: '发票附件',
+                // formItemClass: 'lg:col-span-2',
+              },
+            ],
+          });
+        } else {
+          // 设置空数据提示
+          baseFormApi.setState({
+            schema: [
+              ...(baseFormApi.getState()?.schema ?? []),
+              {
+                component: h(
+                  'div',
+                  {
+                    class:
+                      'grid-cols-1 lg:grid-cols-2 flex flex-wrap gap-3 text-sm',
+                  },
+                  formType.value === 'edit'
+                    ? h(
+                        'button',
+                        {
+                          class:
+                            'mt-1 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600',
+                          onClick: () => {
+                            // 处理上传发票的逻辑
+                            const fileInput = document.createElement('input');
+                            fileInput.type = 'file';
+                            fileInput.accept = 'image/*';
+                            fileInput.multiple = false; // 限制上传数量为1
+
+                            fileInput.addEventListener(
+                              'change',
+                              async (event) => {
+                                const target = event.target as HTMLInputElement;
+                                const files = target.files;
+
+                                if (files && files.length > 0) {
+                                  try {
+                                    // 开始上传
+                                    modalApi.setState({ loading: true });
+
+                                    const file = files[0];
+                                    const formData = new FormData();
+
+                                    // 添加必要参数
+                                    formData.append('file', file);
+                                    formData.append(
+                                      'attlsh',
+                                      data.value.row.ordersid,
+                                    );
+                                    formData.append(
+                                      'attmodel',
+                                      'orders_invoice',
+                                    );
+                                    formData.append(
+                                      'attpath',
+                                      '/orders_invoice/',
+                                    );
+
+                                    // 调用上传接口
+                                    const result = await addImageApi(
+                                      formData as any,
+                                    );
+
+                                    if (result) {
+                                      ElMessage.success('发票上传成功');
+
+                                      // 重新获取发票附件列表
+                                      const filePrefix = await getFilePrefix();
+                                      await getOrderInvoice(
+                                        data.value.row.ordersid,
+                                        filePrefix,
+                                      );
+
+                                      // 更新发票附件显示
+                                      if (invoiceDataList.value.length > 0) {
+                                        baseFormApi.setState({
+                                          schema:
+                                            baseFormApi
+                                              .getState()
+                                              ?.schema?.map((item) => {
+                                                if (
+                                                  item.fieldName ===
+                                                  'invoiceAttachments'
+                                                ) {
+                                                  return {
+                                                    ...item,
+                                                    component: h(
+                                                      'div',
+                                                      {
+                                                        class:
+                                                          'grid-cols-1 lg:grid-cols-2 flex flex-wrap gap-3',
+                                                      },
+                                                      invoiceDataList.value.map(
+                                                        (imgItem) => {
+                                                          return h(ElImage, {
+                                                            src: imgItem.url,
+                                                            previewSrcList:
+                                                              invoiceDataList.value.map(
+                                                                (i) => i.url,
+                                                              ),
+                                                            fit: 'cover',
+                                                            style:
+                                                              'width: 100px; height: 100px;',
+                                                            class:
+                                                              'border rounded',
+                                                            previewTeleported:
+                                                              true,
+                                                          });
+                                                        },
+                                                      ),
+                                                    ),
+                                                  };
+                                                }
+                                                return item;
+                                              }) || [],
+                                        });
+                                      }
+                                    } else {
+                                      ElMessage.error('发票上传失败');
+                                    }
+                                  } catch (error) {
+                                    console.error(error);
+                                    ElMessage.error('发票上传过程中发生错误');
+                                  } finally {
+                                    modalApi.setState({ loading: false });
+                                  }
+                                }
+                              },
+                            );
+
+                            // 触发文件选择对话框
+                            fileInput.click();
+                          },
+                        },
+                        '上传发票',
+                      )
+                    : '暂无',
+                ),
+                fieldName: 'invoiceAttachments',
+                label: '发票附件',
+                // formItemClass: 'lg:col-span-2',
+              },
+            ],
+          });
+        }
+
         // 可以选择处理失败的请求
         results.forEach((result, index) => {
           if (result.status === 'rejected') {
@@ -403,6 +584,24 @@ const getOrderCertificate = async (ordersid: string, filePrefix: string) => {
   certificateDataList.value = certificateData.Data;
 };
 
+// 获取购买人自拍附件
+const getOrderBuyerPhoto = async (ordersid: string, filePrefix: string) => {
+  const buyerPhotoData = await getAttachmentListApi({
+    attlsh: ordersid,
+    attmodel: 'orders_buyer',
+    pageindex: 1,
+    rows: 10,
+  });
+
+  if (buyerPhotoData.Data.length > 0) {
+    buyerPhotoData.Data.forEach((item: any) => {
+      item.url = `${filePrefix}${item.attpath}${item.attname}.${item.atttype}`;
+    });
+  }
+
+  buyerPhotoDataList.value = buyerPhotoData.Data;
+};
+
 // 获取文件前缀地址
 const getFilePrefix = async () => {
   const filePrefixData = await getDictListApi({