front / ningxia-credit-web · Files

<template>
  <div>
    <el-dialog :title="props.title" v-model="state.openDialog" width="800px" append-to-body destroy-on-close @close="handleClose(false)">

      <el-form ref="orderFormRef" :model="state.formModel" :rules="formRules" label-position="left" label-width="120px">
        <template v-if="props.openName === 'changeQuotaOpen'">
          <!-- 增加-->
          <el-form-item label="预期授信额度" prop="creditLimit">
            <el-input v-model="state.formModel.creditLimit">
              <template #append>万元</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-tag type="primary">提示：建议授信额度：{{props.rowInfo.creditLimitLast || 0}}万元, 预期授信额度不能低于建议授信额度</el-tag>
          </el-form-item>
          <el-form-item label="调整说明" prop="info">
            <el-input type="textarea" :rows="4" v-model="state.formModel.info"></el-input>
          </el-form-item>
          <el-form-item label="增信证明" prop="annexArray">
            <el-upload
                class="upload-demo"
                drag
                style="width: 100%"
                :action="state.uploadUrl"
                :headers="state.headers"
                :before-upload="beforeUpload"
                :on-success="(info,file,fileList)=>uploadChange(info,file,fileList, 'annexArray', 'uploadFileList')"
                :on-error="uploadError"
                :on-remove="(file, fileList)=>handleRemove(file, fileList, 'annexArray', 'uploadFileList')"
                :file-list="state.uploadFileList"
            >
              <el-icon class="el-icon--upload"><UploadFilled/></el-icon>
              <div class="el-upload__text">
                点击或将文件（xls，xlsx）拖拽至此处上传
              </div>
            </el-upload>
            <el-input v-show="false" v-model="state.formModel.annexArray"></el-input>
          </el-form-item>

          <el-form-item>
            <el-tag type="primary">提示：申请提交后，联合征信将根据调整说明和增信证明材料对授信额度调增进行专业评估。</el-tag>
          </el-form-item>
        </template>
        <template v-else>
          <!-- 减少-->
          <el-form-item label="下调授信额度" prop="limitSub">
            <el-input v-model="state.formModel.limitSub">
              <template #append>万元</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-tag type="primary">提示：建议授信额度：{{props.rowInfo.creditLimitLast || 0}}万元, 下调授信额度不能高于建议授信额度</el-tag>
          </el-form-item>
        </template>
      </el-form>

      <template #footer v-if="props.isShowFooter">
        <span class="dialog-footer">
          <el-button @click="handleClose(false)">取消</el-button>
          <el-button type="primary" :loading="state.isSubmit" @click="handleSubmit">确定</el-button>
        </span>
      </template>

    </el-dialog>

  </div>
</template>

