1

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,110 +344,172 @@
         </div>
       </van-cell-group>
       <!-- 循环业务数据 -->
-      <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
-            plain
-            type="primary"
-            @click="handleRemove(index, btnConfigCopy)"
-            size="mini"
-            style="border: none; background: #ecebeb"
-            :disabled="formOption.readonly"
-            v-if="formOption.btnConfig !== undefined && formOption.btnConfig.isNeed"
-            >删除</van-button
+      <van-collapse v-model="listActiaveName">
+        <van-cell-group
+          inset
+          v-for="(item, index) in formData[btnConfigCopy.prop]"
+          :key="index"
+        >
+          <van-collapse-item
+            :title="
+              (btnConfigCopy.listTitle ? btnConfigCopy.listTitle : '明细') +
+              (index + 1)
+            "
+            :name="btnConfigCopy.prop + (index + 1)"
           >
-        </div>
-        <!-- 循环表单数据 -->
-        <div v-for="(i, sonIndex) in btnConfigCopy.listConfig" :key="i.prop">
-          <van-field
-            v-if="i.type == 'input'"
-            v-model="formData[btnConfigCopy.prop][index][i.prop]"
-            :label="i.label"
-            :name="i.prop"
-            :type="i.itemType ? i.itemType : 'text'"
-            :placeholder="i.placeholder ? i.placeholder : '请输入'"
-            :clearable="i.clearable ? i.clearable : false"
-            :readonly="getFieldReadonly(i)"
-            :rules="getRules(i)"
-            :required="getRequired(i)"
-            @change="
-              (val) => {
-                return i.changeFn ? i.changeFn(index, val) : () => {};
-              }
-            ">
-          </van-field>
-          <!-- 单选 -->
-          <van-field
-            v-if="i.type == 'picker' && i.itemType == 'onePicker'"
-            :label="i.label"
-            :name="i.prop"
-            v-model="formData[btnConfigCopy.prop][index][i.prop + 'Name']"
-            is-link
-            :readonly="true"
-            :placeholder="i.placeholder ? i.placeholder : '请选择'"
-            @click="handleListItemClick(i, index, sonIndex)"
-            :rules="getRules(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>
-                </div>
-              </div>
-            </template>
-          </van-field>
-          <!-- 时间选择器 -->
-          <van-field
-            v-if="i.type == 'picker' && i.itemType == 'datePicker'"
-            :label="i.label"
-            :name="i.prop"
-            v-model="formData[btnConfigCopy.prop][index][i.prop]"
-            is-link
-            :readonly="true"
-            :placeholder="i.placeholder ? i.placeholder : '请选择'"
-            @click="handleListItemClick(i, index, sonIndex)"
-            :rules="getRules(i)"
-            :required="getRequired(i)">
-          </van-field>
-        </div>
-      </van-cell-group>
+            <div class="row">
+              <div>{{ btnConfigCopy.listTitle || "明细" }}{{ index + 1 }}</div>
+              <van-button
+                plain
+                type="primary"
+                @click="handleRemove(index, btnConfigCopy)"
+                size="mini"
+                style="border: none; background: #ecebeb"
+                :disabled="formOption.readonly"
+                v-if="
+                  formOption.btnConfig !== undefined &&
+                  formOption.btnConfig.isNeed
+                "
+                >删除</van-button
+              >
+            </div>
+            <!-- 循环表单数据 -->
+            <div
+              v-for="(i, sonIndex) in btnConfigCopy.listConfig"
+              :key="i.prop"
+            >
+              <van-field
+                v-if="i.type == 'input'"
+                v-model="formData[btnConfigCopy.prop][index][i.prop]"
+                :label="i.label"
+                :name="i.prop"
+                :type="i.itemType ? i.itemType : 'text'"
+                :placeholder="i.placeholder ? i.placeholder : '请输入'"
+                :clearable="i.clearable ? i.clearable : false"
+                :readonly="getFieldReadonly(i)"
+                :rules="getRules(i)"
+                :required="getRequired(i)"
+                @change="
+                  (val) => {
+                    return i.changeFn ? i.changeFn(index, val) : () => {};
+                  }
+                "
+              >
+              </van-field>
+              <!-- 单选 -->
+              <van-field
+                v-if="i.type == 'picker' && i.itemType == 'onePicker'"
+                :label="i.label"
+                :name="i.prop"
+                v-model="formData[btnConfigCopy.prop][index][i.prop + 'Name']"
+                is-link
+                :readonly="true"
+                :placeholder="i.placeholder ? i.placeholder : '请选择'"
+                @click="handleListItemClick(i, index, sonIndex)"
+                :rules="getRules(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
+                      >
+                    </div>
+                  </div>
+                </template>
+              </van-field>
+              <!-- 时间选择器 -->
+              <van-field
+                v-if="i.type == 'picker' && i.itemType == 'datePicker'"
+                :label="i.label"
+                :name="i.prop"
+                v-model="formData[btnConfigCopy.prop][index][i.prop]"
+                is-link
+                :readonly="true"
+                :placeholder="i.placeholder ? i.placeholder : '请选择'"
+                @click="handleListItemClick(i, index, sonIndex)"
+                :rules="getRules(i)"
+                :required="getRequired(i)"
+              >
+              </van-field>
+            </div>
+          </van-collapse-item>
+        </van-cell-group>
+      </van-collapse>
       <!-- 单独写个循环，保证弹窗唯一 -->
       <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'"
