增加时间选择器

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.prop)"
             :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.prop)">
+          <van-field
+            v-if="i.type == 'switch'"
+            :label="i.label"
+            :name="i.prop"
+            :required="getRequired(i.prop)"
+          >
             <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.prop)" :required="getRequired(i.prop)">
+          <van-field
+            v-if="i.type == 'checkbox'"
+            :label="i.label"
+            :name="i.prop"
+            :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
+          >
             <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.prop)" :required="getRequired(i.prop)">
+          <van-field
+            v-if="i.type == 'radio'"
+            :label="i.label"
+            :name="i.prop"
+            :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
+          >
             <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.prop)"
-            :required="getRequired(i.prop)">
+            :required="getRequired(i.prop)"
+          >
           </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.prop)"
-            :required="getRequired(i.prop)">
+            :required="getRequired(i.prop)"
+          >
           </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,58 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i.prop)"
-            :required="getRequired(i.prop)">
+            :required="getRequired(i.prop)"
+          >
           </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>
+          <!-- 时间选择器 带时分秒 -->
+
+          <van-field
+            v-if="i.type == 'picker' && i.itemType == 'datePickerTime'"
+            :label="i.label"
+            :name="i.prop"
+            v-model="formData[i.prop]"
+            is-link
+            :readonly="true"
+            :placeholder="i.placeholder ? i.placeholder : '请选择'"
+            @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
+            :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
+          >
+          </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-picker-group>
           </van-popup>
           <!-- 级联 城市 -->
           <van-field
@@ -136,15 +251,25 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i.prop)"
-            :required="getRequired(i.prop)" />
-          <van-popup v-if="i.type == 'cascader' && i.itemType == 'city'" v-model:show="i.showPicker" round position="bottom">
+            :required="getRequired(i.prop)"
+          />
+          <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
@@ -157,8 +282,14 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i.prop)"
-            :required="getRequired(i.prop)" />
-          <van-popup v-if="i.type == 'cascader' && i.itemType == 'common'" v-model:show="i.showPicker" round position="bottom">
+            :required="getRequired(i.prop)"
+          />
+          <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 : '请选择'"
@@ -166,16 +297,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.prop)" :required="getRequired(i.prop)">
+          <van-field
+            v-if="i.type == 'slot'"
+            :label="i.label"
+            :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
+          >
             <template #input>
               <div style="width: 100%">
                 <slot :name="i.slotName"> {{ i.slotName }}插槽占位符 </slot>
@@ -185,7 +337,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
@@ -194,7 +350,9 @@
             @click="handleRemove(index, btnConfigCopy)"
             size="mini"
             style="border: none; background: #ecebeb"
-            v-if="formOption.btnConfig !== undefined && formOption.btnConfig.isNeed"
+            v-if="
+              formOption.btnConfig !== undefined && formOption.btnConfig.isNeed
+            "
             >删除</van-button
           >
         </div>
@@ -215,7 +373,8 @@
               (val) => {
                 return i.changeFn ? i.changeFn(index, val) : () => {};
               }
-            ">
+            "
+          >
           </van-field>
           <!-- 单选 -->
           <van-field
@@ -228,14 +387,22 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="handleListItemClick(i, index, sonIndex)"
             :rules="getRules(i.prop)"
-            :required="getRequired(i.prop)">
+            :required="getRequired(i.prop)"
+          >
             <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>
@@ -251,43 +418,71 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="handleListItemClick(i, index, sonIndex)"
             :rules="getRules(i.prop)"
-            :required="getRequired(i.prop)">
+            :required="getRequired(i.prop)"
+          >
           </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'"
+        >
           <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) : onConfirmListPicker(option, item))"
-            />
-            <!-- @confirm="(option) => onConfirmListPicker(option, item)"  -->
+            @confirm="
+              (option) =>
+                item.changeFn
+                  ? item.changeFn(option, item, currentIndex, currentSonIndex)
+                  : onConfirmListPicker(option, item)
+            "
+          />
+          <!-- @confirm="(option) => 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">
@@ -306,7 +501,16 @@
 
 <script setup>
 import { showLoadingToast, closeToast, showNotify } from "vant";
