FE_sandTable/src/views/product/bank/Info.vue

<template>
  <div class="info my-2">
    <h1 v-if="riskInfo" class="mb-3 text-xl font-semibold text-center">{{ info.productName }}产品手册</h1>
    <h6 class="step-name">{{ route.params.action !== 'config' ? '一、' : '' }}产品定义</h6>
    <p class="text">{{ info.productDefinition }}</p>
    <h6 class="step-name mt-5">{{ route.params.action !== 'config' ? '二、' : '' }}产品要素</h6>
    <p class="text">产品名称：{{ info.productName }}</p>
    <p class="text">贷款币种：人民币</p>
    <p v-if="info.loanPurpose" class="text">
      贷款用途：{{
        info.loanPurpose === '购房'
          ? '可用于住房按揭贷款、二手房住房按揭贷款。'
          : info.loanPurpose === '消费'
          ? '贷款用途可用于除购房之外的合法个人消费支出，不得用于投资经营，不得用于无指定用途的个人支出。'
          : info.loanPurpose === '经营' && !info.productType
          ? '可用于个人或其企业生产和经营活动中临时性、季节性等流动资金周转以及购置、安装或修理小型设备和装潢经营性场所所需的人民币贷款业务。'
          : info.loanPurpose === '创业'
          ? '用于创业或再创业过程中的资金需求。'
          : info.loanPurpose === '经营' && info.productType
          ? '用于短期生产经营周转的可循环的人民币信用贷款业务。'
          : info.otherPurposesOfLoan
      }}
    </p>
    <div v-if="info.guarantyStyle" class="flex my-2">
      <p class="text whitespace-nowrap">担保方式：</p>
      <p v-html="info.guarantyStyle" class="text"></p>
    </div>

    <p class="text">贷款期限：{{ info.minimumTermOfLoan }}月 - {{ info.maximumTermOfLoan }}月</p>
    <p class="text">贷款限额：{{ info.minimumLoan }}万元 - {{ info.loanCeiling }}万元</p>
    <p class="text">贷款利率：{{ info.minimumAprOnLoan }}% - {{ info.maximumAnnualInterestRate }}%</p>
    <p class="text">还款方式：{{ info.modeRepayment }}</p>

    <div v-if="info.prospectiveBorrowerText" class="flex my-2">
      <p class="text whitespace-nowrap">适用条件：</p>
      <div class="text" v-html="info.prospectiveBorrowerText"></div>
    </div>

    <template v-if="riskInfo">
      <h6 class="step-name mt-5">{{ route.params.action !== 'add' ? '三、' : '' }}材料要求</h6>
      <p v-if="riskInfo?.accountMaterials" class="text">办理账户-提供材料：{{ riskInfo?.accountMaterials }}</p>
      <p v-if="riskInfo?.sendingAccount" class="text">办理账户-发放账户：借记卡或放款专户</p>
      <p v-if="riskInfo?.loanApplicationMethod" class="text">贷款申请-申请方式：{{ riskInfo?.loanApplicationMethod }}</p>
      <p v-if="riskInfo?.borrowerMaterial" class="text">贷款申请-提供材料-借款人材料：{{ riskInfo?.borrowerMaterial }}</p>
      <template v-if="info.productType">
        <p v-if="riskInfo?.enterpriseMaterial" class="text">贷款申请-提供材料-企业材料：{{ riskInfo?.enterpriseMaterial }}</p>
        <p v-if="riskInfo?.collateral" class="text">贷款申请-提供材料-抵押物：{{ riskInfo?.collateral }}</p>
      </template>
      <template v-else>
        <p v-if="riskInfo?.mateMaterial" class="text">贷款申请-提供材料-配偶材料：{{ riskInfo?.mateMaterial }}</p>
        <p v-if="riskInfo?.businessMaterials" class="text">贷款申请-提供材料-经营类材料：{{ riskInfo?.businessMaterials }}</p>
      </template>
      <p v-if="riskInfo?.supplementaryMaterials" class="text">贷款申请-提供材料-补充材料：{{ riskInfo?.supplementaryMaterials }}</p>
      <p v-if="riskInfo?.runBatchObject" class="text">系统跑批准入风控策略-跑批对象：{{ riskInfo?.runBatchObject }}</p>

      <template v-if="info.bankRiskControlAllocationTacticsList && info.bankRiskControlAllocationTacticsList.length">
        <template v-for="(item, i) in info.bankRiskControlAllocationTacticsList">
          <p v-if="item.tacticsSelectedStatus" :key="i" class="text flex">
            系统跑批{{ item.pointName }}：{{ item.tacticsName || '无需跑批' }}

            <img v-if="item.tacticsName" src="@/assets/svgs/preview.svg" alt="" class="cursor-pointer ml-2" @click="preview(item, i)" />
          </p>
        </template>
      </template>

      <template v-if="info.creditScoringStrategyList && info.creditScoringStrategyList.length">
        <template v-for="(item, i) in info.creditScoringStrategyList">
          <p v-if="item.tacticsSelectedStatus" :key="i" class="text flex">
            系统跑批{{ item.pointName }}：{{ item.tacticsName || '无需跑批' }}

            <img v-if="item.tacticsName" src="@/assets/svgs/preview.svg" alt="" class="cursor-pointer ml-2" @click="previewCredits(item, i)" />
          </p>
        </template>
      </template>

      <p v-if="info?.personalRiskDegreeStrategySelectedStatus === 803 || info?.enterpriseRiskDegreeStrategySelectedStatus === 803" class="text">
        系统跑批风险度策略：
        {{ info?.personalRiskDegreeStrategySelectedStatus === 803 ? '个人风险度策略' : '' }}
        {{ info?.personalRiskDegreeStrategySelectedStatus === 803 && info?.enterpriseRiskDegreeStrategySelectedStatus === 803 ? '，' : '' }}
        {{ info?.enterpriseRiskDegreeStrategySelectedStatus === 803 ? '企业风险度策略' : '' }}
      </p>

      <template v-if="info.interestRatePricingModelList && info.interestRatePricingModelList.length">
        <template v-for="(item, i) in info.interestRatePricingModelList">
          <p v-if="item.tacticsSelectedStatus" :key="i" class="text flex">
            系统跑批{{ item.pointName }}：{{ item.tacticsName || '无需跑批' }}

            <img v-if="item.tacticsName" src="@/assets/svgs/preview.svg" alt="" class="cursor-pointer ml-2" @click="previewRate(item, i)" />
          </p>
        </template>
      </template>

      <p v-if="info?.enterpriseQuotaModelStr" class="text">系统跑批企业额度模型：{{ info?.enterpriseQuotaModelStr }}</p>

      <p v-if="riskInfo?.dueDiligenceMode" class="text">尽职调查-尽调方式：{{ riskInfo?.dueDiligenceMode }}</p>
      <p v-if="riskInfo?.dueDiligenceContent" class="text">尽职调查-尽调内容：{{ riskInfo?.dueDiligenceContent }}</p>
      <p v-if="riskInfo?.reviewContent" class="text">贷款审查-审查内容：{{ riskInfo?.reviewContent }}</p>
      <p v-if="riskInfo?.reviewSignature" class="text">贷款审查-审查签字：{{ riskInfo?.reviewSignature }}</p>
      <p v-if="riskInfo?.reviewApproveContent" class="text">贷款审批-审批内容：{{ riskInfo?.reviewApproveContent }}</p>
      <p v-if="riskInfo?.approvalSignature" class="text">贷款审批-审批签字：{{ riskInfo?.approvalSignature }}</p>
      <p v-if="riskInfo?.contractMaterials" class="text">签订合同-提供的材料：{{ riskInfo?.contractMaterials }}</p>
      <p v-if="riskInfo?.loanContract" class="text">需要签订借贷合同：{{ riskInfo?.loanContract }}</p>
      <p v-if="riskInfo?.mortgageContract" class="text">需要签订抵押合同：{{ riskInfo?.mortgageContract }}</p>
      <p v-if="riskInfo?.pledgeContract" class="text">需要签订质押合同：{{ riskInfo?.pledgeContract }}</p>
      <p v-if="riskInfo?.guaranteeContract" class="text">需要签订担保合同：{{ riskInfo?.guaranteeContract }}</p>

      <template v-if="info.postLoanSelectionStrategyList && info.postLoanSelectionStrategyList.length">
        <template v-for="(item, i) in info.postLoanSelectionStrategyList">
          <p v-if="item.tacticsSelectedStatus" :key="i" class="text flex">
            系统跑批{{ item.pointName }}：{{ item.tacticsName || '无需跑批' }}

            <img v-if="item.tacticsName" src="@/assets/svgs/preview.svg" alt="" class="cursor-pointer ml-2" @click="previewAfter(item, i)" />
          </p>
        </template>
      </template>

      <h6 class="step-name mt-5">{{ route.params.action !== 'add' ? '四、' : '' }}业务流程</h6>
      <p class="text">1、贷款人APP向智信银行公司业务部门提交借款申请，同时提交贷款用途证明文件以及有关资料；</p>
      <p class="text">2、智信银行对贷款人的贷款申请进行审查，同时根据实际情况要求借款人提供补充资料；</p>
      <p class="text">3、智信银行内部审批通过后，与贷款人签订借款合同；</p>
      <p class="text">4、贷款人落实有关提款前提条件，根据贷款合同提款。</p>

      <template v-if="route.params.action !== 'add'">
        <h6 class="step-name mt-5">五、注意要点</h6>
        <p class="text">
          贷款人在使用款额度时，必须明确说明贷款用途。贷款人必须在获得循环贷款额度后，方可在额度与用途范围内申请贷款，受理机构仅限在原经办行，同时逐笔上报中心核批。单笔贷款金额不得超过贷款人单笔消费（或投资）总金额的80%。
        </p>
      </template>
    </template>
  </div>

  <div v-if="approvals.length" class="mt-10">
    <div v-for="(item, i) in approvals" :key="i" class="audit">
      <div class="line">
        <span class="field">审批意见：</span>
        <span class="status">{{ getStatus(item?.status) }}</span>
      </div>
      <div class="line">
        <span class="field">意见描述：</span>
        {{ item.opinionDescription }}
      </div>
      <p class="mb-2 text-sm text-[#333] text-right">审查日期：{{ item.approvalTime }}</p>
      <p class="mb-2 text-sm text-[#333] text-right">审查员：{{ item.examinationApprovalOfficer }}</p>
    </div>
  </div>

  <el-drawer v-model="visible" :title="curPreviewTitle" size="100%" class="model-drawer">
    <component v-if="loadedComponents[activeComponent]" :is="loadedComponents[activeComponent]" v-model:row="curRow" disabled :key="curRow.strategyId" />
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed, watch, defineExpose, defineAsyncComponent, markRaw } from 'vue';
import { findById, approvalRecord } from '@/api/bank';
import { useRouter, useRoute } from 'vue-router';
import { getStatus } from '@/store/useProduct';
import { getUsername } from '@/utils/common';

const emit = defineEmits(['updateAudits']);
const route = useRoute();
const id = computed(() => +route.query.id);
const info = ref<Record<string, any>>({});
const riskInfo = ref<Record<string, any>>(null);
const approvals = ref<Record<string, any>[]>([]);
const userName = ref<string>();

const visible = ref<boolean>(false);
const curRow = ref<Record<string, any>>();
const curPreviewTitle = ref<string>();
const asyncComponents = {
  '150': defineAsyncComponent(() => import('../strategy/150/Detail.vue')),
  '151': defineAsyncComponent(() => import('../strategy/151/Detail.vue')),
  '152': defineAsyncComponent(() => import('../strategy/152/Detail.vue')),
  '153': defineAsyncComponent(() => import('../strategy/153/Detail.vue')),
  '154': defineAsyncComponent(() => import('../strategy/154/Detail.vue')),
  '155': defineAsyncComponent(() => import('../strategy/155/Detail.vue')),
  '156': defineAsyncComponent(() => import('../strategy/156/Detail.vue')),
  '512': defineAsyncComponent(() => import('../strategy/512/Detail.vue')),
  '513': defineAsyncComponent(() => import('../strategy/513/Detail.vue')),
  '772': defineAsyncComponent(() => import('../interestRate/772/Detail.vue')),
  '935': defineAsyncComponent(() => import('../interestRate/935/Detail.vue')),
  '936': defineAsyncComponent(() => import('../interestRate/936/Detail.vue')),
  '1029': defineAsyncComponent(() => import('../afterLoan/1029/Detail.vue')),
  '1030': defineAsyncComponent(() => import('../afterLoan/1030/Detail.vue')),
  '1031': defineAsyncComponent(() => import('../afterLoan/1031/Detail.vue')),
  '1032': defineAsyncComponent(() => import('../afterLoan/1032/Detail.vue')),
  '1033': defineAsyncComponent(() => import('../afterLoan/1033/Detail.vue')),
};
const loadedComponents = markRaw({});
const activeComponent = ref<string>('');

