Mediation-Frontend/src/views/caseManagement/components/paymentdetailsDialog.vue

<template>
  <div>
    <el-dialog :title="title" :visible="openDialog" @close="cancel" :destroy-on-close="true" center>
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="案件编号：" prop="caseNum">
          <el-input v-model="form.caseNum" placeholder="" :disabled="true"/>
        </el-form-item>
        <!-- <el-form-item label="案件标的：" prop="caseSubjectAmount">
          <el-input v-model="form.caseSubjectAmount" :disabled="true"/>
        </el-form-item> -->
        <!-- <el-form-item label="缴费人：" prop="applicantName">
          <el-input v-model="form.applicationName" placeholder="" />
        </el-form-item> -->
        <el-form-item label="缴费金额：" prop="feePayable">
          <el-input v-model="form.feePayable" :disabled="true"/>
        </el-form-item>
        <el-form-item label="申请人缴费凭证：" v-if="form.caseAttachList&&form.caseAttachList.length>0 ">
          <div style="color: #104fad;cursor:pointer" v-for="(item, index) in form.caseAttachList" :key="index"
            @click="preview(item.annexPath)">
            {{ item.annexName }}
          </div>
        </el-form-item>
        <el-form-item label="被申请人缴费凭证：" v-if="form.resCaseAttachList&&form.resCaseAttachList.length>0">
          <div style="color: #104fad;cursor:pointer" v-for="(item, index) in form.resCaseAttachList" :key="index"
            @click="preview(item.annexPath)">
            {{ item.annexName }}
          </div>
        </el-form-item>
        <!-- 判断缴费是否通过 -->
        <el-form-item label="是否缴费通过：" v-if="flag == 0">
          <el-radio-group v-model="yesOrNo">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">驳回</el-radio>
          </el-radio-group>   
        </el-form-item>
        <!-- 缴费驳回原因-->
        <el-form-item label="驳回原因：" v-if="yesOrNo == 0" prop="reason" :rules="[{ required: true, message: '请输入驳回原因',trigger: 'blur',},]">
          <el-input type="textarea" :rows="2" placeholder="请输入驳回原因" v-model="form.reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm" v-if="flag == 0" class="endbutton">确认已缴费</el-button> -->
        <el-button type="primary" @click="submitForm" v-if="flag == 0" class="endbutton">确 认</el-button>
        <el-button @click="cancel" class="endbutton1">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { confirmPaid, resConfirmPaid } from '@/api/caseManagement/caseManagement.js'
export default {
  props: ["openDialog", "title", "flag", "detailform", "getList", "paymentConfirma", "queryParams",'isapplicant'],
  data() {
    return {
      form: {
        reason: '',//驳回原因
      },
      yesOrNo: 1,
      srcList: [],
    };
  },
  watch: {
    detailform: {
      handler(val) {
        if (val) {
          this.form = val;
        }
      },
    },
    openDialog: {
      handler(val) {
        if (val) {
          this.yesOrNo = 1
        }
      }
    }
  },
  methods: {
    preview(data) {
      window.open(
        window.location.origin + "/API" + data,
        "_blank"
      );
    },
    // 确认缴费
    submitForm() {
      let paramsVal = {
        caseId: this.paymentConfirma.id,
        batchNumber: "",
        caseFlowId: this.paymentConfirma.caseFlowId,
        yesOrNo: this.yesOrNo,
        reason: this.form.reason
      }
      this.$refs["form"].validate((valid) => {
      if (valid) {
      if (this.isapplicant) {
        confirmPaid(paramsVal).then((res) => {
          this.$message({
            message: "确认成功",
            type: "success",
          });
          this.cancel();
          this.$emit("getList", this.queryParams);
        })
        console.log('申请人');
      } else {
        // 被申请人 resConfirmPaid
        resConfirmPaid(paramsVal).then((res) => {
          this.$message({
            message: "确认成功",
            type: "success",
          });
          this.cancel();
          this.$emit("getList", this.queryParams);
        })
        console.log('被申请人');
      }
      }
      })
    },
    cancel() {
      this.$emit("cancelpaymentdetails");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 50%;
  background: #ffffff;
  border-radius: 20px;
}

.endbutton {
  width: 124px;
  height: 37px;
  background: #0072ff;
  border-radius: 19px;

  span {
    width: 32px;
    height: 15px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    // line-height: 48px;
  }
}

.endbutton1 {
  width: 124px;
  height: 37px;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 19px;

  span {
    width: 31px;
    height: 13px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #959595;
  }
}
</style>