添加podus卡片和列表显示类型，播种墙更改图片展示

8eff2f62 · linjinhong · 6abe966b · 8eff2f62 · 8eff2f62 · 8eff2f62
Commit 8eff2f62 authored Jul 16, 2025 by linjinhong
Showing with 253 additions and 49 deletions

src/types/api/podMakeOrder.ts
+1 -0

src/views/order/orderTracking/index.vue
+126 -8

src/views/order/podUs/PodMakeOrder.vue
+45 -21

src/views/order/podUs/components/ResultInfo.vue
+6 -10

src/views/order/podUs/index.vue
+75 -10

No files found.
--- a/src/types/api/podMakeOrder.ts
+++ b/src/types/api/podMakeOrder.ts
@@ -45,4 +45,5 @@ export interface ProductList {
  power?: boolean
  variantImage?: string
  podJomallUsNo?: string
+  previewImgs?: { sort: string | number; title: string; url: string }[]
 }
--- a/src/views/order/orderTracking/index.vue
+++ b/src/views/order/orderTracking/index.vue
@@ -13,6 +13,7 @@ import {
  getOrderList,
  getOperationLogApi,
  getOrderTabData,
+  getfaceSimplexFileApi,
 } from '@/api/podUsOrder'
 import {
  SearchForm,
@@ -28,6 +29,11 @@ import dayjs from 'dayjs'
 import { getUserMarkList } from '@/api/common'
 import { CaretBottom, CaretTop } from '@element-plus/icons-vue'
 import SplitDiv from '@/components/splitDiv/splitDiv.vue'
+import { BaseRespData } from '@/types/api'
+import { showConfirm } from '@/utils/ui'
+import { isArray, isString } from '@/utils/validate'
+import ResultInfo from '../podUs/components/ResultInfo.vue'
+import { filePath } from '@/api/axios'
 import { useValue } from '@/utils/hooks/useValue'
@@ -162,13 +168,7 @@ const goodsColumns = computed(() => {
      align: 'center',
      showOverflowTooltip: true,
    },
-    {
-      label: '状态',
-      prop: 'subStatus',
-      width: 130,
-      align: 'center',
-      showOverflowTooltip: true,
-    },
    {
      label: '生产单号',
      prop: 'factorySubOrderNumber',
@@ -246,6 +246,18 @@ const goodsColumns = computed(() => {
    },
    {
+      label: '数量',
+      prop: 'num',
+      width: 100,
+      align: 'center',
+    },
+    {
+      label: '未生产数量',
+      prop: 'notPassNum',
+      width: 100,
+      align: 'center',
+    },
+    {
      label: '补胚数量',
      prop: 'replenishmentSumNum',
      width: 100,
@@ -270,6 +282,7 @@ const goodsData = ref<ProductList[]>([])
 const searchVisible = ref(false)
 const goodsLoading = ref(false)
 const logList = ref<LogListData[]>([])
+const selection = ref<PodUsOrderListData[]>([])
 const warehouseList = ref<warehouseInfo[]>([])
 const timeRange = ref<string[]>([])
@@ -400,6 +413,8 @@ const loadCraftList = async () => {
    console.error(e)
  }
 }
+const tableRef = ref()
 const getOrderListFn = async () => {
  const loading = ElLoading.service({
    fullscreen: true,
@@ -415,6 +430,12 @@ const getOrderListFn = async () => {
    )
    tableData.value = data.records
    pagination.value.total = data.total
+    if (tableData.value?.length) {
+      nextTick(async () => {
+        await tableRef.value?.setCurrentRow(tableData.value[0])
+        rowClick(tableData.value[0] as unknown as PodUsOrderListData)
+      })
+    }
  } catch (e) {
    console.error(e)
  } finally {
@@ -469,6 +490,90 @@ function getStatus(status: string) {
  return ''
 }
+const resultInfo = ref<
+  {
+    id: string | number
+    status: boolean
+    factoryOrderNumber?: string
+    message: string
+  }[]
+>([])
+const resultRefs = ref<InstanceType<typeof ResultInfo> | null>(null)
+/**
+ * @description: 创建物流、获取跟踪号、获取打印面单、更改物流、取消物流订单
+ */
+const getOrderByIdApi = async (type: string) => {
+  if (selection.value.length === 0) {
+    return ElMessage.warning('请选择数据')
+  }
+  const operationMap: {
+    [key: string]: {
+      message: string
+      Fn: (orderIds: (string | number)[]) => Promise<BaseRespData<never>>
+    }
+  } = {
+    getPrintOrder: { message: '获取打印面单', Fn: getfaceSimplexFileApi },
+  }
+  let loading
+  const operation = operationMap[type]
+  if (operation) {
+    try {
+      await showConfirm(`确定对该订单 ${operation.message}?`, {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+      const ids = selection.value.map((el) => el.id)
+      loading = ElLoading.service({
+        fullscreen: true,
+        text: '操作中...',
+        background: 'rgba(0, 0, 0, 0.3)',
+      })
+      const res = await operation.Fn(ids)
+      if (res.code === 200) {
+        if (isArray(res.data)) {
+          resultInfo.value =
+            (res.data as {
+              id: string | number
+              status: boolean
+              factoryOrderNumber?: string
+              message: string
+            }[]) || []
+          resultRefs.value?.showDialog()
+          console.log(33)
+        } else if (isString(res.data)) {
+          window.open(filePath + res.data)
+        }
+      } else {
+        ElMessage.error(res.message)
+      }
+    } catch (e) {
+      resultInfo.value = []
+      console.error(e)
+    } finally {
+      loading && loading.close()
+    }
+  } else {
+    ElMessage.warning('未知操作类型')
+  }
+}
+const resultConfirm = () => {
+  search()
+  loadTabData()
+}
+const handleSelectionChange = (val: PodUsOrderListData[]) => {
+  selection.value = val
+}
 watch(
  () => currentRowId.value,
  (newValue, oldValue) => {
@@ -770,6 +875,13 @@ onMounted(() => {
              <ElButton type="primary" @click="search">查询</ElButton>
            </span>
          </ElFormItem>
+          <ElFormItem>
+            <span>
+              <ElButton type="primary" @click="getOrderByIdApi('getPrintOrder')"
+                >获取打印面单</ElButton
+              >
+            </span>
+          </ElFormItem>
        </ElForm>
      </el-card>
    </template>
@@ -787,6 +899,7 @@ onMounted(() => {
                  :paginated-data="tableData"
                  highlight-current-row
                  @row-click="rowClick"
+                  @selection-change="handleSelectionChange"
                >
                  <template #status="{ row }">
                    <div>{{ getStatus(row.status) }}</div>
@@ -818,7 +931,7 @@ onMounted(() => {
        <el-tabs>
          <el-tab-pane label="商品明细">
            <TableView
-              ref="tableRef"
+              ref="goodsRef"
              v-loading="goodsLoading"
              :columns="goodsColumns"
              :serial-numberable="true"
@@ -840,6 +953,11 @@ onMounted(() => {
      </div>
    </template>
  </split-div>
+  <ResultInfo
+    ref="resultRefs"
+    :list="resultInfo"
+    @confirm="resultConfirm"
+  ></ResultInfo>
 </template>
 <style scoped lang="scss">

--- a/src/views/order/podUs/PodMakeOrder.vue
+++ b/src/views/order/podUs/PodMakeOrder.vue
@@ -110,10 +110,21 @@
            :columns="podOrderDetailsColumns"
            highlight-current-row
            @row-click="handleRowClick"
-            @current-change="handleCurrentChange"
          >
            <template #image="{ row }">
-              <img :src="row.variantImage" alt="" />
+              <div
+                style="display: flex; flex-wrap: nowrap"
+                v-if="row.previewImgs?.length"
+              >
+                <div
+                  v-for="img in row.previewImgs"
+                  :key="img"
+                  @click="handleCurrentChange(img.url)"
+                  style="cursor: pointer; margin-right: 5px"
+                >
+                  <img v-if="img.url" :src="img.url" alt="" />
+                </div>
+              </div>
            </template>
            <template #verifyResult="{ row }">
              <el-icon
@@ -214,7 +225,7 @@ import type { WebSocketMessage } from '@/utils/websocket'
 import {
  OrderData,
  PodMakeOrderData,
-  ProductList,
+  // ProductList,
 } from '@/types/api/podMakeOrder'
 import useOrderStore from '@/store/order'
 import {
@@ -254,17 +265,23 @@ const podOrderDetailsColumns = computed(() => [
  {
    label: '图片',
    prop: 'image',
-    width: 60,
+    width: 250,
    slot: 'image',
    align: 'center',
    fixed: 'left',
  },
  {
-    label: 'base SKU',
+    label: '生产单号',
-    prop: 'baseSku',
+    prop: 'podJomallUsNo',
-    width: 140,
+    width: 150,
    align: 'center',
  },
+  // {
+  //   label: 'base SKU',
+  //   prop: 'baseSku',
+  //   width: 140,
+  //   align: 'center',
+  // },
  {
    label: 'variant SKU',
    prop: 'variantSku',
@@ -277,12 +294,6 @@ const podOrderDetailsColumns = computed(() => [
  },
  {
-    label: '生产单号',
-    prop: 'podJomallUsNo',
-    width: 150,
-    align: 'center',
-  },
-  {
    label: '购买数量',
    prop: 'purchaseNumber',
    width: 90,
@@ -317,6 +328,7 @@ watch(visible, async (value: boolean) => {
    currentCode = ''
    warehouseId.value = props.warehouseList[0].id
    _warehouseId.value = props.warehouseList[0].id
    if (userStore.user?.factory.id) {
      try {
        await socket.init(
@@ -338,6 +350,8 @@ watch(visible, async (value: boolean) => {
    initOrderDetailBox()
    initPrintDevice()
+    const locaclPrinter = localStorage.getItem('sheetPrinter')
+    if (locaclPrinter) sheetPrinter.value = JSON.parse(locaclPrinter)
  } else {
    if (userStore.user?.factory.id) {
      socket.send({
@@ -351,7 +365,6 @@ watch(visible, async (value: boolean) => {
 })
 watch(boxIndex, (value: number | null) => {
  if (value) {
-    console.log('boxIndex', value, boxChange.value)
    const bool = !boxChange.value
    boxChange.value = false
    renderItemBox(bool)
@@ -375,6 +388,7 @@ watch(
  },
  { deep: true },
 )
 const podBoxIndex = computed(() => orderStore.podBoxIndex)
 let renderLock = false
@@ -392,6 +406,9 @@ const renderItemBox = (bool: boolean) => {
  let boxItem = podBoxList.value.find((item) => item.box === boxIndex.value)
  if (!boxItem) boxItem = { data: { productList: [] } }
  const { data } = boxItem
+  data?.productList?.forEach((el) => {
+    if (!el.previewImgs) el.previewImgs = JSON.parse(el.imageAry)
+  })
  if (!data) {
    renderLock = false
    currentCode = ''
@@ -399,11 +416,12 @@ const renderItemBox = (bool: boolean) => {
    return
  }
  const { productList = [] } = data
  const pickingNumber = productList.reduce((prev, product) => {
    return prev + (product.count || 0)
  }, 0)
  data.pickingNumber = pickingNumber
-  coverImage.value = productList[0].variantImage || ''
+  coverImage.value = productList[0].previewImgs?.[0]?.url || ''
  for (const product of productList) {
    if (product.count === product.purchaseNumber) {
      product.power = true
@@ -419,7 +437,9 @@ const renderItemBox = (bool: boolean) => {
        : parts[0]
    for (const product of productList) {
      if (product.podJomallUsNo === currentCode) {
-        coverImage.value = product.variantImage || ''
+        coverImage.value = product.previewImgs?.[0]?.url || ''
+        console.log(441, coverImage.value)
        nextTick(() => {
          tableRef.value?.setCurrentRow(product)
        })
@@ -428,7 +448,9 @@ const renderItemBox = (bool: boolean) => {
    }
    currentCode = ''
  }
  podOrderDetailsData.value = data
  if (productList.every((item) => item.power)) {
    print(data, false, () => {
      renderLock = false
@@ -552,6 +574,8 @@ const getPackingData = async (code: string) => {
      return
    }
    const { box } = res.data
+    console.log('box', box)
    if (box) {
      boxIndex.value = box
    }
@@ -647,8 +671,8 @@ const initOrderDetailBox = async () => {
      boxList.find((item) => item.data)?.data || undefined
    boxIndex.value = boxList.find((item) => item.data)?.box || null
    coverImage.value =
-      boxList.find((item) => item.data)?.data?.productList?.[0]?.variantImage ||
+      boxList.find((item) => item.data)?.data?.productList?.[0]
-      ''
+        ?.previewImgs?.[0].url || ''
    if (
      podOrderDetailsData.value &&
      podOrderDetailsData.value.pickingNumber ===
@@ -871,9 +895,9 @@ const clearAllBox = async () => {
 const handleRowClick = () => {
  productionOrderRef.value.focus()
 }
-const handleCurrentChange = (row: ProductList) => {
+const handleCurrentChange = (url: string) => {
-  if (row) {
+  if (url) {
-    coverImage.value = row.variantImage || ''
+    coverImage.value = url || ''
  }
 }
 const warehouseId = ref<string | number>('')

--- a/src/views/order/podUs/components/ResultInfo.vue
+++ b/src/views/order/podUs/components/ResultInfo.vue
@@ -131,16 +131,12 @@ function closedFn() {
 }
 // 监听弹窗状态
-// watch(
+watch(
-//   () => resultDialog.value,
+  () => resultDialog.value,
-//   (v) => {
+  (v) => {
-//     if (v) {
+    console.log(v)
-//       console.log(127, props.list)
+  },
+)
-//       resultfilter(true)
-//     }
-//   },
-// )
 watch(
  () => props.list,
  (v) => {

--- a/src/views/order/podUs/index.vue
+++ b/src/views/order/podUs/index.vue
@@ -608,6 +608,17 @@
                >
                  <div class="goods-item-img">
                    <img :src="item.variantImage" alt="商品图片" />
+                    <div
+                      v-if="item.customizedQuantity"
+                      class="triangle-box"
+                      :title="`类型:${getQuantityText(
+                        item.customizedQuantity,
+                      )}面`"
+                    >
+                      <div class="multi-text">
+                        {{ getQuantityText(item.customizedQuantity) }}
+                      </div>
+                    </div>
                  </div>
                  <div class="goods-item-info">
                    <div class="goods-item-info-item">
@@ -1251,10 +1262,19 @@
                    style="height: 30px"
                  />
                </div>
+                <div
+                  v-if="cardItem?.customizedQuantity"
+                  class="customizedQuantity"
+                  :title="`类型:${getQuantityText(
+                    cardItem?.customizedQuantity,
+                  )}面`"
+                >
+                  {{ getQuantityText(cardItem?.customizedQuantity) }}
+                </div>
                <Icon
                  name="caozuorizhi"
                  @click="(e: MouseEvent) => operationLog(cardItem.podJomallOrderUsId, e)"
+                  style="width: 28px; height: 28px"
                >
                  <template #title>
                    <title>操作日志</title>
@@ -1278,7 +1298,11 @@
                      class="item-image"
                      @mousemove="handleChangeImages(item, cardItem)"
                    >
-                      <img :src="item?.url" height="28" />
+                      <img
+                        :src="item?.url"
+                        height="28"
+                        @click="handlePictureCardPreview(item?.url)"
+                      />
                    </div>
                  </div>
                </div>
@@ -1849,6 +1873,9 @@
      </span>
    </template>
  </ElDialog>
+  <el-dialog v-model="dialogVisible" width="35%">
+    <img :src="dialogImageUrl" alt="商品预览图片" />
+  </el-dialog>
 </template>
 <script setup lang="ts">
 import { getUserMarkList } from '@/api/common'
@@ -2051,7 +2078,7 @@ const logisticsWayData = ref([])
 const searchVisible = ref(false)
 const confirmSelectionData = ref<LogisticsData[]>([])
 const confirmRowData = ref<ProductList | null>(null)
-const status = ref('TO_BE_CONFIRMED')
+const status = ref(localStorage.getItem('podUsStatus') || 'TO_BE_CONFIRMED')
 const detailData = ref({})
 const [searchForm, resetSearchForm] = useValue<SearchForm>({
@@ -3611,7 +3638,10 @@ const logisticsToPicking = async () => {
 }
 const sheetPrinter = ref('')
 const handlePrinterChange = (value: string) => {
+  console.log('value', value)
  sheetPrinter.value = value
+  localStorage.setItem('sheetPrinter', JSON.stringify(value))
 }
 const { getCLodop } = useLodop()
 const printOrder = async (
@@ -3887,12 +3917,6 @@ watch(
 )
 onMounted(() => {
-  const podUsStatus = localStorage.getItem('podUsStatus')
-  if (podUsStatus) {
-    status.value = podUsStatus
-  }
  loadTabData()
  getUserMark()
  loadProductionClient()
@@ -4091,6 +4115,17 @@ function getPlatformImg(code: string) {
  return ''
 }
+function getQuantityText(qty: number) {
+  if (!qty || qty <= 0) return ''
+  return Math.floor(qty) === 1 ? '单' : '多'
+}
+const dialogVisible = ref(false)
+const dialogImageUrl = ref('')
+const handlePictureCardPreview = (fileUrl: string) => {
+  dialogImageUrl.value = fileUrl
+  dialogVisible.value = true
+}
 // 全局 loading 改为每行 loading map
 const reComposingLoadingMap = reactive<{ [key: number]: boolean }>({})
@@ -4164,7 +4199,7 @@ useRouter().beforeEach((to, from, next) => {
  .goods-item-img {
    width: 100px;
    height: 100px;
+    position: relative;
    img {
      width: 100%;
    }
@@ -4400,6 +4435,36 @@ useRouter().beforeEach((to, from, next) => {
  align-items: center;
  justify-content: flex-start;
 }
+.customizedQuantity {
+  height: 28px;
+  width: 28px;
+  color: #f56c6c;
+  text-align: center;
+  line-height: 24px;
+  background-color: #fff;
+  border: 2px solid #f56c6c;
+  border-radius: 7px;
+  margin-right: 2px;
+  font-weight: 700;
+  box-sizing: border-box;
+}
+.triangle-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border: 18px solid transparent;
+  border-top: 18px solid #e74c3c;
+  border-right: 18px solid #e74c3c;
+}
+.multi-text {
+  position: absolute;
+  top: -19px;
+  color: white;
+  font-weight: bold;
+}
 </style>
 <style lang="scss">
 .customize-select-style {