+        >
           <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 +529,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,
@@ -348,6 +557,7 @@ const props = defineProps({
   },
 });
 const proxy = getCurrentInstance().proxy;
+const listActiaveName = ref([]);
 const { formConfig, formOption, rules } = toRefs(props);
 const formData = computed(() => {
   return proxy.modelValue;
@@ -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,12 +1101,19 @@ 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 validateForm = async () => {

src/views/processApproval/components/WdlyPurchase.vue

@@ -173,7 +173,7 @@ const formOptionTwo = reactive({
     isNeed: false,
     prop: "otherFeeList",
     plain: true,
-    listTitle: "采购明细",
+    listTitle: "其他收费",
     listConfig: [
       {
         type: "input",

src/views/processApproval/processDtl.vue

@@ -19,22 +19,69 @@
       ></component>
     </div>
     <div class="btn-warp" :class="footerMoreType ? 'open-more' : ''">
-      <div class="more-btn" @click="footerMoreType = !footerMoreType">
+      <!-- <div class="more-btn" @click="footerMoreType = !footerMoreType">
         更多 <van-icon name="arrow-up" v-if="!footerMoreType" />
         <van-icon name="arrow-down" v-else />
-      </div>
+      </div> -->
       <div class="foot-btn-warp" v-if="route.query.processType != 20">
-        <div class="agree-btn" @click="handleSubmit(1)">同意</div>
         <div
-          class="next-btn"
+          class="for-btn"
+          v-for="(i, index) in approvalRecordData.buttonInfoList"
+          :key="i.type"
+          v-show="index == 0"
+          @click="handleSubmit(i.type)"
+        >
+          <div>
+            <i class="iconfont" :class="iconObj[i.type]"></i>
+          </div>
+          {{ i.name }}
+        </div>
+        <div class="for-btn" @click="footerMoreType = !footerMoreType">
+          <div>
+            <i class="iconfont icon-icomx_message"></i>
+          </div>
+          审批意见
+        </div>
+        <div
+          class="for-btn"
+          @click="footerMoreBtnType = !footerMoreBtnType"
+          v-if="approvalRecordData.buttonInfoList.length > 1"
+        >
+          <div>
+            <i class="iconfont icon-iconx__caidan1"></i>
+          </div>
+          更多
+        </div>
+        <div
+          class="agree-btn"
           @click="nextFn"
           v-if="componentObj[route.query.flowKey].tabsNum"
         >
           下一步
         </div>
+        <div class="next-btn" @click="handleSubmit(1)">同意</div>
       </div>
     </div>
     <van-action-sheet
+      v-model:show="footerMoreBtnType"
+      title="更多操作"
+      class="more-modal"
+    >
+      <div
+        class="for-btn-more"
+        v-for="(i, index) in approvalRecordData.buttonInfoList"
+        :key="i.type"
+        v-show="index != 0"
+        @click="handleSubmit(i.type)"
+      >
+        <span style="margin-right: 20px">
+          <i class="iconfont" :class="iconObj[i.type]"></i>
+        </span>
+        {{ i.name }}
+      </div>
+      <div style="height: 50px">1</div>
+    </van-action-sheet>
+    <van-action-sheet
       v-model:show="footerMoreType"
       title="审批记录"
       class="more-modal"
@@ -114,6 +161,13 @@ import { showSuccessToast, showFailToast } from "vant";
 const route = useRoute();
 const proxy = getCurrentInstance().proxy;
 // const onClickLeft = () => proxy.$router.push(componentObj.value[route.query.flowKey].backUrl)
+const iconObj = ref({
+  2: "icon-icomx_shanchu",
+  3: "icon-icomx_sent",
+  4: "icon-iconx_tuihfqr",
+  5: "icon-iconm_shanchu",
+});
+let footerMoreBtnType = ref(false);
 const onClickLeft = () => proxy.$router.go(-1);
 const message = ref("");
 const onClickRight = () => {
@@ -181,6 +235,7 @@ let componentObj = ref({
     title: "采购",
     component: WdlyPurchase,
     backUrl: "/main/processApproval",
+    tabsNum: 3,
   },
 });
 
@@ -274,6 +329,11 @@ const getRecords = (_id) => {
         recordList.value = res.data.recordList;
         queryData.data.recordList = res.data.recordList;
         approvalRecordData.value = res.data;
+        //删除type为1的按钮
+        approvalRecordData.value.buttonInfoList =
+          approvalRecordData.value.buttonInfoList.filter(
+            (item) => item.type != 1
+          );
       });
   } else {
     proxy
@@ -328,7 +388,16 @@ onMounted(async () => {
       padding: 5px 10px;
     }
   }
-
+  .for-btn-more {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    display: flex;
+    width: 100vw;
+    font-size: 16px;
+    padding: 0 12px;
+    font-size: 12px;
+  }
   .load-btn-box {
     height: 50px;
     text-align: center;
@@ -343,7 +412,20 @@ onMounted(async () => {
     display: flex;
     width: 100vw;
     font-size: 16px;
-
+    .for-btn {
+      flex: 1;
+      background: #fff;
+      color: #999999;
+      font-size: 12px;
+      text-align: center;
+      height: 50px;
+      line-height: 15px;
+      padding: 10px 0;
+      box-sizing: border-box;
+      i {
+        font-size: 24px;
+      }
+    }
     .agree-btn {
       flex: 1;
       background: #eaf0ff;