组件升级

src/components/testForm/index.vue

@@ -7,9 +7,14 @@
       :label-width="formOption.labelWidth"
       :label-align="formOption.labelAlign || 'top'"
       :scroll-to-error="formOption.scroll"
-      ref="testForm">
+      ref="testForm"
+    >
       <van-cell-group inset>
-        <div v-for="(i, index) in formConfig" :key="index" :style="i.style || ''">
+        <div
+          v-for="(i, index) in formConfig"
+          :key="index"
+          :style="i.style || ''"
+        >
           <van-field v-if="i.type == 'title'" style="background: #ecebeb">
             <template #input>
               <div class="_title">
@@ -30,32 +35,69 @@
             :required="getRequired(i)"
             :right-icon="i.isNeedRightBtn ? i.rightIcon : ''"
             @click-right-icon="i.isNeedRightBtn ? i.rightIconClick() : () => {}"
-            @blur="i.isNeedBlurMethon ? i.blurMethon(formData[i.prop]) : () => {}"
+            @blur="
+              i.isNeedBlurMethon ? i.blurMethon(formData[i.prop]) : () => {}
+            "
             @input="
               () => {
                 return i.inputFn ? i.inputFn(formData[i.prop]) : () => {};
               }
-            ">
+            "
+          >
           </van-field>
           <!-- switch -->
-          <van-field v-if="i.type == 'switch'" :label="i.label" :name="i.prop" :required="getRequired(i)">
+          <van-field
+            v-if="i.type == 'switch'"
+            :label="i.label"
+            :name="i.prop"
+            :required="getRequired(i)"
+          >
             <template #input>
               <van-switch v-model="formData[i.prop]" />
             </template>
           </van-field>
           <!-- 多选checkbox -->
-          <van-field v-if="i.type == 'checkbox'" :label="i.label" :name="i.prop" :rules="getRules(i)" :required="getRequired(i)">
+          <van-field
+            v-if="i.type == 'checkbox'"
+            :label="i.label"
+            :name="i.prop"
+            :rules="getRules(i)"
+            :required="getRequired(i)"
+          >
             <template #input>
-              <van-checkbox-group v-model="formData[i.prop]" direction="horizontal">
-                <van-checkbox shape="square" v-for="j in i.data" :key="j.value" :name="j.value">{{ j.text }}</van-checkbox>
+              <van-checkbox-group
+                v-model="formData[i.prop]"
+                direction="horizontal"
+              >
+                <van-checkbox
+                  shape="square"
+                  v-for="j in i.data"
+                  :key="j.value"
+                  :name="j.value"
+                  >{{ j.text }}</van-checkbox
+                >
               </van-checkbox-group>
             </template>
           </van-field>
           <!-- 单选radio -->
-          <van-field v-if="i.type == 'radio'" :label="i.label" :name="i.prop" :rules="getRules(i)" :required="getRequired(i)">
+          <van-field
+            v-if="i.type == 'radio'"
+            :label="i.label"
+            :name="i.prop"
+            :rules="getRules(i)"
+            :required="getRequired(i)"
+          >
             <template #input>
-              <van-radio-group v-model="formData[i.prop]" direction="horizontal">
-                <van-radio v-for="j in i.data" :key="j.value" :name="j.value || j.id">{{ j.label || j.title }}</van-radio>
+              <van-radio-group
+                v-model="formData[i.prop]"
+                direction="horizontal"
+              >
+                <van-radio
+                  v-for="j in i.data"
+                  :key="j.value"
+                  :name="j.value || j.id"
+                  >{{ j.label || j.title }}</van-radio
+                >
               </van-radio-group>
             </template>
           </van-field>
@@ -69,16 +111,33 @@
             is-link
             :readonly="true"
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
-            @click="() => (formOption.readonly || i.readonly ? '' : (i.showPicker = true))"
+            @click="
+              () =>
+                formOption.readonly || i.readonly ? '' : (i.showPicker = true)
+            "
             :rules="getRules(i)"
-            :required="getRequired(i)">
+            :required="getRequired(i)"
+          >
           </van-field>
-          <van-popup v-model:show="i.showPicker" round position="bottom" v-if="i.type == 'picker' && i.itemType == 'onePicker'">
+          <van-popup
+            v-model:show="i.showPicker"
+            round
+            position="bottom"
+            v-if="i.type == 'picker' && i.itemType == 'onePicker'"
+          >
             <van-picker
               :columns="i.data"
-              :columns-field-names="i.fieldNames ? i.fieldNames : onePickerFieldNames"
+              :columns-field-names="
+                i.fieldNames ? i.fieldNames : onePickerFieldNames
+              "
               @cancel="i.showPicker = false"
-              @confirm="(option) => (i.changeFn ? i.changeFn(option, i, index) : onConfirmPicker(option, i, index))" />
+              @confirm="
+                (option) =>
+                  i.changeFn
+                    ? i.changeFn(option, i, index)
+                    : onConfirmPicker(option, i, index)
+              "
+            />
           </van-popup>
           <!-- 多选 -->
           <van-field
@@ -92,16 +151,29 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i)"
-            :required="getRequired(i)">
+            :required="getRequired(i)"
+          >
           </van-field>
           <van-popup
             v-model:show="i.showPicker"
             round
             position="bottom"
             :style="{ height: '40%' }"
-            v-if="i.type == 'multipleChoice' && i.itemType == 'multiple'">
-            <van-checkbox-group v-model="formData[i.prop]" @change="changeCheckboxGroup(formData, i.prop, i.data, i.fieldNames)" class="multipleChoice">
-              <van-checkbox v-for="item in i.data" :key="item.value" :name="item.value">{{ item.text }}</van-checkbox>
+            v-if="i.type == 'multipleChoice' && i.itemType == 'multiple'"
+          >
+            <van-checkbox-group
+              v-model="formData[i.prop]"
+              @change="
+                changeCheckboxGroup(formData, i.prop, i.data, i.fieldNames)
+              "
+              class="multipleChoice"
+            >
+              <van-checkbox
+                v-for="item in i.data"
+                :key="item.value"
+                :name="item.value"
+                >{{ item.text }}</van-checkbox
+              >
             </van-checkbox-group>
           </van-popup>
           <!-- 时间选择器 -->
@@ -115,15 +187,22 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i)"
-            :required="getRequired(i)">
+            :required="getRequired(i)"
+          >
           </van-field>
-          <van-popup v-model:show="i.showPicker" round position="bottom" v-if="i.type == 'picker' && i.itemType == 'datePicker'">
+          <van-popup
+            v-model:show="i.showPicker"
+            round
+            position="bottom"
+            v-if="i.type == 'picker' && i.itemType == 'datePicker'"
+          >
             <van-date-picker
               @confirm="(option) => onConfirmPicker(option, i, index)"
               @cancel="i.showPicker = false"
               :min-date="i.minDate"
               :max-date="i.maxDate"
-              :columns-type="i.columnsType" />
+              :columns-type="i.columnsType"
+            />
           </van-popup>
           <!-- 时间选择器 带时分秒 -->
 
@@ -135,14 +214,37 @@
             is-link
             :readonly="true"
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
-            @click="() => (!formOption.readonly ? (i.needDefault ? defaultTimeFn(i, index) : (i.showPicker = true)) : '')"
+            @click="
+              () =>
+                !formOption.readonly
+                  ? i.needDefault
+                    ? defaultTimeFn(i, index)
+                    : (i.showPicker = true)
+                  : ''
+            "
             :rules="getRules(i)"
-            :required="getRequired(i)">
+            :required="getRequired(i)"
+          >
           </van-field>
-          <van-popup v-model:show="i.showPicker" round position="bottom" v-if="i.type == 'picker' && i.itemType == 'datePickerTime'">
-            <van-picker-group :tabs="['日期', '时间']" @confirm="() => datePickerTimeConfirm(i, index)" @cancel="i.showPicker = false">
-              <van-date-picker v-model="datePickerDateArr" :columns-type="i.columnsType" />
-              <van-time-picker v-model="datePickerTimeArr" :columns-type="['hour', 'minute', 'second']" />
+          <van-popup
+            v-model:show="i.showPicker"
+            round
+            position="bottom"
+            v-if="i.type == 'picker' && i.itemType == 'datePickerTime'"
+          >
+            <van-picker-group
+              :tabs="['日期', '时间']"
+              @confirm="() => datePickerTimeConfirm(i, index)"
+              @cancel="i.showPicker = false"
+            >
+              <van-date-picker
+                v-model="datePickerDateArr"
+                :columns-type="i.columnsType"
+              />
+              <van-time-picker
+                v-model="datePickerTimeArr"
+                :columns-type="['hour', 'minute', 'second']"
+              />
             </van-picker-group>
           </van-popup>
           <!-- 级联 城市 -->
@@ -156,15 +258,25 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i)"
-            :required="getRequired(i)" />
-          <van-popup v-if="i.type == 'cascader' && i.itemType == 'city'" v-model:show="i.showPicker" round position="bottom">
+            :required="getRequired(i)"
+          />
+          <van-popup
+            v-if="i.type == 'cascader' && i.itemType == 'city'"
+            v-model:show="i.showPicker"
+            round
+            position="bottom"
+          >
             <van-cascader
               v-model="formData[i.prop]"
               :title="i.title ? i.title : '请选择'"
               :options="cityOption"
               @close="i.showPicker = false"
               @change="(option) => cityOnChange(option, i, index)"
-              @finish="(option) => (i.finishFn ? i.finishFn(option) : () => (i.showPicker = false))" />
+              @finish="
+                (option) =>
+                  i.finishFn ? i.finishFn(option) : () => (i.showPicker = false)
+              "
+            />
           </van-popup>
           <!-- 级联 公共 -->
           <van-field
