emis-frontend/src/views/emis/EmisBaseTools/EmisSiteSelectTreePicker.vue

<template>
  <div>
    <el-row :gutter="0" type='flex'>
      <el-col :span="24">
        <div>
          <el-form :model="queryParams" ref="queryForm" size="mini"  label-width="68px">
            <el-row :gutter="0">
                <el-col :span="24">
                  <el-form-item label="国家" prop="countryCode">
                    <CountryPicker :placeholder="$t('选择国家')" v-model="queryParams.countryCode" @onChange="initData"></CountryPicker>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                  <el-form-item label="网点类型" prop="siteType">
                    <el-select v-model="siteType" placeholder="网点类型"
                    clearable filterable @change="initData" style="width:100%">
                          <el-option
                            v-for="dict in dict.type.emis_site_type"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          />
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="15">
                  <el-form-item label="上级网点" prop="parentSiteCode" >
                    <div style="display: inline-flex;width:100%;">
                      <div style="width:70px;overflow: hidden;">
                        <el-dropdown style="width:100%;height: 100%;padding-left: 5px;background: #d7d7d7;" @command="handleSelectSiteType">
                            <span class='el-dropdown-link'><span style="font-size:12px;width:30px;overflow:hidden;font-weight: 700;">{{siteTypeName}}</span><i class='el-icon-arrow-down el-icon--right'></i></span>
                            <el-dropdown-menu slot='dropdown'>
                              <el-dropdown-item :key="0" label="" command=""> 全部 </el-dropdown-item>
                                <el-dropdown-item v-for="dict in dict.type.emis_site_type"
                                :key="dict.value"
                                :label="dict.label"
                                :command="dict.value"
                                :class="{'selected':siteType==dict.value}"
                                >{{dict.label}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                      <div style="width:100%" class="siteSelect">
                        <EmisSiteSimplePicker :placeholder="$t('上级网点')"  v-model="queryParams.parentSiteCode" :siteType="siteType" :isInitiated="true" :countryCode="queryParams.countryCode" @onChange="initData"></EmisSiteSimplePicker>
                      </div>
                  </div>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="含下级" prop="blIncludeChildSite" label-width="90px">
                      <el-radio-group size="mini" v-model="queryParams.params.blIncludeChildSite" @change="initData">
                        <el-radio :label="1" style="margin-right: 0px;">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="网点名称" prop="filterName" style="margin-bottom:5px">
                    <el-input
                        v-model="filterName"
                        placeholder="网点名称"
                        clearable
                        size="small"
                        prefix-icon="el-icon-search"
                        style="margin-bottom: 10px"
                        />
                  </el-form-item>
                </el-col>
            </el-row>

          </el-form>
        </div>
        <!-- <div class="head-container">
          <el-radio-group v-model="siteSelectType">
            <el-radio :label="1">按网点层级展示</el-radio>
            <el-radio :label="2">按省市区层级展示</el-radio>
          </el-radio-group>
        </div> -->
        <div style="border: 1px solid #dcdfe6;padding: 5px;" >
          <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-tree
            :loading="loading"
            ref="tree"
            class="filter-tree tree"
            :data="dataTree"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            node-key="siteCode"
            @check-change="handleCheckChange"
            highlight-current
            show-checkbox
            style="max-height:100%;overflow-y: auto"
          >
          <!-- @node-click="handleNodeClick" -->
            <span slot-scope="{ node, data }" class="slot-t-node">
              <template>
                <i
                  v-if="data.children !=null && data.children.length >0 "
                  :class="{
                    'el-icon-folder': !node.expanded,
                    'el-icon-folder-opened': node.expanded,
                  }"
                  style="color: #000;"
                />
                <span v-if="data.children !=null && data.children.length >0 " style="font-weight: bold;">({{ data.siteCode }}){{ data.siteName }}</span>
                <span v-else>({{ data.siteCode }}){{ data.siteName }}</span>

              </template>
            </span>
          </el-tree>
        </div>
        <div style="text-align: center;margin-bottom: 20px;padding-top: 20px;">
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>

      </el-col>
      <!-- <el-col :span="6">
        <div>已选择站点</div>
        <el-input v-model="form.areaSite" type="textarea" rows="15" disabled placeholder="区域站点列表" />
        <div>新增加站点</div>
        <el-input v-model="form.areaSite" type="textarea" rows="15" disabled placeholder="区域站点列表" />
      </el-col> -->
    </el-row>


  </div>

