|
|
@@ -0,0 +1,291 @@
|
|
|
+<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 style="width: 100%;" v-model="queryForm.companyId"
|
|
|
+ :show-all-levels="false" :options="options" :props="optionProps" clearable
|
|
|
+ @change="handleChange"
|
|
|
+ filterable></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" style="height: 40px;">
|
|
|
+ <el-form-item label="账单状态">
|
|
|
+ <el-select v-model="queryForm.status" placeholder="请选择" style="width: 100%;" clearable>
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option label="未核销" value="0"></el-option>
|
|
|
+ <el-option label="部分核销" value="1"></el-option>
|
|
|
+ <el-option label="已核销" value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </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-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="2" class="u-f u-f-je" style="height: 40px;">
|
|
|
+ <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="returnUpper">返回上层</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="22" 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" :stripe="true"
|
|
|
+ :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="companyName" label="保险公司名称" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <i class="el-icon-paperclip"></i>
|
|
|
+ <span style="margin-left: 10px" @click="drillingData(scope.row)">{{ scope.row.companyName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="settleMonth" label="账单属期" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="commissionFeevalue" label="手续费" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="otherFeevalue" label="跟单费" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="status" label="账单状态" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="allFeeValue" label="费用合计" width="180"></el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="primary" size="small" @click="exportListExcel(scope.row)">本行清单导出</el-button>
|
|
|
+ </template>
|
|
|
+ </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 {
|
|
|
+ // 右侧列表查询数据End
|
|
|
+ optionProps: {
|
|
|
+ //公司下拉列表配置
|
|
|
+ checkStrictly: true,
|
|
|
+ value: "id",
|
|
|
+ label: "name",
|
|
|
+ children: "children",
|
|
|
+ },
|
|
|
+ options: [], //保险公司下拉列表
|
|
|
+ loading: false,
|
|
|
+ clientHeight:0,//表格高度
|
|
|
+ currentPage: 1, //当前页面
|
|
|
+ pageSize: 10, //每页显示条数
|
|
|
+ totalSum: 0, //全部的数据条数
|
|
|
+ quoteDate:"",//结算单日期
|
|
|
+ //查询的表单
|
|
|
+ queryForm: {
|
|
|
+ companyId:"",
|
|
|
+ quoteStartDate: "",
|
|
|
+ quoteEndDate: "",
|
|
|
+ status:"",
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ isReturnBack:"0"//是否返回上层
|
|
|
+ },
|
|
|
+ dataList: [],//查询结果数据
|
|
|
+ //返回上层查询对象
|
|
|
+ returnForm:{
|
|
|
+ companyId: "",
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ // 设置表格的高度
|
|
|
+ this.clientHeight = (document.documentElement.clientHeight - 350)+'px';
|
|
|
+ //获取保险公司
|
|
|
+ let params = {
|
|
|
+ type: "1"
|
|
|
+ }
|
|
|
+ this.$api.report.findLeftInsTree(params).then(res=>{
|
|
|
+ this.options=res.data
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const that = this;
|
|
|
+ // 设置表格的高度
|
|
|
+ window.onresize = function temp() {
|
|
|
+ that.clientHeight = (document.documentElement.clientHeight - 350)+'px';
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 按照查询条件查询
|
|
|
+ drillingData(obj,type) {
|
|
|
+ this.queryForm.pageNum = 1;
|
|
|
+ this.queryForm.pageSize = 10;
|
|
|
+ this.queryForm.isReturnBack="0";
|
|
|
+ this.queryForm.companyId=obj.companyId;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ //返回上层
|
|
|
+ returnUpper(){
|
|
|
+ this.queryForm.isReturnBack="1";
|
|
|
+ this.queryForm.companyId= this.returnForm.companyId;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ //联级选择器触发事件
|
|
|
+ handleChange(val) {
|
|
|
+ if (val.length !== 0) {
|
|
|
+ this.queryForm.companyId = val.at(-1);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.queryForm.companyId = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //报价日期处理
|
|
|
+ changeQuoteDate(e) {
|
|
|
+ if (e === null) {
|
|
|
+ this.queryForm.quoteStartDate = e;
|
|
|
+ this.queryForm.quoteEndDate = e;
|
|
|
+ } else {
|
|
|
+ this.queryForm.quoteStartDate = e[0];
|
|
|
+ this.queryForm.quoteEndDate = e[1];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 按照查询条件查询
|
|
|
+ queryData() {
|
|
|
+ if((this.quoteDate ==null || this.quoteDate=='') ){
|
|
|
+ this.$message.error('结算单生成日期必须录入！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.queryForm.pageNum = 1;
|
|
|
+ this.queryForm.pageSize = 10;
|
|
|
+ this.queryForm.isReturnBack="0";
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ //数据
|
|
|
+ findPage() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$api.report.getInsPlySettleReport(this.queryForm).then((res) => {
|
|
|
+ if (res.code == "200") {
|
|
|
+ this.loading = false;
|
|
|
+ this.dataList = res.data.content;
|
|
|
+ for(let item of this.dataList){
|
|
|
+ this.returnForm.companyId=item.companyId;
|
|
|
+ }
|
|
|
+ this.currentPage = res.data.pageNum;
|
|
|
+ this.totalSum = res.data.totalSize;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ this.dataList=[];
|
|
|
+ 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.$message.error('结算单生成日期必须录入！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$api.report.exportInsPlySettleReport(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);
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //清单导出
|
|
|
+ exportListExcel(obj){
|
|
|
+ let queryListForm={}
|
|
|
+ queryListForm.quoteStartDate=this.queryForm.quoteStartDate;
|
|
|
+ queryListForm.quoteEndDate=this.queryForm.quoteEndDate;
|
|
|
+ queryListForm.companyId=this.queryForm.companyId;
|
|
|
+ queryListForm.status=obj.status;
|
|
|
+ this.$api.report.exportInsPlySettleListData(queryListForm).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>
|
