init
This commit is contained in:
670
ruoyi-ui/src/views/taskManage/PADvisitRecord/index.vue
Normal file
670
ruoyi-ui/src/views/taskManage/PADvisitRecord/index.vue
Normal file
@@ -0,0 +1,670 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<el-radio-group
|
||||
class="header-radio"
|
||||
v-model="selectedTab"
|
||||
@input="handleChange"
|
||||
>
|
||||
<el-radio-button
|
||||
label="2"
|
||||
:disabled="isPrivate"
|
||||
:class="{ 'btn-disabled': isPrivate }"
|
||||
>企业</el-radio-button
|
||||
>
|
||||
<el-radio-button
|
||||
label="0"
|
||||
:disabled="isPublic"
|
||||
:class="{ 'btn-disabled': isPublic }"
|
||||
>个人</el-radio-button
|
||||
>
|
||||
<el-radio-button
|
||||
label="1"
|
||||
:disabled="isPublic"
|
||||
:class="{ 'btn-disabled': isPublic }"
|
||||
>商户</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
<div class="searchForm">
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
label-width="80px"
|
||||
:inline="true"
|
||||
>
|
||||
<el-form-item label="柜员名称">
|
||||
<el-input
|
||||
v-model="searchForm.visName"
|
||||
placeholder="请输入"
|
||||
@blur="handleSearch"
|
||||
clearable
|
||||
@clear="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="走访时间">
|
||||
<el-date-picker
|
||||
v-model="searchForm.visTime"
|
||||
type="date"
|
||||
@change="handleSearch"
|
||||
value-format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户证件号" label-width="120" v-if="selectedTab === '0'">
|
||||
<el-input
|
||||
v-model="searchForm.custIdc"
|
||||
placeholder="请输入"
|
||||
@blur="handleSearch"
|
||||
clearable
|
||||
@clear="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业（商户）统信码" label-width="140" v-else>
|
||||
<el-input
|
||||
v-model="searchForm.socialCreditCode"
|
||||
placeholder="请输入"
|
||||
@blur="handleSearch"
|
||||
clearable
|
||||
@clear="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="异常标签" v-if="is875">
|
||||
<el-select
|
||||
v-model="searchForm.abnormalVisitTag"
|
||||
placeholder="请输入"
|
||||
@blur="handleSearch"
|
||||
clearable
|
||||
@clear="handleSearch"
|
||||
>
|
||||
<el-option label="正常" value="0"></el-option>
|
||||
<el-option label="走访频率异常" value="1"></el-option>
|
||||
<el-option label="走访持续时长异常" value="2"></el-option>
|
||||
<el-option label="签退时间异常" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="common-search-btn"
|
||||
@click="handleSearch"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
class="common-reset-btn"
|
||||
type="plain"
|
||||
@click="resetFilters"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<section class="operate-cnt">
|
||||
<right-toolbar
|
||||
@queryTable="handleRefersh"
|
||||
:columns="is875 ? [...columns, ...columns875] : columns"
|
||||
style="margin-left: auto"
|
||||
></right-toolbar>
|
||||
</section>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
class="tableData"
|
||||
v-loading="Loading"
|
||||
max-height="600"
|
||||
>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="campaignName"
|
||||
label="活动名称"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[0].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="visName"
|
||||
label="柜员名称"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[1].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="visId"
|
||||
label="柜员号"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[2].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="deptId"
|
||||
label="柜员部门"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[3].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="deptName"
|
||||
label="部门名称"
|
||||
show-overflow-tooltip
|
||||
width="200px"
|
||||
v-if="columns[4].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="custName"
|
||||
label="走访客户名称"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[5].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="custIdc"
|
||||
label="客户证件号"
|
||||
show-overflow-tooltip
|
||||
width="200px"
|
||||
v-if="columns[6].visible && selectedTab === '0'"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="socialCreditCode"
|
||||
label="企业（商户）统信码"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[7].visible && selectedTab !== '0'"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="custType"
|
||||
label="客户类型"
|
||||
show-overflow-tooltip
|
||||
v-if="columns[8].visible"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.custType == '0'">个人</span>
|
||||
<span v-if="scope.row.custType == '1'">商户</span>
|
||||
<span v-if="scope.row.custType == '2'">企业</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="signInTime"
|
||||
label="签到时间"
|
||||
show-overflow-tooltip
|
||||
width="180px"
|
||||
v-if="columns[9].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="signOutTime"
|
||||
label="签退时间"
|
||||
show-overflow-tooltip
|
||||
width="180px"
|
||||
v-if="columns[10].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="signInAddress"
|
||||
label="签到地址"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[11].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="signOutAddress"
|
||||
label="签退地址"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[12].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="signInCoordinate"
|
||||
label="签到坐标"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[13].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="signOutCoordinate"
|
||||
label="签退坐标"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[14].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="abnormalVisitTag"
|
||||
label="异常走访标签"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns875[0].visible && is875"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.abnormalVisitTag == '0'">正常</span>
|
||||
<span v-if="scope.row.abnormalVisitTag == '1'">走访频率异常</span>
|
||||
<span v-if="scope.row.abnormalVisitTag == '2'">走访持续时长异常</span>
|
||||
<span v-if="scope.row.abnormalVisitTag == '3'">签退时间异常</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="abnormalVisitInfo"
|
||||
label="异常走访信息"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns875[1].visible && is875"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="isValidCust"
|
||||
label="是否为有效客户"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[15].visible"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.isValidCust == '0'">否</span>
|
||||
<span v-if="scope.row.isValidCust == '1'">是</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
prop="remark"
|
||||
label="走访备注"
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
v-if="columns[16].visible"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="pageSize"
|
||||
layout="->,total,prev,pager,next,sizes"
|
||||
:total="total"
|
||||
:current-page="pageNum"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { getPADVisitRecord } from "@/api/task/PADvisitRecord.js";
|
||||
import { Message } from "element-ui";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedTab: "0",
|
||||
tableData: [],
|
||||
Loading: false,
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
searchForm: {
|
||||
visName: "",
|
||||
visTime: "",
|
||||
custIdc: "",
|
||||
socialCreditCode: '',
|
||||
abnormalVisitTag: ''
|
||||
},
|
||||
campsourceList: [],
|
||||
columns: [
|
||||
{ key: 0, label: "活动名称", visible: true },
|
||||
{ key: 1, label: "柜员名称", visible: true },
|
||||
{ key: 2, label: "柜员号", visible: true },
|
||||
{ key: 3, label: "柜员部门", visible: true },
|
||||
{ key: 4, label: "部门名称", visible: true },
|
||||
{ key: 5, label: "走访客户名称", visible: true },
|
||||
{ key: 6, label: "客户证件号", visible: true },
|
||||
{ key: 7, label: "企业（商户）统信码", visible: true },
|
||||
{ key: 8, label: "客户类型", visible: true },
|
||||
{ key: 9, label: "签到时间", visible: true },
|
||||
{ key: 10, label: "签退时间", visible: true },
|
||||
{ key: 11, label: "签到地址", visible: true },
|
||||
{ key: 12, label: "签退地址", visible: true },
|
||||
{ key: 13, label: "签到坐标", visible: true },
|
||||
{ key: 14, label: "签退坐标", visible: true },
|
||||
{ key: 15, label: "是否为有效客户", visible: true },
|
||||
{ key: 16, label: "走访备注", visible: true }
|
||||
],
|
||||
columns875: [
|
||||
{ key: 17, label: "异常走访标签", visible: true },
|
||||
{ key: 18, label: "异常走访信息", visible: true },
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["roles", "userName"]),
|
||||
//总行
|
||||
isHeadAdmin() {
|
||||
return this.roles.includes("headAdmin");
|
||||
},
|
||||
//公司部
|
||||
isPublic() {
|
||||
return this.roles.includes("headPublic");
|
||||
},
|
||||
//零售部
|
||||
isPrivate() {
|
||||
return this.roles.includes("headPrivate");
|
||||
},
|
||||
//运管部
|
||||
isHeadOps() {
|
||||
return this.roles.includes("headOps");
|
||||
},
|
||||
//支行
|
||||
isBranchAdmin() {
|
||||
return this.roles.includes("branchAdmin");
|
||||
},
|
||||
// 网点主任
|
||||
isOutletAdmin() {
|
||||
return this.roles.includes("outletAdmin");
|
||||
},
|
||||
// 客户经理
|
||||
isCommonManager() {
|
||||
return this.roles.includes("commonManager");
|
||||
},
|
||||
// 海宁
|
||||
is875() {
|
||||
return this.userName.slice(0, 3) === '875'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const {selectedTab} = this.$route.query;
|
||||
if (selectedTab) {
|
||||
this.selectedTab = selectedTab;
|
||||
} else {
|
||||
if (this.isPublic) {
|
||||
this.selectedTab = '2'
|
||||
} else if (this.isPrivate) {
|
||||
this.selectedTab = '0'
|
||||
} else {
|
||||
this.selectedTab = '2'
|
||||
}
|
||||
}
|
||||
this.initVisitingTaskList();
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
this.pageSize = 10;
|
||||
this.pageNum = 1;
|
||||
this.initVisitingTaskList();
|
||||
},
|
||||
initVisitingTaskList() {
|
||||
const query = {
|
||||
custType: this.selectedTab,
|
||||
visTime: this.searchForm.visTime,
|
||||
visName: this.searchForm.visName,
|
||||
custIdc: this.searchForm.custIdc,
|
||||
socialCreditCode: this.searchForm.socialCreditCode,
|
||||
abnormalVisitTag: this.searchForm.abnormalVisitTag,
|
||||
pageSize: this.pageSize,
|
||||
pageNum: this.pageNum,
|
||||
};
|
||||
getPADVisitRecord(query).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.tableData = res.rows;
|
||||
this.total = res.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleRefersh() {
|
||||
this.searchForm = {};
|
||||
this.initVisitingTaskList();
|
||||
},
|
||||
handleSizeChange(newSize) {
|
||||
this.pageSize = newSize;
|
||||
this.initVisitingTaskList();
|
||||
},
|
||||
handleCurrentChange(newPage) {
|
||||
this.pageNum = newPage;
|
||||
this.initVisitingTaskList();
|
||||
},
|
||||
handleSearch() {
|
||||
this.initVisitingTaskList();
|
||||
},
|
||||
resetFilters() {
|
||||
this.searchForm = {};
|
||||
this.initVisitingTaskList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 3px 8px 0 #00000017;
|
||||
border-radius: 16px 16px 0 0;
|
||||
overflow-y: auto;
|
||||
padding: 0 30px 30px 30px;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
height: 181px;
|
||||
background: #eaf5ff;
|
||||
border-radius: 8px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.box-card1 {
|
||||
height: 181px;
|
||||
background: #eaf5ff;
|
||||
border-radius: 8px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.my-span-checklist-title {
|
||||
height: 25px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #222222;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.my-span-checklist-main {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.header-radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
.btn-disabled {
|
||||
::v-deep .el-radio-button__inner {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
|
||||
.el-radio-button {
|
||||
flex: 1;
|
||||
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 100%;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.44px;
|
||||
line-height: 25px;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
padding: 11px 0 12px 0;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background-color: #4886f8;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 21px;
|
||||
width: 1px;
|
||||
background: #ebebeb;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
::v-deep .el-radio-button__inner {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
|
||||
.header-radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
margin-top: 25px;
|
||||
|
||||
.btn-disabled {
|
||||
::v-deep .el-radio-button__inner {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
|
||||
.el-radio-button {
|
||||
flex: 1;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 100%;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.44px;
|
||||
line-height: 25px;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
padding: 11px 0 12px 0;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background-color: #4886f8;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 21px;
|
||||
width: 1px;
|
||||
background: #ebebeb;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableData {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.taskTop {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.taskTop_left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.taskTop_left_item {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down {
|
||||
margin-left: 15px;
|
||||
font-size: 16px;
|
||||
color: rgb(64, 149, 229);
|
||||
}
|
||||
|
||||
.searchForm {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.operate-cnt {
|
||||
margin: 0 0 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.top-right-btn {
|
||||
margin-right: 24px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.plain-raido-btn {
|
||||
::v-deep .el-radio-button__inner {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
border: 1px solid #4886f8;
|
||||
color: #4886f8;
|
||||
background-color: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quesiton {
|
||||
color: #b9b9b9;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user