fix: 运费模板增加显示包邮条件表格

src/api/modules/mer_admin.js

@@ -135,6 +135,7 @@ export const mer_admin = {
     return $http.request({
       method: "get",
       url: "/merchant-api/shippingTemplates/detail",
+      hidemsg: true,
       params: { id },
     });
   },

src/utils/httpRequest.js

@@ -6,34 +6,34 @@
  * @Description:
  * @FilePath: \background-front-end\src\utils\httpRequest.js
  */
-import Vue from "vue";
-import axios from "axios";
-import router from "@/router";
-import qs from "qs";
-import merge from "lodash/merge";
-import { Message } from "element-ui";
-import { clearLoginInfo } from "@/utils";
-import commonUtil from "./common";
-import des from "./des.js";
+import Vue from 'vue'
+import axios from 'axios'
+import router from '@/router'
+import qs from 'qs'
+import merge from 'lodash/merge'
+import { Message } from 'element-ui'
+import { clearLoginInfo } from '@/utils'
+import commonUtil from './common'
+import des from './des.js'
 
 const http = axios.create({
   baseURL:
-    process.env.NODE_ENV !== "production" && process.env.OPEN_PROXY
-      ? "/proxyApi/"
+    process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY
+      ? '/proxyApi/'
       : window.SITE_CONFIG.baseUrl,
   timeout: 1000 * 30,
   withCredentials: true,
   headers: {
-    "Content-Type": "application/json; charset=utf-8"
+    'Content-Type': 'application/json; charset=utf-8'
   }
-});
+})
 
 /**
  * 请求拦截
  */
 http.interceptors.request.use(
   config => {
-    config.headers["token"] =`Bearer ${Vue.cookie.get("token")}`; // 请求头带上token
+    config.headers['token'] = `Bearer ${Vue.cookie.get('token')}` // 请求头带上token
     // 针对post请求加密
     // if (config.method.toLowerCase() === "post" && process.env.NODE_ENV === "production" ) {
     //   //如果已经转成字符串了，就不用再转了
@@ -47,16 +47,16 @@ http.interceptors.request.use(
     //     );
     //   }
     // }
-    if (process.env.NODE_ENV !== "production") {
-      console.log(`【请求】${config.url}`, config);
+    if (process.env.NODE_ENV !== 'production') {
+      console.log(`【请求】${config.url}`, config)
     }
 
-    return config;
+    return config
   },
   error => {
-    return Promise.reject(error);
+    return Promise.reject(error)
   }
-);
+)
 
 // /**
 //  * 响应拦截
@@ -147,48 +147,56 @@ http.interceptors.request.use(
 http.interceptors.response.use(
   response => {
     //开发环境下才可以打印日志
-    if (process.env.NODE_ENV !== "production") {
-      console.log(`【响应】${response.config.url}`, response);
+    if (process.env.NODE_ENV !== 'production') {
+      console.log(`【响应】${response.config.url}`, response)
     }
     if (response.data && response.data.code == 401) {
       // 401, 权限未认证
-      clearLoginInfo();
-      router.push({ name: "login" });
-      return Promise.resolve(response);
-    } else if (response.data && response.data.code !=200 ) {
+      clearLoginInfo()
+      router.push({ name: 'login' })
+      return Promise.resolve(response)
+    } else if (response.data && response.data.code != 200) {
       // Message.closeAll();
       Message({
-        message: response.data.msg||response.data.message,
-        type: "error"
-      });
-      return Promise.reject(response);
+        message: response.data.msg || response.data.message,
+        type: 'error'
+      })
+      return Promise.reject(response)
     } else {
       //请求成功的情况
       //如果是开发模式下，都要弹出
-      if (process.env.NODE_ENV !== "production") {
+      if (process.env.NODE_ENV !== 'production') {
         // Message.closeAll();
-        Message({
-          message: response.data.msg||response.data.message,
-          type: "success"
-        });
+        if (!response.config.hidemsg) {
+          Message({
+            message: response.data.msg || response.data.message,
+            type: 'success'
+          })
+        }
       }
       // 生产环境下限制性弹出
       else {
-        if (response.data.msg != "success" && response.data.msg != "查询成功" && Object.prototype.toString.call(response.data) === '[object Object]') {
+        if (
+          response.data.msg != 'success' &&
+          response.data.msg != '查询成功' &&
+          Object.prototype.toString.call(response.data) === '[object Object]'
+        ) {
           // Message.closeAll();
-          Message({
-            message: response.data.msg||response.data.message,
-            type: "success"
-          });
+          if (!response.config.hidemsg) {
+            Message({
+              message: response.data.msg || response.data.message,
+              type: 'success'
+            })
+          }
         }
       }
-      return Promise.resolve(response);
+      return Promise.resolve(response)
     }
   },
   error => {
-    return Promise.reject(error);
+    return Promise.reject(error)
   }
-);
+)
 
 /**
  * 请求地址处理
@@ -197,11 +205,11 @@ http.interceptors.response.use(
 http.adornUrl = actionName => {
   // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
   return (
-    (process.env.NODE_ENV !== "production" && process.env.OPEN_PROXY
-      ? "/proxyApi/"
+    (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY
+      ? '/proxyApi/'
       : window.SITE_CONFIG.baseUrl) + actionName
-  );
-};
+  )
+}
 
 /**
  * get请求参数处理
@@ -211,9 +219,9 @@ http.adornUrl = actionName => {
 http.adornParams = (params = {}, openDefultParams = true) => {
   var defaults = {
     t: new Date().getTime()
-  };
-  return openDefultParams ? merge(defaults, params) : params;
-};
+  }
+  return openDefultParams ? merge(defaults, params) : params
+}
 
 /**
  * post请求数据处理
@@ -223,12 +231,12 @@ http.adornParams = (params = {}, openDefultParams = true) => {
  *  json: 'application/json; charset=utf-8'
  *  form: 'application/x-www-form-urlencoded; charset=utf-8'
  */
-http.adornData = (data = {}, openDefultdata = true, contentType = "json") => {
+http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
   var defaults = {
     t: new Date().getTime()
-  };
-  data = openDefultdata ? merge(defaults, data) : data;
-  return contentType === "json" ? JSON.stringify(data) : qs.stringify(data);
-};
+  }
+  data = openDefultdata ? merge(defaults, data) : data
+  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
+}
 