</template>
<script>
  import { listSimpleEmisSite } from "@/api/emis/emisSite";
  import CountryPicker from '@/views/emis/EmisBaseTools/CountryPicker.vue';
  import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';

  export default {
    name: "EmisSiteTreePicker",
    components: {CountryPicker,EmisSiteSimplePicker},
    dicts: ['emis_site_type'],
    props: {
      countryCode:{
        type: [String],
        required: false
      },
      parentSiteCode:{
        type: [String],
        required: false
      },
      selectSiteCode: {
        type: [String],
        required: false
      },
      selectSiteName: {
        type: [String],
        required: false
      },
      isAddSite: {
        type: [Boolean],
        required: false
      },
      placeholder:{
        type: [String],
        required: false
      }
    },
    data() {
      return {
        loading:false,
        checkAll:false,
        isIndeterminate: true,
        siteSelectType:1,
        siteType:null,
        siteTypeName:'全部',
        selectSiteCodeStr:this.selectSiteCode,
        selectSiteNameStr:null,
        svalue: this.value,
        filterName:"",
        dataTree:[],
        checkList:[],
        defaultProps: {
          children: "children",
          label: "siteName"
        },
        queryParams:{
          countryCode:null,
          siteType:null,
          parentSiteCode:this.parentSiteCode,
          status:1,
          params:{
            blIncludeChildSite:null,
          }
        },
      };
    },
    watch: {
      countryCode(newVal, oldVal) {
        this.queryParams.countryCode = this.countryCode;
        this.initData();
      },
      parentSiteCode(newVal, oldVal) {
        this.queryParams.parentSiteCode = this.parentSiteCode;
        this.initData();
      },
      isAddSite(val){
        this.initData();
      },
      selectSiteCode(val){
        this.selectSiteCodeStr=this.selectSiteCode;
      },
      // 根据名称筛选部门树
      filterName(val) {
        this.$refs.tree.filter(val);
      },
    },
    created() {
      // this.queryParams.siteType=2;
      this.siteType=2;
      this.queryParams.params.blIncludeChildSite = 1;
      this.initData();
    },
    methods: {
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return ( data.siteCode.toLowerCase().indexOf(value.toLowerCase()) !== -1 || data.siteName.toLowerCase().indexOf(value.toLowerCase()) !== -1 ) ;
      },

      handleSelectSiteType(siteType){
        const item = this.dict.type.emis_site_type.find((item) => item.value === siteType);
        this.siteType=siteType;
        if(item!=null && item!=undefined){
          this.siteTypeName = item.label.length >2?item.label.substr(0,2):item.label;
        }else{
          this.siteTypeName='全部';
        }
      },
      // 节点单击事件
      handleNodeCheckChange(data) {
      },
      initData() {
        this.loading = true;

        if(this.selectSiteCodeStr!=null){
          this.checkList = this.selectSiteCodeStr.split(',');
        }

        listSimpleEmisSite(this.queryParams).then(response => {

            this.loading = false;
            // 追加节点 过滤已经选中节点
            if(this.isAddSite){
                let filterSite = [];
                response.rows.forEach(item=>{
                    if(!this.checkList.includes(item.siteCode)){
                      filterSite.push(item);
                    }
                });
                this.dataTree = this.handleTree(filterSite,'siteCode','parentSiteCode');
            }
            else{
              this.dataTree = this.handleTree(response.rows,'siteCode','parentSiteCode');
              // this.dataTree = this.handleTree(response.rows,'siteCode','province');
              // 设置选中的key
              if(this.selectSiteCodeStr != null){
                this.$refs.tree.setCheckedKeys(this.checkList);
              }
          }

        });
      },
      handleCheckChange(data, checked, indeterminate) {
        // console.log("通过key获取", this.$refs.tree.getCheckedKeys());

        this.selectSiteNameStr="";
        this.selectSiteCodeStr="";
        let checkNodes = this.$refs.tree.getCheckedNodes();
        checkNodes.forEach(item=>{
          this.selectSiteNameStr = this.selectSiteNameStr+item.siteName+",";
          this.selectSiteCodeStr = this.selectSiteCodeStr+item.siteCode+",";
        });

        this.selectSiteNameStr = this.selectSiteNameStr.substr(0,this.selectSiteNameStr.length-1);
        this.selectSiteCodeStr = this.selectSiteCodeStr.substr(0,this.selectSiteCodeStr.length-1);

        // this.handleNodeCheckChange();

      },
      handleCheckAllChange(val){
        if (this.checkAll) {
            this.$refs.tree.setCheckedNodes(this.dataTree);
            this.checkAll = true;

        } else {
            this.$refs.tree.setCheckedKeys([]);
            this.checkAll = false;
        }
      },
      submitForm(){

        // this.$emit("input", this.selectSiteCodeStr);
        let item ={
          selectSiteCodeStr:this.isAddSite?this.selectSiteCode+","+this.selectSiteCodeStr:this.selectSiteCodeStr,
          selectSiteNameStr:this.isAddSite?this.selectSiteName?(this.selectSiteName+","):""+this.selectSiteNameStr:this.selectSiteNameStr
        }

        this.$emit("on-changed",item);
      },
      cancel(){
        this.$emit("on-cancel");
      }
    }
  };
</script>


<style scoped lang="scss">
.selected{
  color:red;
}





</style>