415 lines
15 KiB
Vue
415 lines
15 KiB
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> |