From b99018ad43cd0b272800f7efa4444116b03ad75e Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Mon, 20 May 2024 03:06:19 +0800
Subject: [PATCH] md

---
 src/views/emis/EmisBaseTools/PayeePicker.vue  | 91 +++++++++++++++++++
 .../emis/EmisBaseTools/SalemanPicker.vue      | 91 +++++++++++++++++++
 2 files changed, 182 insertions(+)
 create mode 100644 src/views/emis/EmisBaseTools/PayeePicker.vue
 create mode 100644 src/views/emis/EmisBaseTools/SalemanPicker.vue

diff --git a/src/views/emis/EmisBaseTools/PayeePicker.vue b/src/views/emis/EmisBaseTools/PayeePicker.vue
new file mode 100644
index 00000000..81aced83
--- /dev/null
+++ b/src/views/emis/EmisBaseTools/PayeePicker.vue
@@ -0,0 +1,91 @@
+<template>
+   <el-select
+      style="width:100%"
+      ref="selectRef"
+      filterable
+      clearable
+      remote
+      :remote-method="queryData"
+      v-model="svalue"
+      :placeholder="placeholder"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="onFocus"
+      @visible-change="reverseArrow"
+      >
+        <el-option v-for="item in optionItems" :key="item.empName" :label="item.empName" :value="item.empName" ></el-option>
+    </el-select>
+</template>
+<script>
+  import emitter from 'element-ui/src/mixins/emitter';
+  import { getPayeeList} from "@/api/emis/emisStaff";
+
+  export default {
+    name: "PayeePicker",
+    mixins: [emitter],
+    props: {
+      value: {
+        type: [String],
+        required: false
+      },
+      placeholder:{
+        type: [String],
+        required: false
+      }
+    },
+    data() {
+      return {
+        optionItems: [],
+        svalue: this.value,
+      };
+    },
+    watch: {
+      value(newVal) {
+        this.svalue = newVal;
+      },
+    },
+    created() {
+      // this.queryData();
+    },
+    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
+    },
+    methods: {
+      onFocus(){
+        this.queryData();
+      },
+      onBlur(val){
+        this.$emit("input", this.svalue);
+        this.dispatch('ElFormItem', 'el.form.blur');
+      },
+      onChange() {
+        if(this.svalue!=null){
+          this.$emit("input", this.svalue);
+
+          this.$emit("change",this.svalue);
+          this.$emit("onChange",this.svalue);
+          this.dispatch('ElFormItem', 'el.form.change', [this.svalue]);
+        }
+      },
+      queryData(val) {
+        let queryParams = {
+          searchValue:val
+        };
+        getPayeeList(queryParams).then(response => {
+          this.optionItems =response.rows;
+        });
+      },
+      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>
diff --git a/src/views/emis/EmisBaseTools/SalemanPicker.vue b/src/views/emis/EmisBaseTools/SalemanPicker.vue
new file mode 100644
index 00000000..9315edcb
--- /dev/null
+++ b/src/views/emis/EmisBaseTools/SalemanPicker.vue
@@ -0,0 +1,91 @@
+<template>
+   <el-select
+      style="width:100%"
+      ref="selectRef"
+      filterable
+      clearable
+      remote
+      :remote-method="queryData"
+      v-model="svalue"
+      :placeholder="placeholder"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="onFocus"
+      @visible-change="reverseArrow"
+      >
+        <el-option v-for="item in optionItems" :key="item.empName" :label="item.empName" :value="item.empName" ></el-option>
+    </el-select>
+</template>
+<script>
+  import emitter from 'element-ui/src/mixins/emitter';
+  import { getSalemanList} from "@/api/emis/emisStaff";
+
+  export default {
+    name: "SalemanPicker",
+    mixins: [emitter],
+    props: {
+      value: {
+        type: [String],
+        required: false
+      },
+      placeholder:{
+        type: [String],
+        required: false
+      }
+    },
+    data() {
+      return {
+        optionItems: [],
+        svalue: this.value,
+      };
+    },
+    watch: {
+      value(newVal) {
+        this.svalue = newVal;
+      },
+    },
+    created() {
+      // this.queryData();
+    },
+    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
+    },
+    methods: {
+      onFocus(){
+        this.queryData();
+      },
+      onBlur(val){
+        this.$emit("input", this.svalue);
+        this.dispatch('ElFormItem', 'el.form.blur');
+      },
+      onChange() {
+        if(this.svalue!=null){
+          this.$emit("input", this.svalue);
+
+          this.$emit("change",this.svalue);
+          this.$emit("onChange",this.svalue);
+          this.dispatch('ElFormItem', 'el.form.change', [this.svalue]);
+        }
+      },
+      queryData(val) {
+        let queryParams = {
+          searchValue:val
+        };
+        getPayeeList(queryParams).then(response => {
+          this.optionItems =response.rows;
+        });
+      },
+      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>