Skip to content

Commit

Permalink
style: 修改高级查询表单样式
Browse files Browse the repository at this point in the history
  • Loading branch information
@BoBoooooo
BoBoooooo committed Dec 20, 2020
1 parent 77ac94b commit 6cae64e
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 71 deletions.
127 changes: 76 additions & 51 deletions packages/crud-table/src/SearchForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,55 +7,61 @@

<template>
<div class="search-form-container">
<el-input placeholder="请输入查询内容"
@clear="clearEvent"
clearable
@change="changeEvent"
v-model="searchContent"
class="input">
<div slot="suffix">
<el-tooltip class="item"
effect="dark"
content="查询"
placement="top">
<i class="el-input__icon el-icon-search"
@click="btnSearchOnClick()"
style="display:inline"></i>
</el-tooltip>
<!-- 高级查询表单 -->
<SeniorSearchForm v-if="showSeniorSearchFormButton"
:remoteFuncs="remoteFuncs"
@fetchSearch="getFetchParamsSearch"
:columns="columns"> </SeniorSearchForm>
<el-tooltip class="item"
effect="dark"
content="清空"
placement="top">
<i class="el-input__icon el-icon-refresh"
@click="clearEvent()"
style="display:inline;color:orange;"></i>
</el-tooltip>
</div>
<el-input
placeholder="请输入查询内容"
@clear="clearEvent"
clearable
@change="changeEvent"
v-model="searchContent"
class="input"
>
</el-input>
<!-- 自定义高级查询表单-->
<slot name="SeniorSearchForm"></slot>
<el-button-group>
<el-button
size="mini"
type="primary"
icon="el-icon-search"
@click="btnSearchOnClick()"
class="tool-btn"
>查询</el-button
>
<!-- 高级查询表单 -->
<SeniorSearchForm
v-if="showSeniorSearchForm"
:remoteFuncs="remoteFuncs"
@fetchSearch="getFetchParamsSearch"
:columns="columns"
>
</SeniorSearchForm>
<!-- 自定义高级查询表单-->
<slot name="seniorSearchForm"></slot>

<el-button
size="mini"
icon="el-icon-refresh"
@click="clearEvent()"
class="tool-btn"
>清空</el-button
>
</el-button-group>
<div class="tips">
<!-- 提示当前查询内容 -->
<template v-if="isArray">
<el-tag v-for="(item,index) in paramsTips"
size="small"
effect="plain"
:key="index"
closable
@close="handleClose(item)">
{{item.label +':'+item.value}}
<el-tag
v-for="(item, index) in paramsTips"
size="small"
effect="plain"
:key="index"
closable
@close="handleClose(item)"
>
{{ item.label + ":" + item.value }}
</el-tag>
</template>
<template v-else>
<span v-if="paramsTips">当前查询: {{paramsTips}}</span>
<span v-if="paramsTips">当前查询: {{ paramsTips }}</span>
</template>
</div>

</div>
</template>

Expand All @@ -64,17 +70,17 @@ import { Component, Vue, Prop } from 'vue-property-decorator';
import SeniorSearchForm from './SeniorSearchForm.vue';

