nsgk_agentcenter_front/src/components/framework/TopDeptChooser.vue

<template>

  <div class="top_main">

    <el-dropdown trigger="click" placement="bottom-start">
      <div class="select_address el-dropdown-link">
        <span class="sanjiao-right"></span>
        <p>{{cityName}}</p>
      </div>
      <el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;">
        <el-dropdown-item v-for="(item,index) in deptOptions" :command="item.orgCode">
          <div class="selected" @click="chooseCity(item.orgCode)">
            <p>{{item.deptName}}</p>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dropdown trigger="click" placement="bottom-start" v-if="!hideTown">
      <div class="select_address el-dropdown-link">
        <span class="sanjiao-right"></span>
        <p>{{townName}}</p>
      </div>
      <el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;">
        <el-dropdown-item v-for="(item,index) in townList" :command="item.orgCode">
          <div class="selected" @click="chooseTown(item.orgCode)">
            <p>{{item.deptName}}</p>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <slot></slot>
  </div>

</template>

<script>
import {cityTree} from "@/api/misc/misc_dept";

export default {
  name: 'TopDeptChooser',
  props: {
    countyCode: String,
    townCode: String,
    rootId: [String, Number],
    allTown: {
      type: Boolean,
      default: false,
    },
    hideTown: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.getDeptTree();
  },
  data() {
    return {
      deptOptions: [],
      icountyCode: this.countyCode || null,
      itownCode: this.townCode || null,
    };
  },
  methods: {
    getDeptTree() {
      cityTree({rootId: this.rootId}).then((resp) => {
        this.deptOptions = resp.data;
        if(this.deptOptions.length)
        {
          this.icountyCode = this.deptOptions[0].orgCode;
          this.emitUpdate(1);
        }
      });
    },
    chooseCity(cmd) {
      this.icountyCode = cmd;
      this.itownCode = null;
      this.emitUpdate(1 | 2);
    },
    chooseTown(cmd) {
      this.itownCode = cmd;
      this.emitUpdate(2);
    },
    emitUpdate(w) {
      if(w & 1)
      {
        this.$emit('update:countyCode', this.icountyCode);
      }
      if((w & 2) && !this.hideTown)
      {
        this.$emit('update:townCode', this.itownCode);
      }
      if(w & 1)
      {
        this.$emit('countyChanged', this.icountyCode, null);
      }
      if((w & 2) && !this.hideTown)
      {
        this.$emit('townChanged', this.itownCode, this.icountyCode);
      }
      if((w & 1) || ((w & 2) && !this.hideTown))
      {
        this.$emit('dataChanged', this.icountyCode, this.itownCode, w);
      }
    },
  },
  watch: {
    rootId(newVal) {
      this.getDeptTree();
    },
    countyCode(newVal) {
      if(this.icountyCode != newVal)
      {
        this.icountyCode = newVal;
        //this.emitUpdate(1);
      }
    },
    townCode(newVal) {
      if(this.itownCode != newVal)
      {
        this.itownCode = newVal;
        //this.emitUpdate(2);
      }
    },
/*    icountyCode(newVal) {
      if(this.countyCode != newVal)
      {
        this.emitUpdate(1);
      }
    },
    itownCode(newVal) {
      if(this.townCode != newVal)
      {
        this.emitUpdate(2);
      }
    },*/
  },
  computed: {
    cityName() {
      if(!this.deptOptions.length)
        return '';
      let dept = this.deptOptions.find((x) => x.orgCode === this.icountyCode);
      return dept ? dept.deptName : '';
    },
    townList() {
      if(!this.deptOptions.length)
        return [];
      let dept = this.deptOptions.find((x) => x.orgCode === this.icountyCode);
      let arr = [];
      if(this.allTown)
        arr.push({orgCode: '', deptName: '全部'});
      arr.push(...(dept ? dept.children || [] : []));
      return arr;
    },
    townName() {
      if(!this.townList.length)
        return '';
      if(this.allTown)
      {
        if(!this.itownCode)
          return '全部';
      }
      let dept = this.townList.find((x) => x.orgCode === this.itownCode);
      return dept ? dept.deptName : '';
    },
  },
}
</script>

<style scoped lang="scss">
.el-dropdown-link {
  cursor: pointer;
}
.selected{
  display: flex;
  height: 4vh;
  p{
    width: 8vw;
    line-height: 4vh;
    text-align: center;
  }
}
p{margin: 0;line-height: 1;}
.top_main{
  display: flex;
  align-items: center;
  position: relative;
  .selected{
    width: 16vw;
    background-color: #ffffff;
    position: absolute;
    top: 4vh;
    left: 10vw;
    z-index: 9;
    border-radius: 8px;
    box-shadow: 0 10px 10px #dedfe1;
    padding: 1vh 0;
    div{
      display: flex;
      height: 4vh;
      p{
        width: 8vw;
        line-height: 4vh;
        text-align: center;
      }
    }
  }
  .select_address{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2vw;
    background-color: #ffffff;
    padding: 0px 0px;
    border-radius: 8px;
    box-shadow: 0 0 10px #dedfe1;
    width: 8vw;
    height: 4vh;
    overflow: hidden;
    &:nth-child(2){
      margin-right: 0vw;
    }
    &:nth-child(3){
      margin-right: 0vw;
      border-top-left-radius: initial;
      border-bottom-left-radius: initial;
    }
    .sanjiao-right {
      display: inline-block;
      border-left: 8px solid #000;
      border-left-color: initial;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      margin-right: 5px;
    }
    .select_time{
      text-align: center;
      width: 100%;
      height: 4vh;
      line-height: 4vh;
      background-color: #3976ff;
      color: #ffffff;
    }
  }
}
</style>