310 行
12 KiB
HTML
可执行文件
310 行
12 KiB
HTML
可执行文件
<!--[1.7.90]-->
|
|
<div id="distributionApp">
|
|
<!--头部的中间-->
|
|
<el-form label-width="150px">
|
|
<el-form-item label="计费方式">
|
|
<template slot="label">
|
|
<span>计费方式</span>
|
|
<el-link type="info" target="_blank"
|
|
href="/Public/Retail/images/零售门店配送模板计价规则.png">
|
|
<el-tooltip class="item" effect="dark" content="点击查看计费规则"
|
|
placement="top-start">
|
|
<i class="el-icon-question"></i>
|
|
</el-tooltip>
|
|
</el-link>
|
|
</template>
|
|
<el-radio-group v-model="charging_type" @change="choose()">
|
|
<el-radio label="1">按商品累加运费</el-radio>
|
|
<el-radio label="2">组合运费（推荐使用）</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!--头部的底部-->
|
|
<div>
|
|
<el-form :inline="true" class="demo-form-inline" label-width="120px" size="small">
|
|
<el-form-item label="">
|
|
<date-picker-range :date-time.sync="search_date"></date-picker-range>
|
|
</el-form-item>
|
|
<el-form-item label="">
|
|
<el-input clearable v-model="formInline.name"
|
|
@keydown.enter.exact.native.prevent="search"
|
|
placeholder="请输入模板名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="small" @click="search()">
|
|
搜索
|
|
</el-button>
|
|
|
|
<el-button type="primary" plain size="small" @click="doShowChildHtml()">添加模板</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!--表格-->
|
|
<template>
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
size="small"
|
|
style="width: 100%"
|
|
:cell-style="rowClass"
|
|
:header-cell-style="headClass">
|
|
<el-table-column
|
|
type="index"
|
|
width="50"
|
|
label="序号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="title"
|
|
label="模板名称">
|
|
<template slot-scope="scope">
|
|
<p v-if="scope.row.title">{{scope.row.title}}</p>
|
|
<p v-else>未使用</p>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="add_time"
|
|
label="创建时间">
|
|
</el-table-column>
|
|
<!--<el-table-column-->
|
|
<!--prop="billmodel"-->
|
|
<!--label="商品数量">-->
|
|
<!--</el-table-column>-->
|
|
<el-table-column
|
|
prop="type"
|
|
label="计费方式">
|
|
<template slot-scope="scope">
|
|
<p v-if="scope.row.type==1">免运费</p>
|
|
<p v-if="scope.row.type==2">按件数</p>
|
|
<p v-if="scope.row.type==3">按重量</p>
|
|
<p v-if="scope.row.type==4">统一运费</p>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="配送区域">
|
|
<template slot-scope="scope">
|
|
<el-button size="small" type="text" @click="open(scope.row.title,scope.row.id)">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
fixed="right"
|
|
label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="small"
|
|
@click="batchUseHtml(scope.row.title,scope.row.id,scope.row.type)">批量使用
|
|
</el-button>
|
|
<el-button type="text" size="small" @click="deleteData(scope.row.id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
<!--分页-->
|
|
<el-pagination
|
|
@current-change="changePageNum"
|
|
:current-page="pager"
|
|
:page-sizes="[10]"
|
|
:page-size="100"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="totalQuantity">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var distributionApp = new Vue({
|
|
el: '#distributionApp',
|
|
data: function () {
|
|
return {
|
|
template_status: '',//是否启用开关
|
|
search_date: null,//时间
|
|
charging_type: '',//默认按钮，配送计费方式选择
|
|
pager: 1,//当前页
|
|
totalQuantity: 0,//总条数
|
|
pageSize: '10',//每页多少条
|
|
formInline: {
|
|
name: '',//模板名称
|
|
},
|
|
startTime: '',//开始时间
|
|
endTime: '',//结束时间
|
|
tableData: [],//配送模板页面数据
|
|
temBaseData: null,//接收数据数组
|
|
area: null,//区域查看数据
|
|
areaData: '',//区域查看数组
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.getType();
|
|
this.getList();
|
|
},
|
|
watch: {
|
|
//时间选择
|
|
search_date: function (n, o) {
|
|
if (n && n.length) {
|
|
this.startTime = n[0];
|
|
this.endTime = n[1];
|
|
} else {
|
|
this.startTime = '';
|
|
this.endTime = '';
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 数据刷新
|
|
getList: function () {
|
|
var that = this;
|
|
$.ajax({
|
|
url: "{:U('SystemDelivery/displayDistributionTemInfo')}",
|
|
type: 'post',
|
|
dataType: 'json',
|
|
data: {
|
|
currentPage: that.pager,
|
|
pageSize: that.pageSize,
|
|
templateName: that.formInline.name,
|
|
startTime: that.startTime,
|
|
endTime: that.endTime,
|
|
},
|
|
success: res => {
|
|
if (res.code === 0) {
|
|
that.tableData = res.data.temBaseData;
|
|
that.totalQuantity = res.data.totalQuantity;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
//搜索
|
|
search() {
|
|
this.pager = '1';
|
|
this.getList();
|
|
},
|
|
//获取是否配送模块、计算方式
|
|
getType() {
|
|
$.ajax({
|
|
url: "{:U('getStoreTemConfiguration')}",
|
|
type: 'post',
|
|
dataType: 'json',
|
|
success: res => {
|
|
this.template_status = res.data.delivery_template_status;
|
|
this.charging_type = res.data.template_charging_type;
|
|
}
|
|
});
|
|
},
|
|
|
|
// 表头样式设置
|
|
headClass() {
|
|
return 'text-align: center;background:#eef1f6;'
|
|
},
|
|
// 表格样式设置
|
|
rowClass() {
|
|
return 'text-align: center;'
|
|
},
|
|
//计费方式选择
|
|
choose: function () {
|
|
$.ajax({
|
|
url: "{:U('changeBillingMode')}",
|
|
type: 'post',
|
|
dataType: 'json',
|
|
data: {
|
|
billingMode: this.charging_type
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
this.$message({
|
|
message: '修改成功',
|
|
type: 'success'
|
|
});
|
|
} else {
|
|
that.$message.warning(res.msg);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//分页
|
|
changePageNum(pager) {
|
|
this.pager = pager;
|
|
// console.log(pager);
|
|
this.getList();
|
|
},
|
|
//跳转配送区域查看页面
|
|
open: function (title, id) {
|
|
layer.open({
|
|
type: 2,
|
|
title: title + ' - 配送区域查看',
|
|
area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
|
|
offset: 'rb',
|
|
shade: 0,
|
|
content: "{:U('regionalView')}?id=" + id,
|
|
end: function () { //此处用于演示
|
|
|
|
}
|
|
});
|
|
},
|
|
|
|
//删除
|
|
deleteData(id) {
|
|
this.$confirm('您确定要删除该配送模板吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
$.ajax({
|
|
url: "{:U('SystemDelivery/deleteTemplate')}",
|
|
type: 'post',
|
|
dataType: 'json',
|
|
data: {
|
|
templateId: id,
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
this.getList();
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
});
|
|
} else {
|
|
this.$confirm(res.msg ? res.msg : '请求发生错误', '错误提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
showCancelButton: false,
|
|
closeOnClickModal: false,
|
|
type: 'error'
|
|
}).then(() => {
|
|
|
|
}).catch(() => {
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
//跳转批量使用页面
|
|
batchUseHtml: function (title, id, type) {
|
|
layer.open({
|
|
type: 2,
|
|
title: title + ' - 批量使用',
|
|
area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
|
|
offset: 'rb',
|
|
shade: 0,
|
|
content: "{:U('batchUse')}?uid=" + id + '&type=' + type,
|
|
end: function () { //此处用于演示
|
|
|
|
}
|
|
});
|
|
},
|
|
//添加配送模板
|
|
doShowChildHtml: function () {
|
|
layer.open({
|
|
type: 2,
|
|
title: '添加配送模板',
|
|
area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
|
|
offset: 'rb',
|
|
shade: 0,
|
|
content: "{:U('addFormWork')}",
|
|
end: ()=> { //此处用于演示
|
|
this.getList();
|
|
}
|
|
});
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
</html> |