展示
Dom
<template>
<div class="srch-result-container">
<!--左侧-->
<div class="left">
<div v-for="(item,index) in muneList" :key="index"
:class="(muneIndex==item.mm)?'active':''"
@click="pageEventFun(1,item)"
>{{item.name}}</div>
</div>
<!--右侧-->
<div class="right">
<!--搜索区-->
<div class="ceng1">
<div v-for="(item,index) in srchFormOne" :key="index">
<div>{{item.label}}：</div>
<div>
<!--输入框-->
<el-input class="selectOpt" size="small" style="width: 100px"
v-if="item.type==1"
v-model="srchForm[item.prop]"
></el-input>
<!--下拉选择框-->
<el-select class="selectOpt" size="small" style="width: 120px"
v-else-if="item.type==2"
v-model="srchForm[item.prop]"
popper-class="selectOptDown"
:popper-append-to-body="false"
>
<el-option v-for="item99 in item.options"
:key="item99.value"
:label="item99.label"
:value="item99.value"
></el-option>
</el-select>
<!--日期选择器-->
<el-date-picker v-else-if="item.type==3"
v-model="srchForm[item.prop]"
clearable
value-format="yyyy-MM-dd"
class="selfJStimeClass66"
type="daterange"
:default-time="['00:00:00','23:59:59']"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</div>
<div class="btns">
<div @click="pageEventFun(99)">查询</div>
<div @click="pageEventFun(98)" style="margin-left:20px;">重置</div>
</div>
</div>
<!--表格展示区-->
<div class="ceng2">
<div class="table">
<CompOneTable
:key="timeRender"
ref="CompOneTable"
:tableConfig="tableConfig"
@tableEventCallback="tableEventCallback"
></CompOneTable>
</div>
<div class="pageSize">
<el-pagination
class="myselfPaginationClass"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
background
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</div>
</template>脚本
注意：
（1）CompOneTable组件可参考CompOneTable组件
（2）可根据需求进行左右两侧配置
<script>
import CompOneTable from "@/components/CompOneTable.vue";
import * as api from '@/api/srchResults.js';
export default {
components: {
CompOneTable,
},
data() {
return {
timeRender:999999,//表格重加载标记
//左侧区
muneIndex:0,
muneList:[
{mm:0,name:"列表1"},
{mm:1,name:"列表2"},
],
//搜索区
srchForm:{
int1:"",
int2:"",
int3:"",
int4:"",
int5:"",
sele1:"",
sele2:"",
sele3:"",
date1:[]
},
srchFormOne:[],
srchFormList:[
{
mm:0,
list:[
{type:1,label:"姓名",prop:"int1"},
{type:2,label:"状态",prop:"sele2",options:[{label:"全部",value:""},{label:"正常",value:"0"},{label:"禁用",value:"1"}]},
{type:3,label:"操作时间",prop:"date1"},
]
},
{
mm:0,
list:[
{type:1,label:"姓名",prop:"int1"},
]
}
],
//表格区
currentPage: 1,
pageSize: 20,
total: 0,
tableHead:[
{
mm:0,
list:[
{ type: 62, prop: "name", label: "姓名" },
{ type: 99, label: "操作", width:"140px", btns: [
{ mm: 1, text: "删除" }
]},
]
},
{
mm:1,
list:[
{ type: 62, prop: "name", label: "姓名" }
]
},
],
tableConfig: {
height: 0,
index: true,
checkbox: false,
head: [],
data: [],
},
//接口
srchAjax:[//查询
{mm:0,ajax:"getSearchDatasAPI"},
{mm:1,ajax:"getSearchDatasUser"},
],
deleAjax:[//删除
{mm:0,ajax:"deleMoreDatasAPI"},
{mm:1,ajax:"deleMoreDatasUser"},
],
};
},
created() {
let hh= window.document.body.clientHeight - 240;
this.tableConfig.height=hh
},
mounted() {
this.pageEventFun(1,{mm:this.muneIndex})
},
methods: {
//查询表格
initTable(){
this.tableConfig.data=[]
this.total=0
let ajaxHTTP=this.srchAjax.find(gg=>{return gg.mm==this.muneIndex})["ajax"]
let {int1,int2,int3,int4,int5,sele1,sele2,sele3,date1}=this.srchForm
let params={
page:this.currentPage,
size:this.pageSize
}
if(this.muneIndex==0){
params["name"]=int1
}else if(this.muneIndex==1){
params["name"]=int1
if(date1.length!=0){
params["startDateTime"]=date1[0]+" 00:00:00"
params["endDateTime"]=date1[1]+" 23:59:59"
}
}
api[ajaxHTTP](params).then((res)=>{
if(res.code==200){
this.tableConfig.data=res.data
this.total=res.totalCount
}
})
},
//初始化绑定
initFormOrNumber(mms){
//绑定表单
if(mms.indexOf(1)!=-1){
this.srchForm={
int1:"",
int2:"",
int3:"",
int4:"",
int5:"",
sele1:"",
sele2:"",
sele3:"",
date1:[]
}
//初始化时间
// let time=this.$commonOpt.getDateYMD(2)
// this.srchForm.date1=[time[0]+" 00:00:00",time[1]+" 23:59:59"]
}
//页码
if(mms.indexOf(2)!=-1){
this.currentPage= 1
this.pageSize= 20
this.total= 0
}
//表格列
if(mms.indexOf(3)!=-1){
let inx=this.tableHead.findIndex(gg=>{return gg.mm==this.muneIndex})
if(inx!=-1){
this.tableConfig.head=this.tableHead[inx]["list"]
}
}
//搜索区
if(mms.indexOf(4)!=-1){
let inx=this.srchFormList.findIndex(gg=>{return gg.mm==this.muneIndex})
if(inx!=-1){
this.srchFormOne=this.srchFormList[inx]["list"]
}
}
},
//事件
pageEventFun(mm,item){
if(mm==1){//左侧点击
this.muneIndex=item.mm
this.timeRender=new Date().getTime()
this.initFormOrNumber([1,2,3,4])
this.initTable()
}else if(mm==98){//重置
this.initFormOrNumber([1])
}else if(mm==99){//查询
this.initFormOrNumber([2])
this.initTable()
}
},
//表格回调
tableEventCallback(item, data, item2){
if(item2){
if(item2.mm==1){//删除
this.$confirm("此操作将删除选中项, 是否继续?", "删除", {
confirmButtonText: "确定",
cancelButtonText: "取消",
customClass:"tishiConClass"
}).then(() => {
let ajaxHTTP=this.deleAjax.find(gg=>{return gg.mm==this.muneIndex})["ajax"]
let params={
id:data.id
}
api[ajaxHTTP](params).then((res)=>{
if(res.code==200){
this.initTable()
}
})
}).catch(() => {});
}
}
},
//翻页
handleCurrentChange(val) {
this.initTable();
},
},
};
</script>样式
<style lang="less" scoped>
.srch-result-container {
background: linear-gradient(0deg, #e8f2fc 0%, #f5fbfe 100%);
width: 100%;
height: 100%;
padding: 10px;
overflow: hidden;
.left {
float: left;
width: 200px;
height: 100%;
background: #fff;
border-radius: 6px;
padding:20px 0px;
box-sizing: border-box;
&>div{
line-height: 44px;
text-align: center;
border-radius: 4px;
border: 1px solid transparent;
color: #303133;
font-size: 18px;
font-weight: bold;
cursor: pointer;
&.active{
background: #e7f3ff;
color: #1b65b9;
border: 1px solid #4d92f7;
}
}
}
.right {
position: relative;
z-index: 0;
float: left;
width: calc(~"100% - 220px");
height: 100%;
height: calc(~"100% - 1px");
margin-top: 15px;
.ceng1 {
position: relative;
height: 60px;
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
& > div {
display: flex;
align-items: center;
margin-left: 20px;
& > div:nth-child(1) {
font-size: 16px;
font-family: "SourceHanSansCN-Normal";
color: #000;
}
input {
width: 150px;
}
}
& > div.btns {
& > div {
width: 114px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
color: #fff;
font-weight: bold;
font-size: 18px;
letter-spacing: 2px;
background: linear-gradient(0deg, #8f97fe 0%, #756cf7 100%);
border-radius: 4px;
&.btn2 {
background: linear-gradient(0deg, #ff7777 0%, #f36262 100%);
}
}
}
}
.ceng2 {
height: calc(~"100% - 75px");
border: 2px solid #ffffff;
background: linear-gradient(0deg, #ffffff 0%, #eef7ff 100%);
box-shadow: 5px 11px 32px 0px rgba(54, 78, 114, 0.1);
border-radius: 12px;
padding: 20px 20px 10px 20px;
.table {
height: calc(~"100% - 30px");
}
.pageSize {
display: flex;
justify-content: space-between;
& > div:nth-child(2) {
text-align: right;
}
}
}
}
}
</style>
