Proj_SafePlat_Vue_Sgh5/src/components/deptList.vue

<template>
  <van-overlay :show="overlayloading">
    <div class="wrapper">
      <van-loading color="#0094ff"> 加载中... </van-loading>
    </div>
  </van-overlay>
  <seltopbar
    showtype="deptList"
    @commitSelect="commitSelect"
    @cancelSelect="cancelSelect"
  ></seltopbar>
  <van-search v-model="filterText" show-action placeholder="请输入搜索部门" />
  <div :style="{ height: divHeight + 'px' }" class="divTree">
    <el-tree
      v-if="data.length > 0"
      ref="treeRef"
      :data="data"
      :props="defaultProps"
      :filter-node-method="filterNode"
      node-key="id"
      accordion
      :default-expanded-keys="expandNodes"
      show-checkbox
      @check="handleNodeClick"
    />
  </div>
</template>

<script setup>
import { ref, watch, nextTick, reactive, onMounted } from "vue";
import seltopbar from "@/components/selTopbar.vue";
import { getDeptList } from "@/api/index.js";
// import { ElTree, ElInput } from "element-plus";
// import "element-plus/dist/index.css";
import { DGFilterTrees } from "@/utils/transTreeData.js";

const overlayloading = ref(false);

//列表数据
const data = reactive([]);

const props = defineProps({
  selDept: Array,
});
const emit = defineEmits(["closeFullPicker"]);
// 设置树的高度
const divHeight = ref(0);
//默认展开节点
const expandNodes = ref([]);

// 树
const treeRef = ref();

nextTick(() => {
  divHeight.value = document.documentElement.clientHeight - 46 - 54 - 5;

  //默认展开节点['L01']
  if (props.selDept.length == 0) {
    expandNodes.value = ["L01"];
  } else {
    expandNodes.value = props.selDept.map((item) => item.id);
  }
});

onMounted(() => {
  console.log(props.selDept);
  getDept();
});

// 搜索
const filterText = ref("");
watch(filterText, (val) => {
  treeRef.value.filter(val);
});
const filterNode = (value, data) => {
  if (!value) return true;
  return data.text.includes(value);
};

//树单选
const handleNodeClick = (data) => {
  // console.log(data.parent);
  // if (data.parent) {
  //   showFailToast("不能选择父节点，请重新选择");
  // } else {
  treeRef.value.setCheckedKeys([data.id]);
  // props.selDept.push(data);
  // }
};

const defaultProps = {
  label: "text",
  children: "children",
  id: "id",
  disabled: "parent",
};

function getDept() {
  overlayloading.value = true;
  let param = {};
  getDeptList(param).then((res) => {
    console.log(res);
    if (typeof res === "object" && Array.isArray(res)) {
      let treeData = DGFilterTrees(res);
      console.log("1111111", treeData);
      data.push(treeData[1]);
      nextTick(() => {
        console.log("props.selDept", props.selDept);
        //获取所有的id为默认选中
        treeRef.value.setCheckedNodes(props.selDept);
      });
      overlayloading.value = false;
    } else {
      showFailToast("部门列表获取失败");
      overlayloading.value = false;
    }
  });
}

// 选中的人员
const commitSelect = () => {
  //   console.log("123", treeRef.value.getCheckedNodes());
  const pers = treeRef.value.getCheckedNodes();
  if (pers.length == 0) {
    showFailToast("至少选择一位人员");
  } else {
    props.selDept.length = 0;
    props.selDept.push(...pers);
    emit("closeFullPicker", "ok");
  }
};
const cancelSelect = () => {
  emit("closeFullPicker", "cancel");
};
</script>

<style>
.divTree {
  overflow-y: scroll;
  margin-bottom: 5px;
}

/* 搜索行 */
.van-search--show-action {
  padding-right: 10px;
}
/* 遮罩 */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.van-overlay {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>