front / ningxia-credit-web · Files

<template>
  <div class="body_wrap">
    <div class="w80">
      <div class="common_con mb20">
        <el-row :gutter="40">
          <el-col :span="2" style="position: relative">
            <div class="col_title title_color_0" v-if="state.enterpriseInfo.name">
              <div>{{state.enterpriseInfo.name.substring(0, 2)}}</div>
              <div>{{state.enterpriseInfo.name.substring(2, 4)}}</div>
            </div>
          </el-col>
          <el-col :span="21">
            <!--企业信息模块-->
            <el-descriptions :column="4">
              <template v-for="col in state.columnsList">
                <el-descriptions-item v-if="col.prop != 'regStatus'" :label="col.label">
                  <template v-if="col.prop.indexOf(',') > -1">
                    {{state.enterpriseInfo[col.prop.split(',')[0]] + '至' + state.enterpriseInfo[col.prop.split(',')[1]]}}
                  </template>
                  <template v-else-if="col.type && col.type === 'date'">
                    {{DateUtil.formatDate(state.enterpriseInfo[col.prop])}}
                  </template>
                  <template v-else>
                    {{contentFormat(state.enterpriseInfo[col.prop])}}
                  </template>
                </el-descriptions-item>
              </template>
              <template #title>
                <div class="mb10">
                  {{state.enterpriseInfo.name}}
                  <el-tag class="ml20" type="success">{{state.enterpriseInfo.status}}</el-tag>
                </div>
                <!--        <div>
                          <el-tag class="mr10" type="info" v-for="tag in state.enterpriseInfo.tags" size="small">{{tag}}</el-tag>
                        </div>-->
              </template>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="w80">
      <div style="display: flex" class="mb10">
        <el-icon class="mr10" size="24px"><Bell /></el-icon>
        <span>请补充填写部分授信参数</span>
      </div>
      <div class="common_con mb20">
        <el-form ref="queryFormRef" :model="state.queryParams" :rules="queryRules" label-position="right" label-width="160px">
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="授信生效日期" prop="effectiveDate">
                <el-date-picker style="width: 100%"
                                v-model="state.queryParams.effectiveDate"
                                type="date"
                                value-format="YYYY-MM-DD HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="授信截止日期" prop="deadline">
                <el-date-picker style="width: 100%"
                                v-model="state.queryParams.deadline"
                                type="date"
                                value-format="YYYY-MM-DD HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业类型" prop="companyType">
                <el-select v-model="state.queryParams.companyType">
                  <el-option v-for="item in ['生产型企业', '贸易性企业']" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业性质" prop="companyNature">
                <el-select v-model="state.queryParams.companyNature">
                  <el-option v-for="item in ['中央企业', '省国有企业', '市国有企业', '上市企业', '民营企业', '其他']" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="财务数据（单位：万元）">
                <el-row :gutter="10" class="mb10">
                  <el-col :span="1.5">
                    <el-button type="primary" icon="Plus" size="small" v-debounceClick="()=>handleGetFinancialData()">调取财务数据</el-button>
                  </el-col>
                  <el-col :span="1.5">
                    <el-button type="primary" icon="Plus" size="small" v-debounceClick="()=>handleAdd('financialOpen', '新增财务数据信息', {})">新增财务数据</el-button>
                  </el-col>
                </el-row>
                <el-table :data="state.queryParams.financeInfoList" width="100%" border class="own_table" :row-class-name="tableRowClassName">
                  <el-table-column v-for="item in state.financialData" :label="item.label" :prop="item.prop"></el-table-column>
                  <el-table-column label="操作" width="160px">
                    <template #default="scope">
                      <el-button type="primary" size="small" @click="handleAdd('financialOpen', '修改财务数据信息', scope.row)">修改</el-button>
                      <el-button type="primary" size="small" plain @click="handleDelete(scope.row, 'financeInfoList')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="抵押物信息">
                <el-row :gutter="10" class="mb10">
                  <el-col :span="1.5">
                    <el-button type="primary" icon="Plus" size="small" v-debounceClick="()=>handleAdd('mortgageOpen', '新增抵押物信息', {})">新增抵押物</el-button>
                  </el-col>
                </el-row>
                <el-table :data="state.queryParams.collateralList" width="100%" border class="own_table" :row-class-name="tableRowClassName">
                  <el-table-column v-for="item in state.mortgageData" :label="item.label" :prop="item.prop"></el-table-column>
                  <el-table-column label="操作" width="160px">
                    <template #default="scope">
                      <el-button type="primary" size="small" @click="handleAdd('mortgageOpen', '修改抵押物信息', scope.row)">修改</el-button>
                      <el-button type="primary" size="small" plain @click="handleDelete(scope.row, 'collateralList')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="担保信息">
                <el-row :gutter="10" class="mb10">
                  <el-col :span="1.5">
                    <el-button type="primary" icon="Plus" size="small" v-debounceClick="()=>handleAdd('guaranteeOpen', '新增担保信息', {})">新增担保</el-button>
                  </el-col>
                </el-row>
                <el-table :data="state.queryParams.guaranteeContract" width="100%" border class="own_table" :row-class-name="tableRowClassName">
                  <el-table-column v-for="item in state.guaranteeData" :label="item.label" :prop="item.prop"></el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button type="primary" size="small" @click="handleAdd('guaranteeOpen', '修改担保信息', scope.row)">修改</el-button>
                      <el-button type="primary" size="small" plain>删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="历史交易统计数据">
                <el-row :gutter="10" class="mb10">
                  <el-col :span="1.5">
                    <el-button type="primary" icon="Download" size="small" v-debounceClick="()=>handleDownload()">下载EXCEL模版</el-button>
                  </el-col>
                </el-row>
                <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, 'historicalTransactionsAnnex', 'uploadFileList')"
                    :on-error="uploadError"
                    :on-remove="(file, fileList)=>handleRemove(file, fileList, 'historicalTransactionsAnnex', 'uploadFileList')"
                    :file-list="state.uploadFileList"
                >
                  <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
                  <div class="el-upload__text">
                    点击或将文件（xls，xlsx）拖拽至此处上传
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      上传交易数据，额度测算精准匹配业务需求
                    </div>
                  </template>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <div class="w80">
      <div style="margin: 50px 0 80px; text-align: center">
        <el-button size="large" @click="handleCancel(false)">取消</el-button>
        <el-button type="primary" size="large" :loading="state.isSubmit" @click="handleSubmit">授信测算</el-button>
      </div>
    </div>
  </div>

  <add-credit-info :title="state.title" :open="state[state.creditOpen]" :open-name="state.creditOpen" @handleClose="handleClose" :rowInfo="state.rowInfo" @handleAddInfo="handleAddInfo"></add-credit-info>
