qa-prevention-xgf-app/components/department/department.vue

<template>
  <next-tree
      ref="nextTreeRef"
      check-strictly
      func-mode="radio"
      select-parent
      :if-search="false"
      :tree-data="treeData"
      :is-show-clear="isShowClear"
      theme-color="#3377ff"
      page-height="92vh"
      label-key="DEPARTMENT_NAME"
      value-key="DEPARTMENT_ID"
      children-key="nodes"
      @confirm="fnTreeConfirm"
      @cancel="$emit('update:visible', false)"
  />
</template>

<script>
import {getDepartmentTree} from "@/api";

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    value: {
      type: String,
      default: "",
    },
    isShowClear: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      treeData: []
    }
  },
  async mounted() {
    await this.fnGetData();
    this.$watch("visible", (newVal) => {
      if (newVal) {
        this.$refs.nextTreeRef && this.$refs.nextTreeRef._show();
        this.$refs.nextTreeRef && this.$refs.nextTreeRef.checkedFunc(this.value);
      } else this.$refs.nextTreeRef && this.$refs.nextTreeRef._hide();
    }, {immediate: true})
  },
  methods: {
    fnTreeConfirm(event) {
      this.$emit("confirm", event);
      this.$emit("update:visible", false);
    },
    async fnGetData() {
      const resData = await getDepartmentTree({
        loading: false,
        // postMethod: 'application/json',
        TYPE:'2',
        CORP_ID:this.$store.getters.getUserInfo.CORPINFO_ID,
      });
      this.treeData = resData.tree.tree;
    }
  },
}
</script>

<style scoped lang="scss"></style>