314 lines
8.1 KiB
Vue
314 lines
8.1 KiB
Vue
<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> |