Vue前端的封装的高级搜索条件，like,=,or,and,not null,后端进行统一的接收
Posted 指导毕业设计Monkey
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue前端的封装的高级搜索条件，like,=,or,and,not null,后端进行统一的接收相关的知识，希望对你有一定的参考价值。
文章目录
1.点击高级搜索按钮出现弹框
<!-- 操作按钮 -->
<el-row>
<el-col :span="24" class="pb15 pt5">
<el-button
type="danger"
size="mini"
style="margin-left: 10px"
plain
@click="addOrUpdateHandle()"
>新增</el-button
>
<el-button
type="primary"
size="mini"
style="margin-left: 10px"
plain
@click="search()"
>高级搜索</el-button
>
<el-button
type="primary"
size="mini"
style="margin-left: 10px"
plain
@click="sort()"
>排序</el-button
>
</el-col>
</el-row>
需要在vuer methods方法里面加上：
// 高级搜索 使弹框置为true
search()
this.dialogFormVisible = true;
,
2.出现弹框的页面，通过js封装好相关的下拉条的条件
2.1 弹框代码
<!-- 弹窗, 高级搜索 -->
<el-dialog
v-dialogDrag
title="高级搜索"
:visible.sync="dialogFormVisible"
class="dialog"
>
<el-form :model="form">
<!-- 操作按钮 -->
<el-row>
<el-col :span="24" class="pb15 pt5">
<el-button
@click="searchAdd(form.tableData)"
type="danger"
size="mini"
style="margin-left: 10px"
plain
>新增</el-button
>
</el-col>
</el-row>
<el-table :data="form.tableData" style="width: 100%">
<el-table-column prop="field" label="栏位" width="180">
<template slot-scope="scope">
<el-select v-model="scope.row.field" placeholder="请选择">
<el-option
v-for="item in fields"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="condition" label="条件" width="180">
<template slot-scope="scope">
<el-select v-model="scope.row.condition" placeholder="请选择">
<el-option
v-for="item in conditions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="searchValue" label="搜索值">
<template slot-scope="scope">
<el-input
v-model="scope.row.searchValue"
placeholder="请输入内容"
></el-input>
</template>
</el-table-column>
<el-table-column prop="relation" label="关联">
<template slot-scope="scope">
<el-select v-model="scope.row.relation" placeholder="请选择" :disabled="scope.row.relationInputShow">
<el-option label="且" value="and"></el-option>
<el-option label="或" value="or"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="deleteData(scope.row.id, scope.$index)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button plain @click="dialogFormVisible = false">取 消</el-button>
<el-button type="danger" @click="savebtn">保 存</el-button>
</div>
</el-dialog>
2.2 细节 在高级搜索弹框页面点击新增 需要控制高级搜索的首个条例不可以编辑 ,新增按钮方法
// 高级搜索-新增
searchAdd(data)
let newsearchObject =
field: "", //栏位
condition: "", //条件
searchValue: "", //搜索值
relation: "and", //关联
relationInputShow:true//控制关联不可选择
;
this.form.tableData.push(newsearchObject);
// 新增首条数据,关联不可选择
if(this.form.tableData.length > 1)
data.forEach((item,index)=>
if(index > 0)
item.relationInputShow = false
)
,
//高级搜索-删除
deleteData(id, index)
// console.log(index);
this.form.tableData.splice(index, 1);
,
// 高级搜索-保存
savebtn()
this.getDataList("gjcx");
,
3.条件代码
- 在vue的脚手架代码中引入
import maintainCondition from "@/api/maintainCondition";
- vue的data数据里面加上
conditions: maintainCondition.conditions, //搜索条件
高级弹框那边已经遍历这个数组 condtions.
- 在 maintainCondition.js中
conditions: [
value: 'like',
label: '类似 like'
,
value: 'not like',
label: '非类似 like'
,
value: '=',
label: '等于='
,
value: '<',
label: '小于<'
,
value: '>',
label: '大于>'
,
value: '<=',
label: '小于等于<='
,
value: '>=',
label: '大于等于>='
,
value: '<>',
label: '不等于<>'
,
value: 'between',
label: '介于between'
,
value: 'not between',
label: '非介于not between'
,
value: 'in',
label: '于范围内in'
,
value: 'not in',
label: '非于范围内not in'
],
4.高级搜索的保存代码
调用了这个方法
// 高级搜索-保存
savebtn()
this.getDataList("gjcx");
,
// 获取数据列表
getDataList(query)
this.$store.dispatch("loading/CHANGE_LOADING", true);
let orderList = this.form.sortTableData2;
if (query === "sort")
orderList = this.form.sortTableData;
let params =
pageNum: this.page.pageIndex,
pageSize: this.page.pageSize,
orderList,
searchConditionList: this.form.tableData,
;
this.dataList = [];
pageListApi(params)
.then((res) =>
if (query === "sort")
// 排序条件保存
this.form.sortTableData2 = this.form.sortTableData.slice(0);
(this.fields = [
label: "处理状态编码",
value: "invstscde",
,
label: "处理状态名称",
value: "invstsnam",
,
]),
(this.form.sortTableData = []);
this.sortDialogFormVisible = false;
let dataList = res.data.list;
dataList.forEach((e) =>
e.disabled = true;
);
this.nums = "";
this.dataList = dataList;
this.page.totalPage = res.data.total;
if (query == "gjcx")
this.dialogFormVisible = false;
this.$store.dispatch("loading/CHANGE_LOADING", false);
)
.catch(() => );
,
后端代码接收
1. controller
package com.citicpru.clmmaint.controller.othermain;
import com.citicpru.clmmaint.biz.AdvancedSearchBiz;
import com.citicpru.clmmaint.biz.SortBiz;
import com.citicpru.clmmaint.biz.othermain.ProcessUpholdBiz;
import com.citicpru.clmwork.dto.othermain.ProcessUpholdDTO;
import com.citicpru.clmwork.entity.ProcessUphold;
import com.citicpru.clmwork.vo.AdvancedSearchVO;
import com.citicpru.clmwork.vo.SearchCondition;
import com.citicpru.clmwork.vo.Sort;
import com.citicpru.clmwork.vo.othermain.ProcessUpholdVO;
import com.github.pagehelper.PageInfo;
import com.sunline.framework.common.constant.RestCodeConstants;
import com.sunline.framework.common.context.BaseContextHandler;
import com.sunline.framework.common.msg.ObjectRestResponse;
import com.sunline.framework.common.rest.BaseController;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.util.CollectionUtils;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
/**
* 处理状态维护表 VO
*
* @author
*/
@Slf4j
@RestController
@RequestMapping("/surversUphold/processUphold")
@Api(value = "处理状态维护", tags = "处理状态维护")
public class ProcessUpholdController extends BaseController<ProcessUpholdBiz, ProcessUpholdDTO>
@Resource
private ProcessUpholdBiz processUpholdBiz;
@Resource
private AdvancedSearchBiz advancedSearchBizJeecg前端高级查询 OR选项 不能生效 问题解决