用户管理添加查询条件邮箱、创建时间
This commit is contained in:
@@ -2,18 +2,28 @@
|
||||
<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-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'"
|
||||
<el-input
|
||||
v-if="item.type === 'Input'"
|
||||
v-model="searchData[item.prop]"
|
||||
:placeholder="item.placeholder"
|
||||
size="mini"
|
||||
:style="{width:item.width}"
|
||||
|
||||
@change="item.change && item.change(that,searchData[item.prop])"
|
||||
: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"
|
||||
@@ -23,49 +33,119 @@
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-if="item.type==='Select2'"
|
||||
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])"
|
||||
:style="{ width: item.width }"
|
||||
@change="item.change && item.change(that, searchData[item.prop])"
|
||||
>
|
||||
<el-option
|
||||
v-for="(key,value) of item.options"
|
||||
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
|
||||
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
|
||||
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
|
||||
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-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-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-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-date-picker
|
||||
v-if="item.type === 'Daterange'"
|
||||
v-model="searchData[item.prop]"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:style="{ width: item.width }"
|
||||
clearable
|
||||
/>
|
||||
<!-- 滑块 -->
|
||||
<!-- <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}" />
|
||||
<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" />
|
||||
<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-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>
|
||||
@@ -76,47 +156,45 @@ export default {
|
||||
props: {
|
||||
that: {
|
||||
type: Object,
|
||||
default: this
|
||||
default: this,
|
||||
},
|
||||
isHandle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: "",
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'mini'
|
||||
default: "mini",
|
||||
},
|
||||
searchForm: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
searchHandle: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
searchData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleClick(emitKey) {
|
||||
// emit事件
|
||||
this.$emit(`${emitKey}`)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.$emit(`${emitKey}`);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.base-search-form{
|
||||
.el-form-item{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.base-search-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user