|
|
@@ -0,0 +1,314 @@
|
|
|
+<template>
|
|
|
+ <!--布局容器-->
|
|
|
+ <div class="container" style="width: 99%; margin-top: 0px">
|
|
|
+ <templateTable :formList="formList" :searchData.sync="searchData" :tableConfig="tableConfig" :btnGroup="btnGroup"
|
|
|
+ :data="tableData" @getList="getList" @handleSearchList="handleSearchList" :pagination="queryFrom">
|
|
|
+ <el-table-column slot="batchNum" label="批次号" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="batchStyle" @click="redirectDetail(scope.row)">{{ scope.row.batchNum }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </templateTable>
|
|
|
+ <el-dialog v-dialogDrag title="批次详情" :visible.sync="dialogBVatchVisible" width="80%"
|
|
|
+ @close="closeBVatchVisibleVisible">
|
|
|
+ <div class="detailStyle">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="4">交强险保费：{{ formDetailData.mlifta }}</el-col>
|
|
|
+ <el-col :span="4">手续费：</el-col>
|
|
|
+ <el-col :span="4">商业险保费：{{ formDetailData.cip }}</el-col>
|
|
|
+ <el-col :span="4">手续费：</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="margin:20px 0">
|
|
|
+ <el-col :span="4">车船税：{{ formDetailData.vavt }}</el-col>
|
|
|
+ <el-col :span="4">手续费：</el-col>
|
|
|
+ <el-col :span="4">其他保费：{{ formDetailData.other }}</el-col>
|
|
|
+ <el-col :span="4">手续费：</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="16" style="text-align: center;">合计手续费：</el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-table size="small" :data="batchData" border highlight-current-row stripe ref="expandTable"
|
|
|
+ :header-cell-style="{ background: '#F2F7FC', fontWeight: '700', color: '#606266' }">
|
|
|
+ <template v-for="(item, index) in columns">
|
|
|
+ <el-table-column :prop="item.prop" :label="item.label" :key="index"></el-table-column>
|
|
|
+ </template>
|
|
|
+ <el-table-column label="操作" align="center" min-width="60">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" type="primary" @click="detailBatchFun(scope.row)">详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="block">
|
|
|
+ <el-pagination @size-change="tablePageBatchChange" @current-change="tableCurrentBatchChange"
|
|
|
+ :current-page="queryBatchFrom.pageNum" :page-size="queryBatchFrom.pageSize"
|
|
|
+ :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="queryBatchFrom.totalSize"></el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog v-dialogDrag title="详情" :visible.sync="dialogBVatch" width="60%" @close="closdialogBVatceVisible">
|
|
|
+ <el-row style="margin-bottom:20px">
|
|
|
+ <el-col :span="8">批次号：{{ formBatchDetailData.batchNum }}</el-col>
|
|
|
+ <el-col :span="4">保险公司：中煤保险</el-col>
|
|
|
+ <el-col :span="8">保单号：{{ formBatchDetailData.policyNum }}</el-col>
|
|
|
+ <el-col :span="4">车牌号：{{ formBatchDetailData.plateNum }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">被保险人：{{ formBatchDetailData.insured }}</el-col>
|
|
|
+ <el-col :span="4">险种：{{ formBatchDetailData.insKindName }}</el-col>
|
|
|
+ <el-col :span="8">付款日期：{{ formBatchDetailData.payDate }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="margin:40px 0 20px 0">
|
|
|
+ <el-col :span="8">交强险保费：{{ formBatchDetailData.mlifta }}</el-col>
|
|
|
+ <el-col :span="4">手续费：{{ formBatchDetailData.other }}</el-col>
|
|
|
+ <el-col :span="8">商业险保费：{{ formBatchDetailData.cip }}</el-col>
|
|
|
+ <el-col :span="4">手续费：{{ formBatchDetailData.other }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">车船税：{{ formBatchDetailData.vavt }}</el-col>
|
|
|
+ <el-col :span="4">手续费：{{ formBatchDetailData.other }}</el-col>
|
|
|
+ <el-col :span="8">其他保费：{{ formBatchDetailData.other }}</el-col>
|
|
|
+ <el-col :span="4">手续费：{{ formBatchDetailData.other }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import templateTable from '../../../components/TemplateTable/index.vue'
|
|
|
+import { mapState } from 'vuex'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "payment",
|
|
|
+ components: { templateTable },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ perms: state => state.user.perms
|
|
|
+ })
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ InsCompanyList: [],
|
|
|
+ searchData: {},
|
|
|
+ formList: [
|
|
|
+ {
|
|
|
+ label: "保险公司",
|
|
|
+ prop: "insCompanyId",
|
|
|
+ type: "company",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "业务渠道",
|
|
|
+ prop: "业务渠道",
|
|
|
+ type: 'input'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "车牌号",
|
|
|
+ prop: "plateNum",
|
|
|
+ type: 'input'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "批次号",
|
|
|
+ prop: "batchNum",
|
|
|
+ type: 'input'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "支付状态",
|
|
|
+ prop: "status",
|
|
|
+ type: 'select',
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '已支付',
|
|
|
+ value: '1'
|
|
|
+ }, {
|
|
|
+ label: '未支付',
|
|
|
+ value: '0'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tableConfig: {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ type: 'slot',
|
|
|
+ name: 'batchNum',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'insCompany', label: '保险公司',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'plateNum', label: '车牌号',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'mlifta', label: '交强险保费',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'vavt', label: '车船税',
|
|
|
+ }, {
|
|
|
+ prop: 'other', label: '其他保费',
|
|
|
+ }, {
|
|
|
+ prop: 'status', label: '状态',
|
|
|
+ }, {
|
|
|
+ prop: '应付', label: '应付',
|
|
|
+ }, {
|
|
|
+ prop: '操作人', label: '操作人',
|
|
|
+ }, {
|
|
|
+ prop: 'payDate', label: '支付日期',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ isCheckBox: true,
|
|
|
+ loading: true,
|
|
|
+ isPaginationShow: true,
|
|
|
+ optBtns: [
|
|
|
+ {
|
|
|
+ label: '支付',
|
|
|
+ click: (row, index) => { return this.payFun(row) },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ btnGroup: [{
|
|
|
+ name: '批量支付',
|
|
|
+ click: "changs",
|
|
|
+ }],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ prop: "batchNum",
|
|
|
+ label: "批次号"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "policyNum",
|
|
|
+ label: "保单号"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "plateNum",
|
|
|
+ label: "车牌号"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "insured",
|
|
|
+ label: "被保险人"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "insKindName",
|
|
|
+ label: "险种"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "mlifta",
|
|
|
+ label: "交强险保费"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "vavt",
|
|
|
+ label: "车船税"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "cip",
|
|
|
+ label: "商业保险费"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "other",
|
|
|
+ label: "其他保费"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "payDate",
|
|
|
+ label: "付款日期"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ queryFrom: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ totalSize: 0
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
+ queryBatchFrom: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ totalSize: 0
|
|
|
+ },
|
|
|
+ batchData: [],
|
|
|
+ formDetailData: {},
|
|
|
+ formBatchDetailData: {},
|
|
|
+ dialogBVatch: false,
|
|
|
+ dialogBVatchVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //列表数据
|
|
|
+ getList(data) {
|
|
|
+ this.tableConfig.loading = true;
|
|
|
+ this.$api.cost.getchanneQueryPageDetails({ ...this.queryFrom, ...data }).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.tableData = res.data.content;
|
|
|
+ this.queryFrom.pageNum = res.data.pageNum;
|
|
|
+ this.queryFrom.pageSize = res.data.pageSize;
|
|
|
+ this.queryFrom.totalSize = res.data.totalSize;
|
|
|
+ this.tableConfig.loading = false;
|
|
|
+ } else {
|
|
|
+ this.tableConfig.loading = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSearchList(data) {
|
|
|
+ this.getList(data)
|
|
|
+ },
|
|
|
+ payFun(row) {
|
|
|
+ console.log(row, 1111111)
|
|
|
+ },
|
|
|
+ getBachList(batchNum) {
|
|
|
+ this.$api.cost
|
|
|
+ .getQueryPageDetails({
|
|
|
+ batchNum,
|
|
|
+ ...this.queryBatchFrom,
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.batchData = res.data.content;
|
|
|
+ this.queryBatchFrom.pageNum = res.data.pageNum;
|
|
|
+ this.queryBatchFrom.pageSize = res.data.pageSize;
|
|
|
+ this.queryBatchFrom.totalSize = res.data.totalSize;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 批次详情列表
|
|
|
+ redirectDetail(row) {
|
|
|
+ this.dialogBVatchVisible = true;
|
|
|
+ this.formDetailData = row;
|
|
|
+ this.getBachList(row.id);
|
|
|
+ },
|
|
|
+ tablePageBatchChange(val) {
|
|
|
+ this.queryBatchFrom.pageSize = val;
|
|
|
+ this.getBachList();
|
|
|
+ },
|
|
|
+ tableCurrentBatchChange(val) {
|
|
|
+ this.queryBatchFrom.pageNum = val;
|
|
|
+ this.getBachList();
|
|
|
+ },
|
|
|
+ // 批次详情查看接口
|
|
|
+ detailBatchFun(row) {
|
|
|
+ let id = row.id;
|
|
|
+ this.dialogBVatch = true;
|
|
|
+ this.$api.cost.detailsById(id).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.formBatchDetailData = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ closeBVatchVisibleVisible() {
|
|
|
+ this.dialogBVatchVisible = false;
|
|
|
+ },
|
|
|
+ closdialogBVatceVisible() {
|
|
|
+ this.dialogBVatch = false;
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.batchStyle {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.batchStyle:hover {
|
|
|
+ color: #8b0000;
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
+</style>
|
lihongxiao