lilishop-ui/manager/src/components/lili/department-tree-choose.vue

<template>
  <div>
    <div style="display:flex;">
      <Input
        v-model="departmentTitle"
        readonly
        style="margin-right:10px;"
        :placeholder="placeholder"
        :clearable="clearable"
        @on-clear="clearSelect"
      />
      <Poptip transfer trigger="click" placement="right" title="选择部门" width="250">
        <Button>
          <template #icon><t-icon name="browse" /></template>
          选择部门
        </Button>
        <div slot="content">
          <Input
            v-model="searchKey"
            @on-change="searchDep"
            placeholder="输入部门名搜索"
            clearable
          >
            <template #suffixIcon><t-icon name="search" /></template>
          </Input>
          <div class="dep-tree-bar">
            <Tree
              :data="dataDep"
              @on-select-change="selectTree"
            ></Tree>
            <Spin size="large" fix v-if="depLoading"></Spin>
          </div>
        </div>
      </Poptip>
    </div>
  </div>
</template>

<script>
import {initDepartment, searchDepartment} from "@/api/index";

export default {
  name: "departmentTreeChoose",
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: "点击选择部门"
    }
  },
  data() {
    return {
      depLoading: false, // 加载状态
      departmentTitle: "", // modal标题
      searchKey: "", // 搜索关键词
      dataDep: [], // 部门列表
      cloneDep: [], // 克隆部门列表
      selectDep: [], // 已选部门
      departmentId: [] // 部门id
    };
  },
  methods: {
    // 获取部门数据
    initDepartmentData() {
      initDepartment().then(res => {
        if (res.success) {
          this.dataDep = res.result;

          this.cloneDep = JSON.parse(JSON.stringify(this.dataDep));
        }
      });
    },
    searchDep() {
      // 搜索部门
      if (this.searchKey) {
        this.dataDep = this.cloneDep.filter(item => {
          return item.title.indexOf(this.searchKey) > -1;
        });

      } else {
        this.dataDep = JSON.parse(JSON.stringify(this.cloneDep));
      }
    },
    // 选择回调
    selectTree(v) {
      if (v.length === 0) {
        this.$emit("on-change", null);
        this.departmentId = "";
        this.departmentTitle = "";
        return
      }
      this.departmentId = v[0].id;
      this.departmentTitle = v[0].title;
      let department = {
        departmentId: this.departmentId,
        departmentTitle: this.departmentTitle
      }
      this.$emit("on-change", department);
    },
    // 清除选中方法
    clearSelect() {
      this.departmentId = [];
      this.departmentTitle = "";
      this.initDepartmentData();
      if (this.multiple) {
        this.$emit("on-change", []);
      } else {
        this.$emit("on-change", "");
      }
      this.$emit("on-clear");
    },
    // 设置数据 回显用
    setData(ids, title) {
      this.departmentTitle = title;
      if (this.multiple) {
        this.departmentId = ids;
      } else {
        this.departmentId = [];
        this.departmentId.push(ids);
      }
    }
  },
  created() {
    this.initDepartmentData();
  }
};
</script>

<style lang="scss" scoped>
.dep-tree-bar {
  position: relative;
  min-height: 80px;
  max-height: 500px;
  overflow: auto;
  margin-top: 5px;
}

.dep-tree-bar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dep-tree-bar::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px #d1d1d1;
  background: #e4e4e4;
}

</style>