|
@@ -3,133 +3,137 @@
|
|
|
<van-form @submit="onSubmit" :disabled="formOption.disabled" :readonly="formOption.readonly" :label-width="formOption.labelWidth"
|
|
|
:label-align="formOption.labelAlign || 'top'" :scroll-to-error="formOption.scroll" 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'" style="border-bottom:1px solid #0084ff;width:45%">
|
|
|
- <template #input>
|
|
|
- <div class="_title">
|
|
|
- <div class="line"></div>
|
|
|
- <div> {{ i.title }}</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- <van-field v-if="i.type == 'input'" v-model="formData[i.prop]" :label="i.label" :name="i.prop" :type="i.itemType ? i.itemType : 'text'"
|
|
|
- :placeholder="i.placeholder ? i.placeholder : '请输入'" :clearable="i.clearable ? i.clearable : false"
|
|
|
- :readonly="getFieldReadonly(i)" :rules="getRules(i)" :required="getRequired(i)" :right-icon="i.isNeedRightBtn ? i.rightIcon : ''"
|
|
|
- @click-right-icon="i.isNeedRightBtn ? i.rightIconClick() : () => {}"
|
|
|
- @blur="i.isNeedBlurMethon ? i.blurMethon(formData[i.prop]) : () => {}" @input="
|
|
|
+ <template v-for="(i, index) in formConfig" :key="index">
|
|
|
+ <div :style="i.style || ''" v-if="i.isShow!=undefined ? i.isShow :true">
|
|
|
+ <van-field v-if="i.type == 'title'" style="border-bottom:1px solid #0084ff;width:45%">
|
|
|
+ <template #input>
|
|
|
+ <div class="_title">
|
|
|
+ <div class="line"></div>
|
|
|
+ <div> {{ i.title }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field v-if="i.type == 'input'" v-model="formData[i.prop]" :label="i.label" :name="i.prop" :type="i.itemType ? i.itemType : 'text'"
|
|
|
+ :placeholder="i.placeholder ? i.placeholder : '请输入'" :clearable="i.clearable ? i.clearable : false"
|
|
|
+ :readonly="getFieldReadonly(i)" :rules="getRules(i)" :required="getRequired(i)"
|
|
|
+ :right-icon="i.isNeedRightBtn ? i.rightIcon : ''" @click-right-icon="i.isNeedRightBtn ? i.rightIconClick() : () => {}"
|
|
|
+ @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)">
|
|
|
- <template #input>
|
|
|
- <van-switch v-model="formData[i.prop]" />
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- <!-- 多选checkbox -->
|
|
|
- <van-field v-if="i.type == 'checkbox'" :label="i.label" :name="i.prop" :rules="getRules(i)" :required="getRequired(i)">
|
|
|
- <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>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- <!-- 单选radio -->
|
|
|
- <van-field v-if="i.type == 'radio'" :label="i.label" :name="i.prop" :rules="getRules(i)" :required="getRequired(i)">
|
|
|
- <template #input>
|
|
|
- <van-radio-group v-model="formData[i.prop]" direction="horizontal">
|
|
|
- <van-radio v-for="j in i.data" :key="j.value" :name="j.value || j.id">{{ j.label || j.title }}</van-radio>
|
|
|
- </van-radio-group>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- <!-- 单选 -->
|
|
|
- <van-field v-if="i.type == 'picker' && i.itemType == 'onePicker'" v-show="!i.showStatus" :label="i.label" :name="i.prop"
|
|
|
- v-model="formData[i.prop + 'Name']" is-link :readonly="true" :placeholder="i.placeholder ? i.placeholder : '请选择'"
|
|
|
- @click="() => (formOption.readonly || i.readonly ? '' : (i.showPicker = true))" :rules="getRules(i)" :required="getRequired(i)">
|
|
|
- </van-field>
|
|
|
- <van-popup v-model:show="i.showPicker" round position="bottom" v-if="i.type == 'picker' && i.itemType == 'onePicker'">
|
|
|
- <van-picker :columns="i.data" :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))" />
|
|
|
- </van-popup>
|
|
|
- <!-- 多选 -->
|
|
|
- <van-field v-if="i.type == 'multipleChoice' && i.itemType == 'multiple'" v-show="!i.showStatus" :label="i.label" :name="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)" :required="getRequired(i)">
|
|
|
- </van-field>
|
|
|
- <van-popup v-model:show="i.showPicker" round position="bottom" :style="{ height: '60%' }"
|
|
|
- v-if="i.type == 'multipleChoice' && i.itemType == 'multiple'">
|
|
|
- <div style="padding: 10px; height: calc(100% - 40px)">
|
|
|
- <div style="display: flex; justify-content: space-between">
|
|
|
- <van-button plain type="primary" @click="i.showPicker = false" style="border: none">关闭</van-button>
|
|
|
- <van-button plain type="primary" style="border: none" @click="i.showPicker = false">确定</van-button>
|
|
|
- </div>
|
|
|
- <div style="height: calc(100% - 30px); overflow: auto">
|
|
|
- <van-checkbox-group v-model="formData[i.prop]" @change="changeCheckboxGroup(formData, i.prop, i.data, i.fieldNames)">
|
|
|
- <van-checkbox v-for="item in i.data" :key="item.value" :name="item.value" style="margin-top: 5px">{{ item.text }}</van-checkbox>
|
|
|
+ </van-field>
|
|
|
+ <!-- switch -->
|
|
|
+ <van-field v-if="i.type == 'switch'" :label="i.label" :name="i.prop" :required="getRequired(i)">
|
|
|
+ <template #input>
|
|
|
+ <van-switch v-model="formData[i.prop]" />
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <!-- 多选checkbox -->
|
|
|
+ <van-field v-if="i.type == 'checkbox'" :label="i.label" :name="i.prop" :rules="getRules(i)" :required="getRequired(i)">
|
|
|
+ <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>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <!-- 单选radio -->
|
|
|
+ <van-field v-if="i.type == 'radio'" :label="i.label" :name="i.prop" :rules="getRules(i)" :required="getRequired(i)">
|
|
|
+ <template #input>
|
|
|
+ <van-radio-group v-model="formData[i.prop]" direction="horizontal">
|
|
|
+ <van-radio v-for="j in i.data" :key="j.value" :name="j.value || j.id">{{ j.label || j.title }}</van-radio>
|
|
|
+ </van-radio-group>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <!-- 单选 -->
|
|
|
+ <van-field v-if="i.type == 'picker' && i.itemType == 'onePicker'" v-show="!i.showStatus" :label="i.label" :name="i.prop"
|
|
|
+ v-model="formData[i.prop + 'Name']" is-link :readonly="true" :placeholder="i.placeholder ? i.placeholder : '请选择'"
|
|
|
+ @click="() => (formOption.readonly || i.readonly ? '' : (i.showPicker = true))" :rules="getRules(i)"
|
|
|
+ :required="getRequired(i)">
|
|
|
+ </van-field>
|
|
|
+ <van-popup v-model:show="i.showPicker" round position="bottom" v-if="i.type == 'picker' && i.itemType == 'onePicker'">
|
|
|
+ <van-picker :columns="i.data" :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))" />
|
|
|
+ </van-popup>
|
|
|
+ <!-- 多选 -->
|
|
|
+ <van-field v-if="i.type == 'multipleChoice' && i.itemType == 'multiple'" v-show="!i.showStatus" :label="i.label" :name="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)" :required="getRequired(i)">
|
|
|
+ </van-field>
|
|
|
+ <van-popup v-model:show="i.showPicker" round position="bottom" :style="{ height: '60%' }"
|
|
|
+ v-if="i.type == 'multipleChoice' && i.itemType == 'multiple'">
|
|
|
+ <div style="padding: 10px; height: calc(100% - 40px)">
|
|
|
+ <div style="display: flex; justify-content: space-between">
|
|
|
+ <van-button plain type="primary" @click="i.showPicker = false" style="border: none">关闭</van-button>
|
|
|
+ <van-button plain type="primary" style="border: none" @click="i.showPicker = false">确定</van-button>
|
|
|
+ </div>
|
|
|
+ <div style="height: calc(100% - 30px); overflow: auto">
|
|
|
+ <van-checkbox-group v-model="formData[i.prop]" @change="changeCheckboxGroup(formData, i.prop, i.data, i.fieldNames)">
|
|
|
+ <van-checkbox v-for="item in i.data" :key="item.value" :name="item.value" style="margin-top: 5px">{{ item.text }}</van-checkbox>
|
|
|
+ </van-checkbox-group>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- </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)" :required="getRequired(i)">
|
|
|
- </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" />
|
|
|
- </van-popup>
|
|
|
- <!-- 时间选择器 带时分秒 -->
|
|
|
+ </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)" :required="getRequired(i)">
|
|
|
+ </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" />
|
|
|
+ </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.needDefault ? defaultTimeFn(i, index) : (i.showPicker = true)) : '')"
|
|
|
+ :rules="getRules(i)" :required="getRequired(i)">
|
|
|
+ </van-field>
|
|
|
+ <van-popup v-model:show="i.showPicker" round position="bottom" v-if="i.type == 'picker' && i.itemType == 'datePickerTime'">
|
|
|
+ <van-picker-group :tabs="['日期', '时间']" @confirm="() => datePickerTimeConfirm(i, index)" @cancel="i.showPicker = false">
|
|
|
+ <van-date-picker v-model="datePickerDateArr" :columns-type="i.columnsType" />
|
|
|
+ <van-time-picker v-model="datePickerTimeArr" :columns-type="['hour', 'minute', 'second']" />
|
|
|
+ </van-picker-group>
|
|
|
+ </van-popup>
|
|
|
+ <!-- 级联 城市 -->
|
|
|
+ <van-field v-if="i.type == 'cascader' && i.itemType == 'city'" :label="i.label" :name="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)" :required="getRequired(i)" />
|
|
|
+ <van-popup v-if="i.type == 'cascader' && i.itemType == 'city'" v-model:show="i.showPicker" round position="bottom">
|
|
|
+ <van-cascader v-model="formData[i.prop]" :title="i.title ? i.title : '请选择'" :options="cityOption" @close="i.showPicker = false"
|
|
|
+ @change="(option) => cityOnChange(option, i, index)"
|
|
|
+ @finish="(option) => (i.finishFn ? i.finishFn(option) : () => (i.showPicker = false))" />
|
|
|
+ </van-popup>
|
|
|
+ <!-- 级联 公共 -->
|
|
|
+ <van-field v-if="i.type == 'cascader' && i.itemType == 'common'" :label="i.label" :name="i.prop" v-model="formData[i.prop + 'Name']"
|
|
|
+ is-link :readonly="true" :placeholder="i.placeholder ? i.placeholder : '请选择'" @click="() => getFieldReadonly(i)"
|
|
|
+ :rules="getRules(i)" :required="getRequired(i)" />
|
|
|
+ <van-popup v-if="i.type == 'cascader' && i.itemType == 'common'" v-model:show="i.showPicker" round position="bottom">
|
|
|
+ <van-cascader v-model="formData[i.prop]" :title="i.title ? i.title : '请选择'" :options="i.data"
|
|
|
+ :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))" />
|
|
|
+ </van-popup>
|
|
|
+ <!-- 文件上传 -->
|
|
|
+ <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="10 * 1024 * 1024"
|
|
|
+ @oversize="onOversize" />
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <!-- 插槽 -->
|
|
|
+ <van-field v-if="i.type == 'slot'" :label="i.label" :rules="getRules(i)" :required="getRequired(i)">
|
|
|
+ <template #input>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <slot :name="i.slotName"> {{ i.slotName }}插槽占位符 </slot>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
|
|
|
- <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.needDefault ? defaultTimeFn(i, index) : (i.showPicker = true)) : '')"
|
|
|
- :rules="getRules(i)" :required="getRequired(i)">
|
|
|
- </van-field>
|
|
|
- <van-popup v-model:show="i.showPicker" round position="bottom" v-if="i.type == 'picker' && i.itemType == 'datePickerTime'">
|
|
|
- <van-picker-group :tabs="['日期', '时间']" @confirm="() => datePickerTimeConfirm(i, index)" @cancel="i.showPicker = false">
|
|
|
- <van-date-picker v-model="datePickerDateArr" :columns-type="i.columnsType" />
|
|
|
- <van-time-picker v-model="datePickerTimeArr" :columns-type="['hour', 'minute', 'second']" />
|
|
|
- </van-picker-group>
|
|
|
- </van-popup>
|
|
|
- <!-- 级联 城市 -->
|
|
|
- <van-field v-if="i.type == 'cascader' && i.itemType == 'city'" :label="i.label" :name="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)" :required="getRequired(i)" />
|
|
|
- <van-popup v-if="i.type == 'cascader' && i.itemType == 'city'" v-model:show="i.showPicker" round position="bottom">
|
|
|
- <van-cascader v-model="formData[i.prop]" :title="i.title ? i.title : '请选择'" :options="cityOption" @close="i.showPicker = false"
|
|
|
- @change="(option) => cityOnChange(option, i, index)"
|
|
|
- @finish="(option) => (i.finishFn ? i.finishFn(option) : () => (i.showPicker = false))" />
|
|
|
- </van-popup>
|
|
|
- <!-- 级联 公共 -->
|
|
|
- <van-field v-if="i.type == 'cascader' && i.itemType == 'common'" :label="i.label" :name="i.prop" v-model="formData[i.prop + 'Name']" is-link
|
|
|
- :readonly="true" :placeholder="i.placeholder ? i.placeholder : '请选择'" @click="() => getFieldReadonly(i)" :rules="getRules(i)"
|
|
|
- :required="getRequired(i)" />
|
|
|
- <van-popup v-if="i.type == 'cascader' && i.itemType == 'common'" v-model:show="i.showPicker" round position="bottom">
|
|
|
- <van-cascader v-model="formData[i.prop]" :title="i.title ? i.title : '请选择'" :options="i.data"
|
|
|
- :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))" />
|
|
|
- </van-popup>
|
|
|
- <!-- 文件上传 -->
|
|
|
- <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="10 * 1024 * 1024"
|
|
|
- @oversize="onOversize" />
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- <!-- 插槽 -->
|
|
|
- <van-field v-if="i.type == 'slot'" :label="i.label" :rules="getRules(i)" :required="getRequired(i)">
|
|
|
- <template #input>
|
|
|
- <div style="width: 100%">
|
|
|
- <slot :name="i.slotName"> {{ i.slotName }}插槽占位符 </slot>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- </div>
|
|
|
</van-cell-group>
|
|
|
<!-- 循环业务数据 -->
|
|
|
<template v-if="formData[btnConfigCopy.prop] && formData[btnConfigCopy.prop].length>0">
|
|
@@ -341,7 +345,11 @@ const recursionFn = (arr, val, valueAtt, childrenAtt) => {
|
|
|
}
|
|
|
};
|
|
|
const selectDataEcho = (item, val) => {
|
|
|
- if (item.type === "picker" && item.itemType === "onePicker" && val) {
|
|
|
+ if (
|
|
|
+ item.type === "picker" &&
|
|
|
+ item.itemType === "onePicker" &&
|
|
|
+ (val || val == 0)
|
|
|
+ ) {
|
|
|
const textAtt = item.fieldNames
|
|
|
? item.fieldNames.text
|
|
|
: onePickerFieldNames.text;
|
|
@@ -513,7 +521,9 @@ const formDataInit = () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- formDataShowLabel();
|
|
|
+ setTimeout(() => {
|
|
|
+ formDataShowLabel();
|
|
|
+ }, 1000);
|
|
|
emit("update:modelValue", formData.value);
|
|
|
};
|
|
|
|