<template>
<div ref="riskReportQueryList" class="riskReportQueryList">
<div style="background:#fff;padding:10px;">
<div style="font-size:16px;height:40px;line-height:45px;padding-left:20px;border-bottom:1px solid #DCDFE6;font-weight: 700;">
查询
</div>
<el-form ref="ruleForm" :model="ruleForm" label-width="120px" style="background: #fff; padding: 20px 0 0px;font-weight:400;">
<el-row>
<el-col :span="5">
<el-form-item label="选择模型" prop="riskPhase">
<el-cascader v-model="ruleForm.value" clearable filterable :options="options2" :props="{ multiple: true}" :collapse-tags="true" placeholder="请选择" @change="selectHandle">
<template slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
</el-col>
<el-col :span="6" style="padding-left:40px;">
<el-button type="primary" @click="defaultSelectSomeone">选中某项</el-button>
<el-button type="primary" @click="defaultSelectAll">全选</el-button>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
// import Treeselect from '@riophae/vue-treeselect'
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
name: "riskReportQueryList",
// import引入的组件需要注入到对象中才能使用PopupTreeInput
// components: { Treeselect },
props: [""],
data() {
// 这里存放数据
return {
lastSelectedList: [], // 上次选中的数据
oneDimensionalList: [], // 源数据平铺成一级节点
ruleForm: {
value: [],
}, //查询 传参
options2: [
{
value: "全选",
label: '全选',
},
{
value: 1,
label: '东南',
children: [{
value: 2,
label: '上海',
}, {
value: 3,
label: '江苏',
}, {
value: 4,
label: '浙江',
}]
}, {
value: 5,
label: '西北',
children: [{
value: 6,
label: '陕西',
}, {
value: 7,
label: '新疆维吾尔自治区',
children: [{
value: 8,
label: '呼伦贝尔大草原',
}, {
value: 9,
label: '新疆维吾尔自治区',
}],
}],
}, {
value: 10,
label: '西北',
}],
options2Number: 0,
selectAllStatusList: [],
test: "",
};
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {
test: {
deep: true, // deep: true // 可以深度检测到 test 对象的属性值的变化
handler(newV) {
this.test = newV;
},
},
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() { },
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
// 全选的数据
this.oneDimensionalList = []
},
// 方法集合
methods: {
getTreeList(list) {
let _this = this;
for (let i = 0; i < list.length; i++) {
let a = list[i];
if (a.label !== '全选') {
this.oneDimensionalList.push(list[i])
}
if (a.children && a.children.length > 0) {
let res = _this.getTreeList(a.children);
if (res) {
return res;
}
}
}
},
defaultSelectSomeone() {
this.ruleForm.value = [['1', '2']];
},
defaultSelectAll() {
this.selectHandle([['全选']])
},
judgetAllSelected(node) {
// 判断是否是全选,也就是看已选择的选中中包不包含"全选"
console.log("node11111111", node);
let isAllSelected = false
for (let i = 0; i < node.length; i++) {
if (node[i][0] === '全选') {
isAllSelected = true
break;
}
}
return isAllSelected
},
loopSelectData(list, parentNode = []) {
list.length > 0 && list.forEach(e => {
let pNode = [...parentNode]; // 注意这里必须是深拷贝，否则会由于引用类型赋值的是地址（指针），导致parentNode在pNode更新时，同时被更新
if (e.children && e.children.length > 0) {
pNode.push(e.value)// 1 11
this.loopSelectData(e.children, pNode)
} else {
if (parentNode.length > 0) {
this.ruleForm.value.push([...parentNode, e.value])
} else {
this.ruleForm.value.push([e.value])
}
}
})
},
checkIsAddAllSelected() {
// 通过dom获取到控制全选，不选，半选的样式
let label1 = document.querySelector('.el-cascader-panel').querySelector('.el-cascader-menu__wrap').querySelectorAll("li")[0].querySelectorAll("label")[0]
let span1 = document.querySelector('.el-cascader-panel').querySelector('.el-cascader-menu__wrap').querySelectorAll("li")[0].querySelectorAll("label")[0].querySelectorAll("span")[0]
// 获取所有的数据
let list = this.options2; // 原始数据列表
if (this.oneDimensionalList.length === 0) {
this.getTreeList(list) // 把所有的父子级平铺成一个一级列表
}
let origin = [...this.oneDimensionalList].filter(item => !item.children)//获取所有的叶子节点
let nowList = [...this.ruleForm.value].filter(item => item[0] !== '全选')
// 半选时, 如果有之前选过全选,要把全选过滤掉
if (origin.length > nowList.length && nowList.length != 0) {
this.ruleForm.value = this.ruleForm.value.filter(item => item[0] !== '全选')
//设置半选样式，setTimeout可以解决样式渲染不上的问题
setTimeout(function () {
label1.className = "el-checkbox"
span1.className = "el-checkbox__input is-indeterminate"
}, 1)
} else if (nowList.length == 0) {
//不选时, 如果有之前选过全选,要把全选过滤掉
this.ruleForm.value = this.ruleForm.value.filter(item => item[0] !== '全选')
label1.className = "el-checkbox"
span1.className = "el-checkbox__input"
} else {
// 当所有的数据都选择时, 要自动把全选勾选上 最后这种是：origin.length == nowList.length
if (this.ruleForm.value[0] && this.ruleForm.value[0][0] !== '全选') {
this.ruleForm.value = [['全选'], ...this.ruleForm.value]
label1.className = "el-checkbox"
span1.className = "el-checkbox__input is-checked"
}
}
},
// 选择级联选择器
async selectHandle(e = []) {
console.log("node1111", e);
this.ruleForm.value = []
// 选中的数据格式: [['全选'], [1, 2], [1, 3], [1, 4],[5, 6], [5, 7, 8],5, 7, 9],[10]]
let list = this.options2//级联选择器的数据
let current = []; // 获取当前选中的哪个数据，因为element文档中没有获取当前选中数据的方法，只能通过上次选中的数据和这次选中的数据进行比较来获取
// 选中的所有数据list和上一次选中的list进行比较
if (e.length >= this.lastSelectedList.length) {
let keys = this.lastSelectedList.map(item => JSON.stringify(item))
current = e.filter(item => !keys.includes(JSON.stringify(item)))
console.log('选中某项', current);
} else {
// 取消选中
let keys = e.map(item => JSON.stringify(item))
current = this.lastSelectedList.filter(item => !keys.includes(JSON.stringify(item)))
console.log('取消选中', current);
}
// 根据element的选中数据格式, 每一个选项都是一个列表, 列表第一项为父级value, 第二项为选中的子级value, ...以此类推
const currentValue = current.length > 0 ? current[0][0] || '' : ''
if (currentValue === '全选') {
if (this.judgetAllSelected(e)) {
this.loopSelectData(list)//获取全选时回显的数据
} else {
this.ruleForm.value = []//不选
}
} else {
this.ruleForm.value = e//半选
}
// 根据当前选择的数据（不包括全选）和全选时所有的数据--进行对比
this.checkIsAddAllSelected();
this.lastSelectedList = this.ruleForm.value; // 保存上一次的选择结果
this.changeHandle();
},
changeHandle() {
// 这里是处理成自己需要的数据格式, 需要把全选的这一选项过滤掉
// 原始选择的数据格式 [['全选'], [1, 2], [1, 3], [1, 4],[5, 6], [5, 7, 8],5, 7, 9],[10]]
console.log('changeHandle: ', this.ruleForm.value);
},
},
};
</script>
<style lang='scss' >
</style>
<style lang='scss' scoped>
::v-deep .el-form-item__label {
font-weight: 400 !important;
}
</style>