feat: 回滚 search.vue 变更
This commit is contained in:
写意
parent
6398193780
commit
6fea5d5a92
@ -1,106 +1,105 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="table-search-container" v-if="props.search.length > 0">
|
<div class="table-search-container" v-if="props.search.length > 0">
|
||||||
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0px 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
|
<el-form ref="tableSearchRef" :model="state.innerModelValue" label-width="100px" class="table-form">
|
||||||
<el-form ref="tableSearchRef" :model="state.innerModelValue" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
|
<el-row :gutter="20">
|
||||||
<el-row :gutter="10">
|
<!-- <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4" class="mb20"></el-col> -->
|
||||||
<!-- <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4" class="mb5"></el-col> -->
|
<el-col :xs="12" :sm="5" :md="5" :lg="6" :xl="4" class="mb20" v-for="(val, key) in search" :key="key" v-show="key < 3 || state.isToggle">
|
||||||
<el-col :xs="12" :sm="5" :md="5" :lg="6" :xl="4" class="mb5" v-for="(val, key) in search" :key="key" v-show="key < 3 || state.isToggle">
|
<template v-if="val.type">
|
||||||
<template v-if="val.type">
|
<el-form-item
|
||||||
<el-form-item
|
label-width="auto"
|
||||||
label-width="auto"
|
:label="val.label"
|
||||||
:label="val.label"
|
:prop="val.prop"
|
||||||
:prop="val.prop"
|
:rules="[{ required: val.required, message: `${val.label}${t('message.list.required')}`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
|
||||||
:rules="[{ required: val.required, message: `${val.label}${t('message.list.required')}`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="state.innerModelValue[val.prop]"
|
||||||
|
v-bind="val.comProps"
|
||||||
|
:placeholder="val.placeholder"
|
||||||
|
:clearable="!val.required"
|
||||||
|
v-if="val.type === 'input'"
|
||||||
|
@keyup.enter="onSearch(tableSearchRef)"
|
||||||
|
@change="val.change"
|
||||||
|
class="w100"
|
||||||
|
/>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="state.innerModelValue[val.prop]"
|
||||||
|
v-bind="val.comProps"
|
||||||
|
type="date"
|
||||||
|
:placeholder="val.placeholder"
|
||||||
|
:clearable="!val.required"
|
||||||
|
v-else-if="val.type === 'date'"
|
||||||
|
@change="val.change"
|
||||||
|
class="w100"
|
||||||
|
/>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="state.innerModelValue[val.prop]"
|
||||||
|
v-bind="val.comProps"
|
||||||
|
type="monthrange"
|
||||||
|
value-format="YYYY/MM/DD"
|
||||||
|
:placeholder="val.placeholder"
|
||||||
|
:clearable="!val.required"
|
||||||
|
v-else-if="val.type === 'monthrange'"
|
||||||
|
@change="val.change"
|
||||||
|
class="w100"
|
||||||
|
/>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="state.innerModelValue[val.prop]"
|
||||||
|
v-bind="val.comProps"
|
||||||
|
type="daterange"
|
||||||
|
value-format="YYYY/MM/DD"
|
||||||
|
:range-separator="t('message.list.to')"
|
||||||
|
:start-placeholder="t('message.list.startDate')"
|
||||||
|
:end-placeholder="t('message.list.endDate')"
|
||||||
|
:clearable="!val.required"
|
||||||
|
:shortcuts="shortcuts"
|
||||||
|
:default-time="defaultTime"
|
||||||
|
v-else-if="val.type === 'daterange'"
|
||||||
|
@change="val.change"
|
||||||
|
class="w100"
|
||||||
|
/>
|
||||||
|
<el-select
|
||||||
|
v-model="state.innerModelValue[val.prop]"
|
||||||
|
v-bind="val.comProps"
|
||||||
|
:clearable="!val.required"
|
||||||
|
:placeholder="val.placeholder"
|
||||||
|
v-else-if="val.type === 'select'"
|
||||||
|
@change="val.change"
|
||||||
|
class="w100"
|
||||||
>
|
>
|
||||||
<el-input
|
<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||||
v-model="state.innerModelValue[val.prop]"
|
</el-select>
|
||||||
v-bind="val.comProps"
|
<el-cascader
|
||||||
:placeholder="val.placeholder"
|
v-else-if="val.type === 'cascader' && val.cascaderData"
|
||||||
:clearable="!val.required"
|
:options="val.cascaderData"
|
||||||
v-if="val.type === 'input'"
|
:clearable="!val.required"
|
||||||
@keyup.enter="onSearch(tableSearchRef)"
|
filterable
|
||||||
@change="val.change"
|
:props="val.cascaderProps ? val.cascaderProps : state.cascaderProps"
|
||||||
class="w100"
|
:placeholder="val.placeholder"
|
||||||
/>
|
@change="val.change"
|
||||||
<el-date-picker
|
class="w100"
|
||||||
v-model="state.innerModelValue[val.prop]"
|
v-bind="val.comProps"
|
||||||
v-bind="val.comProps"
|
v-model="state.innerModelValue[val.prop]"
|
||||||
type="date"
|
>
|
||||||
:placeholder="val.placeholder"
|
</el-cascader>
|
||||||
:clearable="!val.required"
|
|
||||||
v-else-if="val.type === 'date'"
|
|
||||||
@change="val.change"
|
|
||||||
class="w100"
|
|
||||||
/>
|
|
||||||
<el-date-picker
|
|
||||||
v-model="state.innerModelValue[val.prop]"
|
|
||||||
v-bind="val.comProps"
|
|
||||||
type="monthrange"
|
|
||||||
value-format="YYYY/MM/DD"
|
|
||||||
:placeholder="val.placeholder"
|
|
||||||
:clearable="!val.required"
|
|
||||||
v-else-if="val.type === 'monthrange'"
|
|
||||||
@change="val.change"
|
|
||||||
class="w100"
|
|
||||||
/>
|
|
||||||
<el-date-picker
|
|
||||||
v-model="state.innerModelValue[val.prop]"
|
|
||||||
v-bind="val.comProps"
|
|
||||||
type="daterange"
|
|
||||||
value-format="YYYY/MM/DD"
|
|
||||||
:range-separator="t('message.list.to')"
|
|
||||||
:start-placeholder="t('message.list.startDate')"
|
|
||||||
:end-placeholder="t('message.list.endDate')"
|
|
||||||
:clearable="!val.required"
|
|
||||||
:shortcuts="shortcuts"
|
|
||||||
:default-time="defaultTime"
|
|
||||||
v-else-if="val.type === 'daterange'"
|
|
||||||
@change="val.change"
|
|
||||||
class="w100"
|
|
||||||
/>
|
|
||||||
<el-select
|
|
||||||
v-model="state.innerModelValue[val.prop]"
|
|
||||||
v-bind="val.comProps"
|
|
||||||
:clearable="!val.required"
|
|
||||||
:placeholder="val.placeholder"
|
|
||||||
v-else-if="val.type === 'select'"
|
|
||||||
@change="val.change"
|
|
||||||
class="w100"
|
|
||||||
>
|
|
||||||
<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
||||||
</el-select>
|
|
||||||
<el-cascader
|
|
||||||
v-else-if="val.type === 'cascader' && val.cascaderData"
|
|
||||||
:options="val.cascaderData"
|
|
||||||
:clearable="!val.required"
|
|
||||||
filterable
|
|
||||||
:props="val.cascaderProps ? val.cascaderProps : state.cascaderProps"
|
|
||||||
:placeholder="val.placeholder"
|
|
||||||
@change="val.change"
|
|
||||||
class="w100"
|
|
||||||
v-bind="val.comProps"
|
|
||||||
v-model="state.innerModelValue[val.prop]"
|
|
||||||
>
|
|
||||||
</el-cascader>
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="12" :sm="9" :md="9" :lg="6" :xl="4" class="mb5">
|
|
||||||
<el-form-item class="table-form-btn" label-width="auto">
|
|
||||||
<div>
|
|
||||||
<el-button-group>
|
|
||||||
<el-button type="primary" icon="ele-Search" @click="onSearch(tableSearchRef)"> {{ t('message.list.query') }} </el-button>
|
|
||||||
<el-button icon="ele-Refresh" @click="onReset(tableSearchRef)"> {{ t('message.list.reset') }} </el-button>
|
|
||||||
</el-button-group>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</template>
|
||||||
</el-row>
|
</el-col>
|
||||||
<el-divider style="margin-top: 5px" v-if="search.length > 3">
|
<el-col :xs="12" :sm="9" :md="9" :lg="6" :xl="4" class="mb20">
|
||||||
<el-button :icon="state.isToggle ? 'ele-ArrowUpBold' : 'ele-ArrowDownBold'" class="divider-btn" @click="state.isToggle = !state.isToggle"> </el-button>
|
<el-form-item class="table-form-btn" label-width="auto">
|
||||||
</el-divider>
|
<div>
|
||||||
</el-form>
|
<!-- 使用el-button-group会导致具有type属性的按钮的右边框无法显示 -->
|
||||||
</el-card>
|
<!-- <el-button-group> -->
|
||||||
|
<el-button plain type="primary" icon="ele-Search" @click="onSearch(tableSearchRef)"> {{ t('message.list.query') }} </el-button>
|
||||||
|
<el-button icon="ele-Refresh" @click="onReset(tableSearchRef)" style="margin-left: 12px"> {{ t('message.list.reset') }} </el-button>
|
||||||
|
<!-- </el-button-group> -->
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider style="margin-top: 5px" v-if="search.length > 3">
|
||||||
|
<el-button :icon="state.isToggle ? 'ele-ArrowUpBold' : 'ele-ArrowDownBold'" class="divider-btn" @click="state.isToggle = !state.isToggle"> </el-button>
|
||||||
|
</el-divider>
|
||||||
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -206,19 +205,19 @@ const shortcuts = [
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.table-search-container {
|
.table-search-container {
|
||||||
// display: flex;
|
display: flex;
|
||||||
|
|
||||||
// .table-form {
|
.table-form {
|
||||||
// flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
// .table-form-btn-toggle {
|
.table-form-btn-toggle {
|
||||||
// white-space: nowrap;
|
white-space: nowrap;
|
||||||
// user-select: none;
|
user-select: none;
|
||||||
// display: flex;
|
display: flex;
|
||||||
// align-items: center;
|
align-items: center;
|
||||||
// color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider-btn {
|
.divider-btn {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user