16 changed files with 2444 additions and 124 deletions
@ -0,0 +1,611 @@ |
|||
<template> |
|||
<!-- 全面的筛选组件：初级普通筛选 + 高级筛选（按照配置来判断显示情况）--> |
|||
<!-- todo:使用v-if每次重新赋值，与接口查询保持一致 --> |
|||
<div |
|||
class="searchOverallComponent" |
|||
:style="{height:componentsHeight+'px',overflow:isShowMoreList ? 'unset' : 'hidden'}" |
|||
v-show="isShow" |
|||
> |
|||
<div |
|||
class="border-outer" |
|||
> |
|||
<!-- 整体背景遮罩 --> |
|||
<div |
|||
v-if="isShow && isShowMoreList" |
|||
class="fullPageCover" |
|||
:style="{height:searchOverallCoverHeight}" |
|||
></div> |
|||
<div class="title" v-if="isShowMoreList">高级筛选</div> |
|||
<!-- 普通筛选界面 --> |
|||
<searchPrimary |
|||
v-if="primarySearchOption && primarySearchOption.length > 0" |
|||
ref="searchPrimaryRef" |
|||
:showBaseButton="!isShowMoreList" |
|||
:primarySearchOption="primarySearchOption" |
|||
:primarySearchButton="isShowMoreList ? primarySearchButton : primarySearchAllButton" |
|||
@primarySearchButtonClick="primarySearchButtonClick" |
|||
@primarySearchBaseHandle="primarySearchBaseHandle" |
|||
> |
|||
<slot></slot> |
|||
</searchPrimary> |
|||
<!-- 高级筛选界面 --> |
|||
<div v-if="isShow && isShowMoreList" class="moreListOuter"> |
|||
<curren-Form |
|||
class="navFilter" |
|||
size="medium" |
|||
labelWidth="0" |
|||
:searchData="moreListData" |
|||
> |
|||
<el-row :gutter="20"> |
|||
<el-form-item |
|||
v-for="(item, index) in moreListData.filters" |
|||
:key="index" |
|||
> |
|||
<el-col :span="5"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.column'" |
|||
:rules="rules && rules.column ? rules.column : []" |
|||
> |
|||
<el-select |
|||
v-model="item.column" |
|||
placeholder="请选择筛选对象" |
|||
:disabled="item.hide" |
|||
:filterable="true" |
|||
@change="resetSelect(item)" |
|||
> |
|||
<el-option |
|||
v-for="(item, index) in tableColumnsOptions(tableColumns)" |
|||
:key="index" |
|||
:label="item.label" |
|||
:value=" |
|||
item.showProp |
|||
? item.prop + '.' + item.showProp |
|||
: item.prop |
|||
" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.action'" |
|||
> |
|||
<el-select |
|||
v-model="item.action" |
|||
placeholder="请选择条件" |
|||
:disabled="disabledAction || item.column == '' || item.hide ? true : false" |
|||
> |
|||
<!-- moreListOptions.action --> |
|||
<el-option |
|||
v-for="item in formatMoreListOptions(item.column) " |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.value'" |
|||
:rules="rules && rules.value ? rules.value : []" |
|||
> |
|||
<el-select |
|||
v-if="Object.keys(inputOrSelect(item.column)).length > 0" |
|||
v-model="item.value" |
|||
placeholder="请选择内容" |
|||
:disabled="item.column == '' || item.hide ? true : false" |
|||
:filterable="true" |
|||
@change="inputOrSelect(item.column)" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in $staticOptions[ |
|||
inputOrSelect(item.column).filters |
|||
]()" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value=" |
|||
typeof item.value == 'string' |
|||
? item.value |
|||
: String(item.value) |
|||
" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<!-- 日期时间 --> |
|||
<el-date-picker |
|||
v-else-if="getColumnType(item.column) == 'dateTime'" |
|||
type="datetime" |
|||
v-model="item.value" |
|||
:placeholder="'选择日期时间'" |
|||
style="width: 100%" |
|||
format="yyyy-MM-dd HH:mm:ss" |
|||
value-format="yyyy-MM-ddTHH:mm:ss" |
|||
></el-date-picker> |
|||
<el-input |
|||
v-else |
|||
v-model="item.value" |
|||
placeholder="请输入内容" |
|||
:disabled="item.column == '' || item.hide ? true : false" |
|||
clearable |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.logic'" |
|||
> |
|||
<el-select |
|||
v-model="item.logic" |
|||
placeholder="请选择关系" |
|||
:disabled="disabledLogic || item.column == '' || item.hide ? true : false" |
|||
> |
|||
<el-option |
|||
v-for="item in moreListOptions.logic" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="1" v-if="!item.hide"> |
|||
<!-- 删除条件按钮 --> |
|||
<el-button |
|||
type="danger" |
|||
icon="el-icon-minus" |
|||
circle |
|||
size="mini" |
|||
@click="moreListDelete(index,item)" |
|||
></el-button> |
|||
</el-col> |
|||
</el-form-item> |
|||
</el-row> |
|||
</curren-Form> |
|||
<!-- 添加筛选条件 --> |
|||
<div class="moreListPush-btn"> |
|||
<span @click="moreListPush">+ 添加筛选条件</span> |
|||
</div> |
|||
<!-- 按钮 --> |
|||
<div class="moreListBaseBts" v-if="moreListbuttons && moreListbuttons.length > 0" > |
|||
<el-button |
|||
v-for="(item,index) in moreListbuttons" |
|||
:key="index" |
|||
:type="item.type" |
|||
:size="item.size || 'medium'" |
|||
@click="moreListButtonHandle(item)" |
|||
:icon="item.iconRight ? '' : item.icon" |
|||
> |
|||
{{ item.label }} |
|||
<!-- 自定义右侧图标 --> |
|||
<i |
|||
style="margin-left:0" |
|||
v-if="item.iconRight" |
|||
:class="['el-icon--right',item.icon]" |
|||
></i> |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import searchPrimary from "@/components/searchPrimary" |
|||
export default { |
|||
name:'searchOverallComponent', |
|||
components: { |
|||
searchPrimary, |
|||
}, |
|||
watch:{ |
|||
// 监听显示切换 |
|||
showSearchOverall(n){ |
|||
// 控制是否显示 + 动画效果处理 |
|||
// 没有普通查询配置 |
|||
if(this.primarySearchOption.length <= 0){ |
|||
this.changeSearchOverallShow(n) |
|||
this.changeMoreListShow(n) |
|||
return |
|||
} |
|||
// 有普通查询配置 |
|||
if(n){ |
|||
this.changeSearchOverallShow(n) |
|||
this.changeMoreListShow(false) |
|||
} |
|||
this.$nextTick(()=>{ |
|||
if(n){ |
|||
this.componentsHeight = this.getSearchPrimaryHeight() + 20 |
|||
}else{ |
|||
this.componentsHeight = 0 |
|||
this.changeMoreListShow(false) |
|||
// setTimeout(()=>{ |
|||
// this.changeSearchOverallShow(n) |
|||
// },500) |
|||
} |
|||
}) |
|||
this.setOverallSearchData(this.httpOverallSearchData) |
|||
}, |
|||
// 监听接口搜索的筛选数据 |
|||
httpOverallSearchData(n,o){ |
|||
this.setOverallSearchData(n) |
|||
}, |
|||
isShowMoreList(){ |
|||
this.setOverallSearchData(this.httpOverallSearchData) |
|||
} |
|||
}, |
|||
props: { |
|||
// 筛选遮罩高度 |
|||
searchOverallCoverHeight:{ |
|||
type: String, |
|||
default: 'calc(100vh - 200px)' |
|||
}, |
|||
// 禁用选择条件 |
|||
disabledAction:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 禁用选择关系 |
|||
disabledLogic:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示全面筛选组件 |
|||
showSearchOverall:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示高级筛选 |
|||
showMoreSearch:{ |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
//普通筛选绑定表单数据 |
|||
primarySearchOption: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//普通筛选自定义按钮 |
|||
primarySearchButton:{ |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 显示数据配置 |
|||
tableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 当前接口中的筛选数据（用于同步全面筛选的数据） |
|||
httpOverallSearchData:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 自定义配置条件 |
|||
filterActionOptions:{ |
|||
type: Array, |
|||
default: null |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 普通筛选自定义所有按钮(包括高级筛选) |
|||
primarySearchAllButton:[], |
|||
// 高级筛选列表是否显示 |
|||
isShowMoreList:false, |
|||
// 组件高度（用于动画效果） |
|||
componentsHeight:0, |
|||
// 是否显示总组件，与showSearchOverall相通（重新定义一遍目的是为了动画效果） |
|||
isShow:false, |
|||
// 高级筛选列表内部按钮 |
|||
moreListbuttons: [ |
|||
{ label: "搜索", type: "primary", name: "moreList-search" }, |
|||
{ label: '重置', name: 'moreList-reset' }, |
|||
{ label:'收起筛选', name:'moreList-up', type: 'text', icon:'el-icon-arrow-up', iconRight:true} |
|||
], |
|||
// 高级筛选数据列表/值 |
|||
moreListData: {filters:[]}, |
|||
// 高级筛选条件列表配置 |
|||
moreListOptions: { |
|||
action: [{ |
|||
value: '==', |
|||
label: '等于' |
|||
}, { |
|||
value: '!=', |
|||
label: '不等于' |
|||
}, { |
|||
value: '>', |
|||
label: '大于' |
|||
}, { |
|||
value: '<', |
|||
label: '小于' |
|||
}, { |
|||
value: '>=', |
|||
label: '大于等于' |
|||
}, { |
|||
value: '<=', |
|||
label: '小于等于' |
|||
}, { |
|||
value: 'Like', |
|||
label: '包含' |
|||
}, { |
|||
value: 'NotLike', |
|||
label: '不包含' |
|||
}, |
|||
// { |
|||
// value: 'In', |
|||
// label: '包含' |
|||
// }, { |
|||
// value: 'NotIn', |
|||
// label: '不包含' |
|||
// } |
|||
], |
|||
logic: [ |
|||
{ |
|||
value: 'And', |
|||
label: '并且' |
|||
}, |
|||
{ |
|||
value: 'Or', |
|||
label: '或者' |
|||
} |
|||
], |
|||
}, |
|||
// 高级筛选rules暂未使用验证，但是不能删除rules定义 |
|||
// todo:优化后放开，优化内容：如果选择了筛选对象【column】，则验证【value】，否则都不验证 |
|||
rules:{ |
|||
// column: [ |
|||
// { required: true, message: '请选择筛选对象', trigger: 'change' } |
|||
// ], |
|||
// value: [ |
|||
// { required: true, message: '请输入内容', trigger: 'blur' } |
|||
// ], |
|||
}, |
|||
} |
|||
}, |
|||
created() { |
|||
this.moreListPush() |
|||
}, |
|||
mounted() { |
|||
// 配置普通筛选默认按钮(是否包含高级筛选按钮) |
|||
this.setPrimarySearchAllButton() |
|||
}, |
|||
methods: { |
|||
// 获取普通筛选的高度,外部也有使用，用于动画样式 |
|||
getSearchPrimaryHeight(){ |
|||
return document.getElementsByClassName('searchPrimaryComponent')[0].clientHeight |
|||
}, |
|||
// 配置普通筛选自定义按钮 |
|||
setPrimarySearchAllButton(){ |
|||
let _more_btn = [{ |
|||
label:'高级筛选', |
|||
name:'more', |
|||
type: 'text', |
|||
icon:'el-icon-arrow-down', |
|||
iconRight:true |
|||
}] |
|||
if(this.showMoreSearch){ |
|||
this.primarySearchAllButton = _more_btn.concat(this.primarySearchButton) |
|||
}else{ |
|||
this.primarySearchAllButton= this.primarySearchButton |
|||
} |
|||
}, |
|||
// 普通查询基础按钮点击事件 |
|||
primarySearchBaseHandle(item,data, option, that){ |
|||
this.overallSearchFormClick(item,data, option, that) |
|||
}, |
|||
// 普通筛选自定义按钮点击事件 |
|||
primarySearchButtonClick( item,data, option,that){ |
|||
// 点击[高级筛选]按钮 |
|||
if(item.name == 'more'){ |
|||
this.changeMoreListShow(true) |
|||
} |
|||
this.overallSearchFormClick(item,data, option, that) |
|||
}, |
|||
// 高级筛选基础按钮点击事件 |
|||
moreListButtonHandle(item){ |
|||
this.overallSearchFormClick(item) |
|||
}, |
|||
// 设置moreList的列表值（默认按tableColumns设置） |
|||
tableColumnsOptions(val) { |
|||
const data = JSON.parse(JSON.stringify(val)); |
|||
let num = 0 |
|||
val.forEach((item, index) => { |
|||
if (item.showProp) { |
|||
data.splice(index - num, 1) |
|||
num++ |
|||
} |
|||
}) |
|||
return data |
|||
}, |
|||
// 判断筛选类型是否是时间格式 |
|||
getColumnType(val) { |
|||
var columnsType = this.tableColumns.filter(item => item.prop == val) |
|||
if (columnsType.length > 0) { |
|||
if (columnsType[0].type) { |
|||
return columnsType[0].type |
|||
} |
|||
} else { |
|||
return '' |
|||
} |
|||
}, |
|||
// 筛选条件改变重置其他项 |
|||
resetSelect(val) { |
|||
val.action = "==" |
|||
val.value = "" |
|||
}, |
|||
// 根据数据内容约束条件选项 |
|||
formatMoreListOptions(val) { |
|||
// 自定义配置条件filterActionOptions |
|||
if(this.filterActionOptions){ |
|||
this.moreListOptions.action = this.filterActionOptions |
|||
return this.moreListOptions.action |
|||
} |
|||
if (val) { |
|||
for(var i =0; i< this.tableColumns.length; i++) { |
|||
if (val == this.tableColumns[i].prop) { |
|||
if (this.tableColumns[i].filters) { |
|||
return this.moreListOptions.action.filter(item => item.value == '==' || item.value == '!=') |
|||
} else if (this.tableColumns[i].type == 'dateTime') { |
|||
return this.moreListOptions.action.filter(item => |
|||
item.value == '==' || |
|||
item.value == '!=' || |
|||
item.value == '>' || |
|||
item.value == '<' || |
|||
item.value == '>=' || |
|||
item.value == '<=' ) |
|||
} else { |
|||
return this.moreListOptions.action |
|||
} |
|||
} |
|||
} |
|||
} |
|||
return this.moreListOptions.action |
|||
}, |
|||
// 设置moreList列表的内容项是input还是select |
|||
inputOrSelect(val) { |
|||
let data |
|||
if (val) { |
|||
this.tableColumns.forEach((key) => { |
|||
if (val == key.prop) { |
|||
if (key.filters) { |
|||
data = key |
|||
} else { |
|||
data = {} |
|||
} |
|||
} |
|||
}) |
|||
} else { |
|||
data = {} |
|||
} |
|||
return data |
|||
}, |
|||
// 高级筛选列表-删除筛选条件行 |
|||
moreListDelete(val,item) { |
|||
if (this.moreListData.filters.length == 1) { |
|||
this.$warningMsg('必须保留一条筛选条件！') |
|||
} else { |
|||
this.$confirm('您确定删除吗, 是否继续?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.moreListData.filters.splice(val, 1) |
|||
}).catch(() => { |
|||
// this.modalAppendToBody = false |
|||
}); |
|||
} |
|||
this.overallSearchFormClick({name:'moreList-deleteRow'}) |
|||
}, |
|||
// 高级筛选列表-添加筛选条件行 |
|||
moreListPush() { |
|||
let data = { |
|||
logic: "And", |
|||
column: "", |
|||
action: "==", |
|||
value: "" |
|||
} |
|||
this.moreListData.filters.push(data) |
|||
this.overallSearchFormClick({name:'moreList-addRow'}) |
|||
}, |
|||
// 重置数据，高级（单纯节点显示数据，不重新查询接口） |
|||
resetMoreListData(){ |
|||
this.moreListData = {filters:[]} |
|||
this.moreListPush() |
|||
}, |
|||
// 设置数据值，高级（单纯节点显示数据，不重新查询接口） |
|||
setMoreListData(val){ |
|||
this.moreListData = JSON.parse(JSON.stringify(val)) |
|||
}, |
|||
// 重置数据，普通+高级（单纯节点显示数据，不重新查询接口） |
|||
resetOverallSearchData(){ |
|||
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.resetPrimarySearchData(); |
|||
this.resetMoreListData() |
|||
}, |
|||
// 设置数据，普通+高级（单纯节点显示数据，不重新查询接口） |
|||
setOverallSearchData(data){ |
|||
// 普通筛选数据同步 |
|||
if(data && data.params){ |
|||
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.setPrimarySearchData(data.params) |
|||
}else{ |
|||
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.resetPrimarySearchData() |
|||
} |
|||
// 高级筛选数据同步 |
|||
if(data && data.moreList){ |
|||
let _list = {filters:[]} |
|||
data.moreList.filters.forEach(item=>{ |
|||
if(String(item.column).length > 0 && String(item.value).length > 0){ |
|||
_list.filters.push(item) |
|||
} |
|||
}) |
|||
if(_list.filters.length <= 0){ |
|||
_list.filters.push({ |
|||
logic: "And", |
|||
column: "", |
|||
action: "==", |
|||
value: "" |
|||
}) |
|||
} |
|||
this.setMoreListData(_list) |
|||
}else{ |
|||
this.resetMoreListData() |
|||
} |
|||
}, |
|||
// 展开-收缩高级筛选 |
|||
changeMoreListShow(val){ |
|||
this.isShowMoreList = val || false |
|||
// 如果没有初级筛选 |
|||
if(!this.primarySearchOption || this.primarySearchOption.length <= 0){ |
|||
// 关闭时候直接整个全面筛选组件 |
|||
if(!this.isShowMoreList){ |
|||
this.isShow = false |
|||
this.$emit("getShowSearchOverall",this.isShow) |
|||
} |
|||
} |
|||
}, |
|||
// 关闭整个全面组件 |
|||
changeSearchOverallShow(val){ |
|||
if(!val){ |
|||
this.changeMoreListShow(false) |
|||
} |
|||
this.isShow = val || false |
|||
this.$emit("getShowSearchOverall",this.isShow) |
|||
}, |
|||
// 全面筛选组件所有按钮事件 |
|||
overallSearchFormClick(item,data, option) { |
|||
// 页面功能 |
|||
// 收缩筛选 |
|||
if(item.name == 'moreList-up'){ |
|||
this.changeMoreListShow(false) |
|||
} |
|||
// 高级筛选内-重置 || 普通格式-重置 |
|||
else if(item.name == "moreList-reset" || item.name == "reset"){ |
|||
this.resetOverallSearchData() |
|||
} |
|||
// 抛出函数传参 |
|||
let _searchPrimaryRef = this.$refs.searchPrimaryRef |
|||
let _options = { |
|||
item:item, |
|||
data_primary:_searchPrimaryRef ? _searchPrimaryRef.getPrimarySearchData() : null, |
|||
data_moreList:this.moreListData, |
|||
option_primary:this.primarySearchOption, |
|||
option_moreList:this.tableColumns, |
|||
vm_primary:_searchPrimaryRef, |
|||
vm_moreList:this |
|||
} |
|||
this.$emit("overallSearchFormClick",_options) |
|||
}, |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "./style/index.scss"; |
|||
</style> |
|||
@ -0,0 +1,83 @@ |
|||
.searchOverallComponent{ |
|||
height: 0; |
|||
transition:all 0.5s; |
|||
z-index: 1; |
|||
overflow: hidden; |
|||
|
|||
.border-outer{ |
|||
position: relative; |
|||
background: #f8f9fb; |
|||
padding: 10px 20px 0; |
|||
border: #eff0f2 solid 1px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.fullPageCover{ |
|||
position: absolute; |
|||
background: rgba(255, 255, 255, 0.2); |
|||
left: 0; |
|||
right: 0; |
|||
// height: calc(100vh - 200px); |
|||
cursor: no-drop; |
|||
} |
|||
|
|||
.moreListOuter{ |
|||
margin-top: 10px; |
|||
position: relative; |
|||
} |
|||
|
|||
::v-deep .navFilter { |
|||
// display: flex; |
|||
// flex-direction: column; |
|||
// width: 100%; |
|||
// height: 100%; |
|||
max-height: 30vh; |
|||
overflow: auto; |
|||
|
|||
.el-form { |
|||
// flex: 1; |
|||
// padding-left: 100px; |
|||
// padding-right: 100px; |
|||
display: flex; |
|||
align-content: flex-start; |
|||
flex-wrap: wrap; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
|
|||
.el-row{ |
|||
margin: 0 !important; |
|||
margin-left: -5px !important; |
|||
} |
|||
|
|||
|
|||
.el-select{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.title{ |
|||
padding: 10px 0 15px 0; |
|||
font-weight: bold; |
|||
color: #333; |
|||
} |
|||
|
|||
.moreListPush-btn { |
|||
width: 100%; |
|||
padding-left: 5px; |
|||
color: rgb(64, 158, 255); |
|||
|
|||
span { |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: blue; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.moreListBaseBts{ |
|||
padding: 20px 0; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,402 @@ |
|||
<template> |
|||
<div class="tablePagination"> |
|||
<!-- 头部按钮 --> |
|||
<div class="table-nav"> |
|||
<curren-Button |
|||
ref="tablePagination_topNav" |
|||
:Butttondata="currenButtonData" |
|||
@tableButtonClick="topbutton" |
|||
@quicklySearchClick="quicklySearchClick" |
|||
@quicklySearchClear="quicklySearchClear" |
|||
:quicklySearchOption="quicklySearchOption" |
|||
> |
|||
</curren-Button> |
|||
<slot name="tableTopSlot"></slot> |
|||
</div> |
|||
<!-- 全面搜索（普通+高级整合） --> |
|||
<searchOverall |
|||
ref="searchOverallRef" |
|||
:searchOverallCoverHeight="searchOverallCoverHeight" |
|||
:showSearchOverall="showSearchOverall" |
|||
@getShowSearchOverall="getShowSearchOverall" |
|||
:primarySearchOption="primarySearchOption" |
|||
:primarySearchButton="primarySearchButton" |
|||
:showMoreSearch="showMoreSearch" |
|||
:tableColumns="tableColumns" |
|||
@overallSearchFormClick="overallSearchFormClick" |
|||
:httpOverallSearchData="httpOverallSearchData" |
|||
> |
|||
<!-- 插槽预留 --> |
|||
<slot name="searchPrimarySlot"></slot> |
|||
</searchOverall> |
|||
<!-- 字段设置弹窗 --> |
|||
<rowDrop |
|||
@radio="rowDrop" |
|||
:tableColumns="tableColumns" |
|||
:visible="rowDropVisible" |
|||
@closeRowDrop="closeRowDrop" |
|||
:source="rowSource" |
|||
:innerMaxHeight="rowMaxHeight" |
|||
></rowDrop> |
|||
<!-- 列表 --> |
|||
<div class="uTableOuter" ref="uTableOuterRef" :style="{height:uTableOuterHeight + 'px',overflow:'hidden'}"> |
|||
<umyTable |
|||
ref="tablePaginationTableRef" |
|||
:isUpdate="isUpdate" |
|||
:tableLoading="tableLoading" |
|||
:tableData="tableData" |
|||
:tableColumns="tableColumns | isTableColumns" |
|||
:isShowIndex="isShowIndex" |
|||
:selectionTable="tableSelection" |
|||
:setUTableHeight="setUTableHeight || uTableTopHeight" |
|||
@sortChange="sortChange" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
@inlineDialog="inlineDialog" |
|||
:buttonOperationList_left="buttonOperationList_left" |
|||
@buttonOperationClick_left="buttonOperationClick_left" |
|||
:buttonOperationList_right="buttonOperationList_right" |
|||
@buttonOperationClick_right="buttonOperationClick_right" |
|||
:tableBorder="true" |
|||
:firstFixed="true" |
|||
:cellStyle = "cellStyle" |
|||
:showOverflowTooltip="showOverflowTooltip" |
|||
> |
|||
<template> |
|||
<slot></slot> |
|||
</template> |
|||
</umyTable> |
|||
</div> |
|||
<!-- 页码 --> |
|||
<pagination |
|||
:totalCount="totalCount" |
|||
:pagesizeProps="MaxResultCount" |
|||
:currentPageProps="currentPageProps" |
|||
@SizeChange="alterResultCount" |
|||
@CurrentChange="alertoldSkipCount" |
|||
></pagination> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import currenButton from "@/components/currenButton" |
|||
import pagination from "@/components/Pagination" |
|||
import searchOverall from "@/components/searchOverall" |
|||
import rowDrop from "@/components/rowDrop/index.vue" |
|||
import { getParentNode } from '@/utils' |
|||
export default { |
|||
name: 'tablePagination', |
|||
components: { |
|||
pagination, |
|||
currenButton, |
|||
searchOverall, |
|||
rowDrop |
|||
}, |
|||
props: { |
|||
rowMaxHeight:{ |
|||
type:String, |
|||
default:'calc(90vh - 280px)' |
|||
}, |
|||
// 筛选高度 |
|||
searchOverallCoverHeight:{ |
|||
type: String, |
|||
default: 'calc(100vh - 200px)' |
|||
}, |
|||
// 已app-main高度为100% 需要减掉的高度 |
|||
setUTableHeight: { |
|||
type: Number, |
|||
default: null |
|||
}, |
|||
// 超出内容是否提示 |
|||
showOverflowTooltip:{ |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// 显示搜索配置 |
|||
quicklySearchOption:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 表格上方头部按钮配置 |
|||
currenButtonData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 操作列按钮(左侧) |
|||
buttonOperationList_left:{ |
|||
type: Array, |
|||
default: null, |
|||
}, |
|||
// 操作列按钮(右侧) |
|||
buttonOperationList_right:{ |
|||
type: Function, |
|||
default: null, |
|||
}, |
|||
// 列表数据 |
|||
tableData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 列表列配置 + 高级筛选配置 |
|||
tableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 复选框 |
|||
tableSelection: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// table页码总数 |
|||
totalCount: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// table组件上的loading |
|||
tableLoading: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 页码每页显示数 |
|||
MaxResultCount: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 页码当前页配置 |
|||
currentPageProps: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
// 是否显示序号 |
|||
isShowIndex: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// 选择当前行数据 |
|||
multipleSelection: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 以下为全面筛选组件配置 |
|||
//初级筛选绑定表单配置 |
|||
primarySearchOption: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//初级筛选表单自定义按钮 |
|||
primarySearchButton: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 是否显示高级筛选 |
|||
showMoreSearch:{ |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
// 当前接口中的筛选数据（用于同步全面筛选的数据） |
|||
httpOverallSearchData:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
cellStyle: { |
|||
type: Function, |
|||
default: () => { |
|||
return Function; |
|||
} |
|||
}, |
|||
// 字段设置来源（列表、列表-明细、明细页面） |
|||
rowSource:{ |
|||
type:String, |
|||
default:'list_api' |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
// 字段设置是否显示 |
|||
rowDropVisible: false, |
|||
// table 重新渲染所需key |
|||
isUpdate: false, |
|||
// 除去table的高度 |
|||
uTableTopHeight:165, |
|||
// table外部高度控制，用于点击筛选动画处理 |
|||
uTableOuterHeight:null, |
|||
// table外部最初始化高度，用于点击筛选动画处理 |
|||
uTableOuterHeight_init:null, |
|||
//table操作按钮 |
|||
Butttondata: [ |
|||
{ |
|||
type: 'danger', |
|||
icon: 'el-icon-delete', |
|||
label: '批量删除', |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'warning', |
|||
icon: 'el-icon-edit', |
|||
label: '批量修改状态', |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'success', |
|||
icon: 'el-icon-upload2', |
|||
label: '批量导出', |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'info', |
|||
icon: 'el-icon-printer', |
|||
label: '批量打印', |
|||
size: 'mini' |
|||
}, |
|||
], |
|||
// 全面筛选组件配置 |
|||
// 显示全面筛选组件 |
|||
showSearchOverall:false, |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.uTableOuterHeight = this.$refs.tablePaginationTableRef.getTableHeight() |
|||
this.uTableOuterHeight_init = Number(JSON.stringify(this.uTableOuterHeight)) |
|||
|
|||
// 点击外部，字段设置弹窗隐藏 |
|||
document.addEventListener('click',(e)=>{ |
|||
if(!this.rowDropVisible)return |
|||
let _class = "rowDropNotHideItem" |
|||
let _hasParent = getParentNode(e.target,_class) |
|||
let _current_class = e.target._prevClass || e.target.className |
|||
let _hasCurrent = _current_class ? String(_current_class).includes(_class) : false |
|||
if(!_hasParent && !_hasCurrent){ |
|||
this.closeRowDrop() |
|||
} |
|||
}) |
|||
}, |
|||
methods: { |
|||
rowDrop(data,type) { |
|||
this.$emit('rowDrop',data,type) |
|||
this.$nextTick(()=>{ |
|||
this.isUpdate = !this.isUpdate |
|||
}) |
|||
}, |
|||
//点击常用按钮 |
|||
topbutton (val,item) { |
|||
// 筛选按钮 + table高度变化 + 动画效果（勿动顺序） |
|||
if(val=="filter"){ |
|||
this.showSearchOverall = !this.showSearchOverall |
|||
// 有普通查询配置 |
|||
if(this.primarySearchOption && this.primarySearchOption.length > 0){ |
|||
this.$nextTick(()=>{ |
|||
let _search_height = this.$refs.searchOverallRef.getSearchPrimaryHeight() |
|||
if(this.showSearchOverall){ |
|||
let _margin = 20 |
|||
this.uTableOuterHeight = this.uTableOuterHeight_init - _search_height - _margin |
|||
setTimeout(()=>{ |
|||
this.uTableTopHeight += _search_height + _margin |
|||
},0) |
|||
}else{ |
|||
this.uTableOuterHeight = this.uTableOuterHeight_init |
|||
setTimeout(()=>{ |
|||
this.uTableTopHeight = 165 |
|||
},0) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
// 字段设置 |
|||
else if (val == 'field') { |
|||
this.rowDropVisible = !this.rowDropVisible |
|||
} |
|||
this.$emit("topbutton", val,item) |
|||
}, |
|||
// 快速搜索 - 搜索按钮 |
|||
quicklySearchClick (val,option) { |
|||
this.$emit("quicklySearchClick", val,option,this.$refs.searchOverallRef) |
|||
}, |
|||
// 快速搜索 - 清除搜索 |
|||
quicklySearchClear (val,option) { |
|||
// 判断是否有筛选按钮 |
|||
let hasSearch = false |
|||
this.currenButtonData.forEach(item=>{ |
|||
if(item.name == 'filter'){ |
|||
hasSearch = true |
|||
return |
|||
} |
|||
}) |
|||
this.$emit("quicklySearchClear", val,option,this.$refs.searchOverallRef,hasSearch ) |
|||
}, |
|||
//接收分页组件emit改变每页最大页数 |
|||
alterResultCount (val) { |
|||
this.$emit('alterResultCount', val) |
|||
}, |
|||
//接收分页组件emit改变当前页 |
|||
alertoldSkipCount (val) { |
|||
this.$emit('alertoldSkipCount', val) |
|||
}, |
|||
//点击name提交emit打开编辑页面 |
|||
inlineDialog (row) { |
|||
this.$emit("inlineDialog", row) |
|||
}, |
|||
//点击selection框 |
|||
handleSelectionChange (val) { |
|||
this.$emit("handleSelectionChange", val) |
|||
}, |
|||
//排序 |
|||
sortChange (data) { |
|||
this.$emit('sortChange', data) |
|||
}, |
|||
//点击table操作列(左侧)按钮 |
|||
buttonOperationClick_left(row, item, index) { |
|||
this.$emit("buttonOperationClick_left", row, item, index); |
|||
}, |
|||
//点击table操作列(右侧)按钮 |
|||
buttonOperationClick_right(row, item, index) { |
|||
this.$emit("buttonOperationClick_right", row, item, index); |
|||
}, |
|||
// 全面筛选组件配置 |
|||
// 全面筛选组件内部显示/隐藏更改触发，同步当前的showSearchOverall值 |
|||
getShowSearchOverall(val){ |
|||
this.showSearchOverall = val || false |
|||
}, |
|||
// 全面筛选组件所有按钮事件 |
|||
overallSearchFormClick(options){ |
|||
//增加快速搜索实体 |
|||
options.vm_quickly = this.$refs.tablePagination_topNav.getQuicklySearchDom() |
|||
this.$emit("overallSearchFormClick", options) |
|||
}, |
|||
// 关闭字段设置 |
|||
closeRowDrop() { |
|||
this.rowDropVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.uTableOuter{ |
|||
transition:all 0.5s; |
|||
overflow: hidden; |
|||
} |
|||
.tablePagination { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.table-nav { |
|||
padding-bottom: 15px; |
|||
} |
|||
|
|||
.el-table { |
|||
flex: 1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,611 @@ |
|||
<template> |
|||
<!-- 全面的筛选组件：初级普通筛选 + 高级筛选（按照配置来判断显示情况）--> |
|||
<!-- todo:使用v-if每次重新赋值，与接口查询保持一致 --> |
|||
<div |
|||
class="searchOverallComponent" |
|||
:style="{height:componentsHeight+'px',overflow:isShowMoreList ? 'unset' : 'hidden'}" |
|||
v-show="isShow" |
|||
> |
|||
<div |
|||
class="border-outer" |
|||
> |
|||
<!-- 整体背景遮罩 --> |
|||
<div |
|||
v-if="isShow && isShowMoreList" |
|||
class="fullPageCover" |
|||
:style="{height:searchOverallCoverHeight}" |
|||
></div> |
|||
<div class="title" v-if="isShowMoreList">高级筛选</div> |
|||
<!-- 普通筛选界面 --> |
|||
<searchPrimary |
|||
v-if="primarySearchOption && primarySearchOption.length > 0" |
|||
ref="searchPrimaryRef" |
|||
:showBaseButton="!isShowMoreList" |
|||
:primarySearchOption="primarySearchOption" |
|||
:primarySearchButton="isShowMoreList ? primarySearchButton : primarySearchAllButton" |
|||
@primarySearchButtonClick="primarySearchButtonClick" |
|||
@primarySearchBaseHandle="primarySearchBaseHandle" |
|||
> |
|||
<slot></slot> |
|||
</searchPrimary> |
|||
<!-- 高级筛选界面 --> |
|||
<div v-if="isShow && isShowMoreList" class="moreListOuter"> |
|||
<curren-Form |
|||
class="navFilter" |
|||
size="medium" |
|||
labelWidth="0" |
|||
:searchData="moreListData" |
|||
> |
|||
<el-row :gutter="20"> |
|||
<el-form-item |
|||
v-for="(item, index) in moreListData.filters" |
|||
:key="index" |
|||
> |
|||
<el-col :span="5"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.column'" |
|||
:rules="rules && rules.column ? rules.column : []" |
|||
> |
|||
<el-select |
|||
v-model="item.column" |
|||
placeholder="请选择筛选对象" |
|||
:disabled="item.hide" |
|||
:filterable="true" |
|||
@change="resetSelect(item)" |
|||
> |
|||
<el-option |
|||
v-for="(item, index) in tableColumnsOptions(tableColumns)" |
|||
:key="index" |
|||
:label="item.label" |
|||
:value=" |
|||
item.showProp |
|||
? item.prop + '.' + item.showProp |
|||
: item.prop |
|||
" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.action'" |
|||
> |
|||
<el-select |
|||
v-model="item.action" |
|||
placeholder="请选择条件" |
|||
:disabled="disabledAction || item.column == '' || item.hide ? true : false" |
|||
> |
|||
<!-- moreListOptions.action --> |
|||
<el-option |
|||
v-for="item in formatMoreListOptions(item.column) " |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.value'" |
|||
:rules="rules && rules.value ? rules.value : []" |
|||
> |
|||
<el-select |
|||
v-if="Object.keys(inputOrSelect(item.column)).length > 0" |
|||
v-model="item.value" |
|||
placeholder="请选择内容" |
|||
:disabled="item.column == '' || item.hide ? true : false" |
|||
:filterable="true" |
|||
@change="inputOrSelect(item.column)" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in $staticOptions[ |
|||
inputOrSelect(item.column).filters |
|||
]()" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value=" |
|||
typeof item.value == 'string' |
|||
? item.value |
|||
: String(item.value) |
|||
" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<!-- 日期时间 --> |
|||
<el-date-picker |
|||
v-else-if="getColumnType(item.column) == 'dateTime'" |
|||
type="datetime" |
|||
v-model="item.value" |
|||
:placeholder="'选择日期时间'" |
|||
style="width: 100%" |
|||
format="yyyy-MM-dd HH:mm:ss" |
|||
value-format="yyyy-MM-ddTHH:mm:ss" |
|||
></el-date-picker> |
|||
<el-input |
|||
v-else |
|||
v-model="item.value" |
|||
placeholder="请输入内容" |
|||
:disabled="item.column == '' || item.hide ? true : false" |
|||
clearable |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.logic'" |
|||
> |
|||
<el-select |
|||
v-model="item.logic" |
|||
placeholder="请选择关系" |
|||
:disabled="disabledLogic || item.column == '' || item.hide ? true : false" |
|||
> |
|||
<el-option |
|||
v-for="item in moreListOptions.logic" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="1" v-if="!item.hide"> |
|||
<!-- 删除条件按钮 --> |
|||
<el-button |
|||
type="danger" |
|||
icon="el-icon-minus" |
|||
circle |
|||
size="mini" |
|||
@click="moreListDelete(index,item)" |
|||
></el-button> |
|||
</el-col> |
|||
</el-form-item> |
|||
</el-row> |
|||
</curren-Form> |
|||
<!-- 添加筛选条件 --> |
|||
<div class="moreListPush-btn"> |
|||
<span @click="moreListPush">+ 添加筛选条件</span> |
|||
</div> |
|||
<!-- 按钮 --> |
|||
<div class="moreListBaseBts" v-if="moreListbuttons && moreListbuttons.length > 0" > |
|||
<el-button |
|||
v-for="(item,index) in moreListbuttons" |
|||
:key="index" |
|||
:type="item.type" |
|||
:size="item.size || 'medium'" |
|||
@click="moreListButtonHandle(item)" |
|||
:icon="item.iconRight ? '' : item.icon" |
|||
> |
|||
{{ item.label }} |
|||
<!-- 自定义右侧图标 --> |
|||
<i |
|||
style="margin-left:0" |
|||
v-if="item.iconRight" |
|||
:class="['el-icon--right',item.icon]" |
|||
></i> |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import searchPrimary from "@/components/searchPrimary" |
|||
export default { |
|||
name:'searchOverallComponent', |
|||
components: { |
|||
searchPrimary, |
|||
}, |
|||
watch:{ |
|||
// 监听显示切换 |
|||
showSearchOverall(n){ |
|||
// 控制是否显示 + 动画效果处理 |
|||
// 没有普通查询配置 |
|||
if(this.primarySearchOption.length <= 0){ |
|||
this.changeSearchOverallShow(n) |
|||
this.changeMoreListShow(n) |
|||
return |
|||
} |
|||
// 有普通查询配置 |
|||
if(n){ |
|||
this.changeSearchOverallShow(n) |
|||
this.changeMoreListShow(false) |
|||
} |
|||
this.$nextTick(()=>{ |
|||
if(n){ |
|||
this.componentsHeight = this.getSearchPrimaryHeight() + 20 |
|||
}else{ |
|||
this.componentsHeight = 0 |
|||
this.changeMoreListShow(false) |
|||
// setTimeout(()=>{ |
|||
// this.changeSearchOverallShow(n) |
|||
// },500) |
|||
} |
|||
}) |
|||
this.setOverallSearchData(this.httpOverallSearchData) |
|||
}, |
|||
// 监听接口搜索的筛选数据 |
|||
httpOverallSearchData(n,o){ |
|||
this.setOverallSearchData(n) |
|||
}, |
|||
isShowMoreList(){ |
|||
this.setOverallSearchData(this.httpOverallSearchData) |
|||
} |
|||
}, |
|||
props: { |
|||
// 筛选遮罩高度 |
|||
searchOverallCoverHeight:{ |
|||
type: String, |
|||
default: 'calc(100vh - 200px)' |
|||
}, |
|||
// 禁用选择条件 |
|||
disabledAction:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 禁用选择关系 |
|||
disabledLogic:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示全面筛选组件 |
|||
showSearchOverall:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否显示高级筛选 |
|||
showMoreSearch:{ |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
//普通筛选绑定表单数据 |
|||
primarySearchOption: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//普通筛选自定义按钮 |
|||
primarySearchButton:{ |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 显示数据配置 |
|||
tableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 当前接口中的筛选数据（用于同步全面筛选的数据） |
|||
httpOverallSearchData:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 自定义配置条件 |
|||
filterActionOptions:{ |
|||
type: Array, |
|||
default: null |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 普通筛选自定义所有按钮(包括高级筛选) |
|||
primarySearchAllButton:[], |
|||
// 高级筛选列表是否显示 |
|||
isShowMoreList:false, |
|||
// 组件高度（用于动画效果） |
|||
componentsHeight:0, |
|||
// 是否显示总组件，与showSearchOverall相通（重新定义一遍目的是为了动画效果） |
|||
isShow:false, |
|||
// 高级筛选列表内部按钮 |
|||
moreListbuttons: [ |
|||
{ label: "搜索", type: "primary", name: "moreList-search" }, |
|||
{ label: '重置', name: 'moreList-reset' }, |
|||
{ label:'收起筛选', name:'moreList-up', type: 'text', icon:'el-icon-arrow-up', iconRight:true} |
|||
], |
|||
// 高级筛选数据列表/值 |
|||
moreListData: {filters:[]}, |
|||
// 高级筛选条件列表配置 |
|||
moreListOptions: { |
|||
action: [{ |
|||
value: '==', |
|||
label: '等于' |
|||
}, { |
|||
value: '!=', |
|||
label: '不等于' |
|||
}, { |
|||
value: '>', |
|||
label: '大于' |
|||
}, { |
|||
value: '<', |
|||
label: '小于' |
|||
}, { |
|||
value: '>=', |
|||
label: '大于等于' |
|||
}, { |
|||
value: '<=', |
|||
label: '小于等于' |
|||
}, { |
|||
value: 'Like', |
|||
label: '包含' |
|||
}, { |
|||
value: 'NotLike', |
|||
label: '不包含' |
|||
}, |
|||
// { |
|||
// value: 'In', |
|||
// label: '包含' |
|||
// }, { |
|||
// value: 'NotIn', |
|||
// label: '不包含' |
|||
// } |
|||
], |
|||
logic: [ |
|||
{ |
|||
value: 'And', |
|||
label: '并且' |
|||
}, |
|||
{ |
|||
value: 'Or', |
|||
label: '或者' |
|||
} |
|||
], |
|||
}, |
|||
// 高级筛选rules暂未使用验证，但是不能删除rules定义 |
|||
// todo:优化后放开，优化内容：如果选择了筛选对象【column】，则验证【value】，否则都不验证 |
|||
rules:{ |
|||
// column: [ |
|||
// { required: true, message: '请选择筛选对象', trigger: 'change' } |
|||
// ], |
|||
// value: [ |
|||
// { required: true, message: '请输入内容', trigger: 'blur' } |
|||
// ], |
|||
}, |
|||
} |
|||
}, |
|||
created() { |
|||
this.moreListPush() |
|||
}, |
|||
mounted() { |
|||
// 配置普通筛选默认按钮(是否包含高级筛选按钮) |
|||
this.setPrimarySearchAllButton() |
|||
}, |
|||
methods: { |
|||
// 获取普通筛选的高度,外部也有使用，用于动画样式 |
|||
getSearchPrimaryHeight(){ |
|||
return document.getElementsByClassName('searchPrimaryComponent')[0].clientHeight |
|||
}, |
|||
// 配置普通筛选自定义按钮 |
|||
setPrimarySearchAllButton(){ |
|||
let _more_btn = [{ |
|||
label:'高级筛选', |
|||
name:'more', |
|||
type: 'text', |
|||
icon:'el-icon-arrow-down', |
|||
iconRight:true |
|||
}] |
|||
if(this.showMoreSearch){ |
|||
this.primarySearchAllButton = _more_btn.concat(this.primarySearchButton) |
|||
}else{ |
|||
this.primarySearchAllButton= this.primarySearchButton |
|||
} |
|||
}, |
|||
// 普通查询基础按钮点击事件 |
|||
primarySearchBaseHandle(item,data, option, that){ |
|||
this.overallSearchFormClick(item,data, option, that) |
|||
}, |
|||
// 普通筛选自定义按钮点击事件 |
|||
primarySearchButtonClick( item,data, option,that){ |
|||
// 点击[高级筛选]按钮 |
|||
if(item.name == 'more'){ |
|||
this.changeMoreListShow(true) |
|||
} |
|||
this.overallSearchFormClick(item,data, option, that) |
|||
}, |
|||
// 高级筛选基础按钮点击事件 |
|||
moreListButtonHandle(item){ |
|||
this.overallSearchFormClick(item) |
|||
}, |
|||
// 设置moreList的列表值（默认按tableColumns设置） |
|||
tableColumnsOptions(val) { |
|||
const data = JSON.parse(JSON.stringify(val)); |
|||
let num = 0 |
|||
val.forEach((item, index) => { |
|||
if (item.showProp) { |
|||
data.splice(index - num, 1) |
|||
num++ |
|||
} |
|||
}) |
|||
return data |
|||
}, |
|||
// 判断筛选类型是否是时间格式 |
|||
getColumnType(val) { |
|||
var columnsType = this.tableColumns.filter(item => item.prop == val) |
|||
if (columnsType.length > 0) { |
|||
if (columnsType[0].type) { |
|||
return columnsType[0].type |
|||
} |
|||
} else { |
|||
return '' |
|||
} |
|||
}, |
|||
// 筛选条件改变重置其他项 |
|||
resetSelect(val) { |
|||
val.action = "==" |
|||
val.value = "" |
|||
}, |
|||
// 根据数据内容约束条件选项 |
|||
formatMoreListOptions(val) { |
|||
// 自定义配置条件filterActionOptions |
|||
if(this.filterActionOptions){ |
|||
this.moreListOptions.action = this.filterActionOptions |
|||
return this.moreListOptions.action |
|||
} |
|||
if (val) { |
|||
for(var i =0; i< this.tableColumns.length; i++) { |
|||
if (val == this.tableColumns[i].prop) { |
|||
if (this.tableColumns[i].filters) { |
|||
return this.moreListOptions.action.filter(item => item.value == '==' || item.value == '!=') |
|||
} else if (this.tableColumns[i].type == 'dateTime') { |
|||
return this.moreListOptions.action.filter(item => |
|||
item.value == '==' || |
|||
item.value == '!=' || |
|||
item.value == '>' || |
|||
item.value == '<' || |
|||
item.value == '>=' || |
|||
item.value == '<=' ) |
|||
} else { |
|||
return this.moreListOptions.action |
|||
} |
|||
} |
|||
} |
|||
} |
|||
return this.moreListOptions.action |
|||
}, |
|||
// 设置moreList列表的内容项是input还是select |
|||
inputOrSelect(val) { |
|||
let data |
|||
if (val) { |
|||
this.tableColumns.forEach((key) => { |
|||
if (val == key.prop) { |
|||
if (key.filters) { |
|||
data = key |
|||
} else { |
|||
data = {} |
|||
} |
|||
} |
|||
}) |
|||
} else { |
|||
data = {} |
|||
} |
|||
return data |
|||
}, |
|||
// 高级筛选列表-删除筛选条件行 |
|||
moreListDelete(val,item) { |
|||
if (this.moreListData.filters.length == 1) { |
|||
this.$warningMsg('必须保留一条筛选条件！') |
|||
} else { |
|||
this.$confirm('您确定删除吗, 是否继续?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.moreListData.filters.splice(val, 1) |
|||
}).catch(() => { |
|||
// this.modalAppendToBody = false |
|||
}); |
|||
} |
|||
this.overallSearchFormClick({name:'moreList-deleteRow'}) |
|||
}, |
|||
// 高级筛选列表-添加筛选条件行 |
|||
moreListPush() { |
|||
let data = { |
|||
logic: "And", |
|||
column: "", |
|||
action: "==", |
|||
value: "" |
|||
} |
|||
this.moreListData.filters.push(data) |
|||
this.overallSearchFormClick({name:'moreList-addRow'}) |
|||
}, |
|||
// 重置数据，高级（单纯节点显示数据，不重新查询接口） |
|||
resetMoreListData(){ |
|||
this.moreListData = {filters:[]} |
|||
this.moreListPush() |
|||
}, |
|||
// 设置数据值，高级（单纯节点显示数据，不重新查询接口） |
|||
setMoreListData(val){ |
|||
this.moreListData = JSON.parse(JSON.stringify(val)) |
|||
}, |
|||
// 重置数据，普通+高级（单纯节点显示数据，不重新查询接口） |
|||
resetOverallSearchData(){ |
|||
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.resetPrimarySearchData(); |
|||
this.resetMoreListData() |
|||
}, |
|||
// 设置数据，普通+高级（单纯节点显示数据，不重新查询接口） |
|||
setOverallSearchData(data){ |
|||
// 普通筛选数据同步 |
|||
if(data && data.params){ |
|||
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.setPrimarySearchData(data.params) |
|||
}else{ |
|||
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.resetPrimarySearchData() |
|||
} |
|||
// 高级筛选数据同步 |
|||
if(data && data.moreList){ |
|||
let _list = {filters:[]} |
|||
data.moreList.filters.forEach(item=>{ |
|||
if(String(item.column).length > 0 && String(item.value).length > 0){ |
|||
_list.filters.push(item) |
|||
} |
|||
}) |
|||
if(_list.filters.length <= 0){ |
|||
_list.filters.push({ |
|||
logic: "And", |
|||
column: "", |
|||
action: "==", |
|||
value: "" |
|||
}) |
|||
} |
|||
this.setMoreListData(_list) |
|||
}else{ |
|||
this.resetMoreListData() |
|||
} |
|||
}, |
|||
// 展开-收缩高级筛选 |
|||
changeMoreListShow(val){ |
|||
this.isShowMoreList = val || false |
|||
// 如果没有初级筛选 |
|||
if(!this.primarySearchOption || this.primarySearchOption.length <= 0){ |
|||
// 关闭时候直接整个全面筛选组件 |
|||
if(!this.isShowMoreList){ |
|||
this.isShow = false |
|||
this.$emit("getShowSearchOverall",this.isShow) |
|||
} |
|||
} |
|||
}, |
|||
// 关闭整个全面组件 |
|||
changeSearchOverallShow(val){ |
|||
if(!val){ |
|||
this.changeMoreListShow(false) |
|||
} |
|||
this.isShow = val || false |
|||
this.$emit("getShowSearchOverall",this.isShow) |
|||
}, |
|||
// 全面筛选组件所有按钮事件 |
|||
overallSearchFormClick(item,data, option) { |
|||
// 页面功能 |
|||
// 收缩筛选 |
|||
if(item.name == 'moreList-up'){ |
|||
this.changeMoreListShow(false) |
|||
} |
|||
// 高级筛选内-重置 || 普通格式-重置 |
|||
else if(item.name == "moreList-reset" || item.name == "reset"){ |
|||
this.resetOverallSearchData() |
|||
} |
|||
// 抛出函数传参 |
|||
let _searchPrimaryRef = this.$refs.searchPrimaryRef |
|||
let _options = { |
|||
item:item, |
|||
data_primary:_searchPrimaryRef ? _searchPrimaryRef.getPrimarySearchData() : null, |
|||
data_moreList:this.moreListData, |
|||
option_primary:this.primarySearchOption, |
|||
option_moreList:this.tableColumns, |
|||
vm_primary:_searchPrimaryRef, |
|||
vm_moreList:this |
|||
} |
|||
this.$emit("overallSearchFormClick",_options) |
|||
}, |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "./style/index.scss"; |
|||
</style> |
|||
@ -0,0 +1,83 @@ |
|||
.searchOverallComponent{ |
|||
height: 0; |
|||
transition:all 0.5s; |
|||
z-index: 1; |
|||
overflow: hidden; |
|||
|
|||
.border-outer{ |
|||
position: relative; |
|||
background: #f8f9fb; |
|||
padding: 10px 20px 0; |
|||
border: #eff0f2 solid 1px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.fullPageCover{ |
|||
position: absolute; |
|||
background: rgba(255, 255, 255, 0.2); |
|||
left: 0; |
|||
right: 0; |
|||
// height: calc(100vh - 200px); |
|||
cursor: no-drop; |
|||
} |
|||
|
|||
.moreListOuter{ |
|||
margin-top: 10px; |
|||
position: relative; |
|||
} |
|||
|
|||
::v-deep .navFilter { |
|||
// display: flex; |
|||
// flex-direction: column; |
|||
// width: 100%; |
|||
// height: 100%; |
|||
max-height: 30vh; |
|||
overflow: auto; |
|||
|
|||
.el-form { |
|||
// flex: 1; |
|||
// padding-left: 100px; |
|||
// padding-right: 100px; |
|||
display: flex; |
|||
align-content: flex-start; |
|||
flex-wrap: wrap; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
|
|||
.el-row{ |
|||
margin: 0 !important; |
|||
margin-left: -5px !important; |
|||
} |
|||
|
|||
|
|||
.el-select{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.title{ |
|||
padding: 10px 0 15px 0; |
|||
font-weight: bold; |
|||
color: #333; |
|||
} |
|||
|
|||
.moreListPush-btn { |
|||
width: 100%; |
|||
padding-left: 5px; |
|||
color: rgb(64, 158, 255); |
|||
|
|||
span { |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: blue; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.moreListBaseBts{ |
|||
padding: 20px 0; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,402 @@ |
|||
<template> |
|||
<div class="tablePagination"> |
|||
<!-- 头部按钮 --> |
|||
<div class="table-nav"> |
|||
<curren-Button |
|||
ref="tablePagination_topNav" |
|||
:Butttondata="currenButtonData" |
|||
@tableButtonClick="topbutton" |
|||
@quicklySearchClick="quicklySearchClick" |
|||
@quicklySearchClear="quicklySearchClear" |
|||
:quicklySearchOption="quicklySearchOption" |
|||
> |
|||
</curren-Button> |
|||
<slot name="tableTopSlot"></slot> |
|||
</div> |
|||
<!-- 全面搜索（普通+高级整合） --> |
|||
<searchOverall |
|||
ref="searchOverallRef" |
|||
:searchOverallCoverHeight="searchOverallCoverHeight" |
|||
:showSearchOverall="showSearchOverall" |
|||
@getShowSearchOverall="getShowSearchOverall" |
|||
:primarySearchOption="primarySearchOption" |
|||
:primarySearchButton="primarySearchButton" |
|||
:showMoreSearch="showMoreSearch" |
|||
:tableColumns="tableColumns" |
|||
@overallSearchFormClick="overallSearchFormClick" |
|||
:httpOverallSearchData="httpOverallSearchData" |
|||
> |
|||
<!-- 插槽预留 --> |
|||
<slot name="searchPrimarySlot"></slot> |
|||
</searchOverall> |
|||
<!-- 字段设置弹窗 --> |
|||
<rowDrop |
|||
@radio="rowDrop" |
|||
:tableColumns="tableColumns" |
|||
:visible="rowDropVisible" |
|||
@closeRowDrop="closeRowDrop" |
|||
:source="rowSource" |
|||
:innerMaxHeight="rowMaxHeight" |
|||
></rowDrop> |
|||
<!-- 列表 --> |
|||
<div class="uTableOuter" ref="uTableOuterRef" :style="{height:uTableOuterHeight + 'px',overflow:'hidden'}"> |
|||
<umyTable |
|||
ref="tablePaginationTableRef" |
|||
:isUpdate="isUpdate" |
|||
:tableLoading="tableLoading" |
|||
:tableData="tableData" |
|||
:tableColumns="tableColumns | isTableColumns" |
|||
:isShowIndex="isShowIndex" |
|||
:selectionTable="tableSelection" |
|||
:setUTableHeight="setUTableHeight || uTableTopHeight" |
|||
@sortChange="sortChange" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
@inlineDialog="inlineDialog" |
|||
:buttonOperationList_left="buttonOperationList_left" |
|||
@buttonOperationClick_left="buttonOperationClick_left" |
|||
:buttonOperationList_right="buttonOperationList_right" |
|||
@buttonOperationClick_right="buttonOperationClick_right" |
|||
:tableBorder="true" |
|||
:firstFixed="true" |
|||
:cellStyle = "cellStyle" |
|||
:showOverflowTooltip="showOverflowTooltip" |
|||
> |
|||
<template> |
|||
<slot></slot> |
|||
</template> |
|||
</umyTable> |
|||
</div> |
|||
<!-- 页码 --> |
|||
<pagination |
|||
:totalCount="totalCount" |
|||
:pagesizeProps="MaxResultCount" |
|||
:currentPageProps="currentPageProps" |
|||
@SizeChange="alterResultCount" |
|||
@CurrentChange="alertoldSkipCount" |
|||
></pagination> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import currenButton from "@/components/currenButton" |
|||
import pagination from "@/components/Pagination" |
|||
import searchOverall from "@/components/searchOverall" |
|||
import rowDrop from "@/components/rowDrop/index.vue" |
|||
import { getParentNode } from '@/utils' |
|||
export default { |
|||
name: 'tablePagination', |
|||
components: { |
|||
pagination, |
|||
currenButton, |
|||
searchOverall, |
|||
rowDrop |
|||
}, |
|||
props: { |
|||
rowMaxHeight:{ |
|||
type:String, |
|||
default:'calc(90vh - 280px)' |
|||
}, |
|||
// 筛选高度 |
|||
searchOverallCoverHeight:{ |
|||
type: String, |
|||
default: 'calc(100vh - 200px)' |
|||
}, |
|||
// 已app-main高度为100% 需要减掉的高度 |
|||
setUTableHeight: { |
|||
type: Number, |
|||
default: null |
|||
}, |
|||
// 超出内容是否提示 |
|||
showOverflowTooltip:{ |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// 显示搜索配置 |
|||
quicklySearchOption:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 表格上方头部按钮配置 |
|||
currenButtonData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 操作列按钮(左侧) |
|||
buttonOperationList_left:{ |
|||
type: Array, |
|||
default: null, |
|||
}, |
|||
// 操作列按钮(右侧) |
|||
buttonOperationList_right:{ |
|||
type: Function, |
|||
default: null, |
|||
}, |
|||
// 列表数据 |
|||
tableData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 列表列配置 + 高级筛选配置 |
|||
tableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 复选框 |
|||
tableSelection: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// table页码总数 |
|||
totalCount: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// table组件上的loading |
|||
tableLoading: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 页码每页显示数 |
|||
MaxResultCount: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 页码当前页配置 |
|||
currentPageProps: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
// 是否显示序号 |
|||
isShowIndex: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// 选择当前行数据 |
|||
multipleSelection: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 以下为全面筛选组件配置 |
|||
//初级筛选绑定表单配置 |
|||
primarySearchOption: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//初级筛选表单自定义按钮 |
|||
primarySearchButton: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 是否显示高级筛选 |
|||
showMoreSearch:{ |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
// 当前接口中的筛选数据（用于同步全面筛选的数据） |
|||
httpOverallSearchData:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
cellStyle: { |
|||
type: Function, |
|||
default: () => { |
|||
return Function; |
|||
} |
|||
}, |
|||
// 字段设置来源（列表、列表-明细、明细页面） |
|||
rowSource:{ |
|||
type:String, |
|||
default:'list_api' |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
// 字段设置是否显示 |
|||
rowDropVisible: false, |
|||
// table 重新渲染所需key |
|||
isUpdate: false, |
|||
// 除去table的高度 |
|||
uTableTopHeight:165, |
|||
// table外部高度控制，用于点击筛选动画处理 |
|||
uTableOuterHeight:null, |
|||
// table外部最初始化高度，用于点击筛选动画处理 |
|||
uTableOuterHeight_init:null, |
|||
//table操作按钮 |
|||
Butttondata: [ |
|||
{ |
|||
type: 'danger', |
|||
icon: 'el-icon-delete', |
|||
label: '批量删除', |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'warning', |
|||
icon: 'el-icon-edit', |
|||
label: '批量修改状态', |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'success', |
|||
icon: 'el-icon-upload2', |
|||
label: '批量导出', |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'info', |
|||
icon: 'el-icon-printer', |
|||
label: '批量打印', |
|||
size: 'mini' |
|||
}, |
|||
], |
|||
// 全面筛选组件配置 |
|||
// 显示全面筛选组件 |
|||
showSearchOverall:false, |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.uTableOuterHeight = this.$refs.tablePaginationTableRef.getTableHeight() |
|||
this.uTableOuterHeight_init = Number(JSON.stringify(this.uTableOuterHeight)) |
|||
|
|||
// 点击外部，字段设置弹窗隐藏 |
|||
document.addEventListener('click',(e)=>{ |
|||
if(!this.rowDropVisible)return |
|||
let _class = "rowDropNotHideItem" |
|||
let _hasParent = getParentNode(e.target,_class) |
|||
let _current_class = e.target._prevClass || e.target.className |
|||
let _hasCurrent = _current_class ? String(_current_class).includes(_class) : false |
|||
if(!_hasParent && !_hasCurrent){ |
|||
this.closeRowDrop() |
|||
} |
|||
}) |
|||
}, |
|||
methods: { |
|||
rowDrop(data,type) { |
|||
this.$emit('rowDrop',data,type) |
|||
this.$nextTick(()=>{ |
|||
this.isUpdate = !this.isUpdate |
|||
}) |
|||
}, |
|||
//点击常用按钮 |
|||
topbutton (val,item) { |
|||
// 筛选按钮 + table高度变化 + 动画效果（勿动顺序） |
|||
if(val=="filter"){ |
|||
this.showSearchOverall = !this.showSearchOverall |
|||
// 有普通查询配置 |
|||
if(this.primarySearchOption && this.primarySearchOption.length > 0){ |
|||
this.$nextTick(()=>{ |
|||
let _search_height = this.$refs.searchOverallRef.getSearchPrimaryHeight() |
|||
if(this.showSearchOverall){ |
|||
let _margin = 20 |
|||
this.uTableOuterHeight = this.uTableOuterHeight_init - _search_height - _margin |
|||
setTimeout(()=>{ |
|||
this.uTableTopHeight += _search_height + _margin |
|||
},0) |
|||
}else{ |
|||
this.uTableOuterHeight = this.uTableOuterHeight_init |
|||
setTimeout(()=>{ |
|||
this.uTableTopHeight = 165 |
|||
},0) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
// 字段设置 |
|||
else if (val == 'field') { |
|||
this.rowDropVisible = !this.rowDropVisible |
|||
} |
|||
this.$emit("topbutton", val,item) |
|||
}, |
|||
// 快速搜索 - 搜索按钮 |
|||
quicklySearchClick (val,option) { |
|||
this.$emit("quicklySearchClick", val,option,this.$refs.searchOverallRef) |
|||
}, |
|||
// 快速搜索 - 清除搜索 |
|||
quicklySearchClear (val,option) { |
|||
// 判断是否有筛选按钮 |
|||
let hasSearch = false |
|||
this.currenButtonData.forEach(item=>{ |
|||
if(item.name == 'filter'){ |
|||
hasSearch = true |
|||
return |
|||
} |
|||
}) |
|||
this.$emit("quicklySearchClear", val,option,this.$refs.searchOverallRef,hasSearch ) |
|||
}, |
|||
//接收分页组件emit改变每页最大页数 |
|||
alterResultCount (val) { |
|||
this.$emit('alterResultCount', val) |
|||
}, |
|||
//接收分页组件emit改变当前页 |
|||
alertoldSkipCount (val) { |
|||
this.$emit('alertoldSkipCount', val) |
|||
}, |
|||
//点击name提交emit打开编辑页面 |
|||
inlineDialog (row) { |
|||
this.$emit("inlineDialog", row) |
|||
}, |
|||
//点击selection框 |
|||
handleSelectionChange (val) { |
|||
this.$emit("handleSelectionChange", val) |
|||
}, |
|||
//排序 |
|||
sortChange (data) { |
|||
this.$emit('sortChange', data) |
|||
}, |
|||
//点击table操作列(左侧)按钮 |
|||
buttonOperationClick_left(row, item, index) { |
|||
this.$emit("buttonOperationClick_left", row, item, index); |
|||
}, |
|||
//点击table操作列(右侧)按钮 |
|||
buttonOperationClick_right(row, item, index) { |
|||
this.$emit("buttonOperationClick_right", row, item, index); |
|||
}, |
|||
// 全面筛选组件配置 |
|||
// 全面筛选组件内部显示/隐藏更改触发，同步当前的showSearchOverall值 |
|||
getShowSearchOverall(val){ |
|||
this.showSearchOverall = val || false |
|||
}, |
|||
// 全面筛选组件所有按钮事件 |
|||
overallSearchFormClick(options){ |
|||
//增加快速搜索实体 |
|||
options.vm_quickly = this.$refs.tablePagination_topNav.getQuicklySearchDom() |
|||
this.$emit("overallSearchFormClick", options) |
|||
}, |
|||
// 关闭字段设置 |
|||
closeRowDrop() { |
|||
this.rowDropVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.uTableOuter{ |
|||
transition:all 0.5s; |
|||
overflow: hidden; |
|||
} |
|||
.tablePagination { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.table-nav { |
|||
padding-bottom: 15px; |
|||
} |
|||
|
|||
.el-table { |
|||
flex: 1; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue