Arbitrate-Frontend/src/views/paymentManagement/components/batchConfirmationPaymens.vue

<template>
    <div>
        <!-- 批量确认缴费 -->
        <el-dialog title="批量确认缴费" :visible="batchVisable" @close="cancel" center :distroy-on-close="true">
            <el-table v-loading="loading" style="width: 100%" :data="dataList" @selection-change="handleSelectionChange">
                <el-table-column type="selection">
                </el-table-column>
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span>{{
                            (queryParamsData.pageNum - 1) * queryParamsData.pageSize + scope.$index + 1
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="案件编号" prop="caseNum" align="center"  :show-overflow-tooltip="true" />
                <el-table-column label="申请人" align="center" prop="applicantName" :show-overflow-tooltip="true" />
                <el-table-column label="案件标的" align="center" prop="caseSubjectAmount" />
                <el-table-column label="仲裁方式" align="center" prop="arbitratMethodName" :show-overflow-tooltip="true" />
                <!-- 仲裁员 -->
                <el-table-column label="仲裁员" prop="arbitratorName" align="center"  />
                <!-- 开庭日期 -->
                <el-table-column label="开庭日期" prop="hearDate" align="center"  :show-overflow-tooltip="true" />
                <el-table-column label="案件状态" prop="caseStatusName" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success">{{ scope.row.caseStatusName }}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
             <pagination  :total="total" :page.sync="queryParamsData.pageNum"
                :limit.sync="queryParamsData.pageSize" @pagination="getBatchComfirmation(queryParamsData)" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel"  class="endbutton"><span>取 消</span></el-button>
                <el-button type="primary" class="endbutton"  :disabled="dataList.length == 0 || batchData.length == 0" @click="submitPay"><span>确认缴费</span></el-button>
            </div>
            <el-dialog width="40%" title="缴费详情" :visible.sync="payVisible" append-to-body>
                <!-- 案件总金额 -->
                <h3>案件总金额：{{ form.totalFee / 100 }}</h3>
                <el-descriptions :title="'订单信息' + (index + 1)" v-for="(item, index) in form.caseApplicationList"
                    :key="index" border>
                    <el-descriptions-item label="案件编号">{{
                        item.caseNum
                    }}</el-descriptions-item>
                    <el-descriptions-item label="申请人">{{
                        item.caseAppName
                    }}</el-descriptions-item>
                    <el-descriptions-item label="案件标的">{{
                        item.caseSubjectAmount
                    }}</el-descriptions-item>
                    <el-descriptions-item label="案件应缴费用">{{
                        item.feePayable
                    }}</el-descriptions-item>
                    <el-descriptions-item label="被申请人">{{
                        item.caseResName
                    }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="申请人仲裁诉求">{{
                        item.arbitratClaims
                    }}</el-descriptions-item> -->
                </el-descriptions>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="payCancel" class="endbutton"><span>取 消</span></el-button>
                    <el-button type="primary" class="endbutton" @click="submitUpload"><span>确认缴费</span></el-button>
                </div>
            </el-dialog>
        </el-dialog>
    </div>
</template>
<script>
import {caseApply} from '@/api/caseAccess/caseEntry'
import { getPayDetail,confirmPay} from "@/api/pay/pay";
export default {
    props:["batchVisable"],
    data() {
        return {
             // 遮罩层
            loading: true,
            // 总条数
            total:0,
             // 查询参数
            queryParamsData: {
                caseStatus: 3,
                pageNum: 1,
                pageSize: 10,
            },
             // 表格数据
            dataList: [],
            batchData: [],
            payVisible: false,
            form: {},
            submitForm: {
                ids:[]
            },
        }
    },
     watch: {
        batchVisable(val) {
            if (val) {
                this.getBatchComfirmation(this.queryParamsData)
            }
        }  
    },
    created(){
        this.getBatchComfirmation(this.queryParamsData)
    },
    methods:{
        // 查询列表
        getBatchComfirmation(val){
             this.loading = true;
            caseApply(val).then(res=>{
                this.dataList = res.rows
                this.total = res.total;
                 this.loading = false;
            })
        },
        // 选择勾选框
        handleSelectionChange(val) {
            this.batchData = [];
            val.forEach(item => {
                this.batchData.push(item.id)
            })
        },
              // 批量缴费弹窗
        submitPay() {
            this.payVisible = true;
            this.getPayDetailFn({ caseIds: this.batchData })
        },
         // 查询缴费信息
        getPayDetailFn(params) {
            getPayDetail(params).then(res => {
                console.log(res)
                this.form = res.data;
            })
        },
       payCancel() {
            this.payVisible = false;
        },
        submitUpload() {
            this.submitForm.ids = this.batchData;
            console.log(this.submitForm)
            confirmPay(this.submitForm).then(res => {
                this.$modal.msgSuccess("成功");
                this.payCancel();
                this.getBatchComfirmation(this.queryParamsData);
            })
        },
        cancel() {
         this.$emit("batchOperate");
        },
    }
}
</script>