快捷生产+生产中卡片

src/api/order.ts

@@ -221,7 +221,6 @@ export function refreshProductInfo(data: number[]) {
     data,
   )
 }
-
 export function getDeliveryNoteList(
   data: DeliveryNoteSearchForm,
   currentPage: number,

src/api/podOrder.ts

@@ -15,13 +15,29 @@ export function getOrderTabData() {
     'factory/podJomallOrder/findStateGroupList',
   )
 }
+export function refreshJMProductInfo(data: number[]) {
+  return axios.post<never, BaseRespData<never>>(
+    'factory/podJomallOrder/refreshJomallPodProduct ',
+    data,
+  )
+}
 export function getOrderList(
   data: SearchForm,
   currentPage: number,
   pageSize: number,
 ) {
   return axios.post<never, BasePaginationData<OrderData>>(
-    '/factory/podJomallOrder/list_page ',
+    '/factory/podJomallOrder/list_page',
+    { ...data, currentPage, pageSize },
+  )
+}
+export function getCardOrderList(
+  data: SearchForm,
+  currentPage: number,
+  pageSize: number,
+) {
+  return axios.post<never, BasePaginationData<OrderData>>(
+    '/factory/podJomallOrder/getSubListPage',
     { ...data, currentPage, pageSize },
   )
 }
@@ -75,6 +91,12 @@ export function addInternalTagApi(idList: number[], memo: string) {
     { idList, content: memo },
   )
 }
