报关清关级别客户名称搜索

src/views/emis/EmisBaseTools/CustomLevelSimplePicker.vue

@@ -0,0 +1,201 @@
+<template>
+  <div :id="createdId">
+    <el-popover
+          trigger="click"
+          ref="popoverRef"
+          effect="light"
+          :show-arrow="false"
+        >
+        <div >
+          <el-table
+              v-loading="loading"
+             ref="comboGridTable"
+             style="width: 100%;"
+             :data="optionItems"
+              @row-click="onRowClick"
+              :row-key="row => row.empCode"
+              stripe
+              :row-style="isRed"
+              element-loading-text="Loading"
+          >
+            <el-table-column :label="$t('客户名称')" align="left" prop="customerName" width="190" />
+            <el-table-column :label="$t('主归属网点')" align="center" prop="ownerSiteName" min-width="100" />
+            <el-table-column :label="$t('月结卡号')" align="left" prop="monthlyPayCode" width="120" />
+          </el-table>
+          <el-pagination
+            v-show="pagination"
+            small
+            :total="total"
+            :page-size="5"
+            layout="prev, pager, next, total"
+            @current-change="changePage"
+          />
+      </div>
+
+      <el-input
+        slot="reference"
+        ref="inputValue"
+        :value="svalue"
+        :placeholder="placeholder"
+        @input="handleInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @clear="onClear"
+        clearable
+       >
+            <template slot="suffix">
+              <!-- <i class="el-icon-arrow-down select-down" :class="visible&&'rotate180'"></i> -->
+              <i slot="suffix" class="el-icon-search"></i>
+            </template>
+      </el-input>
+
+
+    </el-popover>
+
+  </div>
+</template>
+<script>
+import emitter from 'element-ui/src/mixins/emitter';
+import { listMonthUser } from "@/api/emis/emisCustomerUser";
+export default {
+   name: "CustomLevelSimplePicker",
+   mixins: [emitter],
+   props: {
+      value: {
+        type: [String, Number],
+        required: false
+      },
+      isInitiated:{
+        type: [Boolean,String],
+        required: false,
+        default:false
+      },
+      placeholder:{
+          type: String,
+          required: false
+        },
+      disabled:{
+        type: [Boolean,String],
+        required: false
+      },
+      pagination: {
+        type: Boolean, default: true
+      },
+   },
+   data() {
+     return {
+       createdId: '0',
+       loading:false,
+
+       total:0,
+       optionItems: [],
+
+       // 缺省值
+       defaultTotal:0,
+       defaultItems:null,
+
+       sId: null,
+       svalue: this.value,
+
+       isInputing: false,
+
+       queryParams:{
+         pageNum:1,
+         pageSize:5,
+         searchValue:null
+       }
+     };
+   },
+   watch: {
+    value(newVal,oldVal) {
+        this.svalue=this.value;
+
+     },
+   },
+   mounted() {
+    this.createdId = String(new Date().getTime()) // 给个随机id 判断是否clickoutside
+   },
+   created() {
+    if(this.svalue!=null){
+      this.svalue = this.value;
+    }
+   },
+   methods: {
+    onFocus(){
+        // 第一次点击时需要初始化
+        if(!this.defaultItems){
+          this.queryParams.pageNum=1;
+          this.queryData(null,null);
+        }else{
+          this.total = this.defaultTotal;
+          this.optionItems = [...this.defaultItems];
+        }
+        // this.$refs.popoverRef.doShow();
+    },
+    handleInput(val) {
+      if(val == null ) return;
+      this.isInputing = true;
+      this.svalue = val;
+      this.queryParams.pageNum = 1
+      this.queryData(val,null)
+
+    },
+    onRowClick(row, column, event) {
+        this.svalue=row.name;
+
+        this.isInputing = false;
+
+        this.sId=row.id;
+
+        this.$emit("input", this.svalue);
+        this.$emit("onChange",row);
+        this.$refs.popoverRef.doClose();
+     },
+    isRed({ row }) {
+     if (row.id == this.sId) {
+        return {
+          "color": "red",
+          "font-weight": "bold",
+        };
+      }
+    },
+    changePage(cur) {
+      this.queryParams.pageNum = cur
+      this.queryData(this.queryParams.searchValue)
+    },
+    onClear(el){
+      this.svalue = null;
+
+      this.$emit("input", this.svalue);
+      this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
+    },
+    onBlur(el) {
+      this.$emit("input", this.svalue);
+      this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
+    },
+    queryData(val,key) {
+       this.loading = true;
+      this.loading = true;
+      this.queryParams.searchValue = val;
+      this.queryParams.customerName = val;
+
+      listMonthUser(this.queryParams).then(response => {
+         this.loading = false;
+         this.total = response.total;
+         this.optionItems =  response.rows;
+
+          // 初始值存储
+          if(key==null && val==null){
+            this.defaultTotal = this.total+0;
+            this.defaultItems=[...this.optionItems]
+          }
+
+       });
+     },
+
+     getIndex($index) {
+          return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
+    },
+   }
+ };
+</script>

src/views/emis/emisCustomsLevel/levelForm.vue

@@ -4,7 +4,7 @@
           <el-row :gutter="0"  style="display: flex;flex-wrap: wrap;">
           <el-col :span="12">
             <el-form-item label="客户名称" prop="customerName">
-              <el-input v-model="form.customerName" placeholder="" />
+               <CustomLevelSimplePicker v-model="form.customerName"  placeholder="请选择客户名称" @onChange="handleCustomerChange"></CustomLevelSimplePicker>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -66,9 +66,13 @@
 
 <script>
 import { getCustomsLevel, addCustomsLevel, updateCustomsLevel } from "@/api/emis/emisCustomsLevel";
+import CustomLevelSimplePicker from "@/views/emis/EmisBaseTools/CustomLevelSimplePicker.vue";
 
 export default {
   name: "LevelForm",
+  components: {
+    CustomLevelSimplePicker
+  },
   props:{
     id:{
       type:[Number,Array]
@@ -78,7 +82,6 @@ export default {
       required: true
     }
   },
-  components: {},
   dicts: ['emis_customs_level'],
   data() {
     return {
@@ -170,6 +173,9 @@ export default {
           }
         }
       });
+    },
+    handleCustomerChange(val){
+      this.form.customerName=val.customerName;
     }
   }
 };