卓美-积分订单多规格展示处理

src/views/his/integralOrder/index.vue

@@ -157,7 +157,7 @@
           v-hasPermi="['his:integralOrder:export']"
         >导出</el-button>
       </el-col>
-      
+
       <el-col :span="1.5">
           <el-button
             type="info"
@@ -220,17 +220,12 @@
       <el-table-column label="ERP账号" align="center" prop="loginAccount" />
       <el-table-column label="ERP电话" align="center" prop="erpPhone" />
       <el-table-column label="订单编号" align="center" prop="orderCode" />
-      <el-table-column label="商品名称" align="center" width="200">
+      <el-table-column label="商品信息" align="center" width="200">
         <template slot-scope="scope">
           <div style="display: flex; align-items: center; justify-content: center;">
-            <span>{{ scope.row.goodsName }}</span>
-            <el-image
-              v-if="scope.row.goodsImage"
-              :src="scope.row.goodsImage"
-              style="width: 40px; height: 40px; margin-left: 8px;"
-              fit="cover"
-              :preview-src-list="[scope.row.goodsImage]"
-            />
+            <span style="white-space: pre-line; text-align: left;">{{ scope.row.goodsName }}</span>
+            <!-- 这里移除了num显示，因为现在goodsName已经包含数量信息 -->
+            <!-- 如果你还需要显示其他内容，可以放在这里 -->
           </div>
         </template>
       </el-table-column>
@@ -378,9 +373,9 @@
       <div v-loading="erpAccountDialog.loading">
         <el-form :model="erpAccountForm" label-width="100px">
           <el-form-item label="ERP账户" required>
-            <el-select 
-              v-model="erpAccountForm.selectedAccount" 
-              placeholder="请选择ERP账户" 
+            <el-select
+              v-model="erpAccountForm.selectedAccount"
+              placeholder="请选择ERP账户"
               style="width: 100%"
               filterable
             >
@@ -393,9 +388,9 @@
             </el-select>
           </el-form-item>
           <el-form-item label="推送手机号">
-            <el-select 
-              v-model="erpAccountForm.selectedPhones" 
-              multiple 
+            <el-select
+              v-model="erpAccountForm.selectedPhones"
+              multiple
               placeholder="请选择推送手机号，不填默认订单用户电话"
               style="width: 100%"
               filterable
@@ -409,7 +404,7 @@
             </el-select>
           </el-form-item>
         </el-form>
-        
+
         <!-- 订单统计信息 -->
         <div class="order-summary" v-if="orderSummary">
           <el-divider content-position="left">订单统计</el-divider>
@@ -435,11 +430,11 @@
           </el-row>
         </div>
       </div>
-      
+
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancelErpAccountDialog">取 消</el-button>
-        <el-button 
-          type="primary" 
+        <el-button
+          type="primary"
           @click="confirmCreateErpOrder"
           :disabled="!erpAccountForm.selectedAccount"
           :loading="erpAccountDialog.submitting"
@@ -454,9 +449,9 @@
       <el-table :data="phoneList" border style="width: 100%">
         <el-table-column prop="phone" label="手机号" align="center">
           <template slot-scope="scope">
-            <el-input 
-              v-if="scope.row.editing" 
-              v-model="scope.row.phone" 
+            <el-input
+              v-if="scope.row.editing"
+              v-model="scope.row.phone"
               placeholder="请输入手机号"
               @blur="validatePhone(scope.row)"
               @keyup.enter.native="handleSavePhone(scope.$index)"
@@ -466,27 +461,27 @@
         </el-table-column>
         <el-table-column label="操作" align="center" width="300">
           <template slot-scope="scope">
-            <el-button 
-              v-if="scope.row.editing" 
-              type="success" 
-              size="mini" 
+            <el-button
+              v-if="scope.row.editing"
+              type="success"
+              size="mini"
               @click="handleSavePhone(scope.$index)"
             >保存</el-button>