+export function reasonInvalidationApi(idList: number[], memo: string) {
+  return axios.post<never, BaseRespData<never>>(
+    'factory/podJomallOrder/invalidSubOrder',
+    { idList, reasonStr: memo },
+  )
+}
 // 打印生产单
 export function printOrder(ids: number[]) {
   return axios.post<never, BaseRespData<never>>(

src/components/CardPods.vue

+<template>
+  <div class="commodity-card">
+    <div class="commodity-card-image">
+      <div class="before"></div>
+      <div class="image">
+        <img :src="cardItem.variantImage" />
+      </div>
+      <div class="img_top_left">
+        <span class="select-icon"></span>
+      </div>
+      <div class="img_top_right">
+        <slot name="top_right"></slot>
+      </div>
+      <div class="img_bottom_left">
+        <slot name="bottom_left"></slot>
+      </div>
+      <div class="img_bottom_right">
+        <slot name="operations"></slot>
+      </div>
+    </div>
+    <div class="commodity-card-info">
+      <slot name="images"></slot>
+      <slot name="info"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import type { TypesettingListData } from '../types/api/typesetting'
+
+defineProps({
+  cardItem: {
+    type: Object as PropType<TypesettingListData>,
+    required: true,
+  },
+})
+const copy = (text: string) => {
+  navigator.clipboard.writeText(text)
+  ElMessage.success('复制成功')
+}
+</script>
+
+<style lang="scss" scoped>
+.commodity-card-image {
+  position: relative;
+  .img_top_left {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+  }
+  .img_top_right {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
+  .img_bottom_left {
+    position: absolute;
+    bottom: 2px;
+    left: 5px;
+  }
+  .img_bottom_right {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    :deep(.svg-icon) {
+      width: 2em;
+      height: 2em;
+    }
+  }
+}
+.before {
+  height: 0;
+  padding-top: 120%;
+}
+.image {
+  position: absolute;
+  inset: 0;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: center;
+  }
+}
+.color-image {
+  .color-image-item {
+    width: 50px;
+    height: 50px;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.commodity-card-info {
+  padding: 10px;
+  font-size: 14px;
+  background: linear-gradient(
+    90deg,
+    rgba(228, 228, 228, 0.4) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+}
+.commodity-card-name-price {
+  height: 30px;
+  line-height: 30px;
+}
+
+.commodity-card-sku {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background-color: #fff;
+}
+
+.select-icon {
+  position: relative;
+  display: block;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #cccccc;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4) inset;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.commodity-card.active .select-icon {
+  background: #4168ff;
+  position: relative;
+  border-color: #4168ff;
+  box-shadow: none;
+  font-size: 18px;
+  top: -1px;
+  left: -1px;
+}
+
+.commodity-card.active .select-icon::after {
+  position: absolute;
+  content: '';
+  top: 0px;
+  left: 4px;
+  width: 4px;
+  height: 8px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: transparent #fff #fff transparent;
+  transform: rotate(45deg) scale(0.8);
+}
+</style>

src/types/api/order.ts

@@ -72,7 +72,38 @@ export interface OrderData {
   manuscriptStatus?: number
   factoryOrderNumber?: string | undefined
 }
-
+export interface CardOrderItem {
+  id: number;
+  podOrderId: number;
+  thirdSubOrderNumber: string;
+  factorySubOrderNumber: string;
+  shopNumber: string;
+  baseSku: string;
+  productName: string;
+  variantSku: string;
+  variantImage: string;
+  imageAry?: string | null; 
+  designImages?: null; 
+  process: string;
+  processName: string;
+  num: number;
+  shipmentNum: number;
+  costPrice: number;
+  price: number;
+  processPrice: number;
+  weight?: null; 
+  version: number;
+  remark?: null; 
+  createTime: string;
+  updateTime: string; 
+  subOrderNumber?: null; 
+  [propName: string]: string | number | boolean | undefined | unknown;
+}
+export interface cardImages{
+  ename?: string | null,
+  cname?: string | null,
+  image: string,
+}
 export interface ProductList {
   id: number
   customOrderId?: number

src/utils/hooks/useElTableColumnWidth.ts

@@ -4,10 +4,11 @@ import { debounce } from 'lodash-es'
 
 export default function useElTableColumnWidth(
   selector: string,
-): [Ref<HTMLElement | null>, Ref<number>] {
+): [Ref<HTMLElement | null>, Ref<number>, () => void] {
+  // 返回值：元祖里添加第三个参数，实现二次渲染
   const tableWrapperRef = ref<HTMLDivElement | null>(null)
   const width = ref(0)
-
+  // 清理事件监听器
   let cleanupResizeEventListener: (() => void) | undefined
   let cleanupThResizeEventListener: (() => void) | undefined
 
@@ -15,6 +16,7 @@ export default function useElTableColumnWidth(
   const onThResize = () => {
     if (currentTh) width.value = currentTh.offsetWidth
   }
+  // 监听目标列大小变化
   const watchThSizeChange = (th: HTMLElement) => {
     if (currentTh === th) return
     currentTh = th
@@ -25,7 +27,11 @@ export default function useElTableColumnWidth(
       currentTh = null
     }
   }
-
+  // 手动触发列宽更新
+  const updateColumnWidth = () => {
+    onTableWrapperResize()
+  }
+  // 表格容器大小变化监听
   const onTableWrapperResize = debounce(() => {
     const el = tableWrapperRef.value
     if (!el) return
@@ -50,5 +56,5 @@ export default function useElTableColumnWidth(
     cleanupThResizeEventListener?.()
   })
 
-  return [tableWrapperRef, width]
+  return [tableWrapperRef, width, updateColumnWidth]
 }

src/views/order/ProductInfo.vue

@@ -170,6 +170,18 @@
           (item.num || 0) - ((item.shipmentNum || 0) - (item.notPassNum || 0))
         }}</span>
       </div>
+      <div class="order-list-expand_item_info_title">
+        <span class="order-list-expand_item_label">工艺:</span>
+        <span class="order-list-expand_item_value">{{
+          item.processName || '--'
+        }}</span>
+      </div>
+      <div class="order-list-expand_item_info_title">
+        <span class="order-list-expand_item_label">工艺简称:</span>
+        <span class="order-list-expand_item_value">{{
+          item.process || '--'
+        }}</span>
+      </div>
       <div v-if="!isPod" class="order-list-expand_item_info_title">
         <span class="order-list-expand_item_label">待质检:</span>
         <span class="order-list-expand_item_value">{{