parent
4fc0b3c970
commit
4c935f78ab
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,221 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bottom-list">
|
||||||
|
<div class="list-title">
|
||||||
|
<introduceTitle title="筛选结果" subTitle="SCREENING RESULTS" />
|
||||||
|
<div class="total">
|
||||||
|
共 <span>{{ total }}</span> 条数据
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="result-list">
|
||||||
|
<div class="list-table" v-loading="loading">
|
||||||
|
<div class="table-header">
|
||||||
|
<div class="table-cell0">序号</div>
|
||||||
|
<div class="table-cell1">所属网格</div>
|
||||||
|
<div class="table-cell1">所属楼栋</div>
|
||||||
|
<div class="table-cell1">房屋名称</div>
|
||||||
|
<div class="table-cell1">姓名</div>
|
||||||
|
<div class="table-cell1">标签</div>
|
||||||
|
<div class="table-cell1">类型</div>
|
||||||
|
<div class="table-cell1">分色</div>
|
||||||
|
<div class="table-cell1">数据更新时间</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="table-body"
|
||||||
|
style="overflow: auto"
|
||||||
|
v-infinite-scroll="load"
|
||||||
|
:infinite-scroll-distance="10"
|
||||||
|
:infinite-scroll-delay="500"
|
||||||
|
:infinite-scroll-disabled="disabled"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="body-rows"
|
||||||
|
v-for="(item, index) in list"
|
||||||
|
:key="'rows' + index"
|
||||||
|
>
|
||||||
|
<div class="table-cell0">{{ index + 1 }}</div>
|
||||||
|
<div class="table-cell1">{{ item.parentname }}</div>
|
||||||
|
<div class="table-cell1">
|
||||||
|
{{ item.deptname }}{{ item.buildingname }}
|
||||||
|
</div>
|
||||||
|
<div class="table-cell1">{{ item.housename }}</div>
|
||||||
|
<div class="table-cell1">{{ item.name }}</div>
|
||||||
|
<div class="table-cell1">
|
||||||
|
<el-tooltip effect="dark" content="党员" placement="top">
|
||||||
|
<img
|
||||||
|
src="@/assets/images/ui/isd.png"
|
||||||
|
alt=""
|
||||||
|
class="typeis"
|
||||||
|
v-show="item.isD"
|
||||||
|
/></el-tooltip>
|
||||||
|
<el-tooltip effect="dark" content="退伍军人" placement="top">
|
||||||
|
<img
|
||||||
|
src="@/assets/images/ui/isj.png"
|
||||||
|
class="typeis"
|
||||||
|
v-show="item.isJ"
|
||||||
|
/>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="dark" content="帮扶对象" placement="top">
|
||||||
|
<img
|
||||||
|
src="@/assets/images/ui/isk.png"
|
||||||
|
alt=""
|
||||||
|
class="typeis"
|
||||||
|
v-show="item.isK"
|
||||||
|
/></el-tooltip>
|
||||||
|
<el-tooltip effect="dark" content="重点人群" placement="top">
|
||||||
|
<img
|
||||||
|
src="@/assets/images/ui/isx.png"
|
||||||
|
alt=""
|
||||||
|
class="typeis"
|
||||||
|
v-show="item.isX"
|
||||||
|
/></el-tooltip>
|
||||||
|
</div>
|
||||||
|
<div class="table-cell1">
|
||||||
|
{{ item.type == 1 ? "户籍" : "流动" }}
|
||||||
|
</div>
|
||||||
|
<div class="table-cell1">
|
||||||
|
<ColorCell :item="item" />
|
||||||
|
</div>
|
||||||
|
<div class="table-cell1">{{ item.updateTime }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from "vuex";
|
||||||
|
import introduceTitle from "@/views/components/introduceTitle";
|
||||||
|
import { inputSearch } from "@/api/home/index.js";
|
||||||
|
import ColorCell from "@/components/ColorCell";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
disabled: true,
|
||||||
|
loading: false,
|
||||||
|
list: [],
|
||||||
|
total: 0,
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(["queryParamsXiaoqu", "leftColor", "rightTopColor"]),
|
||||||
|
},
|
||||||
|
components: { introduceTitle, ColorCell },
|
||||||
|
watch: {
|
||||||
|
queryParamsXiaoqu: {
|
||||||
|
handler(newValue, oldValue) {
|
||||||
|
console.log(newValue);
|
||||||
|
this.reset();
|
||||||
|
this.queryParams = { ...this.queryParams, ...newValue };
|
||||||
|
this.disabled = false;
|
||||||
|
this.load();
|
||||||
|
},
|
||||||
|
deep: true, // Deeply watch all nested properties
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
reset() {
|
||||||
|
(this.disabled = true), (this.total = 0);
|
||||||
|
this.list = [];
|
||||||
|
this.queryParams = {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
load() {
|
||||||
|
if (this.list.length > 0 && this.list.length >= this.total) return;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
async getList() {
|
||||||
|
this.loading = true;
|
||||||
|
let res = await inputSearch(this.queryParams);
|
||||||
|
let handleColor = this.handleColor(res.data.xinxilist.rows);
|
||||||
|
this.list = [...this.list, ...handleColor];
|
||||||
|
this.total = res.data.xinxilist.total;
|
||||||
|
this.queryParams.pageNum++;
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 处理颜色
|
||||||
|
*/
|
||||||
|
handleColor(list) {
|
||||||
|
list.map((item) => {
|
||||||
|
if (!item.color) {
|
||||||
|
item.leftColor = "#7b75ff";
|
||||||
|
item.rightTopColor = "#7b75ff";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (let key in this.leftColor) {
|
||||||
|
if (item.color == key) {
|
||||||
|
item.leftColor = this.leftColor[key];
|
||||||
|
item.rightTopColor = this.rightTopColor[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return list;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "~@/assets/styles/isTable.scss";
|
||||||
|
.bottom-list {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(0, 48, 92, 0.35) 95%,
|
||||||
|
rgba(2, 35, 69, 0) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.list-title {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.total {
|
||||||
|
padding-right: 10px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #aacfff;
|
||||||
|
font-weight: 400;
|
||||||
|
span {
|
||||||
|
color: #ff961b;
|
||||||
|
font-family: "din-bold-2.ttf";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-list,
|
||||||
|
.list-table {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
.result-list {
|
||||||
|
height: calc(100% - 40px) !important;
|
||||||
|
.list-table {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.table-body {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.result-list
|
||||||
|
.list-table
|
||||||
|
.table-body
|
||||||
|
> .body-rows[data-v-a33623d4]:nth-child(even) {
|
||||||
|
background: rgba(0, 169, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.typeis {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue