Arbitrate-Frontend/src/views/caseManagement/components/operateDialog.vue

<template>
    <div>
        <el-dialog :title="operateTitle" :visible="operateVisable" @close="cancel" center :distroy-on-close="true">
            <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 class="paySelectType">
                    <el-radio-group v-model="paySelect" @input="changPayType">
                        <el-radio :label="0">线上支付</el-radio>
                        <el-radio :label="1">线下支付</el-radio>
                    </el-radio-group>
                </div>
                <div class="payupload">
                    <span>上传支付凭证：</span>
                    <div class="uploadBtn">
                        <el-upload class="upload-demo" ref="upload" :action="UploadUrl()" :headers="headers"
                            :data="filedata" :on-remove="handleRemove" :on-change="beforeUpload" :on-success="handlSuccess"
                            :file-list="fileList">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </div>
                </div>
                <div class="payType" v-if="paySelect == 0">
                    <span>请选择支付方式：</span>
                    <i class="iconfont icon-weixinzhifu" @click="pay(0)"></i>
                    <i class="iconfont icon-zhifubao" @click="pay(1)"></i>
                </div>
                <div class="payImg">
                    <div id="qrcodeImg"></div>
                </div>
                <div class="payTitle">{{ payMain }}</div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="payCancel" class="endbutton"><span>取 消</span></el-button>
                    <el-button @click="submitUpload" type="primary" class="endbutton"><span>确认缴费</span></el-button>
                </div>
            </el-dialog>
            <el-table v-loading="loading" :data="dataList" style="width: 100%" @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="案件编号" align="center" prop="caseNum" :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="仲裁员" align="center" prop="arbitratorName" />
                <!-- 开庭日期 -->
                <el-table-column label="开庭日期" align="center" prop="hearDate" :show-overflow-tooltip="true" />
                <el-table-column label="案件状态" align="center" prop="caseStatusName">
                    <template slot-scope="scope">
                        <el-tag type="success">{{ scope.row.caseStatusName }}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <div class="radiobox" v-if="operateStatus == 2">
                <el-radio-group v-model="radio">
                    <el-radio :label="1">同意</el-radio>
                    <el-radio :label="2">拒绝</el-radio>
                </el-radio-group>
            </div>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParamsData.pageNum"
                :limit.sync="queryParamsData.pageSize" @pagination="getcaseApply(queryParamsData)" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel" class="endbutton"><span>取 消</span></el-button>
                <el-button @click="submitPay" type="primary" class="endbutton"
                    :disabled="dataList.length == 0 || batchData.length == 0"
                    v-if="operateStatus == 6"><span>确认缴费</span></el-button>
                <el-button @click="submitBatch" type="primary" class="endbutton"
                    :disabled="dataList.length == 0 || batchData.length == 0" v-else><span>确 认</span></el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import {
    caseApply,
    submitCaseApply,
    removeCaseApply,
    submitCaseApplicationCheck
} from "@/api/caseAccess/caseEntry";
import { getPayDetail,confirmPayDig } from "@/api/pay/pay";
import { casePay } from "@/api/pay/pay";
import QRCode from "qrcodejs2";
import { getToken } from "@/utils/auth";
import { writtenHear } from "@/api/caseManagement/caseManagement.js";
import {
    adjudicationCaseFile,
} from "@/api/awardManagement/awardManagement";
export default {
    props: ["operateVisable", "operateData", "operateTitle", 'operateStatus', 'queryParams'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 查询参数
            queryParamsData: {
                caseStatus: null,
                pageNum: 1,
                pageSize: 10,
            },
            // 表格数据
            dataList: [],
            batchData: [],
            radio: 1,
            payVisible: false,
            form: {},
            paySelect: 1,//支付线上/线下
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            filedata: {
                annexType: 8,
            },
            submitForm: {
                payType: 1,
                payOrderList: [],
                caseIds:[]
            },
            payMain: "",
            fileList: [],
        };
    },
    watch: {
        operateVisable(val) {
            this.radio = 1;
            if (val) {
                this.getcaseApply(this.queryParamsData)
            }
        },
        payVisible(val) {
            if (val) {
                this.submitForm.payOrderList = []
                this.paySelect = 1;
                this.fileList = [];
            }
        }
    },
    created() {

    },
    methods: {
        UploadUrl() {
            return window.location.origin + "/API/evidence/upload";
        },
        beforeUpload(flie, fileList) {
            this.fileList = fileList;
        },
        handleRemove(file, fileList) {
            (this.submitForm.payOrderList = []),
                fileList.forEach((item) => {
                    console.log(item.response.data, "item");
                    this.submitForm.payOrderList.push({ annexId: item.response.data.annexId, annexName: item.response.data.annexName });
                });
        },
        // 文件上传成功
        handlSuccess(res, file) {
            this.submitForm.payOrderList.push({
                annexId: res.data.annexId,
                annexName: res.data.annexName
            });
        },
        //选择支付方式(线上,线下)
        changPayType(data) {
            if (data == 1) {
                document.getElementById("qrcodeImg").innerHTML = "";
                this.payMain = ""
            }
            this.submitForm.payType = data;
        },
        pay(val) {
            if (this.form.totalFee == 0 || !this.form.totalFee) {
                this.$message({
                    message: "此案件无需缴费",
                    type: "error",
                });
                return;
            }
            let payType = "";
            if (val == 0) {
                payType = "wxpay";
                this.payMain = "请使用微信扫二维码支付";
            } else if (val == 1) {
                payType = "alipay";
                this.payMain = "请使用支付宝扫二维码支付";
            }
            casePay({
                totalFee: this.form.totalFee,
                caseIds: this.batchData,
                tradeType: "native",
                platform: payType,
            }).then((res) => {
                this.paySrc = res.data.code_url;
                this.qrcode(this.paySrc);
            });
        },
        // 生成二维码
        qrcode(url) {
            // 前端根据 URL 生成微信支付二维码
            document.getElementById("qrcodeImg").innerHTML = "";
            return new QRCode("qrcodeImg", {
                width: 200,
                height: 200,
                text: url,
                colorDark: "#000",
                colorLight: "#fff",
            });
        },
        submitUpload() {
            if (this.fileList.length < 1) {
                this.$modal.msgError("请上传缴费凭证");
                return
            }
            this.submitForm.caseIds = this.batchData;
            console.log(this.submitForm,"LLLLLLLLLLLLLLLLLLLLLLLLLLLL");
            confirmPayDig(this.submitForm).then(res => {
                this.$modal.msgSuccess("成功");
                this.payCancel();
                this.getcaseApply(this.queryParamsData);
            })
        },
        // 选择勾选框
        handleSelectionChange(val) {
            this.batchData = [];
            val.forEach(item => {
                this.batchData.push(item.id)
            })
        },
        payCancel() {
            this.payVisible = false;
            this.payMain = "";
        },
        cancel() {
            this.$emit("cancelOperate");
        },
        // 批量操作
        submitBatch() {
            if (this.operateStatus == 0) {
                this.submitCaseApplyFn({ ids: this.batchData })
            } else if (this.operateStatus == 1) {
                this.removeCaseApplyFn({ ids: this.batchData })
            } else if (this.operateStatus == 2) {
                this.submitCaseApplicationCheckFn({ ids: this.batchData, agreeOrNotCheck: this.radio })
            } else if (this.operateStatus == 3) {
                this.adjudicationCaseFileFn({ ids: this.batchData })
            } else if (this.operateStatus == 4) {
                // this.adjudicationCaseFileFn({ ids: this.batchData })
                this.writtenHearFn({ ids: this.batchData })
            } else if (this.operateStatus == 5) {
                // this.adjudicationCaseFileFn({ ids: this.batchData })
                // this.writtenHearFn({ids: this.batchData})
            }
        },
        // 批量缴费弹窗
        submitPay() {
            this.payVisible = true;
            this.getPayDetailFn({ caseIds: this.batchData })
        },
        // 查询缴费信息
        getPayDetailFn(params) {
            getPayDetail(params).then(res => {
                this.form = res.data;
                document.getElementById("qrcodeImg").innerHTML = "";
            })
        },
        // 批量提交
        submitCaseApplyFn(data) {
            submitCaseApply(data).then(res => {
                this.$modal.msgSuccess("提交成功");
                this.cancel();
                this.$emit("getcaseApply", this.queryParams);
            })
        },
        // 批量删除
        removeCaseApplyFn(data) {
            removeCaseApply(data).then(res => {
                this.$modal.msgSuccess("删除成功");
                this.cancel();
                this.$emit("getcaseApply", this.queryParams);
            })
        },
        // 批量立案审查
        submitCaseApplicationCheckFn(data) {
            submitCaseApplicationCheck(data).then(res => {
                this.$modal.msgSuccess("立案审查成功");
                this.cancel();
                this.$emit("getcaseApply", this.queryParams);
            })
        },
        //批量归档
        adjudicationCaseFileFn(data) {
            adjudicationCaseFile(data).then(res => {
                this.$modal.msgSuccess("归档成功");
                this.cancel();
                this.$emit("getcaseApply", this.queryParams);
            })
        },
        // 批量生成裁决书
        writtenHearFn(data) {
            writtenHear(data).then(res => {
                this.$modal.msgSuccess("生成成功");
                this.cancel();
                this.$emit("getcaseApply", this.queryParams);
            })
        },
        /** 查询列表 */
        getcaseApply(val) {
            this.loading = true;
            if (this.operateStatus == 0) {
                this.queryParamsData.caseStatus = 0
            } else if (this.operateStatus == 1) {
                this.queryParamsData.caseStatus = 0
            } else if (this.operateStatus == 2) {
                this.queryParamsData.caseStatus = 1
            } else if (this.operateStatus == 3) {
                this.queryParamsData.caseStatus = 16
            } else if (this.operateStatus == 4) {
                this.queryParamsData.caseStatus = 9
            } else if (this.operateStatus == 5) {
                this.queryParamsData.caseStatus = 11
            } else if (this.operateStatus == 6) {
                this.queryParamsData.caseStatus = 2
            }
            caseApply(val).then((response) => {
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
    },
};
</script>
  
<style lang="scss" scoped>
.steps {
    display: flex;
    flex-wrap: wrap;
}

.radiobox {
    margin-top: 30px;
}

.paySelectType {
    margin: 20px 0 20px 0;
}

.payupload {
    display: flex;
    margin-bottom: 20px;
}

.payImg {
    width: 100%;
    display: flex;
    justify-content: center;
}

.payTitle {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}
.payType {
  height: 80px;
  line-height: 80px;
  display: flex;

  .icon-weixinzhifu {
    font-size: 24px;
    color: #27a56f;
    margin-right: 15px;
  }

  .icon-zhifubao {
    font-size: 24px;
    color: #1d76cc;
  }
}
::v-deep .el-dialog__body{
    max-height: 600px;
    overflow-y: scroll;

}
</style>