SAAS-FRONTEND/src/components/SelectDept/index.vue

<template>
<div>
  {{this.$store.state.user.deptName}}
</div>

<!--
  <treeselect
    style="
      width: 180px;
      height: 40px;
      position: relative;
      display: inline-block;
      line-height: 50px;
    "
    v-model="value"
    :options="options"
    :defaultExpandLevel="Infinity"
  />
-->
</template>

<script>
import { userdepttree } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },
  data() {
    return {
      value: null,
      options: [],
      Infinity: 2,
      num: 0,
    };
  },
  watch: {
    // 监听deptId
    value: "currDeptChange",
  },
  created() {
    this.getTreeselect();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect() {
      userdepttree().then((response) => {
        this.options = response.data;
        if (response.data != null && response.data.length > 0) {
          this.value = response.data[0].id;
          this.$store.selectDeptName = response.data[0].label;
          this.$store.selectDeptId = response.data[0].id;
          console.log("this.$store",this.$store)
        }
      });
    },
    currDeptChange(val) {
      if (val) {
        this.$store.selectDeptId = val;
        if (this.num > 0) {
          let path = this.$route.path;
          let visitedViews = this.$store.state.tagsView.visitedViews;
          let stagpath = null;
          const proArr = [];
          for (let i = 0; i < visitedViews.length; i++) {
            let view = visitedViews[i];
            proArr.push(
              this.$store.dispatch("tagsView/delCachedView", view).then(() => {
                const { fullPath } = view;
                if (path === fullPath) {
                  stagpath = view;
                } else {
                  this.$nextTick(() => {
                    this.$router.replace({
                      path: "/redirect" + fullPath,
                    });
                  });
                }
              })
            );
          }
          Promise.all(proArr).then(() => {
            if (stagpath != null) {
              this.$store
                .dispatch("tagsView/delCachedView", stagpath)
                .then(() => {
                  const { fullPath } = stagpath;
                  this.$nextTick(() => {
                    this.$router.replace({
                      path: "/redirect" + fullPath,
                    });
                  });
                });
            }
          });
        }
        this.num = this.num + 1;
      }
    },
  },
};
</script>
<style lang="scss">
.vue-treeselect__control {
  height: 20px;
  line-height: 26px;
  font-size: 12px;
  text-indent: 4px;
}
.vue-treeselect__menu-container {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: visible;
  transition: 0s;
}
.vue-treeselect__menu {
  font-size: 12px;
}
</style>