|
@@ -1,101 +1,111 @@
|
|
<template>
|
|
<template>
|
|
<div id="c-form">
|
|
<div id="c-form">
|
|
- <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" class="form" size="small" @submit.native.prevent>
|
|
|
|
- <template v-for="(item, index) in fields">
|
|
|
|
- <el-form-item v-if="display(item)" :key="'form-field-' + index" :label="getField('label', item)" :prop="item.model" :required="item.required">
|
|
|
|
- <template v-if="!item.custom">
|
|
|
|
- <template v-if="item.type === `date` || item.type === `datetime`">
|
|
|
|
- <el-date-picker
|
|
|
|
- v-model="form[item.model]"
|
|
|
|
- :type="item.type"
|
|
|
|
- placeholder="请选择"
|
|
|
|
- :format="item.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
|
|
|
|
- :value-format="item.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
|
|
|
|
- v-bind="item.options"
|
|
|
|
- style="width: 100%"
|
|
|
|
- @change="dataChange(item.model)"
|
|
|
|
- >
|
|
|
|
- </el-date-picker>
|
|
|
|
- </template>
|
|
|
|
- <template v-else-if="item.type === `year` || item.type === `week` || item.type === `day`">
|
|
|
|
- <el-date-picker
|
|
|
|
- v-model="form[item.model]"
|
|
|
|
- :type="item.type"
|
|
|
|
- placeholder="请选择"
|
|
|
|
- :format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
|
|
|
|
- :value-format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
|
|
|
|
- v-bind="item.options"
|
|
|
|
- style="width: 100%"
|
|
|
|
- @change="dataChange(item.model)"
|
|
|
|
- >
|
|
|
|
- </el-date-picker>
|
|
|
|
- </template>
|
|
|
|
- <template v-else-if="item.type === 'time'">
|
|
|
|
- <el-time-picker
|
|
|
|
- v-model="form[item.model]"
|
|
|
|
- placeholder="请选择时间"
|
|
|
|
- format="HH:mm"
|
|
|
|
- value-format="HH:mm"
|
|
|
|
- @change="dataChange(item.model)"
|
|
|
|
- ></el-time-picker>
|
|
|
|
- </template>
|
|
|
|
- <template v-else-if="item.type === 'radio'">
|
|
|
|
- <el-radio-group v-model="form[item.model]" size="mini" @change="dataChange(item.model)" v-bind="item.options">
|
|
|
|
|
|
+ <el-row type="flex" justify="space-around">
|
|
|
|
+ <el-col :span="span">
|
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" class="form" size="small" @submit.native.prevent>
|
|
|
|
+ <template v-for="(item, index) in fields">
|
|
|
|
+ <el-form-item v-if="display(item)" :key="'form-field-' + index" :label="getField('label', item)" :prop="item.model" :required="item.required">
|
|
|
|
+ <template v-if="!item.custom">
|
|
|
|
+ <template v-if="item.type === `date` || item.type === `datetime`">
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="form[item.model]"
|
|
|
|
+ :type="item.type"
|
|
|
|
+ placeholder="请选择"
|
|
|
|
+ :format="item.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
|
|
|
|
+ :value-format="item.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
|
|
|
|
+ v-bind="item.options"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ @change="dataChange(item.model)"
|
|
|
|
+ >
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else-if="item.type === `year` || item.type === `week` || item.type === `day`">
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="form[item.model]"
|
|
|
|
+ :type="item.type"
|
|
|
|
+ placeholder="请选择"
|
|
|
|
+ :format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
|
|
|
|
+ :value-format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
|
|
|
|
+ v-bind="item.options"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ @change="dataChange(item.model)"
|
|
|
|
+ >
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else-if="item.type === 'time'">
|
|
|
|
+ <el-time-picker
|
|
|
|
+ v-model="form[item.model]"
|
|
|
|
+ placeholder="请选择时间"
|
|
|
|
+ format="HH:mm"
|
|
|
|
+ value-format="HH:mm"
|
|
|
|
+ @change="dataChange(item.model)"
|
|
|
|
+ ></el-time-picker>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else-if="item.type === 'radio'">
|
|
|
|
+ <el-radio-group v-model="form[item.model]" size="mini" @change="dataChange(item.model)" v-bind="item.options">
|
|
|
|
+ <slot :name="item.model" v-bind="{ item }"></slot>
|
|
|
|
+ </el-radio-group>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else-if="item.type === 'checkbox'">
|
|
|
|
+ <el-checkbox-group v-model="form[item.model]" @change="dataChange(item.model)" v-bind="item.options">
|
|
|
|
+ <slot :name="item.model" v-bind="{ item }"></slot>
|
|
|
|
+ </el-checkbox-group>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else-if="item.type === 'select'">
|
|
|
|
+ <el-select
|
|
|
|
+ v-model="form[item.model]"
|
|
|
|
+ v-bind="item.options"
|
|
|
|
+ filterable
|
|
|
|
+ clearable
|
|
|
|
+ @change="dataChange(item.model)"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ :disabled="item.readonly"
|
|
|
|
+ >
|
|
|
|
+ <slot :name="item.model" v-bind="{ item }"></slot>
|
|
|
|
+ </el-select>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else-if="item.type === 'textarea'">
|
|
|
|
+ <el-input
|
|
|
|
+ clearable
|
|
|
|
+ v-model="form[item.model]"
|
|
|
|
+ type="textarea"
|
|
|
|
+ :autosize="{ minRows: 3, maxRows: 5 }"
|
|
|
|
+ @change="dataChange(item.model)"
|
|
|
|
+ ></el-input>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else-if="item.type === 'upload'">
|
|
|
|
+ <c-upload :url="item.url" v-model="form[item.model]"></c-upload>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else>
|
|
|
|
+ <el-input
|
|
|
|
+ clearable
|
|
|
|
+ v-model="form[item.model]"
|
|
|
|
+ :type="getField('type', item)"
|
|
|
|
+ :placeholder="getField('placeholder', item)"
|
|
|
|
+ :show-password="getField('type', item) === 'password'"
|
|
|
|
+ v-bind="item.options"
|
|
|
|
+ :readonly="item.readonly"
|
|
|
|
+ @change="dataChange(item.model)"
|
|
|
|
+ ></el-input>
|
|
|
|
+ </template>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else>
|
|
<slot :name="item.model" v-bind="{ item }"></slot>
|
|
<slot :name="item.model" v-bind="{ item }"></slot>
|
|
- </el-radio-group>
|
|
|
|
- </template>
|
|
|
|
- <template v-else-if="item.type === 'checkbox'">
|
|
|
|
- <el-checkbox-group v-model="form[item.model]" @change="dataChange(item.model)" v-bind="item.options">
|
|
|
|
- <slot :name="item.model" v-bind="{ item }"></slot>
|
|
|
|
- </el-checkbox-group>
|
|
|
|
- </template>
|
|
|
|
- <template v-else-if="item.type === 'select'">
|
|
|
|
- <el-select
|
|
|
|
- v-model="form[item.model]"
|
|
|
|
- v-bind="item.options"
|
|
|
|
- filterable
|
|
|
|
- clearable
|
|
|
|
- @change="dataChange(item.model)"
|
|
|
|
- style="width: 100%"
|
|
|
|
- :disabled="item.readonly"
|
|
|
|
- >
|
|
|
|
- <slot :name="item.model" v-bind="{ item }"></slot>
|
|
|
|
- </el-select>
|
|
|
|
- </template>
|
|
|
|
- <template v-else-if="item.type === 'textarea'">
|
|
|
|
- <el-input clearable v-model="form[item.model]" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" @change="dataChange(item.model)"></el-input>
|
|
|
|
- </template>
|
|
|
|
- <template v-else-if="item.type === 'upload'">
|
|
|
|
- <c-upload :url="item.url" v-model="form[item.model]"></c-upload>
|
|
|
|
- </template>
|
|
|
|
- <template v-else>
|
|
|
|
- <el-input
|
|
|
|
- clearable
|
|
|
|
- v-model="form[item.model]"
|
|
|
|
- :type="getField('type', item)"
|
|
|
|
- :placeholder="getField('placeholder', item)"
|
|
|
|
- :show-password="getField('type', item) === 'password'"
|
|
|
|
- v-bind="item.options"
|
|
|
|
- :readonly="item.readonly"
|
|
|
|
- @change="dataChange(item.model)"
|
|
|
|
- ></el-input>
|
|
|
|
- </template>
|
|
|
|
- </template>
|
|
|
|
- <template v-else>
|
|
|
|
- <slot :name="item.model" v-bind="{ item }"></slot>
|
|
|
|
|
|
+ </template>
|
|
|
|
+ </el-form-item>
|
|
</template>
|
|
</template>
|
|
- </el-form-item>
|
|
|
|
- </template>
|
|
|
|
- <el-form-item label="" class="btn">
|
|
|
|
- <slot name="submit">
|
|
|
|
- <el-row type="flex" align="middle" justify="start">
|
|
|
|
- <el-col :span="6">
|
|
|
|
- <el-button type="primary" @click="save">{{ submitText }}</el-button>
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
- </slot>
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-form>
|
|
|
|
|
|
+ <el-form-item label="" class="btn">
|
|
|
|
+ <slot name="submit">
|
|
|
|
+ <el-row type="flex" align="middle" justify="start">
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-button type="primary" @click="save">{{ submitText }}</el-button>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </slot>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -110,6 +120,7 @@ export default {
|
|
submitText: { type: String, default: '保存' },
|
|
submitText: { type: String, default: '保存' },
|
|
form: null,
|
|
form: null,
|
|
reset: { type: Boolean, default: false },
|
|
reset: { type: Boolean, default: false },
|
|
|
|
+ span: { type: Number, default: 24 }, // 限制两侧的距离,24就是整行全用
|
|
},
|
|
},
|
|
model: {
|
|
model: {
|
|
prop: 'form',
|
|
prop: 'form',
|