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({ return $http.request({
method: "get", method: "get",
url: "/merchant-api/shippingTemplates/detail", url: "/merchant-api/shippingTemplates/detail",
hidemsg: true,
params: { id }, params: { id },
}); });
}, },

View File

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

View File

@ -53,37 +53,38 @@
</template> </template>
<script> <script>
import { mapState } from "vuex"; import { mapState } from 'vuex'
import addTemplate from "./popup/add-template.vue"; import { Message } from "element-ui";
import addTemplate from './popup/add-template.vue'
export default { export default {
components: { addTemplate }, components: { addTemplate },
data() { data() {
return { return {
dataList: [], dataList: [],
searchForm: { searchForm: {
name: "", name: '',
linkId: "", linkId: ''
}, }
}; }
}, },
created() { created() {
if ( if (
JSON.parse(sessionStorage.getItem("userInfo")).role === "ROLE_MERCHANT" JSON.parse(sessionStorage.getItem('userInfo')).role === 'ROLE_MERCHANT'
) { ) {
this.searchForm = { this.searchForm = {
name: "", name: '',
linkId: this.shopId, linkId: this.shopId
}; }
} else { } else {
this.searchForm = { this.searchForm = {
name: "", name: '',
linkId: this.marketId ? this.marketId : this.shopId, linkId: this.marketId ? this.marketId : this.shopId
}; }
} }
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.oTable.reload(); this.$refs.oTable.reload()
}); })
}, },
methods: { methods: {
queryList(pageNo, pageSize) { queryList(pageNo, pageSize) {
@ -91,165 +92,206 @@ export default {
.getShippingTemplatePage({ .getShippingTemplatePage({
pageNumber: pageNo, pageNumber: pageNo,
pageSize: pageSize, pageSize: pageSize,
...this.searchForm, ...this.searchForm
}) })
.then((res) => { .then(res => {
console.log(res); console.log(res)
this.$refs.oTable.complete( this.$refs.oTable.complete(
res.data.data.data, res.data.data.data,
Number(res.data.data.total) Number(res.data.data.total)
); )
})
.catch(err => {
this.$refs.oTable.complete(false)
}) })
.catch((err) => {
this.$refs.oTable.complete(false);
});
}, },
Reset() { Reset() {
if ( if (
JSON.parse(sessionStorage.getItem("userInfo")).role === "ROLE_MERCHANT" JSON.parse(sessionStorage.getItem('userInfo')).role === 'ROLE_MERCHANT'
) { ) {
this.searchForm = { this.searchForm = {
name: "", name: '',
linkId: this.shopId, linkId: this.shopId
}; }
} else { } else {
this.searchForm = { this.searchForm = {
name: "", name: '',
linkId: this.marketId ? this.marketId : this.shopId, linkId: this.marketId ? this.marketId : this.shopId
}; }
} }
this.$refs.oTable.reload(); this.$refs.oTable.reload()
}, },
addFareTemplate() { addFareTemplate() {
this.$refs.addTemplate.toggle().add(this.searchForm.linkId); this.$refs.addTemplate.toggle().add(this.searchForm.linkId)
}, }
}, },
computed: { computed: {
tableCols() { tableCols() {
return [ return [
{ {
type: "jsx", type: 'jsx',
render: (row) => { render: row => {
console.log(row); console.log(row)
this.$api.mer_admin.getShippingTemplateInfo(row.id).then((res) => { this.$api.mer_admin.getShippingTemplateInfo(row.id).then(res => {
console.log(res); console.log(res)
console.log("row.tableData", row.tableData); console.log('row.tableData', row.tableData)
if (!row.tableData) { if (!row.tableData) {
if (res.data.data.shippingTemplatesRegionResultList) { if (res.data.data.shippingTemplatesRegionResultList) {
this.$set( this.$set(
row, row,
"tableData", 'tableData',
res.data.data.shippingTemplatesRegionResultList.map( res.data.data.shippingTemplatesRegionResultList.map(
(item) => { item => {
item.cityCodes = item.cityCodes?.split(","); item.cityCodes = item.cityCodes?.split(',')
console.log("item.cityCodes", item.cityCodes); console.log('item.cityCodes', item.cityCodes)
return item; return item
} }
) )
); )
} else { } else {
// //
this.$set(row, "tableData", [ this.$set(row, 'tableData', [
{ {
cityCodes: "0", cityCodes: '0',
first: "1", first: '1',
firstPrice: "0.00", firstPrice: '0.00',
renewal: "1", renewal: '1',
renewalPrice: "0.00", 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) => { const findLabelsByCode = (tree, codes) => {
// //
let paths = []; let paths = []
if (codes == "0") { if (codes == '0') {
return ["中国"]; return ['中国']
} }
// //
function searchTree(node, currentPath) { function searchTree(node, currentPath) {
// //
currentPath.push(node.name); currentPath.push(node.name)
// code codes // code codes
if (codes.includes(node.code)) { if (codes.includes(node.code)) {
paths.push([...currentPath]); // paths.push([...currentPath]) //
} }
// //
if (node.children) { if (node.children) {
for (let child of node.children) { for (let child of node.children) {
searchTree(child, currentPath); searchTree(child, currentPath)
} }
} }
// //
currentPath.pop(); currentPath.pop()
} }
// searchTree // searchTree
for (let node of tree) { 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 = { const appointMapper = {
0: "(全国包邮)", 0: '(全国包邮)',
1: "(部分包邮)", 1: '(部分包邮)',
2: "(自定义运费)", 2: '(自定义运费)'
}; }
const edit = () => { const edit = () => {
this.$api.mer_admin this.$api.mer_admin.getShippingTemplateInfo(row.id).then(res => {
.getShippingTemplateInfo(row.id) console.log(res)
.then((res) => { this.$refs.addTemplate.toggle().update(res.data.data)
console.log(res); })
this.$refs.addTemplate.toggle().update(res.data.data); }
});
};
const copy = () => { const copy = () => {
this.$api.mer_admin this.$api.mer_admin.getShippingTemplateInfo(row.id).then(res => {
.getShippingTemplateInfo(row.id) console.log(res)
.then((res) => { this.$refs.addTemplate.toggle().copy(res.data.data)
console.log(res); })
this.$refs.addTemplate.toggle().copy(res.data.data); }
});
};
const remove = () => { const remove = () => {
this.$api.mer_admin.removeShippingTemplate(row.id).then((res) => { this.$api.mer_admin.removeShippingTemplate(row.id).then(res => {
this.$refs.oTable.refresh(); this.$refs.oTable.refresh()
}); })
}; }
const groupMapper = { const groupMapper = {
1: { 1: {
first: "首件(个)", first: '首件(个)',
renewal: "续件(个)", renewal: '续件(个)'
}, },
2: { 2: {
first: "首重kg", first: '首重kg',
renewal: "续重kg", renewal: '续重kg'
}, }
}; }
// //
const openPreview = (str) => { const openPreview = str => {
this.$confirm( this.$confirm(
<div style="max-height:50vh;overflow-y:auto;line-height:1.5rem;"> <div style="max-height:50vh;overflow-y:auto;line-height:1.5rem;">
{str} {str}
</div>, </div>,
"详情", '详情',
{ {
showCancelButton: false, showCancelButton: false,
confirmButtonText: "好的", confirmButtonText: '好的'
} }
); )
}; }
return ( return (
<div class="mb-5"> <div class="mb-5">
<div class="flex justify-between items-center bg-gray-100 px-4"> <div class="flex justify-between items-center bg-gray-100 px-4">
@ -290,8 +332,8 @@ export default {
field="cityCodes" field="cityCodes"
title="运送到" title="运送到"
scopedSlots={{ scopedSlots={{
default: (scope) => { default: scope => {
console.log("scope", scope); console.log('scope', scope)
return ( return (
<span <span
class="cursor-pointer" class="cursor-pointer"
@ -301,7 +343,7 @@ export default {
this.$api.mer_admin.getCityOptions(), this.$api.mer_admin.getCityOptions(),
scope.row.cityCodes scope.row.cityCodes
) )
); )
}} }}
> >
{findLabelsByCode( {findLabelsByCode(
@ -309,8 +351,8 @@ export default {
scope.row.cityCodes scope.row.cityCodes
)} )}
</span> </span>
); )
}, }
}} }}
></vxe-column> ></vxe-column>
<vxe-column <vxe-column
@ -334,21 +376,65 @@ export default {
title="运费(元)" title="运费(元)"
></vxe-column> ></vxe-column>
</vxe-table> </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> </div>
); )
}, }
}, }
]; ]
}, },
...mapState("userData", [ ...mapState('userData', [
"isMerchant", 'isMerchant',
"marketList", 'marketList',
"storeList", 'storeList',
"marketId", 'marketId',
"shopId", 'shopId'
]), ])
}, }
}; }
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>