'zi'

src/views/order/ProductInfo.vue

@@ -11,13 +11,20 @@
       <img :src="item.variantImage" style="width: 100%; height: 100%" />
     </div>
     <div class="order-list-expand_item_info">
-      <div :title="item.productName || '--'" class="order-list-expand_item_info_title" style="font-weight: bold">
+      <div
+        :title="item.productName || '--'"
+        class="order-list-expand_item_info_title"
+        style="font-weight: bold"
+      >
         <span class="order-list-expand_item_label">商品名:</span>
         <span class="order-list-expand_item_value">{{
           item.productName || '--'
         }}</span>
       </div>
-      <div :title="item.baseSku || ''" class="order-list-expand_item_info_title">
+      <div
+        :title="item.baseSku || ''"
+        class="order-list-expand_item_info_title"
+      >
         <span class="order-list-expand_item_label">Base SKU:</span>
         <span class="order-list-expand_item_value"
           >{{ item.baseSku || '--'
@@ -25,7 +32,10 @@
             ><DocumentCopy /></el-icon
         ></span>
       </div>
-      <div :title="item.variantSku || ''" class="order-list-expand_item_info_title">
+      <div
+        :title="item.variantSku || ''"
+        class="order-list-expand_item_info_title"
+      >
         <span class="order-list-expand_item_label">Variant SKU:</span>
         <span class="order-list-expand_item_value"
           >{{ item.variantSku || '--' }}
@@ -34,7 +44,10 @@
           /></el-icon>
         </span>
       </div>
-      <div :title="item.shopNumber || ''" class="order-list-expand_item_info_title">
+      <div
+        :title="item.shopNumber || ''"
+        class="order-list-expand_item_info_title"
+      >
         <span class="order-list-expand_item_label">店铺单号:</span>
         <span class="order-list-expand_item_value"
           >{{ item.shopNumber || '--' }}
@@ -43,7 +56,10 @@
           /></el-icon>
         </span>
       </div>
-      <div  :title="item.subOrderNumber || ''" class="order-list-expand_item_info_title">
+      <div
+        :title="item.subOrderNumber || ''"
+        class="order-list-expand_item_info_title"
+      >
         <span class="order-list-expand_item_label">生产单号:</span>
         <span class="order-list-expand_item_value"
           >{{ item.subOrderNumber || '--'
@@ -52,7 +68,7 @@
           /></el-icon>
         </span>
       </div>
-      <div  class="order-list-expand_item_info_title">
+      <div class="order-list-expand_item_info_title">
         <span class="order-list-expand_item_label">发货状态:</span>
         <span
           v-if="(item.shipmentNum || 0) - (item.notPassNum || 0) === item.num"
@@ -76,12 +92,30 @@
           <el-tag effect="dark" type="danger"> 未发货 </el-tag>
         </span>
       </div>
-      <div :title="item.material || ''" class="order-list-expand_item_info_title">
+      <div
+        :title="item.material || ''"
+        class="order-list-expand_item_info_title"
+      >
         <span class="order-list-expand_item_label">材质:</span>
         <span class="order-list-expand_item_value"
-        >{{ item.material || '--'
-          }}
+          >{{ item.material || '--' }}
+        </span>
+      </div>
+      <div
+        v-if="item.remark"
+        :title="item.remark || ''"
+        class="order-list-expand_item_info_title"
+      >
+        <span class="order-list-expand_item_label">备注:</span>
+        <span class="order-list-expand_item_value"
+          >{{ item.remark || '--' }}
         </span>
+        <el-icon
+          class="icon"
+          style="color: #e6a23c"
+          @click="setRemarks(item.id, item.remark)"
+          ><EditPen
+        /></el-icon>
       </div>
     </div>
     <div class="order-list-expand_item_price">
@@ -145,12 +179,11 @@
   </div>
 </template>
 <script setup lang="ts">
-import { DocumentCopy } from '@element-plus/icons-vue'
+import { DocumentCopy, EditPen } from '@element-plus/icons-vue'
 import { filePath } from '@/api/axios'
 import { downloadOrder } from '@/api/order'
 import { OrderData, ProductList } from '@/types/api/order'
-import { PropType } from 'vue'
-
+import { PropType ,defineEmits} from 'vue'
 defineProps({
   row: {
     type: Object as PropType<OrderData>,
@@ -164,6 +197,9 @@ defineProps({
     type: Number,
   },
 })
+const emit = defineEmits<{
+      (e: 'update-remark', payload: { id: number; remark: string }): void;
+    }>();
 const downloadManuscriptBySubOrder = async (item: ProductList) => {
   try {
     const res = await downloadOrder(item.id)
@@ -176,6 +212,10 @@ const copy = (text: string) => {
   navigator.clipboard.writeText(text)
   ElMessage.success('复制成功')
 }
+
+const setRemarks = (id: number, remark: string) => {
+  emit('update-remark', { id, remark })
+}
 </script>
 <style lang="scss" scoped>
 .order-list-expand_item {
@@ -183,7 +223,6 @@ const copy = (text: string) => {
   border-bottom: 1px solid #eee;
   padding: 20px;
 }
-
 .order-list-expand_item:last-child {
   border-bottom: 0;
 }
@@ -206,6 +245,7 @@ const copy = (text: string) => {
 .order-list-expand_item_info_title {
   line-height: 26px;
   display: flex;
+  align-items: center;
 }
 
 .order-list-expand_item_label {