@Component({
name: 'SearchForm',
components: {
SeniorSearchForm,
},
name: 'SearchForm',
})
export default class SearchForm extends Vue {
// 远程数据方法
@Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;

// 是否显示高级查询按钮
@Prop({ default: true, type: Boolean }) showSeniorSearchFormButton!: boolean;
@Prop({ default: true, type: Boolean }) showSeniorSearchForm!: boolean;

// 表格设计json
@Prop({
Expand All @@ -86,16 +92,21 @@ export default class SearchForm extends Vue {
// 查询输入框内容
searchContent = '';

// 高级查询表单是否显示,手动控制
triggleVisible = false;

// 查询tips
paramsTips:any = null;
paramsTips: any = null;

get isArray() {
return Array.isArray(this.paramsTips);
}

// 标签关闭事件
handleClose(tag) {
this.paramsTips = this.paramsTips.filter(item => item.field !== tag.field);
this.paramsTips = this.paramsTips.filter(
item => item.field !== tag.field,
);
this.$emit(
'update:searchFormCondition',
this.paramsTips.map(item => ({
Expand Down Expand Up @@ -124,9 +135,11 @@ export default class SearchForm extends Vue {
* 获取查询条件
*/
getParams() {
let params:any = [];
let params: any = [];
// 拿到所有字段
const props = this.columns.filter(item => item.searchable).map(item => item.prop);
const props = this.columns
.filter(item => item.searchable)
.map(item => item.prop);
const str = props.toString();
if (this.searchContent) {
params = [
Expand All @@ -150,7 +163,8 @@ export default class SearchForm extends Vue {
// 获取高级查询组件中的查询条件
getFetchParamsSearch(data) {
this.paramsTips = [];
const params:any = [];
this.triggleVisible = false;
const params: any = [];
Object.keys(data).forEach((key) => {
if (key && data[key]) {
if (Array.isArray(data[key])) {
Expand Down Expand Up @@ -184,7 +198,6 @@ export default class SearchForm extends Vue {
operator: item.operator,
label: this.columns.find(s => s.prop === item.field).label,
}));

this.$emit('update:searchFormCondition', params);
this.$emit('click');
}
Expand All @@ -194,15 +207,26 @@ export default class SearchForm extends Vue {
.input-with-select >>> .el-input-group__prepend {
background-color: #fff;
}
.dropdown-menu >>> .popper__arrow {
display: none;
}
.dropdown >>> .el-button {
height: 29px !important;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.search-form-container {
float: left;
.tool-btn{
display:inline;
height: 29px;
border-radius:0
}
.input {
/deep/ .el-input__inner {
height: 28px;
line-height: 28px;
height: 29px;
line-height: 29px;
border-radius: 0;
display: inline-block;
}
Expand All @@ -212,7 +236,8 @@ export default class SearchForm extends Vue {
display: inline;
}
display: inline-block;
width: 25vw;
width: 20vw;
vertical-align: -1px;
}
/deep/.el-input__suffix {
top: -5px;
Expand Down
56 changes: 36 additions & 20 deletions packages/crud-table/src/SeniorSearchForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
* @Date: 2019年12月10 14:27:03
-->
<template>
<el-popover width="700"
<el-popover width="800"
placement="bottom"
@hide="getSearchFormData"
trigger="click">
trigger="manual"
v-model="visible">
<el-card style="margin:-12px;"
:body-style="{
padding:'5px',
maxHeight:'70vh',
padding:'5px 10px',
maxHeight:'60vh',
overflow:'auto'
}">
<div slot="header"
Expand All @@ -24,20 +24,29 @@
<div>
<GenerateForm ref="generateDialogForm"
:data="formDesign"
style="width:auto"
v-if="visible"
:remote="remoteFuncs"
:entity.sync="entity" />
<el-button size="mini"
type="primary"
icon="el-icon-search"
style="float:right"
@click="getSearchFormData()">查询</el-button>
<el-button size="mini"
icon="el-icon-search"
style="float:right"
@click="resetForm">关闭</el-button>
</div>
</el-card>
<el-tooltip class="item"
slot="reference"
effect="dark"
content="高级查询"
placement="top">
<i style="color:green"
class="el-input__icon el-icon-zoom-in el-icon"
@click="visible = true"></i>
<el-button type="primary"
size="mini"
icon="el-icon-s-help"
style="border-radius:0"
@click="visible = true">高级查询</el-button>
</el-tooltip>
</el-popover>
</template>
Expand All @@ -50,16 +59,12 @@ import {
} from 'vue-property-decorator';

@Component({
name: 'SeniorSearchForm',
components: {
GenerateForm,
},
name: 'SeniorSearchForm',
})
export default class SeniorSearchForm extends Vue {
$refs!: {
generateDialogForm: HTMLFormElement;
};

visible = false;

entity: any = {};
Expand All @@ -76,23 +81,29 @@ export default class SeniorSearchForm extends Vue {
// 远程数据方法
@Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;

$refs!: {
generateDialogForm: HTMLFormElement;
};

created() {
this.autoGenerateFormByBackend();
}

resetForm() {
this.$refs.generateDialogForm.resetForm();
this.visible = false;
}

getSearchFormData() {
this.$emit('fetchSearch', this.entity);
this.visible = false;
this.resetForm();
}

// 生成查询表单 待 重构!!!
// 暂时默认时间类型的为起止范围查询
// 输入框类型的为手动输入
autoGenerateFormByBackend() {
this.visible = false;
const formJson: any = {
list: [],
config: {
Expand Down Expand Up @@ -173,14 +184,19 @@ export default class SeniorSearchForm extends Vue {
dictType: '',
...option,
placeholder: `请选择${label}`,
width: '100%',
},
model: prop,
rules: [],
width: '100%',
},
],
};
if (prop.includes('date') || prop.includes('time') || label.includes('日期') || label.includes('时间')) {
if (
prop.includes('date')
|| prop.includes('time')
|| label.includes('日期')
|| label.includes('时间')
) {
row.columns.push(date);
} else if (option && option.type === 'select') {
row.columns.push(select);
Expand All @@ -192,8 +208,8 @@ export default class SeniorSearchForm extends Vue {
this.formDesign = formJson;
}

@Watch('columns', { deep: true })
onChange() {
@Watch('columns', { deep: true, immediate: true })
onChange(val) {
this.autoGenerateFormByBackend();
}
}
Expand Down

0 comments on commit 6cae64e

Please sign in to comment.