From 3bc531758d5ab72c50bd73476312ad6e118f9d65 Mon Sep 17 00:00:00 2001
From: zyn <nn_0223@163.com>
Date: Tue, 14 Nov 2023 14:00:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF-=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../phoneComponents/phoneApprovalHistory.vue  |   2 +-
 .../phoneComponents/phoneRoleTree.vue         | 577 ++++++++++++++++++
 2 files changed, 578 insertions(+), 1 deletion(-)
 create mode 100644 src/components/hzwlComponents/phoneComponents/phoneRoleTree.vue

diff --git a/src/components/hzwlComponents/phoneComponents/phoneApprovalHistory.vue b/src/components/hzwlComponents/phoneComponents/phoneApprovalHistory.vue
index 9cdd99c21..c8d88d090 100644
--- a/src/components/hzwlComponents/phoneComponents/phoneApprovalHistory.vue
+++ b/src/components/hzwlComponents/phoneComponents/phoneApprovalHistory.vue
@@ -97,7 +97,7 @@ export default {
 
 <style lang="less" scoped>
 .phoneHistortTable{
-  height: 100%;
+  height: calc(100vh - 157px);
   //min-height: calc(100vh - 52px)
 }
 </style>
diff --git a/src/components/hzwlComponents/phoneComponents/phoneRoleTree.vue b/src/components/hzwlComponents/phoneComponents/phoneRoleTree.vue
new file mode 100644
index 000000000..dd773ba33
--- /dev/null
+++ b/src/components/hzwlComponents/phoneComponents/phoneRoleTree.vue
@@ -0,0 +1,577 @@
+<template>
+  <div class="roleTree">
+    <el-drawer
+        :title="isTitle"
+        v-if="visible"
+        :visible.sync="visible"
+        :wrapperClosable="false"
+        @close="handleTreeDrawerCancel"
+        append-to-body
+        size="90%">
+      <el-form
+          ref="attributeEO"
+          class="label-input-form"
+          :inline="true"
+          @submit.native.prevent
+      >
+        <el-form-item class="form-item-disabled" style="margin: 10px;">
+          <el-input
+              v-model="filterText"
+              placeholder="请输入姓名"
+              @keyup.enter.native="searchChange"
+              size="mini"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="form-item-disabled" style="margin-top: 10px;">
+          <el-button size="mini" type="primary" @click="searchChange">
+            查询
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="divTree">
+        <!-- 当前tree展示全部人员 -->
+        <el-tree
+            v-if="open1 && isVisible"
+            node-key="id"
+            style="height: 100%; overflow: auto;"
+            class="filter-tree tree-line"
+            icon-class="icon-tree"
+            @check-change="checkChange"
+            :data="treeData"
+            :props="defaultProps"
+            :default-checked-keys="nodeList2"
+            :default-expanded-keys="defaultKey"
+            highlight-current
+            check-strictly
+            @check="drawerCheck"
+            :expand-on-click-node="true"
+            show-checkbox
+            ref="tree"
+            :load="loadNode"
+            :lazy="true">
+                  <span class="custom-tree-node" slot-scope="{ node, data }">
+                      <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
+                      <span> {{ node.label }} </span>
+                  </span>
+        </el-tree>
+        <!-- 当前tree展示搜索出的人员 -->
+        <el-tree
+            v-if="!open1 && isVisible"
+            node-key="id"
+            style="height: 100%; overflow: auto;"
+            class="filter-tree tree-line"
+            icon-class="icon-tree"
+            :data="treeData1"
+            :props="defaultProps"
+            @check-change="checkChange2"
+            :default-checked-keys="nodeList2"
+            :default-expanded-keys="defaultKey"
+            default-expand-all
+            highlight-current
+            :check-strictly="true"
+            @check="drawerCheck"
+            show-checkbox
+            ref="tree"
+            :lazy="false"
+            :key="treeKey"
+        >
+                  <span class="custom-tree-node" slot-scope="{ node, data }">
+                      <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
+                      <span> {{ node.label }} </span>
+                  </span>
+        </el-tree>
+      </div>
+      <div class="divDel">
+        <div class="divDel_title">已选中人员</div>
+        <div class="divDel_box">
+          <el-tag
+              v-for="tag in delList"
+              :key="tag.id"
+              size="mini"
+              @close="handleClose(tag)"
+              closable>
+            {{tag.name}}
+          </el-tag>
+          <el-tag v-show="delList.length > 0 && !checkBox" type="danger" closable size="mini"
+                  @close="handleCloseAll()">全部删除
+          </el-tag>
+        </div>
+      </div>
+      <div id="roleFormButton" class="demo-drawer-footer">
+        <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary"
+                   :loading="subLoading" @click="saveUserInfo">确定
+        </el-button>
+
+        <el-button class="common-button-default" size="mini" icon="el-icon-close" :loading="subLoading"
+                   @click="handleTreeDrawerCancel">取消
+        </el-button>
+      </div>
+      <loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+function debounce(func, wait = 500) {
+  let timeout;
+  return function (event) {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      func.call(this, event)
+    }, wait)
+  }
+}
+
+export default {
+  name: "phoneRoleTree",
+  props: {
+    checkBox: { // 单选/多选
+      type: Boolean,
+      default: false,//默认false多选
+    },
+    isTitle: { // 标题
+      type: String
+    },
+    isVisible: { // drawer开关
+      type: Boolean,
+      default: false,
+    },
+    nodeList: { // 回显
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    type: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      treeKey: 1,
+      defaultKey: [],//默认展开的节点的 key 的数组
+      visible: false,
+      selectList: [],
+      nodeList2: [],//默认勾选的节点的 key 的数组
+      delList: [],
+      roleList: [],
+      filterText: '',
+      defaultProps: {//配置选项
+        children: 'children',//指定子树为节点对象的某个属性值
+        label: 'name',//指定节点标签为节点对象的某个属性值
+      },
+      treeData1: [],
+      treeData: [],
+      open1: true,
+      treeLoading: false,
+      subLoading: false,
+      roleRow: {}
+    }
+  },
+  methods: {
+    nameJoinAccount(treeData1) {
+      treeData1.forEach(item => {
+        if (item.account) item.name = `${item.name}(${item.account})`
+        if (item.children) this.nameJoinAccount(item.children)
+      })
+    },
+    handleClose(tag) {
+      let arr = []
+      for (let a = 0; a < this.delList.length; a++) {
+        if (tag.id === this.delList[a].id) {
+          this.delList.splice(a, 1)
+        }
+      }
+      this.delList.map(item => {
+        arr.push(item)
+      })
+      this.$refs.tree.setCheckedKeys(arr);
+      for (let b = 0; b < this.nodeList2.length; b++) {
+        if (tag.id === this.nodeList2[b]) {
+          this.nodeList2.splice(b, 1)
+        }
+      }
+      for (let c = 0; c < this.roleList.length; c++) {
+        if (tag.id === this.roleList[c].id) {
+          this.roleList.splice(c, 1)
+        }
+      }
+    },
+    handleCloseAll() {
+      this.$msgbox({
+        title: '提示',
+        message: '是否删除当前选中人员',
+        showCancelButton: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      }).then(() => {
+        this.delList = []
+        this.nodeList2 = []
+        this.roleList = []
+        this.$refs.tree.setCheckedKeys([]);
+      }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '取消删除'
+            });
+          }
+      )
+    },
+    searchChange() {
+      // 查询
+      if (this.filterText.length) {
+        this.open1 = false // 显示第二个tree
+        this.treeLoading = true
+        this.defaultKey = []
+        this.$http.get('SarInstitution/institution/getNextTwo', {
+          userName: this.filterText
+        }, {}, res => {
+          this.treeData1 = res
+          this.treeData1.forEach(item => {
+            this.defaultKey.push(item.id)
+          })
+          this.nameJoinAccount(this.treeData1)
+          this.treeLoading = false
+        })
+        // this.treeKey++
+
+
+        // this.$http.get('SarInstitution/institution/institutionAndUser', {
+        //   userName: this.filterText
+        // }, {}, res => {
+        //   this.treeData1 = res.data
+        //   this.treeData1.forEach(item => {
+        //     this.defaultKey.push(item.id)
+        //   })
+        //   console.log(1);
+        //   this.getChildren()
+        //   this.treeLoading = false
+        // })
+      } else {
+        this.open1 = true
+      }
+    },
+    changeInput: debounce(function (val) {
+      if (val.length) {
+        this.open1 = false
+        this.treeLoading = true
+        this.$http.get('SarInstitution/institution/institutionAndUser', {
+          userName: val
+        }, {}, res => {
+          this.treeData1 = res.data
+          this.treeLoading = false
+        })
+      } else {
+        this.open1 = true
+      }
+    }),
+    checkChange2(row, type, c) {
+      if (this.checkBox) {
+      } else {
+        if (type) {
+          this.nodeList2.push(row.id)
+          this.delList.push(row)
+        } else {
+          for (let a = 0; a < this.nodeList2.length; a++) {
+            if (row.id === this.nodeList2[a]) {
+              this.nodeList2.splice(a, 1)
+            }
+          }
+          for (let b = 0; b < this.delList.length; b++) {
+            if (row.id === this.delList[b].id) {
+              this.delList.splice(b, 1)
+            }
+          }
+        }
+      }
+    },
+    checkChange(row, type, c) {
+      //节点选中状态发生变化时的回调(传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点)
+      if (this.checkBox) {
+      } else {
+        if (type) {
+          this.nodeList2.push(row.id)
+          this.delList.push(row)
+        } else {
+          for (let a = 0; a < this.nodeList2.length; a++) {
+            if (row.id === this.nodeList2[a]) {
+              this.nodeList2.splice(a, 1)
+            }
+          }
+          for (let b = 0; b < this.delList.length; b++) {
+            if (row.id === this.delList[b].id) {
+              this.delList.splice(b, 1)
+            }
+          }
+        }
+      }
+    },
+    handleTreeDrawerCancel() {
+      this.filterText = ''
+      this.open1 = true
+      this.visible = false
+    },
+    saveUserInfo() {
+      if (this.roleList.length === 0) {
+        this.roleList.push({id: "", name: ""});
+      }
+      if (this.checkBox) {
+        this.$emit('checkedRole', this.roleList)
+        this.nodeList2 = []
+        this.$emit('update:isVisible', false)
+      } else {
+        if (this.nodeList2.length > 0 && this.nodeList2[0].length !== 0) {
+          let ids = ''
+          this.nodeList2.forEach(item => {
+            if (ids.length > 0) {
+              ids += ','
+              ids += item
+            } else {
+              ids = item
+            }
+          })
+          this.subLoading = true
+          this.$http.get('SarInstitution/institution/getNextById', {
+            ids: ids,
+            topNum: 3,
+          }, {
+            _this: this
+          }, res => {
+            this.$emit('checkedRole', res)
+            this.nodeList2 = []
+            this.$emit('update:isVisible', false)
+            this.subLoading = false
+          })
+        } else {
+          this.$emit('checkedRole', this.roleList)
+          this.nodeList2 = []
+          this.$emit('update:isVisible', false)
+        }
+      }
+      this.open1 = true
+    },
+    drawerCheck(data) {
+      //当复选框被点击的时候触发
+      //共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
+      if (this.checkBox) { // 单选
+        // 单选判断
+        let getlist = this.$refs.tree.getCheckedNodes()
+        if (getlist.length > 1) {
+          this.$refs.tree.setCheckedKeys([])
+          this.$refs.tree.setCheckedKeys([data.id])
+          this.roleList = [data]
+          this.delList = [data]
+        } else if (getlist.length === 0) {
+          this.roleList = [{}]
+          this.delList = []
+        } else if (getlist.length === 1) {
+          this.roleList = [data]
+          this.delList = [data]
+        }
+      } else { // 多选
+        if (this.roleList.length === 0) {
+          this.roleList.push(data)
+        } else {
+          let delFlag = true
+          this.roleList.forEach((item, index) => {
+            if (item.id === data.id) {
+              this.roleList.splice(index, 1)
+              delFlag = false
+            }
+          })
+          if (delFlag) {
+            this.roleList.push(data)
+          }
+        }
+        //  this.roleList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
+      }
+    },
+    loadNode(node, resolve) {
+      //加载子树数据的方法，仅当 lazy 属性为true 时生效
+      if (node.level === 0) {
+        return resolve(this.treeData);
+      }
+      this.getChildren(node, resolve)
+    },
+    getChildren(node, resolve) {
+      this.$http.get('SarInstitution/institution/getNext', {
+        institutionId: node.key,
+        userName: this.filterText
+      }, {}, res => {
+        resolve(res)
+      })
+    },
+    getTree() {
+      this.treeLoading = true
+      this.$http.get('SarInstitution/institution/getFirstInstitution', {}, {}, res => {
+        this.treeData = res
+        this.treeLoading = false
+      })
+    }
+  },
+  watch: {
+    isVisible(val) {
+      this.visible = val
+      if (val) {
+        this.nodeList2 = this.nodeList
+        if (this.nodeList2.length && this.nodeList2[0].length) {
+          let ids = ''
+          this.nodeList2.forEach(item => {
+            if (ids.length) {
+              ids += ','
+              ids += item
+            } else {
+              ids = item
+            }
+          })
+          this.$http.get('SarInstitution/institution/getNextById', {
+            ids: ids
+          }, {
+            _this: this
+          }, res => {
+            this.delList = res
+          })
+        } else {
+          this.delList = []
+        }
+      } else {
+        this.delList = []
+      }
+    },
+    visible(val) {
+      this.$emit('update:isVisible', val)
+    }
+  },
+  mounted() {
+    this.getTree()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.divTree {
+  overflow: auto;
+  height: calc(~'100% - 100px');
+}
+
+.divDel {
+  border-top: 1px solid #000;
+  height: 100px;
+
+  .divDel_title {
+    margin: 10px;
+  }
+
+  .divDel_box {
+    height: 66px;
+    padding: 0px 0 10px;
+    display: flex;
+    flex-wrap: wrap;
+    overflow: auto;
+    margin: 10px;
+    align-content: flex-start;
+
+    span {
+      margin: 0px 5px 5px 0;
+    }
+  }
+}
+
+/deep/ .icon-tree {
+  margin: 0 5px 0 10px;
+  position: relative;
+  background: url('~@/assets/images/shangqi/img/tree-add.png');
+  background-size: 100% 100%;
+}
+
+/deep/ .el-tree-node__content {
+  padding-left: 0px !important;
+}
+
+/deep/ .is-leaf {
+  background-image: none;
+  background-size: 100% 100%;
+}
+
+/deep/ .is-leaf-none {
+  position: relative;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: url('~@/assets/images/shangqi/img/personnel.png');
+  background-size: 100% 100%;
+}
+
+/deep/ .is-show {
+  position: relative;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: url('~@/assets/images/shangqi/img/mechanism.png');
+  background-size: 100% 100%;
+}
+
+/deep/ .tree-line {
+  .el-tree-node {
+    position: relative;
+    padding-left: 0px; // 缩进量
+    line-height: 30px;
+  }
+
+  .el-tree-node__children {
+    padding-left: 16px; // 缩进量
+  }
+
+  // 竖线
+  .el-tree-node::before {
+    content: "";
+    height: 100%;
+    width: 1px;
+    position: absolute;
+    left: -3px;
+    top: -26px;
+    border-width: 1px;
+    border-left: 1px dashed #858990e0;
+  }
+
+  // 当前层最后一个节点的竖线高度固定
+  .el-tree-node:last-child::before {
+    height: 38px; // 可以自己调节到合适数值
+  }
+
+  // 横线
+  .el-tree-node::after {
+    content: "";
+    width: 11px;
+    height: 20px;
+    position: absolute;
+    left: -3px;
+    top: 12px;
+    border-width: 1px;
+    border-top: 1px dashed #858990e0;
+  }
+
+  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
+  & > .el-tree-node::after {
+    border-top: none;
+  }
+
+  & > .el-tree-node::before {
+    border-left: none;
+  }
+
+  // 展开关闭的icon
+  .el-tree-node__expand-icon {
+    font-size: 16px;
+    // 叶子节点（无子节点）
+    &.is-leaf {
+      color: transparent;
+      // display: none; // 也可以去掉
+    }
+  }
+}
+.demo-drawer-footer {
+  height: 50px !important;
+}
+</style>