|
|
@@ -0,0 +1,295 @@
|
|
|
+<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 insureComList" :key='val.id' :label="val.name" :value="val.id" ></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 fixed label="机构名称" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <i class="el-icon-paperclip"></i>
|
|
|
+ <span style="margin-left: 10px" @click="drillingData(scope.row)">{{ scope.row.institution }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="waitPayCostsPremiums" label="待付管理费" width="200"></el-table-column>
|
|
|
+ <el-table-column prop="paidCostsPremiums" label="已付管理费" width="200"></el-table-column>
|
|
|
+ <el-table-column prop="sumCostsPremiums" label="管理费合计" width="200"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="200">
|
|
|
+ <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 {
|
|
|
+ loading: false,
|
|
|
+ insureComList:[], //保险公司列表
|
|
|
+ institutionOptions: [],//所属机构列表
|
|
|
+ clientHeight:0,//表格高度
|
|
|
+ currentPage: 1, //当前页面
|
|
|
+ pageSize: 10, //每页显示条数
|
|
|
+ totalSum: 0, //全部的数据条数
|
|
|
+ quoteDate:"",//签单日期
|
|
|
+ //查询的表单
|
|
|
+ queryForm: {
|
|
|
+ deptId: "",
|
|
|
+ insCompany:"",
|
|
|
+ quoteStartDate: "",
|
|
|
+ quoteEndDate: "",
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ isDrilling:"0",// 0正常查询 1下钻查询 2返回上层
|
|
|
+ },
|
|
|
+ dataList: [],//查询结果数据
|
|
|
+ //返回上层查询对象
|
|
|
+ returnForm:{
|
|
|
+ deptId: "",
|
|
|
+ teamCode:"",
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ // 设置表格的高度
|
|
|
+ this.clientHeight = (document.documentElement.clientHeight - 350)+'px';
|
|
|
+ //获取机构树
|
|
|
+ this.$api.report.findDeptTree().then((res) => {
|
|
|
+ this.institutionOptions = res.data;
|
|
|
+ });
|
|
|
+ //获取保险公司
|
|
|
+ this.$api.letter.gainTopList().then(res=>{
|
|
|
+ this.insureComList=res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const that = this;
|
|
|
+ // 设置表格的高度
|
|
|
+ window.onresize = function temp() {
|
|
|
+ that.clientHeight = (document.documentElement.clientHeight - 350)+'px';
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //返回上层
|
|
|
+ returnUpper(){
|
|
|
+ this.queryForm.isDrilling="2";
|
|
|
+ this.queryForm.deptId= this.returnForm.deptId;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ // 按照查询条件查询
|
|
|
+ drillingData(obj) {
|
|
|
+ this.queryForm.pageNum = 1;
|
|
|
+ this.queryForm.pageSize = 10;
|
|
|
+ this.queryForm.isDrilling="1";
|
|
|
+ this.queryForm.deptId="";
|
|
|
+ this.queryForm.deptId=obj.institutionId;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ //联级选择器触发事件
|
|
|
+ handleChange(val) {
|
|
|
+ if (val.length !== 0) {
|
|
|
+ this.queryForm.deptId = val.at(-1);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.queryForm.deptId = ''
|
|
|
+ //级联清空 团队 业务员
|
|
|
+ this.queryForm.teamCode='';
|
|
|
+ this.queryForm.userId='';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //报价日期处理
|
|
|
+ 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.queryForm.deptId ==null || this.queryForm.deptId=='') ){
|
|
|
+ this.$message.error('所属机构必须录入！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if((this.quoteDate ==null || this.quoteDate=='') ){
|
|
|
+ this.$message.error('签单日期必须录入！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.queryForm.pageNum = 1;
|
|
|
+ this.queryForm.pageSize = 10;
|
|
|
+ this.queryForm.isDrilling="0";
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ //数据
|
|
|
+ findPage() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$api.report.getPayApplyDeptReport(this.queryForm).then((res) => {
|
|
|
+ if (res.code == "200") {
|
|
|
+ this.loading = false;
|
|
|
+ this.dataList = res.data.content;
|
|
|
+ for(let item of this.dataList){
|
|
|
+ this.returnForm.deptId=item.institutionId;
|
|
|
+ }
|
|
|
+ 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.queryForm.deptId ==null || this.queryForm.deptId=='') ){
|
|
|
+ this.$message.error('所属机构必须录入！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if((this.quoteDate ==null || this.quoteDate=='') ){
|
|
|
+ this.$message.error('签单日期必须录入！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$api.report.exportPayApplyDeptReport(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.insCompany=this.queryForm.insCompany;
|
|
|
+ queryListForm.deptId=obj.institutionId;
|
|
|
+ this.$api.report.exportPayApplyDeptReportListData(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;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-select{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-cascader--mini{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+</style>
|
