md

src/views/emis/EmisBaseTools/EmisSupplierMultiplePicker.vue

@@ -0,0 +1,157 @@
+<template>
+  <el-select
+  multiple
+  filterable
+  clearable
+  ref="selectRef"
+  remote
+  :remote-method="queryData"
+  :loading="loading"
+  v-model="svalue"
+  :placeholder="placeholder"
+  style="width:100%"
+  @focus="onFocus"
+  @change="onChange"
+   class="mutiSelect"
+  >
+  <!-- collapse-tags -->
+  <div style="padding: 0px 8px 0 20px;width:100%;line-height:34px;display:inline-flex;    border-bottom: 1px solid #e7e7e7;">
+      <div style="width:50%">
+        <span style="font-size: 13px;font-weight: 600;">选择供应商</span>
+      </div>
+      <div style="width:50%;text-align:right">
+        <el-button type="primary" size="mini" style="padding:2px 10px" @click="confirmOk">确定</el-button>
+      </div>
+  </div>
+    <el-option v-for="item in optionItems" :key="item.code" :label="item.name" :value="item.code">
+    </el-option>
+</el-select>
+</template>
+
+<script>
+import { listSimpleEmisSupplier } from "@/api/emis/emisSupplier";
+import emitter from 'element-ui/src/mixins/emitter';
+
+export default {
+name: "EmisSupplierMultiplePicker",
+mixins: [emitter],
+props: {
+  value: {
+    type: [String],
+    required: false
+  },
+  placeholder:{
+    type: [String],
+    required: false
+  },
+},
+data() {
+  return {
+    svalue: [],
+    // 搜索后的数据
+    optionItems:[],
+    itemMap:new Map(),
+    loading: false,
+    queryParams:{
+      pageNum: 1,
+      pageSize: 50,
+      custNo:this.value,
+      custName:null
+    }
+  };
+},
+watch: {
+  value(newVal) {
+  },
+
+},
+created() {
+  if(this.value) {
+    this.svalue = this.value.split(',');
+  }
+  this.queryParams.code=this.value;
+  console.log("xxxx===>xxx1:",this.queryParams)
+  this.queryData(null);
+},
+methods: {
+  confirmOk(){
+
+    let selIdStr="";
+    let selNameStr="";
+
+    if(this.svalue&&this.svalue.length>0){
+      selCodeStr=this.svalue.join(',');
+    }
+
+    selCodeStr = selCodeStr.substring(0,selCodeStr.length-1);
+
+    console.log("===>==1:",selCodeStr);
+
+    this.$emit('input', selCodeStr)
+    this.$emit('onChange',selCodeStr)
+    this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
+
+    this.$refs.selectRef.blur();
+  },
+  onFocus(){
+    this.queryData();
+  },
+  onChange(val) {
+    this.confirmOk()
+  },
+  queryData(queryVal) {
+    this.queryParams.pageNum=1;
+    this.queryParams.custName=queryVal;
+
+    console.log("xxxx===>xxx2:",this.queryParams)
+    listSimpleEmisSupplier(this.queryParams).then(response => {
+      this.optionItems=response.rows
+
+      this.optionItems.forEach(item => {
+        if(!(item.code in this.itemMap)){
+          this.itemMap[item.code]=item;
+        }
+      });
+
+    });
+  },
+}
+};
+</script>
+
+<style lang="scss" scoped>
+.el-s-thead{
+width: 100%;
+color: rgb(177 47 41);
+font-size: 14px;
+font-weight: 600;
+display: inline-flex;
+padding: 10px;
+border-bottom: 1px solid #e6e3e3;
+min-width: 300px;
+}
+
+.el-data{
+width: 100%;
+color: #000;
+font-size: 14px;
+font-weight: 600;
+display: inline-flex;
+padding: 5px;
+border-bottom: 1px solid #e6e3e3;
+}
+
+.el-tag.el-tag--info {
+    background-color: #f4f4f5;
+    border-color: #e9e9eb;
+    color: #000000;
+    font-weight: 600;
+}
+
+.mutiSelect :deep .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
+   	display: none;
+}
+
+
+
+</style>