-export default http;
+export default http

src/views/modules/logistics-fare/logistics-template/index.vue

@@ -53,37 +53,38 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
-import addTemplate from "./popup/add-template.vue";
+import { mapState } from 'vuex'
+import { Message } from "element-ui";
+import addTemplate from './popup/add-template.vue'
 export default {
   components: { addTemplate },
   data() {
     return {
       dataList: [],
       searchForm: {
-        name: "",
-        linkId: "",
-      },
-    };
+        name: '',
+        linkId: ''
+      }
+    }
   },
   created() {
     if (
-      JSON.parse(sessionStorage.getItem("userInfo")).role === "ROLE_MERCHANT"
+      JSON.parse(sessionStorage.getItem('userInfo')).role === 'ROLE_MERCHANT'
     ) {
       this.searchForm = {
-        name: "",
-        linkId: this.shopId,
-      };
+        name: '',
+        linkId: this.shopId
+      }
     } else {
       this.searchForm = {
-        name: "",
-        linkId: this.marketId ? this.marketId : this.shopId,
-      };
+        name: '',
+        linkId: this.marketId ? this.marketId : this.shopId
+      }
     }
 
     this.$nextTick(() => {
-      this.$refs.oTable.reload();
-    });
+      this.$refs.oTable.reload()
+    })
   },
   methods: {
     queryList(pageNo, pageSize) {
@@ -91,165 +92,206 @@ export default {
         .getShippingTemplatePage({
           pageNumber: pageNo,
           pageSize: pageSize,
-          ...this.searchForm,
+          ...this.searchForm
         })
-        .then((res) => {
-          console.log(res);
+        .then(res => {
+          console.log(res)
           this.$refs.oTable.complete(
             res.data.data.data,
             Number(res.data.data.total)
-          );
+          )
+        })
+        .catch(err => {
+          this.$refs.oTable.complete(false)
         })
-        .catch((err) => {
-          this.$refs.oTable.complete(false);
-        });
     },
     Reset() {
       if (
-        JSON.parse(sessionStorage.getItem("userInfo")).role === "ROLE_MERCHANT"
+        JSON.parse(sessionStorage.getItem('userInfo')).role === 'ROLE_MERCHANT'
       ) {
         this.searchForm = {
-          name: "",
-          linkId: this.shopId,
-        };
+          name: '',
+          linkId: this.shopId
+        }
       } else {
         this.searchForm = {
-          name: "",
-          linkId: this.marketId ? this.marketId : this.shopId,
-        };
+          name: '',
+          linkId: this.marketId ? this.marketId : this.shopId
+        }
       }
-      this.$refs.oTable.reload();
+      this.$refs.oTable.reload()
     },
     addFareTemplate() {
-      this.$refs.addTemplate.toggle().add(this.searchForm.linkId);
-    },
+      this.$refs.addTemplate.toggle().add(this.searchForm.linkId)
+    }
   },
   computed: {
     tableCols() {
       return [
         {
-          type: "jsx",
-          render: (row) => {
-            console.log(row);
-            this.$api.mer_admin.getShippingTemplateInfo(row.id).then((res) => {
-              console.log(res);
-              console.log("row.tableData", row.tableData);
+          type: 'jsx',
+          render: row => {
+            console.log(row)
+            this.$api.mer_admin.getShippingTemplateInfo(row.id).then(res => {
+              console.log(res)
+              console.log('row.tableData', row.tableData)
               if (!row.tableData) {
                 if (res.data.data.shippingTemplatesRegionResultList) {
                   this.$set(
                     row,
-                    "tableData",
+                    'tableData',
                     res.data.data.shippingTemplatesRegionResultList.map(
-                      (item) => {
-                        item.cityCodes = item.cityCodes?.split(",");
-                        console.log("item.cityCodes", item.cityCodes);
+                      item => {
+                        item.cityCodes = item.cityCodes?.split(',')
+                        console.log('item.cityCodes', item.cityCodes)
 
-                        return item;
+                        return item
                       }
                     )
-                  );
+                  )
                 } else {
                   //包邮，假数据写死
-                  this.$set(row, "tableData", [
+                  this.$set(row, 'tableData', [
                     {
-                      cityCodes: "0",
-                      first: "1",
-                      firstPrice: "0.00",
-                      renewal: "1",
-                      renewalPrice: "0.00",
-                    },
-                  ]);
+                      cityCodes: '0',
+                      first: '1',
+                      firstPrice: '0.00',
+                      renewal: '1',
+                      renewalPrice: '0.00'
+                    }
+                  ])
+                }
+                if (res.data.data.shippingTemplatesConditionResultList) {
+                  this.$set(
+                    row,
+                    'bytableData',
+                    res.data.data.shippingTemplatesConditionResultList.map(
+                      item => {
+                        item.cityCodes = item.cityCodes?.split(',')
+                        console.log('item.cityCodes', item.cityCodes)
+                        if (
+                          typeof item.price == "number" &&
+                          typeof item.number == "number"
+                        ) {
+                          item.conditionType = "件数+金额";
+                        } else if (
+                          typeof item.price == "number" &&
+                          typeof item.number != "number"
+                        ) {
+                          item.conditionType = "金额";
+                        } else if (
+                          typeof item.price != "number" &&
+                          typeof item.number == "number"
+                        ) {
+                          item.conditionType = "件数";
+                        }
+                        return item
+                      }
+                    )
+                  )
+                } else {
+                  //包邮，假数据写死
+                  this.$set(row, 'bytableData', [
+                    {
+                      cityCodes: '0',
+                      createTime: null,
+                      groups: 1,
+                      id: '',
+                      number: 1.0,
+                      price: null,
+                      tempId: '',
+                      title: '',
+                      updateTime: null,
+                      value: null
+                    }
+                  ])
                 }
               }
-            });
+            })
             const findLabelsByCode = (tree, codes) => {
               // 记录找到的路径
-              let paths = [];
+              let paths = []
 
-              if (codes == "0") {
-                return ["中国"];
+              if (codes == '0') {
+                return ['中国']
               }
 
               // 在树中搜索节点的递归函数
               function searchTree(node, currentPath) {
                 // 将当前节点添加到路径中
-                currentPath.push(node.name);
+                currentPath.push(node.name)
 
                 // 如果当前节点的 code 在 codes 数组中，记录路径
                 if (codes.includes(node.code)) {
-                  paths.push([...currentPath]); // 深拷贝当前路径
+                  paths.push([...currentPath]) // 深拷贝当前路径
                 }
 
                 // 如果有子节点，继续递归查找
                 if (node.children) {
                   for (let child of node.children) {
-                    searchTree(child, currentPath);
+                    searchTree(child, currentPath)
                   }
                 }
 
                 // 回溯，移除当前节点
-                currentPath.pop();
+                currentPath.pop()
               }
 
               // 对树的每个顶层节点调用 searchTree
               for (let node of tree) {
-                searchTree(node, []);
+                searchTree(node, [])
               }
 
               // 将所有找到的路径合并成字符串返回
-              return paths.map((path) => <p>{path.join("/")}</p>);
-            };
+              return paths.map(path => <p>{path.join('/')}</p>)
+            }
 
             const appointMapper = {
-              0: "（全国包邮）",
-              1: "（部分包邮）",
-              2: "（自定义运费）",
-            };
+              0: '（全国包邮）',
+              1: '（部分包邮）',
+              2: '（自定义运费）'
+            }
 
             const edit = () => {
-              this.$api.mer_admin
-                .getShippingTemplateInfo(row.id)
-                .then((res) => {
-                  console.log(res);
-                  this.$refs.addTemplate.toggle().update(res.data.data);
-                });
-            };
+              this.$api.mer_admin.getShippingTemplateInfo(row.id).then(res => {
+                console.log(res)
+                this.$refs.addTemplate.toggle().update(res.data.data)
+              })
+            }
             const copy = () => {
-              this.$api.mer_admin
-                .getShippingTemplateInfo(row.id)
-                .then((res) => {
-                  console.log(res);
-                  this.$refs.addTemplate.toggle().copy(res.data.data);
-                });
-            };
+              this.$api.mer_admin.getShippingTemplateInfo(row.id).then(res => {
+                console.log(res)
+                this.$refs.addTemplate.toggle().copy(res.data.data)
+              })
+            }
             const remove = () => {
-              this.$api.mer_admin.removeShippingTemplate(row.id).then((res) => {
-                this.$refs.oTable.refresh();
-              });
-            };
+              this.$api.mer_admin.removeShippingTemplate(row.id).then(res => {
+                this.$refs.oTable.refresh()
+              })
+            }
             const groupMapper = {
               1: {
-                first: "首件（个）",
-                renewal: "续件（个）",
+                first: '首件（个）',
+                renewal: '续件（个）'
               },
               2: {
-                first: "首重（kg）",
-                renewal: "续重（kg）",
-              },
-            };
+                first: '首重（kg）',
+                renewal: '续重（kg）'
+              }
+            }
             //打开弹窗预览
