feat: 优化订单展示

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

@@ -0,0 +1,365 @@
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import {
+  ElCard,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElImage,
+  ElTag,
+} from 'element-plus';
+
+import { getDictListApi } from '#/api/dict';
+import { getAttachmentListApi } from '#/api/file';
+import { getOrdersDetailApi } from '#/api/orders';
+
+const data = ref();
+const orderDetail = ref<any>({});
+
+const invoiceDataList = ref<any[]>([]);
+const certificateDataList = ref<any[]>([]);
+const buyerPhotoDataList = ref<any[]>([]);
+const coupon2sid = ref(''); // 优惠券id
+
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-2/3',
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm() {
+    modalApi.close();
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      data.value = modalApi.getData();
+
+      try {
+        modalApi.setState({ loading: true });
+
+        // 清空数据
+        invoiceDataList.value = [];
+        certificateDataList.value = [];
+        buyerPhotoDataList.value = [];
+        orderDetail.value = {};
+
+        const filePrefix = await getFilePrefix();
+
+        // 先获取订单详情
+        await getOrderDetail(data.value.row.ordersid);
+
+        // 并行获取附件信息
+        await Promise.allSettled([
+          getOrderInvoice(data.value.row.ordersid, filePrefix),
+          getOrderCertificate(coupon2sid.value, filePrefix),
+          getOrderBuyerPhoto(coupon2sid.value, filePrefix),
+        ]);
+      } catch (error) {
+        console.error('加载订单详情失败:', error);
+      }
+
+      modalApi.setState({ loading: false });
+    }
+  },
+});
+
+// 获取订单详情
+const getOrderDetail = async (ordersid: string) => {
+  const detailData = await getOrdersDetailApi({
+    ordersid,
+  });
+
+  orderDetail.value = detailData;
+  coupon2sid.value = detailData.coupon2sid;
+};
+
+// 获取发票附件
+const getOrderInvoice = async (ordersid: string, filePrefix: string) => {
+  const invoiceData = await getAttachmentListApi({
+    attlsh: ordersid,
+    attmodel: 'coupon_invoice',
+    pageindex: 1,
+    rows: 10,
+  });
+
+  if (invoiceData.Data.length > 0) {
+    invoiceData.Data.forEach((item: any) => {
+      item.url = `${filePrefix}${item.attpath}${item.attname}.${item.atttype}`;
+    });
+  }
+
+  invoiceDataList.value = invoiceData.Data;
+};
+
+// 获取购机者证件附件
+const getOrderCertificate = async (coupon2sid: string, filePrefix: string) => {
+  const certificateData = await getAttachmentListApi({
+    attlsh: coupon2sid,
+    attmodel: 'coupon_identity',
+    pageindex: 1,
+    rows: 10,
+  });
+
+  if (certificateData.Data.length > 0) {
+    certificateData.Data.forEach((item: any) => {
+      item.url = `${filePrefix}${item.attpath}${item.attname}.${item.atttype}`;
+    });
+  }
+
+  certificateDataList.value = certificateData.Data;
+};
+
+// 获取购机者自拍附件
+const getOrderBuyerPhoto = async (coupon2sid: string, filePrefix: string) => {
+  const buyerPhotoData = await getAttachmentListApi({
+    attlsh: coupon2sid,
+    attmodel: 'coupon_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({
+    groupname: 'fileheadurl',
+    pageindex: 1,
+    rows: 999,
+  });
+
+  if (filePrefixData.Data.length > 0) {
+    return filePrefixData.Data[0].substance;
+  }
+
+  return '';
+};
+
+// 订单状态映射
+const getOrderStatusTag = (status: number) => {
+  const statusMap = {
+    0: { text: '待审核', type: 'info' },
+    1: { text: '已支付', type: 'success' },
+    2: { text: '已完成', type: 'warning' },
+    3: { text: '审核不通过', type: 'danger' },
+  } as const;
+  return (
+    statusMap[status as keyof typeof statusMap] || {
+      text: '未知',
+      type: 'info',
+    }
+  );
+};
+
+// 渲染附件
+const renderAttachments = (attachments: any[], emptyText: string) => {
+  if (attachments.length === 0) {
+    return h('div', { class: 'text-gray-500 text-sm' }, emptyText);
+  }
+
+  return h(
+    'div',
+    { class: 'flex flex-wrap gap-3' },
+    attachments.map((item) => {
+      // 判断文件类型，根据atttype进行不同展示
+      if (item.atttype === 'pdf') {
+        // PDF文件显示为链接
+        return h(
+          'a',
+          {
+            href: item.url,
+            target: '_blank',
+            class:
+              'inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 hover:text-blue-700 transition-colors',
+            title: item.attorginname || item.attname,
+          },
+          [
+            h('i', { class: 'fas fa-file-pdf mr-2 text-red-500' }),
+            item.attorginname || `${item.attname}.${item.atttype}`,
+          ],
+        );
+      } else {
+        // 图片文件使用ElImage展示
+        const imageExtensions = new Set([
+          'bmp',
+          'gif',
+          'jpeg',
+          'jpg',
+          'png',
+          'webp',
+        ]);
+        return imageExtensions.has(item.atttype.toLowerCase())
+          ? h(ElImage, {
+              src: item.url,
+              previewSrcList: attachments
+                .filter((i) => imageExtensions.has(i.atttype.toLowerCase()))
+                .map((i) => i.url),
+              fit: 'cover',
+              style: 'width: 100px; height: 100px;',
+              class: 'border rounded',
+              previewTeleported: true,
+            })
+          : // 其他文件类型显示为普通链接
+            h(
+              'a',
+              {
+                href: item.url,
+                target: '_blank',
+                class:
+                  'inline-flex items-center px-3 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-gray-700 transition-colors',
+                title: item.attorginname || item.attname,
+              },
+              [
+                h('i', { class: 'fas fa-file mr-2 text-gray-500' }),
+                item.attorginname || `${item.attname}.${item.atttype}`,
+              ],
+            );
+      }
+    }),
+  );
+};
+</script>
+
+<template>
+  <Modal title="订单详情" :show-cancel-button="false" confirm-text="关闭">
+    <div class="space-y-6">
+      <!-- 订单信息 -->
+      <ElCard>
+        <template #header>
+          <div class="card-header">
+            <span class="font-semibold">订单信息</span>
+          </div>
+        </template>
+        <ElDescriptions :column="3" border label-width="220">
+          <ElDescriptionsItem label="订单号">
+            {{ orderDetail.ordersnumber }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="下单时间">
+            {{ orderDetail.ordersorderdate }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="订单总金额">
+            ¥{{ orderDetail.orderstotalprice }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="优惠金额">
+            ¥{{ orderDetail.ordersyhprice }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="订单优惠后金额">
+            ¥{{ orderDetail.ordersdiscountprice }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="订单状态">
+            <ElTag
+              :type="getOrderStatusTag(orderDetail.ordersorderstatus).type"
+            >
+              {{ getOrderStatusTag(orderDetail.ordersorderstatus).text }}
+            </ElTag>
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="经销商">
+            {{ orderDetail.jxsname }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="优惠券名称">
+            {{ orderDetail.coupon2mc }}
+          </ElDescriptionsItem>
+        </ElDescriptions>
+      </ElCard>
+
+      <!-- 产品信息 -->
+      <ElCard>
+        <template #header>
+          <div class="card-header">
+            <span class="font-semibold">产品信息</span>
+          </div>
+        </template>
+        <ElDescriptions :column="3" border label-width="220">
+          <ElDescriptionsItem label="产品名称">
+            {{ orderDetail.ordersproductname }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="产品型号">
+            {{ orderDetail.productsmodel }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="产品SN">
+            {{ orderDetail.ordersproductsn }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="生产企业">
+            {{ orderDetail.scqyinfomc }}
+          </ElDescriptionsItem>
+        </ElDescriptions>
+      </ElCard>
+
+      <!-- 购机者信息 -->
+      <ElCard>
+        <template #header>
+          <div class="card-header">
+            <span class="font-semibold">购机者信息</span>
+          </div>
+        </template>
+        <ElDescriptions :column="3" border label-width="220">
+          <ElDescriptionsItem label="购机者姓名">
+            {{ orderDetail.usersname }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="购机者电话">
+            {{ orderDetail.usersphone }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem label="购机者地址" :span="2">
+            {{ orderDetail.usersaddress || '-' }}
+          </ElDescriptionsItem>
+        </ElDescriptions>
+      </ElCard>
+
+      <!-- 附件列表 -->
+      <ElCard>
+        <template #header>
+          <div class="card-header">
+            <span class="font-semibold">附件列表</span>
+          </div>
+        </template>
+        <div class="flex items-start space-x-10">
+          <!-- 购机者照片 -->
+          <div>
+            <h4 class="mb-2 text-sm font-medium text-gray-700">购机者照片</h4>
+            <div class="min-h-[60px] rounded-lg bg-gray-50 p-3">
+              <component
+                :is="renderAttachments(buyerPhotoDataList, '暂无购机者照片')"
+              />
+            </div>
+          </div>
+
+          <!-- 证件附件 -->
+          <div>
+            <h4 class="mb-2 text-sm font-medium text-gray-700">证件附件</h4>
+            <div class="min-h-[60px] rounded-lg bg-gray-50 p-3">
+              <component
+                :is="renderAttachments(certificateDataList, '暂无证件附件')"
+              />
+            </div>
+          </div>
+
+          <!-- 发票附件 -->
+          <div>
+            <h4 class="mb-2 text-sm font-medium text-gray-700">发票附件</h4>
+            <div class="min-h-[60px] rounded-lg bg-gray-50 p-3">
+              <component
+                :is="renderAttachments(invoiceDataList, '暂无发票附件')"
+              />
+            </div>
+          </div>
+        </div>
+      </ElCard>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>

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

@@ -2,34 +2,26 @@
 import type { ExtendedFormApi } from '@vben/common-ui';
 import type { OrdersEntity } from '@vben/types';
 
-import { computed, h, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { ElImage, ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus';
 
 import { useVbenForm, z } from '#/adapter/form';
-import { getDictListApi } from '#/api/dict';
-import { getAttachmentListApi } from '#/api/file';
 import { addOrdersApi, editOrdersApi, getOrdersDetailApi } from '#/api/orders';
 
 const emit = defineEmits(['finish']);
 const data = ref();
-const formType = ref<'create' | 'detail' | 'edit'>('create');
+const formType = ref<'create' | 'edit'>('create');
 
 const titleMap = {
   create: '新增订单',
-  detail: '订单详情',
   edit: '编辑订单',
 } as const;
 
 const getTitle = computed(() => titleMap[formType.value]);
 
-const invoiceDataList = ref<any[]>([{}]);
-const certificateDataList = ref<any[]>([]);
-const buyerPhotoDataList = ref<any[]>([]);
-const coupon2sid = ref(''); // 优惠券id
-
 const [BaseForm, baseFormApi] = useVbenForm({
   showDefaultActions: false,
   // 所有表单项共用，可单独在表单内覆盖
@@ -42,16 +34,6 @@ const [BaseForm, baseFormApi] = useVbenForm({
   },
   wrapperClass: 'grid-cols-1 lg:grid-cols-2',
   schema: [
-    // { title: '订单号', field: 'ordersnumber' },
-    // { title: '订单关联用户id', field: 'ordersuserid' },
-    // { title: '订单关联产品id', field: 'ordersproductid' },
-    // { title: '产品名称', field: 'ordersproductname' },
-    // { title: '产品sn', field: 'ordersproductsn' },
-    // { title: '订单总金额', field: 'orderstotalprice' },
-    // { title: '订单优惠后金额', field: 'ordersdiscountprice' },
-    // { title: '优惠金额', field: 'ordersyhprice' },
-    // { title: '优惠卷id', field: 'orderscouponid' },
-    // { title: '订单状态', field: 'ordersorderstatus' },
     {
       component: 'Input',
       fieldName: 'ordersnumber',
@@ -202,11 +184,6 @@ const [Modal, modalApi] = useVbenModal({
           } as any),
       };
 
-      if (formType.value === 'detail') {
-        modalApi.close();
-        return;
-      }
-
       await apiMap[formType.value]();
       ElMessage.success('操作成功');
 
@@ -217,272 +194,20 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen) {
     if (isOpen) {
       data.value = modalApi.getData();
-
       formType.value = data.value.formType;
 
-      baseFormApi.setState({
-        commonConfig: { disabled: formType.value === 'detail' },
-      });
-
       if (data.value.formType === 'create') {
+        // 新增模式，重置表单
+        baseFormApi.resetForm();
         return;
       }
 
+      // 编辑模式，加载订单详情
       try {
         modalApi.setState({ loading: true });
-
-        invoiceDataList.value = [];
-        certificateDataList.value = [];
-        buyerPhotoDataList.value = [];
-
-        // 去掉schema中invoiceAttachments和certificateAttachments字段，避免页面不更新
-        baseFormApi.setState({
-          schema: baseFormApi
-            .getState()
-            ?.schema?.filter(
-              (item) =>
-                item.fieldName !== 'invoiceAttachments' &&
-                item.fieldName !== 'certificateAttachments' &&
-                item.fieldName !== 'buyerPhotoAttachments',
-            ),
-        });
-
-        const filePrefix = await getFilePrefix();
-
-        // 先执行获取订单详情
         await getOrderDetail(data.value.row.ordersid, baseFormApi);
-
-        // 订单详情获取完成后，再并行执行剩余3个函数
-        const results = await Promise.allSettled([
-          getOrderInvoice(data.value.row.ordersid, filePrefix),
-          getOrderCertificate(coupon2sid.value, filePrefix),
-          getOrderBuyerPhoto(coupon2sid.value, filePrefix),
-        ]);
-
-        // 更新schema
-        const schema = baseFormApi.getState()?.schema ?? [];
-
-        // 检查schema中是否已存在invoiceAttachments字段
-        const hasInvoiceAttachments = schema.some(
-          (item) => item.fieldName === 'invoiceAttachments',
-        );
-
-        // 检查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: [
-              ...(baseFormApi.getState()?.schema ?? []),
-              {
-                component: h(
-                  'div',
-                  { class: 'grid-cols-1 lg:grid-cols-2 flex flex-wrap gap-3' },
-                  buyerPhotoDataList.value.map((item) => {
-                    return h(ElImage, {
-                      src: item.url,
-                      previewSrcList: buyerPhotoDataList.value.map(
-                        (i) => i.url,
-                      ),
-                      fit: 'cover',
-                      style: 'width: 100px; height: 100px;',
-                      class: 'border rounded',
-                      previewTeleported: true,
-                    });
-                  }),
-                ),
-                fieldName: 'buyerPhotoAttachments',
-                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',
-                  },
-                  '暂无',
-                ),
-                fieldName: 'buyerPhotoAttachments',
-                label: '购机者照片',
-                // formItemClass: 'lg:col-span-2',
-              },
-            ],
-          });
-        }
-
-        // 然后添加证件附件
-        // 如果不存在，则添加证件附件字段
-        if (
-          !hasCertificateAttachments &&
-          certificateDataList.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' },
-                  certificateDataList.value.map((item) => {
-                    return h(ElImage, {
-                      src: item.url,
-                      previewSrcList: certificateDataList.value.map(
-                        (i) => i.url,
-                      ),
-                      fit: 'cover',
-                      style: 'width: 100px; height: 100px;',
-                      class: 'border rounded',
-                      previewTeleported: true,
-                    });
-                  }),
-                ),
-                fieldName: 'certificateAttachments',
-                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',
-                  },
-                  '暂无',
-                ),
-                fieldName: 'certificateAttachments',
-                label: '证件附件',
-                // formItemClass: 'lg:col-span-2',
-              },
-            ],
-          });
-        }
-
-        // 最后添加发票附件展示
-        // 如果不存在，则添加发票附件字段
-        if (!hasInvoiceAttachments) {
-          baseFormApi.setState({
-            schema: [
-              ...(baseFormApi.getState()?.schema ?? []),
-              {
-                component: h(
-                  'div',
-                  { class: 'flex flex-wrap gap-3' },
-                  invoiceDataList.value.length > 0
-                    ? invoiceDataList.value.map((item) => {
-                        // 判断文件类型，根据atttype进行不同展示
-                        if (item.atttype === 'pdf') {
-                          // PDF文件显示为链接
-                          return h(
-                            'a',
-                            {
-                              href: item.url,
-                              target: '_blank',
-                              class:
-                                'inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 hover:text-blue-700 transition-colors',
-                              title: item.attorginname || item.attname,
-                            },
-                            [
-                              h('i', {
-                                class: 'fas fa-file-pdf mr-2 text-red-500',
-                              }),
-                              item.attorginname ||
-                                `${item.attname}.${item.atttype}`,
-                            ],
-                          );
-                        } else {
-                          // 图片文件使用ElImage展示
-                          const imageExtensions = new Set([
-                            'bmp',
-                            'gif',
-                            'jpeg',
-                            'jpg',
-                            'png',
-                            'webp',
-                          ]);
-                          return imageExtensions.has(item.atttype.toLowerCase())
-                            ? h(ElImage, {
-                                src: item.url,
-                                previewSrcList: invoiceDataList.value
-                                  .filter((i) =>
-                                    imageExtensions.has(
-                                      i.atttype.toLowerCase(),
-                                    ),
-                                  )
-                                  .map((i) => i.url),
-                                fit: 'cover',
-                                style: 'width: 100px; height: 100px;',
-                                class: 'border rounded',
-                                previewTeleported: true,
-                              })
-                            : // 其他文件类型显示为普通链接
-                              h(
-                                'a',
-                                {
-                                  href: item.url,
-                                  target: '_blank',
-                                  class:
-                                    'inline-flex items-center px-3 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-gray-700 transition-colors',
-                                  title: item.attorginname || item.attname,
-                                },
-                                [
-                                  h('i', {
-                                    class: 'fas fa-file mr-2 text-gray-500',
-                                  }),
-                                  item.attorginname ||
-                                    `${item.attname}.${item.atttype}`,
-                                ],
-                              );
-                        }
-                      })
-                    : [
-                        h(
-                          'span',
-                          {
-                            class: 'text-sm text-gray-500',
-                          },
-                          '暂无发票附件',
-                        ),
-                      ],
-                ),
-                fieldName: 'invoiceAttachments',
-                label: '发票附件',
-                // formItemClass: 'lg:col-span-2',
-              },
-            ],
-          });
-        }
-
-        // 可以选择处理失败的请求
-        results.forEach((result, index) => {
-          if (result.status === 'rejected') {
-            console.warn(`请求 ${index} 失败:`, result.reason);
-          }
-        });
       } catch (error) {
-        console.error(error);
+        console.error('加载订单详情失败:', error);
       }
 
       modalApi.setState({ loading: false });
@@ -497,77 +222,6 @@ const getOrderDetail = async (ordersid: string, formApi: ExtendedFormApi) => {
   });
 
   formApi.setValues(detailData);
-
-  coupon2sid.value = detailData.coupon2sid;
-};
-
-// 获取发票附件
-const getOrderInvoice = async (ordersid: string, filePrefix: string) => {
-  const invoiceData = await getAttachmentListApi({
-    attlsh: ordersid,
-    attmodel: 'coupon_invoice',
-    pageindex: 1,
-    rows: 10,
-  });
-
-  if (invoiceData.Data.length > 0) {
-    invoiceData.Data.forEach((item: any) => {
-      item.url = `${filePrefix}${item.attpath}${item.attname}.${item.atttype}`;
-    });
-  }
-
-  invoiceDataList.value = invoiceData.Data;
-};
-
-// 获取购机者证件附件
-const getOrderCertificate = async (coupon2sid: string, filePrefix: string) => {
-  const certificateData = await getAttachmentListApi({
-    attlsh: coupon2sid,
-    attmodel: 'coupon_identity',
-    pageindex: 1,
-    rows: 10,
-  });
-
-  if (certificateData.Data.length > 0) {
-    certificateData.Data.forEach((item: any) => {
-      item.url = `${filePrefix}${item.attpath}${item.attname}.${item.atttype}`;
-    });
-  }
-
-  certificateDataList.value = certificateData.Data;
-};
-
-// 获取购机者自拍附件
-const getOrderBuyerPhoto = async (coupon2sid: string, filePrefix: string) => {
-  const buyerPhotoData = await getAttachmentListApi({
-    attlsh: coupon2sid,
-    attmodel: 'coupon_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({
-    groupname: 'fileheadurl',
-    pageindex: 1,
-    rows: 999,
-  });
-
-  if (filePrefixData.Data.length > 0) {
-    return filePrefixData.Data[0].substance;
-  }
-
-  return '';
 };
 </script>
 

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

@@ -20,6 +20,7 @@ import { getCustomerListApi } from '#/api/user';
 import { $t } from '#/locales';
 
 import OrdersAuditForm from './audit-form.vue';
+import OrdersDetail from './detail.vue';
 import OrdersForm from './form.vue';
 
 const dealerOptions = ref<Array<{ label: string; value: string }>>([]);
@@ -142,17 +143,27 @@ const gridOptions: VxeGridProps<any> = {
   },
 
   columns: [
-    { title: '订单号', field: 'ordersnumber', sortable: true },
+    { title: '序号', type: 'seq', width: 50 },
+    // { title: '订单号', field: 'ordersnumber', sortable: true },
     // { title: '订单关联用户id', field: 'ordersuserid', sortable: true },
     // { title: '订单关联产品id', field: 'ordersproductid', sortable: true },
     { title: '产品名称', field: 'ordersproductname', sortable: true },
     { title: '产品型号', field: 'productsmodel', sortable: true },
     { title: '产品sn', field: 'ordersproductsn', sortable: true },
+    { title: '生产企业', field: 'scqyinfomc', sortable: true },
     { title: '订单总金额', field: 'orderstotalprice', sortable: true },
-    { title: '订单优惠后金额', field: 'ordersdiscountprice', sortable: true },
     { title: '优惠金额', field: 'ordersyhprice', sortable: true },
-    { title: '优惠卷id', field: 'orderscouponid', sortable: true },
+    {
+      title: '订单优惠后金额',
+      field: 'ordersdiscountprice',
+      sortable: true,
+      width: 150,
+    },
+    // { title: '优惠卷id', field: 'orderscouponid', sortable: true },
     { title: '经销商', field: 'jxsname', sortable: true },
+    { title: '购机者姓名', field: 'usersname', sortable: true },
+    { title: '购机者电话', field: 'usersphone', sortable: true },
+    { title: '购机者地址', field: 'usersaddress', sortable: true },
     {
       title: '订单状态',
       field: 'ordersorderstatus',
@@ -224,6 +235,13 @@ const [Modal, modalApi] = useVbenModal({
   connectedComponent: OrdersForm,
 });
 
+const [DetailModal, detailModalApi] = useVbenModal({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: OrdersDetail,
+});
+
 const [AuditModal, auditModalApi] = useVbenModal({
   fullscreenButton: false,
   closeOnClickModal: false,
@@ -245,8 +263,7 @@ function handleCreate() {
 
 /* 详情 */
 function handleDetail(row: any) {
-  modalApi.setState({ showCancelButton: false });
-  modalApi.setData({ formType: 'detail', row }).open();
+  detailModalApi.setData({ row }).open();
 }
 
 function handleFinish() {
@@ -345,6 +362,7 @@ function handleAudit(row: any) {
       </template>
     </Grid>
     <Modal @finish="handleFinish" />
+    <DetailModal />
     <AuditModal @finish="handleFinish" />
   </Page>
 </template>