add 运费模板

This commit is contained in:
KangKang0928 2024-08-18 14:26:20 +08:00
parent e0efd482f6
commit 7248cce277
3 changed files with 496 additions and 1 deletions

View File

@ -33,7 +33,7 @@ export default {
"name": "商品",
"url": "local-course/resources",
"perms": "",
"type": 1,
"type": 0,
"elIcon": "el-icon-menu",
"orderNum": 0,
"open": null,
@ -51,6 +51,31 @@ export default {
list: []
}]
},
{
"menuId": getUUID(),
"parentId": 0,
"parentName": null,
"name": "运费管理",
"url": "",
"perms": "",
"type": 0,
"elIcon": "el-icon-money",
"orderNum": 0,
"open": null,
list: [{
"menuId": getUUID(),
"parentId": 0,
"parentName": null,
"name": "运费模板",
"url": "logistics-fare/logistics-template/index",
"perms": "",
"type": 1,
"elIcon": "el-icon-postcard",
"orderNum": 0,
"open": null,
list: []
}]
},
// {
// "menuId": getUUID(),
// "parentId": 0,

View File

@ -0,0 +1,314 @@
<template>
<div>
<obj-table-plus
style="height: calc(100vh - 132px)"
ref="oTable"
mode="flex"
:tableCols="tableCols"
v-model="dataList"
@query="queryList"
>
<div slot="tableTop" class="mb-2">
<el-form inline>
<el-form-item label="模板名称:">
<el-input placeholder="请输入模板名称"></el-input>
</el-form-item>
<el-button type="primary">搜索</el-button>
</el-form>
<el-button type="primary" @click="addFareTemplate"
>添加运费模板</el-button
>
</div>
</obj-table-plus>
<add-template ref="addTemplate"></add-template>
</div>
</template>
<script>
import addTemplate from "./popup/add-template.vue";
export default {
components: { addTemplate },
data() {
return {
dataList: [],
};
},
methods: {
queryList(pageNo, pageSize) {
setTimeout(() => {
this.$refs.oTable.complete([
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
{
templateName: "运费模板名称(全国包邮)",
lastEditTime: "2022-02-15 12:02",
tableData: [
{
a: "中国",
b: 1,
c: 0.0,
d: 1,
e: 0.0,
},
],
},
]);
}, 1000);
},
addFareTemplate() {
this.$refs.addTemplate.toggle().add();
},
},
computed: {
tableCols() {
return [
{
type: "jsx",
render: (row) => {
console.log(row);
return (
<div class="mb-5">
<div class="flex justify-between items-center bg-gray-100 px-4">
<div>{row.templateName}</div>
<div class="flex justify-between items-center">
<div class="mr-5">最后编辑时间{row.lastEditTime}</div>
<div>
<el-button type="text">复制模板</el-button>
<el-button type="text">修改</el-button>
<el-button type="text">删除</el-button>
</div>
</div>
</div>
<vxe-table border align="center" data={row.tableData}>
<vxe-column
width="180px"
field="a"
title="运送到"
></vxe-column>
<vxe-column
width="200px"
field="b"
title="首件(个)"
></vxe-column>
<vxe-column
width="200px"
field="c"
title="首费(元)"
></vxe-column>
<vxe-column
width="200px"
field="d"
title="续件(个)"
></vxe-column>
<vxe-column
width="200px"
field="e"
title="运费(元)"
></vxe-column>
</vxe-table>
</div>
);
},
},
];
},
},
};
</script>
<style lang="scss" scoped></style>

View File

@ -0,0 +1,156 @@
<template>
<div>
<obj-modal class="obj-modal" ref="modal" labelWidth="100px" :modalCols="modalCols" :modalConfig="modalConfig"
:modalData="modalData" :modalHandles="modalHandles">
<template slot="dialog__before">
<!-- <el-tabs v-model="currentPanel">
<el-tab-pane label="基础信息" name="基础信息"></el-tab-pane>
<el-tab-pane label="销售信息" name="销售信息"></el-tab-pane>
<el-tab-pane label="其他信息" name="其他信息"></el-tab-pane>
</el-tabs> -->
</template>
</obj-modal>
</div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
data() {
return {
currentPanel: "基础信息",
modalData: {
},
modalConfig: {
title: "添加运费模板",
show: false,
width: "1300px",
fullscreen: true,
},
fileList: [], //
place: "", //
};
},
mounted() { },
methods: {
toggle(e) {
if (this.modalConfig.show == false) {
this.modalConfig.show = true;
} else {
this.modalConfig.show = false;
}
if (e) {
console.log(e);
this.init(cloneDeep(e.row));
}
return {
add: (item) => {
console.log(item);
this.$nextTick(() => {
this.modalData = {
};
});
this.isAdd = true;
},
update: (row) => {
this.modalData = row;
this.isAdd = false;
},
};
},
init(row) { },
},
computed: {
modalCols() {
return [
{
label: "模板名称",
prop: "templateName",
required: true,
type: "Input",
maxlength:"30",
placeholder: "请输入模板名称"
},
{
label: "计价方式",
prop: "calculateMethod",
type: "jsx",
required: true,
rules: {
required: true,
message: "请选择计价方式",
trigger: "blur",
},
render: () => {
return (
<el-radio-group v-model={this.modalData.calculateMethod}>
<el-radio label="按重量">按重量</el-radio>
<el-radio label="按件数">按件数</el-radio>
</el-radio-group>
);
},
},
{
label: "运费配置",
prop: "fareConfig",
type: "jsx",
required: true,
rules: {
required: true,
message: "请选择计价方式",
trigger: "blur",
},
render: () => {
return (
<el-radio-group v-model={this.modalData.fareConfig}>
<el-radio label="全国包邮">全国包邮</el-radio>
<el-radio label="自定义运费">自定义运费</el-radio>
</el-radio-group>
);
},
}
];
},
modalHandles() {
return [
{
label: "关闭",
type: "",
handle: debounce(() => {
this.toggle();
}, 300),
},
{
label: "确认",
type: "primary",
loading: this.isLoading,
submit: true,
handle: debounce(() => {
}, 300),
}
];
},
},
asyncComputed: {
async getProductCategory() {
let res = await this.$api.mer_admin.getProductCategory();
return res.data.data;
},
async getSaleUnit() {
let res = await this.$api.mer_admin.getSaleUnit({
shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId,
});
console.log(res);
return res.data.data;
},
},
};
</script>
<style lang="scss" scoped>
.obj-modal ::v-deep {
.el-dialog__body {
padding: 0 30px;
}
}
</style>