-            <el-button 
-              v-if="scope.row.editing" 
-              type="info" 
-              size="mini" 
+            <el-button
+              v-if="scope.row.editing"
+              type="info"
+              size="mini"
               @click="handleCancelEdit(scope.$index)"
             >取消</el-button>
-            <el-button 
-              v-if="!scope.row.editing" 
-              type="primary" 
-              size="mini" 
+            <el-button
+              v-if="!scope.row.editing"
+              type="primary"
+              size="mini"
               @click="handleEditPhone(scope.$index)"
             >修改</el-button>
-            <el-button 
-              type="danger" 
-              size="mini" 
+            <el-button
+              type="danger"
+              size="mini"
               @click="handleDeletePhone(scope.$index)"
             >删除</el-button>
           </template>
@@ -525,12 +520,12 @@
         <el-button @click="uploadStatus.open = false">取 消</el-button>
       </div>
     </el-dialog>
-    
+
     <!-- 导入结果对话框 -->
-    <el-dialog 
-      title="导入结果" 
-      :visible.sync="importResultDialog.open" 
-      width="80%" 
+    <el-dialog
+      title="导入结果"
+      :visible.sync="importResultDialog.open"
+      width="80%"
       append-to-body
       :close-on-click-modal="false"
     >
@@ -556,12 +551,12 @@
           </el-col>
         </el-row>
       </div>
-      
+
       <el-tabs v-model="importResultTab" type="card">
         <el-tab-pane label="成功列表" name="success">
-          <el-table 
-            :data="displayedSuccessList" 
-            border 
+          <el-table
+            :data="displayedSuccessList"
+            border
             stripe
             height="400"
             style="width: 100%"
@@ -577,9 +572,9 @@
           </div>
         </el-tab-pane>
         <el-tab-pane label="失败列表" name="failure">
-          <el-table 
-            :data="displayedFailureList" 
-            border 
+          <el-table
+            :data="displayedFailureList"
+            border
             stripe
             height="400"
             style="width: 100%"
@@ -596,7 +591,7 @@
           </div>
         </el-tab-pane>
       </el-tabs>
-      
+
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="importResultDialog.open = false">关 闭</el-button>
       </div>
