<template>
|
<el-dialog :visible.sync="showDialog" v-if="showDialog" :title="title" :close-on-click-modal="false" :modal-append-to-body="false">
|
<el-tree
|
ref="tree"
|
:data="treeData"
|
show-checkbox
|
node-key="publicityId"
|
v-loading="isLoading"
|
default-expand-all
|
@check="handleNodeSelected"
|
check-on-click-node
|
:props="defaultProps">
|
</el-tree>
|
<div slot="footer" class="dialog-footer buttonPosition">
|
<el-button size="mini" type="primary" @click="submit">确定</el-button>
|
<el-button size="mini" @click="showDialog=false">取消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import catPublicityApi from '@/api/catPublicity'
|
export default {
|
props: {
|
title: {
|
type: String,
|
default: null
|
},
|
show: {
|
type: Boolean,
|
default: false
|
},
|
checkedTreeData: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
firstCategoryData: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
}
|
},
|
data () {
|
return {
|
showDialog: false,
|
treeData: [],
|
defaultProps: {
|
children: 'children',
|
label: 'publicityName'
|
},
|
isLoading: false,
|
checkedData: [],
|
firstCategory: []
|
}
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
show: function (newShow, oldShow) {
|
this.showDialog = this.show
|
if (this.show) {
|
this.queryList()
|
}
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
showDialog: function (newDialogShow, oldDialogShow) {
|
this.$emit('update:show', newDialogShow)
|
}
|
},
|
methods: {
|
/**
|
* 树节点选择
|
*/
|
handleNodeSelected (data, checkedData) {
|
if (!data.pid && this.firstCategory.length > 3 && !this.firstCategory.find(item => {
|
return item.publicityId === data.publicityId
|
})) {
|
this.$message({
|
message: '一级分类最多只能选4个',
|
type: 'info'
|
})
|
this.$refs.tree.setCheckedKeys(this.checkedData.map(item => {
|
return item.publicityId
|
}))
|
return
|
}
|
this.firstCategory = []
|
this.checkedData = []
|
const checkedDatas = []
|
const arr = checkedData.checkedNodes.concat(checkedData.halfCheckedNodes)
|
arr.forEach(item => {
|
if (!item.pid) {
|
this.firstCategory.push({
|
publicityId: item.publicityId,
|
publicityName: item.publicityName
|
})
|
}
|
})
|
checkedData.checkedNodes.forEach(item => {
|
checkedDatas.push({
|
publicityId: item.publicityId,
|
publicityName: item.publicityName,
|
pid: item.pid
|
})
|
})
|
checkedDatas.forEach((rowItem) => {
|
const data = this.firstCategory.find((item) => {
|
return rowItem.pid === item.publicityId
|
})
|
rowItem.content = data ? `${data.publicityName}--${rowItem.publicityName}` : rowItem.publicityName
|
if (!checkedDatas.find((item) => {
|
return rowItem.publicityId === item.pid
|
})
|
) {
|
this.checkedData.push(rowItem)
|
}
|
})
|
},
|
/**
|
* 提交
|
*/
|
submit () {
|
// if (this.checkedData.length && this.firstCategory) {
|
this.$emit('handle-tree-select', this.checkedData, this.firstCategory)
|
// }
|
this.showDialog = false
|
},
|
/**
|
* 查询列表
|
*/
|
async queryList (pageInfo = { pageNum: 1, pageSize: 100000 }) {
|
try {
|
this.isLoading = true
|
const res = await catPublicityApi.getList({ ...pageInfo, param: {} })
|
if (res.code === '0') {
|
this.isLoading = false
|
this.treeData = res.data.list
|
this.checkedData = JSON.parse(JSON.stringify(this.checkedTreeData))
|
this.firstCategory = JSON.parse(JSON.stringify(this.firstCategoryData))
|
const arr = []
|
const checkedArr = []
|
res.data.list.forEach(v => {
|
this.firstCategory.forEach(item => {
|
if (item.publicityId === v.publicityId) {
|
arr.push(item)
|
}
|
})
|
this.checkedData.forEach(item => {
|
if (item.publicityId === v.publicityId) {
|
checkedArr.push(item)
|
}
|
if (v.children && v.children.length) {
|
v.children.forEach(i => {
|
if (item.publicityId === i.publicityId) {
|
checkedArr.push(item)
|
}
|
})
|
}
|
})
|
})
|
this.firstCategory = JSON.parse(JSON.stringify(arr))
|
this.checkedData = JSON.parse(JSON.stringify(checkedArr))
|
this.$refs.tree.setCheckedKeys(this.checkedTreeData.map(item => {
|
return item.publicityId
|
}))
|
} else {
|
this.isLoading = false
|
}
|
} catch (error) {
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
|
</style>
|
