|
|
@@ -3,36 +3,20 @@
|
|
|
<el-popover placement="bottom-start" :disabled="disabled" v-model="visible">
|
|
|
<!-- 选中的值 -->
|
|
|
<div slot="reference" class="tags-box">
|
|
|
- <i
|
|
|
- v-if="sNodeList.length > 0 && !disabled"
|
|
|
- class="el-icon-circle-close close-icon"
|
|
|
- @click="clear"></i>
|
|
|
- <el-tag type="success" v-for="v in sNodeList" :key="v.id">{{v.name}}</el-tag>
|
|
|
+ <i v-if="sNodeList.length > 0 && !disabled" class="el-icon-circle-close close-icon" @click="clear"></i>
|
|
|
+ <el-tag type="success" v-for="v in sNodeList" :key="v.id">{{ v.name }}</el-tag>
|
|
|
</div>
|
|
|
|
|
|
<!-- 文本框 -->
|
|
|
- <el-input
|
|
|
- style="width: 100%; margin-bottom: 20px"
|
|
|
- v-model="queryForm.value"
|
|
|
- @input="serchTreeHandler"
|
|
|
- placeholder="请输入查询机构名称"
|
|
|
- ></el-input>
|
|
|
+ <el-input style="width: 100%; margin-bottom: 20px" v-model="queryForm.value" @input="serchTreeHandler"
|
|
|
+ placeholder="请输入查询机构名称"></el-input>
|
|
|
<!-- 下拉框 -->
|
|
|
<el-row :gutter="20" type="flex" align="middle">
|
|
|
<el-col :span="14" :xs="24">
|
|
|
- <el-select
|
|
|
- :disabled="disable"
|
|
|
- v-model="queryForm.type"
|
|
|
- placeholder="请选择过滤机构类型"
|
|
|
- clearable
|
|
|
- @change="serchTreeHandler"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="dict in dict.type.sys_org_type"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="parseInt(dict.value)"
|
|
|
- ></el-option>
|
|
|
+ <el-select :disabled="disable" v-model="queryForm.type" placeholder="请选择过滤机构类型" clearable
|
|
|
+ @change="serchTreeHandler">
|
|
|
+ <el-option v-for="dict in dict.type.sys_org_type" :key="dict.value" :label="dict.label"
|
|
|
+ :value="parseInt(dict.value)"></el-option>
|
|
|
</el-select>
|
|
|
</el-col>
|
|
|
<el-col :span="10" :xs="24">
|
|
|
@@ -41,19 +25,9 @@
|
|
|
</el-row>
|
|
|
<!-- 机构树 -->
|
|
|
<div class="tree-box">
|
|
|
- <el-tree
|
|
|
- ref="tree"
|
|
|
- :data="orgTree"
|
|
|
- :props="defaultProps"
|
|
|
- node-key="id"
|
|
|
- show-checkbox
|
|
|
- :check-strictly="true"
|
|
|
- :expand-on-click-node="false"
|
|
|
- :default-checked-keys="nodes"
|
|
|
- :default-expanded-keys="nodes"
|
|
|
- @node-click="handleNodeClick"
|
|
|
- @check="onCheck"
|
|
|
- :filter-node-method="filterNode">
|
|
|
+ <el-tree ref="tree" :data="orgTree" :props="treeProps" node-key="id" show-checkbox :check-strictly="true"
|
|
|
+ :expand-on-click-node="false" :default-checked-keys="nodes" :default-expanded-keys="nodes"
|
|
|
+ @node-click="handleNodeClick" @check="onCheck" :filter-node-method="filterNode">
|
|
|
</el-tree>
|
|
|
</div>
|
|
|
</el-popover>
|
|
|
@@ -104,6 +78,12 @@ export default {
|
|
|
default: false,
|
|
|
required: false,
|
|
|
},
|
|
|
+ // 机构树上能选择的机构类型
|
|
|
+ enabledCheckOrgTypes: {
|
|
|
+ type: [Number,Array],
|
|
|
+ default: [],
|
|
|
+ required: false,
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -124,6 +104,11 @@ export default {
|
|
|
sNodeList: [],
|
|
|
//默认显示及展开的node
|
|
|
nodes: [],
|
|
|
+ treeProps:{
|
|
|
+ disabled: this.getNodedisabled,
|
|
|
+ children: "children",
|
|
|
+ label: "name",
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -133,11 +118,11 @@ export default {
|
|
|
defaultNode: {
|
|
|
immediate: true,
|
|
|
handler(n) {
|
|
|
- if(!n || n.length === 0)return;
|
|
|
+ if (!n || n.length === 0) return;
|
|
|
this.nodes = this.defaultNode;
|
|
|
this.$nextTick(() => {
|
|
|
let arr = [];
|
|
|
- this.defaultNode.forEach(v=>{
|
|
|
+ this.defaultNode.forEach(v => {
|
|
|
let node = this.$refs.tree.getNode(v);
|
|
|
arr.push(node.data)
|
|
|
})
|
|
|
@@ -165,96 +150,120 @@ export default {
|
|
|
// },
|
|
|
// },
|
|
|
},
|
|
|
-
|
|
|
+ defaultProps: {
|
|
|
+ handler(n) {
|
|
|
+ if (n) {
|
|
|
+ this.treeProps.label=n.label;
|
|
|
+ this.treeProps.children=n.children;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
- clear() {
|
|
|
- this.sNodeList = [];
|
|
|
- this.$refs.tree.setCheckedKeys([]);
|
|
|
- this.$refs.tree.setCurrentKey(null);
|
|
|
- this.nodes = [];
|
|
|
- this.$emit("selectNode", JSON.stringify(this.sNodeList));
|
|
|
- },
|
|
|
- //筛选条件变化
|
|
|
- serchTreeHandler() {
|
|
|
- this.$refs.tree.filter(this.queryForm);
|
|
|
- },
|
|
|
- /** 查询机构下拉树结构 */
|
|
|
- getDeptTree() {
|
|
|
- if (this.customRequest) {
|
|
|
- this.customRequest().then((response) => {
|
|
|
- this.treeList = response.data;
|
|
|
- return
|
|
|
- });
|
|
|
- }
|
|
|
- this.orgTree = this.$store.getters.orgTree;
|
|
|
- if (this.hangsheTree) {
|
|
|
- this.orgTree = this.$store.getters.depTree;
|
|
|
- }
|
|
|
- },
|
|
|
- filterNode(value, data, node) {
|
|
|
- if (this.queryForm.value && this.queryForm.type) {
|
|
|
- return (
|
|
|
- data.name.indexOf(this.queryForm.value) !== -1 &&
|
|
|
- data.type == this.queryForm.type
|
|
|
- );
|
|
|
- }
|
|
|
- if (this.queryForm.value) {
|
|
|
- return data.name.indexOf(this.queryForm.value) !== -1;
|
|
|
- }
|
|
|
- if (this.queryForm.type) {
|
|
|
- return data.type == this.queryForm.type;
|
|
|
+ clear() {
|
|
|
+ this.sNodeList = [];
|
|
|
+ this.$refs.tree.setCheckedKeys([]);
|
|
|
+ this.$refs.tree.setCurrentKey(null);
|
|
|
+ this.nodes = [];
|
|
|
+ this.$emit("selectNode", JSON.stringify(this.sNodeList));
|
|
|
+ },
|
|
|
+ //筛选条件变化
|
|
|
+ serchTreeHandler() {
|
|
|
+ this.$refs.tree.filter(this.queryForm);
|
|
|
+ },
|
|
|
+ /** 查询机构下拉树结构 */
|
|
|
+ getDeptTree() {
|
|
|
+ if (this.customRequest) {
|
|
|
+ this.customRequest().then((response) => {
|
|
|
+ this.treeList = response.data;
|
|
|
+ return
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.orgTree = this.$store.getters.orgTree;
|
|
|
+ if (this.hangsheTree) {
|
|
|
+ this.orgTree = this.$store.getters.depTree;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getNodedisabled(node) {
|
|
|
+ //console.log("getNodedisabled",node,this.enabledCheckOrgTypes)
|
|
|
+ if (this.enabledCheckOrgTypes) {
|
|
|
+ if (Array.isArray(node)) {
|
|
|
+ if (this.params.enabledOrgTypeList.findIndex((x) => x === node.type) == -1) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
}
|
|
|
- return true;
|
|
|
- },
|
|
|
-
|
|
|
- handleNodeClick() {
|
|
|
- },
|
|
|
- onCheck(data, checked, tree) {
|
|
|
- if (this.checked) {
|
|
|
- let checkNodes = this.$refs.tree.getCheckedNodes();
|
|
|
- let type = this.queryForm.type;
|
|
|
- let recursionFn = function(tree) {
|
|
|
- tree.forEach((item) => {
|
|
|
- if (type == item.type) {
|
|
|
- checkNodes.push(item);
|
|
|
- //console.log('name',checkNodes.indexOf(item))
|
|
|
- //checkNodes.indexOf(item) >= 0? checkNodes.splice(checkNodes.indexOf(item),1):checkNodes.push(item);
|
|
|
- }
|
|
|
- if (item.children?.length > 0) {
|
|
|
- recursionFn(item.children)
|
|
|
- } else {
|
|
|
- return;
|
|
|
- }
|
|
|
- });
|
|
|
+ else {
|
|
|
+ if (this.enabledCheckOrgTypes !== node.type) {
|
|
|
+ return true;
|
|
|
}
|
|
|
- // 递归查询
|
|
|
- recursionFn(data.children);
|
|
|
- let arr = checkNodes.filter(v=>{
|
|
|
- return v.type == this.queryForm.type}
|
|
|
- );
|
|
|
- this.$refs.tree.setCheckedNodes(arr);
|
|
|
- this.sNodeList = this.$refs.tree.getCheckedNodes();
|
|
|
- return
|
|
|
}
|
|
|
- // debugger;
|
|
|
- this.sNodeList = this.$refs.tree.getCheckedNodes();
|
|
|
- this.$emit("selectNode", JSON.stringify(this.sNodeList));
|
|
|
- },
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ filterNode(value, data, node) {
|
|
|
+ if (this.queryForm.value && this.queryForm.type) {
|
|
|
+ return (
|
|
|
+ data.name.indexOf(this.queryForm.value) !== -1 &&
|
|
|
+ data.type == this.queryForm.type
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (this.queryForm.value) {
|
|
|
+ return data.name.indexOf(this.queryForm.value) !== -1;
|
|
|
+ }
|
|
|
+ if (this.queryForm.type) {
|
|
|
+ return data.type == this.queryForm.type;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
|
|
|
- getSubOrgIdsByOrgType(topOrg, orgType, orgIdList) {
|
|
|
- if (!topOrg) return;
|
|
|
- if (topOrg.type == orgType) {
|
|
|
- orgIdList.push(topOrg);
|
|
|
- }
|
|
|
- if (topOrg.children && topOrg.children.length > 0) {
|
|
|
- topOrg.children.forEach((item) => {
|
|
|
- this.getSubOrgIdsByOrgType(item, orgType, orgIdList);
|
|
|
+ handleNodeClick() {
|
|
|
+ },
|
|
|
+ onCheck(data, checked, tree) {
|
|
|
+ if (this.checked) {
|
|
|
+ let checkNodes = this.$refs.tree.getCheckedNodes();
|
|
|
+ let type = this.queryForm.type;
|
|
|
+ let recursionFn = function (tree) {
|
|
|
+ tree.forEach((item) => {
|
|
|
+ if (type == item.type) {
|
|
|
+ checkNodes.push(item);
|
|
|
+ //console.log('name',checkNodes.indexOf(item))
|
|
|
+ //checkNodes.indexOf(item) >= 0? checkNodes.splice(checkNodes.indexOf(item),1):checkNodes.push(item);
|
|
|
+ }
|
|
|
+ if (item.children?.length > 0) {
|
|
|
+ recursionFn(item.children)
|
|
|
+ } else {
|
|
|
+ return;
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
- },
|
|
|
+ // 递归查询
|
|
|
+ recursionFn(data.children);
|
|
|
+ let arr = checkNodes.filter(v => {
|
|
|
+ return v.type == this.queryForm.type
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.$refs.tree.setCheckedNodes(arr);
|
|
|
+ this.sNodeList = this.$refs.tree.getCheckedNodes();
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // debugger;
|
|
|
+ this.sNodeList = this.$refs.tree.getCheckedNodes();
|
|
|
+ this.$emit("selectNode", JSON.stringify(this.sNodeList));
|
|
|
+ },
|
|
|
+
|
|
|
+ getSubOrgIdsByOrgType(topOrg, orgType, orgIdList) {
|
|
|
+ if (!topOrg) return;
|
|
|
+ if (topOrg.type == orgType) {
|
|
|
+ orgIdList.push(topOrg);
|
|
|
+ }
|
|
|
+ if (topOrg.children && topOrg.children.length > 0) {
|
|
|
+ topOrg.children.forEach((item) => {
|
|
|
+ this.getSubOrgIdsByOrgType(item, orgType, orgIdList);
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
+ },
|
|
|
model: {
|
|
|
prop: "defaultNode",
|
|
|
event: "selectNode",
|
|
|
@@ -279,15 +288,18 @@ export default {
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
cursor: pointer;
|
|
|
- > span {
|
|
|
+
|
|
|
+ >span {
|
|
|
margin: 5px 10px;
|
|
|
}
|
|
|
+
|
|
|
&:hover {
|
|
|
.close-icon {
|
|
|
display: block;
|
|
|
color: #666;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.close-icon {
|
|
|
position: absolute;
|
|
|
top: 30%;
|
|
|
@@ -296,6 +308,7 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.tree-box {
|
|
|
margin-top: 20px;
|
|
|
max-height: 300px;
|