</template>

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

  let state = reactive({
    searchName: "",
    enterpriseInfo: {},
    columnsList: [{
      label: "法定代表人",
      prop: "operName"
    }, {
      label: "注册资本",
      prop: "registCapiNew"
    }, {
      label: "成立日期",
      prop: "startDate",
    }, {
      label: "注册地址",
      prop: "address"
    }],
    queryParams: {},
    financialData: [
      {
        label: '年份',
        prop: 'year'
      }, {
        label: '资产总计',
        prop: 'totAssets'
      }, {
        label: '负债总计',
        prop: 'totLiab'
      }, {
        label: '所有者权益总计',
        prop: 'totalEquity'
      }, {
        label: '营业总收入',
        prop: 'operRev'
      }, {
        label: '利润总额',
        prop: 'totProfit'
      }, {
        label: '净利润',
        prop: 'netProfit'
      },
    ],
    mortgageData: [
      {
        label: '抵押物名称',
        prop: 'name'
      }, {
        label: '类型',
        prop: 'type'
      }, {
        label: '账目价格（万元）',
        prop: 'price'
      }, {
        label: '评估价值（万元）',
        prop: 'assessValue'
      }, {
        label: '折扣率',
        prop: 'discountRate'
      }, {
        label: '抵押物价值（万元）',
        prop: 'collateraValue'
      },
    ],
    guaranteeData: [
      {
        label: '担保合同名称',
        prop: 'name'
      }, {
        label: '担保人名称',
        prop: 'peopleName'
      }, {
        label: '担保金额（万元）',
        prop: 'matters'
      }, {
        label: '担保责任',
        prop: 'responsibility'
      }, {
        label: '担保期限',
        prop: 'term'
      }, {
        label: '担保事项',
        prop: 'matters'
      },
    ],
    rowInfo: {},
    isSubmit: false,
    title: '',
    creditOpen: "",
    financialOpen: false,
    mortgageOpen: false,
    guaranteeOpen: false,
    uploadUrl: "/api/web/common/upload",
    headers: {
      authorization: getToken()
    },
    uploadFileList: []
  })

  let queryRules = reactive<FormRules>({
    effectiveDate: [
      { required: true, message: "授信生效日期不能为空", trigger: ["blur"] }
    ],
    deadline: [
      { required: true, message: "授信截止日期不能为空", trigger: ["blur"] }
    ],
    companyType: [
      { required: true, message: "企业类型不能为空", trigger: ["blur"] }
    ],
    companyNature: [
      { required: true, message: "企业性质不能为空", trigger: ["blur"] }
    ]
  })

  let contentFormat = (content: any) => {
    if (content === undefined) {
      return "--"
    } else if (typeof content === 'string' && content.indexOf("[{") > -1) {
      let json = JSON.parse(content)
      let temp: any = []
      json.forEach((item: object) => {
        temp.push(JSON.stringify(item))
      })
      return temp.join(",")
    }
    return content
  }

  let getBaseInfo = () => {
    api.getBaseInfo({name: state.searchName}).then((res: any)=> {
      if (res) {
        state.enterpriseInfo = Object.assign( {}, res.data)
      }
    })
  }

  const route = useRoute();

  let handleGetFinancialData = () => {
    api.getInfoList({ename: state.enterpriseInfo.name, orgCode: state.enterpriseInfo.taxNumber}, "/web/financeInfo/getReportSysData").then((res: any)=> {
      state.queryParams.financeInfoList = res.data
    })
  }

  let handleAdd = (name: string, title: string, row: object) => {
    state.creditOpen = name
    state[name] = true
    state.title = title
    state.rowInfo = row
  }

  let handleDelete = (row: object, list: string) => {
    state.queryParams[list].forEach((item, index)=> {
      if (list === 'financeInfoList') {
        if (row.year == item.year) {
          state.queryParams[list].splice(index , 1)
        }
      } else {
        if (row.name == item.name) {
          state.queryParams[list].splice(index , 1)
        }
      }
    })
  }

  let handleCancel = () => {
    router.go(-1)
  }

  let tableRowClassName = ({ row, rowIndex }) =>{
    row.index = rowIndex;
  }

  let handleClose = (name: string, value: boolean, isRefresh: boolean) => {
    state[name] = value
  }

  let handleAddInfo = (row: object, name: string, matchIndex: number) => {
    let keyName = ""
    if (name === 'financialOpen') {
      keyName = "financeInfoList"
    } else if (name === 'mortgageOpen') {
      keyName = "collateralList"
    } else if (name === 'guaranteeOpen') {
      keyName = "guaranteeContract"
    }
    if (state.queryParams[keyName] == null) {
      state.queryParams[keyName] = []
    }

    if (matchIndex != -1) {
      Object.assign(state.queryParams[keyName][matchIndex], row)
    } else {
      state.queryParams[keyName].push(row)
    }
  }

  let handleDownload = () => {
    window.open("https://hyoss.lhdna.com/files/27749ab6458c417193176f9c04a97df6_1718958776386.xlsx")
  }

  let queryFormRef = ref<FormInstance>()

  let handleSubmit = () => {
    queryFormRef.value.validate((valid: boolean) => {
      if (valid) {
        state.isSubmit = true
        let submitFrom = JSON.parse(JSON.stringify(state.queryParams))
        submitFrom.collateralList = JSON.stringify(submitFrom.collateralList)
        submitFrom.guaranteeContract = JSON.stringify(submitFrom.guaranteeContract)
        api.submitData(submitFrom, '/web/creditGrantingInfo/add').then((res: any)=> {
          ElMessage.success("操作成功")
          creditInfoAct.setCreditId(res.data)
          localStorage.setItem('creditId', res.data)
          router.push("/creditResult?name=" + state.searchName)
        }).finally(()=> {
          state.isSubmit = false
        })
      }
    })
  }

  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: any, formItem: any, formFileLit: any) => {
    if (info.code == 2000) {
      ElMessage.success("上传成功")
      state[formFileLit] = fileList.slice(-1)
      let tempJson = {fileName: info.data.fileName, url: info.data.url}
      state.queryParams[formItem] = JSON.stringify(tempJson)
    } else {
      ElMessage.error("上传失败")
      state[formFileLit] = fileList.slice(1)
    }
  }
  let handleRemove = (file: any, fileList: any, formItem: any, formFileLit: any) => {
    if (fileList.length == 0) {
      state.queryParams[formItem] = ""
    }
  }
  let uploadError  = () => {
    ElMessage.error("上传失败")
  }
  let getBasicInit = () => {
    api.getInfoList({name: state.searchName}, '/web/creditGrantingInfo/getBasic').then((res: any)=> {
      state.queryParams = res.data
    })
  }

  onMounted(()=> {
    state.searchName = route.query.name
    getBaseInfo()
    getBasicInit()
  })

</script>

<style scoped>
.col_title {
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  font-size: 22px;
  padding: 5px;
  position: absolute;
  right: 0;
  div {
    letter-spacing: 10px;
    padding-left: 10px;
  }
  &.title_color_0, &.title_color_5 {
    background-color: #93BBF2;
  }
  &.title_color_1, &.title_color_6 {
    background-color: #93DDF2;
  }
  &.title_color_2, &.title_color_7 {
    background-color: #B693F2;
  }
  &.title_color_3, &.title_color_8 {
    background-color: #F6AEAE;
  }
  &.title_color_4, &.title_color_9 {
    background-color: #EEC5AB;
  }
}

</style>