form组件 多选框

src/components/testForm/index.vue

@@ -7,14 +7,9 @@
       :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'">
             <template #input>
               <div class="_title">
@@ -35,62 +30,27 @@
             :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]) : () => {}">
           </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>
@@ -106,56 +66,59 @@
             :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 == '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
-            v-if="i.type == 'picker' && i.itemType == 'datePicker'"
+            v-if="i.type == 'multipleChoice' && i.itemType == 'multiple'"
+            v-show="!i.showStatus"
             :label="i.label"
             :name="i.prop"
-            v-model="formData[i.prop]"
+            v-model="formData[i.prop + 'Name']"
             is-link
             :readonly="true"
             :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>
+            </van-checkbox-group>
+          </van-popup>
+          <!-- 时间选择器 -->
+          <van-field
             v-if="i.type == 'picker' && i.itemType == 'datePicker'"
-          >
+            :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 == '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
@@ -168,25 +131,15 @@
             :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
@@ -199,14 +152,8 @@
             :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 : '请选择'"
@@ -214,37 +161,16 @@
               :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>
@@ -254,11 +180,7 @@
         </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
@@ -267,9 +189,7 @@
             @click="handleRemove(index, item)"
             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>
@@ -290,8 +210,7 @@
               (val) => {
                 return i.changeFn ? i.changeFn(index, val) : () => {};
               }
-            "
-          >
+            ">
           </van-field>
           <!-- 单选 -->
           <van-field
@@ -304,22 +223,14 @@
             :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>
@@ -335,65 +246,41 @@
             :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) => 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">
@@ -412,15 +299,7 @@
 
 <script setup>
 import { showLoadingToast, closeToast, showNotify } from "vant";
-import {
-  ref,
-  getCurrentInstance,
-  onMounted,
-  reactive,
-  computed,
-  toRefs,
-  watch,
-} from "vue";
+import { ref, getCurrentInstance, onMounted, reactive, computed, toRefs, watch } from "vue";
 
 const props = defineProps({
   modelValue: {
@@ -520,20 +399,14 @@ 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] : "";
@@ -550,11 +423,7 @@ 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(() => {
@@ -574,10 +443,7 @@ 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(() => {
@@ -589,10 +455,7 @@ 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(() => {
@@ -618,10 +481,7 @@ 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] = [];
@@ -635,10 +495,7 @@ const formDataInit = () => {
       // 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") {
@@ -662,24 +519,12 @@ 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;
       }
     }
@@ -705,23 +550,14 @@ 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;
     }
   }
@@ -745,72 +581,55 @@ 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(" ");
-          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(" ");
+  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 === 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 === 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();
+  });
 };
 // 城市变动事件
 const cityOnChange = (options, item, index) => {
@@ -819,8 +638,7 @@ 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;
@@ -911,17 +729,27 @@ 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();
     }
   }
 );
-
+const changeCheckboxGroup = (form, label, data, fieldNames) => {
+  let text = "";
+  if (form[label] && form[label].length > 0) {
+    form[label].map((item) => {
+      let list = data.filter((itemData) => itemData[fieldNames.value] === item);
+      if (list && list.length > 0) {
+        if (text) {
+          text = text + "," + list[0][fieldNames.text];
+        } else {
+          text = list[0][fieldNames.text];
+        }
+      }
+    });
+  }
+  form[label + "Name"] = text;
+};
 // onMounted(() => {});
 </script>
 
@@ -945,4 +773,13 @@ watch(
   font-size: 14px;
   font-weight: 700;
 }
-</style>
+::v-deep {
+  .multipleChoice {
+    margin-bottom: 60px;
+    .van-checkbox {
+      justify-content: center;
+      margin: 10px 40px;
+    }
+  }
+}
+</style>