Arbitrate-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="120px">
        <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.applicantName"
            placeholder=""
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="缴费金额：" prop="feePayable">
          <el-input v-model="form.feePayable" :disabled="true" />
        </el-form-item>
        <!-- <el-form-item label="缴费截图：" prop="respondent">
          <el-input v-model="form.Respondent" placeholder="" />
        </el-form-item> -->
        <el-form-item label="案件状态：" prop="caseStatusName">
          <!-- <el-input v-model="form.caseStatusName" placeholder="" /> -->
          <el-tag>{{ form.caseStatusName }}</el-tag>
        </el-form-item>
        <el-form-item label="支付状态：" prop="paymentStatusName">
          <!-- <el-input v-model="form.paymentStatusName" placeholder="" /> -->
          <el-tag effect="dark" type="success">
            {{ form.paymentStatusName }}
          </el-tag>
        </el-form-item>
        <el-form-item label="缴费凭证：" prop="caseStatusName">
          <div
            style="color: #104fad; cursor: pointer"
            v-for="(item, index) in form.caseAttachList"
            :key="index"
            @click="preview(item.annexPath)"
          >
           <span v-if="item.annexType==8">{{ item.annexName }}</span> 
          </div>
          <!-- <el-tag>{{ form.caseStatusName }}</el-tag> -->
        </el-form-item>
        <!-- 判断缴费是否通过 -->
        <el-form-item label="是否缴费通过：" v-if="flag == 0">
          <el-radio-group v-model="agreeOrNotCheck">
            <el-radio :label="1">同意</el-radio>
            <el-radio :label="0">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 缴费驳回原因-->
        <el-form-item
          label="拒绝原因："
          v-if="agreeOrNotCheck == 0"
          prop="caseCheckReject"
          :rules="[
            { required: true, message: '请输入驳回原因', trigger: 'blur' },
          ]"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入驳回原因"
            v-model="form.caseCheckReject"
          ></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"
          :loading="loadingSubmit"
          >确认已缴费</el-button
        >
        <el-button @click="cancel" class="endbutton1">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { confirmPay } from "@/api/pay/pay";
export default {
  props: ["openDialog", "title", "flag", "detailform", "queryParams","getcaseApply"],
  data() {
    return {
      // key: value
      form: {},
      srcList: [],
      agreeOrNotCheck: 1,
      loadingSubmit: false,
    };
  },
  watch: {
    detailform: {
      handler(val) {
        if (val) {
          this.form = val;
          console.log(val)
        }
      },
    },
    openDialog: {
      handler(val) {
        if (val) {
          this.agreeOrNotCheck = 1;
        }
      },
    },
  },
  methods: {
    preview(data) {
      window.open(window.location.origin + "/API" + data, "_blank");
    },
    // 确认缴费
    submitForm() {
      let paramsVal = {
        ids:[this.form.id],
        agreeOrNotCheck:this.agreeOrNotCheck,
        caseCheckReject:this.form.caseCheckReject
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loadingSubmit = true;
          confirmPay(paramsVal).then((res) => {
            this.$message({
              message: "确认成功",
              type: "success",
            });
            this.loadingSubmit = false;
            if (res.code == 200) {
                this.getcaseApply(this.queryParams)
            //   this.getList();
            }
          }).catch((err) => {
              this.loadingSubmit = false;
            });
          this.cancel();
        }
      });
    },
    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>