-            const openPreview = (str) => {
+            const openPreview = str => {
               this.$confirm(
                 <div style="max-height:50vh;overflow-y:auto;line-height:1.5rem;">
                   {str}
                 </div>,
-                "详情",
+                '详情',
                 {
                   showCancelButton: false,
-                  confirmButtonText: "好的",
+                  confirmButtonText: '好的'
                 }
-              );
-            };
+              )
+            }
             return (
               <div class="mb-5">
                 <div class="flex justify-between items-center bg-gray-100 px-4">
@@ -290,8 +332,8 @@ export default {
                     field="cityCodes"
                     title="运送到"
                     scopedSlots={{
-                      default: (scope) => {
-                        console.log("scope", scope);
+                      default: scope => {
+                        console.log('scope', scope)
                         return (
                           <span
                             class="cursor-pointer"
@@ -301,7 +343,7 @@ export default {
                                   this.$api.mer_admin.getCityOptions(),
                                   scope.row.cityCodes
                                 )
-                              );
+                              )
                             }}
                           >
                             {findLabelsByCode(
@@ -309,8 +351,8 @@ export default {
                               scope.row.cityCodes
                             )}
                           </span>
-                        );
-                      },
+                        )
+                      }
                     }}
                   ></vxe-column>
                   <vxe-column
