zhgdyun/src/components/userChange.vue

<template>
  <div class="header-btn">
    <el-popover
      placement="bottom"
      trigger="click"
      width="450"
      class="popover"
      v-model="visible"
    >
      <div class="changeBox">
          <div class="title-content">
            <span>{{isUserList?'切换用户':'用户组织'}}</span>
            <i class="el-icon-arrow-left" style="cursor: pointer;" @click="isUserList = true;"></i>
            <i class="el-icon-arrow-right" style="cursor: pointer;" @click="isUserList = false;"></i>
          </div>
          <div class="content-list" v-if="isUserList">
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="content-list-item">
              <i class="el-icon-trophy-1"></i>
              <span>中国建筑第八工程局第三建设有限公司</span>
              <span>个人租户</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div class="tree-group" v-else>
            <div class="select-list">
                <el-input
                  placeholder="输入关键字进行查找"
                  v-model="filterText"
                  style="width: 98%;"
                  suffix-icon="el-icon-search"
                  size="medium"
                >
                </el-input>
                <el-tree
                  :data="level1CompanyData"
                  :props="selectTreeProps"
                  node-key="id"
                  ref="tree"
                  :filter-node-method="filterNode"
                  :highlight-current="true"
                  :check-on-click-node="true"
                  @node-click="treeClick"
                  style="margin:10px 5px;"
                ></el-tree>
              </div>
          </div>
      </div>
      <!-- 点击内容 -->
      <div slot="reference" class="click-content">
        <i class="el-icon-trophy-1"></i>
        <span>18772114025</span>
        <i class="el-icon-arrow-down"></i>
      </div>
    </el-popover>
  </div>
</template>
<script>
import { getComapnyStatisticsListApi } from "@/assets/js/api/company/project";
export default {
  data() {
    return {
      visible: false,
      isUserList: true,
      filterText: "",
      level1CompanyData: [],
      selectTreeProps: {
        children: "children",
        label: "label",
      },
    }
  },
  created() {
    this.loadData();
  },
  mounted() {
  },
  methods: {
    // 树形控件点击
    treeClick(data) {
      console.log(data);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    loadData() {
      let sn = this.$store.state.userInfo.sn;
      let projectType = 1; // 展示项目列表
      if (this.$store.state.userInfo.addProjectType == 1) {
        projectType = 0; // 不展示项目列表
      }
      getComapnyStatisticsListApi({
        sn: sn,
        projectType: projectType,
      }).then((res) => {
        this.level1CompanyData = res.result.companyList
          ? res.result.companyList
          : res.result.projectList;
      });
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
}
</script>
<style lang="less" scoped>
.flexStyle(){
    display: flex;
    align-items: center;
}
.changeBox {
  padding: 0px 10px;
  .title-content{
    .flexStyle();
    >span{
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #000000;
      margin-right: auto;
    }
  }
  .content-list{
    margin-top: 15px;
    &-item{
      .flexStyle();
      padding: 10px 15px;
      border: 1px solid #DADBDB;
      border-radius: 5px;
      cursor: pointer;
      >span:nth-child(2){
        margin: 2px 10px 0px 10px;
      }
      >span:nth-child(3){
        padding:3px 10px;
        color: #79ACFA;
        background-color: #E4F5FF;
        border: 1px solid #99C3FB;
        border-radius: 5px;
        font-size: 10px;
      }
      /deep/.el-icon-arrow-right{
        margin-left: auto;
      }
    }
    &-item:not(:last-child){
      margin-bottom: 10px;
    }
  }
  .tree-group{
    margin-top: 15px;
    background-color: #fff;
    .select-list {
      &-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
.click-content{
  cursor: pointer;
  .flexStyle();
  >span{
    margin: 0px 10px;
  }
}
</style>
<style>
.el-popover {
  box-sizing: content-box !important;
}
</style>