Skip to content

D
dcxy-system
Commit 6b9193a5 by 姜雷
Options

添加数据首页区域选框在多选的情况下可以筛选数据功能

parent 50854476
Showing with 196 additions and 72 deletions
src/assets/styles/element-ui.scss
......@@ -84,6 +84,9 @@ $--color-danger: #ff3333;
.el-loading-mask {
z-index: 1000 !important;
}
.el-select-dropdown__item {
padding: 0 40px 0 20px;
}
@media screen and (min-width: $bigScreenWidth) {
.el-submenu .el-menu-item,
.el-submenu__title {
......
src/components/input/AreaDashboard/AreaSelect.vue
<template>
<el-select
popper-class="dashboard-area-popper"
:clearable="clearable"
:disabled="disabled"
filterable
:value="value"
@change="changeHandle"
:multiple="multiple"
ref="select"
>
<slot></slot>
<slot>
<el-input
v-if="multiple"
class="out-input"
clearable
@click.stop
@input="debouncedQueryChange"
/>
<el-option
v-if="multiple"
:value="-1"
>
<span>全选</span>
<span class="inner-input"> </span>
</el-option>
</slot>
<el-option
v-for="(item, index) in dashboardArea"
v-for="(item, index) in filterList"
:key="index"
:value="item.id"
:label="item.areaName"
......@@ -18,6 +36,7 @@
</template>
<script>
import debounce from 'throttle-debounce/debounce';
import areaMixin from './mixin.js';
export default {
......@@ -40,8 +59,26 @@ export default {
data() {
return {
selectedAll: false,
filterText: '',
};
},
created() {
this.debouncedQueryChange = debounce(this.debounce, value => {
this.handleQueryChange(value);
});
},
computed: {
filterList() {
return this.dashboardArea.filter(item => {
if (item.value == -1) return true;
if (this.filterText) {
return item.areaName.indexOf(this.filterText) > -1;
} else {
return true;
}
});
},
},
mixins: [areaMixin],
methods: {
changeHandle(val) {
......@@ -69,7 +106,30 @@ export default {
this.$emit('input', null);
}
},
handleQueryChange(val) {
this.filterText = val;
},
},
};
</script>
<style lang="scss">
.dashboard-area-popper {
.out-input,
.inner-input {
display: inline-block;
width: 100px;
margin-left: 20px;
}
.out-input {
position: absolute;
right: 40px;
top: 23px;
transform: translateY(-50%);
z-index: 1;
}
.inner-input {
line-height: inherit;
}
}
</style>
src/containers/Dashboard/CampusCustomerData/CampusCustomerData.vue
......@@ -14,9 +14,7 @@
:value="filters.choiceareaIds"
multiple
@input="val => updateFilters({choiceareaIds: val})"
>
<el-option :value="-1">全选</el-option>
</dashboard-area-select>
/>
</search-item>
<el-radio-group
class="Dashboard-Radio"
......
src/containers/HomePage/Demo.vue
<template>
<list-layout>
<list-layout class="Demo">
<template slot="filterItem">
<search-item label="赠送类型">
<el-input></el-input>
<search-item label="运营商">
<operator-select
:accessType="1"
:value="filters.operateId"
@input="val => updateFilters({operateId: val,areaId:[]})"
/>
</search-item>
<search-item label="区域">
<dashboard-area-select
:operateId="filters.operateId"
:value="filters.areaId"
multiple
@input="val => updateFilters({areaId: val})"
/>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
</template>
<template slot="filterBtn">
<el-button @click="showSearchBarHandle">qiehuan</el-button>
</template>
</list-layout>
</template>
<script>
import searchMixin from '@/mixins/searchBar';
export default {
name: 'Demo',
mixins: [searchMixin],
data() {
return {
filters: {
operateId: undefined,
areaId: [],
},
};
},
methods: {
updateFilters(entity) {
this.filters = {
...this.filters,
...entity,
};
},
},
};
</script>
<style lang="scss">
.Demo {
.el-select {
.el-select__tags {
height: 90%;
overflow: hidden;
input {
display: none;
}
}
.el-input {
overflow: hidden;
}
.el-input__inner {
height: 100% !important;
}
}
}
</style>
src/containers/HomePage/SearchDemo.vue 0 → 100644
<template>
<list-layout>
<template slot="filterItem">
<search-item label="赠送类型">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
<search-item label="会员ID">
<el-input></el-input>
</search-item>
</template>
<template slot="filterBtn">
<el-button @click="showSearchBarHandle">qiehuan</el-button>
</template>
</list-layout>
</template>
<script>
import searchMixin from '@/mixins/searchBar';
export default {
name: 'Demo',
mixins: [searchMixin],
};
</script>
src/router/index.js
......@@ -10,6 +10,7 @@ const constantRouterMap = [
{ path: '/login', component: Login, hidden: true },
{ path: '/404', component: errorPage404, hidden: true },
{ path: '/401', component: errorPage401, hidden: true },
// { path: '/demo', component: _import('HomePage/Demo'), hidden: true },
];
const asyncRouterMap = [{ path: '*', redirect: '/404', hidden: true }];
......
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