|
@@ -1,149 +1,208 @@
|
|
|
<template>
|
|
|
- <div class="treebox" v-loading="loading">
|
|
|
- <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
|
|
|
- <el-tree :highlight-current="true" :check-strictly="true" ref="tree" @check-change="handleCheckChange"
|
|
|
- :data="treeList" node-key="id" :default-checked-keys="defaultListc" :default-expanded-keys="defaultListc"
|
|
|
- @node-click="handleNodeClick" @node-expand="handleNodeClick" >
|
|
|
- <span class="custom-tree-node" slot-scope="{ node, data }" @click="cs(node)">
|
|
|
- <em style="display: inline-block;width: 20px;" v-if="node.data.haveUserFlag == 'N'&& node.data.children.length == 0"></em>
|
|
|
- <i class="el-icon-caret-right" v-if="node.data.haveUserFlag == 'Y' && node.data.children.length == 0"></i>
|
|
|
- <el-checkbox style="margin-right: 10px" v-model="node.checked" v-if="node.data.type == 1"></el-checkbox>
|
|
|
- <span>{{ node.label }}</span>
|
|
|
- </span>
|
|
|
- </el-tree>
|
|
|
- </div>
|
|
|
+ <div class="treebox" v-loading="loading">
|
|
|
+ <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
|
|
|
+ <el-tree
|
|
|
+ :default-expand-all="expandAll"
|
|
|
+ :highlight-current="true"
|
|
|
+ :check-strictly="true"
|
|
|
+ ref="tree"
|
|
|
+ @check-change="handleCheckChange"
|
|
|
+ :data="treeList"
|
|
|
+ node-key="id"
|
|
|
+ :default-checked-keys="defaultListc"
|
|
|
+ :default-expanded-keys="defaultListc"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ @node-expand="handleNodeClick"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="custom-tree-node"
|
|
|
+ slot-scope="{ node, data }"
|
|
|
+ @click="cs(node)"
|
|
|
+ >
|
|
|
+ <em
|
|
|
+ style="display: inline-block; width: 20px"
|
|
|
+ v-if="node.data.haveUserFlag == 'N' && node.data.children.length == 0"
|
|
|
+ ></em>
|
|
|
+ <i
|
|
|
+ class="el-icon-caret-right"
|
|
|
+ v-if="node.data.haveUserFlag == 'Y' && node.data.children.length == 0"
|
|
|
+ ></i>
|
|
|
+ <el-checkbox
|
|
|
+ style="margin-right: 10px"
|
|
|
+ v-model="node.checked"
|
|
|
+ v-if="node.data.type == 1"
|
|
|
+ ></el-checkbox>
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- props: ["defaultList", "type", "closeList","treeList"],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- treeList: [],
|
|
|
- opt: [],
|
|
|
- defaultProps: {
|
|
|
- children: "children",
|
|
|
- label: "label",
|
|
|
- },
|
|
|
- defaultListc: [],
|
|
|
- loading:false,
|
|
|
- filterText: '',
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- filterNode(value, data) {
|
|
|
- if (!value) return true;
|
|
|
- return data.label.indexOf(value) !== -1;
|
|
|
- },
|
|
|
- cs(v){
|
|
|
- // console.log(v)
|
|
|
- },
|
|
|
- // getTree(v) {
|
|
|
- // this.loading = true;
|
|
|
- // this.$http({
|
|
|
- // url: "/sysmgr/csysdept/queryAllList",
|
|
|
- // method: "post",
|
|
|
- // headers: {
|
|
|
- // "Content-Type": "application/json",
|
|
|
- // },
|
|
|
- // data: {
|
|
|
- // parentorgid: v,
|
|
|
- // },
|
|
|
- // }).then((res) => {
|
|
|
- // this.treeList = res.data;
|
|
|
- // this.loading = false;
|
|
|
- // });
|
|
|
- // },
|
|
|
- handleCheckChange(v) {
|
|
|
- let opt = [];
|
|
|
- let list = this.$refs.tree.getCheckedNodes();
|
|
|
- for (let i = 0; i < list.length; i++) {
|
|
|
- if (list[i].type == 1) {
|
|
|
- opt.push({
|
|
|
- receiveNo: list[i].loginNoStr,
|
|
|
- receiveName: list[i].label,
|
|
|
- deptName: list[i].displayname,
|
|
|
- deptCode: list[i].groupId,
|
|
|
- id: list[i].id,
|
|
|
- type: list[i].type,
|
|
|
- label: list[i].label,
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- this.$emit("treeCheck", opt);
|
|
|
- },
|
|
|
- handleNodeClick(v) {
|
|
|
- let s = false;
|
|
|
- if (v.children && v.children.length == 0) {
|
|
|
- s = true;
|
|
|
- }
|
|
|
- if (v.type) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (
|
|
|
- v.children &&
|
|
|
- v.children.length > 0 &&
|
|
|
- v.children[v.children.length - 1].type == 1
|
|
|
- ) {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.$http({
|
|
|
- url: "/sysmgr/sysuserinfo/queryList",
|
|
|
- method: "post",
|
|
|
- headers: {
|
|
|
- "Content-Type": "application/json",
|
|
|
- },
|
|
|
- data: {
|
|
|
- groupId: v.o,
|
|
|
- },
|
|
|
- }).then((res) => {
|
|
|
- res.data.forEach((item) => {
|
|
|
- v.children.push({
|
|
|
- id: item.id,
|
|
|
- label: item.loginNameStr,
|
|
|
- type: 1,
|
|
|
- displayname: v.displayname,
|
|
|
- groupId: item.groupId,
|
|
|
- loginNoStr: item.loginNoStr,
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
|
|
|
- if (s && v.o == this.$refs.tree.store._getAllNodes()[i].data.o) {
|
|
|
- this.$refs.tree.store._getAllNodes()[i].expanded = true;
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- created() {
|
|
|
- // this.getTree();
|
|
|
- this.defaultListc = this.defaultList;
|
|
|
+export default {
|
|
|
+ props: ["defaultList", "type", "closeList", "treeList"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ expandAll: false,
|
|
|
+ opt: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "label",
|
|
|
+ },
|
|
|
+ defaultListc: [],
|
|
|
+ loading: false,
|
|
|
+ filterText: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ cs(v) {
|
|
|
+ // console.log(v)
|
|
|
+ },
|
|
|
+ // getTree(v) {
|
|
|
+ // this.loading = true;
|
|
|
+ // this.$http({
|
|
|
+ // url: "/sysmgr/csysdept/queryAllList",
|
|
|
+ // method: "post",
|
|
|
+ // headers: {
|
|
|
+ // "Content-Type": "application/json",
|
|
|
+ // },
|
|
|
+ // data: {
|
|
|
+ // parentorgid: v,
|
|
|
+ // },
|
|
|
+ // }).then((res) => {
|
|
|
+ // this.treeList = res.data;
|
|
|
+ // this.loading = false;
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ handleCheckChange(v) {
|
|
|
+ let opt = [];
|
|
|
+ let list = this.$refs.tree.getCheckedNodes();
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ if (list[i].type == 1) {
|
|
|
+ opt.push({
|
|
|
+ receiveNo: list[i].loginNoStr,
|
|
|
+ receiveName: list[i].label,
|
|
|
+ deptName: list[i].displayname,
|
|
|
+ deptCode: list[i].groupId,
|
|
|
+ id: list[i].id,
|
|
|
+ type: list[i].type,
|
|
|
+ label: list[i].label,
|
|
|
+ loginNameStr:list[i].loginNameStr,
|
|
|
+ loginNoStr: list[i].loginNoStr,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$emit("changeTree", opt);
|
|
|
+ },
|
|
|
+ handleNodeClick(v) {
|
|
|
+ let s = false;
|
|
|
+ if (v.children && v.children.length == 0) {
|
|
|
+ s = true;
|
|
|
+ }
|
|
|
+ if (v.type) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ v.children &&
|
|
|
+ v.children.length > 0 &&
|
|
|
+ v.children[v.children.length - 1].type == 1
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$http({
|
|
|
+ url: "/sysmgr/sysuserinfo/queryList",
|
|
|
+ method: "post",
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json",
|
|
|
},
|
|
|
- watch: {
|
|
|
- filterText(val) {
|
|
|
- this.$refs.tree.filter(val);
|
|
|
- },
|
|
|
- type() {
|
|
|
- this.defaultListc = this.defaultList;
|
|
|
- this.$forceUpdate();
|
|
|
- },
|
|
|
- defaultList() {
|
|
|
- this.$forceUpdate();
|
|
|
- },
|
|
|
- closeList() {
|
|
|
- this.$refs.tree.setCheckedNodes(this.closeList);
|
|
|
- },
|
|
|
+ data: {
|
|
|
+ groupId: v.o,
|
|
|
},
|
|
|
- };
|
|
|
+ }).then((res) => {
|
|
|
+ res.data.forEach((item) => {
|
|
|
+ v.children.push({
|
|
|
+ id: item.id,
|
|
|
+ label: item.loginNameStr,
|
|
|
+ type: 1,
|
|
|
+ displayname: v.displayname,
|
|
|
+ groupId: item.groupId,
|
|
|
+ loginNoStr: item.loginNoStr,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
|
|
|
+ if (s && v.o == this.$refs.tree.store._getAllNodes()[i].data.o) {
|
|
|
+ this.$refs.tree.store._getAllNodes()[i].expanded = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getTree();
|
|
|
+ // console.log(this.treeList);
|
|
|
+ this.defaultListc = this.defaultList;
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ treeList(newVal, oldVal) {
|
|
|
+ console.log(newVal);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (newVal.length <= 1) {
|
|
|
+ this.isexpand = true;
|
|
|
+
|
|
|
+ for (
|
|
|
+ var i = 0;
|
|
|
+ i < this.$refs.tree.store._getAllNodes().length;
|
|
|
+ i++
|
|
|
+ ) {
|
|
|
+
|
|
|
+ this.$refs.tree.store._getAllNodes()[i].expanded = true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (
|
|
|
+ var i = 0;
|
|
|
+ i < this.$refs.tree.store._getAllNodes().length;
|
|
|
+ i++
|
|
|
+ ) {
|
|
|
+
|
|
|
+ this.$refs.tree.store._getAllNodes()[i].expanded =false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ filterText(val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
+ },
|
|
|
+ type() {
|
|
|
+ this.defaultListc = this.defaultList;
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ defaultList() {
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ closeList() {
|
|
|
+ this.$refs.tree.setCheckedNodes(this.closeList);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .el-icon-caret-right{
|
|
|
- color: #ccc;
|
|
|
- margin:0 5px;
|
|
|
- }
|
|
|
- .treebox {
|
|
|
- border: 1px solid #ddd;
|
|
|
- }
|
|
|
+// ::v-deep .el-tree--highlight-current {
|
|
|
+//
|
|
|
+// }
|
|
|
+::v-deep .el-tree--highlight-current {
|
|
|
+ height: 500px;
|
|
|
+}
|
|
|
+.el-icon-caret-right {
|
|
|
+ color: #ccc;
|
|
|
+ margin: 0 5px;
|
|
|
+}
|
|
|
+.treebox {
|
|
|
+ border: 1px solid #ddd;
|
|
|
+}
|
|
|
</style>
|