<template>
|
<div
|
class="box-card"
|
v-loading="loading"
|
element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading"
|
>
|
<div class="box-content">
|
<!-- 搜索操作 -->
|
<div class="search-input-box">
|
<div class="fl-fw">
|
<div class="fl-al mr-b-10">
|
<div class="fz-7 label-width-search">关键字：</div>
|
<el-input
|
clearable
|
class="iw-220"
|
v-model.trim="searchVal.keyword"
|
placeholder="姓名、手机号、身份证号"
|
@keyup.enter="handleAction('search')"
|
></el-input>
|
</div>
|
<div class="fl-al mr-b-10">
|
<div class="fz-7 label-width-search">最近排查时间：</div>
|
<el-date-picker
|
v-model="startTimeArr"
|
type="datetimerange"
|
class="time-width"
|
range-separator="至"
|
format="yyyy-MM-dd HH:mm"
|
value-format="yyyy-MM-dd HH:mm"
|
placeholder="选择日期"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
@change="timeHandleChange"
|
/>
|
</div>
|
<div class="fl-al mr-b-10">
|
<div class="fz-7 label-width-search">数据来源：</div>
|
<el-select
|
class="iw-220"
|
v-model="searchVal.source"
|
placeholder="选择数据来源"
|
clearable
|
filterable
|
>
|
<el-option
|
v-for="item in dataSourceLabel"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="fl-al mr-b-10">
|
<div class="fz-7 label-width-search">当前处理情况：</div>
|
<el-select
|
class="iw-220"
|
v-model="searchVal.status"
|
placeholder="选择当前处理情况"
|
clearable
|
filterable
|
>
|
<el-option
|
v-for="item in treatmentLabel"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="fl-al mr-b-10">
|
<div class="fz-7 label-width-search"></div>
|
<el-button type="primary" @click="handleAction('search')"
|
>搜索</el-button
|
>
|
<el-button @click="handleAction('reset')">重置</el-button>
|
</div>
|
</div>
|
<!-- 列表 -->
|
<div class="table-content">
|
<!-- 列表 -->
|
<TablePro :tableLsit="tableLsit" :columnList="columnList">
|
<template v-slot:source="scope">
|
{{ dataSourceLabel[scope.row.source].label }}
|
</template>
|
<template v-slot:status="scope">
|
{{ textShowLable(treatmentLabel, scope.row.status) }}
|
</template>
|
<template v-slot:btn="scope">
|
<el-button @click="handleAction('record', scope.row)"
|
>排查记录</el-button
|
>
|
<el-button @click="handleAction('details', scope.row)"
|
>报备信息</el-button
|
>
|
</template>
|
</TablePro>
|
<!-- 分页 -->
|
<div class="bottom-page">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageNum"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageSize"
|
background
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
DATA_SOURCE,
|
TREATMENT_DATA,
|
returnText,
|
} from "../../utils/dictionary";
|
import { watermark, removewatermark } from "../../utils/watermark";
|
import { getPhoneEncty } from "../../utils/common";
|
export default {
|
destroyed() {
|
removewatermark();
|
},
|
data() {
|
return {
|
loading: false, // 页面loading
|
startTimeArr: [],
|
tableLsit: [], // 列表
|
searchVal: {
|
keyword: "",
|
startTime: "",
|
stopTime: "",
|
status: "",
|
source: "",
|
}, // 搜索表单
|
columnList: [
|
{ type: "index" },
|
{ label: "姓名", key: "name" },
|
{ label: "手机号", key: "phone" },
|
{ type: "custom", label: "数据来源", slot: "source" },
|
{ label: "最近排查时间", key: "checkTime", width: "150" },
|
{ type: "custom", label: "当前处理情况", slot: "status" },
|
{
|
type: "custom",
|
slot: "btn",
|
label: "操作",
|
width: "250",
|
fixed: "right",
|
},
|
], // 列表属性
|
pageNum: 1, // 当前页
|
pageSize: 10, // 当前条数
|
total: 0, // 总数
|
dataSourceLabel: DATA_SOURCE,
|
treatmentLabel: TREATMENT_DATA,
|
};
|
},
|
mounted() {
|
const USER_INFO = demo.$session.get("user");
|
watermark({
|
watermark_txt: `${USER_INFO.title}-“${USER_INFO.account} ${USER_INFO.name}”`,
|
});
|
this.getTable();
|
},
|
methods: {
|
textShowLable(list, val) {
|
return returnText(list, val);
|
},
|
getTable() {
|
this.loading = true;
|
const requestData = Object.assign(
|
{
|
page: this.pageNum,
|
size: this.pageSize,
|
type: "1", //人员类型 1风险人员 2未填地址人员
|
},
|
this.searchVal
|
);
|
this.$api.post("comActAcidDangerMember/queryAll", requestData, (res) => {
|
this.loading = false;
|
this.tableLsit = res.records;
|
this.tableLsit.forEach((item) => {
|
item.phone = getPhoneEncty(item.phone);
|
});
|
this.total = res.total;
|
});
|
},
|
// 切换条数
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.getTable();
|
},
|
// 切换页
|
handleCurrentChange(val) {
|
this.pageNum = val;
|
this.getTable();
|
},
|
// 页面操作
|
async handleAction(type, row) {
|
switch (type) {
|
case "details": {
|
this.$router.push(`/registrationDetails?id=${row.recordId}`);
|
break;
|
}
|
case "record": {
|
this.$router.push(`/recordManage?id=${row.id}&type=1`);
|
break;
|
}
|
case "search": {
|
this.pageNum = 1;
|
this.pageSize = 10;
|
this.getTable();
|
break;
|
}
|
case "reset": {
|
this.searchVal = {};
|
this.pageNum = 1;
|
this.pageSize = 10;
|
this.startTimeArr = "";
|
this.getTable();
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
timeHandleChange(arr) {
|
if (arr) {
|
this.searchVal.startTime = arr[0];
|
this.searchVal.stopTime = arr[1];
|
} else {
|
this.searchVal.startTime = "";
|
this.searchVal.stopTime = "";
|
}
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.el-dialog {
|
width: 800px;
|
}
|
</style>
|
