老产品前端代码
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.
 
 
 
 

954 lines
27 KiB

<template>
<div class="resi-container">
<el-card ref="searchCard" class="search-card">
<el-form
ref="searchForm"
:inline="true"
:model="fmData"
class="demo-form-inline"
>
<!-- <el-form-item
v-if="communityList.length > 0"
label="所在社区"
prop="orgId"
>
<el-select
v-model.trim="fmData.orgId"
placeholder="所在社区"
size="small"
clearable
class="resi-cell-input"
>
<el-option
v-for="item in communityList"
:key="item.orgId"
:label="item.orgName"
:value="item.orgId"
>
</el-option>
</el-select>
</el-form-item> -->
<el-form-item label="居住地址" prop="address">
<el-input
v-model="fmData.address"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入"
>
</el-input>
</el-form-item>
<el-form-item label="户籍地址" prop="domicilePlace">
<el-input
v-model="fmData.domicilePlace"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入"
>
</el-input>
</el-form-item>
<el-form-item label="户主姓名" prop="houseHolderName">
<el-input
v-model="fmData.houseHolderName"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入"
>
</el-input>
</el-form-item>
<el-form-item label="审核状态" prop="checkState">
<el-select v-model="fmData.checkState">
<el-option
v-for="item in checkStateList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="填写时间" prop="startTime">
<el-date-picker
v-model="timeRange"
type="daterange"
clearable
size="small"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button
class="diy-button--search"
size="small"
@click="handleSearch"
>查询</el-button
>
<el-button
class="diy-button--reset"
size="small"
@click="resetForm('searchForm')"
>重置</el-button
>
</el-form-item>
</el-form>
</el-card>
<el-card class="resi-card-table">
<div class="resi-row-btn">
<el-button @click="handleChu" class="diy-button--reset" size="small"
>导出</el-button
>
</div>
<el-table
:data="tableData"
border
style="width: 100%"
class="resi-table"
:height="tableHeight"
:span-method="arraySpanMethod"
>
<el-table-column label="序号" prop="desc" align="center" width="50" />
<el-table-column
prop="houseHolderName"
width="100"
label="户主姓名"
align="center"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="address"
align="center"
min-width="140"
label="居住地址"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<span v-if="scope.row.homeId == 'other'" class="badge"
>房屋缺失</span
>
<span>{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column
prop="houseType"
align="center"
width="100"
label="房屋状态"
>
<template slot-scope="scope">
<span v-if="scope.row.houseType == 1">出租</span>
<span v-if="scope.row.houseType == 2">闲置</span>
<span v-if="scope.row.houseType == 3">未售出</span>
<span v-if="scope.row.houseType == 0">自住</span>
</template>
</el-table-column>
<el-table-column
prop="totalResi"
width="80"
align="center"
label="居住人数"
/>
<el-table-column
prop="memberName"
width="100"
label="成员姓名"
align="center"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="memberIdNum"
width="180"
align="center"
label="成员证件号"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="memberMobile"
width="140"
align="center"
label="成员手机号"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="relationship"
min-width="120"
align="center"
label="与户主关系"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<span>{{ getRelationshipName(scope.row.relationship) }}</span>
</template>
</el-table-column>
<el-table-column
prop="heSuanCount"
width="120"
align="center"
label="核酸检测次数"
/>
<el-table-column
prop="ymjz"
width="140"
align="center"
label="疫苗接种情况"
>
<template slot-scope="scope">
<span v-if="scope.row.ymjz == 1">全程接种</span>
<span v-if="scope.row.ymjz == 2">未全程接种</span>
<span v-if="scope.row.ymjz == 0">未接种</span>
</template>
</el-table-column>
<el-table-column
prop="domicilePlace"
min-width="140"
align="center"
label="户籍地址"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="workPlace"
min-width="120"
align="center"
label="单位名称"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="remark"
align="center"
label="备注"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column
prop="faceImg"
min-width="120"
align="center"
label="人脸"
>
<template slot-scope="scope">
<el-image
style="max-height: 50px; max-width: 50px"
:src="scope.row.faceImg"
:preview-src-list="[scope.row.faceImg]"
>
<div slot="error" class="image-slot">
<!-- <i class="el-icon-picture-outline"></i> -->
</div>
</el-image>
</template>
</el-table-column>
<el-table-column
prop="checkState"
min-width="120"
align="center"
label="状态"
:show-overflow-tooltip="true"
fixed="right"
>
<template slot-scope="scope">
<span v-if="scope.row.checkState === '0'">未审核</span>
<span v-else-if="scope.row.checkState === '1'">未通过</span>
<span v-else-if="scope.row.checkState === '2'">已通过</span>
<span v-else></span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="100" fixed="right">
<template slot-scope="scope">
<el-button
type="text"
class="div-table-button--detail"
size="small"
@click="handleWatch('look', scope.row)"
>查看</el-button
>
<!-- <el-button type="text"
class="div-table-button--detail"
size="small"
@click="handleWatch('check', scope.row)">审核</el-button> -->
<el-button
type="text"
class="div-table-button--detail"
size="small"
v-if="
scope.row.agencyId == agencyId && scope.row.checkState === '0'
"
@click="handleWatch('check', scope.row)"
>审核</el-button
>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageNo"
:page-sizes="[20, 50, 100, 200]"
:page-size="parseInt(pageSize)"
layout="sizes, prev, pager, next, total"
:total="total"
>
</el-pagination>
</div>
</el-card>
<!-- 修改弹出框 -->
<el-dialog
:visible.sync="formShow"
:close-on-click-modal="false"
:close-on-press-escape="false"
title="信息详情"
width="1100px"
top="5vh"
class="dialog-h"
@closed="handleClose"
>
<div class="scroll-h">
<el-form
ref="ref_form"
:inline="true"
:model="dataForm"
:disabled="true"
class="form"
>
<el-form-item
label="户主姓名:"
prop="houseHolderName"
label-width="150px"
>
<!-- <el-input class="item_width_1"
v-model="dataForm.houseHolderName">
</el-input> -->
<div class="wd50">{{ dataForm.houseHolderName }}</div>
</el-form-item>
<el-form-item label="居住地址:" prop="address" label-width="150px">
<!-- <el-input class="wd50" v-model="dataForm.address">
</el-input> -->
<div class="wd50">{{ dataForm.address }}</div>
</el-form-item>
<div>
<el-form-item
label="房屋状态:"
prop="houseType"
label-width="150px"
>
<!-- <el-input class="item_width_1"
v-model="dataForm.houseType">
</el-input> -->
<div class="wd50">{{ dataForm.houseType }}</div>
</el-form-item>
<el-form-item
label="居住人数:"
prop="totalResi"
label-width="150px"
>
<!-- <el-input class="item_width_1"
v-model="dataForm.totalResi">
</el-input> -->
<div class="wd50">{{ dataForm.totalResi }}</div>
</el-form-item>
</div>
</el-form>
<el-table
:data="dataForm.list"
border
style="width: 1060px; margin: 20px"
class="resi-table"
:height="dialogTableHeight"
>
<el-table-column
label="序号"
type="index"
align="center"
width="50"
/>
<el-table-column
prop="memberName"
width="100"
label="成员姓名"
align="center"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="memberIdNum"
width="180"
align="center"
label="成员证件号"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="memberMobile"
width="140"
align="center"
label="成员手机号"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="heSuanCount"
width="120"
align="center"
label="核酸检测次数"
/>
<el-table-column
prop="ymjz"
width="140"
align="center"
label="疫苗接种情况"
>
<template slot-scope="scope">
<span v-if="scope.row.ymjz == 1">全程接种</span>
<span v-if="scope.row.ymjz == 2">未全程接种</span>
<span v-if="scope.row.ymjz == 0">未接种</span>
</template>
</el-table-column>
<el-table-column
prop="relationShipName"
width="120"
align="center"
label="与户主关系"
/>
<el-table-column
prop="domicilePlace"
min-width="140"
align="center"
label="户籍所在地 "
:show-overflow-tooltip="true"
/>
<el-table-column
prop="workPlace"
min-width="120"
align="center"
label="单位或学校 "
:show-overflow-tooltip="true"
/>
<el-table-column
prop="remark"
align="center"
label="备注"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column
prop="faceImg"
min-width="120"
align="center"
label="人脸"
>
<template slot-scope="scope">
<el-image
style="max-height: 50px; max-width: 50px"
:src="scope.row.faceImg"
:preview-src-list="[scope.row.faceImg]"
>
<div slot="error" class="image-slot">
<!-- <i class="el-icon-picture-outline"></i> -->
</div>
</el-image>
</template>
</el-table-column>
</el-table>
<div class="resi-btns">
<el-button @click="formShow = false">{{ $t("cancel") }}</el-button>
<el-button
v-if="dialogType == 'check'"
type="danger"
@click="checkHandle('1')"
>{{ $t("checkBTGBtn") }}</el-button
>
<el-button
v-if="dialogType == 'check'"
type="danger"
@click="showAddHouse"
>{{ $t("checkTGBtn") }}</el-button
>
</div>
</div>
</el-dialog>
<!-- 新增房屋弹出框 -->
<el-dialog
:visible.sync="addHouseShow"
:close-on-click-modal="false"
:close-on-press-escape="false"
title="新增房屋"
width="900px"
top="5vh"
class="dialog-h"
@closed="addHouseShow = false"
>
<room-form
ref="ref_form"
@dialogCancle="addHouseShow = false"
@dialogOk="roomFormOk"
></room-form>
</el-dialog>
</div>
</template>
<script>
import { requestPost } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";
import axios from "axios";
import roomForm from "./roomForm";
export default {
data() {
return {
agencyId: "",
openSearch: false,
formShow: false,
formTitle: "组织信息",
pageNo: 1,
pageSize: window.localStorage.getItem("pageSize") || 20,
total: 1,
tableData: [],
timeRange: "",
fmData: {
orgId: "",
startTime: "",
endTime: "",
address: "",
domicilePlace: "",
checkState: "",
houseHolderName: "",
},
dataForm: {},
communityList: [],
spanIndex: [], // 合并的行
importBtnTitle: "导入",
importLoading: false,
addHouseShow: false,
dialogType: "look", // 对话框是check审核还是look查看
relationshipOptions: [],
checkStateList: [
{ value: "0", label: "待审核" },
{ value: "1", label: "审核不通过" },
{ value: "2", label: "审核通过" },
],
};
},
components: {
roomForm,
},
computed: {
...mapGetters(["clientHeight", "iframeHeight"]),
tableHeight() {
const h = this.clientHeight - 360 + this.iframeHeigh;
const _h = this.clientHeight - 360;
return this.$store.state.inIframe ? h : _h;
},
dialogTableHeight() {
const h = this.clientHeight - 460 + this.iframeHeigh;
const _h = this.clientHeight - 460;
return this.$store.state.inIframe ? h : _h;
},
},
watch: {
timeRange(val) {
if (Array.isArray(val) && val.length == 2) {
this.fmData.startTime = val[0];
this.fmData.endTime = val[1];
} else {
this.fmData.startTime = "";
this.fmData.endTime = "";
}
},
},
created() {
this.agencyId = localStorage.getItem("agencyId");
},
mounted() {
// this.getcommunityList();
this.getDictList();
this.getTableData();
},
methods: {
async getDictList() {
const url = "/sys/dict/data/relationship";
const { data, code, msg } = await requestPost(url, {
formCode: "resi_base_info",
});
if (code === 0) {
this.relationshipOptions = [...data];
} else {
this.$message.success("操作失败!");
}
},
getRelationshipName(value) {
let label = "";
this.relationshipOptions.forEach((item) => {
if (item.value == value) {
label = item.label;
}
});
return label;
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// console.log('row-----r', row)
// console.log('column-----c', column)
if (
columnIndex === 0 ||
columnIndex === 1 ||
columnIndex === 2 ||
columnIndex === 3 ||
columnIndex === 4 ||
columnIndex === 15 ||
columnIndex === 16
) {
let index = this.spanIndex.findIndex(
(item) => item.firstIndex === rowIndex
);
if (index > -1) {
return {
rowspan: this.spanIndex[index].len,
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
},
async handleChu() {
const url = "/epmetuser/icresicollect/export";
const { pageSize, pageNo, fmData } = this;
axios({
url: window.SITE_CONFIG["apiURL"] + url,
method: "post",
data: {
pageSize,
pageNo,
...fmData,
},
responseType: "blob",
})
.then((res) => {
let fileName = window.decodeURI(
res.headers["content-disposition"].split(";")[1].split("=")[1]
);
console.log("filename", fileName);
let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
var url = window.URL.createObjectURL(blob);
var aLink = document.createElement("a");
aLink.style.display = "none";
aLink.href = url;
aLink.setAttribute("download", fileName);
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
})
.catch((err) => {
console.log("获取导出情失败", err);
return this.$message.error("网络错误");
});
},
handleSizeChange(val) {
console.log(`每页 ${val}`);
this.pageSize = val;
window.localStorage.setItem("pageSize", val);
this.getTableData();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNo = val;
this.getTableData();
},
handleClose() {
this.formShow = false;
},
handleSearch(val) {
console.log(this.fmData);
this.pageNo = 1;
this.getTableData();
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.timeRange = "";
this.handleSearch();
},
async handleWatch(type, row) {
this.dialogType = type;
// this.formShow = true;
await nextTick();
const url = "/epmetuser/icresicollect/detail";
const { data, code, msg } = await requestPost(url, {
id: row.id,
});
if (code === 0) {
console.log("data----de", data);
this.dataForm = {
...data,
houseType:
data.houseType == "1"
? "出租"
: data.houseType == "2"
? "闲置"
: data.houseType == "3"
? "未售出"
: "自住", // 1:出租 0:自住 2:闲置 3:未售出
};
// this.getTableData();
this.formShow = true;
} else {
this.$message.success("操作失败!");
}
},
async handleEdit(rowIndex) {
this.formShow = true;
await nextTick();
this.$refs.eleEditForm.initForm("edit", this.tableData[rowIndex]);
},
handleEditSuccess() {
this.handleClose();
this.getTableData();
},
async handleDel(rowData, rowIndex) {
console.log(rowData, rowIndex);
const url =
"/heart/iccommunityselforganization/delcommunityselforganization";
const { tableData } = this;
const { data, code, msg } = await requestPost(url, {
orgId: tableData[rowIndex].orgId,
});
if (code === 0) {
this.$message.success("删除成功!");
this.getTableData();
} else {
this.$message.success("操作失败!");
}
},
async getcommunityList() {
const url = "/gov/org/agency/community-list";
const { data, code, msg } = await requestPost(url);
if (code === 0) {
console.log("列表请求成功!!!!!!!!!!!!!!");
this.communityList = data;
} else {
}
},
async getTableData() {
const url = "/epmetuser/icresicollect/list";
const { pageSize, pageNo, fmData } = this;
const { data, code, msg } = await requestPost(url, {
pageSize,
pageNo,
...fmData,
});
if (code === 0) {
console.log("列表请求成功!!!!!!!!!!!!!!");
this.total = data.total || 0;
let _i = 0;
let arr = [];
this.spanIndex =
data.list &&
data.list.map((item, index) => {
if (index == 0) _i = 0;
else _i = _i + data.list[index - 1].list.length;
arr.push(_i);
// console.log("_i-----", _i, arr)
// if (index === data.list.length - 1) firstIndex = _i - item.list.length
return {
firstIndex: _i,
len: item.list.length,
};
});
this.tableData = data.list && this.formatArr(data.list);
console.log("tableData----0", this.spanIndex);
} else {
}
},
// 数组扁平化
formatArr(arr) {
let res = [];
let arr1 = arr.map((n, index) => {
return {
...n,
list:
n.list.length > 0
? n.list.map((i) => {
return {
...n,
...i,
desc: index + 1,
list: [],
};
})
: [],
};
});
arr1.forEach((item) => {
if (item.list && item.list.length > 0) {
res = res.concat(this.formatArr(item.list));
} else res.push(item);
});
return res;
},
showAddHouse() {
if (this.dataForm.homeId == "other") {
this.addHouseShow = true;
this.$nextTick(() => {
this.$refs.ref_form.initForm("add", null, this.dataForm.id);
});
} else {
this.checkHandle("2");
}
},
// 审核提交方法
checkHandle(type) {
const params = {
id: this.dataForm.id,
checkState: type, // 0-未审核 1-未通过 2-已通过
checkReason: "",
buildingUnitId: this.dataForm.buildingUnitId || "",
doorName: this.dataForm.doorName || "",
};
if (type == "1") {
const h = this.$createElement;
this.$prompt(
h("p", null, [
h("i", { style: "color: red" }, "* "),
h("span", null, "请输入不通过的原因:"),
]),
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
inputPattern: /^.+$/,
inputErrorMessage: "请输入原因",
}
)
.then(({ value }) => {
// if (!value) {
// return this.$message.error('请填写审核不通过原因')
// }
params.checkReason = value;
this.$http
.post("/epmetuser/icresicollect/collectCheck", params)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.formShow = false;
this.getTableData();
// 调用文件下发权限接口
// this.fileJurisdiction(params)
})
.catch(() => {});
})
.catch(() => {
// 取消输入原因
});
} else {
this.$http
.post("/epmetuser/icresicollect/collectCheck", params)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.addHouseShow = false;
this.formShow = false;
this.getTableData();
// 调用文件下发权限接口
// this.fileJurisdiction(params)
})
.catch(() => {});
}
},
// 文件下发权限接口
fileJurisdiction(params) {
this.$http
.post("/pli/power/rentContractInfo/send", params)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.disabledBtn = false;
this.checkVisible = false;
this.visible = false;
this.$emit("refreshDataList");
},
});
})
.catch(() => {});
},
roomFormOk(e) {
this.dataForm.buildingUnitId = e.buildingUnitId;
this.dataForm.doorName = e.doorName;
this.checkHandle("2");
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";
.resi-container .resi-card-table {
::v-deep .el-table th {
color: #fff;
background-color: rgba(33, 149, 254, 1);
// border-right: 1px solid rgba(33, 149, 254, 1);
}
}
.resi-table {
::v-deep .el-button--text {
text-decoration: underline;
}
}
.resi-card-table {
margin-top: 20px;
}
.resi-row-btn {
margin-bottom: 13px;
.upload-btn {
display: inline-block;
margin: 0 10px;
}
}
.resi-btns {
margin-top: 20px;
text-align: center;
}
.resi-container .resi-card {
position: relative;
overflow: visible;
}
.wd50 {
min-width: 200px;
}
.badge {
display: block;
color: #f1f2e5;
background-color: #d7000f;
border-radius: 12px;
width: 70px;
}
</style>