Skip to content

A
apaas-ui
Commit 149f84d1 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

拆分table-filter组件

parent 0d725c05
Hide whitespace changes
Inline Side-by-side
Showing with 234 additions and 174 deletions
src/components/table-filter.vue 0 → 100644
View file @ 149f84d1
<template>
<ul
class="ces_filter_container"
ref="filterContainer"
v-if="filterList && filterData && filterToggle"
v-show="show"
>
<li v-for="(item, index) in filterList" :key="'f_l_' + index">
<div class="ces_filter_name">
<span v-text="item.name + '：'"></span>
</div>
<ul class="ces_filter_data">
<li
v-for="(v, i) in item.data"
:key="'f_l_d_' + index + '_' + i"
v-show="filterToggle[item.prop] || i < filterLength"
:style="{
'margin-top': i < filterLength ? '0' : '10px',
}"
>
<a
:class="{ current: isCurrentFilter(item.prop, v) }"
@click.prevent="selectFilter(item.prop, v)"
v-text="v"
></a>
</li>
<div
class="toggle_bar"
v-if="item.data.length > filterLength"
@click="filterToggleAction(item.prop)"
>
<span>{{ filterToggle[item.prop] ? "收起" : "展开" }}</span>
<i
:class="
filterToggle[item.prop]
? 'el-icon-caret-bottom'
: 'el-icon-caret-top'
"
></i>
</div>
</ul>
</li>
</ul>
</template>
<script>
export default {
props: {
filterList: {
type: Array,
default: [],
},
show: {
type: Boolean,
default: false,
},
},
data: () => ({
filterData: null, // 筛选条件
filterToggle: null, // 控制筛选条件的展开和收起
filterLength: 0, // 每行最多可容纳多少个过滤条件
}),
watch: {
filterList: {
handler(val) {
this.initFilterData();
},
deep: true,
},
show(value) {
if (value) {
this.getFilterLength();
}
},
},
methods: {
initFilterData() {
if (this.filterList && this.filterList.length) {
this.filterData = {};
this.filterToggle = {};
this.filterList.forEach((item) => {
this.$set(this.filterData, item.prop, []);
this.$set(this.filterToggle, item.prop, false);
});
}
},
getFilterLength() {
if (this.show) {
this.$nextTick(() => {
let width =
this.$refs.filterContainer.getBoundingClientRect().width -
20 * 2 - // 两侧padding
100 - // 左侧标题
20 - // 距左侧标题的边距
110; // 折叠按钮的宽度
this.filterLength = Math.floor(width / 110);
// console.log("每行最多可容纳" + this.filterLength + "个filter");
});
}
},
filterToggleAction(prop) {
this.$set(this.filterToggle, prop, !this.filterToggle[prop]);
},
isCurrentFilter(prop, filter) {
return (
this.filterData &&
this.filterData[prop] &&
this.filterData[prop].indexOf(filter) > -1
);
},
selectFilter(prop, filter) {
if (this.isCurrentFilter(prop, filter)) {
this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1);
} else {
this.filterData[prop].push(filter);
}
this.$emit("filter-change", this.filterData);
},
},
mounted() {
this.initFilterData();
window.addEventListener("resize", this.getFilterLength);
},
destroyed() {
window.removeEventListener("resize", this.getFilterLength);
},
};
</script>
<style scoped>
.ces_filter_container {
background-color: #f7f8f9;
padding: 14px 19px;
border: 1px solid #e3e5ef;
border-radius: 6px;
margin: 0 0 10px;
}
.ces_filter_container > li {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding-top: 12px;
}
.ces_filter_container {
background-color: #f7f8f9;
padding: 14px 19px;
border: 1px solid #e3e5ef;
border-radius: 6px;
margin: 0 0 10px;
}
.ces_filter_container > li {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding-top: 12px;
}
.ces_filter_name {
width: 100px;
height: 30px;
flex-shrink: 0;
text-align: right;
font-size: 14px;
line-height: 30px;
font-weight: bold;
color: #1a2236;
}
.ces_filter_data {
width: calc(100% - 120px);
min-height: 42px;
padding-right: 110px;
box-sizing: border-box;
margin-left: 20px;
flex-grow: 1;
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
padding-bottom: 11px;
position: relative;
}
.ces_filter_container > li:not(:last-child) > .ces_filter_data {
border-bottom: 1px solid #e9ecf3;
}
.ces_filter_data > li {
flex-shrink: 0;
padding-right: 20px;
}
.ces_filter_data > .toggle_bar {
height: 30px;
position: absolute;
top: 0;
right: 0;
font-size: 14px;
line-height: 30px;
color: #0f2683;
cursor: pointer;
}
.ces_filter_data > li > a {
display: block;
height: 30px;
width: 90px;
box-sizing: border-box;
border-radius: 12px;
text-align: center;
cursor: pointer;
font-size: 14px;
line-height: 30px;
color: #58617a;
}
.ces_filter_data > li > a.current {
background-color: #515fe7;
color: #f4f7fc;
}
</style>
src/components/table-um.vue
View file @ 149f84d1
......@@ -37,46 +37,11 @@
class="ces_toolbar_inp"
></el-input>
</div>
<ul
class="ces_filter_container"
ref="filterContainer"
v-if="filterList && filterData && filterToggle"
v-show="showFliterList"
>
<li v-for="(item, index) in filterList" :key="'f_l_' + index">
<div class="ces_filter_name">
<span v-text="item.name + '：'"></span>
</div>
<ul class="ces_filter_data">
<li
v-for="(v, i) in item.data"
:key="'f_l_d_' + index + '_' + i"
v-show="filterToggle[item.prop] || i < filterLength"
>
<a
:class="{ current: isCurrentFilter(item.prop, v) }"
@click.prevent="selectFilter(item.prop, v)"
v-text="v"
></a>
</li>
<div
class="toggle_bar"
v-if="item.data.length > filterLength"
@click="filterToggleAction(item.prop)"
>
<span>{{ filterToggle[item.prop] ? "收起" : "展开" }}</span>
<i
:class="
filterToggle[item.prop]
? 'el-icon-caret-bottom'
: 'el-icon-caret-top'
"
></i>
</div>
</ul>
</li>
</ul>
<v-apaas-table-filter
:show="showFliterList"
:filter-list="filterList"
@filter-change="filterChange"
></v-apaas-table-filter>
<el-table
:data="selectedTabsPage"
:size="size"
......@@ -265,12 +230,14 @@ import tableSelect from "@/components/table-select";
import helper from "@/services/helper";
import DConfirm from "@/components/dialog-remove";
import tableUmhref from "@/components/table-umhref";
import tableFilter from "@/components/table-filter";
export default {
components: {
"v-apaas-table-input": tableInput,
"v-apaas-table-select": tableSelect,
"v-apaas-table-umhref": tableUmhref,
"d-confirm": DConfirm,
"v-apaas-table-filter": tableFilter
},
props: {
// 表格型号：mini,medium,small
......@@ -401,19 +368,10 @@ export default {
search: "",
times: null,
showFliterList: false,
filterData: null, // 筛选条件
filterToggle: null, // 控制筛选条件的展开和收起
filterLength: 0, // 每行最多可容纳多少个过滤条件
};
},
mounted() {
this.getDataFromApiSync();
this.initFilterData();
window.addEventListener("resize", this.getFilterLength);
},
destroyed() {
window.removeEventListener("resize", this.getFilterLength);
},
watch: {
refreshInit: {
......@@ -429,12 +387,6 @@ export default {
},
deep: true,
},
filterList: {
handler(val) {
this.initFilterData();
},
deep: true,
},
},
methods: {
//本地删除
......@@ -561,53 +513,12 @@ export default {
getTableData() {
return this.selectedTabsPage;
},
isCurrentFilter(prop, filter) {
return (
this.filterData &&
this.filterData[prop] &&
this.filterData[prop].indexOf(filter) > -1
);
},
filterAction() {
this.showFliterList = !this.showFliterList;
this.getFilterLength();
},
getFilterLength() {
if (this.showFliterList) {
this.$nextTick(() => {
let width =
this.$refs.filterContainer.getBoundingClientRect().width -
20 * 2 - // 两侧padding
100 - // 左侧标题
20 - // 距左侧标题的边距
110; // 折叠按钮的宽度
this.filterLength = Math.floor(width / 110);
// console.log("每行最多可容纳" + this.filterLength + "个filter");
});
}
},
filterToggleAction(prop) {
this.$set(this.filterToggle, prop, !this.filterToggle[prop]);
},
initFilterData() {
if (this.filterList && this.filterList.length) {
this.filterData = {};
this.filterToggle = {};
this.filterList.forEach((item) => {
this.$set(this.filterData, item.prop, []);
this.$set(this.filterToggle, item.prop, false);
});
}
},
selectFilter(prop, filter) {
if (this.isCurrentFilter(prop, filter)) {
this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1);
} else {
this.filterData[prop].push(filter);
}
console.log(this.filterData);
},
filterChange(filter) {
console.log(filter);
}
},
};
</script>
......@@ -796,75 +707,6 @@ em {
text-overflow: ellipsis;
white-space: nowrap;
}
.ces_filter_container {
background-color: #f7f8f9;
padding: 14px 19px;
border: 1px solid #e3e5ef;
border-radius: 6px;
margin: 0 0 10px;
}
.ces_filter_container > li {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding-top: 12px;
}
.ces_filter_name {
width: 100px;
height: 30px;
flex-shrink: 0;
text-align: right;
font-size: 14px;
line-height: 30px;
font-weight: bold;
color: #1a2236;
}
.ces_filter_data {
width: calc(100% - 120px);
padding-right: 110px;
box-sizing: border-box;
margin-left: 20px;
flex-grow: 1;
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
padding-bottom: 11px;
position: relative;
}
.ces_filter_container > li:not(:last-child) > .ces_filter_data {
border-bottom: 1px solid #e9ecf3;
}
.ces_filter_data > li {
flex-shrink: 0;
padding-right: 20px;
}
.ces_filter_data > .toggle_bar {
height: 30px;
position: absolute;
top: 0;
right: 0;
font-size: 14px;
line-height: 30px;
color: #0f2683;
cursor: pointer;
}
.ces_filter_data > li > a {
display: block;
height: 30px;
width: 90px;
box-sizing: border-box;
border-radius: 12px;
text-align: center;
cursor: pointer;
font-size: 14px;
line-height: 30px;
color: #58617a;
}
.ces_filter_data > li > a.current {
background-color: #515fe7;
color: #f4f7fc;
}
.ces_page_item {
display: flex;
justify-content: flex-end;
......
src/pages/fwglList.vue
View file @ 149f84d1
......@@ -6,7 +6,7 @@
<el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="table_container">
<div class="main_container">
<ces-table
class="r_yhgl_table"
size="mini"
......@@ -468,14 +468,14 @@ export default {
.list_container {
padding: 0 20px;
}
.table_container {
.main_container {
height: calc(100% - 75px);
padding: 15px 20px;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
}
.table_container .ces-table-page {
.main_container .ces-table-page {
margin-top: 42px;
}
</style>
src/pages/yyglList.vue
View file @ 149f84d1
......@@ -6,7 +6,7 @@
<el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="table_container"></div>
<div class="main_container"></div>
</div>
</template>
......@@ -44,14 +44,14 @@ export default {
.list_container {
padding: 0 20px;
}
.table_container {
.main_container {
height: calc(100% - 75px);
padding: 15px 20px;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
}
.table_container .ces-table-page {
.main_container .ces-table-page {
margin-top: 42px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment