|
|
@@ -0,0 +1,294 @@
|
|
|
+<template>
|
|
|
+ <div class="page-container">
|
|
|
+ <div class="queryForm" style="padding-top:10px;padding-left:15px;">
|
|
|
+ <el-form size="mini" ref="queryForm" :model="queryForm" label-width="120px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6" style="height: 40px;">
|
|
|
+ <el-form-item label="所属机构">
|
|
|
+ <el-cascader class="widths" :options="institutionOptions" v-model="queryForm.deptId" :props="{
|
|
|
+ checkStrictly: true, value: 'id',
|
|
|
+ label: 'name',
|
|
|
+ }" @change="handleChange" clearable></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" style="height: 40px;">
|
|
|
+ <el-form-item label="保险公司">
|
|
|
+ <el-select v-model="queryForm.insCompany" filterable class="widths" clearable>
|
|
|
+ <el-option v-for="val in companyList" :key='val.id' :label="val.name" :value="val.id" ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" style="height: 40px;">
|
|
|
+ <el-form-item label="投保险种">
|
|
|
+ <el-select v-model="queryForm.productId" placeholder="请选择" style="width: 100%;" clearable>
|
|
|
+ <el-option label="单交" value="0330"></el-option>
|
|
|
+ <el-option label="单商" value="034001"></el-option>
|
|
|
+ <el-option label="单三" value="034002"></el-option>
|
|
|
+ <el-option label="交三" value="'0330034002"></el-option>
|
|
|
+ <el-option label="交商" value="0330034001"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" style="height: 40px;">
|
|
|
+ <el-form-item label="受理人工号">
|
|
|
+ <el-input clearable placeholder="受理人工号" v-model="queryForm.operatorId"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" style="height: 40px;">
|
|
|
+ <el-form-item label="代理人工号">
|
|
|
+ <el-input clearable placeholder="代理人工号" v-model="queryForm.userid"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" style="height: 40px;">
|
|
|
+ <el-form-item label="代理人姓名">
|
|
|
+ <el-input clearable placeholder="代理人姓名" v-model="queryForm.username"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" style="height: 40px;">
|
|
|
+ <el-form-item label="投保人">
|
|
|
+ <el-input clearable placeholder="投保人姓名" v-model="queryForm.appliName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" style="height: 40px;">
|
|
|
+ <el-form-item label="被保险人">
|
|
|
+ <el-input clearable placeholder="被保人姓名" v-model="queryForm.insureName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" style="height: 40px;">
|
|
|
+ <el-form-item label="报价时间">
|
|
|
+ <el-date-picker v-model="quoteDate" style="width:100%" @change="changeQuoteDate" type="daterange" align="left" value-format="yyyy-MM-dd"
|
|
|
+ range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" style="height: 40px;">
|
|
|
+ <el-form-item label="起保时间">
|
|
|
+ <el-date-picker v-model="policyDate" style="width:100%" @change="changePolicyDate" type="daterange" align="left" value-format="yyyy-MM-dd"
|
|
|
+ range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="u-f u-f-je" style="height: 40px;">
|
|
|
+ <el-button type="primary" style="margin-right: 40px;" @click="queryData">查询</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 数据列表显示区域 -->
|
|
|
+ <el-table size="mini" border stripe :data="dataList" :height="clientHeight" v-loading="loading"
|
|
|
+ :header-cell-style="{background:'#F2F7FC',fontWeight: '700',color:'#606266',textAlign: 'center'}"
|
|
|
+ :cell-style="{textAlign: 'center'}" style="width: 100%;margin-bottom: 60px;">
|
|
|
+ <el-table-column prop="insCompany" fixed label="保险公司名称" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="licenseNo" fixed label="车牌号" width="70"></el-table-column>
|
|
|
+ <el-table-column prop="appliName" fixed label="投保人姓名" width="90"></el-table-column>
|
|
|
+ <el-table-column prop="insureName" label="被保人姓名" width="90"></el-table-column>
|
|
|
+ <el-table-column prop="policyNo" label="保单号" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="riskName" label="险种" width="90"></el-table-column>
|
|
|
+ <el-table-column prop="quoteDate" label="签单日期" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="policyStartDate" label="保险起期" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="sumPremium" label="含税保费" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="taxPremium" label="车船税" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="taxLaterPremium" label="车船税滞纳金" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="insuranceSubAmount" label="车险分项保额" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="vehicleUse" label="车辆使用性质" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="powerType" label="能源种类" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="ciModelClass" label="车辆种类" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="limitLoad" label="核定吨位" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="deptName" label="机构名称" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="agreementName" label="协议名称" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="userName" label="代理人名称" width="150"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 底部分页 -->
|
|
|
+ <div class="bottomFixed">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-button type="primary" style="margin-right: 40px;" @click="exportExcel">全部导出</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="22">
|
|
|
+ <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
|
|
|
+ :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSum">
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ companyList:[], //保险公司
|
|
|
+ institutionOptions: [],//机构名称数组
|
|
|
+ clientHeight:0,//表格高度
|
|
|
+ currentPage: 1, //当前页面
|
|
|
+ pageSize: 3, //每页显示条数
|
|
|
+ totalSum: 0, //全部的数据条数
|
|
|
+ quoteDate:"",//报价日期
|
|
|
+ policyDate:"",//起保日期
|
|
|
+ //查询的表单
|
|
|
+ queryForm: {
|
|
|
+ deptId: "",
|
|
|
+ insCompany:"",
|
|
|
+ productId:"",
|
|
|
+ operatorId:"",
|
|
|
+ userid: "",
|
|
|
+ username: "",
|
|
|
+ appliName:"",
|
|
|
+ insureName: "",
|
|
|
+ quoteStartDate: "",
|
|
|
+ quoteEndDate: "",
|
|
|
+ policyStartDate: "",
|
|
|
+ policyEndDate: "",
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ },
|
|
|
+ dataList: [],//查询结果数据
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ // 设置表格的高度
|
|
|
+ this.clientHeight = (document.documentElement.clientHeight - 350)+'px';
|
|
|
+ //获取机构树
|
|
|
+ this.$api.dept.findDeptTree().then((res) => {
|
|
|
+ this.institutionOptions = res.data;
|
|
|
+ });
|
|
|
+ //获取保险公司
|
|
|
+ this.$api.letter.gainTopList().then(res=>{
|
|
|
+ this.companyList=res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const that = this;
|
|
|
+ // 设置表格的高度
|
|
|
+ window.onresize = function temp() {
|
|
|
+ that.clientHeight = (document.documentElement.clientHeight - 350)+'px';
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //联级选择器触发事件
|
|
|
+ handleChange(val) {
|
|
|
+ if (val.length !== 0) {
|
|
|
+ this.queryForm.deptId = val.at(-1);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.queryForm.deptId = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //报价日期处理
|
|
|
+ changeQuoteDate(e) {
|
|
|
+ if (e === null) {
|
|
|
+ this.queryForm.quoteStartDate = e;
|
|
|
+ this.queryForm.quoteEndDate = e;
|
|
|
+ } else {
|
|
|
+ this.queryForm.quoteStartDate = e[0];
|
|
|
+ this.queryForm.quoteEndDate = e[1];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //起保日期处理
|
|
|
+ changePolicyDate(e) {
|
|
|
+ if (e === null) {
|
|
|
+ this.queryForm.policyStartDate = e;
|
|
|
+ this.queryForm.policyEndDate = e;
|
|
|
+ } else {
|
|
|
+ this.queryForm.policyStartDate = e[0];
|
|
|
+ this.queryForm.policyEndDate = e[1];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 按照查询条件查询
|
|
|
+ queryData() {
|
|
|
+ if((this.quoteDate ==null || this.quoteDate=='') && (this.policyDate == null || this.policyDate == '')){
|
|
|
+ this.$message.error('报价时间和起保时间至少录入一项！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.queryForm.pageNum = 1;
|
|
|
+ this.queryForm.pageSize = 20;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ //数据
|
|
|
+ findPage() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$api.letter.queryPolicyData(this.queryForm).then((res) => {
|
|
|
+ if (res.code == "200") {
|
|
|
+ this.loading = false;
|
|
|
+ this.dataList = res.data.content;
|
|
|
+ this.currentPage = res.data.pageNum;
|
|
|
+ this.totalSum = res.data.totalSize;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 每页条数发生改变
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pageSize = val;
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.queryForm.pageNum = 1;
|
|
|
+ this.queryForm.pageSize = val;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ // 当前页发生改变
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val;
|
|
|
+ this.queryForm.pageNum = val;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+
|
|
|
+ //全部导出
|
|
|
+ exportExcel(){
|
|
|
+ if((this.quoteDate ==null || this.quoteDate=='') && (this.policyDate == null || this.policyDate == '')){
|
|
|
+ this.$message.error('报价时间和起保时间至少录入一项！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$api.letter.exportPolicyData(this.queryForm).then(res=>{
|
|
|
+ let url = process.env.BASE_URL+'/upload/'+res.data // 3.创建一个临时的url指向blob对象
|
|
|
+ // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
|
|
|
+ let a = document.createElement("a");
|
|
|
+ a.href = url;
|
|
|
+ a.download = "导出订单.xlsx";
|
|
|
+ a.click();
|
|
|
+ // 5.释放这个临时的对象url
|
|
|
+ window.URL.revokeObjectURL(url);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ /* 底部固定分页 */
|
|
|
+ .bottomFixed {
|
|
|
+ height: 50px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部查询条件样式Start */
|
|
|
+ .queryFrom .el-row {
|
|
|
+ margin: 10px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .queryFrom .el-form-item {
|
|
|
+ margin-bottom: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .queryFrom .queryButton .el-form-item__content {
|
|
|
+ margin-left: 40px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部查询条件样式End */
|
|
|
+
|
|
|
+ .el-form-item{
|
|
|
+ margin-bottom: 0px!important;
|
|
|
+ }
|
|
|
+ .el-dialog__body{
|
|
|
+ padding: 10px 20px!important;
|
|
|
+ }
|
|
|
+</style>
|
lihongxiao