城阳pc工作端前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

982 lines
25 KiB

<template>
<div class="g-pgi">
<!-- 组织路由 -->
<cpt-bread
:separator="'/'"
@tap="handleClickBreadItem"
:breadList="breadList"
></cpt-bread>
<div class="m-title">
<img class="title_img" src="@/assets/images/index/list-logo.png" alt />
<div class="tip_title">{{ tableTitle }}</div>
<div class="title_line"></div>
<div class="second-select" v-if="type == 'old'">
<el-select
@change="changeOld"
v-model="oldValsss"
:popper-append-to-body="false"
:clearable="true"
placeholder="请选择年龄"
>
<el-option
v-for="item in oldList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.resideSituation"
:popper-append-to-body="false"
:clearable="true"
@change="changeSearch"
placeholder="请选择居住情况"
>
<el-option
v-for="item in resideArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="second-select" v-if="type == 'dibao'">
<el-select
v-model="searchParams.lowIncomeType"
:popper-append-to-body="false"
:clearable="true"
@change="changeSearch"
placeholder="请选择低保类型"
>
<el-option
v-for="item in lowIncomeTypeArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.lowIncomeReason"
:popper-append-to-body="false"
:clearable="true"
@change="changeSearch"
placeholder="请选择低保原因"
>
<el-option
v-for="item in lowIncomeReasonArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="second-select" v-if="type == 'zhiyuanzhe'">
<el-select
@change="changeOld"
v-model="oldValsss"
:popper-append-to-body="false"
:clearable="true"
placeholder="请选择年龄"
>
<el-option
v-for="item in oldAllList1"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.gategoryCode"
:popper-append-to-body="false"
:clearable="true"
@change="changeSearch"
placeholder="请选择志愿者类型"
>
<el-option
v-for="item in volunteerArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="second-select" v-if="type == 'dangyuan'">
<el-select
@change="changeOld"
v-model="oldValsss"
:popper-append-to-body="false"
:clearable="true"
placeholder="请选择年龄"
>
<el-option
v-for="item in oldAllList1"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.cultureLevel"
:popper-append-to-body="false"
:clearable="true"
@change="changeSearch"
placeholder="请选择学历"
>
<el-option
v-for="item in PostDictonArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="second-select" v-if="type == 'shiye'">
<el-select
@change="changeOld"
v-model="oldValsss"
:popper-append-to-body="false"
:clearable="true"
placeholder="请选择年龄"
>
<el-option
v-for="item in oldAllList1"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.employmentWish"
:popper-append-to-body="false"
:clearable="true"
@change="changeSearch"
placeholder="请选择就业愿望"
>
<el-option
v-for="item in careerArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.unemploymentReason"
:popper-append-to-body="false"
:clearable="true"
@change="changeSearch"
placeholder="请选择失业原因"
>
<el-option
v-for="item in unemploymentArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div
class="second-select"
v-if="
type == 'fuwu' ||
type == 'wennuan' ||
type == 'jineng' ||
type == 'gangwei'
"
>
<el-input
type="text"
v-model="searchParams.serviceOrgName"
:clearable="true"
placeholder="请输入服务组织名称"
@blur="changeFwfmc"
/>
</div>
</div>
<div class="g-listbox">
<cpt-tb
:col-list="colList"
:loading="loading"
:header="header"
:list="list"
:total="total"
@handleSizeChange="handleSizeChange"
@handlePageNoChange="handlePageNoChange"
@operate="jumpPage"
></cpt-tb>
</div>
</div>
</template>
<script>
import cptTb from "@/views/dataBoard/cpts/tb";
import cptBread from "@/views/dataBoard/renfang/cpts/bread";
import getQueryPara from "dai-js/modules/getQueryPara";
export default {
name: "resi-list",
components: {
cptTb,
cptBread,
},
data() {
return {
breadList: [
{
path: "/dataBoard/renfang/index",
meta: {
title: "人房总览",
},
},
{
path: "/dataBoard/renfang/visualizing",
meta: {
title: "",
},
},
{
meta: {
title: "居民列表",
},
},
],
tableTitle: "居民列表",
pageType: "",
orgLevel: "",
org_id: "",
type_id: "", // 居民列表
type_name: "",
loading: true,
pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
pageNo: 1,
total: 0,
srcTableData: [],
list: [],
listData: [],
oldList: [
{
label: "全部",
value: ["ALL", "ALL"],
},
{
label: "60-69岁",
value: ["60", "69"],
},
{
label: "70-79岁",
value: ["70", "79"],
},
{
label: "80-89岁",
value: ["80", "89"],
},
{
label: "90岁及以上",
value: ["90", "200"],
},
],
oldAllList: [
{
label: "全部",
value: ["ALL", "ALL"],
},
{
label: "0-9岁",
value: ["0", "9"],
},
{
label: "10-19岁",
value: ["10", "19"],
},
{
label: "20-29岁",
value: ["20", "29"],
},
{
label: "30-39岁",
value: ["30", "39"],
},
{
label: "40-49岁",
value: ["40", "49"],
},
{
label: "50-59岁",
value: ["50", "59"],
},
{
label: "60-69岁",
value: ["60", "69"],
},
{
label: "70-79岁",
value: ["70", "79"],
},
{
label: "80-89岁",
value: ["80", "89"],
},
{
label: "90岁及以上",
value: ["90", "200"],
},
],
oldAllList1: [
{
label: "49岁及以下",
value: ["0", "49"],
},
{
label: "50-59岁",
value: ["50", "59"],
},
{
label: "60-69岁",
value: ["60", "69"],
},
{
label: "70-79岁",
value: ["70", "79"],
},
{
label: "80岁及以上",
value: ["80", "200"],
},
],
colList: [
{
align: "left",
width: "5%",
},
{
align: "left",
width: "10%",
},
{
align: "left",
width: "20%",
},
{
align: "left",
width: "20%",
},
{
align: "left",
width: "15%",
},
{
align: "left",
width: "10%",
},
{
align: "left",
width: "5%",
},
{
align: "left",
width: "10%",
},
{
align: "left",
width: "10%",
},
],
header: [
"序号",
"姓名",
"所属网格",
"所属房屋",
"联系电话",
"证件号",
"性别",
"出生日期",
"操作",
],
type: null,
typeList: [
{
type: "old",
name: "老年人",
url: "/actual/base/peopleRoomOverview/oldPeoplePageList",
},
{
type: "dibao",
name: "低保人员",
url: "/actual/base/peopleRoomOverview/lowIncomePageList",
},
{
type: "zhiyuanzhe",
name: "志愿者",
url: "/actual/base/peopleRoomOverview/volunteerPageList",
},
{
type: "dangyuan",
name: "党员",
url: "/actual/base/peopleRoomOverview/partyPageList",
},
{
type: "shiye",
name: "失业人员",
url: "/actual/base/peopleRoomOverview/unemployedPageList",
},
{
type: "fuwu",
name: "服务找人分页查询",
url: "/actual/base/peopleRoomOverview/servicePageList",
},
{
type: "wennuan",
name: "温暖找人查询",
url: "/actual/base/peopleRoomOverview/warmthPageList",
},
{
type: "jineng",
name: "技能找人查询",
url: "/actual/base/peopleRoomOverview/skillPageList",
},
{
type: "gangwei",
name: "岗位找人分页查询",
url: "/actual/base/peopleRoomOverview/postPageList",
},
],
oldValsss: null,
jzVal: "",
searchParams: {},
unemploymentArr: [],
PostDictonArr: [],
resideArr: [],
careerArr: [],
lowIncomeReasonArr: [],
lowIncomeTypeArr: [],
};
},
activated() {
const query = this.$route.query;
this.query = this.$route.query;
this.org_id = query.org_id;
this.type = query.type;
this.type_id = query.type_id;
this.pageType = query.pageType;
this.type_name = query.type_name;
const type_name = query.type_name;
let title = type_name;
if (this.type == "jineng" || this.type == "gangwei") {
title = "失业人员";
}
if (this.type == "wennuan" || this.type == "fuwu") {
title = "低保人员";
}
this.type_name1 = title;
this.breadList[1].meta.title = title;
this.tableTitle = type_name + "居民列表";
this.pageNo = 1;
const type = this.type;
if (type == "old") {
if (query.olds) {
const olds = this.oldList.filter((item) => query.olds == item.label)[0];
this.changeOld(olds.value);
setTimeout(() => {
this.oldValsss = olds.value;
this.searchParams = {
resideSituation: null,
};
}, 200);
}
if (query.qingk) {
setTimeout(() => {
const olds = this.resideArr.filter(
(item) => query.qingk == item.label
)[0];
this.oldValsss = null;
this.searchParams = {
resideSituation: olds.value,
};
}, 200);
}
}
if (type == "dibao") {
if (query.lowIncomeType) {
setTimeout(() => {
const lowIncomeType = this.lowIncomeTypeArr.filter(
(item) => query.lowIncomeType == item.label
)[0];
this.oldValsss = null;
this.searchParams = {
lowIncomeType: lowIncomeType.value, // 低保类型
lowIncomeReason: null, // 低保原因
};
}, 200);
}
if (query.lowIncomeReason) {
setTimeout(() => {
const lowIncomeReason = this.lowIncomeReasonArr.filter(
(item) => query.lowIncomeReason == item.label
)[0];
this.oldValsss = null;
this.searchParams = {
lowIncomeType: null, // 低保类型
lowIncomeReason: lowIncomeReason.value, // 低保原因
};
}, 200);
}
}
if (type == "shiye") {
if (query.olds) {
const olds = this.oldAllList1.filter(
(item) => query.olds == item.label
)[0];
this.changeOld(olds.value);
setTimeout(() => {
this.oldValsss = olds.value;
this.searchParams = {
employmentWish: null, // 就业愿望
unemploymentReason: null, // 失业原因
};
}, 200);
}
if (query.employmentWish) {
setTimeout(() => {
const employmentWish = this.careerArr.filter(
(item) => query.employmentWish == item.label
)[0];
this.searchParams = {
employmentWish: employmentWish.value, // 就业愿望
unemploymentReason: null, // 失业原因
startAge: null,
endAge: null,
};
this.oldValsss = null;
}, 200);
}
if (query.unemploymentReason) {
setTimeout(() => {
const unemploymentReason = this.unemploymentArr.filter(
(item) => query.unemploymentReason == item.label
)[0];
this.searchParams = {
employmentWish: null, // 就业愿望
unemploymentReason: unemploymentReason.value, // 失业原因
startAge: null,
endAge: null,
};
this.oldValsss = null;
}, 200);
}
if(query.unemploymentReason === ""){
setTimeout(() => {
this.searchParams = {
employmentWish: null, // 就业愿望
unemploymentReason: null, // 失业原因
startAge: null,
endAge: null,
};
this.oldValsss = null;
}, 200);
}
}
if (type == "dangyuan") {
if (query.olds) {
const olds = this.oldAllList1.filter(
(item) => query.olds == item.label
)[0];
this.changeOld(olds.value);
setTimeout(() => {
this.oldValsss = olds.value;
}, 200);
}
if (query.cultureLevel) {
setTimeout(() => {
const cultureLevel = this.PostDictonArr.filter(
(item) => query.cultureLevel == item.label
)[0];
this.searchParams = {
cultureLevel: cultureLevel.value, // 志愿者类型
};
this.oldValsss = null;
}, 200);
}
}
if (type == "zhiyuanzhe") {
if (query.olds) {
const olds = this.oldAllList1.filter(
(item) => query.olds == item.label
)[0];
this.changeOld(olds.value);
setTimeout(() => {
this.oldValsss = olds.value;
this.searchParams = {
gategoryCode: null, // 志愿者类型
};
}, 200);
}
if (query.gategoryCode) {
setTimeout(() => {
const gategoryCode = this.volunteerArr.filter(
(item) => query.gategoryCode == item.label
)[0];
this.oldValsss = null;
this.searchParams = {
gategoryCode: gategoryCode.value, // 志愿者类型
};
}, 200);
}
}
if (
type == "fuwu" ||
type == "wennuan" ||
type == "jineng" ||
type == "gangwei"
) {
setTimeout(() => {
this.searchParams = {
serviceOrgName: null, // 服务组织名称
};
this.oldValsss = null;
}, 200);
}
if (!query.olds) {
this.getList();
}
if (this.pageType != "normal") {
this.colList = [
{
align: "left",
width: "5%",
},
{
align: "left",
width: "15%",
},
{
align: "left",
width: "20%",
},
{
align: "left",
width: "15%",
},
{
align: "left",
width: "15%",
},
{
align: "left",
width: "15%",
},
{
align: "left",
width: "10%",
},
{
align: "left",
width: "10%",
},
];
this.header = [
"序号",
"服务类型",
"服务事项",
"来源",
"服务时间",
"服务组织",
"服务人数",
"操作",
];
}
// 字典
this.getResideNation();
this.getPostNation();
this.getUnemployment();
this.getCareer();
this.getVolunteer();
this.getLowIncomeReason();
this.getLowIncomeType();
},
created() {
this.pageNo = 1;
},
watch: {
// oldValsss: {
// handler(newVal) {
// // this.pageNo = 1;
// // const searchParams = {
// // startAge: newVal[0],
// // endAge: newVal[1],
// // };
// // this.getList(searchParams);
// },
// },
searchParams(newVal) {
this.pageNo = 1;
this.getList();
},
},
methods: {
changeOld(e) {
if (!e) {
this.oldValsss = null;
const searchParams = {
startAge: null,
endAge: null,
};
this.getList(searchParams);
return;
}
const searchParams = {
startAge: e[0],
endAge: e[1],
};
this.oldValsss = e;
this.getList(searchParams);
},
handleClickBreadItem({ item }) {
this.$router.push({
path: item.path,
query: {
org_id: this.org_id,
type_id: this.type_id,
type_name: item.meta.title,
pageType: this.pageType,
type: this.type,
pageType: this.pageType,
},
});
},
changeFwfmc(e) {
this.searchParams = {
serviceOrgName: e.target.value || null,
};
this.getList();
},
changeSearch() {
this.getList();
},
jumpPage(index) {
let item = this.listData[index];
if (item.id) {
this.$router.push({
path: "/dataBoard/renfang/resident",
query: {
org_id: this.org_id,
type_id: this.type_id,
user_id: item.id,
type: this.type,
pageType: this.pageType,
type_name: this.type_name,
},
});
} else {
this.$message.error("该人员暂无居民信息!");
}
},
handlePageNoChange(pageNo) {
this.pageNo = pageNo;
this.getList();
},
handleSizeChange(pageSize) {
localStorage.setItem("dataBoard_PageSize", pageSize);
this.pageSize = pageSize;
this.getList();
},
async getList(item) {
const { url } = this.typeList.filter((d) => d.type == this.type)[0];
const sourceType = ["公共服务", "共性需求", "政策找人", "服务找人"];
this.loading = true;
let params = {};
if (
this.oldValsss &&
this.oldValsss != "" &&
this.oldValsss.length != 0
) {
params = {
startAge: this.oldValsss[0],
endAge: this.oldValsss[1],
};
} else {
params = {
startAge: null,
endAge: null,
};
}
let queryParam = {
pageNo: this.pageNo,
pageSize: this.pageSize,
...this.searchParams,
...params,
};
for (let key in queryParam) {
if (
queryParam[key] == "ALL" ||
queryParam[key] == "" ||
queryParam[key] == null
) {
queryParam[key] = undefined;
}
}
this.$http.post(url, queryParam).then(({ data: res }) => {
this.loading = false;
const { data, code, msg } = res;
const { list, total } = data;
const gender = ["未知", "男", "女"];
if (code === 0) {
this.listData = list;
if (this.pageType == "normal") {
this.list = list.map((item, index) => {
return [
index + 1,
item.name ? item.name : "--",
item.gridName ? item.gridName : "--",
item.fullName ? item.fullName : "--",
item.mobile ? this.$sensitive(item.mobile, 3, 7) : "--",
item.idNum ? this.$sensitive(item.idNum, 0, 14) : "--",
item.gender ? gender[item.gender] : "--",
item.birthday ? item.birthday : "--",
{ type: "operate", list: ["查看"] },
];
});
} else {
this.list = list.map((item, index) => {
return [
index + 1,
item.serviceCategoryKey ? item.serviceCategoryKey : "--",
item.serviceName ? item.serviceName : "--",
item.awardPoint ? sourceType[item.awardPoint] : "--",
item.serviceTimeStart ? item.serviceTimeStart : "--",
item.serviceOrgName ? item.serviceOrgName : "--",
item.servedPersonQty ? item.servedPersonQty : "--",
{ type: "operate", list: ["查看"] },
];
});
}
this.total = total;
} else {
this.$message.error(msg);
}
});
},
async getResideNation() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "reside_situation",
});
this.resideArr = [
{
value: "ALL",
label: "全部",
},
...data.data,
];
} catch (error) {}
},
// async getPostNation() {
// try {
// let { data } = await this.$http.post("sys/dict/data/dictlist", {
// dictType: "welfare_post",
// });
// this.PostDictonArr = data.data;
// } catch (error) {
// }
// },
async getUnemployment() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "unemployment_reason",
});
this.unemploymentArr = [
{
value: "ALL",
label: "全部",
},
...data.data,
];
} catch (error) {}
},
async getCareer() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "career_goals",
});
this.careerArr = [
{
value: "ALL",
label: "全部",
},
...data.data,
];
} catch (error) {}
},
async getVolunteer() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "VOLUNTEER_CATEGORY",
});
this.volunteerArr = [
{
value: "ALL",
label: "全部",
},
...data.data,
];
} catch (error) {}
},
async getLowIncomeReason() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "low_income_reason",
});
this.lowIncomeReasonArr = [
{
value: "ALL",
label: "全部",
},
...data.data,
];
} catch (error) {}
},
async getLowIncomeType() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "low_income_type",
});
this.lowIncomeTypeArr = [
{
value: "ALL",
label: "全部",
},
...data.data,
];
} catch (error) {}
},
async getPostNation() {
try {
let { data } = await this.$http.post("sys/dict/data/education", {
formCode: "resi_base_info",
});
this.PostDictonArr = [
{
value: "ALL",
label: "全部",
},
...data.data,
];
} catch (error) {}
},
},
destroyed() {},
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style>