md

src/views/emis/EmisBaseTools/EmisSiteMutiSelectPicker.vue

@@ -0,0 +1,188 @@
+<template>
+   <el-select
+      style="width:100%"
+      ref="selectRef"
+      filterable
+      clearable
+      multiple
+      remote
+      :remote-method="queryData"
+      v-model="svalue"
+      :placeholder="placeholder"
+
+      :disabled="disabled"
+      no-data-text=""
+
+      @blur="onBlur"
+      @change="onChange"
+      @click.native="onClick"
+      @visible-change="reverseArrow"
+      >
+        <el-option v-for="item in optionItems" :key="item.siteCode" :label="item.siteName" :value="item.siteCode" ></el-option>
+    </el-select>
+
+
+</template>
+<script>
+  import emitter from 'element-ui/src/mixins/emitter';
+  import { listSimpleEmisSite } from "@/api/emis/emisSite";
+
+  export default {
+    name: "EmisSiteSimplePicker",
+    mixins: [emitter],
+    props: {
+      value: {
+        type: String,
+        required: false
+      },
+      placeholder: {
+        type: String,
+        required: false
+      },
+      countryCode: {
+        type: String,
+        required: false
+      },
+      siteType:{
+        type: [String,Number],
+        required: false
+      },
+      parentSiteCode:{
+        type: [String],
+        required: false,
+        defaultValue:null
+      },
+      blIncludeChildSite:{
+        type: [String,Number],
+        required: false,
+        defaultValue:null
+      },
+      disabled:{
+        type: [Boolean,String],
+        required: false
+      },
+    },
+    data() {
+      return {
+        loading:false,
+
+        // svalue: this.value,
+        svalue: [],
+        optionItems: [],
+        // 缺省值
+        defaultItems: null,
+        itemMap:new Map(),
+
+        queryParams:{
+          pageNum:1,
+          pageSize:10,
+          siteType:this.siteType,
+          countryCode:this.countryCode,
+          siteCode:null,
+          siteName:null,
+          parentSiteCode:this.parentSiteCode,
+          params:{
+            blIncludeChildSite:this.blIncludeChildSite
+          }
+        }
+      };
+    },
+    watch: {
+      value(newVal,oldVal) {
+        // 逻辑 有初始值先查询初值
+        // if(this.value!=null){
+        //   this.svalue=this.value;
+        //   this.queryData(null,this.svalue);
+        // }
+        // this.svalue=this.value;
+        // this.queryData(null,this.svalue);
+      },
+      siteType(newVal, oldVal) {
+        if(newVal!=oldVal){
+          this.queryParams.siteType=newVal
+          this.defaultItems=null;
+        }
+      },
+      countryCode(newVal, oldVal) {
+        if(newVal!=oldVal){
+          this.queryParams.countryCode=newVal
+          this.defaultItems=null;
+        }
+      }
+    },
+    mounted(){
+      let rulesDom = this.$refs["selectRef"].$el.querySelector(".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"); // 找到dom
+      rulesDom.classList.add("el-icon-arrow-up"); // 对dom新增class
+    },
+    created() {
+      if(this.svalue!=null){
+          this.queryData(null,this.svalue);
+      }
+    },
+    methods: {
+      onClick(){
+        // 第一次点击时需要初始化
+        if(!this.defaultItems){
+          this.queryData(null,null);
+        }else{
+          this.optionItems = [...this.defaultItems];
+        }
+      },
+      onChange() {
+        this.$emit("input", this.svalue.join(","));
+        let itemData = this.optionItems.find(item => item.siteCode == this.svalue);
+        this.$emit("onChange",itemData);
+      },
+      onClear(){
+        this.$emit("input", null);
+        this.$emit("onChange",null);
+      },
+      onBlur(val){
+        this.$emit("input", null);
+        this.dispatch('ElFormItem', 'el.form.blur');
+      },
+      queryData(val,key) {
+        this.optionItems=[];
+
+        this.queryParams.siteCode=key;
+        this.queryParams.siteName=val;
+
+        listSimpleEmisSite(this.queryParams).then(response => {
+            this.optionItems=response.rows;
+          // 初始值存储
+          if(key==null && val==null){
+            this.defaultItems=[...this.optionItems]
+          }
+        });
+      },
+      reverseArrow(flag) {
+        let rulesDom = this.$refs["selectRef"].$el.querySelector(
+          ".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"
+        ); // 找到dom
+        if (flag) {
+          rulesDom.classList.add("is-reverse"); // 对dom新增class
+        } else {
+          rulesDom.classList.remove("is-reverse"); // 对dom新增class
+        }
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  // right: 30px;
+  // cursor: pointer;
+ :deep .el-select.remote-select{
+  .el-select__caret::before{
+      content: '\e6e1';
+    }
+  .is-focus{
+    .el-select__caret{
+      transform: rotateZ(0deg);
+    }
+  }
+}
+
+
+
+</style>