// 加载组件的方法
const loadComponent = async (componentName: string) => {
  if (!loadedComponents[componentName]) {
    try {
      loadedComponents[componentName] = asyncComponents[componentName];
      activeComponent.value = componentName;
    } catch (error) {
      console.error(`Failed to load component ${componentName}`, error);
    }
  } else {
    activeComponent.value = componentName;
  }
};

// 详情
const getDetail = async () => {
  userName.value = await getUsername();

  if (id.value) {
    try {
      const { data } = await findById(id.value);
      info.value = data;
      if (info.value.riskControlDetails) riskInfo.value = data.riskControlDetails;

      const res = await approvalRecord({
        id: id.value,
      });
      approvals.value = res.list;
      emit('updateAudits', res.list.length);
    } catch (e) {}
  }
};
watch(
  () => route.query,
  () => {
    route.path.startsWith('/product/bank') && getDetail();
  },
  {
    immediate: true,
  },
);

// 预览策略
const preview = async (row: Record<string, any>, i: number) => {
  curRow.value = {
    strategyId: row.tacticsId,
    strategyName: row.tacticsName,
  };
  await loadComponent(Object.keys(asyncComponents)[i]);
  curPreviewTitle.value = `查看${row.pointName}`;
  visible.value = true;
};
// 预览信用评分策略
const previewCredits = async (row: Record<string, any>, i: number) => {
  curRow.value = {
    id: row.tacticsId,
  };
  await loadComponent(i ? '513' : '512');
  curPreviewTitle.value = `查看${row.pointName}`;
  visible.value = true;
};
// 预览利率模型
const previewRate = async (row: Record<string, any>, i: number) => {
  curRow.value = {
    id: row.tacticsId,
    modelName: row.tacticsName,
  };
  await loadComponent(i === 2 ? '936' : i ? '772' : '935');
  curPreviewTitle.value = `查看${row.pointName}`;
  visible.value = true;
};
// 预览贷后管理
const previewAfter = async (row: Record<string, any>, i: number) => {
  curRow.value = {
    strategyId: row.tacticsId,
    strategyName: row.tacticsName,
  };
  await loadComponent(Object.keys(asyncComponents)[i + 12]);
  curPreviewTitle.value = `查看${row.pointName}`;
  visible.value = true;
};

defineExpose({
  info,
});
</script>

<style lang="scss" scoped>
.info {
  .step-name {
    @apply mb-3 text-sm font-semibold text-[#006bff];
  }
  .line {
    @apply flex mb-2;
  }
  .label {
    @apply mr-1 text-sm font-semibold text-[#333] leading-[32px];
  }
  .text {
    @apply text-sm text-[#333] leading-[32px];
  }
}
.audit {
  @apply py-5 px-4 mb-[30px] bg-[#f9fafc] rounded-[10px];
  .line {
    @apply mb-[18px] text-sm leading-[1.6];
  }
  .field {
    @apply text-sm font-semibold;
  }
}
</style>