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