mosr-web/src/views/system/organizationalStructure/index.vue

<template>
  <div class="organization-layout">
    <div class="layout-left">
      <div class="candidate" v-loading="loading">
        <el-form :model="queryType" @submit.prevent="getList(1)">
          <el-form-item prop="dictName">
            <el-input v-model="queryType.chooseName" @change="getList(1)"
                      clearable placeholder="输入公司或部门名称进行搜索">
              <template #append>
                <el-button @click="getList(1)">搜索</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
        <el-scrollbar>
          <div class="tree scrollbar-dict">
            <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
                     :default-expanded-keys="expandedKeys" lazy
                     @node-click="handleChange" @node-expand="handleChange">
              <template #default="{ node, data }">
                <div class="tree-node">
                  <div style="display: flex;align-items: center;padding: 3px 0">
                    <svg-icon name="oran" v-if="data.type===0" class-name="oran-icon"/>
                    <el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'" style="margin-right: 4px;">
                      <FolderOpened/>
                    </el-icon>
                    {{ data.organizationalStructureName }}
                  </div>
                </div>
              </template>
            </el-tree>
          </div>
        </el-scrollbar>
      </div>
    </div>

    <div class="layout-right">
      <depart-component v-if="showDept" v-model:value="deptId"/>
      <company-detail v-if="showCompany"  v-model:value="companyId"></company-detail>
      <!--      <department v-if="selectItem.type===2" :id="selectItem.value"></department>-->
    </div>
  </div>

</template>

<script setup>
import SvgIcon from '@/components/svgIcon/index.vue'
import {ElNotification} from "element-plus";
import {getOrganizationStructure} from "@/api/workflow/process-user";
import DepartComponent from "@/components/organizationalStructure/Department.vue";
import CompanyDetail from "@/components/organizationalStructure/CompanyDetail.vue";

const queryType = reactive({
  chooseName: ""
});
const chooseId = ref(0);
const deptId = ref(0);
const companyId = ref(0);
const showDept = ref(false);
const showCompany = ref(false);
const organizationStructureType = ref(0);
let selectItem = reactive({
  type: -1,
  value: "0"
});
const loading = ref(false);
const dataList = ref([]);
const tree = ref([]);
const isSearch = ref(false);
const expandedKeys = ref([]);
const defaultProps = {
  value: "value",
  label: "organizationalStructureName",
  children: "children",
  isLeaf: (data) => {
    // if (data.isLeaf) {
    //   return true
    // }
  }
};
const emit = defineEmits();

const _value = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit("input", val);
  }
});

const getList = (flag, type) => {
  let params = {}
  if (flag === 1) {
    isSearch.value = true;
    params = {
      chooseId: 0,
      type: 0,
      chooseName: queryType.chooseName
    }
    selectItem = {
      type: -1,
      value: "0"
    };
  } else {
    params = {
      chooseId: chooseId.value,
      type: organizationStructureType.value,
      chooseName: queryType.chooseName
    }
  }
  getOrganizationStructure(params).then(res => {
    if (selectItem.type === -1) {
      dataList.value = res.data;
    } else if (type === 2) {
      selectItem.children = res.data;
      if (res.data.length === 0) {
        selectItem.isLeaf = true
        //   selectItem.children = [{
        //     type: 2
        //   }
      }
    }
  });
};
const init = () => {
  selectItem = {
    type: -1,
    value: "0"
  };
  dataList.value = [];
  chooseId.value = 0;
  expandedKeys.value = [];
  queryType.chooseName = ""
  getList();
};
const handleChange = (item, data) => {
  console.log('expandedKeys.value',expandedKeys.value)
  if (item.type === 1) {
    showDept.value = false
    showCompany.value = false
    nextTick(() => {
      showDept.value = true
    })
    deptId.value = item.organizationalStructureId
  }else{
    showDept.value = false
    showCompany.value = false
    nextTick(() => {
      showCompany.value = true
    })
    companyId.value=item.organizationalStructureId
  }
  selectItem = item;
  if (isSearch.value) {
    queryType.chooseName = ""
    chooseId.value = item.organizationalStructureId;
    getList('', 2);
    return;
  } else {
    //渲染子节点用户或部门及用户数据
    if (data.expanded) {
      if (expandedKeys.value.indexOf(item.value) === -1) {
        expandedKeys.value.push(item.value);
        organizationStructureType.value = item.type
        chooseId.value = item.organizationalStructureId;
        getList('', 2);
        return;
      }
    }
  }
};
init()

</script>

<style lang="scss" scoped>
$containWidth: 550px;
.organization-layout {
  display: flex;
  justify-content: space-between;

  .layout-left {
    width: $containWidth;
    //border: 1px solid #ebeef5;
    padding: 10px;
    margin-top: 5px;

    .candidate {
      position: absolute;
      display: inline-block;
      width: $containWidth;
      //height: 80%;
      //border: 1px solid #e8e8e8;

      :deep(.el-input) {
        height: 40px;

        .el-input__inner, .el-input-group__append {
          font-size: 16px;
        }
      }

      .scrollbar-dict {
        border: 1px solid #ebeef5;
        //min-height: 30vh;
        //height: 60vh;
        height: calc(100vh - 250px);
        overflow-y: auto;
        overflow-x: hidden;

        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }

        // 滚动条轨道
        &::-webkit-scrollbar-track {
          background: rgb(239, 239, 239);
          border-radius: 2px;
        }

        // 小滑块
        &::-webkit-scrollbar-thumb {
          background: rgba(80, 81, 82, 0.29);
          border-radius: 10px;
        }

        .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
          // 设置颜色
          background-color: rgba(135, 206, 235, 0.2); // 透明度为0.2的skyblue，作者比较喜欢的颜色
          color: #409eff; // 节点的字体颜色
          font-weight: bold; // 字体加粗
        }
      }

    }

  }

  .layout-right {
    flex: 1;
    //width: 70%;
    //border: 1px solid #ebeef5;
    margin-left: 30px;
    padding: 0 10px;
    border: none;
  }
}

:deep(.tree) {
  .el-tree-node__content {
    height: 34px;

    .tree-node {
      font-size: 18px;
    }
  }
}


.el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}

::-webkit-scrollbar {
  float: right;
  width: 4px;
  height: 4px;
  background-color: white;
}

::-webkit-scrollbar-thumb {
  border-radius: 16px;
  background-color: #efefef;
}

</style>