<script setup lang="ts">
  import { creditInfo } from './../../store/index'
  let creditInfoAct = creditInfo()
  import { storeToRefs } from 'pinia';
  let { getCreditId } = storeToRefs(creditInfoAct)
  import * as api from '../../interface/api.ts'
  import {getToken} from "../../utils/auth.ts";

  let orderFormRef = ref<FormInstance>()
  const emit = defineEmits(["handleClose"]);

  let props = defineProps({
    title: {
      default: "",
      type: String
    },
    open: {
      default: false,
      type: Boolean
    },
    openName: {
      type: String,
      required: true,
      default: ""
    },
    isShowFooter: {
      default: true,
      type: Boolean
    },
    rowInfo: {
      type: Object
    }
  })

  const validateNum = (rule: any, value: any, callback: any) => {
    let creditLimit = props.rowInfo.creditLimit || 10
    if (value === '') {
      callback(new Error('请输入下调授信额度'))
    } else if (value > creditLimit) {
      callback(new Error('下调授信额度不能高于建议授信额度'))
    } else {
      callback()
    }
  }

  const validateUpNum = (rule: any, value: any, callback: any) => {
    let creditLimit = props.rowInfo.creditLimit || 10
    if (value === '') {
      callback(new Error('请输入预期授信额度'))
    } else if (value <= creditLimit) {
      callback(new Error('预期授信额度不能低于建议授信额度'))
    } else {
      callback()
    }
  }

  let formRules = reactive<FormRules>({
    creditLimit: [
      { required: true, message: "预期授信额度不能为空", trigger: ["blur"] },
      { validator: validateUpNum,trigger: ["blur","change"] }
    ],
    info: [
      { required: true, message: "调整说明不能为空", trigger: ["blur"] }
    ],
    annexArray: [
      { required: true, message: "增信证明不能为空", trigger: ["blur", "change"] }
    ],
    limitSub: [
      { required: true, message: "下调授信额度不能为空", trigger: ["blur"] },
      { validator: validateNum,trigger: ["change"] }
    ]
  })

  let state = reactive({
    openDialog: false,
    formModel: {
      creditLimit: "",
      info: "",
      annexArray: "",
      limitSub: "",
    },
    isSubmit: false,
    uploadUrl: "/api/web/common/upload",
    headers: {
      authorization: getToken()
    },
    uploadFileList: []
  })


  let beforeUpload = (file: any, type: any) =>{
    const isLt2M = file.size / 1024 / 1024 < 50
    if(!isLt2M) {
      ElMessage.error("上传文件大小不能超过 50MB!");
      return false
    }
    if (file.size == 0) {
      ElMessage.error("不能上传空白文件!");
      return false
    }
  }

  let uploadChange = (info: any, file: any, fileList: [], formItem: any, formFileLit: any) => {
    if (info.code == 2000) {
      ElMessage.success("上传成功")
      state.formModel[formItem] = "true"
    } else {
      ElMessage.error("上传失败")
      state[formFileLit] = fileList.slice(1)
    }
    state[formFileLit] = fileList
  }
  let handleRemove = (file: any, fileList: [], formItem: any, formFileLit: any) => {
    state[formFileLit] = fileList
    if (fileList.length == 0) {
      state.formModel[formItem] = ""
    }
  }
  let uploadError  = () => {
    ElMessage.error("上传失败")
  }

  let handleClose = (isRefresh: boolean) => {
    emit('handleClose', props.openName, false, isRefresh)
  }

  let handleSubmit = () => {
    // handleClose(false)
    // state.isSubmit = false
    orderFormRef.value.validate((valid: boolean) => {
      if (valid) {
        state.isSubmit = true
        let cgId = localStorage.getItem('creditId')
        // let cgId = 78
        state.formModel.cgId = cgId

        let annexList:any = []
        state.uploadFileList.forEach(item=> {
          annexList.push({fileName: item.response.fileName, url: item.response.url})
        })

        state.formModel.annex = JSON.stringify(annexList)

        let url = props.openName === 'changeQuotaOpen' ? '/web/creditGrantingInfo/creditLimitAddApplication' : '/web/creditGrantingInfo/creditLimitSub'
        if (props.openName === 'changeQuotaOpen') {
          api.submitData(state.formModel, url).then((res: any)=> {
            ElMessage.success("操作成功")
            handleClose(true)
            state.isSubmit = false
          }).finally(()=> {
            state.isSubmit = false
          })
        } else {
          delete state.formModel.annexArray
          delete state.formModel.info
          delete state.formModel.creditLimit
          delete state.formModel.annex
          api.submitDataGet(state.formModel, url).then((res: any)=> {
            ElMessage.success("操作成功")
            handleClose(true)
            state.isSubmit = false
          }).finally(()=> {
            state.isSubmit = false
          })
        }
      }
    })
  }

  let reset = () => {
    state.formModel.creditLimit = ""
    state.formModel.info = ""
    state.formModel.annexArray = ""
    state.uploadFileList = []
    state.formModel.limitSub = ""
  }

  watchEffect(()=> {
    state.openDialog = props.open
    if (state.openDialog) {
      reset()
    }
  })
</script>

<style scoped>

</style>