-import { ref, getCurrentInstance, onMounted, reactive, computed, toRefs, watch, defineExpose } from "vue";
+import {
+  ref,
+  getCurrentInstance,
+  onMounted,
+  reactive,
+  computed,
+  toRefs,
+  watch,
+  defineExpose,
+} from "vue";
 
 const props = defineProps({
   modelValue: {
@@ -406,14 +610,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] : "";
@@ -430,7 +640,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(() => {
@@ -450,7 +664,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]
+            );
         }
       }
     }
@@ -462,7 +680,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(() => {
@@ -474,7 +695,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(() => {
@@ -493,11 +717,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]
+        );
       }
     }
   }
@@ -515,7 +745,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] = [];
@@ -525,13 +758,20 @@ 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();
       // formData.value[element.prop] = map[element.type];
       // formData.value[element.prop + "Name"] = map[element.type];
     }
-    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") {
@@ -555,12 +795,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;
       }
     }
@@ -586,14 +838,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;
     }
   }
@@ -616,55 +877,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) => {
@@ -673,7 +951,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;
@@ -764,7 +1043,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();
     }
   }
@@ -785,7 +1069,13 @@ const changeCheckboxGroup = (form, label, data, fieldNames) => {
   }
   form[label + "Name"] = text;
 };
-
+const datePickerDateArr = ref([]);
+const datePickerTimeArr = ref([]);
+const datePickerTimeConfirm = (item, index) => {
+  formData.value[item.prop] =
+    datePickerDateArr.value.join("-") + " " + datePickerTimeArr.value.join(":");
+  formConfig.value[index].showPicker = false;
+};
 defineExpose({
   formDataShowLabelOne,
   formDataListShowLabelOne,

src/views/processApproval/components/SendPurchasePayment.vue

@@ -1,8 +1,214 @@
 <template>
-  <div>a</div>
+  <div class="form">
+    <testForm
+      v-model="formData.data"
+      :formOption="formOption"
+      :formConfig="formConfig"
+      :rules="rules"
+      @onSubmit="onSubmit"
+      ref="formDom"
+    ></testForm>
+  </div>
 </template>
 
 <script setup>
+import { ref, reactive, getCurrentInstance, onMounted } from "vue";
+import { showSuccessToast, showFailToast } from "vant";
+import { useRoute } from "vue-router";
+import testForm from "@/components/testForm/index.vue";
+const proxy = getCurrentInstance().proxy;
+const route = useRoute();
+const formDom = ref(null);
+const formData = reactive({
+  data: {},
+});
+const rules = {
+  warehouseId: [
+    {
+      required: true,
+      message: proxy.t("inventoryCount.inventoryWarehouseCanNotBeEmpty"),
+    },
+  ],
+  productId: [
+    {
+      required: true,
+      message: proxy.t("inventoryCount.goodsNameCanNotBeEmpty"),
+    },
+  ],
+  checkQuantity: [
+    {
+      required: true,
+      message: proxy.t("inventoryCount.inventoryNumberCanNotBeEmpty"),
+    },
+  ],
+};
+const formOption = reactive({
+  readonly: false, //用于控制整个表单是否只读
+  disabled: false,
+  labelAlign: "top",
+  scroll: true,
+  labelWidth: "62pk",
+  submitBtnText: proxy.t("common.submit"),
+  hiddenSubmitBtn: true,
+  btnConfig: {
+    isNeed: true,
+    label: proxy.t("common.details"),
+    prop: "payDetailList",
+    plain: true,
+    listConfig: [
+      {
+        type: "picker",
+        label: proxy.t("inventoryCount.goodsName"),
+        prop: "productId",
+        itemType: "onePicker",
+        showPicker: false,
+        readonly: false,
+        fieldNames: {
+          text: "name",
+          value: "id",
+        },
+        data: [],
+        changeFn: function (option, item, index, currentSonIndex) {
+          formData.data.list[index][item.prop] = option.selectedOptions[0].id;
+          formData.data.list[index][item.prop + "Name"] =
+            option.selectedOptions[0].name;
+          formDom.value.btnConfigCopy.listConfig[
+            currentSonIndex
+          ].showPicker = false;
+          getStokeQuantity();
+        },
+      },
+      {
+        type: "input",
+        itemType: "text",
+        label: proxy.t("inventoryCount.stockNumber"),
+        prop: "quantity",
+        readonly: true,
+      },
+      {
+        type: "input",
+        itemType: "number",
+        label: proxy.t("inventoryCount.inventoryNumber"),
+        prop: "checkQuantity",
+        readonly: false,
+      },
+    ],
+    clickFn: () => {
+      if (formData.data.list && formData.data.list.length > 0) {
+        formData.data.list.push({
+          productId: "",
+          quantity: "",
+          checkQuantity: "",
+        });
+      } else {
+        formData.data.list = [
+          {
+            productId: "",
+            quantity: "",
+            checkQuantity: "",
+          },
+        ];
+      }
+    },
+  },
+});
+const formConfig = reactive([
+  {
+    type: "picker",
+    label: "供应商",
+    prop: "warehouseId",
+    itemType: "onePicker",
+    showPicker: false,
+    readonly: false,
+    fieldNames: {
+      text: "label",
+      value: "value",
+    },
+    data: [],
+    changeFn: function (option, item, index) {
+      formData.data[item.prop] = option.selectedOptions[0].value;
+      formData.data[item.prop + "Name"] = option.selectedOptions[0].label;
+      formConfig[index].showPicker = false;
+      changeSupply(option.selectedOptions[0].value);
+    },
+  },
+  {
+    type: "picker",
+    label: "付款期限",
+    prop: "aa",
+    itemType: "datePickerTime",
+    showPicker: false,
+    readonly: false,
+  },
+]);
+
+const supplierList = ref([]);
+const accountList = ref([]);
+const invoiceType = ref([]);
+const fundsPaymentMethod = ref([]);
+const contractList = ref([]);
+const changeSupply = (val) => {
+  if (val) {
+    proxy.get("/purchase/getListBySupplyId", { supplyId: val }).then((res) => {
+      if (res.data && res.data.length > 0) {
+        contractList.value = res.data.map((item) => {
+          return {
+            value: item.id,
+            label: item.code,
+            amount: item.amount,
+            sumPayMoney: item.sumPayMoney,
+            sumInvoiceMoney: item.sumInvoiceMoney,
+          };
+        });
+      } else {
+        contractList.value = [];
+      }
+    });
+  } else {
+    contractList.value = [];
+  }
+  formData.data.payDetailList = [];
+};
+const getDict = () => {
+  proxy
+    .post("/supplierInfo/page", { pageNum: 1, pageSize: 999 })
+    .then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        supplierList.value = res.data.rows.map((item) => {
+          return {
+            label: item.name,
+            value: item.id,
+          };
+        });
+        formConfig[0].data = supplierList.value;
+      }
+    });
+  proxy
+    .post("/accountManagement/page", { pageNum: 1, pageSize: 999 })
+    .then((res) => {
+      accountList.value = res.data.rows.map((item) => {
+        return {
+          bankName: item.name,
+          accountOpening: item.accountOpening,
+          openingBank: item.openingBank,
+          interbankNumber: item.interbankNumber,
+          label: item.alias,
+          value: item.id,
+        };
+      });
+    });
+  proxy.getDictOne(["invoice_type", "funds_payment_method"]).then((res) => {
+    invoiceType.value = res["invoice_type"].data.map((x) => ({
+      label: x.dictValue,
+      value: x.dictKey,
+    }));
+    fundsPaymentMethod.value = res["funds_payment_method"].data.map((x) => ({
+      label: x.dictValue,
+      value: x.dictKey,
+    }));
+  });
+};
+getDict();
 </script>
 
 <style lang="scss" scoped>