效果:
只能选择子节点 添加配置添加检索代码
源码:
<template>
<div>
<el-button size="small" type="primary" clearable :disabled="disabled" @click="showSign">
危险点评估
</el-button>
<!-- 规则绑定流程节点-->
<el-dialog title="危险点评估" :visible.sync="show" v-if="show" width="700px" append-to-body>
<el-form ref="formEvaluate" :model="formEvaluate" label-width="80px">
<el-form-item label="危险点">
<el-input
placeholder="输入关键字进行检索"
clearable
v-model="filterText">
</el-input>
<el-tree
ref="Tree"
:data="treeData"
:show-checkbox="true"
:check-strictly="true"
node-key="id"
default-expand-all
:highlight-current="true"
:expand-on-click-node="false"
@node-click="nodeClick"
:props="defaultProps"
:check-on-click-node="true"
@check="handleCheck"
:filter-node-method="filterNode"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<span class="custom-expand-icon" v-if="!data.children || data.children.length === 0">
<img src="@/assets/images/fl.png" class="icon" />
</span>
<span class="custom-expand-icon" v-else>
<img src="@/assets/images/home.png" class="icon" />
</span>
{{ data.treeName }}
</span>
</span>
</el-tree>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="show = false">取 消</el-button>
<el-button type="primary" @click="saveGz">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { deptTreeSelect } from "@/api/system/user";
import { selectPcModelByTableZb } from '@/api/index-analysis/indicator-maintenance'
import { doubleTicketAppraise } from '@/api/flowable/definition'
export default {
name: 'tsSelectTree',
components: { Treeselect },
props: {
value: {
default:''
},
conf: {
type: Object
},
disabled: {}
},
data() {
return {
currentValue: undefined,
filterText: '',
options: [],
list: [],
loading: false,
show:false,
cache: [],
input_val: this.value,
object:this.conf,
formEvaluate:{
formName:null,
formId:null,
nodeId:null,
nodeName:null,
lcName:null,
lcId:null,
tableZbbmId:null,
tableZbbmIds:[],
},
//规则数据
treeData:[],
//选中的数据json数组
jsonData:[],
evaluateArr:[],
defaultProps: {
children: "children",
label: "label",
disabled: function (data, node) {//带子级的节点不能选中
if (data.children && data.children.length > 0) {
return true
} else {
return false
}
}
},
}
},
watch: {
value: {
handler(val) {
if (val !== this.currentValue) {
if (this.multiple) {
if (Object.prototype.toString.call(val) === '[object String]') {
try {
this.currentValue = JSON.parse(val)
} catch (e) {
this.currentValue = val.split(',')
}
}
if (Object.prototype.toString.call(val) === '[object Array]') {
this.currentValue = val
}
} else {
this.currentValue = val || undefined
}
}
},
immediate: true,
deep: true
},
currentValue() {
this.$emit('input', this.currentValue)
this.$emit('change', this.currentValue)
},
filterText(val) {
this.$refs.Tree.filter(val);
}
},
created() {
this.getDate()
const object = this.object
this.getTreeList()
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.treeName.indexOf(value) !== -1;
},
handleCheck(data,node){
this.evaluateArr = node.checkedNodes
},
// 点击树节点 多选逻辑todo
nodeClick(data,node, indeterminate) {
if(node.childNodes.length > 0){
return
}
},
cancel(){
this.show = false
},
showSign() {
this.show = true;
},
// 节点单击事件
handleNodeClick(data) {
this.currentValue = data.label;
sessionStorage.setItem('deptId',data.id)
this.show = false
},
remoteMethod(query) {
if (query !== '') {
this.loading = true
setTimeout(() => {
this.getDate(query)
}, 500)
} else {
this.options = this.cache
}
},
getDate(query) {
deptTreeSelect().then((response) => {
// 获取树形的部门数据
this.options = response.data;
sessionStorage.setItem('deptInfo',this.options && JSON.stringify(this.options))
});
},
getTreeList() {
const params = {
tableZb:'WXDPG'
};
selectPcModelByTableZb(params).then((response) => {
this.treeData = response.data;
});
},
saveGz(){
this.formEvaluate.tableZbbmId = ''
this.formEvaluate.tableZbbmIds = []
const arr = this.evaluateArr
if(this.evaluateArr.length ==0){
this.$message.warning('请选择一条危险点')
return
}
},
}
}
</script>