|
@@ -7,7 +7,7 @@
|
|
|
:title="modalTit"
|
|
|
v-model="isShow"
|
|
|
@cancle="isShow=false"
|
|
|
- width="500px">
|
|
|
+ width="800px">
|
|
|
<!-- 表单 -->
|
|
|
<div>
|
|
|
<a-form-model
|
|
@@ -18,24 +18,36 @@
|
|
|
:label-col="formItemLayout.labelCol"
|
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
|
|
>
|
|
|
- <a-form-model-item label="分区名称" prop="productBrandName">
|
|
|
+ <a-form-model-item label="分区名称" prop="subareaName">
|
|
|
<a-input
|
|
|
- id="marketingDivisionSetEdit-productBrandName"
|
|
|
+ id="marketingDivisionSetEdit-subareaName"
|
|
|
:maxLength="30"
|
|
|
- v-model="form.productBrandName"
|
|
|
+ v-model="form.subareaName"
|
|
|
placeholder="请输入分区名称(最多30个字符)"
|
|
|
allowClear />
|
|
|
</a-form-model-item>
|
|
|
- <a-form-model-item label="省份/市" prop="productBrandName">
|
|
|
- <a-tree
|
|
|
- checkable
|
|
|
- @check="onCheck"
|
|
|
- @expand="onExpand"
|
|
|
- :expandedKeys="expandedKeys"
|
|
|
- :autoExpandParent="autoExpandParent"
|
|
|
- v-model="checkedKeys"
|
|
|
- :treeData="treeData"
|
|
|
- />
|
|
|
+ <a-form-model-item label="省份/市">
|
|
|
+ <div class="tree-node">
|
|
|
+ <div class="tree-box" v-for="item in addrProvinceList" :key="item.id">
|
|
|
+ <div class="tree-parent">
|
|
|
+ <span>
|
|
|
+ <a-checkbox style="width: 100%;" v-model="item.checked" @change="onChange(item,$event)">
|
|
|
+ {{ item.checked }}{{ item.name }}
|
|
|
+ </a-checkbox>
|
|
|
+ </span>
|
|
|
+ <span @click="expend(item)"><a-icon :title="item.isOpen==0?'展开':'收起'" :type="item.isOpen==0?'plus-square':'minus-square'" /></span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 子级 -->
|
|
|
+ <div v-show="item.isOpen==1" class="tree-child">
|
|
|
+ <div v-for="child in item.children" :key="child.id">
|
|
|
+ <a-checkbox v-model="child.checked" style="width: 100%;" @change="onChange(child,$event)">
|
|
|
+ {{ child.checked }}{{ child.name }}
|
|
|
+ </a-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-form-model-item>
|
|
|
</a-form-model>
|
|
|
<div class="btn-cont">
|
|
@@ -49,7 +61,7 @@
|
|
|
<script>
|
|
|
import { STable, Upload } from '@/components'
|
|
|
import Editor from '@/components/WEeditor'
|
|
|
-// import { dealerProductBrandSave } from '@/api/dealerProductBrand'
|
|
|
+import { getArea } from '@/api/data'
|
|
|
export default {
|
|
|
name: 'MarketingDivisionSetEditModal',
|
|
|
components: { STable, Upload, Editor },
|
|
@@ -80,99 +92,124 @@ export default {
|
|
|
wrapperCol: { span: 20 }
|
|
|
},
|
|
|
form: {
|
|
|
- productBrandName: '', // 产品品牌名称
|
|
|
- image: '',
|
|
|
- desc: ''
|
|
|
+ subareaName: '' // 分区名称
|
|
|
},
|
|
|
rules: {
|
|
|
- productBrandName: [
|
|
|
- { required: true, message: '请输入产品品牌名称', trigger: 'blur' }
|
|
|
+ subareaName: [
|
|
|
+ { required: true, message: '请输入分区名称', trigger: 'blur' }
|
|
|
]
|
|
|
},
|
|
|
- productBrandList: [],
|
|
|
- expandedKeys: ['0-0-0', '0-0-1'],
|
|
|
- autoExpandParent: true,
|
|
|
- checkedKeys: ['0-0-0'],
|
|
|
- selectedKeys: [],
|
|
|
- treeData: [
|
|
|
- {
|
|
|
- title: '0-0',
|
|
|
- key: '0-0',
|
|
|
- children: [
|
|
|
- {
|
|
|
- title: '0-0-0',
|
|
|
- key: '0-0-0',
|
|
|
- children: [
|
|
|
- { title: '0-0-0-0', key: '0-0-0-0' },
|
|
|
- { title: '0-0-0-1', key: '0-0-0-1' },
|
|
|
- { title: '0-0-0-2', key: '0-0-0-2' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- title: '0-0-1',
|
|
|
- key: '0-0-1',
|
|
|
- children: [
|
|
|
- { title: '0-0-1-0', key: '0-0-1-0' },
|
|
|
- { title: '0-0-1-1', key: '0-0-1-1' },
|
|
|
- { title: '0-0-1-2', key: '0-0-1-2' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- title: '0-0-2',
|
|
|
- key: '0-0-2'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- title: '0-1',
|
|
|
- key: '0-1',
|
|
|
- children: [
|
|
|
- { title: '0-1-0-0', key: '0-1-0-0' },
|
|
|
- { title: '0-1-0-1', key: '0-1-0-1' },
|
|
|
- { title: '0-1-0-2', key: '0-1-0-2' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- title: '0-2',
|
|
|
- key: '0-2'
|
|
|
- }
|
|
|
- ]
|
|
|
+ addrProvinceList: [], // 省下拉
|
|
|
+ subareaAreaList: []
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- onExpand (expandedKeys) {
|
|
|
- console.log('onExpand', expandedKeys)
|
|
|
- this.expandedKeys = expandedKeys
|
|
|
- this.autoExpandParent = false
|
|
|
+ onChange (item, e) {
|
|
|
+ console.log(item, `checked = ${e.target.checked}`)
|
|
|
+ item.checked = e.target.checked
|
|
|
+ const hasItemIndex = this.subareaAreaList.findIndex(d => d.areaSn == item.areaSn)
|
|
|
+ // 已存在,则删除
|
|
|
+ if (hasItemIndex >= 0) {
|
|
|
+ this.subareaAreaList.splice(hasItemIndex, 1)
|
|
|
+ } else {
|
|
|
+ // 不存在,添加
|
|
|
+ this.subareaAreaList.push({
|
|
|
+ areaSn: item.areaSn,
|
|
|
+ areaName: item.name,
|
|
|
+ areaType: item.type,
|
|
|
+ areaParentSn: item.parentId
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(this.subareaAreaList)
|
|
|
+
|
|
|
+ // 判断是否存在父级
|
|
|
+ if (item.type == 3) {
|
|
|
+ // 如何子级全部勾选
|
|
|
+ const parent = this.addrProvinceList.find(d => d.areaSn == item.parentId)
|
|
|
+ const plen = parent.children.length
|
|
|
+ const tjNode = this.subareaAreaList.filter(d => d.areaParentSn == item.parentId)
|
|
|
+ console.log(tjNode.length == plen)
|
|
|
+ if (tjNode.length == plen) {
|
|
|
+ console.log(1)
|
|
|
+ // 保存父级
|
|
|
+ this.subareaAreaList.push({
|
|
|
+ areaSn: parent.areaSn,
|
|
|
+ areaName: parent.name,
|
|
|
+ areaType: parent.type,
|
|
|
+ areaParentSn: parent.parentId
|
|
|
+ })
|
|
|
+ // 删除所有子级
|
|
|
+ this.subareaAreaList = this.subareaAreaList.filter(d => d.areaParentSn != item.parentId)
|
|
|
+ parent.checked = true
|
|
|
+ } else {
|
|
|
+ const hasPIndex = this.subareaAreaList.findIndex(d => d.areaSn == item.parentId)
|
|
|
+ // 存在则删除父级
|
|
|
+ if (hasPIndex >= 0) {
|
|
|
+ this.subareaAreaList.splice(hasPIndex, 1)
|
|
|
+ }
|
|
|
+ parent.checked = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log(item.checked)
|
|
|
+ // 父级操作
|
|
|
+ item.children && item.children.map(d => {
|
|
|
+ d.disabled = item.checked
|
|
|
+ d.checked = item.checked
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ this.addrProvinceList = JSON.parse(JSON.stringify(this.addrProvinceList))
|
|
|
+ },
|
|
|
+ // 展开收起
|
|
|
+ expend (item) {
|
|
|
+ if (item.children && item.children.length == 0) {
|
|
|
+ item.isOpen = 1
|
|
|
+ this.getArea('city', item)
|
|
|
+ } else {
|
|
|
+ item.isOpen = !item.isOpen
|
|
|
+ }
|
|
|
},
|
|
|
- onCheck (checkedKeys, info) {
|
|
|
- console.log('onCheck', checkedKeys, info)
|
|
|
- // this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
|
|
|
- this.checkedKeys = checkedKeys
|
|
|
+ // 省/市/区
|
|
|
+ getArea (leve, item, isOpen) {
|
|
|
+ let params
|
|
|
+ if (leve == 'province') {
|
|
|
+ params = { type: '2' }
|
|
|
+ } else {
|
|
|
+ params = { parentId: item.areaSn, type: leve == 'city' ? '3' : '4' }
|
|
|
+ }
|
|
|
+ getArea(params).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ if (leve == 'province') {
|
|
|
+ this.addrProvinceList = res.data || []
|
|
|
+ this.addrProvinceList.map(item => {
|
|
|
+ item.checked = false
|
|
|
+ item.children = []
|
|
|
+ })
|
|
|
+ } else if (leve == 'city') {
|
|
|
+ item.children = res.data || []
|
|
|
+ item.children.map(d => {
|
|
|
+ d.disabled = false
|
|
|
+ d.checked = item.checked
|
|
|
+ })
|
|
|
+ this.addrProvinceList = JSON.parse(JSON.stringify(this.addrProvinceList))
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (leve == 'province') {
|
|
|
+ this.addrProvinceList = []
|
|
|
+ } else if (leve == 'city') {
|
|
|
+ item.children = []
|
|
|
+ item.isOpen = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- // onExpand (expandedKeys) {
|
|
|
- // console.log('onExpand', expandedKeys)
|
|
|
- // // if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
|
|
- // // or, you can remove all expanded children keys.
|
|
|
- // this.expandedKeys = expandedKeys
|
|
|
- // this.autoExpandParent = false
|
|
|
- // },
|
|
|
- // onCheck (checkedKeys) {
|
|
|
- // console.log('onCheck', checkedKeys)
|
|
|
- // this.checkedKeys = checkedKeys
|
|
|
- // },
|
|
|
- // onSelect (selectedKeys, info) {
|
|
|
- // console.log('onSelect', info)
|
|
|
- // this.selectedKeys = selectedKeys
|
|
|
- // },
|
|
|
// 保存
|
|
|
handleSave () {
|
|
|
- console.log(this.checkedKeys)
|
|
|
const _this = this
|
|
|
_this.$refs.ruleForm.validate(valid => {
|
|
|
if (valid) {
|
|
|
const formData = JSON.parse(JSON.stringify(_this.form))
|
|
|
- formData.id = _this.itemId ? _this.itemId : undefined
|
|
|
+ console.log(this.subareaAreaList)
|
|
|
// dealerProductBrandSave(formData).then(res => {
|
|
|
// if (res.status == 200) {
|
|
|
// _this.$message.success(res.message)
|
|
@@ -184,14 +221,6 @@ export default {
|
|
|
return false
|
|
|
}
|
|
|
})
|
|
|
- },
|
|
|
- // 图片上传
|
|
|
- changeHomeImage (file) {
|
|
|
- this.form.image = file
|
|
|
- },
|
|
|
- // 文本编辑器
|
|
|
- editorChange (html, text) {
|
|
|
- this.form.desc = html
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -204,7 +233,7 @@ export default {
|
|
|
if (!newValue) {
|
|
|
this.$emit('close')
|
|
|
} else {
|
|
|
- this.form.productBrandName = this.nowData && this.nowData.productBrandName ? this.nowData.productBrandName : ''
|
|
|
+ this.getArea('province')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -216,23 +245,40 @@ export default {
|
|
|
.ant-modal-body {
|
|
|
padding: 40px 40px 24px;
|
|
|
}
|
|
|
- .upload{
|
|
|
- width: 100%!important;
|
|
|
- }
|
|
|
- // 商品图片描述
|
|
|
- .upload-desc{
|
|
|
- font-size: 12px;
|
|
|
- color: #808695;
|
|
|
- }
|
|
|
- // 文本编辑器 工具栏样式换行
|
|
|
- .marketingDivisionSetEdit-editor{
|
|
|
- .w-e-toolbar{
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
- }
|
|
|
.btn-cont {
|
|
|
text-align: center;
|
|
|
margin: 35px 0 10px;
|
|
|
}
|
|
|
+ .tree-node{
|
|
|
+ height: 300px;
|
|
|
+ overflow: auto;
|
|
|
+ .tree-box{
|
|
|
+ .tree-parent{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ padding: 0 10px;
|
|
|
+ > span{
|
|
|
+ margin:0 5px;
|
|
|
+ &:first-child{
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tree-child{
|
|
|
+ padding: 10px 10px 10px 35px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap:wrap ;
|
|
|
+ > div{
|
|
|
+ margin:0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|