fix : 文件表格高度, 组织机构管理

src/views/system/organizationalStructure/index.vue

@@ -0,0 +1,227 @@
+<template>
+
+  <div class="layout">
+    <div class="layout-left" style="width: 40%">
+      <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 accordion
+                     @node-click="handleChange" @node-expand="handleChange">
+              <template #default="{ node, data }">
+                <div class="tree-node">
+                  <div  style="display: flex;align-items: center;padding: 3px 0">
+                    <el-icon v-if="data.type===0">
+                      <House/>
+                    </el-icon>
+                    <el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'">
+                      <FolderOpened/>
+                    </el-icon>
+                    {{ data.organizationalStructureName }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+
+    <div class="layout-right" style="margin-top: 15px;width:65%;margin-left: 0">
+      <depart-component v-if="showDept" v-model:value="deptId"/>
+<!--      <department v-if="selectItem.type===2" :id="selectItem.value"></department>-->
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import {ElNotification} from "element-plus";
+import {getOrganizationStructure} from "@/api/workflow/process-user";
+import DepartComponent from "@/components/organizationalStructure/Department.vue";
+
+const queryType = reactive({
+  chooseName: ""
+});
+const chooseId = ref(0);
+const deptId = ref(0);
+const showDept = 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) => {
+  if(item.type===1){
+    showDept.value=false
+    nextTick(()=>{
+      showDept.value=true
+    })
+    deptId.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: 480px;
+:deep(.tree) {
+  .el-tree-node__content {
+    height: 34px;
+
+    .tree-node {
+      font-size: 18px;
+    }
+  }
+
+  //.el-tree-node {
+  //  .is-leaf + .el-checkbox .el-checkbox__inner {
+  //    display: inline-block;
+  //  }
+  //
+  //  .el-checkbox .el-checkbox__inner {
+  //    display: none;
+  //  }
+  //}
+}
+
+.footer {
+  float: right;
+}
+
+
+.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;
+    }
+  }
+}
+
+
+.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>