首先：npm安装一些插件
1>导入插件 npm install xlsx
2>导出插件elementui默认自带
<!-- 1对1管理 / 套餐管理 -->
<template>
<div class="table">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<label style="padding-left:10px;">保单管理</label>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="handle-box">
<el-input placeholder="投保单号" v-model="form.orderID" class="mr10" style="width:200px;"></el-input>
<el-input
placeholder="投保人姓名"
v-model="form.username"
maxlength="11"
class="mr10"
style="width:200px;"
></el-input>
<el-input
placeholder="被保人姓名"
v-model="form.roleName"
maxlength="11"
class="mr10"
style="width:200px;"
></el-input>
<el-date-picker
v-model="form.createtime"
type="datetimerange"
style="margin-right:10px;"
range-separator="至"
start-placeholder="发布时间"
end-placeholder="截止时间"
></el-date-picker>
</div>
<div class="handle-box">
<el-select
placeholder="规划师选择"
v-if="depID==1"
class="handle-select mr10"
v-model="form.planners"
>
<el-option
v-for="item in planList"
:key="item.saleId"
:label="item.realName"
:value="item.saleId"
></el-option>
</el-select>
<el-select placeholder="订单状态" class="handle-select mr10" v-model="form.status">
<el-option v-for="item in startsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</div>
<div class="handle-box">
<el-button type="primary" icon="add" @click="searchData(1)">查询</el-button>
<el-button type="primary" icon="add" @click="searchData(2)">重置</el-button>
<el-button type="primary" icon="add" @click="searchData(3)">保单录入</el-button>
<el-upload
class="upload"
action
:multiple="false"
:show-file-list="false"
:drag="false"
:http-request="httpRequest"
>
<el-button slot="trigger" size="small" type="primary">导入</el-button>
</el-upload>
<el-button
type="primary"
icon="add"
v-if="depID==1"
@click="handleDownload()"
v-loading="loading"
>下载</el-button>
</div>
<div class="handle-box">
<p>统计：共 {{page.total}} 条数据</p>
</div>
<el-table
tooltip-effect="dark"
:data="tableData"
@selection-change="handleSelectionChange"
border
align="center"
>
<el-table-column type="selection" label="选择" width="55"></el-table-column>
<el-table-column label="序号" align="center" width="50px">
<template slot-scope="scope">{{(page.pageNum-1)* page.pageSize + scope.$index+1}}</template>
</el-table-column>
<el-table-column label="操作" align="center" width="120px">
<template slot-scope="scope">
<el-button
type="edit"
v-if="scope.row.remark=='手动录入'"
@click="handUpdate(scope.$index, scope.row)"
>编辑</el-button>
<!-- <el-button type="edit" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
</template>
</el-table-column>
<el-table-column prop label="投保单号" align="center" width="180px">
<template slot-scope="scope">{{scope.row.insuranceNo || '-'}}</template>
</el-table-column>
<el-table-column prop label="产品" align="center" width="220px">
<template slot-scope="scope">{{scope.row.productName || '-'}}</template>
</el-table-column>
<!-- <el-table-column prop label="用户性别" align="center">
<template
slot-scope="scope"
>{{scope.row.buyerSex == 1 ? '男' : scope.row.buyerSex == 2 ? '女' : '-'}}</template>
</el-table-column>-->
<el-table-column prop label="投保人" align="center" width="100px">
<template slot-scope="scope">{{scope.row.policyHolderName || '-'}}</template>
</el-table-column>
<el-table-column prop label="被保人" align="center" width="110px">
<template slot-scope="scope">{{scope.row.insuredName || '-'}}</template>
</el-table-column>
<el-table-column prop label="订单状态" align="center" width="90px">
<template slot-scope="scope">
<div v-if="scope.row.payStatus==0||scope.row.payStatus==2||scope.row.payStatus==4">未支付</div>
<div v-if="scope.row.payStatus==1">
<!-- issueStatus出单状态 0：未出单 1：已出单 2：延时出单 3：取消出单 4：出单失败 -->
<div v-if="scope.row.issueStatus==1||scope.row.issueStatus==2">已出单</div>
<!-- effectiveStatus生效（退保）状态 0：未生效 1：已生效 2：退保中 3：已退保 4：支付成功核保异常 -->
<div v-if="scope.row.effectiveStatus==3">已退保</div>
</div>
<!-- i云保policyStatus 3已投保 9 已退保 -->
<div v-if="scope.row.policyStatus==9">已退保</div>
<div v-if="scope.row.policyStatus==3">已投保</div>
</template>
</el-table-column>
<el-table-column prop label="保费(元)" align="center" width="120px">
<template slot-scope="scope">
<time v-if="scope.row.payAmount == 0">{{scope.row.payAmount}}</time>
<time v-else>{{scope.row.payAmount || '-'}}</time>
</template>
</el-table-column>
<el-table-column prop label="服务费(元)" v-if="depID==1" align="center" width="180px">
<template slot-scope="scope">{{ scope.row.income|| '-'}}</template>
</el-table-column>
<el-table-column prop label="规划师" v-if="depID==1" align="center" width="120px">
<template slot-scope="scope">{{scope.row.plannersName|| '-'}}</template>
</el-table-column>
<el-table-column prop label="平台" align="center">
<template slot-scope="scope">{{scope.row.platform||'-'}}</template>
</el-table-column>
<el-table-column prop label="客户ID" align="center" width="90px">
<template slot-scope="scope">{{scope.row.policyHolderId || '-'}}</template>
</el-table-column>
<el-table-column prop label="创建时间" align="center" width="150px">
<template slot-scope="scope">{{scope.row.createTime || '-'}}</template>
</el-table-column>
<el-table-column prop label="支付时间" align="center" width="150px">
<template slot-scope="scope">{{scope.row.payTime || '-'}}</template>
</el-table-column>
<el-table-column prop label="备注" align="center" width="90px">
<template slot-scope="scope">{{scope.row.remark || '-'}}</template>
</el-table-column>
</el-table>
<!-- 底部表格操作 -->
<div class="handle-box" style="margin-top:15px;">
<el-button type="primary" icon="add" @click="moreDistribution" class="t10">保单归属</el-button>
</div>
</div>
<!-- 分页器 -->
<div class="page">
<pagination :page="page"></pagination>
</div>
<!-- 编辑弹出层 -->
<el-dialog title="保单归属" :visible.sync="dialogFormVisible" width="30%">
<el-form :model="form">
<el-form-item label="被保人归属">
<!-- <el-select v-model="form.incrId" placeholder="请选择">
<el-option
v-for="item in policyList"
:key="item.incrId"
:label="item.incrId"
:value="item.incrId"
></el-option>
</el-select>-->
<el-select v-model="form.incrId" filterable placeholder="请选择">
<el-option
v-for="item in policyList"
:key="item.incrId"
:label="item.incrId"
:value="item.incrId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input
style="position: relative;
display: inline-block;
width: 70%;
left: 38px;
vertical-align: bottom;
font-size: 14px;"
type="textarea"
:rows="2"
v-if="form.remark!='手动录入'"
placeholder="请输入内容"
v-model="form.remark"
></el-input>
<label
style="position: relative;
display: inline-block;
width: 70%;
left: 38px;
vertical-align: bottom;
font-size: 14px;"
v-if="form.remark=='手动录入'"
>手动录入</label>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="sureName">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import config from "../../common/config";
import pagination from "../../common/Pagination";
import ExportExcel from "../Export2Excel";
import XLSX from "xlsx";
export default {
name: "CustodManger",
components: { ExportExcel, pagination },
data() {
return {
tableData: [],
toLead: false,
dialogFormVisible: false,
multipleSelection: [],
downloadLoading: false,
depID: "",
policyList: [],
members: [],
loading: false,
fileList: [],
form: {
planListName: "",
orderID: "",
username: "",
roleName: "",
createtime: "",
planners: "",
incrId: "",
status: "",
remark: ""
},
value1: "",
planList: [],
startsList: [
{
id: 1,
name: "未支付"
},
{
id: 2,
name: "已出单"
},
{
id: 3,
name: "已退保"
}
],
page: {
pageNum: 1,
pageSize: 10,
total: 0,
handler: num => {
this.page.pageNum = num;
this.initData();
}
}
};
},
created() {
// this.searchForm.status = "支付成功";
// this.getmMember();
// this.getPlanner();
// this.initData();
this.$forceUpdate();
// this.getPlanner();
// this.getpolicyHolder();
},
mounted() {
this.getmMember();
this.initData();
this.getPlanner();
this.getpolicyHolder();
this.$forceUpdate();
},
methods: {
// 全选按钮
handleSelectionChange(val) {
this.multipleSelection = val;
},
httpRequest(e) {
let file = e.file; // 文件信息
console.log("e: ", e);
console.log("file: ", e.file);
var realname = "";
var planners = "";
var deptId = localStorage.getItem("deptId");
if (deptId!=null&&deptId == 3) {
realname = localStorage.getItem("realname");
planners = localStorage.getItem("saleIds");
} else {
realname = "";
}
console.log("realname",realname,"planners",planners);
if (!file) {
// 没有文件
return false;
} else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
// 格式根据自己需求定义
this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
return false;
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: "binary" // 以字符编码的方式解析
});
const exlname = workbook.SheetNames[0]; // 取第一张表
console.log("exlname", workbook.Sheets[exlname]);
const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]); // 生成json表格内容
// 将 JSON 数据挂到 data 里
console.log("exl", exl[0]);
if (
workbook.Sheets[exlname].A1.h != "投保单号" ||
workbook.Sheets[exlname].B1.h != "产品" ||
workbook.Sheets[exlname].C1.h != "投保人" ||
workbook.Sheets[exlname].D1.h != "被保人" ||
workbook.Sheets[exlname].E1.h != "订单状态" ||
workbook.Sheets[exlname].F1.h != "保费" ||
workbook.Sheets[exlname].G1.h != "服务费" ||
workbook.Sheets[exlname].H1.h != "客户ID" ||
workbook.Sheets[exlname].I1.h != "平台" ||
workbook.Sheets[exlname].J1.h != "规划师" ||
workbook.Sheets[exlname].K1.h != "支付时间" ||
workbook.Sheets[exlname].L1.h != "创建时间" ||
workbook.Sheets[exlname].M1.h != "备注" ||
workbook.Sheets[exlname].N1.h != "险种"
) {
this.$message.error("该表格格式不正确");
return;
}
var formdate = {};
for (var i in exl) {
exl[i].创建时间 = this.formatDate(exl[i].创建时间, "-");
exl[i].支付时间 = this.formatDate(exl[i].支付时间, "-");
formdate = {
// 保险单号
insuranceNo: exl[i].投保单号,
// 产品名称
productName: exl[i].产品,
// 投保人姓名
policyHolderName: exl[i].投保人,
// 被保人姓名
insuredName: exl[i].被保人,
// 订单状态
issueStatus: 1,
payStatus: 1,
// 保费<单位为分>
payAmount: parseInt(exl[i].保费) * 100,
// 服务费
income: parseInt(exl[i].服务费) * 100,
// 客户ID
policyHolderId: exl[i].客户ID,
// 平台
platform: exl[i].平台,
// 规划师名称
plannersName: exl[i].规划师,
// 创建时间
createTime: exl[i].创建时间,
//支付时间
payTime: exl[i].支付时间,
// 备注
remark: exl[i].备注,
plantType: exl[i].险种,
planners:planners,
plannersName: realname,
};
console.log("111======》", formdate);
/**保单批量录入 */
this.$axios({
url: config.policyInfoID,
method: "post",
headers: { "Content-Type": "application/json" },
data: formdate
}).then(data => {
if (data.data.code == 200) {
this.$message.success("保单录入成功");
this.initData();
} else {
this.$message.error(data.data.message);
}
});
}
return;
this.tableData = exl;
// document.getElementsByName('file')[0].value = '' // 根据自己需求，可重置上传value为空，允许重复上传同一文件
} catch (e) {
console.log("出错了：：");
return false;
}
};
fileReader.readAsBinaryString(file);
},
/**转化时间格式 */
formatDate(numb, format) {
const time = new Date((numb - 1) * 24 * 3600000 + 1);
time.setYear(time.getFullYear() - 70);
const year = time.getFullYear() + "";
const month = time.getMonth() + 1 + "";
const date = time.getDate() - 1 + "";
if (format && format.length === 1) {
return year + format + month + format + date + " " + "00:00:00";
}
return (
year +
(month < 10 ? "0" + month : month) +
(date < 10 ? "0" + date : date)
);
},
/**
* {sureName}
* 订单归属方法
*/
sureName() {
var that = this;
var saleIds = "";
var name = "";
var datas = {};
this.getpolicyHolder();
for (var i in this.multipleSelection) {
console.log("111", that.multipleSelection[i]);
for (var k in that.policyList) {
if (that.form.incrId == JSON.stringify(that.policyList[k].incrId)) {
saleIds = that.policyList[k].saleId;
name = that.policyList[k].realName;
}
}
if (that.multipleSelection[i].remark == "手动录入") {
datas = {
policyHolderId: that.form.incrId,
issueStatus: 1,
payStatus: 1,
// plannersName:name,
payAmount: parseInt(that.multipleSelection[i].payAmount) * 100,
planners: saleIds
};
} else {
datas = {
remark: that.form.remark,
policyHolderId: that.form.incrId,
planners: saleIds,
// plannersName:name,
issueStatus: that.multipleSelection[i].issueStatus,
payStatus: that.multipleSelection[i].payStatus,
effectiveStatus: that.multipleSelection[i].payStatus
};
}
that
.$axios({
url: config.policyInfoID + that.multipleSelection[i].id,
method: "put",
headers: { "Content-Type": "application/json" },
data: datas
})
.then(data => {
if (data.data.code == 200) {
console.log("修改被保人归属===>", data);
// this.policyList = data.data.data.content;
that.initData();
this.$forceUpdate();
this.dialogFormVisible = false;
} else {
that.$message.error(data.data.message);
}
});
}
// policyInfoID
},
// 开启批量分配按钮
moreDistribution() {
if (this.multipleSelection.length > 0) {
for (var i in this.multipleSelection) {
if (
this.multipleSelection[i].remark == "手动录入" &&
this.multipleSelection.length > 1
) {
this.form.remark = "手动录入";
this.$message.error("您选择的列表中包含两种状态，请重新选择!");
} else if (
this.multipleSelection[i].remark == "手动录入" &&
this.multipleSelection.length == 1
) {
this.form.remark = "手动录入";
this.dialogFormVisible = true;
} else if (
this.multipleSelection[i].remark != "手动录入" &&
this.multipleSelection.length == 1
) {
this.form.remark = "";
this.dialogFormVisible = true;
}
}
console.log("this.multipleSelection.length", this.multipleSelection);
} else {
this.$message.info("请您先选择分配项哦！");
}
},
/**请求投保人接口 */
getpolicyHolder() {
this.$axios({
url: config.policyHolder,
method: "post",
headers: { "Content-Type": "application/json" },
data: {
pageOrder: {
limit: 1000,
page: 1
}
}
}).then(data => {
if (data.data.code == 200) {
console.log("投保人接口===>", data);
this.policyList = data.data.data.content;
this.$forceUpdate();
} else {
this.$message.error(data.data.message);
}
});
},
/**
* handleDownload{导出Excel方法}
* param{this.tValue}数据
*/
handleDownload() {
var that = this;
this.downloadLoading = true;
this.loading = true;
for (var i in this.tableData) {
this.tableData[i].ids = parseInt(i) + 1;
if (
this.tableData[i].payStatus == 0 ||
this.tableData[i].payStatus == 2 ||
this.tableData[i].payStatus == 4
) {
this.tableData[i].startName = "未支付";
} else if (this.tableData[i].payStatus == 1) {
if (
this.tableData[i].issueStatus == 1 ||
this.tableData[i].issueStatus == 2
) {
this.tableData[i].startName = "已出单";
}
if (this.tableData[i].effectiveStatus == 3) {
this.tableData[i].startName = "已退保";
}
} else if (this.tableData[i].policyStatus == 9) {
this.tableData[i].startName = "已退保";
} else if (this.tableData[i].policyStatus == 3) {
this.tableData[i].startName = "已投保";
}
console.log("this.tableData1", this.tableData[i].children);
}
if (this.tableData.length == 0) {
this.$message.info("请选择项目下载报表!");
return;
}
import("../Export2Excel").then(excel => {
const data = this.formatJson(
[
"ids",
"insuranceNo",
"productName",
"policyHolderName",
"insuredName",
"startName",
"payAmount",
"income",
"planners",
"platform",
"policyHolderId",
"createTime",
"remark"
],
this.tableData
);
excel.export_json_to_excel({
header: [
"序号",
"投保单号",
"产品",
"投保人",
"被保人",
"订单状态",
"保费(元)",
"服务费(元)",
"客户ID",
"平台",
"规划师",
"创建时间",
"备注"
],
data,
filename: "保单列表",
autoWidth: this.autoWidth,
bookType: this.bookType
});
this.downloadLoading = false;
this.loading = false;
});
},
/**查询规划师 */
getPlanner() {
//
this.$axios({
url: config.getSelplannersUrl,
method: "post",
headers: { "Content-Type": "application/json" },
data: {
pageOrder: {
limit: 100,
page: 1
}
}
}).then(data => {
if (data.data.code == 200) {
this.planList = data.data.data.content;
} else {
this.$message.error(data.data.message);
}
});
},
getmMember() {
// getSelplannersUrl
var ms_username = localStorage.getItem("ms_username");
console.log("ms_username", ms_username);
console.log();
this.$axios({
url: config.sysDeptMember,
method: "post",
headers: { "Content-Type": "application/json" },
data: {
query: [
{
field: "username",
value: ms_username
}
]
}
}).then(data => {
if (data.data.code == 200) {
this.depID = data.data.data.content[0].deptId;
if (
this.depID == null ||
this.depID == undefined ||
this.depID == ""
) {
this.depID = 1;
}
console.log("data/", this.depID);
return;
this.memberList = data.data.data.content;
} else {
this.$message.error(data.data.message);
}
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v =>
filterVal.map(j => {
return v[j];
})
);
},
// 查询 重置
searchData(type) {
// 1 查询 2 重置
switch (type) {
case 1:
let searchArr = [];
if (this.form.orderID != "") {
searchArr.push({
field: "insuranceNo",
value: this.form.orderID
});
}
if (this.form.username != "") {
searchArr.push({
field: "policyHolderName",
value: this.form.username
});
}
if (this.form.roleName != "") {
searchArr.push({
field: "insuredName",
value: this.form.roleName
});
}
if (this.form.planners != "") {
searchArr.push({
field: "planners",
value: JSON.stringify(this.form.planners)
});
}
if (this.form.status != "") {
console.log("this.form.status", this.form.status);
if (this.form.status == 1) {
searchArr.push({
field: "payStatus",
value: 0
});
} else if (this.form.status == 2) {
searchArr.push({
field: "payStatus",
value: 1
});
} else {
searchArr.push({
field: "effectiveStatus",
value: this.form.status
});
}
}
this.initData(searchArr);
break;
case 2:
for (let k in this.form) {
this.form[k] = "";
}
// this.form.status = "支付成功";
this.initData();
break;
case 3:
this.$router.push({
path: "/Policyentry"
});
break;
}
},
/**编辑 */
handUpdate(index, row) {
console.log(index, row);
this.$router.push({
path: "/policyentry",
query: {
id: row.id
}
});
},
// 初始化页面11
initData(search) {
var datas = {};
var saleIds = localStorage.getItem("saleIds");
var realname = localStorage.getItem("realname");
var deptId = localStorage.getItem("deptId");
console.log("deptId", deptId);
if (deptId != null && deptId == 3) {
search = [];
if (saleIds != null && saleIds != "") {
search.push({
field: "planners",
value: saleIds
});
}
}
if (this.form.createtime != "") {
// startdate.substring(0,10);
var startDates = new Date(this.form.createtime[0]).toJSON();
var startTimes = new Date(+new Date(startDates) + 8 * 3600 * 1000)
.toISOString()
.replace(/T/g, " ")
.replace(/\.[\d]{3}Z/, "");
var endDates = new Date(this.form.createtime[1]).toJSON();
var endTimes = new Date(+new Date(endDates) + 8 * 3600 * 1000)
.toISOString()
.replace(/T/g, " ")
.replace(/\.[\d]{3}Z/, "");
datas.dateParam = {
endDate: endTimes,
startDate: startTimes
};
}
if (search) {
// datas={};
datas.query = search;
this.$axios({
url: config.getPolicyInfo,
method: "post",
headers: { "Content-Type": "application/json" },
data: datas
}).then(data => {
if (data.data.code == 200) {
for (var i in data.data.data.content) {
if (data.data.data.content[i].income > 0) {
data.data.data.content[i].income = (
data.data.data.content[i].income / 100
).toFixed(2);
}
if (data.data.data.content[i].payAmount > 0) {
data.data.data.content[i].payAmount = (
data.data.data.content[i].payAmount / 100
).toFixed(2);
}
}
for (var j in this.planList) {
for (var i in data.data.data.content) {
if (
data.data.data.content[i].planners == this.planList[j].saleId
) {
data.data.data.content[i].plannersName = this.planList[
j
].realName;
}
}
}
this.tableData = data.data.data.content;
console.log("数据111111", data.data.data);
this.page.total = data.data.data.totalElements;
} else {
this.tableData = [];
}
});
} else {
this.$axios({
url: config.getPolicyInfo,
method: "post",
headers: { "Content-Type": "application/json" },
data: {
pageOrder: {
limit: this.page.pageSize,
page: this.page.pageNum
}
}
}).then(data => {
if (data.data.code == 200) {
console.log("222222", data);
for (var i in data.data.data.content) {
if (data.data.data.content[i].income > 0) {
data.data.data.content[i].income = (
data.data.data.content[i].income / 100
).toFixed(2);
}
if (data.data.data.content[i].payAmount > 0) {
data.data.data.content[i].payAmount = (
data.data.data.content[i].payAmount / 100
).toFixed(2);
}
for (var j in this.planList) {
if (
data.data.data.content[i].planners == this.planList[j].saleId
) {
data.data.data.content[i].plannersName = this.planList[
j
].realName;
}
}
this.tableData = data.data.data.content;
this.page.total = data.data.data.totalElements;
}
} else {
this.tableData = [];
}
});
}
}
}
};
</script>
<style>
@import url("../../common/style.css");
.handle-box {
margin-bottom: 20px;
}
.el-button--small,
.el-button--small.is-round {
padding: 7px 14px;
}
.handle-select {
width: 120px;
}
.handle-input {
width: 300px;
display: inline-block;
}
.del-dialog-cnt {
font-size: 16px;
text-align: center;
}
.table {
width: 100%;
font-size: 14px;
}
.red {
color: #ff0000;
}
.mr10 {
margin-right: 10px;
}
.upload {
display: inline-block !important;
position: relative;
top: 13px;
margin-left: 1px;
margin-right: 1px;
}
.el-upload--text {
/* background-color: #fff; */
border: 0px !important;
border-radius: 0px !important;
display: inline-block !important;
/* -webkit-box-sizing: border-box; */
width: 80px !important;
height: 30px !important;
text-align: center;
cursor: pointer;
position: relative;
overflow: hidden;
}
</style>
扫一扫
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
