市北互联平台前端仓库
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.
 
 
 
 

1022 lines
30 KiB

<template>
<div>
<div v-show="!showedFuncPanel">
<div class="m-info">
<div class="wrap">
<div class="logo">
<img src="@/assets/img/shequ/logo.png" />
</div>
<div class="search">
<div class="input">
<select v-model="searchData.type">
<option value="jumin">居民</option>
<option value="fangwu">房屋</option>
<option value="xuqiu">需求</option>
</select>
<input
type="text"
:placeholder="typePlaceholder[searchData.type]"
v-model="searchData.keyword"
@keyup.enter="handleClickSearchBtn"
/>
<div
class="close-btn"
v-if="searchData.keyword != ''"
@click="searchData.keyword = ''"
>
<img src="@/assets/img/shequ/close.png" />
</div>
</div>
<div class="btn" @click="handleClickSearchBtn">搜索</div>
</div>
<div
class="m-tb"
v-if="
searchData.type == 'jumin' &&
searchData.keyword != '' &&
searchStatus == 'ing'
"
>
<div class="tb">
<el-table
:data="searchJumin.list"
border
style="width: 100%"
class="resi-table"
:max-height="1000"
>
<el-table-column
label="序号"
type="index"
align="center"
width="50"
/>
<el-table-column
v-for="item in searchJumin.header"
:key="item.columnName"
:prop="item.columnName"
:label="item.label"
align="center"
:show-overflow-tooltip="true"
:width="
item.itemType === 'radio' ? computedWidth(item.label) : 180
"
>
<template slot-scope="scope">
<span>{{ handleFilterSpan(scope.row, item) }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" align="center">
<template slot-scope="scope">
<el-button
@click="handleWatchSearchJumin(scope.$index)"
type="text"
size="small"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination
@size-change="handleSizeChangeSearchJumin"
@current-change="handleCurrentChangeSearchJumin"
:current-page.sync="searchJumin.pageNo"
:page-sizes="[20, 50, 100, 200]"
:page-size="parseInt(searchJumin.pageSize)"
layout="sizes, prev, pager, next"
:total="searchJumin.total"
>
</el-pagination>
</div>
</div>
</div>
<div
class="m-tb"
v-if="
searchData.type == 'fangwu' &&
searchData.keyword != '' &&
searchStatus == 'ing'
"
>
<div class="tb">
<el-table
:data="searchFangwu.list"
v-loading="searchFangwu.loading"
border
:max-height="1000"
style="width: 100%"
>
<el-table-column
label="序号"
type="index"
align="center"
width="50"
/>
<el-table-column prop="houseName" label="房屋名称" width="120">
</el-table-column>
<el-table-column
prop="neighborHoodName"
label="所属小区"
width="160"
>
</el-table-column>
<el-table-column prop="buildingName" label="所属楼栋">
</el-table-column>
<el-table-column prop="unitNum" label="单元号">
</el-table-column>
<el-table-column prop="doorName" label="门牌号">
</el-table-column>
<el-table-column prop="houseType" label="类型">
</el-table-column>
<el-table-column prop="purpose" label="用途"> </el-table-column>
<el-table-column prop="rentFlag" label="是否出租">
</el-table-column>
<el-table-column prop="ownerName" label="房主姓名">
</el-table-column>
<el-table-column prop="ownerPhone" label="房主电话" width="110">
</el-table-column>
<el-table-column prop="ownerIdCard" label="身份证" width="170">
</el-table-column>
<el-table-column
label="操作"
fixed="right"
header-align="center"
align="center"
class="operate"
>
<template slot-scope="scope">
<el-button
type="text"
style="color: #1c6afd; text-decoration: underline"
size="small"
@click="handleWatchSearchFangwu(scope.row)"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination
@size-change="handleSizeChangeSearchFangwu"
@current-change="handleCurrentChangeSearchFangwu"
:current-page.sync="searchFangwu.pageNo"
:page-sizes="[20, 50, 100, 200]"
:page-size="parseInt(searchFangwu.pageSize)"
layout="sizes, prev, pager, next"
:total="searchFangwu.total"
>
</el-pagination>
</div>
</div>
</div>
<div
class="m-tb"
v-if="
searchData.type == 'xuqiu' &&
searchData.keyword != '' &&
searchStatus == 'ing'
"
>
<div class="tb">
<el-table
:data="searchXuqiu.list"
v-loading="searchXuqiu.loading"
border
:max-height="1000"
style="width: 100%"
>
<el-table-column
label="序号"
type="index"
align="center"
width="50"
/>
<el-table-column
v-for="item in searchXuqiu.header"
:key="item.columnName"
:prop="item.columnName"
:label="item.label"
:align="item.align"
:width="item.width"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<span>{{ handleFilterSpan(scope.row, item) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
fixed="right"
header-align="center"
align="center"
class="operate"
>
<template slot-scope="scope">
<el-button
type="text"
style="color: #1c6afd; text-decoration: underline"
size="small"
@click="handleWatchSearchXuqiu(scope.row)"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination
@size-change="handleSizeChangeSearchXuqiu"
@current-change="handleCurrentChangeSearchXuqiu"
:current-page.sync="searchXuqiu.pageNo"
:page-sizes="[20, 50, 100, 200]"
:page-size="parseInt(searchXuqiu.pageSize)"
layout="sizes, prev, pager, next"
:total="searchXuqiu.total"
>
</el-pagination>
</div>
</div>
</div>
<div
class="m-tb"
v-if="
searchData.type == 'xuqiu' &&
searchData.keyword != '' &&
searchStatus == 'ing'
"
>
<div class="tb"></div>
</div>
<div class="m-list" v-if="searchStatus == 'ini'">
<div class="list-title">常用功能</div>
<div class="list">
<div
class="item"
:key="item.menuId"
@click="handleClickFunc(item)"
v-for="item in funcList"
>
<div class="icon">
<svg
class="icon-svg aui-sidebar__menu-icon"
aria-hidden="true"
>
<use :xlink:href="`#${item.icon}`" />
</svg>
</div>
<p>{{ item.menuName }}</p>
</div>
<div class="item" @click="showedFuncPanel = true">
<div class="icon">
<img src="@/assets/img/shequ/function/tianjiayingyong.png" />
</div>
<p>添加应用</p>
</div>
</div>
</div>
</div>
</div>
<div class="m-data" v-if="searchStatus == 'ini'">
<div class="wrap">
<div class="headline">人员预警</div>
<div class="cnt">
<div class="chart">
<pan-chart
:width="520"
:height="420"
v-if="warningChart.loading"
:total="warningChart.total"
:list="warningChart.list"
/>
</div>
<div class="tb">
<el-table
:data="warningTb.list"
border
style="width: 100%"
class="resi-table"
:max-height="maxTableHeight"
>
<el-table-column
label="序号"
type="index"
align="center"
width="50"
/>
<el-table-column prop="typeName" label="类型">
</el-table-column>
<el-table-column prop="gridName" label="所属网格">
</el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="family" label="所属家庭">
</el-table-column>
<el-table-column prop="mobile" label="电话"> </el-table-column>
<el-table-column fixed="right" label="操作" align="center">
<template slot-scope="scope">
<el-button
@click="handleWatchWarning(scope.$index)"
type="text"
size="small"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination
@size-change="handleSizeChangeWarning"
@current-change="handleCurrentChangeWarning"
:current-page.sync="warningTb.pageNo"
:page-sizes="[20, 50, 100, 200]"
:page-size="parseInt(warningTb.pageSize)"
layout="sizes, prev, pager, next"
:total="warningTb.total"
>
</el-pagination>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 修改弹出框 -->
<div
v-show="showedFuncPanel"
v-if="
Array.isArray($store.state.sidebarMenuList) &&
$store.state.sidebarMenuList.length > 0
"
>
<div class="m-panel">
<div
class="m-list"
v-if="selectedFuncList && selectedFuncList.length > 0"
>
<div class="list-title">常用功能</div>
<div class="list">
<div
class="item"
:key="item.menuId"
@click="selectFuncItem(item.menuId)"
v-for="item in selectedFuncList"
>
<div class="corner-mark z-on">
<i class="el-icon-success"></i>
</div>
<div class="icon">
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
<use :xlink:href="`#${item.icon}`" />
</svg>
</div>
<p>{{ item.menuName }}</p>
</div>
</div>
</div>
<div class="m-list">
<div class="list-title">所有功能</div>
<div
:key="'one' + menu.id"
v-show="menu.children && menu.children.length > 0"
v-for="menu in $store.state.sidebarMenuList"
>
<div class="list-title2">{{ menu.name }}</div>
<div class="list">
<div
class="item"
:key="'two' + item.id"
@click="selectFuncItem(item.id)"
v-for="item in menu.children"
>
<div
class="corner-mark"
:class="{
'z-on': selectedFuncIdList.indexOf(item.id) !== -1,
}"
>
<i class="el-icon-success"></i>
</div>
<div class="icon">
<svg
class="icon-svg aui-sidebar__menu-icon"
aria-hidden="true"
>
<use :xlink:href="`#${item.icon}`" />
</svg>
</div>
<p>{{ item.name }}</p>
</div>
</div>
</div>
</div>
<div class="operate">
<el-button round @click="showedFuncPanel = false">返回</el-button>
<el-button type="primary" round @click="editFuncList">确认</el-button>
</div>
</div>
</div>
<people-more
v-if="showedPeopleMoreInfo && currentPepeleId"
:userId="currentPepeleId"
:gridName="currentPepeleGridName"
@close="showedPeopleMoreInfo = false"
/>
<!-- 修改弹出框 -->
<el-dialog
:visible.sync="showedFangwuInfo"
:close-on-click-modal="false"
:close-on-press-escape="false"
title="房屋详情"
width="900px"
@closed="showedFangwuInfo = false"
>
<fangwu-info
ref="fangwu_info"
@dialogCancle="showedFangwuInfo = false"
></fangwu-info>
</el-dialog>
<!-- 修改弹出框 -->
<el-dialog
:visible.sync="showedXuqiuInfo"
:close-on-click-modal="false"
:close-on-press-escape="false"
title="需求详情"
width="900px"
@closed="showedXuqiuInfo = false"
>
<xuqiu-info
ref="xuqiu_info"
@dialogCancle="showedXuqiuInfo = false"
></xuqiu-info>
</el-dialog>
</div>
</template>
<script>
import { requestPost } from "@/js/dai/request";
import panChart from "@/views/modules/shequ/cpts/pan-chart";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";
import peopleMore from "@/views/modules/shequ/cpts/people-more";
import fangwuInfo from "@/views/modules/shequ/cpts/fangwu-info";
import xuqiuInfo from "@/views/modules/shequ/cpts/xuqiu-info";
export default {
components: { panChart, peopleMore, fangwuInfo, xuqiuInfo },
data() {
return {
searchStatus: "ini", //ing over
searchData: {
type: "jumin",
keyword: "",
},
typePlaceholder: {
jumin: "请输入姓名或电话或身份证号",
fangwu: "请输入“小区名称,楼号”,如:亿联小区,1号楼",
xuqiu: "请输入需求人或需求内容或服务方",
},
selectedFuncIdList: [],
funcList: [
// {
// url: '',
// menuId: '',
// menuName: '',
// icon: '',
// }
],
showedFuncPanel: false,
warningChart: {
loading: false,
total: "",
list: [],
},
warningTb: {
pageNo: 1,
pageSize: window.localStorage.getItem("pageSize") || 20,
total: 1,
list: [],
},
searchJumin: {
header: [],
pageNo: 1,
pageSize: window.localStorage.getItem("pageSize") || 20,
total: 1,
list: [],
},
searchFangwu: {
pageNo: 1,
pageSize: window.localStorage.getItem("pageSize") || 20,
total: 1,
list: [],
},
searchXuqiu: {
header: [
{
label: "状态",
align: "center",
columnName: "statusName",
width: "120",
options: [
{
label: "待处理",
value: "pending",
},
{
label: "已取消",
value: "canceled",
},
{
label: "已派单",
value: "assigned",
},
{
label: "已接单",
value: "have_order",
},
{
label: "已完成",
value: "finished",
},
],
},
{
label: "所属网格",
columnName: "gridName",
align: "center",
width: "",
options: [],
},
{
label: "需求类型",
columnName: "categoryName",
align: "center",
width: "",
options: [],
},
{
label: "需求内容",
columnName: "content",
align: "center",
width: "",
options: [],
},
{
label: "上报类型",
columnName: "reportTypeName",
align: "center",
width: "120",
options: [
{
label: "社区帮办",
value: "community",
},
{
label: "楼长帮办",
value: "building_caption",
},
{
label: "党员帮办",
value: "party",
},
{
label: "自身上报",
value: "self_help",
},
],
},
{
label: "上报人",
columnName: "reportUserName",
align: "center",
width: "120",
options: [],
},
{
label: "上报时间",
columnName: "reportTime",
align: "center",
width: "180",
options: [],
},
{
label: "需求人",
columnName: "demandUserName",
align: "center",
width: "80",
options: [],
},
{
label: "服务方",
columnName: "serviceShowName",
align: "center",
width: "120",
options: [],
},
{
label: "服务时间",
columnName: "wantServiceTime",
align: "center",
width: "180",
options: [],
},
],
pageNo: 1,
pageSize: window.localStorage.getItem("pageSize") || 20,
total: 1,
list: [],
},
// 显示人员详情
showedPeopleMoreInfo: false,
currentPepeleId: "",
currentPepeleGridName: "",
// 显示人员详情
showedFangwuInfo: false,
showedXuqiuInfo: false,
};
},
computed: {
selectedFuncList() {
const {
selectedFuncIdList,
$store: {
state: { sidebarMenuList },
},
} = this;
let obj = {};
sidebarMenuList.forEach((menu) => {
if (selectedFuncIdList.indexOf(menu.id) !== -1) {
obj[menu.id] = {
menuId: menu.id,
menuName: menu.name,
icon: menu.icon,
url: menu.url,
};
}
if (menu.children && menu.children.length > 0) {
menu.children.forEach((item) => {
if (selectedFuncIdList.indexOf(item.id) !== -1) {
obj[item.id] = {
menuId: item.id,
menuName: item.name,
icon: item.icon,
url: item.url,
};
}
});
}
});
return selectedFuncIdList.map((id) => obj[id]);
},
maxTableHeight() {
// return this.clientHeight - 450;
return 420;
},
...mapGetters(["clientHeight"]),
},
watch: {
"searchData.keyword": function (val) {
if (val == "") {
this.searchStatus = "ini";
}
},
},
mounted() {
this.getApiData();
console.log(
"dynamicMenuRoutes----------------------------",
this.$store.state.sidebarMenuList
);
},
methods: {
computedWidth(label) {
const wd = 20 * label.length;
return wd > 80 ? wd : 80;
},
handleFilterSpan(row, item) {
let _val = "";
if (item.options && item.options.length > 0) {
item.options.forEach((n) => {
if (n.value === row[item.columnName]) _val = n.label;
});
}
return _val || row[item.columnName];
},
handleClickSearchBtn() {
const {
searchData: { type, keyword },
} = this;
if (!keyword) return this.$message.error("请输入搜索条件");
if (type == "jumin") {
this.searchJumin.pageNo = 1;
this.searchJumin.total = 0;
this.getSearchJumin();
} else if (type == "fangwu") {
this.searchFangwu.pageNo = 1;
this.searchFangwu.total = 0;
this.getSearchFangwu();
} else if (type == "xuqiu") {
this.searchXuqiu.pageNo = 1;
this.searchXuqiu.total = 0;
this.getSearchXuqiu();
}
this.searchStatus = "ing";
},
handleSizeChangeWarning(val) {
console.log(`每页 ${val}`);
this.warningTb.pageSize = val;
window.localStorage.setItem("pageSize", val);
this.getWarningTb();
},
handleCurrentChangeWarning(val) {
console.log(`当前页: ${val}`);
this.warningTb.pageNo = val;
this.getWarningTb();
},
async handleWatchWarning(rowIndex) {
let item = this.warningTb.list[rowIndex];
this.currentPepeleId = item.userId;
this.currentPepeleGridName = item.gridName;
await nextTick();
this.showedPeopleMoreInfo = true;
},
handleSizeChangeSearchJumin(val) {
console.log(`每页 ${val}`);
this.searchJumin.pageSize = val;
window.localStorage.setItem("pageSize", val);
this.getSearchJumin();
},
handleCurrentChangeSearchJumin(val) {
console.log(`当前页: ${val}`);
this.searchJumin.pageNo = val;
this.getSearchJumin();
},
async handleWatchSearchJumin(rowIndex) {
let item = this.searchJumin.list[rowIndex];
this.currentPepeleId = item.icResiUserId;
this.currentPepeleGridName = item.GRID_ID;
await nextTick();
this.showedPeopleMoreInfo = true;
},
handleSizeChangeSearchFangwu(val) {
console.log(`每页 ${val}`);
this.searchFangwu.pageSize = val;
window.localStorage.setItem("pageSize", val);
this.getSearchFangwu();
},
handleCurrentChangeSearchFangwu(val) {
console.log(`当前页: ${val}`);
this.searchFangwu.pageNo = val;
this.getSearchFangwu();
},
async handleWatchSearchFangwu(row) {
this.showedFangwuInfo = true;
await nextTick();
this.$refs.fangwu_info.initForm("detail", row);
},
handleSizeChangeSearchXuqiu(val) {
console.log(`每页 ${val}`);
this.searchXuqiu.pageSize = val;
window.localStorage.setItem("pageSize", val);
this.getSearchXuqiu();
},
handleCurrentChangeSearchXuqiu(val) {
console.log(`当前页: ${val}`);
this.searchXuqiu.pageNo = val;
this.getSearchXuqiu();
},
async handleWatchSearchXuqiu(row) {
this.showedXuqiuInfo = true;
await nextTick();
this.$refs.xuqiu_info.initForm("detail", row);
},
handleClickFunc(menu) {
const menuId = menu.menuId;
var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
(item) => item.meta.menuId === menuId
)[0];
if (route) {
this.$router.push({ name: route.name });
}
},
getApiData() {
this.getFuncList();
this.getWarningList();
this.getWarningTb();
this.getSearchJuminHeader();
},
selectFuncItem(id) {
let index = this.selectedFuncIdList.indexOf(id);
if (index === -1) {
this.selectedFuncIdList.push(id);
} else {
this.selectedFuncIdList.splice(index, 1);
}
},
async getSearchJuminHeader() {
const url = "/oper/customize/icform/tableheaders";
const { data, code, msg } = await requestPost(url, {
formCode: "resi_base_info",
});
if (code === 0) {
console.log("居民表格header请求成功!!!!!!!!!!!!!!");
this.searchJumin.header = data;
} else {
return this.$message.error("网络错误");
}
},
async getSearchXuqiu() {
const url = "/heart/userdemand/search";
const {
searchData: { keyword },
searchXuqiu: { pageSize, pageNo },
} = this;
const { data, code, msg } = await requestPost(url, {
keyword,
pageSize,
pageNo,
});
if (code === 0) {
console.log("列表请求成功!!!!!!!!!!!!!!");
this.searchXuqiu.total = data.total || 0;
this.searchXuqiu.list = data.list
? data.list.map((item) => {
return item;
})
: [];
} else {
}
},
async getSearchJumin() {
const url = "/epmetuser/icresiuser/search";
const {
searchData: { keyword },
searchJumin: { pageSize, pageNo },
} = this;
const { data, code, msg } = await requestPost(url, {
keyword,
pageSize,
pageNo,
});
if (code === 0) {
console.log("列表请求成功!!!!!!!!!!!!!!");
this.searchJumin.total = data.total || 0;
this.searchJumin.list = data.list
? data.list.map((item) => {
return item;
})
: [];
} else {
}
},
async getSearchFangwu() {
const url = "/gov/org/house/search";
const {
searchData: { keyword },
searchFangwu: { pageSize, pageNo },
} = this;
const { data, code, msg } = await requestPost(url, {
keyword,
pageSize,
pageNo,
});
if (code === 0) {
console.log("列表请求成功!!!!!!!!!!!!!!");
this.searchFangwu.total = data.total || 0;
this.searchFangwu.list = data.list
? data.list.map((item) => {
return item;
})
: [];
} else {
}
},
async getWarningTb() {
const url = "/epmetuser/icresiuser/personwarn/rightlist";
const {
warningTb: { pageSize, pageNo },
} = this;
const { data, code, msg } = await requestPost(url, {
pageSize,
pageNo,
});
if (code === 0) {
console.log("列表请求成功!!!!!!!!!!!!!!");
this.warningTb.total = data.total || 0;
this.warningTb.list = data.list
? data.list.map((item) => {
item.typeName = item.type.join("、");
return item;
})
: [];
} else {
}
},
//加载组织数据
async getWarningList() {
const url = "/epmetuser/icstatsresiwarn/personwarn/leftpie";
let params = {};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.warningChart.loading = true;
this.warningChart.total = data.total;
this.warningChart.list = data.list.map((item) => {
return {
name: item.typeName,
count: item.typeCount,
const: "const",
};
});
} else {
this.$message.error(msg);
}
},
//加载组织数据
async getFuncList() {
const url = "/gov/access/icoftenusefunction/oftenusefunctionlist";
let params = {};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.funcList = data || [];
this.selectedFuncIdList = this.funcList.map((item) => item.menuId);
} else {
this.$message.error(msg);
}
},
//加载组织数据
async editFuncList() {
const url = "/gov/access/icoftenusefunction/addoftenusefunction";
const { selectedFuncIdList } = this;
let params = selectedFuncIdList.map((menuId, sort) => {
return { menuId, sort };
});
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.$message.success("修改成功");
this.showedFuncPanel = false;
this.getFuncList();
} else {
this.$message.error(msg);
}
},
},
};
</script>
<style lang="scss" src="@/assets/scss/modules/search.scss" scoped></style>