@@ -177,8 +289,14 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i)"
-            :required="getRequired(i)" />
-          <van-popup v-if="i.type == 'cascader' && i.itemType == 'common'" v-model:show="i.showPicker" round position="bottom">
+            :required="getRequired(i)"
+          />
+          <van-popup
+            v-if="i.type == 'cascader' && i.itemType == 'common'"
+            v-model:show="i.showPicker"
+            round
+            position="bottom"
+          >
             <van-cascader
               v-model="formData[i.prop]"
               :title="i.title ? i.title : '请选择'"
@@ -186,16 +304,37 @@
               :field-names="i.fieldNames ? i.fieldNames : fieldNames"
               @close="i.showPicker = false"
               @change="(option) => commonOnChange(option, i, index)"
-              @finish="(option) => (i.finishFn ? i.finishFn(i, option) : handleCommonFinish(index))" />
+              @finish="
+                (option) =>
+                  i.finishFn ? i.finishFn(i, option) : handleCommonFinish(index)
+              "
+            />
           </van-popup>
           <!-- 文件上传 -->
-          <van-field name="uploader" v-if="i.type == 'upload'" :label="i.label" :readonly="i.readonly ? true : false">
+          <van-field
+            name="uploader"
+            v-if="i.type == 'upload'"
+            :label="i.label"
+            :readonly="i.readonly ? true : false"
+          >
             <template #input>
-              <van-uploader v-model="formData[i.prop]" :after-read="afterRead" multiple :max-count="9" :max-size="5 * 1024 * 1024" @oversize="onOversize" />
+              <van-uploader
+                v-model="formData[i.prop]"
+                :after-read="afterRead"
+                multiple
+                :max-count="9"
+                :max-size="5 * 1024 * 1024"
+                @oversize="onOversize"
+              />
             </template>
           </van-field>
           <!-- 插槽 -->
-          <van-field v-if="i.type == 'slot'" :label="i.label" :rules="getRules(i)" :required="getRequired(i)">
+          <van-field
+            v-if="i.type == 'slot'"
+            :label="i.label"
+            :rules="getRules(i)"
+            :required="getRequired(i)"
+          >
             <template #input>
               <div style="width: 100%">
                 <slot :name="i.slotName"> {{ i.slotName }}插槽占位符 </slot>
@@ -205,7 +344,11 @@
         </div>
       </van-cell-group>
       <!-- 循环业务数据 -->
-      <van-cell-group inset v-for="(item, index) in formData[btnConfigCopy.prop]" :key="index">
+      <van-cell-group
+        inset
+        v-for="(item, index) in formData[btnConfigCopy.prop]"
+        :key="index"
+      >
         <div class="row">
           <div>{{ btnConfigCopy.listTitle || "明细" }}{{ index + 1 }}</div>
           <van-button
@@ -215,7 +358,9 @@
             size="mini"
             style="border: none; background: #ecebeb"
             :disabled="formOption.readonly"
-            v-if="formOption.btnConfig !== undefined && formOption.btnConfig.isNeed"
+            v-if="
+              formOption.btnConfig !== undefined && formOption.btnConfig.isNeed
+            "
             >删除</van-button
           >
         </div>
@@ -236,7 +381,8 @@
               (val) => {
                 return i.changeFn ? i.changeFn(index, val) : () => {};
               }
-            ">
+            "
+          >
           </van-field>
           <!-- 单选 -->
           <van-field
@@ -249,14 +395,22 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="handleListItemClick(i, index, sonIndex)"
             :rules="getRules(i)"
-            :required="getRequired(i)">
+            :required="getRequired(i)"
+          >
             <template #input v-if="i.isShowScanCode">
               <div style="display: flex; height: 24px">
                 <div style="width: calc(100vw - 100px)">
                   {{ formData[btnConfigCopy.prop][index][i.prop + "Name"] }}
                 </div>
                 <div style="width: 100px; float: right; margin-top: -20px">
-                  <van-button plain type="primary" @click.native.stop="i.scanCode(index)" size="mini" style="border: none">扫码</van-button>
+                  <van-button
+                    plain
+                    type="primary"
+                    @click.native.stop="i.scanCode(index)"
+                    size="mini"
+                    style="border: none"
+                    >扫码</van-button
+                  >
                 </div>
               </div>
             </template>
@@ -272,43 +426,91 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="handleListItemClick(i, index, sonIndex)"
             :rules="getRules(i)"
-            :required="getRequired(i)">
+            :required="getRequired(i)"
+          >
           </van-field>
         </div>
       </van-cell-group>
       <!-- 单独写个循环，保证弹窗唯一 -->
       <div v-for="(item, index) in btnConfigCopy.listConfig" :key="index">
