城阳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.
 
 
 

506 lines
14 KiB

<template>
<div class="g-main">
<div ref="searchDiv" class="m-search">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
label-width="100px"
>
<el-form-item label="姓名" prop="name">
<el-input
v-model="dataForm.name"
size="small"
class="u-item-width-normal"
clearable
placeholder="请输入姓名"
>
</el-input>
</el-form-item>
<el-form-item label="证件号" prop="idCard">
<el-input
v-model="dataForm.idCard"
size="small"
class="u-item-width-normal"
clearable
placeholder="请输入证件号"
>
</el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input
v-model="dataForm.mobile"
size="small"
class="u-item-width-normal"
clearable
placeholder="请输入手机"
>
</el-input>
</el-form-item>
<el-form-item label="死亡时间" prop="startTime">
<el-date-picker
v-model="timeRange"
type="daterange"
class="u-item-width-daterange2"
size="small"
range-separator="至"
start-placeholder="选择日期"
end-placeholder="选择日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<!-- <el-form-item label="享受福利" prop="isWelfare">
<el-select
v-model="dataForm.isWelfare"
size="small"
class="u-item-width-normal"
placeholder="请选择"
clearable
>
<el-option
v-for="item in isWelfareArr"
:key="item.dictValue"
:label="item.dictName"
:value="item.dictValue"
>
</el-option>
</el-select>
</el-form-item> -->
<div class="u-search-btn">
<el-button class="diy-button--white" size="small" @click="resetForm"
>重置</el-button
>
<el-button
style="margin-left: 10px"
size="small"
class="diy-button--blue"
@click="getDataList"
>查询</el-button
>
</div>
</el-form>
</div>
<div class="m-table">
<div class="u-table-btn1">
<el-button
size="small"
class="diy-button--white"
@click="exportHandle()"
>{{ $t("export") }}</el-button
>
</div>
<el-table
class="m-table-item"
v-loading="dataListLoading"
:data="dataList"
border
>
<!--<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
<el-table-column
label="序号"
type="index"
fixed="left"
align="center"
width="50"
>
</el-table-column>
<!--<el-table-column prop="id" label="主键" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="resiId" label="epmet用户主键" header-align="center" align="center"></el-table-column>-->
<el-table-column
prop="name"
label="姓名"
header-align="center"
align="center"
>
<template slot-scope="scope">
<el-button
@click="handleLook(scope.row)"
type="text"
size="small"
class="btn-color-look"
>{{ scope.row.name }}</el-button
>
</template>
</el-table-column>
<el-table-column
prop="idNum"
label="证件号"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="mobile"
label="手机号"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="gender"
label="性别"
header-align="center"
align="center"
>
<template slot-scope="scope">
{{ scope.row.gender == "2" ? "女" : scope.row.gender }}
</template>
</el-table-column>
<!--<el-table-column prop="type" label="类型" header-align="center" align="center">-->
<!--<template slot-scope="scope">-->
<!--{{-->
<!--scope.row.type == '0'-->
<!--? "租客"-->
<!--: scope.row.type == '1'-->
<!--? "房东"-->
<!--: ""-->
<!--}}-->
<!--</template>-->
<!--</el-table-column>-->
<el-table-column
prop="deathDate"
label="死亡时间"
header-align="center"
align="center"
></el-table-column>
<!--<el-table-column prop="joinReason" label="加入原因" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="removeDate" label="移除时间" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="removeReason" label="移除原因" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="customerId" label="客户ID" header-align="center" align="center"></el-table-column>-->
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="140"
>
<template slot-scope="scope">
<el-button
@click="handleLook(scope.row)"
type="text"
size="small"
class="div-table-button--blue"
>查看</el-button
>
<!-- <el-button @click="handleChangeRecord(scope.row)"
type="text"
size="small"
class="div-table-button--blue">变更记录</el-button> -->
<!--<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>-->
<!--<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>-->
<el-popconfirm
style="margin-left: 10px"
v-if="scope.row.status !== '0'"
title="确认恢复?"
@onConfirm="handleRecovery(scope.row)"
@confirm="handleRecovery(scope.row)"
>
<el-button
slot="reference"
type="text"
size="small"
class="div-table-button--blue"
>恢复</el-button
>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="pageNo"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
<!-- 修改弹出框 -->
<el-dialog
:visible.sync="showedResiInfo"
:close-on-click-modal="false"
:close-on-press-escape="false"
title="居民详情"
width="986px"
top="5vh"
class="m-dialog"
@closed="showedResiInfo = false"
>
<div class="dialog-h-content scroll-h">
<resi-info
v-if="showedResiInfo && lookInfo.resiId"
:resiId="lookInfo.resiId"
@close="handleCancleLook"
/>
</div>
<div class="resi-btns">
<el-button
size="small"
@click="showedResiInfo = false"
class="diy-button--common"
>关闭</el-button
>
</div>
</el-dialog>
<!-- 变更记录 -->
<el-dialog
v-if="false"
:visible.sync="changeRecordShow"
:close-on-click-modal="false"
:close-on-press-escape="false"
:title="'变更记录'"
width="1150px"
top="5vh"
@closed="diaClose"
>
<resi-change-record ref="ref_changerecord"></resi-change-record>
</el-dialog>
</div>
</template>
<script>
import mixinViewModule from "@/mixins/view-module2";
import AddOrUpdate from "./changedeath-add-or-update";
import nextTick from "dai-js/tools/nextTick";
import resiChangeRecord from "@/views/components/resiChangeRecord.vue";
import { requestPost } from "@/js/dai/request";
import resiInfo from "@/views/components/resiInfo.vue";
export default {
mixins: [mixinViewModule],
data() {
return {
mixinViewModuleOptions: {
getDataListURL: "/actual/base/residentDeathRecord/page",
getDataListIsPage: true,
deleteURL: "/actual/base/residentDeathRecord/recovery",
deleteIsBatch: true,
exportURL: "/actual/base/residentDeathRecord/export",
},
timeRange: "",
dataForm: {
id: "",
name: "",
idCard: "",
mobile: "",
startDate: "",
endDate: "",
// isWelfare: "",
},
// 显示人员详情
showedResiInfo: false,
lookInfo: {
resiId: "",
gridName: "",
},
isWelfareArr: [
{ dictValue: "0", dictName: "否" },
{ dictValue: "1", dictName: "是" },
],
changeRecordShow: false,
};
},
watch: {
timeRange(val) {
if (Array.isArray(val) && val.length == 2) {
this.dataForm.startTime = val[0];
this.dataForm.endTime = val[1];
} else {
this.dataForm.startTime = "";
this.dataForm.endTime = "";
}
},
},
components: {
AddOrUpdate,
resiInfo,
resiChangeRecord,
},
methods: {
async handleRecovery(rowData) {
console.log("11111");
const url = "/actual/base/residentDeathRecord/recovery";
let params = {
id: rowData.id,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.$message.success("恢复成功!");
this.getDataList();
} else {
this.$message.success("操作失败!");
}
},
diaClose() {
this.changeRecordShow = false;
},
//变更记录
async handleChangeRecord(row) {
this.changeRecordShow = true;
await nextTick(200);
this.$refs.ref_changerecord.initForm(row);
},
exportHandle() {
const url = this.mixinViewModuleOptions.exportURL;
this.$http({
method: "POST",
url,
responseType: "blob",
data: this.dataForm,
})
.then((res) => {
// this.download(res.data, title + '.xls')
if (res.headers["content-disposition"]) {
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对象
} else this.$message.error("下载失败");
})
.catch((err) => {
console.log("err", err);
return this.$message.error("网络错误");
});
},
resetForm(formName) {
for (const n in this.dataForm) {
this.dataForm[n] = "";
}
this.timeRange = "";
this.getDataList();
},
async handleLook(row) {
this.lookInfo.resiId = row.resiId;
this.showedResiInfo = true;
},
handleCancleLook() {
this.lookInfo.resiId = "";
this.lookInfo.gridName = "";
this.showedResiInfo = false;
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/list-main.scss";
/deep/.el-form-item__label {
width: 80px !important;
}
.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;
}
::v-deep .btn-color-del {
margin-left: 10px;
color: rgba(213, 16, 16, 1);
}
::v-deep .btn-color-edit {
color: rgba(0, 167, 169, 1);
}
}
.form-wr {
.input-width {
width: 260px;
}
.input-width-textarea {
width: 500px;
}
.imsg-list {
display: flex;
align-items: center;
.imgs-item {
position: relative;
margin-right: 10px;
.el-icon-delete {
position: absolute;
top: 0;
right: 0;
font-size: 18px;
color: red;
z-index: 3;
cursor: pointer;
}
}
}
}
.div-content {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resi-row-btn {
display: flex;
margin-bottom: 13px;
.el-button {
margin-left: 10px;
border: 0;
}
// .el-button--success {
// background: rgba(34, 193, 195, 1);
// }
// .el-button--warning {
// background: rgba(254, 179, 73, 1);
// }
// .el-button--danger {
// background: rgba(254, 98, 82, 1);
// }
}
.m-dialog {
.el-dialog__body {
position: relative;
max-height: 83vh;
box-sizing: border-box;
padding: 0 0 20px !important;
.dialog-h-content {
max-height: calc(83vh - 80px);
box-sizing: border-box;
padding: 50px 80px;
overflow: auto;
}
}
.resi-btns {
margin-top: 20px;
text-align: center;
text-align: right;
margin-right: 16px;
}
}
</style>