1.选择器组件新增关键字筛选功能

2.个贷下单优化

src/components/VanSinglePicker/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
-    <van-field v-model="text" v-bind="$attrs" readonly is-link :name="name" :label="label" @click="show = !show" :rules="rules" :required="required"/>
+    <van-field v-model="text" v-bind="$attrs" readonly is-link :name="name" :label="label" @click="show = !show" :rules="rules" :required="required" />
     <van-popup :show="show" round position="bottom">
-      <van-picker v-model="selectedValues" :columns="columns" :column-field-names="customFieldName" show-toolbar :title="label" @cancel="show = false" @confirm="onConfirm">
+      <van-search v-if="search" v-model="keyWord" placeholder="请输入搜索关键词" />
+      <van-picker v-model="selectedValues" :columns="filterColumns" :column-field-names="customFieldName" show-toolbar :title="label" @cancel="show = false, keyWord = null" @confirm="onConfirm">
         <template #empty>
           <van-empty :image="emptyImage" image-size="80" description="暂无数据" />
         </template>
@@ -24,7 +25,7 @@ export default {
     'van-picker': Picker,
   },
   props: {
-    // 下拉选项
+    // 传入组件的下拉选项原始数组
     columns: {
       type: Array,
       required: true,
@@ -47,15 +48,29 @@ export default {
     // 校验规则
     rules: Array,
     // 是否显示*标
-    required: Boolean
+    required: Boolean,
+    // 是否开启搜索功能
+    search: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
+      // 空状态图片
       emptyImage,
+      // 用于操作的下拉选项数组(如筛选等)
+      filterColumns: [],
+      // 选择的选项
       selectedValues: [],
+      // 组件可见状态
       show: false,
+      // 显示文本
       text: '',
+      // 选择的值
       code: '',
+      // 搜索关键词
+      keyWord: null,
     };
   },
   watch: {
@@ -63,6 +78,7 @@ export default {
       this.reShow();
     },
     columns(newVal) {
+      this.filterColumns = newVal;
       this.reShow();
     },
     code(newVal) {
@@ -71,8 +87,19 @@ export default {
       // 传回change事件
       this.$emit('change', this.code);
     },
+    // 监听搜索关键字的变化
+    keyWord(newVal) {
+      const results = []; 
+      this.columns.forEach((item) => {
+        if (item.text.indexOf(newVal) > -1) {
+          results.push(item);
+        }
+      });
+      this.filterColumns = results;
+    },
   },
   mounted() {
+    this.filterColumns = this.columns;
     nextTick(() => {
       this.reShow();
     });
@@ -80,6 +107,8 @@ export default {
   methods: {
     // 确认选择后触发的方法
     onConfirm({ selectedOptions }) {
+      // 重置关键字
+      this.keyWord = null;
       this.text = selectedOptions[0][this.customFieldName.text];
       this.code = selectedOptions[0][this.customFieldName.value];
       this.show = false;
@@ -89,7 +118,7 @@ export default {
       // 判断传入的modelValue是否为空
       if (this.modelValue) {
         // 不为空正常给值
-        this.columns.forEach((column) => {
+        this.filterColumns.forEach((column) => {
           if (column[this.customFieldName.value] === this.modelValue) {
             this.text = column[this.customFieldName.text];
             // 主要是解决父级修改v-model绑定的值之后,组件中没联动变化

src/views/personal/placeOrder.vue

@@ -48,6 +48,7 @@
             clearable
             :rules="[{ required: true, message: '请选择客户名称' }]"
             :required="true"
+            :search="true"
             v-if="personal.clienteleType === '企业'"
           />
           <VanSinglePicker
@@ -60,6 +61,7 @@
             clearable
             :rules="[{ required: true, message: '请选择业务来源' }]"
             :required="true"
+            :search="true"
             v-if="personal.clienteleType === '企业'"
           />
           <VanSinglePicker
@@ -71,6 +73,7 @@
             clearable
             :rules="[{ required: true, message: '请选择客户联系人' }]"
             :required="true"
+            :search="true"
           />
           <van-field label="中介" v-model="personal.agent" name="agent" placeholder="请输入中介" />
           <van-field label="贷款性质" v-model="personal.loanNature" name="loanNature" placeholder="请输入贷款性质" />