170 lines
4.9 KiB
Vue
170 lines
4.9 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="请输入模板名称"
|
|
v-model="searchForm.name"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-button type="primary" @click="$refs.oTable.reload()"
|
|
>搜索</el-button
|
|
>
|
|
</el-form>
|
|
<el-button type="primary" @click="addFareTemplate"
|
|
>添加运费模板</el-button
|
|
>
|
|
</div>
|
|
</obj-table-plus>
|
|
<add-template
|
|
ref="addTemplate"
|
|
@refresh="$refs.oTable.refresh()"
|
|
></add-template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import addTemplate from "./popup/add-template.vue";
|
|
export default {
|
|
components: { addTemplate },
|
|
data() {
|
|
return {
|
|
dataList: [],
|
|
searchForm: {
|
|
name: "",
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
queryList(pageNo, pageSize) {
|
|
this.$api.mer_admin
|
|
.getShippingTemplatePage({
|
|
pageNumber: pageNo,
|
|
pageSize: pageSize,
|
|
...this.searchForm,
|
|
})
|
|
.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);
|
|
});
|
|
},
|
|
addFareTemplate() {
|
|
this.$refs.addTemplate.toggle().add();
|
|
},
|
|
},
|
|
computed: {
|
|
tableCols() {
|
|
return [
|
|
{
|
|
type: "jsx",
|
|
render: (row) => {
|
|
console.log(row);
|
|
this.$api.mer_admin.getShippingTemplateInfo(row.id).then((res) => {
|
|
console.log(res);
|
|
// this.$set(row,tableData,);
|
|
});
|
|
const appointMapper = {
|
|
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);
|
|
});
|
|
};
|
|
const copy = () => {
|
|
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();
|
|
})
|
|
};
|
|
return (
|
|
<div class="mb-5">
|
|
<div class="flex justify-between items-center bg-gray-100 px-4">
|
|
<div>
|
|
{row.name}
|
|
{appointMapper[row.appoint]}
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="mr-5">最后编辑时间：{row.updateTime}</div>
|
|
<div>
|
|
<el-button type="text" onClick={copy}>
|
|
复制模板
|
|
</el-button>
|
|
<el-button type="text" onClick={edit}>
|
|
修改
|
|
</el-button>
|
|
<el-popconfirm class="ml-2" title="确认删除模板？" onConfirm={remove}>
|
|
<el-button type="text" slot="reference">
|
|
删除
|
|
</el-button>
|
|
</el-popconfirm>
|
|
</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> |