-        <van-popup v-model:show="item.showPicker" round position="bottom" v-if="item.type == 'picker' && item.itemType == 'onePicker'">
+        <van-popup
+          v-model:show="item.showPicker"
+          round
+          position="bottom"
+          v-if="item.type == 'picker' && item.itemType == 'onePicker'"
+        >
+          <div class="searchBox">
+            <van-search
+              v-if="item.isNeedSearch && item.isNeedSearch === true"
+              v-model="item.searchKeyword"
+              show-action
+              label=""
+              placeholder="请输入搜索关键词"
+              @search="onSearchData(item)"
+            >
+              <template #action>
+                <div @click="onSearchData(item)">搜索</div>
+              </template>
+            </van-search>
+          </div>
+
           <van-picker
             :columns="item.data"
-            :columns-field-names="item.fieldNames ? item.fieldNames : onePickerFieldNames"
+            :columns-field-names="
+              item.fieldNames ? item.fieldNames : onePickerFieldNames
+            "
             @cancel="item.showPicker = false"
             @confirm="
-              (option) => (item.changeFn ? item.changeFn(option, item, currentIndex, currentSonIndex, btnConfigCopy.prop) : onConfirmListPicker(option, item))
-            " />
+              (option) =>
+                item.changeFn
+                  ? item.changeFn(
+                      option,
+                      item,
+                      currentIndex,
+                      currentSonIndex,
+                      btnConfigCopy.prop
+                    )
+                  : onConfirmListPicker(option, item)
+            "
+          />
         </van-popup>
-        <van-popup v-model:show="item.showPicker" round position="bottom" v-if="item.type == 'picker' && item.itemType == 'datePicker'">
+        <van-popup
+          v-model:show="item.showPicker"
+          round
+          position="bottom"
+          v-if="item.type == 'picker' && item.itemType == 'datePicker'"
+        >
           <van-date-picker
             @confirm="(option) => onConfirmListPicker(option, item)"
             @cancel="item.showPicker = false"
             :min-date="item.minDate"
             :max-date="item.maxDate"
-            :columns-type="item.columnsType" />
+            :columns-type="item.columnsType"
+          />
         </van-popup>
       </div>
 
       <!-- 按钮 -->
-      <div class="btn-box" v-if="formOption.btnConfig !== undefined && formOption.btnConfig.isNeed">
+      <div
+        class="btn-box"
+        v-if="formOption.btnConfig !== undefined && formOption.btnConfig.isNeed"
+      >
         <van-button
           :plain="btnConfigCopy.plain ? btnConfigCopy.plain : false"
           :type="btnConfigCopy.itemType ? btnConfigCopy.itemType : 'primary'"
           :size="btnConfigCopy.size ? btnConfigCopy.size : 'small'"
           style="width: 100%; border: none"
-          @click="handlePush()">
+          @click="handlePush()"
+        >
           <template #icon>
-            <van-icon :name="btnConfigCopy.icon ? btnConfigCopy.icon : 'plus'" :size="12" />
+            <van-icon
+              :name="btnConfigCopy.icon ? btnConfigCopy.icon : 'plus'"
+              :size="12"
+            />
           </template>
-          {{ btnConfigCopy.btnName ? btnConfigCopy.btnName : "添加" }}</van-button
+          {{
+            btnConfigCopy.btnName ? btnConfigCopy.btnName : "添加"
+          }}</van-button
         >
       </div>
       <div style="margin: 16px" v-show="!formOption.hiddenSubmitBtn">
@@ -328,7 +530,15 @@
 <script setup>
 import { showLoadingToast, closeToast, showNotify } from "vant";
 import { formatDate } from "@/utils/auth";
