|
|
@@ -7,15 +7,10 @@
|
|
|
: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 || ''"
|
|
|
- >
|
|
|
- <van-field v-if="i.type == 'title'">
|
|
|
+ <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">
|
|
|
{{ i.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>
|
|
|
@@ -104,58 +64,61 @@
|
|
|
is-link
|
|
|
:readonly="true"
|
|
|
:placeholder="i.placeholder ? i.placeholder : '请选择'"
|
|
|
- @click="() => (!formOption.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
|
|
|
- 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,16 @@ watch(
|
|
|
font-size: 14px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
-</style>
|
|
|
+::v-deep {
|
|
|
+ .multipleChoice {
|
|
|
+ margin-bottom: 60px;
|
|
|
+ .van-checkbox {
|
|
|
+ justify-content: center;
|
|
|
+ margin: 10px 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-form {
|
|
|
+ margin-top: 0px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
