<template>
<div>
<ks-dialog
ref="categoryDialog"
:title="dialogTitle"
class="dialog-style"
:visible.sync="jdCategoryVisible"
:modal-append-to-body="false"
:close-on-click-modal="false"
@close="dialogClose">
<ks-cascader
ref="myCascader"
v-model="darwinCidGroup"
class="category-casc"
:options="categoryOptions"
:props="marketCascaderProps"
clearable
@change="categoryChange">
</ks-cascader>
<span slot="footer" class="dialog-footer">
<ks-button @click="jdCategoryVisible = false">取 消</ks-button>
<ks-button type="primary" @click="categoryConfirm()">确 定</ks-button>
</span>
</ks-dialog>
</div>
</template>
<script>
import { categoryCascade } from '@/api/productCenter/myProduct'
export default {
data() {
return {
dialogTitle: '普通发品',
selectCategory: true,
categoryData: '',
jdCategoryVisible: false,
darwinCidGroup: [],
darwinCid: null,
categoryOptions: [],
marketCascaderProps: {
emitPath: true,
lazy: true,
lazyLoad: this.getSubMarket
}
}
},
methods: {
dialogClose() {
this.categoryData = ''
this.darwinCidGroup = []
this.selectCategory = true
},
categoryChange() {
if (this.$refs.myCascader.getCheckedNodes()[0]) {
this.categoryData = this.$refs.myCascader.getCheckedNodes()[0].pathLabels.join('>>')
this.selectCategory = false
} else {
this.categoryData = null
this.selectCategory = true
}
},
categoryConfirm() {
if (this.$refs.myCascader.getCheckedNodes()[0]) {
this.jdCategoryVisible = false
} else {
this.$message.error('请选择类目!')
}
},
getSubMarket(node, resolve) {
categoryCascade(node.level + 1, node.value || null).then(res => {
if (res.code === '20000') {
const nodes = res.result.map(item => ({
value: item.cid,
label: item.catName,
leaf: item.catIsParent === false
}))
const filterNodes = []
for (const i in nodes) {
filterNodes.push(nodes[i])
}
resolve(filterNodes)
}
}).catch((error) => {
console.log(error)
resolve([])
})
}
}
}
</script>
<style lang="scss" scoped>
.dialog-style{
::v-deep.ks-dialog{
width: 800px;
.ks-dialog__header{
font-size: 16px;
height: 70px;
border-bottom: 1px solid #D9DFEA;
}
}
.category-casc{
width: 100%;
}
.desc{
margin-bottom: 20px;
}
.desc-text{
color: cornflowerblue;
}
}
</style>
效果图: