Переглянути джерело

feat: 添加替代料标识功能,优化产品信息展示

xieyong 1 день тому
батько
коміт
bdaa4c1af9

+ 112 - 4
src/views/bpm/handleTask/components/saleOrder/invoice/detailDialog.vue

@@ -124,7 +124,7 @@
       :columns="columns"
       @columns-change="handleColumnChange"
       :cache-key="cacheKeyUrl"
-      :datasource="detailData.productList"
+      :datasource="displayProductList"
       row-key="id"
       show-summary
       :summary-method="getSummaries"
@@ -145,6 +145,44 @@
           <el-button type="text" slot="reference">明细</el-button>
         </el-popover>
       </template>
+      <!-- 替代料标识:当 row.relationId 在 productList 的 id 集合中存在时,显示"替"标签,hover 展示原产品信息 -->
+      <template v-slot:productCode="{ row }">
+        <span v-if="isReplacementProduct(row)" class="product-code-cell">
+          <el-popover
+            placement="top"
+            trigger="hover"
+            width="260"
+          >
+            <div class="replace-tip">
+              <div>
+                <span class="label">原物品名称:</span>
+                <span class="value">{{ (getOriginalProduct(row) || {}).productName || '-' }}</span>
+              </div>
+              <div>
+                <span class="label">原物品编码:</span>
+                <span class="value">{{ (getOriginalProduct(row) || {}).productCode || '-' }}</span>
+              </div>
+              <div>
+                <span class="label">规格:</span>
+                <span class="value">{{ (getOriginalProduct(row) || {}).specification || (getOriginalProduct(row) || {}).originalSpec || '-' }}</span>
+              </div>
+              <div>
+                <span class="label">订单编码:</span>
+                <span class="value">{{ (getOriginalProduct(row) || {}).orderNo || '-' }}</span>
+              </div>
+            </div>
+            <template v-slot:reference>
+              <el-tag
+                size="mini"
+                effect="plain"
+                class="replace-tag"
+              >替</el-tag>
+            </template>
+          </el-popover>
+          <span>{{ row.productCode }}</span>
+        </span>
+        <span v-else>{{ row.productCode }}</span>
+      </template>
       <template v-slot:industryArtFiles="{ row, $index }">
         <el-form-item
           style="margin-bottom: 20px"
@@ -193,8 +231,7 @@
   import { getFile } from '@/api/system/file';
   import dictMixins from '@/mixins/dictMixins';
   import {
-    getSendSaleOrderrecordDetail,
-    getByIdOnlyReplace
+    getSendSaleOrderrecordDetail
   } from '@/api/bpm/components/saleManage/saleorder';
   import { reviewStatusEnum } from '@/enum/dict';
   import { copyObj } from '@/utils/util';
@@ -230,6 +267,8 @@
         },
         rules: {},
         detailData: {},
+        // id -> product 映射,用于查找被替换的原产品
+        productOriginalMap: {},
         childrenColumns: [
           {
             width: 80,
@@ -657,6 +696,23 @@
             align: 'center'
           }
         ];
+      },
+      // 被替换的原产品 id 集合:所有出现作为别人 relationId 的 id
+      replacedIdSet() {
+        const set = new Set();
+        const list = this.detailData.productList || [];
+        list.forEach((item) => {
+          if (item && item.relationId != null && item.relationId !== '') {
+            set.add(item.relationId);
+          }
+        });
+        return set;
+      },
+      // 表格显示的产品:过滤掉"被替换的原产品",保留替代品与普通产品
+      displayProductList() {
+        const list = this.detailData.productList || [];
+        const replaced = this.replacedIdSet;
+        return list.filter((item) => !(item && replaced.has(item.id)));
       }
     },
 
@@ -702,6 +758,29 @@
           });
         }
       },
+      // 构建 productId -> 产品 的查找表,供"是否替代料"判断与"原产品信息"展示
+      buildProductOriginalMap() {
+        const map = {};
+        const list = this.detailData.productList || [];
+        list.forEach((item) => {
+          if (item && item.id != null) {
+            map[item.id] = item;
+          }
+        });
+        this.productOriginalMap = map;
+      },
+      // 当某条 item 的 relationId 能在 productList 的 id 集合中找到时,该 item 为替代料
+      isReplacementProduct(row) {
+        if (!row || row.relationId == null || row.relationId === '') {
+          return false;
+        }
+        return this.productOriginalMap[row.relationId] != null;
+      },
+      // 获取被替换的原产品对象
+      getOriginalProduct(row) {
+        if (!this.isReplacementProduct(row)) return null;
+        return this.productOriginalMap[row.relationId] || null;
+      },
       getSummaries(param) {
         const data = param.data.map((row) =>
           row.orderProductType === 2 && (!row.saleCount || !row.saleUnit)
@@ -754,12 +833,14 @@
       },
       async getDetailData(id) {
         this.loading = true;
-        const data = await getByIdOnlyReplace(id);
+        const data = await getSendSaleOrderrecordDetail(id);
         this.loading = false;
         if (data) {
           data.categoryLevelTopId = data.topCategoryIds;
           this.form = data;
           this.detailData = data;
+          // 构建 id->product 映射,用于替代料判断与原产品信息查找
+          this.buildProductOriginalMap();
           console.log('this.form~~~', this.form);
           this.$nextTick(() => {
             // this.$refs.add?.initFormData();
@@ -796,4 +877,31 @@
       margin-right: 20px;
     }
   }
+
+  // 替代料"替"标签 + 原产品信息气泡
+  .product-code-cell {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .replace-tag {
+    background: #fdf6ec;
+    color: #e6a23c;
+    border-color: #faecd8;
+    padding: 0 6px;
+    height: 18px;
+    line-height: 18px;
+  }
+  .replace-tip {
+    font-size: 12px;
+    line-height: 20px;
+    .label {
+      display: inline-block;
+      min-width: 84px;
+      color: #909399;
+    }
+    .value {
+      color: #303133;
+    }
+  }
 </style>