DMJS-IT
/
merchant-web
12
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
KangKang0928 2024-08-19 17:15:18 +08:00
parent 072be0973a
commit da75cc1813
1 changed files with 608 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

512
src/views/modules/logistics-fare/logistics-template/popup/add-template.vue
View File

@ -1,7 +1,14 @@
<template> <template>
<div> <div>
<obj-modal class="obj-modal" ref="modal" labelWidth="100px" :modalCols="modalCols" :modalConfig="modalConfig" <obj-modal
:modalData="modalData" :modalHandles="modalHandles"> class="obj-modal"
ref="modal"
labelWidth="100px"
:modalCols="modalCols"
:modalConfig="modalConfig"
:modalData="modalData"
:modalHandles="modalHandles"
>
<template slot="dialog__before"> <template slot="dialog__before">
<!-- <el-tabs v-model="currentPanel"> <!-- <el-tabs v-model="currentPanel">
<el-tab-pane label="基础信息" name="基础信息"></el-tab-pane> <el-tab-pane label="基础信息" name="基础信息"></el-tab-pane>
@ -14,12 +21,40 @@
</template> </template>
<script> <script>
import { debounce, cloneDeep } from "lodash"; import { debounce, cloneDeep } from "lodash";
const BASE_DATA = {
calculateMethod: "按重量",
fareConfig: "全国包邮",
//为指定地区城市设置运费
shippingTemplatesRegionList: [
{
//默认运费，不限制城市
cityCodes: "0",
//首重
first: "",
//首重价格
firstPrice: "",
//续重
renewal: "",
//续重价格
renewalPrice: "",
},
],
//追加
shippingTemplatesRegionListAppend: [],
//指定包邮条件
shippingTemplatesConditionList: [
// {
// cityCodes: "",
// price: "",
// number: "",
// },
],
};
export default { export default {
data() { data() {
return { return {
currentPanel: "基础信息", currentPanel: "基础信息",
modalData: { modalData: {},
},
modalConfig: { modalConfig: {
title: "添加运费模板", title: "添加运费模板",
show: false, show: false,
@ -30,7 +65,7 @@ export default {
place: "", //场地 place: "", //场地
}; };
}, },
mounted() { }, mounted() {},
methods: { methods: {
toggle(e) { toggle(e) {
if (this.modalConfig.show == false) { if (this.modalConfig.show == false) {
@ -46,8 +81,7 @@ export default {
add: (item) => { add: (item) => {
console.log(item); console.log(item);
this.$nextTick(() => { this.$nextTick(() => {
this.modalData = { this.modalData = BASE_DATA;
};
}); });
this.isAdd = true; this.isAdd = true;
}, },
@ -57,7 +91,7 @@ export default {
}, },
}; };
}, },
init(row) { }, init(row) {},
}, },
computed: { computed: {
modalCols() { modalCols() {
@ -65,16 +99,19 @@ export default {
{ {
label: "模板名称", label: "模板名称",
prop: "templateName", prop: "templateName",
required: true,
type: "Input", type: "Input",
maxlength:"30", maxlength: "30",
placeholder: "请输入模板名称" placeholder: "请输入模板名称",
rules: {
required: true,
message: "请输入模板名称",
trigger: "blur,change",
},
}, },
{ {
label: "计价方式", label: "计价方式",
prop: "calculateMethod", prop: "calculateMethod",
type: "jsx", type: "jsx",
required: true,
rules: { rules: {
required: true, required: true,
message: "请选择计价方式", message: "请选择计价方式",
@ -107,7 +144,448 @@ export default {
</el-radio-group> </el-radio-group>
); );
}, },
},
{
label: "自定义运费配置",
type: "jsx-out",
show: this.modalData.fareConfig == "自定义运费",
render: () => {
const tableCols = [
{
title: "运送到",
width: "300px",
field: "cityCodes",
type: "jsx",
render: ({ row }) => {
const change = (e) => {
console.log(e);
};
return (
<el-cascader
style="width:100%;"
v-model={row.cityCodes}
onChange={change}
options={this.$api.mer_admin.getCityOptions()}
show-all-levels={false}
collapse-tags={true}
props={{
props: {
multiple: true,
checkStrictly: false,
emitPath: true,
label: "name",
value: "code",
},
}}
clearable
filterable
></el-cascader>
);
},
},
{
title: "首重（kg）",
field: "first",
type: "jsx",
render: ({ row }) => {
return (
<el-input-number
style="width:100%;"
min={0}
controls={false}
precision={2}
v-model={row.first}
></el-input-number>
);
},
},
{
title: "首费（元）",
field: "firstPrice",
type: "jsx",
render: ({ row }) => {
return (
<el-input-number
style="width:100%;"
min={0}
controls={false}
precision={2}
v-model={row.firstPrice}
></el-input-number>
);
},
},
{
title: "续重（kg）",
field: "renewal",
type: "jsx",
render: ({ row }) => {
return (
<el-input-number
style="width:100%;"
min={0}
controls={false}
precision={2}
v-model={row.renewal}
></el-input-number>
);
},
},
{
title: "续费（元）",
field: "renewalPrice",
type: "jsx",
render: ({ row }) => {
return (
<el-input-number
style="width:100%;"
min={0}
max={row.firstPrice}
controls={false}
precision={2}
v-model={row.renewalPrice}
></el-input-number>
);
},
},
{
title: "操作",
type: "jsx",
render: (e) => {
const remove = () => {
console.log(e);
this.modalData.shippingTemplatesRegionListAppend.splice(
e.rowIndex,
1
);
};
const add = () => {
console.log(e);
this.modalData.shippingTemplatesRegionListAppend.splice(
e.rowIndex + 1,
0,
{
//默认运费，不限制城市
cityCodes: "",
//首重
first: "",
//首重价格
firstPrice: "",
//续重
renewal: "",
//续重价格
renewalPrice: "",
} }
);
};
return (
<div>
<el-button type="primary" size="mini" onClick={add}>
向下添加
</el-button>
<el-button type="danger" size="mini" onClick={remove}>
删除
</el-button>
</div>
);
},
},
];
const addAreaFare = () => {
this.modalData.shippingTemplatesRegionListAppend.push({
//默认运费，不限制城市
cityCodes: "",
//首重
first: "",
//首重价格
firstPrice: "",
//续重
renewal: "",
//续重价格
renewalPrice: "",
});
};
return (
<div>
<div class="d-flex no-warp justify-start items-center">
<el-form-item
prop="shippingTemplatesRegionList[0].first"
rules={{
required: true,
message: "请填写默认运费",
trigger: "change",
}}
label="默认运费"
>
<el-input
v-model={
this.modalData.shippingTemplatesRegionList[0].first
}
></el-input>
</el-form-item>
<span style="transform:translateY(-12px);">
&nbsp;kg内&nbsp;
</span>
<el-form-item
label-width="0"
prop="shippingTemplatesRegionList[0].firstPrice"
rules={{
required: true,
message: "请填写默认运费",
trigger: "change",
}}
label=""
>
<el-input
v-model={
this.modalData.shippingTemplatesRegionList[0].firstPrice
}
></el-input>
</el-form-item>
<span style="transform:translateY(-12px);">
&nbsp;元，每增加&nbsp;
</span>
<el-form-item
label-width="0"
prop="shippingTemplatesRegionList[0].renewal"
rules={{
required: true,
message: "请填写默认运费",
trigger: "change",
}}
label=""
>
<el-input
v-model={
this.modalData.shippingTemplatesRegionList[0].renewal
}
></el-input>
</el-form-item>
<span style="transform:translateY(-12px);">
&nbsp;kg，增加运费&nbsp;
</span>
<el-form-item
label-width="0"
prop="shippingTemplatesRegionList[0].renewalPrice"
rules={{
required: true,
message: "请填写默认运费",
trigger: "change",
}}
label=""
>
<el-input
v-model={
this.modalData.shippingTemplatesRegionList[0]
.renewalPrice
}
></el-input>
</el-form-item>
<span style="transform:translateY(-12px);">
&nbsp;元&nbsp;
</span>
</div>
<div>
<obj-table-plus
style="height:50vh;"
enable-auto-query={false}
v-model={this.modalData.shippingTemplatesRegionListAppend}
tableCols={tableCols}
isPagination={false}
>
<template slot="empty">
<el-button
onClick={addAreaFare}
type="text"
icon="el-icon-plus"
>
为指定地区城市设置运费（除指定地区外，其余地区的运费按照“默认运费”）
</el-button>
</template>
</obj-table-plus>
</div>
</div>
);
},
},
//指定包邮条件
{
label: "",
prop: "",
type: "jsx-out",
show: this.modalData.fareConfig == "自定义运费",
render: () => {
const tableCols = [
{
title: "运送到",
width: "300px",
field: "cityCodes",
type: "jsx",
render: ({ row }) => {
const change = (e) => {
console.log(e);
};
return (
<el-cascader
style="width:100%;"
v-model={row.cityCodes}
onChange={change}
options={this.$api.mer_admin.getCityOptions()}
show-all-levels={false}
collapse-tags={true}
props={{
props: {
multiple: true,
checkStrictly: false,
emitPath: true,
label: "name",
value: "code",
},
}}
clearable
filterable
></el-cascader>
);
},
},
{
title: "包邮条件",
field: "conditions",
type: "jsx",
render: ({ row }) => {
const _conditionMapper = {
件数: (
<div>
<el-input-number
style="width:150px;"
min={0}
controls={false}
precision={0}
v-model={row.number}
></el-input-number>
<span>&nbsp;件包邮&nbsp;</span>
</div>
),
金额: (
<div>
<el-input-number
style="width:150px;"
min={0}
controls={false}
precision={2}
v-model={row.price}
></el-input-number>
<span>&nbsp;元包邮&nbsp;</span>
</div>
),
"件数+金额": (
<div>
<el-input-number
style="width:150px;"
min={0}
controls={false}
precision={0}
v-model={row.number}
></el-input-number>
<span>&nbsp;件，且&nbsp;</span>
<el-input-number
style="width:150px;"
min={0}
controls={false}
precision={2}
v-model={row.price}
></el-input-number>
<span>&nbsp;元以上包邮&nbsp;</span>
</div>
),
};
return (
<div class="flex justify-start items-center">
<el-select
style="width:80px;"
v-model={row.conditionType}
>
<el-option label="件数" value="件数"></el-option>
<el-option label="金额" value="金额"></el-option>
<el-option
label="件数+金额"
value="件数+金额"
></el-option>
</el-select>
<span>&nbsp;满&nbsp;</span>
{_conditionMapper[row.conditionType]}
</div>
);
},
},
{
title: "操作",
width: "200px",
type: "jsx",
render: (e) => {
const remove = () => {
console.log(e);
this.modalData.shippingTemplatesConditionList.splice(
e.rowIndex,
1
);
};
const add = () => {
console.log(e);
this.modalData.shippingTemplatesConditionList.splice(
e.rowIndex + 1,
0,
{
cityCodes: "",
price: "",
number: "",
conditionType: "件数",
}
);
};
return (
<div>
<el-button type="primary" size="mini" onClick={add}>
向下添加
</el-button>
<el-button type="danger" size="mini" onClick={remove}>
删除
</el-button>
</div>
);
},
},
];
const addAreaFare = () => {
this.modalData.shippingTemplatesConditionList.push({
cityCodes: "",
price: "",
number: "",
conditionType: "件数",
});
};
return (
<obj-table-plus
class="mt-5"
style="height:50vh;"
enable-auto-query={false}
v-model={this.modalData.shippingTemplatesConditionList}
tableCols={tableCols}
isPagination={false}
>
<template slot="empty">
<el-button
onClick={addAreaFare}
type="text"
icon="el-icon-plus"
>
添加其他地区/其他包邮条件
</el-button>
</template>
</obj-table-plus>
);
},
},
]; ];
}, },
modalHandles() { modalHandles() {
@ -124,14 +602,16 @@ export default {
type: "primary", type: "primary",
loading: this.isLoading, loading: this.isLoading,
submit: true, submit: true,
handle: debounce(() => { handle: debounce(() => {}, 300),
},
}, 300),
}
]; ];
}, },
}, },
asyncComputed: { asyncComputed: {
async getCityOptions() {
let res = await this.$api.mer_admin.getCity();
return res.data.data;
},
async getProductCategory() { async getProductCategory() {
let res = await this.$api.mer_admin.getProductCategory(); let res = await this.$api.mer_admin.getProductCategory();
return res.data.data; return res.data.data;