我们发布啦
This commit is contained in:
张乐
@@ -0,0 +1,472 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
title="运费模板"
|
||||
:visible.sync="dialogVisible"
|
||||
width="1000px"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="ruleForm" :model="ruleForm" label-width="120px" size="mini" v-if="dialogVisible" :rules="rules">
|
||||
<el-form-item label="模板名称" prop="name">
|
||||
<el-input v-model="ruleForm.name" class="withs" placeholder="请输入模板名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计费方式" prop="type">
|
||||
<el-radio-group v-model="ruleForm.type" @change="changeRadio(ruleForm.type)">
|
||||
<el-radio :label="1">按件数</el-radio>
|
||||
<el-radio :label="2">按重量</el-radio>
|
||||
<el-radio :label="3">按体积</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="配送区域及运费" prop="region">
|
||||
<el-table v-loading="listLoading" :data="ruleForm.region" border fit highlight-current-row style="width: 100%" size="mini" class="tempBox">
|
||||
<el-table-column align="center" label="可配送区域" min-width="260">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === 0">默认全国</span>
|
||||
<el-cascader
|
||||
v-else
|
||||
v-model="scope.row.city_ids"
|
||||
style="width: 98%"
|
||||
:options="cityList"
|
||||
:props="props"
|
||||
collapse-tags
|
||||
clearable
|
||||
filterable
|
||||
@change="changeRegion"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="130px" align="center" :label="columns.title">
|
||||
<template slot-scope="{row}">
|
||||
<el-input-number v-model="row.first" controls-position="right" :min="1" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="120px" align="center" label="运费（元）">
|
||||
<template slot-scope="{row}">
|
||||
<el-input-number v-model="row.firstPrice" controls-position="right" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="120px" align="center" :label="columns.title2">
|
||||
<template slot-scope="{row}">
|
||||
<el-input-number v-model="row.renewal" controls-position="right" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column class-name="status-col" align="center" label="续费（元）" min-width="120">
|
||||
<template slot-scope="{row}">
|
||||
<el-input-number v-model="row.renewalPrice" controls-position="right" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.$index > 0"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="confirmEdit(ruleForm.region,scope.$index)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="mini" icon="el-icon-edit" @click="addRegion(ruleForm.region)">
|
||||
添加配送区域
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="指定包邮" prop="appoint">
|
||||
<el-radio-group v-model="ruleForm.appoint">
|
||||
<el-radio :label="true">开启</el-radio>
|
||||
<el-radio :label="false">关闭</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="ruleForm.appoint === true" prop="free">
|
||||
<el-table v-loading="listLoading" :data="ruleForm.free" border fit highlight-current-row style="width: 100%" size="mini">
|
||||
<el-table-column align="center" label="选择地区" min-width="220">
|
||||
<template slot-scope="{row}">
|
||||
<el-cascader
|
||||
v-model="row.city_ids"
|
||||
style="width: 95%"
|
||||
:options="cityList"
|
||||
:props="props"
|
||||
collapse-tags
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="180px" align="center" :label="columns.title3">
|
||||
<template slot-scope="{row}">
|
||||
<el-input-number v-model="row.number" controls-position="right" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="120px" align="center" label="包邮金额（元）">
|
||||
<template slot-scope="{row}">
|
||||
<el-input-number v-model="row.price" controls-position="right" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="confirmEdit(ruleForm.free,scope.$index)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="ruleForm.appoint === true">
|
||||
<el-button type="primary" size="mini" icon="el-icon-edit" @click="addFree(ruleForm.free)">
|
||||
添加指定包邮区域
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<!--<el-row :gutter="20">-->
|
||||
<!--<el-col :span="7">-->
|
||||
<!--<el-form-item label="指定区域不配送" prop="undelivery">-->
|
||||
<!--<el-radio-group v-model="ruleForm.undelivery">-->
|
||||
<!--<el-radio :label="1">开启</el-radio>-->
|
||||
<!--<el-radio :label="0">关闭</el-radio>-->
|
||||
<!--</el-radio-group>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--</el-col>-->
|
||||
<!--<el-col :span="14">-->
|
||||
<!--<el-form-item v-if="ruleForm.undelivery === 1" class="noBox" prop="city_id3">-->
|
||||
<!--<el-cascader-->
|
||||
<!--v-model="ruleForm.city_id3"-->
|
||||
<!--placeholder="请选择不配送区域"-->
|
||||
<!--:options="cityList"-->
|
||||
<!--:props="props"-->
|
||||
<!--collapse-tags-->
|
||||
<!--clearable-->
|
||||
<!--style="width: 46%"-->
|
||||
<!--/>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--</el-col>-->
|
||||
<!--</el-row>-->
|
||||
<el-form-item label="排序">
|
||||
<el-input v-model="ruleForm.sort" class="withs" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="onClose('ruleForm')">取 消</el-button>
|
||||
<el-button type="primary" @click="onsubmit('ruleForm')">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as logistics from '@/api/logistics'
|
||||
import { Loading } from 'element-ui'
|
||||
const defaultRole = {
|
||||
name: '',
|
||||
type: 1,
|
||||
appoint: false,
|
||||
sort: 0,
|
||||
region: [{
|
||||
first: 1,
|
||||
firstPrice: 1,
|
||||
renewal: 1,
|
||||
renewalPrice: 1,
|
||||
city_id: [],
|
||||
city_ids: []
|
||||
}],
|
||||
undelivery: 0,
|
||||
free: [],
|
||||
undelives: {},
|
||||
city_id3: []
|
||||
}
|
||||
const kg = '重量（kg）'
|
||||
const m = '体积（m³）'
|
||||
const statusMap = [
|
||||
{
|
||||
title: '首件',
|
||||
title2: '续件',
|
||||
title3: '包邮件数'
|
||||
},
|
||||
{
|
||||
title: `首件${kg}`,
|
||||
title2: `续件${kg}`,
|
||||
title3: `包邮${kg}`
|
||||
},
|
||||
{
|
||||
title: `首件${m}`,
|
||||
title2: `续件${m}`,
|
||||
title3: `包邮${m}`
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'CreatTemplates',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入模板名称', trigger: 'blur' }
|
||||
],
|
||||
free: [
|
||||
{ type: 'array', required: true, message: '请至少添加一个地区', trigger: 'change' }
|
||||
],
|
||||
appoint: [
|
||||
{ required: true, message: '请选择是否指定包邮', trigger: 'change' }
|
||||
],
|
||||
undelivery: [
|
||||
{ required: true, message: '请选择是否指定区域不配送', trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择计费方式', trigger: 'change' }
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
city_id3: [
|
||||
{ type: 'array', required: true, message: '请至少选择一个地区', trigger: 'change' }
|
||||
]
|
||||
},
|
||||
nodeKey: 'city_id',
|
||||
props: {
|
||||
children: 'child',
|
||||
label: 'name',
|
||||
value: 'cityId',
|
||||
multiple: true
|
||||
},
|
||||
dialogVisible: false,
|
||||
ruleForm: Object.assign({}, defaultRole),
|
||||
listLoading: false,
|
||||
cityList: [],
|
||||
columns: {
|
||||
title: '首件',
|
||||
title2: '续件',
|
||||
title3: '包邮件数'
|
||||
},
|
||||
tempId: 0,
|
||||
type: 0 // 0添加 1编辑
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
changType(type) {
|
||||
this.type = type
|
||||
},
|
||||
onClose(formName) {
|
||||
this.dialogVisible = false
|
||||
this.$refs[formName].resetFields()
|
||||
},
|
||||
confirmEdit(row, index) {
|
||||
row.splice(index, 1)
|
||||
},
|
||||
popoverHide() {},
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.$refs['ruleForm'].resetFields()
|
||||
},
|
||||
changeRegion(value) {
|
||||
// console.log(value)
|
||||
},
|
||||
changeRadio(num) {
|
||||
this.columns = Object.assign({}, statusMap[num - 1])
|
||||
},
|
||||
// 添加配送区域
|
||||
addRegion(region) {
|
||||
region.push(Object.assign({}, {
|
||||
first: 1,
|
||||
firstPrice: 1,
|
||||
renewal: 1,
|
||||
renewalPrice: 1,
|
||||
city_id: [],
|
||||
city_ids: []
|
||||
}))
|
||||
},
|
||||
addFree(Free) {
|
||||
Free.push(Object.assign({}, {
|
||||
city_id: [],
|
||||
number: 1,
|
||||
price: 1,
|
||||
city_ids: []
|
||||
}))
|
||||
},
|
||||
|
||||
/**
|
||||
* 详情
|
||||
* id 模板id
|
||||
* appoint true包邮 false不包邮
|
||||
**/
|
||||
getInfo(id, appoint) {
|
||||
this.tempId = id
|
||||
const loadingInstance = Loading.service({ fullscreen: true })
|
||||
logistics.templateDetailApi({ id }).then(res => {
|
||||
this.dialogVisible = true
|
||||
const info = res
|
||||
this.ruleForm = Object.assign(this.ruleForm, {
|
||||
name: info.name,
|
||||
type: info.type,
|
||||
appoint: info.appoint,
|
||||
sort: info.sort
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
loadingInstance.close()
|
||||
})
|
||||
// 不包邮地区
|
||||
this.shippingRegion()
|
||||
// 包邮地区
|
||||
if (info.appoint) {
|
||||
this.shippingFree()
|
||||
}
|
||||
}).catch(res => {
|
||||
// console.log(res)
|
||||
this.$message.error(res.message)
|
||||
this.$nextTick(() => {
|
||||
loadingInstance.close()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 不包邮
|
||||
shippingRegion() {
|
||||
logistics.shippingRegion({ tempId: this.tempId }).then(res => {
|
||||
res.forEach((item, index) => {
|
||||
item.title = JSON.parse(item.title)
|
||||
item.city_id = item.title
|
||||
item.city_ids = item.title
|
||||
})
|
||||
this.ruleForm.region = res
|
||||
})
|
||||
},
|
||||
// 包邮
|
||||
shippingFree() {
|
||||
logistics.shippingFree({ tempId: this.tempId }).then(res => {
|
||||
res.forEach((item, index) => {
|
||||
item.title = JSON.parse(item.title)
|
||||
item.city_id = item.title
|
||||
item.city_ids = item.title
|
||||
})
|
||||
this.ruleForm.free = res
|
||||
})
|
||||
},
|
||||
// 列表
|
||||
getCityList() {
|
||||
logistics.cityListTree().then(res => {
|
||||
// console.log(res, 'getCityList')
|
||||
res.forEach((el, index) => {
|
||||
el.child.forEach((cel, j) => {
|
||||
delete cel.child
|
||||
})
|
||||
})
|
||||
this.cityList = res
|
||||
}).catch(res => {
|
||||
this.$message.error(res.message)
|
||||
})
|
||||
},
|
||||
change(idBox) {
|
||||
idBox.map(item => {
|
||||
const ids = []
|
||||
item.city_ids.map(j => {
|
||||
j.splice(0, 1)
|
||||
ids.push(j[0])
|
||||
})
|
||||
item.city_id = ids
|
||||
})
|
||||
return idBox
|
||||
},
|
||||
changeOne(idBox) {
|
||||
const city_ids = []
|
||||
idBox.map(item => {
|
||||
item.splice(0, 1)
|
||||
city_ids.push(item[0])
|
||||
})
|
||||
return city_ids
|
||||
},
|
||||
onsubmit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const param = {
|
||||
appoint: this.ruleForm.appoint,
|
||||
name: this.ruleForm.name,
|
||||
sort: this.ruleForm.sort,
|
||||
type: this.ruleForm.type,
|
||||
// 配送区域及运费
|
||||
shippingTemplatesRegionRequestList: [],
|
||||
// 指定包邮设置
|
||||
shippingTemplatesFreeRequestList: []
|
||||
}
|
||||
console.log(this.ruleForm.region)
|
||||
this.ruleForm.region.forEach((el, index) => {
|
||||
console.log(el)
|
||||
el.title = el.city_ids.length > 0 ? JSON.stringify(el.city_ids) : JSON.stringify([[0, 0]])
|
||||
for (var i = 0; i < el.city_ids.length; i++) {
|
||||
el.city_ids[i].shift()
|
||||
}
|
||||
el.cityId = el.city_ids.length > 0 ? el.city_ids.join(',') : 'all'
|
||||
})
|
||||
param.shippingTemplatesRegionRequestList = this.ruleForm.region
|
||||
param.shippingTemplatesRegionRequestList.forEach((el, index) => {
|
||||
// delete el.city_ids
|
||||
// delete el.city_id
|
||||
})
|
||||
if (this.ruleForm.appoint) {
|
||||
this.ruleForm.free.forEach((el, index) => {
|
||||
el.title = el.city_ids.length > 0 ? JSON.stringify(el.city_ids) : JSON.stringify([[0, 0]])
|
||||
for (var i = 0; i < el.city_ids.length; i++) {
|
||||
el.city_ids[i].shift()
|
||||
}
|
||||
el.cityId = el.city_ids.length > 0 ? el.city_ids.join(',') : 'all'
|
||||
})
|
||||
param.shippingTemplatesFreeRequestList = this.ruleForm.free
|
||||
param.shippingTemplatesFreeRequestList.forEach((el, index) => {
|
||||
// delete el.city_ids
|
||||
// delete el.city_id
|
||||
})
|
||||
}
|
||||
if (this.type === 0) {
|
||||
logistics.shippingSave(param).then(res => {
|
||||
this.$message.success('操作成功')
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.dialogVisible = false
|
||||
this.$refs[formName].resetFields()
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$emit('getList')
|
||||
console.log(this.$refs, 'this.$refs[formName]')
|
||||
}, 600)
|
||||
})
|
||||
} else {
|
||||
logistics.shippingUpdate(param, { id: this.tempId }).then(res => {
|
||||
this.$message.success('操作成功')
|
||||
setTimeout(() => {
|
||||
this.$emit('getList')
|
||||
// this.$refs[formName].resetFields()
|
||||
// this.clear()
|
||||
}, 600)
|
||||
this.$nextTick(() => {
|
||||
this.dialogVisible = false
|
||||
this.$refs[formName].resetFields()
|
||||
})
|
||||
})
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.withs{
|
||||
width: 50%;
|
||||
}
|
||||
.noBox{
|
||||
/deep/.el-form-item__content{
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
.tempBox{
|
||||
/deep/.el-input-number--mini{
|
||||
width: 100px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user