@@ -334,21 +376,65 @@ export default {
                     title="运费（元）"
                   ></vxe-column>
                 </vxe-table>
+                <vxe-table
+                  max-height="300"
+                  border
+                  align="center"
+                  show-overflow
+                  data={row.bytableData}
+                >
+                  <vxe-column
+                    width="180px"
+                    field="cityCodes"
+                    title="运送到"
+                    scopedSlots={{
+                      default: scope => {
+                        console.log('scope', scope)
+                        return (
+                          <span
+                            class="cursor-pointer"
+                            onClick={() => {
+                              openPreview(
+                                findLabelsByCode(
+                                  this.$api.mer_admin.getCityOptions(),
+                                  scope.row.cityCodes
+                                )
+                              )
+                            }}
+                          >
+                            {findLabelsByCode(
+                              this.$api.mer_admin.getCityOptions(),
+                              scope.row.cityCodes
+                            )}
+                          </span>
+                        )
+                      }
+                    }}
+                  ></vxe-column>
+                  <vxe-column
+                    field="conditionType"
+                    title={'条件'}
+                  ></vxe-column>
+                  <vxe-column
+                    field="number"
+                    title={'件数'}
+                  ></vxe-column>
+                </vxe-table>
               </div>
-            );
-          },
-        },
-      ];
+            )
+          }
+        }
+      ]
     },
-    ...mapState("userData", [
-      "isMerchant",
-      "marketList",
-      "storeList",
-      "marketId",
-      "shopId",
-    ]),
-  },
-};
+    ...mapState('userData', [
+      'isMerchant',
+      'marketList',
+      'storeList',
+      'marketId',
+      'shopId'
+    ])
+  }
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>