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

<template>
  <div>
    <el-dialog
      title="确认调解书"
      v-if="confirmTionVisable"
      :visible="confirmTionVisable"
      @close="cancel"
      width="800px"
      append-to-body
      :destroy-on-close="true"
      center
    >
      <el-form ref="form" :model="formData" label-width="180px">
        <div class="caseInfo">案件信息：</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="案件编号：" prop="caseNum">
              <el-input v-model="formData.caseNum" placeholder="请输入案件编号" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人：" prop="affiliate.applicationOrganName">
              <el-input v-model="formData.affiliate.applicationOrganName" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被申请人：" prop="respondentName">
              <el-input v-model="formData.affiliate.respondentName" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="案件标的：" prop="caseSubjectAmount">
              <el-input
                v-model="formData.caseSubjectAmount"
                placeholder="请输入案件标的"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调解费用：" prop="feePayable">
              <el-input v-model="formData.feePayable" placeholder="请输入仲裁费用" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调解员：" prop="mediatorName">
              <el-input v-model="formData.mediatorName" placeholder="请输入" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="payupload">
          <span>上传修改后调解书</span>
          <div class="uploadBtn">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="UploadUrl()"
              :headers="headers"
              :data="filedata"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-change="beforeUpload"
              :on-success="handlSuccess"
              :file-list="fileList"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
              <div slot="tip" class="el-upload__tip">只能上传word文件</div>
            </el-upload>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="endbutton1">
          <span>取 消</span>
        </el-button>
        <el-button @click="submitMediator" class="endbutton1">
          <span>确 认</span>
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { casePay, confirmPayDig } from "@/api/pay/pay";
import { caseApplicationSelectById,confirmMediation } from "@/api/caseManagement/caseManagement.js";
import { getToken } from "@/utils/auth";
export default {
  props: ["confirmTionVisable", "queryParams", "confirmTionData"],
  data() {
    return {
      fileList: [],
      formData: {
        affiliate: {}
      },
      annexId:null,
      headers: {
        Authorization: "Bearer " + getToken()
      },
      filedata: {
        annexType: 7
      }
    };
  },
  methods: {
    /** 获取案件详情信息 */
    caseApplicationSelectByIdFn(data) {
      caseApplicationSelectById(data).then(res => {
        this.formData = res.data;
      });
    },
    UploadUrl() {
      return window.location.origin + "/API/common/upload";
    },
    beforeUpload(flie, fileList) {
      this.fileList = fileList;
    },
    // 文件上传成功
    handlSuccess(res, file) {
      this.annexId = res.annexId;
    },
    submitMediator() {
      confirmMediation({
        caseAppliId: this.confirmTionData.id,
        caseFlowId: this.confirmTionData.caseFlowId,
        annexId: this.annexId
      }).then(res => {
        this.$modal.msgSuccess("成功");
        this.cancel();
        this.$emit("getList", this.queryParams);
      });
    },
    handleRemove(file, fileList) {},
    handlePreview(file) {},
    cancel() {
      this.$emit("cancelConfirmTion");
    }
  },
  watch: {
    confirmTionVisable(val) {
      if (val) {
        this.annexId = '';
        this.caseApplicationSelectByIdFn({
          id: this.confirmTionData.id
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.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;
  }
}

.paySelectType {
  margin-top: 20px;
  margin-bottom: 20px;
}

.payupload {
  display: flex;

  .uploadBtn {
    margin-left: 20px;
  }
}

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

.payTitle {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}

::v-deep .el-dialog {
  width: 800px;
  background: #ffffff;
  border-radius: 20px;
}

.endbutton {
  width: 154px;
  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>