<template>
|
<div class="orderLimitArea">
|
<h6>提示：此处设置了限购区域，用户无法下单购买</h6>
|
<el-form size="mini" ref="form">
|
<el-form-item label="请添加限购区域：">
|
<address-component class="addressComponent" ref="addressComponent" :allAdress="allAdress" :isRequest="false" :adressProp="adressProp" :adressArr.sync='adressArray'>
|
<template>
|
<el-button class="sure-btn" @click="sureLimitArea" type="primary">确定</el-button>
|
</template>
|
</address-component>
|
</el-form-item>
|
<el-form-item>
|
<h5>已添加的选购区域 <el-button class="sure-btn" @click="del" type="text">删除</el-button></h5>
|
<el-checkbox v-model="checkAll" @change="checkAllChange" v-show="limitArea.length !== 0">全选</el-checkbox>
|
<el-tree
|
ref="tree"
|
empty-text="暂未添加选购区域"
|
:data="limitArea"
|
node-key="id"
|
:default-expand-all="true"
|
show-checkbox
|
:props="defaultProps">
|
</el-tree>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import addressComponent from '@/components/formTemplate/addressComponent.vue'
|
import adressMgtApi from '@/api/adressMgt'
|
export default {
|
components: { addressComponent },
|
props: ['allAdress'],
|
data () {
|
return {
|
checkAll: false,
|
limitArea: [],
|
adressArray: [],
|
adressProp: {
|
multiple: true
|
},
|
defaultProps: [
|
{
|
children: 'children',
|
label: 'label'
|
}
|
]
|
}
|
},
|
created () {
|
this.getLimitArea()
|
},
|
methods: {
|
checkAllChange () {
|
if (this.checkAll) {
|
this.$refs.tree.setCheckedNodes(this.limitArea)
|
} else {
|
this.$refs.tree.setCheckedKeys([])
|
}
|
},
|
// 获取限制区域数据
|
async getLimitArea () {
|
try {
|
const res = await adressMgtApi.getLimitArea()
|
if (res.code === '0') {
|
const arr = []
|
res.data.forEach((v) => {
|
const c1 = []
|
if (v.citys && v.citys.length) {
|
v.citys.forEach(c => {
|
const c2 = []
|
if (c.countys && c.countys.length) {
|
c.countys.forEach(k => {
|
c2.push({
|
id: k.areaId,
|
label: k.area,
|
type: 'countys',
|
pid: c.cityId
|
})
|
})
|
}
|
c1.push({
|
id: c.cityId,
|
label: c.city,
|
children: c2,
|
type: 'citys',
|
pid: v.provinceId
|
})
|
})
|
}
|
arr.push({
|
id: v.provinceId,
|
label: v.province,
|
children: c1
|
})
|
})
|
this.limitArea = arr
|
this.checkAll = false
|
}
|
} catch (error) {
|
|
}
|
},
|
// 删除数据
|
del () {
|
this.$confirm('是否确认删除以下选购区域?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
const checkedList = this.$refs.tree.getCheckedNodes(false, true)
|
const arr = []
|
checkedList.forEach(v => {
|
if (!v.pid) {
|
arr.push({
|
provinceId: v.id,
|
province: v.label,
|
citys: []
|
})
|
}
|
})
|
arr.forEach(a => {
|
checkedList.forEach(v => {
|
if (v.pid && a.provinceId === v.pid) {
|
a.citys.push({
|
cityId: v.id,
|
city: v.label,
|
countys: []
|
})
|
}
|
})
|
a.citys.forEach(c => {
|
checkedList.forEach(v => {
|
if (v.pid && c.cityId === v.pid) {
|
c.countys.push({
|
areaId: v.id,
|
area: v.label
|
})
|
}
|
})
|
})
|
})
|
const res = await adressMgtApi.deleteLimitArea({ list: arr })
|
if (res.code === '0') {
|
this.$message({
|
type: 'success',
|
message: '删除成功'
|
})
|
this.getLimitArea()
|
}
|
}).catch((e) => {
|
console.log(e)
|
})
|
},
|
// 删除
|
async handleClose (item, index) {
|
try {
|
const res = await adressMgtApi.deleteLimitArea(item.id)
|
if (res.code === '0') {
|
this.$message({
|
type: 'success',
|
message: '删除成功'
|
})
|
this.limitArea.splice(index, 1)
|
}
|
} catch (error) {
|
}
|
},
|
// 保存限制区域
|
async saveLimitArea (data) {
|
try {
|
const res = await adressMgtApi.saveLimitArea(data)
|
if (res.code === '0') {
|
this.$message({
|
type: 'success',
|
message: '添加成功'
|
})
|
// 选择重置
|
// this.checkAll = false
|
this.getLimitArea()
|
}
|
} catch (error) { }
|
},
|
// 确定添加限制区域
|
sureLimitArea () {
|
const data = []
|
if (!this.adressArray.length) return
|
const adressText = this.$refs.addressComponent.adressText
|
this.adressArray.forEach((item, index, arr) => {
|
const val = this.limitArea.find(v => {
|
if (v.areaId) {
|
return v.areaId === item[2]
|
} else {
|
return v.provinceId === item[0]
|
}
|
})
|
if (!val) {
|
const str = {
|
area: adressText[index][2],
|
areaId: item[2],
|
city: adressText[index][1],
|
cityId: item[1],
|
province: adressText[index][0],
|
provinceId: item[0]
|
}
|
data.push(str)
|
}
|
})
|
this.saveLimitArea(data) // 保存限制区域
|
this.adressArray = []
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.orderLimitArea{
|
.el-tag{
|
margin-bottom: 10px;
|
margin-right: 10px;
|
}
|
.addressComponent{
|
display: inline-block;
|
vertical-align: top;
|
}
|
.sure-btn{
|
margin-left: 15px;
|
}
|
}
|
/deep/ .el-tree .is-current > .el-tree-node__content {
|
background-color: transparent !important;
|
}
|
/deep/ .el-tree .is-current > .el-tree-node__content .el-tree-node__label {
|
background: #FFF !important;
|
color: #606266 !important;
|
padding: 0;
|
}
|
</style>
|
