|
|
@@ -1,37 +1,22 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <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-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="background: #ecebeb">
|
|
|
+ <van-field v-if="i.type == 'title'" style="border-bottom:1px solid #0084ff;width:45%">
|
|
|
<template #input>
|
|
|
<div class="_title">
|
|
|
- {{ i.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="
|
|
|
+ <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]) : () => {};
|
|
|
}
|
|
|
@@ -60,84 +45,41 @@
|
|
|
</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 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-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 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: '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-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)"
|
|
|
- :required="getRequired(i)">
|
|
|
+ <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-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 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">
|
|
|
@@ -146,52 +88,29 @@
|
|
|
</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-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-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="() => (!formOption.readonly ? (i.showPicker = true) : '')"
|
|
|
- :rules="getRules(i)"
|
|
|
- :required="getRequired(i)" />
|
|
|
+ <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="() => (!formOption.readonly ? (i.showPicker = true) : '')" :rules="getRules(i)" :required="getRequired(i)" />
|
|
|
<van-popup v-if="i.type == 'cascader' && i.itemType == 'common'" v-model:show="i.showPicker" round position="bottom">
|
|
|
- <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-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="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>
|
|
|
<!-- 插槽 -->
|
|
|
@@ -208,48 +127,25 @@
|
|
|
<van-cell-group inset v-for="(item, index) in formData[btnConfigCopy.prop]" :key="index">
|
|
|
<div class="row">
|
|
|
<div>{{ btnConfigCopy.listTitle || "明细" }}{{ index + 1 }}</div>
|
|
|
- <van-button
|
|
|
- plain
|
|
|
- type="primary"
|
|
|
- @click="handleRemove(index, btnConfigCopy)"
|
|
|
- size="mini"
|
|
|
- style="border: none; background: #ecebeb"
|
|
|
- :disabled="formOption.readonly"
|
|
|
- v-if="formOption.btnConfig !== undefined && formOption.btnConfig.isNeed"
|
|
|
- >删除</van-button
|
|
|
- >
|
|
|
+ <van-button plain type="primary" @click="handleRemove(index, btnConfigCopy)" size="mini" style="border: none; background: #ecebeb"
|
|
|
+ :disabled="formOption.readonly" v-if="formOption.btnConfig !== undefined && formOption.btnConfig.isNeed">删除</van-button>
|
|
|
</div>
|
|
|
<!-- 循环表单数据 -->
|
|
|
<div v-for="(i, sonIndex) in btnConfigCopy.listConfig" :key="i.prop">
|
|
|
- <van-field
|
|
|
- v-if="i.type == 'input'"
|
|
|
- v-model="formData[btnConfigCopy.prop][index][i.prop]"
|
|
|
- :label="i.label"
|
|
|
- :name="i.prop"
|
|
|
- :type="i.itemType ? i.itemType : 'text'"
|
|
|
- :placeholder="i.placeholder ? i.placeholder : '请输入'"
|
|
|
- :clearable="i.clearable ? i.clearable : false"
|
|
|
- :readonly="getFieldReadonly(i)"
|
|
|
- :rules="getRules(i)"
|
|
|
- :required="getRequired(i)"
|
|
|
- @change="
|
|
|
+ <van-field v-if="i.type == 'input'" v-model="formData[btnConfigCopy.prop][index][i.prop]" :label="i.label" :name="i.prop"
|
|
|
+ :type="i.itemType ? i.itemType : 'text'" :placeholder="i.placeholder ? i.placeholder : '请输入'"
|
|
|
+ :clearable="i.clearable ? i.clearable : false" :readonly="getFieldReadonly(i)" :rules="getRules(i)" :required="getRequired(i)"
|
|
|
+ @change="
|
|
|
(val) => {
|
|
|
return i.changeFn ? i.changeFn(index, val) : () => {};
|
|
|
}
|
|
|
">
|
|
|
</van-field>
|
|
|
<!-- 单选 -->
|
|
|
- <van-field
|
|
|
- v-if="i.type == 'picker' && i.itemType == 'onePicker'"
|
|
|
- :label="i.label"
|
|
|
- :name="i.prop"
|
|
|
- v-model="formData[btnConfigCopy.prop][index][i.prop + 'Name']"
|
|
|
- is-link
|
|
|
- :readonly="true"
|
|
|
- :placeholder="i.placeholder ? i.placeholder : '请选择'"
|
|
|
- @click="handleListItemClick(i, index, sonIndex)"
|
|
|
- :rules="getRules(i)"
|
|
|
- :required="getRequired(i)">
|
|
|
+ <van-field v-if="i.type == 'picker' && i.itemType == 'onePicker'" :label="i.label" :name="i.prop"
|
|
|
+ v-model="formData[btnConfigCopy.prop][index][i.prop + 'Name']" is-link :readonly="true"
|
|
|
+ :placeholder="i.placeholder ? i.placeholder : '请选择'" @click="handleListItemClick(i, index, sonIndex)" :rules="getRules(i)"
|
|
|
+ :required="getRequired(i)">
|
|
|
<template #input v-if="i.isShowScanCode">
|
|
|
<div style="display: flex; height: 24px">
|
|
|
<div style="width: calc(100vw - 100px)">
|
|
|
@@ -262,54 +158,35 @@
|
|
|
</template>
|
|
|
</van-field>
|
|
|
<!-- 时间选择器 -->
|
|
|
- <van-field
|
|
|
- v-if="i.type == 'picker' && i.itemType == 'datePicker'"
|
|
|
- :label="i.label"
|
|
|
- :name="i.prop"
|
|
|
- v-model="formData[btnConfigCopy.prop][index][i.prop]"
|
|
|
- is-link
|
|
|
- :readonly="true"
|
|
|
- :placeholder="i.placeholder ? i.placeholder : '请选择'"
|
|
|
- @click="handleListItemClick(i, index, sonIndex)"
|
|
|
- :rules="getRules(i)"
|
|
|
- :required="getRequired(i)">
|
|
|
+ <van-field v-if="i.type == 'picker' && i.itemType == 'datePicker'" :label="i.label" :name="i.prop"
|
|
|
+ v-model="formData[btnConfigCopy.prop][index][i.prop]" is-link :readonly="true"
|
|
|
+ :placeholder="i.placeholder ? i.placeholder : '请选择'" @click="handleListItemClick(i, index, sonIndex)" :rules="getRules(i)"
|
|
|
+ :required="getRequired(i)">
|
|
|
</van-field>
|
|
|
</div>
|
|
|
</van-cell-group>
|
|
|
<!-- 单独写个循环，保证弹窗唯一 -->
|
|
|
<div 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-picker
|
|
|
- :columns="item.data"
|
|
|
- :columns-field-names="item.fieldNames ? item.fieldNames : onePickerFieldNames"
|
|
|
- @cancel="item.showPicker = false"
|
|
|
- @confirm="
|
|
|
+ <van-picker :columns="item.data" :columns-field-names="item.fieldNames ? item.fieldNames : onePickerFieldNames"
|
|
|
+ @cancel="item.showPicker = false" @confirm="
|
|
|
(option) => (item.changeFn ? item.changeFn(option, item, currentIndex, currentSonIndex, btnConfigCopy.prop) : onConfirmListPicker(option, item))
|
|
|
" />
|
|
|
</van-popup>
|
|
|
<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" />
|
|
|
+ <van-date-picker @confirm="(option) => onConfirmListPicker(option, item)" @cancel="item.showPicker = false" :min-date="item.minDate"
|
|
|
+ :max-date="item.maxDate" :columns-type="item.columnsType" />
|
|
|
</van-popup>
|
|
|
</div>
|
|
|
|
|
|
<!-- 按钮 -->
|
|
|
<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()">
|
|
|
+ <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()">
|
|
|
<template #icon>
|
|
|
<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">
|
|
|
<van-button round block type="primary" native-type="submit">
|
|
|
@@ -328,7 +205,15 @@
|
|
|
<script setup>
|
|
|
import { showLoadingToast, closeToast, showNotify } from "vant";
|
|
|
import { formatDate } from "@/utils/auth";
|
|
|
-import { ref, getCurrentInstance, onMounted, reactive, computed, toRefs, watch } from "vue";
|
|
|
+import {
|
|
|
+ ref,
|
|
|
+ getCurrentInstance,
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ computed,
|
|
|
+ toRefs,
|
|
|
+ watch,
|
|
|
+} from "vue";
|
|
|
const props = defineProps({
|
|
|
modelValue: {
|
|
|
type: Object,
|
|
|
@@ -369,12 +254,22 @@ const handleOtherBtnClick = () => {
|
|
|
|
|
|
// 获取验证规则
|
|
|
const getRules = (i) => {
|
|
|
- if (rules.value.hasOwnProperty(i.prop) && rules.value[i.prop] && !getFieldReadonly(i) && !formOption.readonly) {
|
|
|
+ if (
|
|
|
+ rules.value.hasOwnProperty(i.prop) &&
|
|
|
+ rules.value[i.prop] &&
|
|
|
+ !getFieldReadonly(i) &&
|
|
|
+ !formOption.readonly
|
|
|
+ ) {
|
|
|
return rules.value[i.prop];
|
|
|
}
|
|
|
};
|
|
|
const getRequired = (i) => {
|
|
|
- if (rules.value.hasOwnProperty(i.prop) && rules.value[i.prop] && !getFieldReadonly(i) && !formOption.readonly) {
|
|
|
+ if (
|
|
|
+ rules.value.hasOwnProperty(i.prop) &&
|
|
|
+ rules.value[i.prop] &&
|
|
|
+ !getFieldReadonly(i) &&
|
|
|
+ !formOption.readonly
|
|
|
+ ) {
|
|
|
return true;
|
|
|
}
|
|
|
return false;
|
|
|
@@ -422,14 +317,20 @@ const recursionFn = (arr, val, valueAtt, childrenAtt) => {
|
|
|
};
|
|
|
const selectDataEcho = (item, val) => {
|
|
|
if (item.type === "picker" && item.itemType === "onePicker") {
|
|
|
- const textAtt = item.fieldNames ? item.fieldNames.text : onePickerFieldNames.text;
|
|
|
- const valueAtt = item.fieldNames ? item.fieldNames.value : onePickerFieldNames.value;
|
|
|
+ const textAtt = item.fieldNames
|
|
|
+ ? item.fieldNames.text
|
|
|
+ : onePickerFieldNames.text;
|
|
|
+ const valueAtt = item.fieldNames
|
|
|
+ ? item.fieldNames.value
|
|
|
+ : onePickerFieldNames.value;
|
|
|
const current = item.data.find((x) => x[valueAtt] === val);
|
|
|
return current ? current[textAtt] : "";
|
|
|
} else if (item.type === "cascader" && item.itemType === "common") {
|
|
|
const textAtt = item.fieldNames ? item.fieldNames.text : fieldNames.text;
|
|
|
const valueAtt = item.fieldNames ? item.fieldNames.value : fieldNames.value;
|
|
|
- const childrenAtt = item.fieldNames ? item.fieldNames.children : fieldNames.children;
|
|
|
+ const childrenAtt = item.fieldNames
|
|
|
+ ? item.fieldNames.children
|
|
|
+ : fieldNames.children;
|
|
|
const arr = item.data ? item.data : [];
|
|
|
const current = recursionFn(arr, val, valueAtt, childrenAtt);
|
|
|
return current ? current[textAtt] : "";
|
|
|
@@ -445,7 +346,11 @@ const formDataListShowLabel = () => {
|
|
|
const jele = btnConfigCopy.listConfig[j];
|
|
|
if (jele.type === "picker" && jele.itemType !== "datePicker") {
|
|
|
if (jele.data && jele.data.length > 0) {
|
|
|
- formData.value[btnConfigCopy.prop][i][jele.prop + "Name"] = selectDataEcho(jele, formData.value[btnConfigCopy.prop][i][jele.prop]);
|
|
|
+ formData.value[btnConfigCopy.prop][i][jele.prop + "Name"] =
|
|
|
+ selectDataEcho(
|
|
|
+ jele,
|
|
|
+ formData.value[btnConfigCopy.prop][i][jele.prop]
|
|
|
+ );
|
|
|
} else {
|
|
|
if (callListNum.value <= 3) {
|
|
|
setTimeout(() => {
|
|
|
@@ -465,7 +370,11 @@ const formDataListShowLabelOne = () => {
|
|
|
const jele = btnConfigCopy.listConfig[j];
|
|
|
if (jele.type === "picker" && jele.itemType !== "datePicker") {
|
|
|
if (jele.data && jele.data.length > 0) {
|
|
|
- formData.value[btnConfigCopy.prop][i][jele.prop + "Name"] = selectDataEcho(jele, formData.value[btnConfigCopy.prop][i][jele.prop]);
|
|
|
+ formData.value[btnConfigCopy.prop][i][jele.prop + "Name"] =
|
|
|
+ selectDataEcho(
|
|
|
+ jele,
|
|
|
+ formData.value[btnConfigCopy.prop][i][jele.prop]
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -477,7 +386,10 @@ const formDataShowLabel = () => {
|
|
|
const element = formConfig.value[i];
|
|
|
if (element.type === "picker" && element.itemType !== "datePicker") {
|
|
|
if (element.data && element.data.length > 0) {
|
|
|
- formData.value[element.prop + "Name"] = selectDataEcho(element, formData.value[element.prop]);
|
|
|
+ formData.value[element.prop + "Name"] = selectDataEcho(
|
|
|
+ element,
|
|
|
+ formData.value[element.prop]
|
|
|
+ );
|
|
|
} else {
|
|
|
if (callNum.value <= 3) {
|
|
|
setTimeout(() => {
|
|
|
@@ -489,7 +401,10 @@ const formDataShowLabel = () => {
|
|
|
}
|
|
|
} else if (element.type === "cascader" && element.itemType === "common") {
|
|
|
if (element.data && element.data.length > 0) {
|
|
|
- formData.value[element.prop + "Name"] = selectDataEcho(element, formData.value[element.prop]);
|
|
|
+ formData.value[element.prop + "Name"] = selectDataEcho(
|
|
|
+ element,
|
|
|
+ formData.value[element.prop]
|
|
|
+ );
|
|
|
} else {
|
|
|
if (callNum.value <= 3) {
|
|
|
setTimeout(() => {
|
|
|
@@ -508,11 +423,17 @@ const formDataShowLabelOne = () => {
|
|
|
const element = formConfig.value[i];
|
|
|
if (element.type === "picker" && element.itemType !== "datePicker") {
|
|
|
if (element.data && element.data.length > 0) {
|
|
|
- formData.value[element.prop + "Name"] = selectDataEcho(element, formData.value[element.prop]);
|
|
|
+ formData.value[element.prop + "Name"] = selectDataEcho(
|
|
|
+ element,
|
|
|
+ formData.value[element.prop]
|
|
|
+ );
|
|
|
}
|
|
|
} else if (element.type === "cascader" && element.itemType === "common") {
|
|
|
if (element.data && element.data.length > 0) {
|
|
|
- formData.value[element.prop + "Name"] = selectDataEcho(element, formData.value[element.prop]);
|
|
|
+ formData.value[element.prop + "Name"] = selectDataEcho(
|
|
|
+ element,
|
|
|
+ formData.value[element.prop]
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -530,7 +451,10 @@ const formDataInit = () => {
|
|
|
upload: [],
|
|
|
};
|
|
|
// 判断是否需要按钮
|
|
|
- if (formOption.value.btnConfig && Object.keys(formOption.value.btnConfig).length > 0) {
|
|
|
+ if (
|
|
|
+ formOption.value.btnConfig &&
|
|
|
+ Object.keys(formOption.value.btnConfig).length > 0
|
|
|
+ ) {
|
|
|
btnConfigCopy = { ...formOption.value.btnConfig };
|
|
|
if (formData.value[btnConfigCopy.prop] === undefined) {
|
|
|
formData.value[btnConfigCopy.prop] = [];
|
|
|
@@ -540,11 +464,18 @@ const formDataInit = () => {
|
|
|
let cityStatus = true;
|
|
|
for (let i = 0; i < formConfig.value.length; i++) {
|
|
|
const element = formConfig.value[i];
|
|
|
- if (element.type === "cascader" && element.itemType === "city" && cityStatus) {
|
|
|
+ if (
|
|
|
+ element.type === "cascader" &&
|
|
|
+ element.itemType === "city" &&
|
|
|
+ cityStatus
|
|
|
+ ) {
|
|
|
cityStatus = false;
|
|
|
cityOptionInit();
|
|
|
}
|
|
|
- if (formData.value[element.prop] === undefined || formData.value[element.prop] === "") {
|
|
|
+ if (
|
|
|
+ formData.value[element.prop] === undefined ||
|
|
|
+ formData.value[element.prop] === ""
|
|
|
+ ) {
|
|
|
if (element.type === "slot") {
|
|
|
continue;
|
|
|
} else if (element.type === "picker" || element.type === "cascader") {
|
|
|
@@ -568,12 +499,24 @@ const onConfirmPicker = (option, item, index) => {
|
|
|
if (option.selectedOptions[0]) {
|
|
|
switch (item.itemType) {
|
|
|
case "onePicker": {
|
|
|
- formData.value[item.prop + "Name"] = option.selectedOptions[0][item.fieldNames.text ? item.fieldNames.text : onePickerFieldNames.text];
|
|
|
- formData.value[item.prop] = option.selectedOptions[0][item.fieldNames.value ? item.fieldNames.value : onePickerFieldNames.value];
|
|
|
+ formData.value[item.prop + "Name"] =
|
|
|
+ option.selectedOptions[0][
|
|
|
+ item.fieldNames.text
|
|
|
+ ? item.fieldNames.text
|
|
|
+ : onePickerFieldNames.text
|
|
|
+ ];
|
|
|
+ formData.value[item.prop] =
|
|
|
+ option.selectedOptions[0][
|
|
|
+ item.fieldNames.value
|
|
|
+ ? item.fieldNames.value
|
|
|
+ : onePickerFieldNames.value
|
|
|
+ ];
|
|
|
formConfig.value[index].showPicker = false;
|
|
|
}
|
|
|
case "datePicker": {
|
|
|
- formData.value[item.prop] = option.selectedValues.join(item.split ? item.split : "-");
|
|
|
+ formData.value[item.prop] = option.selectedValues.join(
|
|
|
+ item.split ? item.split : "-"
|
|
|
+ );
|
|
|
formConfig.value[index].showPicker = false;
|
|
|
}
|
|
|
}
|
|
|
@@ -599,14 +542,23 @@ const handleListItemClick = (i, index, sonIndex) => {
|
|
|
const onConfirmListPicker = (option, item) => {
|
|
|
switch (item.itemType) {
|
|
|
case "onePicker": {
|
|
|
- formData.value[btnConfigCopy.prop][currentIndex.value][item.prop + "Name"] =
|
|
|
- option.selectedOptions[0][item.fieldNames.text ? item.fieldNames.text : onePickerFieldNames.text];
|
|
|
+ formData.value[btnConfigCopy.prop][currentIndex.value][
|
|
|
+ item.prop + "Name"
|
|
|
+ ] =
|
|
|
+ option.selectedOptions[0][
|
|
|
+ item.fieldNames.text ? item.fieldNames.text : onePickerFieldNames.text
|
|
|
+ ];
|
|
|
formData.value[btnConfigCopy.prop][currentIndex.value][item.prop] =
|
|
|
- option.selectedOptions[0][item.fieldNames.value ? item.fieldNames.value : onePickerFieldNames.value];
|
|
|
+ option.selectedOptions[0][
|
|
|
+ item.fieldNames.value
|
|
|
+ ? item.fieldNames.value
|
|
|
+ : onePickerFieldNames.value
|
|
|
+ ];
|
|
|
btnConfigCopy.listConfig[currentSonIndex.value].showPicker = false;
|
|
|
}
|
|
|
case "datePicker": {
|
|
|
- formData.value[btnConfigCopy.prop][currentIndex.value][item.prop] = option.selectedValues.join(item.split ? item.split : "-");
|
|
|
+ formData.value[btnConfigCopy.prop][currentIndex.value][item.prop] =
|
|
|
+ option.selectedValues.join(item.split ? item.split : "-");
|
|
|
btnConfigCopy.listConfig[currentSonIndex.value].showPicker = false;
|
|
|
}
|
|
|
}
|
|
|
@@ -629,55 +581,72 @@ const handleRemove = (index, item) => {
|
|
|
// 拉去城市最近数据及处理
|
|
|
const getAreaInfo = (selectedOptions, item, index) => {
|
|
|
showLoadingToast("加载中...");
|
|
|
- proxy.post("/customizeArea/list", { parentId: selectedOptions.value }).then((res) => {
|
|
|
- let countryIndex = selectedOptions.selectedOptions[0].index;
|
|
|
- let provinceIndex = selectedOptions.tabIndex === 1 ? selectedOptions.selectedOptions[1].index : null;
|
|
|
- let cityIndex = selectedOptions.tabIndex === 2 ? selectedOptions.selectedOptions[2].index : null;
|
|
|
- //已经没有下级数据
|
|
|
- if (res.data.length === 0) {
|
|
|
- if (selectedOptions.tabIndex === 1) {
|
|
|
- formData.value[item.prop + "Name"] = selectedOptions.selectedOptions.map((item) => item.text).join(" ");
|
|
|
+ proxy
|
|
|
+ .post("/customizeArea/list", { parentId: selectedOptions.value })
|
|
|
+ .then((res) => {
|
|
|
+ let countryIndex = selectedOptions.selectedOptions[0].index;
|
|
|
+ let provinceIndex =
|
|
|
+ selectedOptions.tabIndex === 1
|
|
|
+ ? selectedOptions.selectedOptions[1].index
|
|
|
+ : null;
|
|
|
+ let cityIndex =
|
|
|
+ selectedOptions.tabIndex === 2
|
|
|
+ ? selectedOptions.selectedOptions[2].index
|
|
|
+ : null;
|
|
|
+ //已经没有下级数据
|
|
|
+ if (res.data.length === 0) {
|
|
|
+ if (selectedOptions.tabIndex === 1) {
|
|
|
+ formData.value[item.prop + "Name"] = selectedOptions.selectedOptions
|
|
|
+ .map((item) => item.text)
|
|
|
+ .join(" ");
|
|
|
+ formConfig.value[index].showPicker = false;
|
|
|
+ formData.value.cityObj = selectedOptions;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (selectedOptions.tabIndex === 2) {
|
|
|
+ formData.value[item.prop + "Name"] = selectedOptions.selectedOptions
|
|
|
+ .map((item) => item.text)
|
|
|
+ .join(" ");
|
|
|
formConfig.value[index].showPicker = false;
|
|
|
formData.value.cityObj = selectedOptions;
|
|
|
return;
|
|
|
}
|
|
|
- }
|
|
|
- if (selectedOptions.tabIndex === 2) {
|
|
|
- formData.value[item.prop + "Name"] = selectedOptions.selectedOptions.map((item) => item.text).join(" ");
|
|
|
- formConfig.value[index].showPicker = false;
|
|
|
- formData.value.cityObj = selectedOptions;
|
|
|
- return;
|
|
|
- }
|
|
|
- if (selectedOptions.tabIndex === 0) {
|
|
|
- cityOption.value[countryIndex].children = res.data.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- index: index,
|
|
|
- text: item.name,
|
|
|
- value: item.id,
|
|
|
- };
|
|
|
- });
|
|
|
- } else if (selectedOptions.tabIndex === 1) {
|
|
|
- cityOption.value[countryIndex].children[provinceIndex].children = res.data.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- index: index,
|
|
|
- text: item.name,
|
|
|
- value: item.id,
|
|
|
- };
|
|
|
- });
|
|
|
- } else if (selectedOptions.tabIndex === 2) {
|
|
|
- cityOption.value[countryIndex].children[provinceIndex].children[cityIndex].children = res.data.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- index: index,
|
|
|
- text: item.name,
|
|
|
- value: item.id,
|
|
|
- };
|
|
|
- });
|
|
|
- }
|
|
|
- closeToast();
|
|
|
- });
|
|
|
+ if (selectedOptions.tabIndex === 0) {
|
|
|
+ cityOption.value[countryIndex].children = res.data.map(
|
|
|
+ (item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ index: index,
|
|
|
+ text: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ );
|
|
|
+ } else if (selectedOptions.tabIndex === 1) {
|
|
|
+ cityOption.value[countryIndex].children[provinceIndex].children =
|
|
|
+ res.data.map((item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ index: index,
|
|
|
+ text: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ } else if (selectedOptions.tabIndex === 2) {
|
|
|
+ cityOption.value[countryIndex].children[provinceIndex].children[
|
|
|
+ cityIndex
|
|
|
+ ].children = res.data.map((item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ index: index,
|
|
|
+ text: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ closeToast();
|
|
|
+ });
|
|
|
};
|
|
|
// 城市变动事件
|
|
|
const cityOnChange = (options, item, index) => {
|
|
|
@@ -686,7 +655,8 @@ const cityOnChange = (options, item, index) => {
|
|
|
|
|
|
const commonOnChange = ({ selectedOptions }, item, index) => {
|
|
|
const textAtt = item.fieldNames ? item.fieldNames.text : fieldNames.text;
|
|
|
- formData.value[item.prop + "Name"] = selectedOptions[selectedOptions.length - 1][textAtt];
|
|
|
+ formData.value[item.prop + "Name"] =
|
|
|
+ selectedOptions[selectedOptions.length - 1][textAtt];
|
|
|
};
|
|
|
const handleCommonFinish = (index) => {
|
|
|
formConfig.value[index].showPicker = false;
|
|
|
@@ -777,7 +747,12 @@ watch(
|
|
|
watch(
|
|
|
() => formData.value[btnConfigCopy.prop],
|
|
|
(val) => {
|
|
|
- if (formOption.value.btnConfig !== undefined && !formOption.value.btnConfig.isNeed && val && val.length > 0) {
|
|
|
+ if (
|
|
|
+ formOption.value.btnConfig !== undefined &&
|
|
|
+ !formOption.value.btnConfig.isNeed &&
|
|
|
+ val &&
|
|
|
+ val.length > 0
|
|
|
+ ) {
|
|
|
formDataListShowLabel();
|
|
|
}
|
|
|
}
|
|
|
@@ -801,12 +776,19 @@ const changeCheckboxGroup = (form, label, data, fieldNames) => {
|
|
|
const datePickerDateArr = ref([]);
|
|
|
const datePickerTimeArr = ref([]);
|
|
|
const datePickerTimeConfirm = (item, index) => {
|
|
|
- formData.value[item.prop] = datePickerDateArr.value.join("-") + " " + datePickerTimeArr.value.join(":");
|
|
|
+ formData.value[item.prop] =
|
|
|
+ datePickerDateArr.value.join("-") + " " + datePickerTimeArr.value.join(":");
|
|
|
formConfig.value[index].showPicker = false;
|
|
|
};
|
|
|
const defaultTimeFn = (item, index) => {
|
|
|
- datePickerDateArr.value = formatDate(new Date(formData.value[item.prop]), "yyyy-MM-dd").split("-");
|
|
|
- datePickerTimeArr.value = formatDate(new Date(formData.value[item.prop]), "hh:mm:ss").split(":");
|
|
|
+ datePickerDateArr.value = formatDate(
|
|
|
+ new Date(formData.value[item.prop]),
|
|
|
+ "yyyy-MM-dd"
|
|
|
+ ).split("-");
|
|
|
+ datePickerTimeArr.value = formatDate(
|
|
|
+ new Date(formData.value[item.prop]),
|
|
|
+ "hh:mm:ss"
|
|
|
+ ).split(":");
|
|
|
formConfig.value[index].showPicker = true;
|
|
|
};
|
|
|
const validateForm = async () => {
|
|
|
@@ -843,8 +825,17 @@ defineExpose({
|
|
|
padding: 0 15px;
|
|
|
}
|
|
|
._title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
font-size: 14px;
|
|
|
font-weight: 700;
|
|
|
+ margin-left: -10px;
|
|
|
+ .line {
|
|
|
+ width: 4px;
|
|
|
+ background-color: #0084ff;
|
|
|
+ height: 15px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
}
|
|
|
::v-deep {
|
|
|
.multipleChoice {
|
cz