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

This commit is contained in:
lzhizhao 2025-04-08 17:19:05 +08:00
parent 53beb5271c
commit 6c3008ce2f
3 changed files with 265 additions and 170 deletions

View File

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

View File

@ -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);
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);
type: 'error'
})
return Promise.reject(response)
} else {
//请求成功的情况
//如果是开发模式下,都要弹出
if (process.env.NODE_ENV !== "production") {
if (process.env.NODE_ENV !== 'production') {
// Message.closeAll();
if (!response.config.hidemsg) {
Message({
message: response.data.msg || response.data.message,
type: "success"
});
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();
if (!response.config.hidemsg) {
Message({
message: response.data.msg || response.data.message,
type: "success"
});
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

View File

@ -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>