-import { ref, getCurrentInstance, onMounted, reactive, computed, toRefs, watch } from "vue";
+import {
+  ref,
+  getCurrentInstance,
+  onMounted,
+  reactive,
+  computed,
+  toRefs,
+  watch,
+} from "vue";
 const props = defineProps({
   modelValue: {
     type: Object,
@@ -369,12 +579,22 @@ const handleOtherBtnClick = () => {
 
 // 获取验证规则
 const getRules = (i) => {
-  if (rules.value.hasOwnProperty(i.prop) && rules.value[i.prop] && !getFieldReadonly(i) && !formOption.readonly) {
+  if (
+    rules.value.hasOwnProperty(i.prop) &&
+    rules.value[i.prop] &&
+    !getFieldReadonly(i) &&
+    !formOption.readonly
+  ) {
     return rules.value[i.prop];
   }
 };
 const getRequired = (i) => {
-  if (rules.value.hasOwnProperty(i.prop) && rules.value[i.prop] && !getFieldReadonly(i) && !formOption.readonly) {
+  if (
+    rules.value.hasOwnProperty(i.prop) &&
+    rules.value[i.prop] &&
+    !getFieldReadonly(i) &&
+    !formOption.readonly
+  ) {
     return true;
   }
   return false;
@@ -422,14 +642,20 @@ const recursionFn = (arr, val, valueAtt, childrenAtt) => {
 };
 const selectDataEcho = (item, val) => {
   if (item.type === "picker" && item.itemType === "onePicker") {
-    const textAtt = item.fieldNames ? item.fieldNames.text : onePickerFieldNames.text;
-    const valueAtt = item.fieldNames ? item.fieldNames.value : onePickerFieldNames.value;
+    const textAtt = item.fieldNames
+      ? item.fieldNames.text
+      : onePickerFieldNames.text;
+    const valueAtt = item.fieldNames
+      ? item.fieldNames.value
+      : onePickerFieldNames.value;
     const current = item.data.find((x) => x[valueAtt] === val);
     return current ? current[textAtt] : "";
   } else if (item.type === "cascader" && item.itemType === "common") {
     const textAtt = item.fieldNames ? item.fieldNames.text : fieldNames.text;
     const valueAtt = item.fieldNames ? item.fieldNames.value : fieldNames.value;
-    const childrenAtt = item.fieldNames ? item.fieldNames.children : fieldNames.children;
+    const childrenAtt = item.fieldNames
+      ? item.fieldNames.children
+      : fieldNames.children;
     const arr = item.data ? item.data : [];
     const current = recursionFn(arr, val, valueAtt, childrenAtt);
     return current ? current[textAtt] : "";
@@ -445,7 +671,11 @@ const formDataListShowLabel = () => {
       const jele = btnConfigCopy.listConfig[j];
       if (jele.type === "picker" && jele.itemType !== "datePicker") {
         if (jele.data && jele.data.length > 0) {
-          formData.value[btnConfigCopy.prop][i][jele.prop + "Name"] = selectDataEcho(jele, formData.value[btnConfigCopy.prop][i][jele.prop]);
+          formData.value[btnConfigCopy.prop][i][jele.prop + "Name"] =
+            selectDataEcho(
+              jele,
+              formData.value[btnConfigCopy.prop][i][jele.prop]
+            );
         } else {
           if (callListNum.value <= 3) {
             setTimeout(() => {
@@ -465,7 +695,11 @@ const formDataListShowLabelOne = () => {
       const jele = btnConfigCopy.listConfig[j];
       if (jele.type === "picker" && jele.itemType !== "datePicker") {
         if (jele.data && jele.data.length > 0) {
-          formData.value[btnConfigCopy.prop][i][jele.prop + "Name"] = selectDataEcho(jele, formData.value[btnConfigCopy.prop][i][jele.prop]);
+          formData.value[btnConfigCopy.prop][i][jele.prop + "Name"] =
+            selectDataEcho(
+              jele,
+              formData.value[btnConfigCopy.prop][i][jele.prop]
+            );
         }
       }
     }
@@ -477,7 +711,10 @@ const formDataShowLabel = () => {
     const element = formConfig.value[i];
     if (element.type === "picker" && element.itemType !== "datePicker") {
       if (element.data && element.data.length > 0) {
-        formData.value[element.prop + "Name"] = selectDataEcho(element, formData.value[element.prop]);
+        formData.value[element.prop + "Name"] = selectDataEcho(
+          element,
+          formData.value[element.prop]
+        );
       } else {
         if (callNum.value <= 3) {
           setTimeout(() => {
@@ -489,7 +726,10 @@ const formDataShowLabel = () => {
       }
     } else if (element.type === "cascader" && element.itemType === "common") {
       if (element.data && element.data.length > 0) {
-        formData.value[element.prop + "Name"] = selectDataEcho(element, formData.value[element.prop]);
+        formData.value[element.prop + "Name"] = selectDataEcho(
+          element,
+          formData.value[element.prop]
+        );
       } else {
         if (callNum.value <= 3) {
           setTimeout(() => {
@@ -508,11 +748,17 @@ const formDataShowLabelOne = () => {
     const element = formConfig.value[i];
     if (element.type === "picker" && element.itemType !== "datePicker") {
       if (element.data && element.data.length > 0) {
-        formData.value[element.prop + "Name"] = selectDataEcho(element, formData.value[element.prop]);
+        formData.value[element.prop + "Name"] = selectDataEcho(
+          element,
+          formData.value[element.prop]
+        );
       }
     } else if (element.type === "cascader" && element.itemType === "common") {
       if (element.data && element.data.length > 0) {
-        formData.value[element.prop + "Name"] = selectDataEcho(element, formData.value[element.prop]);
+        formData.value[element.prop + "Name"] = selectDataEcho(
+          element,
+          formData.value[element.prop]
+        );
       }
     }
   }
@@ -530,7 +776,10 @@ const formDataInit = () => {
     upload: [],
   };
   // 判断是否需要按钮
-  if (formOption.value.btnConfig && Object.keys(formOption.value.btnConfig).length > 0) {
+  if (
+    formOption.value.btnConfig &&
+    Object.keys(formOption.value.btnConfig).length > 0
+  ) {
     btnConfigCopy = { ...formOption.value.btnConfig };
     if (formData.value[btnConfigCopy.prop] === undefined) {
       formData.value[btnConfigCopy.prop] = [];
@@ -540,11 +789,18 @@ const formDataInit = () => {
   let cityStatus = true;
   for (let i = 0; i < formConfig.value.length; i++) {
     const element = formConfig.value[i];
-    if (element.type === "cascader" && element.itemType === "city" && cityStatus) {
+    if (
+      element.type === "cascader" &&
+      element.itemType === "city" &&
+      cityStatus
+    ) {
       cityStatus = false;
       cityOptionInit();
     }
-    if (formData.value[element.prop] === undefined || formData.value[element.prop] === "") {
+    if (
+      formData.value[element.prop] === undefined ||
+      formData.value[element.prop] === ""
+    ) {
       if (element.type === "slot") {
         continue;
       } else if (element.type === "picker" || element.type === "cascader") {
@@ -568,12 +824,24 @@ const onConfirmPicker = (option, item, index) => {
   if (option.selectedOptions[0]) {
     switch (item.itemType) {
       case "onePicker": {
-        formData.value[item.prop + "Name"] = option.selectedOptions[0][item.fieldNames.text ? item.fieldNames.text : onePickerFieldNames.text];
-        formData.value[item.prop] = option.selectedOptions[0][item.fieldNames.value ? item.fieldNames.value : onePickerFieldNames.value];
+        formData.value[item.prop + "Name"] =
+          option.selectedOptions[0][
+            item.fieldNames.text
+              ? item.fieldNames.text
+              : onePickerFieldNames.text
+          ];
+        formData.value[item.prop] =
+          option.selectedOptions[0][
+            item.fieldNames.value
+              ? item.fieldNames.value
+              : onePickerFieldNames.value
+          ];
         formConfig.value[index].showPicker = false;
       }
       case "datePicker": {
-        formData.value[item.prop] = option.selectedValues.join(item.split ? item.split : "-");
+        formData.value[item.prop] = option.selectedValues.join(
+          item.split ? item.split : "-"
+        );
         formConfig.value[index].showPicker = false;
       }
     }
@@ -599,14 +867,23 @@ const handleListItemClick = (i, index, sonIndex) => {
 const onConfirmListPicker = (option, item) => {
   switch (item.itemType) {
     case "onePicker": {
-      formData.value[btnConfigCopy.prop][currentIndex.value][item.prop + "Name"] =
-        option.selectedOptions[0][item.fieldNames.text ? item.fieldNames.text : onePickerFieldNames.text];
+      formData.value[btnConfigCopy.prop][currentIndex.value][
+        item.prop + "Name"
+      ] =
+        option.selectedOptions[0][
+          item.fieldNames.text ? item.fieldNames.text : onePickerFieldNames.text
+        ];
       formData.value[btnConfigCopy.prop][currentIndex.value][item.prop] =
-        option.selectedOptions[0][item.fieldNames.value ? item.fieldNames.value : onePickerFieldNames.value];
+        option.selectedOptions[0][
+          item.fieldNames.value
+            ? item.fieldNames.value
+            : onePickerFieldNames.value
+        ];
       btnConfigCopy.listConfig[currentSonIndex.value].showPicker = false;
     }
     case "datePicker": {
-      formData.value[btnConfigCopy.prop][currentIndex.value][item.prop] = option.selectedValues.join(item.split ? item.split : "-");
+      formData.value[btnConfigCopy.prop][currentIndex.value][item.prop] =
+        option.selectedValues.join(item.split ? item.split : "-");
       btnConfigCopy.listConfig[currentSonIndex.value].showPicker = false;
     }
   }
@@ -629,55 +906,72 @@ const handleRemove = (index, item) => {
 // 拉去城市最近数据及处理
 const getAreaInfo = (selectedOptions, item, index) => {
   showLoadingToast("加载中...");
-  proxy.post("/customizeArea/list", { parentId: selectedOptions.value }).then((res) => {
-    let countryIndex = selectedOptions.selectedOptions[0].index;
-    let provinceIndex = selectedOptions.tabIndex === 1 ? selectedOptions.selectedOptions[1].index : null;
-    let cityIndex = selectedOptions.tabIndex === 2 ? selectedOptions.selectedOptions[2].index : null;
-    //已经没有下级数据
-    if (res.data.length === 0) {
-      if (selectedOptions.tabIndex === 1) {
-        formData.value[item.prop + "Name"] = selectedOptions.selectedOptions.map((item) => item.text).join(" ");
+  proxy
+    .post("/customizeArea/list", { parentId: selectedOptions.value })
+    .then((res) => {
+      let countryIndex = selectedOptions.selectedOptions[0].index;
+      let provinceIndex =
+        selectedOptions.tabIndex === 1
+          ? selectedOptions.selectedOptions[1].index
+          : null;
+      let cityIndex =
+        selectedOptions.tabIndex === 2
+          ? selectedOptions.selectedOptions[2].index
+          : null;
+      //已经没有下级数据
+      if (res.data.length === 0) {
+        if (selectedOptions.tabIndex === 1) {
+          formData.value[item.prop + "Name"] = selectedOptions.selectedOptions
+            .map((item) => item.text)
+            .join(" ");
+          formConfig.value[index].showPicker = false;
+          formData.value.cityObj = selectedOptions;
+          return;
+        }
+      }
+      if (selectedOptions.tabIndex === 2) {
+        formData.value[item.prop + "Name"] = selectedOptions.selectedOptions
+          .map((item) => item.text)
+          .join(" ");
         formConfig.value[index].showPicker = false;
         formData.value.cityObj = selectedOptions;
         return;
       }
-    }
-    if (selectedOptions.tabIndex === 2) {
-      formData.value[item.prop + "Name"] = selectedOptions.selectedOptions.map((item) => item.text).join(" ");
-      formConfig.value[index].showPicker = false;
-      formData.value.cityObj = selectedOptions;
-      return;
-    }
-    if (selectedOptions.tabIndex === 0) {
-      cityOption.value[countryIndex].children = res.data.map((item, index) => {
-        return {
-          ...item,
-          index: index,
-          text: item.name,
-          value: item.id,
-        };
-      });
-    } else if (selectedOptions.tabIndex === 1) {
-      cityOption.value[countryIndex].children[provinceIndex].children = res.data.map((item, index) => {
-        return {
-          ...item,
-          index: index,
-          text: item.name,
-          value: item.id,
-        };
-      });
-    } else if (selectedOptions.tabIndex === 2) {
-      cityOption.value[countryIndex].children[provinceIndex].children[cityIndex].children = res.data.map((item, index) => {
-        return {
-          ...item,
-          index: index,
-          text: item.name,
-          value: item.id,
-        };
-      });
-    }
-    closeToast();
-  });
+      if (selectedOptions.tabIndex === 0) {
+        cityOption.value[countryIndex].children = res.data.map(
+          (item, index) => {
+            return {
+              ...item,
+              index: index,
+              text: item.name,
+              value: item.id,
+            };
+          }
+        );
+      } else if (selectedOptions.tabIndex === 1) {
+        cityOption.value[countryIndex].children[provinceIndex].children =
+          res.data.map((item, index) => {
+            return {
+              ...item,
+              index: index,
+              text: item.name,
+              value: item.id,
+            };
+          });
+      } else if (selectedOptions.tabIndex === 2) {
+        cityOption.value[countryIndex].children[provinceIndex].children[
+          cityIndex
+        ].children = res.data.map((item, index) => {
+          return {
+            ...item,
+            index: index,
+            text: item.name,
+            value: item.id,
+          };
+        });
+      }
+      closeToast();
+    });
 };
 // 城市变动事件
 const cityOnChange = (options, item, index) => {
@@ -686,7 +980,8 @@ const cityOnChange = (options, item, index) => {
 
 const commonOnChange = ({ selectedOptions }, item, index) => {
   const textAtt = item.fieldNames ? item.fieldNames.text : fieldNames.text;
-  formData.value[item.prop + "Name"] = selectedOptions[selectedOptions.length - 1][textAtt];
+  formData.value[item.prop + "Name"] =
+    selectedOptions[selectedOptions.length - 1][textAtt];
 };
 const handleCommonFinish = (index) => {
   formConfig.value[index].showPicker = false;
@@ -777,7 +1072,12 @@ watch(
 watch(
   () => formData.value[btnConfigCopy.prop],
   (val) => {
-    if (formOption.value.btnConfig !== undefined && !formOption.value.btnConfig.isNeed && val && val.length > 0) {
+    if (
+      formOption.value.btnConfig !== undefined &&
+      !formOption.value.btnConfig.isNeed &&
+      val &&
+      val.length > 0
+    ) {
       formDataListShowLabel();
     }
   }
@@ -801,14 +1101,24 @@ const changeCheckboxGroup = (form, label, data, fieldNames) => {
 const datePickerDateArr = ref([]);
 const datePickerTimeArr = ref([]);
 const datePickerTimeConfirm = (item, index) => {
-  formData.value[item.prop] = datePickerDateArr.value.join("-") + " " + datePickerTimeArr.value.join(":");
+  formData.value[item.prop] =
+    datePickerDateArr.value.join("-") + " " + datePickerTimeArr.value.join(":");
   formConfig.value[index].showPicker = false;
 };
 const defaultTimeFn = (item, index) => {
-  datePickerDateArr.value = formatDate(new Date(formData.value[item.prop]), "yyyy-MM-dd").split("-");
-  datePickerTimeArr.value = formatDate(new Date(formData.value[item.prop]), "hh:mm:ss").split(":");
+  datePickerDateArr.value = formatDate(
+    new Date(formData.value[item.prop]),
+    "yyyy-MM-dd"
+  ).split("-");
+  datePickerTimeArr.value = formatDate(
+    new Date(formData.value[item.prop]),
+    "hh:mm:ss"
+  ).split(":");
   formConfig.value[index].showPicker = true;
 };
+const onSearchData = (item) => {
+  item.onSearchData(item.searchKeyword);
+};
 const validateForm = async () => {
   try {
     const flag = await testForm.value.validate();
@@ -858,4 +1168,11 @@ defineExpose({
     margin-top: 0px !important;
   }
 }
+::v-deep {
+  .searchBox {
+    .van-field__label--top {
+      width: 20px !important;
+    }
+  }
+}
 </style>

src/views/processApproval/components/Contract.vue

@@ -385,6 +385,11 @@ const formGoodsOption = reactive({
           value: "value",
         },
         data: [],
+        isNeedSearch: true, //是否需要关键字过滤数据
+        searchKeyword: "",
+        onSearchData: (keyword) => {
+          getProductData(keyword);
+        },
         changeFn: (val, data, index, indexTwo, propName) => {
           let selectList = formData.data[propName].filter(
             (item, itemIndex) =>
@@ -809,6 +814,25 @@ const rulesTwo = {
   ],
   remark: [{ required: true, message: proxy.t("contract.remarksMsg") }],
 };
+
+const getProductData = (keyword) => {
+  proxy
+    .post("/productInfo/page", {
+      keyword,
+      definition: "1",
+    })
+    .then((res) => {
+      formGoodsOption.btnConfig.listConfig[0].data = res.data.rows.map(
+        (item) => {
+          return {
+            ...item,
+            label: item.name,
+            value: item.id,
+          };
+        }
+      );
+    });
+};
 const getDict = () => {
   let query = {
     pageNum: 1,
@@ -855,7 +879,7 @@ const getDict = () => {
     proxy
       .post("/productInfo/page", {
         pageNum: 1,
-        pageSize: 99999,
+        pageSize: 10,
         definition: "1",
       })
       .then((res) => {

src/views/processApproval/components/ContractAlteration.vue

@@ -385,6 +385,11 @@ const formGoodsOption = reactive({
           value: "value",
         },
         data: [],
+        isNeedSearch: true, //是否需要关键字过滤数据
+        searchKeyword: "",
+        onSearchData: (keyword) => {
+          getProductData(keyword);
+        },
         changeFn: (val, data, index, indexTwo, propName) => {
           let selectList = formData.data[propName].filter(
             (item, itemIndex) =>
@@ -809,6 +814,26 @@ const rulesTwo = {
   ],
   remark: [{ required: true, message: proxy.t("contract.remarksMsg") }],
 };
+
+const getProductData = (keyword) => {
+  proxy
+    .post("/productInfo/page", {
+      keyword,
+      definition: "1",
+    })
+    .then((res) => {
+      formGoodsOption.btnConfig.listConfig[0].data = res.data.rows.map(
+        (item) => {
+          return {
+            ...item,
+            label: item.name,
+            value: item.id,
+          };
+        }
+      );
+    });
+};
+
 const getDict = () => {
   let query = {
     pageNum: 1,
@@ -851,28 +876,28 @@ const getDict = () => {
       });
     }
   });
-  if (!["10", "20"].includes(route.query.processType)) {
-    proxy
-      .post("/productInfo/page", {
-        pageNum: 1,
-        pageSize: 99999,
-        definition: "1",
-      })
-      .then((res) => {
-        if (res.data.rows && res.data.rows.length > 0) {
-          formGoodsOption.btnConfig.listConfig[0].data = res.data.rows.map(
-            (item) => {
-              return {
-                ...item,
-                label: item.name,
-                value: item.id,
-              };
-            }
-          );
-          formDom2.value.formDataListShowLabelOne();
-        }
-      });
-  }
+  // if (!["10", "20"].includes(route.query.processType)) {
+  //   proxy
+  //     .post("/productInfo/page", {
+  //       pageNum: 1,
+  //       pageSize: 99999,
+  //       definition: "1",
+  //     })
+  //     .then((res) => {
+  //       if (res.data.rows && res.data.rows.length > 0) {
+  //         formGoodsOption.btnConfig.listConfig[0].data = res.data.rows.map(
+  //           (item) => {
+  //             return {
+  //               ...item,
+  //               label: item.name,
+  //               value: item.id,
+  //             };
+  //           }
+  //         );
+  //         formDom2.value.formDataListShowLabelOne();
+  //       }
+  //     });
+  // }
 
   proxy
     .post("/dictTenantData/page", { ...query, dictCode: "account_currency" })
@@ -1208,6 +1233,15 @@ onMounted(() => {
         delete formData.data.id;
         delete formData.data.code;
         formDom2.value.formDataListShowLabelOne();
+        formGoodsOption.btnConfig.listConfig[0].data =
+          formData.data.contractProductList.map((item) => {
+            return {
+              ...item,
+              label: item.productCnName,
+              value: item.productId,
+            };
+          });
+
         if (!formData.data.sellCity) {
           let sellCity = "";
           if (formData.data.sellCountryName) {