@@ -789,7 +784,7 @@ export default {
       this.uploadStatus.open = false;
       this.uploadStatus.isUploading = false;
       this.$refs.uploadStatus.clearFiles();
-      
+
       // 处理新的返回结果格式
       if (response.code === 200 && response.data) {
         this.importResult = response.data;
@@ -798,32 +793,32 @@ export default {
         this.displayedFailureList = [];
         this.successListCurrentPage = 1;
         this.failureListCurrentPage = 1;
-        
+
         // 加载第一页数据
         this.loadSuccessListPage(1);
         this.loadFailureListPage(1);
-        
+
         // 显示结果对话框
         this.importResultDialog.open = true;
         this.importResultTab = this.importResult.failureNum > 0 ? "failure" : "success";
       } else {
         this.$alert(response.msg || "导入失败", "导入结果", { dangerouslyUseHTMLString: true });
       }
-      
+
       this.getList();
     },
     // 加载成功列表分页数据
     loadSuccessListPage(page) {
       if (this.successListLoading) return;
       this.successListLoading = true;
-      
+
       const start = (page - 1) * this.successListPageSize;
       const end = start + this.successListPageSize;
       const pageData = this.importResult.successList.slice(start, end);
-      
+
       this.displayedSuccessList = this.displayedSuccessList.concat(pageData);
       this.successListCurrentPage = page;
-      
+
       this.$nextTick(() => {
         this.successListLoading = false;
         // 绑定滚动事件
@@ -836,14 +831,14 @@ export default {
     loadFailureListPage(page) {
       if (this.failureListLoading) return;
       this.failureListLoading = true;
-      
+
       const start = (page - 1) * this.failureListPageSize;
       const end = start + this.failureListPageSize;
       const pageData = this.importResult.failureList.slice(start, end);
-      
+
       this.displayedFailureList = this.displayedFailureList.concat(pageData);
       this.failureListCurrentPage = page;
-      
+
       this.$nextTick(() => {
         this.failureListLoading = false;
         // 绑定滚动事件
@@ -861,7 +856,7 @@ export default {
           successTableBody.removeEventListener('scroll', this.handleSuccessListScroll);
           successTableBody.addEventListener('scroll', this.handleSuccessListScroll);
         }
-        
+
         // 失败列表滚动
         const failureTableBody = document.querySelector('.el-dialog__body .el-tabs__content .el-tab-pane:last-child .el-table__body-wrapper');
         if (failureTableBody) {
@@ -876,7 +871,7 @@ export default {
       const scrollTop = container.scrollTop;
       const scrollHeight = container.scrollHeight;
       const clientHeight = container.clientHeight;
-      
+
       // 距离底部50px时加载下一页
       if (scrollHeight - scrollTop - clientHeight < 50) {
         const totalPages = Math.ceil(this.importResult.successList.length / this.successListPageSize);
@@ -891,7 +886,7 @@ export default {
       const scrollTop = container.scrollTop;
       const scrollHeight = container.scrollHeight;
       const clientHeight = container.clientHeight;
-      
+
       // 距离底部50px时加载下一页
       if (scrollHeight - scrollTop - clientHeight < 50) {
         const totalPages = Math.ceil(this.importResult.failureList.length / this.failureListPageSize);
@@ -965,15 +960,98 @@ export default {
         }, 1);
     },
     /** 查询积分商品订单列表 */
+    /** 查询积分商品订单列表 */
     getList() {
       this.loading = true;
-      
+
       // 直接传递订单编号数组给后端
       listIntegralOrder(this.queryParams).then(response => {
         // 解析itemJson字段，提取goodsName和图片
         const processedData = response.rows.map(item => {
           let goodsName = '';
           let goodsImage = '';
+          let num = '';
+          try {
+            if (item.itemJson) {
+              const itemData = JSON.parse(item.itemJson);
+
+              // 如果itemJson是数组格式，遍历数组并用换行分隔每个商品
+              if (Array.isArray(itemData) && itemData.length > 0) {
+                // 提取所有商品的信息，每个商品一行
+                const goodsInfoList = itemData
+                  .filter(goods => goods.goodsName)
+                  .map(goods => {
+                    const name = goods.goodsName || '';
+                    const itemNum = goods.num || 1; // 如果没有数量，默认1
+                    return `${name},数量:${itemNum}个`;
+                  });
+
+                // 如果有多个商品，用换行符分隔
+                if (goodsInfoList.length > 0) {
+                  goodsName = goodsInfoList.join('\n');
+                } else if (itemData[0].goodsName) {
+                  // 如果没有商品名称但有第一个商品对象，使用第一个
+                  const firstItem = itemData[0];
+                  goodsName = `${firstItem.goodsName || ''},数量:${firstItem.num || 1}个`;
+                }
+
+                // 提取第一个商品的图片
+                const firstItem = itemData[0];
+                if (firstItem.imgUrl) {
+                  goodsImage = firstItem.imgUrl;
+                } else if (firstItem.images && firstItem.images.split(',').length > 0) {
+                  goodsImage = firstItem.images.split(',')[0];
+                }
+              }
+              // 如果itemJson是对象格式，直接取goodsName和图片
+              else if (itemData.goodsName) {
+                goodsName = `${itemData.goodsName},数量:${itemData.num || 1}个`;
+
+                // 提取图片，优先使用imgUrl，如果没有则使用images的第一张
+                if (itemData.imgUrl) {
+                  goodsImage = itemData.imgUrl;
+                } else if (itemData.images && itemData.images.split(',').length > 0) {
+                  goodsImage = itemData.images.split(',')[0];
+                }
+              }
+            }
+          } catch (error) {
+            console.error('解析itemJson失败:', error);
+            goodsName = '';
+            goodsImage = '';
+            num = '';
+          }
+
+          return {
+            ...item,
+            goodsName: goodsName,
+            goodsImage: goodsImage,
+            num: num
+          };
+        });
+
+        this.integralOrderList = processedData;
+        this.total = response.total;
+        this.loading = false;
+      }).catch(error => {
+        console.error('查询订单列表失败:', error);
+        this.loading = false;
+        this.$message.error('查询订单列表失败');
+      });
+    },
+
+    /** 查询积分商品订单列表 */
+    //原代码 先留着
+    getList0() {
+      this.loading = true;
+
+      // 直接传递订单编号数组给后端
+      listIntegralOrder(this.queryParams).then(response => {
+        // 解析itemJson字段，提取goodsName和图片
+        const processedData = response.rows.map(item => {
+          let goodsName = '';
+          let goodsImage = '';
+          let num = '';
           try {
             if (item.itemJson) {
               const itemData = JSON.parse(item.itemJson);
@@ -1002,15 +1080,17 @@ export default {
             console.error('解析itemJson失败:', error);
             goodsName = '';
             goodsImage = '';
+            num ='';
           }
-          
+
           return {
             ...item,
             goodsName: goodsName,
-            goodsImage: goodsImage
+            goodsImage: goodsImage,
+            num: num
           };
         });
-        
+
         this.integralOrderList = processedData;
         this.total = response.total;
         this.loading = false;
@@ -1062,12 +1142,12 @@ export default {
       this.queryParams.qwUserId=null;
       this.queryParams.companyId=null;
       this.queryParams.companyUserId=null;
-      
+
       // 清除订单号标签
       this.queryParams.orderCodes = [];
       this.currentInput = '';
       this.inputVisible = false;
-      
+
       this.handleQuery();
 
     },
@@ -1169,7 +1249,7 @@ export default {
       this.getErpPhoneList(); // 加载手机号列表
       this.updateOrderSummary();
     },
-    
+
     // 加载ERP账户数据
     async loadErpAccountData() {
       try {
@@ -1179,7 +1259,7 @@ export default {
         console.error('加载ERP账户失败:', error);
       }
     },
-    
+
     // 更新订单统计
     updateOrderSummary() {
       // 如果没有选择任何数据，则使用查询出来的所有数据
@@ -1191,14 +1271,14 @@ export default {
         this.orderSummary.selectedCount = this.ids.length;
         this.orderSummary.queryCount = this.total;
       }
-      
+
       // 计算总金额（这里需要根据实际数据结构调整）
       this.calculateTotalAmount();
     },
     // 计算总金额
     calculateTotalAmount() {
       let totalAmount = 0;
-      
+
       if (this.ids.length === 0) {
         // 使用所有查询数据计算金额
         this.integralOrderList.forEach(order => {
@@ -1206,28 +1286,28 @@ export default {
         });
       } else {
         // 使用选中的数据计算金额
-        const selectedOrders = this.integralOrderList.filter(order => 
+        const selectedOrders = this.integralOrderList.filter(order =>
           this.ids.includes(order.orderId)
         );
         selectedOrders.forEach(order => {
           totalAmount += parseFloat(order.payMoney || 0);
         });
       }
-      
+
       this.orderSummary.totalAmount = totalAmount.toFixed(2);
     },
-    
+
     // 取消ERP账户对话框
     cancelErpAccountDialog() {
       this.erpAccountDialog.open = false;
       this.erpAccountForm.selectedAccount = null;
     },
-    
+
     // 确认创建ERP订单
     async confirmCreateErpOrder() {
       // 收集选中的orderId
       let selectedOrderIds = [];
-      
+
       if (this.ids.length === 0) {
         // 如果没有选择任何数据，使用查询出来的所有数据的orderId
         selectedOrderIds = this.integralOrderList.map(order => order.orderId);
@@ -1235,11 +1315,11 @@ export default {
         // 如果选择了数据，使用选中的orderId
         selectedOrderIds = this.ids;
       }
-      
+
       // 收集ERP账户和手机号
       const selectedErpAccount = this.erpAccountForm.selectedAccount;
       const selectedPhones = this.erpAccountForm.selectedPhones;
-      
+
       // 准备请求参数
       const params = {
         orderIds: selectedOrderIds,
@@ -1248,7 +1328,7 @@ export default {
       };
       try {
         this.erpAccountDialog.submitting = true;
-        
+
         // 根据弹窗标题判断是数据分拣还是创建ERP
         if (this.erpAccountDialog.title === "数据分拣") {
           // 调用数据分拣接口
@@ -1260,13 +1340,13 @@ export default {
           // console.log("参数：",params)
           this.$message.success('创建ERP成功');
         }
-        
+
         // 关闭弹窗
         this.cancelErpAccountDialog();
-        
+
         // 刷新列表
         this.getList();
-        
+
       } catch (error) {
         console.error('操作失败:', error);
         this.$message.error('操作失败');
@@ -1334,7 +1414,7 @@ export default {
         return;
       }
       // 检查是否重复
-      const duplicateIndex = this.phoneList.findIndex((item, idx) => 
+      const duplicateIndex = this.phoneList.findIndex((item, idx) =>
         idx !== index && item.phone === phone
       );
       if (duplicateIndex !== -1) {
@@ -1390,17 +1470,17 @@ export default {
         this.$message.error('请先保存正在编辑的手机号');
         return;
       }
-      
+
       // 检查是否有空的手机号
       const emptyPhone = this.phoneList.find(item => !item.phone.trim());
       if (emptyPhone) {
         this.$message.error('存在空的手机号，请删除或填写完整');
         return;
       }
-      
+
       // 构造手机号列表
       const phoneList = this.phoneList.map(item => item.phone);
-      
+
       // 调用保存接口
       saveErpPhone(phoneList).then(response => {
         if (response.code === 200) {
@@ -1425,13 +1505,13 @@ export default {
     // 处理键盘按下事件
     handleKeyDown(event) {
       const { key, target } = event
-      
+
       // 处理退格键删除标签
       if (key === 'Backspace' && !target.value && this.queryParams.orderCodes.length > 0) {
         event.preventDefault()
         this.removeOrderCode(this.queryParams.orderCodes.length - 1)
       }
-      
+
       // 处理分隔符
       if ([',', '，', ' ', 'Enter'].includes(key)) {
         event.preventDefault()
@@ -1442,7 +1522,7 @@ export default {
     // 处理键盘抬起事件（实时分割输入）
     handleKeyUp(event) {
       const value = event.target.value
-      
+
       // 检查是否包含分隔符
       if (/[,，\s]/.test(value)) {
         this.handleInputConfirm()
@@ -1452,35 +1532,35 @@ export default {
     // 确认输入
     handleInputConfirm() {
       const inputValue = this.currentInput.trim()
-      
+
       if (inputValue) {
         // 分割多个订单号
         const codes = inputValue.split(/[,，\s]+/).filter(code => code.trim())
-        
+
         codes.forEach(code => {
           this.addOrderCode(code.trim())
         })
       }
-      
+
       this.currentInput = ''
     },
 
     // 添加订单号
     addOrderCode(code) {
       if (!code) return
-      
+
       // 检查数量限制
       if (this.maxOrderCodes > 0 && this.queryParams.orderCodes.length >= this.maxOrderCodes) {
         this.$message.warning(`最多只能添加 ${this.maxOrderCodes} 个订单号`)
         return
       }
-      
+
       // 检查重复
       if (this.queryParams.orderCodes.includes(code)) {
         this.$message.warning(`订单号 "${code}" 已存在`)
         return
       }
-      
+
       // 添加到列表
       this.queryParams.orderCodes.push(code)
     },