<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>
|
<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:touristCity="scope">
|
<div
|
class="lh-15"
|
v-for="(it, ix) in scope.row.touristCity"
|
:key="ix"
|
>
|
{{ it.name }}
|
</div>
|
</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 } from "../../utils/dictionary";
|
export default {
|
data() {
|
return {
|
loading: false, // 页面loading
|
startTimeArr: [],
|
tableLsit: [], // 列表
|
searchVal: {
|
keyword: "",
|
startTime: "",
|
stopTime: "",
|
isAddress: "",
|
}, // 搜索表单
|
columnList: [
|
{ type: "index" },
|
{ label: "姓名", key: "name" },
|
{ label: "手机号", key: "phone" },
|
{ label: "最近跟进时间", key: "checkTime",width:'150' },
|
{
|
type: "custom",
|
slot: "btn",
|
label: "操作",
|
width: "250",
|
fixed: "right",
|
},
|
], // 列表属性
|
pageNum: 1, // 当前页
|
pageSize: 10, // 当前条数
|
total: 0, // 总数
|
dataSourceLabel: DATA_SOURCE,
|
treatmentLabel: TREATMENT_DATA,
|
};
|
},
|
mounted() {
|
this.getTable();
|
},
|
methods: {
|
// 获取列表
|
getTable() {
|
this.loading = true;
|
const requestData = Object.assign(
|
{
|
page: this.pageNum,
|
size: this.pageSize,
|
type: "2", //人员类型 1风险人员 2未填地址人员
|
},
|
this.searchVal
|
);
|
this.$api.post("comActAcidDangerMember/queryAll", requestData, (res) => {
|
this.loading = false;
|
this.tableLsit = res.data.records;
|
this.total = res.data.total;
|
});
|
},
|
// 切换条数
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.getTable();
|
},
|
// 切换页
|
handleCurrentChange(val) {
|
this.pageNum = val;
|
this.getTable();
|
},
|
// 页面操作
|
async handleAction(type, row) {
|
switch (type) {
|
case "record": {
|
this.$router.push(`/recordManage?id=${row.id}&type=2`);
|
break;
|
}
|
case "details": {
|
this.$router.push(`/registrationDetails?id=${row.recordId}`);
|
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>
|
</style>
|
