123 lines
4.5 KiB
Plaintext
123 lines
4.5 KiB
Plaintext
<!-- 搜索表单 -->
|
|
<template>
|
|
<div class="base-search-form">
|
|
<el-form :size="size" :inline="true" :label-width="labelWidth">
|
|
<el-form-item v-for="item in searchForm" :key="item.prop" :label="item.label">
|
|
<!-- 输入框 -->
|
|
<el-input v-if="item.type==='Input'" v-model="searchData[item.prop]" :placeholder="item.placeholder" size="mini" :style="{width:item.width}" :readonly="item.readonly" />
|
|
<!-- 下拉框 -->
|
|
<el-select
|
|
v-if="item.type==='Select'"
|
|
v-model="searchData[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
size="mini"
|
|
:style="{width:item.width}"
|
|
|
|
@change="item.change && item.change(that,searchData[item.prop])"
|
|
>
|
|
<el-option
|
|
v-for="op in item.options"
|
|
:key="op[item.props['label']]"
|
|
:label="op[item.props['label']]"
|
|
:value="op[item.props['value']]"
|
|
/>
|
|
</el-select>
|
|
<el-select
|
|
v-if="item.type==='Select2'"
|
|
v-model="searchData[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
size="mini"
|
|
:style="{width:item.width}"
|
|
|
|
@change="item.change && item.change(that,searchData[item.prop])"
|
|
>
|
|
<el-option
|
|
v-for="(key,value) of item.options"
|
|
:key="key"
|
|
:label="key"
|
|
:value="value"
|
|
/>
|
|
</el-select>
|
|
<!-- 单选 -->
|
|
<el-radio-group v-if="item.type==='Radio'" v-model="searchData[item.prop]" :style="{width:item.width}">
|
|
<el-radio v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{ ra.label }}</el-radio>
|
|
</el-radio-group>
|
|
<!-- 单选按钮 -->
|
|
<el-radio-group v-if="item.type==='RadioButton'" v-model="searchData[item.prop]" :style="{width:item.width}" @change="item.change && item.change(searchData[item.prop])">
|
|
<el-radio-button v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{ ra.label }}</el-radio-button>
|
|
</el-radio-group>
|
|
<!-- 复选框 -->
|
|
<el-checkbox-group v-if="item.type==='Checkbox'" v-model="searchData[item.prop]" :style="{width:item.width}">
|
|
<el-checkbox v-for="ch in item.checkboxs" :key="ch.value" :label="ch.value">{{ ch.label }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
<!-- 日期 -->
|
|
<el-date-picker v-if="item.type==='Date'" v-model="searchData[item.prop]" :placeholder="item.placeholder" :style="{width:item.width}" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="item.pickerOption" />
|
|
<!-- 时间 -->
|
|
<el-time-select v-if="item.type==='Time'" v-model="searchData[item.prop]" :placeholder="item.placeholder" type="" :style="{width:item.width}" />
|
|
<!-- 日期时间 -->
|
|
<el-date-picker v-if="item.type==='DateTime'" v-model="searchData[item.prop]" :placeholder="item.placeholder" type="datetime" :disabled="item.disable && item.disable(searchData[item.prop])" :style="{width:item.width}" />
|
|
<!-- 滑块 -->
|
|
<!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> -->
|
|
<!-- 开关 -->
|
|
<el-switch v-if="item.type==='Switch'" v-model="searchData[item.prop]" :style="{width:item.width}" />
|
|
<!-- 具名slot -->
|
|
<slot v-if="item.type==='Custom'" :name="item.slot" />
|
|
</el-form-item>
|
|
<el-form-item v-for="item in searchHandle" :key="item.label">
|
|
<slot v-if="item.slot" :name="item.slot" />
|
|
<el-button v-else :type="item.type" :size="item.size || size" :icon="item.icon || ''" @click="handleClick(item.emitKey)">{{ item.label }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
that: {
|
|
type: Object,
|
|
default: this
|
|
},
|
|
isHandle: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
labelWidth: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'mini'
|
|
},
|
|
searchForm: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
searchHandle: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
searchData: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick(emitKey) {
|
|
// emit事件
|
|
this.$emit(`${emitKey}`)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
<style lang="scss">
|
|
.base-search-form{
|
|
.el-form-item{
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
</style>
|