|
@@ -1,20 +1,24 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <van-form
|
|
|
|
|
- :input-align="inputAlign"
|
|
|
|
|
- :label-width="10"
|
|
|
|
|
- class="ibps-search-form"
|
|
|
|
|
- >
|
|
|
|
|
- <van-collapse v-model="activeNames">
|
|
|
|
|
- <template v-for="(item, i) in forms">
|
|
|
|
|
- <van-cell
|
|
|
|
|
- v-if="item.fieldType !== 'checker'"
|
|
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <van-form
|
|
|
|
|
+ :input-align="inputAlign"
|
|
|
|
|
+ :label-width="10"
|
|
|
|
|
+ class="ibps-search-form"
|
|
|
|
|
+ >
|
|
|
|
|
+ <van-collapse v-model="activeNames">
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-for="(item, i) in forms"
|
|
|
:key="item.prop + i"
|
|
:key="item.prop + i"
|
|
|
- :title="item.label"
|
|
|
|
|
- :border="false"
|
|
|
|
|
- class="ibps-search-field__label"
|
|
|
|
|
- />
|
|
|
|
|
- <!-- IbpsChecker -->
|
|
|
|
|
- <!-- <ibps-checker
|
|
|
|
|
|
|
+ :data-field-type="item.fieldType"
|
|
|
|
|
+ >
|
|
|
|
|
+ <van-cell
|
|
|
|
|
+ v-if="item.fieldType !== 'checker'"
|
|
|
|
|
+ :title="item.label"
|
|
|
|
|
+ :border="false"
|
|
|
|
|
+ class="ibps-search-field__label"
|
|
|
|
|
+ />
|
|
|
|
|
+ <!-- IbpsChecker -->
|
|
|
|
|
+ <!-- <ibps-checker
|
|
|
v-else-if="item.fieldType==='checker'"
|
|
v-else-if="item.fieldType==='checker'"
|
|
|
:key="i"
|
|
:key="i"
|
|
|
v-model="params[item.modelValue]"
|
|
v-model="params[item.modelValue]"
|
|
@@ -27,108 +31,109 @@
|
|
|
label=""
|
|
label=""
|
|
|
/> -->
|
|
/> -->
|
|
|
|
|
|
|
|
- <van-collapse-item
|
|
|
|
|
- v-else-if="item.fieldType === 'checker'"
|
|
|
|
|
- :key="item.prop + i"
|
|
|
|
|
- :title="item.label"
|
|
|
|
|
- :name="item.modelValue + i"
|
|
|
|
|
- >
|
|
|
|
|
- <ibps-checker
|
|
|
|
|
|
|
+ <van-collapse-item
|
|
|
|
|
+ v-else-if="item.fieldType === 'checker'"
|
|
|
|
|
+ :key="item.prop + i"
|
|
|
|
|
+ :title="item.label"
|
|
|
|
|
+ :name="item.modelValue + i"
|
|
|
|
|
+ >
|
|
|
|
|
+ <ibps-checker
|
|
|
|
|
+ :key="i"
|
|
|
|
|
+ v-model="params[item.modelValue]"
|
|
|
|
|
+ :name="item.prop"
|
|
|
|
|
+ :value-key="item.valueKey"
|
|
|
|
|
+ :options="item.options"
|
|
|
|
|
+ :cols="item.cols"
|
|
|
|
|
+ :option-align="item.optionAlign || 'center'"
|
|
|
|
|
+ :input-align="inputAlign"
|
|
|
|
|
+ checker
|
|
|
|
|
+ label=""
|
|
|
|
|
+ />
|
|
|
|
|
+ </van-collapse-item>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 单行文本--数字--数字范围 -->
|
|
|
|
|
+ <van-field
|
|
|
|
|
+ v-if="
|
|
|
|
|
+ item.fieldType === 'text' ||
|
|
|
|
|
+ item.fieldType === 'textarea' ||
|
|
|
|
|
+ item.fieldType === 'number' ||
|
|
|
|
|
+ item.fieldType === 'numberRange' ||
|
|
|
|
|
+ item.fieldType === undefined
|
|
|
|
|
+ "
|
|
|
:key="i"
|
|
:key="i"
|
|
|
v-model="params[item.modelValue]"
|
|
v-model="params[item.modelValue]"
|
|
|
:name="item.prop"
|
|
:name="item.prop"
|
|
|
- :value-key="item.valueKey"
|
|
|
|
|
- :options="item.options"
|
|
|
|
|
- :cols="item.cols"
|
|
|
|
|
- :option-align="item.optionAlign || 'center'"
|
|
|
|
|
|
|
+ :type="item.fieldType || 'text'"
|
|
|
:input-align="inputAlign"
|
|
:input-align="inputAlign"
|
|
|
- checker
|
|
|
|
|
- label=""
|
|
|
|
|
|
|
+ placeholder="请输入"
|
|
|
|
|
+ autocomplete="off"
|
|
|
|
|
+ autosize
|
|
|
|
|
+ clearable
|
|
|
|
|
+ border
|
|
|
|
|
+ />
|
|
|
|
|
+ <!-- 隐藏域 -->
|
|
|
|
|
+ <input
|
|
|
|
|
+ v-else-if="item.fieldType === 'hidden'"
|
|
|
|
|
+ :key="i"
|
|
|
|
|
+ :value="value"
|
|
|
|
|
+ type="hidden"
|
|
|
|
|
+ />
|
|
|
|
|
+ <!-- 下拉 -->
|
|
|
|
|
+ <ibps-select
|
|
|
|
|
+ v-else-if="
|
|
|
|
|
+ item.fieldType === 'select' ||
|
|
|
|
|
+ item.fieldType === 'radio' ||
|
|
|
|
|
+ item.fieldType === 'checkbox'
|
|
|
|
|
+ "
|
|
|
|
|
+ :key="i"
|
|
|
|
|
+ v-model="params[item.modelValue]"
|
|
|
|
|
+ :input-align="inputAlign"
|
|
|
|
|
+ :name="item.prop"
|
|
|
|
|
+ :value-key="item.valueKey || 'val'"
|
|
|
|
|
+ :options="item.options"
|
|
|
|
|
+ placeholder="请选择"
|
|
|
|
|
+ label=" "
|
|
|
/>
|
|
/>
|
|
|
- </van-collapse-item>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 单行文本--数字--数字范围 -->
|
|
|
|
|
- <van-field
|
|
|
|
|
- v-if="
|
|
|
|
|
- item.fieldType === 'text' ||
|
|
|
|
|
- item.fieldType === 'textarea' ||
|
|
|
|
|
- item.fieldType === 'number' ||
|
|
|
|
|
- item.fieldType === 'numberRange' ||
|
|
|
|
|
- item.fieldType === undefined
|
|
|
|
|
- "
|
|
|
|
|
- :key="i"
|
|
|
|
|
- v-model="params[item.modelValue]"
|
|
|
|
|
- :name="item.prop"
|
|
|
|
|
- :type="item.fieldType || 'text'"
|
|
|
|
|
- :input-align="inputAlign"
|
|
|
|
|
- placeholder="请输入"
|
|
|
|
|
- autocomplete="off"
|
|
|
|
|
- autosize
|
|
|
|
|
- clearable
|
|
|
|
|
- border
|
|
|
|
|
- />
|
|
|
|
|
- <!-- 隐藏域 -->
|
|
|
|
|
- <input
|
|
|
|
|
- v-else-if="item.fieldType === 'hidden'"
|
|
|
|
|
- :key="i"
|
|
|
|
|
- :value="value"
|
|
|
|
|
- type="hidden"
|
|
|
|
|
- />
|
|
|
|
|
- <!-- 下拉 -->
|
|
|
|
|
- <ibps-select
|
|
|
|
|
- v-else-if="
|
|
|
|
|
- item.fieldType === 'select' ||
|
|
|
|
|
- item.fieldType === 'radio' ||
|
|
|
|
|
- item.fieldType === 'checkbox'
|
|
|
|
|
- "
|
|
|
|
|
- :key="i"
|
|
|
|
|
- v-model="params[item.modelValue]"
|
|
|
|
|
- :input-align="inputAlign"
|
|
|
|
|
- :name="item.prop"
|
|
|
|
|
- :value-key="item.valueKey || 'val'"
|
|
|
|
|
- :options="item.options"
|
|
|
|
|
- placeholder="请选择"
|
|
|
|
|
- label=" "
|
|
|
|
|
- />
|
|
|
|
|
|
|
|
|
|
- <!-- 日期 -->
|
|
|
|
|
- <ibps-date-picker
|
|
|
|
|
- v-else-if="
|
|
|
|
|
- item.fieldType === 'datePicker' ||
|
|
|
|
|
- item.fieldType === 'date' ||
|
|
|
|
|
- item.fieldType === 'datetime'
|
|
|
|
|
- "
|
|
|
|
|
- :key="i"
|
|
|
|
|
- v-model="params[item.modelValue]"
|
|
|
|
|
- placeholder="请选择"
|
|
|
|
|
- :input-align="inputAlign"
|
|
|
|
|
- :name="item.prop"
|
|
|
|
|
- :type="getFieldOptions(item, 'datefmt_type', 'custom')"
|
|
|
|
|
- :format="getFieldOptions(item, 'datefmt', 'yyyy-MM-dd')"
|
|
|
|
|
- clearable
|
|
|
|
|
- label=" "
|
|
|
|
|
- />
|
|
|
|
|
- <!-- 日期范围 -->
|
|
|
|
|
- <ibps-date-range
|
|
|
|
|
- v-else-if="item.fieldType === 'dateRange'"
|
|
|
|
|
- :key="i"
|
|
|
|
|
- ref="daterange"
|
|
|
|
|
- v-model="params[item.modelValue]"
|
|
|
|
|
- :input-align="inputAlign"
|
|
|
|
|
- :type="getFieldOptions(item, 'datefmt_type', 'custom')"
|
|
|
|
|
- :format="getFieldOptions(item, 'datefmt', 'yyyy-MM-dd')"
|
|
|
|
|
- placeholder="请选择"
|
|
|
|
|
- label=" "
|
|
|
|
|
- @input="(val) => dateInput(val, item)"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <!-- 日期 -->
|
|
|
|
|
+ <ibps-date-picker
|
|
|
|
|
+ v-else-if="
|
|
|
|
|
+ item.fieldType === 'datePicker' ||
|
|
|
|
|
+ item.fieldType === 'date' ||
|
|
|
|
|
+ item.fieldType === 'datetime'
|
|
|
|
|
+ "
|
|
|
|
|
+ :key="i"
|
|
|
|
|
+ v-model="params[item.modelValue]"
|
|
|
|
|
+ placeholder="请选择"
|
|
|
|
|
+ :input-align="inputAlign"
|
|
|
|
|
+ :name="item.prop"
|
|
|
|
|
+ :type="getFieldOptions(item, 'datefmt_type', 'custom')"
|
|
|
|
|
+ :format="getFieldOptions(item, 'datefmt', 'yyyy-MM-dd')"
|
|
|
|
|
+ clearable
|
|
|
|
|
+ label=" "
|
|
|
|
|
+ />
|
|
|
|
|
+ <!-- 日期范围 -->
|
|
|
|
|
+ <ibps-date-range
|
|
|
|
|
+ v-else-if="item.fieldType === 'dateRange'"
|
|
|
|
|
+ :key="i"
|
|
|
|
|
+ ref="daterange"
|
|
|
|
|
+ v-model="params[item.modelValue]"
|
|
|
|
|
+ :input-align="inputAlign"
|
|
|
|
|
+ :type="getFieldOptions(item, 'datefmt_type', 'custom')"
|
|
|
|
|
+ :format="getFieldOptions(item, 'datefmt', 'yyyy-MM-dd')"
|
|
|
|
|
+ placeholder="请选择"
|
|
|
|
|
+ label=" "
|
|
|
|
|
+ @input="(val) => dateInput(val, item)"
|
|
|
|
|
+ />
|
|
|
|
|
|
|
|
- <!-- 自定义插槽 -->
|
|
|
|
|
- <template v-else>
|
|
|
|
|
- <slot :name="item.slotName" :item="item" />
|
|
|
|
|
- </template>
|
|
|
|
|
- </template>
|
|
|
|
|
- </van-collapse>
|
|
|
|
|
- </van-form>
|
|
|
|
|
|
|
+ <!-- 自定义插槽 -->
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <slot :name="item.slotName" :item="item" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </van-collapse>
|
|
|
|
|
+ </van-form>
|
|
|
|
|
+ </div>
|
|
|
</template>
|
|
</template>
|
|
|
<script>
|
|
<script>
|
|
|
import IbpsSelect from '@/components/ibps-select'
|
|
import IbpsSelect from '@/components/ibps-select'
|