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