podus 对账单

components.d.ts

@@ -20,6 +20,8 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']

src/api/order.ts

@@ -11,7 +11,7 @@ import {
   Tab,
   InspectionData,
   PaymentForm,
-  RejectParams
+  RejectParams,
 } from '@/types/api/order'
 import {
   apiSubmitPodOrderForm,
@@ -22,7 +22,7 @@ import {
   ProductionOrder,
   ShipmentOrderDetailData,
   updatePriceForm,
-  IUpdatePrice,
+  IUpdatePrice, PodUsDetailData,
 } from '@/types/api/deliveryNote'
 import {
   AccountStatementNote,
@@ -30,7 +30,7 @@ import {
   BillOrderDetailData,
   ConfirmOrderForm,
   CountStatus,
-  LogList,
+  LogList, OrderDetails, ProductDetails,
 } from '@/types/api/billOrder'
 
 export function getOrderList(
@@ -84,6 +84,7 @@ export function reCreateScriptUrlApi(id: number) {
     },
   )
 }
+
 export function apiGetCraftGroup(id?: number | string) {
   return axios.get<never, BaseRespData<never>>(
     'pod/podReconciliation/getCraftGroup',
@@ -94,6 +95,7 @@ export function apiGetCraftGroup(id?: number | string) {
     },
   )
 }
+
 // 打印生产单
 export function printOrder(ids: number[]) {
   return axios.post<never, BaseRespData<never>>(
@@ -144,12 +146,13 @@ export function qaFinishedApi(data: InspectionData[]) {
     data,
   )
 }
+
 export function apiSetCraftData({
                                   id,
                                   craftTotalPrice,
                                   recNumber,
                                   craftPriceList,
-}: {
+                                }: {
   id: number | undefined
   craftTotalPrice: number | undefined
   recNumber: string | undefined
@@ -165,6 +168,7 @@ export function apiSetCraftData({
     },
   )
 }
+
 // 发货保存
 export function saveOrder(
   sumbitSendOutList: ShipmentOrderRes[],
@@ -195,6 +199,7 @@ export function loadSendOutList(id: number) {
     },
   )
 }
+
 // 设置备注
 export function backEndCommentsApi(id: number, remark: string) {
   return axios.get<never, BaseRespData<SendOrderData[]>>(
@@ -207,6 +212,7 @@ export function backEndCommentsApi(id: number, remark: string) {
     },
   )
 }
+
 //重新生成
 export function regenerateSingle(subNumber: string | number) {
   return axios.get<never, BaseRespData<SendOrderData[]>>(
@@ -218,6 +224,7 @@ export function regenerateSingle(subNumber: string | number) {
     },
   )
 }
+
 // 操作日志
 export function getLogList(id: number) {
   return axios.get<never, BaseRespData<LogListData[]>>(
@@ -256,6 +263,7 @@ export function refreshProductInfo(data: number[]) {
     data,
   )
 }
+
 export function getDeliveryNoteList(
   data: DeliveryNoteSearchForm,
   currentPage: number,
@@ -301,6 +309,21 @@ export function podReconciliationList(
   )
 }
 
+export function podUsReconciliationList(
+  data: AccountStatementNoteSearchForm,
+  currentPage: number,
+  pageSize: number,
+) {
+  return axios.post<never, BasePaginationData<AccountStatementNote>>(
+    'pod_us/reconciliation/list',
+    {
+      ...data,
+      currentPage,
+      pageSize,
+    },
+  )
+}
+
 export function printDeliveryNote(data: string[], userMark?: string) {
   return axios.post<never, BaseRespData<never>>(
     'factory/customJomallShipment/printInvoiceStatistics',
@@ -363,6 +386,17 @@ export function podReconciliation(id?: number) {
   )
 }
 
+export function podUsReconciliation(id?: number) {
+  return axios.get<never, BaseRespData<CountStatus[]>>(
+    'pod_us/reconciliation/groupCount',
+    {
+      params: {
+        id,
+      },
+    },
+  )
+}
+
 export function getCustomJomallReconciliationById(id?: number) {
   return axios.get<never, BaseRespData<OrderData>>(
     'factory/customJomallReconciliation/getById',
@@ -391,6 +425,7 @@ export function updateReconciliation(data: AccountStatementNote) {
     data,
   )
 }
+
 export function exportExcelApi(ids: string) {
   return axios.get<never, BaseRespData<never>>('reconciliation/exportExcel', {
     params: {
@@ -398,6 +433,7 @@ export function exportExcelApi(ids: string) {
     },
   })
 }
+
 export function exportPodExcelApi(ids: string) {
   return axios.get<never, BaseRespData<never>>(
     'pod/podReconciliation/exportExcel',
@@ -408,12 +444,25 @@ export function exportPodExcelApi(ids: string) {
     },
   )
 }
+
+export function exportPodUsExcelApi(ids: string) {
+  return axios.get<never, BaseRespData<never>>(
+    'pod_us/reconciliation/exportExcel',
+    {
+      params: {
+        ids,
+      },
+    },
+  )
+}
+
 export function getShipmentDetailsById(data: DetailForm) {
   return axios.post<never, BasePaginationData<BillOrderDetailData>>(
     'reconciliation/getItemList',
     data,
   )
 }
+
 export function apiupdateByPodExcel(formData: never) {
   return axios.post('pod/podReconciliation/updateByExcel', formData, {
     headers: {
@@ -421,18 +470,49 @@ export function apiupdateByPodExcel(formData: never) {
     },
   })
 }
+
 export function apiRejectedPodReconciliation(params?: RejectParams) {
   return axios.post<never, BaseRespData<never>>(
     'pod/podReconciliation/rejectedLocal',
     params,
   )
 }
+
 export function getPodShipmentDetailsById(data: DetailForm) {
   return axios.post<never, BasePaginationData<BillOrderDetailData>>(
     'pod/podReconciliation/getItemList',
     data,
   )
 }
+
+export function getPodShipmentGetById(data: DetailForm) {
+  return axios.post<never, BasePaginationData<ProductDetails>>(
+    'pod_us/reconciliation/getDetailById',
+    data,
+  )
+}
+
+export function getPodUsShipmentDetailsById(data: DetailForm) {
+  return axios.post<never, BasePaginationData<OrderDetails>>(
+    'pod_us/reconciliation/getItemList',
+    data,
+  )
+}
+
+export function getPodUsDetailData(id?: number | string) {
+  return axios.get<never, BaseRespData<PodUsDetailData>>(
+    'pod_us/reconciliation/getWithProductById',
+    { params: { id } },
+  )
+}
+
+export function delPodUsOrderData(ids?: number | string[]) {
+  return axios.post<never, BaseRespData<never>>(
+    'pod_us/reconciliation/delItem',
+    {ids},
+  )
+}
+
 export function apiLogList(id?: number) {
   return axios.get<never, BaseRespData<LogListsData[]>>(
     'pod/podReconciliation/getLog',
@@ -475,6 +555,36 @@ export function updateRecPrice(data: updatePriceForm) {
   )
 }
 
+export function updatePodUsCarriageAmount(data: { ids: number[], carriage_amount: number }) {
+  return axios.post<never, BaseRespData<never>>(
+    'pod_us/reconciliation/updateCarriage',
+    data,
+  )
+}
+
+interface BatchUpdatePrice {
+  info_id?: number |string | undefined,
+  itemList: {
+    id: number |string,
+    craft_price: number |string,
+    template_price: number |string
+  }[]
+}
+
+export function batchUpdatePrice(data: BatchUpdatePrice) {
+  return axios.post<never, BaseRespData<never>>(
+    'pod_us/reconciliation/batchEdit',
+    data,
+  )
+}
+
+export function getReconciliationById(data: updatePriceForm) {
+  return axios.get<never, BaseRespData<never>>(
+    'pod_us/reconciliation/getDetailByItemIds',
+    { params: data },
+  )
+}
+
 export function getLogListApi(id?: number) {
   return axios.get<never, BaseRespData<LogList[]>>('reconciliation/getLog', {
     params: { id },
@@ -489,6 +599,16 @@ export function getPodLogListApi(id?: number) {
     },
   )
 }
+
+export function getPodUsLogListApi(id?: number) {
+  return axios.get<never, BaseRespData<LogList[]>>(
+    'pod_us/reconciliation/getLog',
+    {
+      params: { id },
+    },
+  )
+}
+
 export function auditOrderApi(url: string, data: string) {
   return axios.get(url, {
     params: {
@@ -496,6 +616,7 @@ export function auditOrderApi(url: string, data: string) {
     },
   })
 }
+
 export function getShipmentOrderDetailById(id?: number | string) {
   return axios.get<never, BaseRespData<ShipmentOrderDetailData>>(
     'reconciliation/getShipmentByShipmentId',
@@ -517,11 +638,19 @@ export function confirmPodOrderApi(data: ConfirmOrderForm) {
     data,
   )
 }
+
+export function confirmPodUsOrderApi(data: ConfirmOrderForm) {
+  return axios.post<never, BaseRespData<never>>(
+    'pod_us/reconciliation/confirm',
+    data,
+  )
+}
+
 export function apiRejectionOfReview({
                                        ids,
                                        description,
                                        recNumbers,
-}: {
+                                     }: {
   ids: string
   recNumbers: string
   description: string
@@ -535,17 +664,19 @@ export function apiRejectionOfReview({
     },
   )
 }
+
 export function apiBillPodPayment(data: PaymentForm) {
   return axios.post<never, BaseRespData<never>>(
     'pod/podReconciliation/payment',
     data,
   )
 }
+
 export function rejectOrderApi({
                                  ids,
                                  description,
                                  pass,
-}: {
+                               }: {
   ids: string
   pass: number
   description: string

src/router/index.ts

@@ -18,6 +18,7 @@ import DeliveryNotePage from '@/views/DeliveryNotePage.vue'
 import AccountStatementNote from '@/views/AccountStatementNote.vue'
 // import Product from '@/views/product/index.vue'
 import PodBillOrder from '@/views/podBillOrder/index.vue'
+import PodUsBillOrder from '@/views/podUsBillOrder/index.vue'
 import TypeseetingManagement from '@/views/typesetting/TypesettingManagement.vue'
 import PodOrderList from '@/views/order/pod/index.vue'
 import PodDeliveryNoteList from '@/views/order/pod/deliveryOrderList.vue'
@@ -161,9 +162,15 @@ const router = createRouter({
         {
           path: '/account/pod-bill-order',
           meta: {
-            title: 'POD对账单',
+            title: 'POD(CN)对账单',
           },
           component: PodBillOrder,
+        },{
+          path: '/account/pod-us-bill-order',
+          meta: {
+            title: 'POD(US)对账单',
+          },
+          component: PodUsBillOrder,
         },
         {
           path: '/typesetting-management/list',

src/router/menu.ts

@@ -144,7 +144,12 @@ const menu: MenuItem[] = [
       {
         index: '/account/pod-bill-order',
         id: 2,
-        label: 'POD对账单',
+        label: 'POD(CN)对账单',
+      },
+      {
+        index: '/account/pod-us-bill-order',
+        id: 3,
+        label: 'POD(US)对账单',
       },
     ],
   },

src/types/api/billOrder.ts

@@ -95,6 +95,145 @@ export interface ItemList {
   id: number
   factory_order_number?: string
 }
+export interface OrderDetails {
+  pass_num: number;
+  num: number;
+  not_pass_num: number;
+  erp_order_number: string | null;
+  product_total_amount: number;
+  carriage_total_amount: number;
+  craft_total_price: number;
+  info_id: number;
+  template_total_price: number;
+  id: number;
+  order_id: string;
+  factory_order_number: string;
+  order: {
+    receiver_post_code: string;
+    payment_time: string | null;
+    actual_amount: number;
+    adjusted_amount: number;
+    factory_no: number;
+    factory_online_id: string | null;
+    total_product_amount: number | null;
+    process_number: string;
+    track_status: number;
+    id: string;
+    receiver_country: string;
+    factory_order_number: string;
+    prepaid_amount: number;
+    receiver_province: string;
+    create_time: string;
+    weight: number;
+    product_num: number;
+    version: number;
+    finish_time: string;
+    start_stocking_time: string;
+    payment_type: string | null;
+    warehouse_name: string;
+    total_amount: number;
+    logistics_way_code: string;
+    third_order_number: string;
+    shop_number: string;
+    express_sheet: string;
+    status: string;
+    production_client: string;
+    statusStr: string;
+    receiver_city: string;
+    remark: string | null;
+    exception_reason: string | null;
+    platform: string;
+    update_time: string;
+    receiver_address2: string;
+    receiver_address1: string;
+    receiver_name: string;
+    tracking_number: string;
+    product_amount: number;
+    carriage_amount: number | null;
+    pay_freight: number;
+    logistics_way_name: string;
+    factory_code: string;
+    receiver_district: string | null;
+    temu_logistics_way_id: string | null;
+    logistics_way_id: number;
+    user_mark: string;
+    namespace: string;
+    receiver_phone: string;
+    exception_handling: number;
+    shipment_type: number;
+    warehouse_id: number;
+  };
+}
+export interface ProductDetails {
+  diy_id: string;
+  diy_bianma: string;
+  base_sku: string;
+  sub_order_number: string;
+  price_update_remark: string | null;
+  price_status: boolean;
+  template_item_sku: string | null;
+  product_id: string;
+  id: number;
+  shipment_num: number;
+  product_item_id: string | null;
+  template_price: number;
+  product: {
+    diy_id: string;
+    end_product_id: string;
+    category_name: string;
+    craft_name: string;
+    base_sku: string;
+    num: number;
+    is_production: boolean;
+    pick_finish: number;
+    remark: string | null;
+    product_price: number;
+    third_stock_sku: string | null;
+    customized_quantity: number;
+    template_price: number;
+    tag_ids: string | null;
+    create_time: string;
+    third_sub_order_number: string;
+    factory_sub_order_number: string;
+    variant_image: string;
+    craft_code: string;
+    pass_num: number;
+    factory_code: string;
+    pay_amount: number;
+    weight: number;
+    is_replenishment: number;
+    image_ary: Array<{ title: string; url: string }>;
+    design_images: Array<{
+      imageUrl: string;
+      fileUrl: string;
+      id: string;
+      title: string;
+      materialId: string;
+      materialImage: string;
+    }>;
+    not_pass_num: number;
+    version: number;
+    supplier_product_no: string | null;
+    pod_jomall_order_us_id: string;
+    craft_price: number;
+    customs_value: number;
+    variant_sku: string;
+    batch_arrange_number: string;
+    trim_design_images: string | null;
+  };
+  product_item_sku: string | null;
+  item_id: number;
+  variant_image: string;
+  pass_num: number;
+  not_pass_num: number | null;
+  craft_price: number;
+  price_update_time: string | null;
+  variant_sku: string;
+  info_id: number;
+  shop_number: string;
+  template_item_id: string | null;
+  order_id: string;
+}
 
 export interface ConfirmOrderForm {
   pass?: number | null

src/types/api/deliveryNote.ts

@@ -187,6 +187,58 @@ export interface DbFactory {
   authorize_number?: number
   status?: number
 }
+
+export interface IDetailData {
+  statusStr?: string;
+  id: string;
+  erp_id?: string;
+  namespace?: string;
+  dbFactory?: DbFactory | null;
+  factory?: DbFactory | null;
+  productList?: Product[];
+  order_number?: string;
+  factory_order_number?: string;
+  erp_order_number?: string;
+  third_order_number?: string;
+  shop_number?: string;
+  product_num?: string | number;
+  start_stocking_time?: string;
+  finish_time?: string;
+  delivery_type?: string;
+  logistics_way_name?: string;
+  lanshou_name?: string;
+  receiver_name?: string;
+  lanshou_phone?: string;
+  receiver_phone?: string;
+  lanshou_region?: string;
+  receiver_province?: string;
+  lanshou_address?: string;
+  receiver_city?: string;
+  receiver_district?: string;
+  receiver_address1?: string;
+  lanshou_post?: string;
+  receiver_post_code?: string;
+  user_mark?: string;
+  price?: number
+  customized_quantityStr?: string
+  product_price?:string
+  customized_quantity:number
+  image_ary?:string | null
+  [propName: string]: string | number | boolean | undefined | unknown;
+}
+
+export interface PodUsDetailData {
+  id: number
+  erp_id?: string;
+  price?: number;
+  customized_quantityStr?: string;
+  product_price?: number;
+  // 其他已有属性...
+  customized_quantity: number; // 添加缺失属性
+  image_ary?: string | null;    // 添加缺失属性
+  productList:IDetailData[]
+  [propName: string]: string | number | boolean | undefined | unknown;
+}
 export interface LogListsData {
   id: number
   diy_id: number
@@ -203,10 +255,13 @@ export interface LogListData {
   employeeAccount?: string
   description?: string
   createTime?: string
+  create_time?: string
+  employee_account?: string
 }
 export interface DetailForm {
   billNumber?: string
   orderNumber?: string
+  craftCode?: string
   baseSku?: string
   shipmentNumber?: string
   process?: string
@@ -217,6 +272,7 @@ export interface DetailForm {
   subOrderNumber?: string
   rows?: number
   page?: number
+  currentPage?: number
   pageSize?: number
   infoId?: number
 }

src/views/podUsBillOrder/detail.vue

+<template>
+  <el-dialog
+    v-model="visible"
+    title="订单详情"
+    top="40px"
+    draggable
+    width="90%"
+    :close-on-click-modal="false"
+    class="order-detail-dialog"
+  >
+    <el-card style="margin-bottom: 10px" v-if="detailData" class="!border-none mt-2" shadow="never">
+      <el-descriptions class="margin-top" :column="3" :border="true">
+        <el-descriptions-item :title="detailData.namespace" label="订单来源">{{
+            detailData.namespace
+          }}
+        </el-descriptions-item>
+
+        <el-descriptions-item
+          :title="detailData.factory_order_number"
+          label="订单号"
+        >{{ detailData.factory_order_number }}
+        </el-descriptions-item
+        >
+        <el-descriptions-item
+          :title="detailData.shop_number"
+          label="店铺单号"
+        >{{ detailData.shop_number }}
+        </el-descriptions-item>
+
+        <el-descriptions-item
+          :title="detailData.third_order_number"
+          label="第三方订单号"
+        >{{ detailData.third_order_number }}
+        </el-descriptions-item
+        >
+
+        <el-descriptions-item :title="detailData.statusStr" label="订单状态">{{
+            detailData.statusStr
+          }}
+        </el-descriptions-item>
+        <el-descriptions-item
+          :title="detailData.product_num"
+          label="产品数量"
+        >{{ detailData.product_num }}
+        </el-descriptions-item
+        >
+        <el-descriptions-item
+          :title="detailData.start_stocking_time"
+          label="确认时间"
+        >{{ detailData.start_stocking_time }}
+        </el-descriptions-item
+        >
+        <el-descriptions-item
+          :title="detailData.finish_time"
+          label="完成时间"
+        >{{ detailData.finish_time }}
+        </el-descriptions-item
+        >
+
+        <el-descriptions-item
+          :title="detailData.delivery_type"
+          label="交运方式"
+        >
+          <span v-if="detailData.delivery_type === 'lanshou'">上门揽收 </span>
+          <span v-if="detailData.delivery_type === 'zisong'">卖家自送 </span>
+        </el-descriptions-item>
+        <el-descriptions-item
+          :title="detailData.logistics_way_name"
+          label="物流方式"
+        >
+          {{ detailData.logistics_way_name }}
+        </el-descriptions-item>
+        <el-descriptions-item
+          :title="detailData.lanshou_name || detailData.receiver_name"
+          label="收货人"
+        >{{
+            detailData.lanshou_name || detailData.receiver_name
+          }}
+        </el-descriptions-item
+        >
+        <el-descriptions-item
+          :title="detailData.lanshou_phone || detailData.receiver_phone"
+          label="收货电话"
+        >{{
+            detailData.lanshou_phone || detailData.receiver_phone
+          }}
+        </el-descriptions-item
+        >
+        <el-descriptions-item
+          :title="detailData.lanshou_region || detailData.receiver_province"
+          label="收货区域"
+        >{{
+            detailData.lanshou_region || detailData.receiver_province
+          }}
+        </el-descriptions-item
+        >
+        <el-descriptions-item
+          :title="
+            detailData.lanshou_address ||
+            [
+              detailData.receiver_province,
+              detailData.receiver_city,
+              detailData.receiver_district,
+              detailData.receiver_address1,
+            ].join(' ')
+          "
+          label="收货地址"
+        >{{
+            detailData.lanshou_address ||
+            [
+              detailData.receiver_province,
+              detailData.receiver_city,
+              detailData.receiver_district,
+              detailData.receiver_address1,
+            ].join(' ')
+          }}
+        </el-descriptions-item
+        >
+        <el-descriptions-item
+          :title="detailData.lanshou_post || detailData.receiver_post_code"
+          label="收货邮政编码"
+        >{{
+            detailData.lanshou_post || detailData.receiver_post_code
+          }}
+        </el-descriptions-item
+        >
+        <el-descriptions-item :title="detailData.user_mark" label="客户">{{
+            detailData.user_mark
+          }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <el-card v-if="detailData" class="!border-none mt-2" shadow="never">
+      <div class="font-bold">商品</div>
+      <div class="flex mt-4">
+        <el-table
+          border
+          class="mt-4"
+          size="large"
+          height="400"
+          :data="detailData.productList"
+        >
+          <el-table-column
+            show-overflow-tooltip
+            label="商品图片"
+            width="100"
+            prop="variant_image"
+          >
+            <template #default="{ row }">
+              <el-image
+                v-if="row.variant_image"
+                preview-teleported
+                style="width: 60px; height: 60px"
+                :preview-src-list="[row.variant_image]"
+                :src="row.variant_image"
+              ></el-image>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="生产单号"
+            width="150"
+            show-overflow-tooltip
+            prop="third_sub_order_number"
+          ></el-table-column>
+          <el-table-column
+            label="工厂单号"
+            width="150"
+            show-overflow-tooltip
+            prop="factory_sub_order_number"
+          ></el-table-column>
+          <el-table-column
+            label="商品名称"
+            show-overflow-tooltip
+            prop="product_name"
+          ></el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            width="100"
+            label="价格(￥)"
+            prop="price"
+          ></el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            width="100"
+            label="商品数量"
+            prop="num"
+          ></el-table-column>
+          <el-table-column
+            label="店铺单号"
+            width="150"
+            prop="shop_number"
+            show-overflow-tooltip
+          >
+            <template #default>
+              {{ detailData.shop_number }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            label="baseSKU"
+            width="150"
+            prop="base_sku"
+          ></el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            label="变体SKU"
+            width="150"
+            prop="variant_sku"
+          ></el-table-column>
+
+          <el-table-column
+            show-overflow-tooltip
+            label="已发货数量"
+            width="120"
+            prop="shipment_num"
+          ></el-table-column>
+
+
+        </el-table>
+
+      </div>
+    </el-card>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import type { ElTable } from 'element-plus'
+import {
+  getPodUsDetailData,
+} from '@/api/order'
+import {  PodUsDetailData } from '@/types/api/deliveryNote.ts'
+
+// 定义props
+interface Props {
+  orderId?: number | string | null;
+  dialogVisible: boolean;
+  loading?: boolean;
+}
+
+const visible = ref(false)
+const props = withDefaults(defineProps<Props>(), {
+  orderId: null,
+  dialogVisible: false,
+  loading: false,
+})
+
+// 定义事件
+const emit = defineEmits(['close', 'update'])
+
+
+const detailData = ref<PodUsDetailData | null>(null)
+const getData = async () => {
+  if (!props.orderId) return
+  const res= await getPodUsDetailData(props.orderId || '')
+  res.data.productList.forEach((it) => {
+    it.price = Number(it.product_price)
+    it.customized_quantityStr = it.customized_quantity > 1 ? '多面' : '单面'
+    it.image_ary =
+      it.image_ary && it.image_ary.startsWith('[')
+        ? JSON.parse(it.image_ary).filter((el: { title: string }) => el.title)
+        : []
+  })
+  detailData.value = res.data
+  console.log(detailData.value)
+}
+
+// 监听props变化，重新获取数据
+watch(
+  () => props.orderId,
+  (newId) => {
+    if (newId) {
+      getData()
+    }
+  },
+)
+
+onMounted(() => {
+  if (props.orderId) {
+    getData()
+  }
+})
+
+onActivated(() => {
+  if (props.orderId) {
+    getData()
+  }
+})
+
+watch(() => props.dialogVisible, () => {
+  visible.value = props.dialogVisible
+})
+
+watch(() => visible.value, () => {
+  emit('update', visible.value)
+})
+</script>
+<style lang="scss" scoped>
+.img-list {
+  display: flex;
+  gap: 5px;
+}
+
+.order-detail-dialog {
+  :deep(.el-dialog__body) {
+    height: 70vh !important;
+    overflow-y: auto;
+    padding: 20px;
+  }
+}
+
+.detail-loading-container {
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/podUsBillOrder/editOrder.vue

+<script setup lang="ts">
+import { ElMessage, ElTable } from 'element-plus'
+import { ProductDetails } from '@/types/api/billOrder.ts'
+
+const selection = ref<ProductDetails[]>([])
+defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const handleDetailSelectionChange = (arr:ProductDetails[]) => {
+  selection.value = arr
+}
+
+const batchUpdate = async (arr:ProductDetails[], title:string, field: 'craft_price' | 'template_price') => {
+  let { value } = await ElMessageBox.prompt(title, '更新价格', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /^\d+(\.\d+)?$/,
+    inputErrorMessage: '请输入数字',
+  })
+  if (value) {
+    if ( Number(value) < 0) {
+      ElMessage.error('价格必须为大于等于0的数字')
+      return
+    }
+    arr.forEach((item:ProductDetails) => {
+      item[field] = Number(value)
+    })
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div style="margin-bottom: 10px">
+      <el-button
+:disabled="!selection.length" type="success"
+                 @click="batchUpdate(selection,'批量修改底胚价格','template_price')">批量修改底胚价格
+      </el-button>
+      <el-button
+:disabled="!selection.length" type="warning"
+                 @click="batchUpdate(selection,'批量修改工艺价格','craft_price')">批量修改工艺价格
+      </el-button>
+    </div>
+    <ElTable
+      ref="deTableRef"
+      :data="list"
+      height="500px"
+      border
+      row-key="id"
+      @selection-change="handleDetailSelectionChange"
+    >
+      <el-table-column
+        show-overflow-tooltip
+        label="商品图片"
+        width="100"
+        prop="variant_image"
+        align="center"
+      >
+        <template #default="{ row }">
+          <el-image
+            v-if="row.variant_image"
+            preview-teleported="body"
+            style="width: 60px; height: 60px"
+            :preview-src-list="[row.variant_image]"
+            :src="row.variant_image"
+          ></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column
+        type="selection"
+        width="50"
+        header-align="center"
+        align="center"
+        fixed
+      />
+      <ElTableColumn
+        show-overflow-tooltip
+        width="60"
+        align="center"
+        label="序号"
+        type="index"
+        fixed
+      />
+      <el-table-column
+        label="生产单号"
+        prop="sub_order_number"
+        header-align="center"
+        align="center"
+        min-width="220"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="第三方生产单号"
+        prop="product.factory_sub_order_number"
+        header-align="center"
+        align="center"
+        min-width="160"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        show-overflow-tooltip
+        label="底胚SKU"
+        align="center"
+        width="150"
+        prop="product.base_sku"
+      />
+      <el-table-column
+        label="底胚价格($)"
+        width="200"
+        align="center"
+        prop="template_price"
+      >
+        <template #default="{row}">
+          <el-input-number v-model="row.template_price" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="工艺价格($)"
+        width="200"
+        align="center"
+        prop="craft_price"
+      >
+        <template #default="{row}">
+          <el-input-number v-model="row.craft_price" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        show-overflow-tooltip
+        label="变体SKU"
+        align="center"
+        width="150"
+        prop="product.variant_sku"
+      />
+      <el-table-column
+        label="商品名"
+        prop="product.product_name"
+        header-align="center"
+        align="center"
+        width="180"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        show-overflow-tooltip
+        label="工艺编码"
+        width="100"
+        align="center"
+        prop="product.craft_code"
+      ></el-table-column>
+      <el-table-column
+        show-overflow-tooltip
+        label="工艺名称"
+        width="140"
+        align="center"
+        prop="product.craft_name"
+      ></el-table-column>
+
+      <el-table-column
+        show-overflow-tooltip
+        label="已发货数量"
+        width="100"
+        align="center"
+        prop="shipment_num"
+      ></el-table-column>
+      <el-table-column
+        show-overflow-tooltip
+        label="产品价格($)"
+        width="100"
+        align="center"
+        prop="product_price"
+      >
+        <template #default="{ row }">
+
+                        <span>{{
+                            row.template_price + row.craft_price || 0
+                          }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="工厂"
+        prop="product.factory_code"
+        header-align="center"
+        align="center"
+        min-width="100"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="备注"
+        prop="product.remark"
+        header-align="center"
+        align="center"
+        min-width="160"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        label="创建时间"
+        prop="product.create_time"
+        header-align="center"
+        align="center"
+        min-width="180"
+        show-overflow-tooltip
+      ></el-table-column>
+    </ElTable>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>