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

<template>
  <div>
    <el-tabs v-model="curTab"
             @tab-click="tabChange">
      <el-tab-pane :label="id ? '产品要素' : '新增产品'"
                   name="tab1">
        <div v-if="info"
             class="audit">
          <div class="line">
            <span class="field">审批意见：</span>
            <span class="status">{{ getStatus(+info?.status) }}</span>
          </div>
          <div class="line">
            <span class="field">意见描述：</span>
            {{ info.opinionDescription }}
          </div>
          <p class="mb-2 text-sm text-[#333] text-right">审查日期：{{ info.approvalTime }}</p>
          <p class="mb-2 text-sm text-[#333] text-right">审查员：公瑾</p>
        </div>

        <el-form ref="formRef"
                 :model="form"
                 :rules="rules"
                 label-width="100px"
                 label-suffix="："
                 class="form"
                 status-icon>
          <el-form-item label="产品定义"
                        prop="productDefinition">
            <el-input type="textarea"
                      placeholder="用一段话简单介绍一下这个产品或者描述产品的设计理念。例如：本产品根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人可在额度金额内可循环周转使用贷款。"
                      maxlength="200"
                      v-model="form.productDefinition"></el-input>
          </el-form-item>
          <el-form-item label="产品名称"
                        prop="productName">
            <el-input placeholder="取个有吸引力的产品名，限20字。"
                      maxlength="20"
                      v-model="form.productName"></el-input>
          </el-form-item>
          <el-form-item label="产品币种"
                        prop="productCurrency">
            <el-select v-model="form.productCurrency"
                       placeholder="请选择">
              <el-option label="人民币"
                         :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="贷款对象"
                        required>
            <div class="flex-1">
              <!-- 企业 -->
              <template v-if="form.productType">
                <div class="flex items-center">
                  <span class="mr-3 text-[#333] text-sm">企业类型</span>
                  <el-select v-model="form.productObject"
                             placeholder="请选择">
                    <el-option v-for="(item, i) in config.find((e: any) => e.name === '企业产品-贷款对象')?.recordChildren[0]?.subject?.itemList"
                               :key="i"
                               :label="item.options"
                               :value="item.itemId" />
                  </el-select>
                </div>
                <div class="flex items-center mt-4">
                  <span class="mr-3 text-[#333] text-sm">借款人年龄</span>
                  <div class="num-inputs ml-7">
                    <el-input placeholder="最小年龄"
                              v-model.number="form.minimumAge"></el-input>
                    <span class="split">-</span>
                    <el-input placeholder="最大年龄"
                              v-model.number="form.maximumAge"></el-input>
                    <span class="unit">周岁</span>
                  </div>
                </div>
              </template>
              <!-- 个人 -->
              <template v-else>
                <p class="field-name">选择本产品的贷款对象。</p>
                <div class="flex items-center mb-2">
                  <el-checkbox class="mt-1"
                               v-model="form.age"
                               label="年龄" />
                  <div v-if="form.age"
                       class="num-inputs ml-7">
                    <el-input placeholder="最小年龄"
                              v-model.number="form.minimumAge"></el-input>
                    <span class="split">-</span>
                    <el-input placeholder="最大年龄"
                              v-model.number="form.maximumAge"></el-input>
                  </div>
                </div>
                <div class="flex items-center mb-2">
                  <el-checkbox v-model="form.edu"
                               label="学历要求"></el-checkbox>
                  <el-checkbox-group v-if="form.edu"
                                     class="mt-2 ml-5"
                                     v-model="form.educationalRequirements">
                    <el-checkbox v-for="(item, i) in config.find((e: any) => e.name === '个人产品-贷款对象')?.recordChildren[1]?.subject?.itemList"
                                 :key="i"
                                 :label="item.itemId">{{ item.options }}</el-checkbox>
                  </el-checkbox-group>
                </div>

                <div class="flex items-center mb-2">
                  <el-checkbox v-model="form.curWL"
                               label="工作年限"></el-checkbox>
                  <el-checkbox-group v-if="form.curWL"
                                     class="mt-2 ml-5"
                                     v-model="form.currentWorkingLife">
                    <el-checkbox v-for="(item, i) in config.find((e: any) => e.name === '个人产品-贷款对象')?.recordChildren[2]?.subject?.itemList"
                                 :key="i"
                                 :label="item.itemId">{{ item.options }}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <el-checkbox v-model="form.providentFundAndSocialSecurity"
                             label="公积金/社保"></el-checkbox>
              </template>
            </div>
          </el-form-item>
          <el-form-item label="贷款用途"
                        prop="loanPurpose"
                        :rules="[
              { required: true, message: '请选择贷款用途', trigger: 'change' },
              {
                asyncValidator: async (rule, value, callback) => {
                  if (value === 107 && !form.otherPurposesOfLoan) {
                    callback('请输入其他贷款用途')
                  } else {
                    callback()
                  }
                },
              },
            ]">
            <div class="flex-1">
              <p class="field-name">选择本产品贷款资金的用途。</p>
              <el-radio-group v-model="form.loanPurpose">
                <template v-if="form.productType">
                  <el-radio v-for="(item, i) in config.find((e: any) => e.name === '企业产品-贷款用途')?.subject?.itemList"
                            :key="i"
                            :label="item.itemId">{{ item.options }}</el-radio>
                </template>
                <template v-else>
                  <el-radio v-for="(item, i) in config.find((e: any) => e.name === '个人产品-贷款用途')?.recordChildren"
                            :key="i"
                            :label="item.id">{{ item.name }}</el-radio>
                </template>
              </el-radio-group>
              <el-input v-if="form?.loanPurpose === 107"
                        class="w-[300px] ml-5"
                        placeholder="请描述其他贷款用途可用于哪些方面。"
                        maxlength="10"
                        v-model="form.otherPurposesOfLoan"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="担保方式"
                        prop="bankGuaranteeTypeIds"
                        :rules="[
              { required: true, message: '请选择担保方式', trigger: 'change' },
              {
                asyncValidator: async (rule, value, callback) => {
                  if (value.includes(110) && !value.find((e: any) => e > 22 && e < 33)) {
                    callback('请选择抵押物')
                  } else if (value.includes(111) && !value.find((e: any) => e > 32 && e < 38)) {
                    callback('请选择质押贷')
                  } else {
                    callback()
                  }
                },
              },
            ]">
            <div class="flex-1">
              <p class="field-name">选择本产品的担保种类。</p>
              <div v-for="(item, i) in config.find((e: any) => e.name === '担保方式')?.recordChildren"
                   :key="i"
                   class="mb-2">
                <el-checkbox-group v-model="form.bankGuaranteeTypeIds">
                  <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
                  <el-checkbox v-show="(item.id === 110 && form.bankGuaranteeTypeIds.includes(110)) || (item.id === 111 && form.bankGuaranteeTypeIds.includes(111))"
                               v-for="(child, j) in item?.subject?.itemList"
                               :key="j"
                               :label="child.itemId">{{ child.options }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="贷款额度"
                        prop="minimumLoan"
                        :rules="[
              { required: true, message: '请输入贷款额度', trigger: 'blur' },
              {
                asyncValidator: async (rule, value, callback) => {
                  const max = form.loanCeiling
                  if (isNaN(value) || value < 0 || max === '' || isNaN(max) || max < 0 || value > max) {
                    callback('请输入合理的贷款额度')
                  } else {
                    callback()
                  }
                },
              },
            ]">
            <div class="flex-1">
              <div class="num-inputs">
                <el-input placeholder="最小额度"
                          v-model.number="form.minimumLoan"></el-input>
                <span class="split">-</span>
                <el-input placeholder="最高额度"
                          v-model.number="form.loanCeiling"></el-input>
                <span class="unit">万元</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="贷款利率"
                        prop="minimumAprOnLoan"
                        :rules="[
              { required: true, message: '请输入贷款利率', trigger: 'blur' },
              {
                asyncValidator: async (rule, value, callback) => {
                  const max = form.maximumAnnualInterestRate
                  if (isNaN(value) || value < 0 || max === '' || isNaN(max) || max < 0 || value > max) {
                    callback('请输入合理的贷款利率')
                  } else {
                    callback()
                  }
                },
              },
            ]">
            <div class="flex-1">
              <div class="num-inputs">
                <el-input placeholder="最小年利率"
                          min="0"
                          v-model.number="form.minimumAprOnLoan"></el-input>
                <span class="split">-</span>
                <el-input placeholder="最高年利率"
                          min="0"
                          v-model.number="form.maximumAnnualInterestRate"></el-input>
                <span class="unit">%</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="贷款期限"
                        prop="minimumTermOfLoan"
                        :rules="[
              { required: true, message: '请输入贷款期限', trigger: 'blur' },
              {
                asyncValidator: async (rule, value, callback) => {
                  const max = form.maximumTermOfLoan
                  if (isNaN(value) || value < 0 || max === '' || isNaN(max) || max < 0 || value > max) {
                    callback('请输入合理的贷款期限')
                  } else {
                    callback()
                  }
                },
              },
            ]">
            <div class="flex-1">
              <div class="num-inputs">
                <el-input placeholder="最小期限"
                          min="0"
                          v-model.number="form.minimumTermOfLoan"></el-input>
                <span class="split">-</span>
                <el-input placeholder="最大期限"
                          min="0"
                          v-model.number="form.maximumTermOfLoan"></el-input>
                <span class="unit">月</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="还款方式"
                        prop="modeRepayment">
            <div class="flex-1">
              <p class="field-name">选择本产品可以选择的还款方式。</p>
              <el-checkbox-group v-model="form.modeRepayment">
                <el-checkbox v-for="(item, i) in config.find((e: any) => e.name === '还款方式')?.subject?.itemList"
                             :key="i"
                             :label="item.itemId">{{ item.options }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="提前还款"
                        prop="whetherToSupportEarlyRepayment">
            <div class="flex-1 flex items-center">
              <el-switch v-model="form.whetherToSupportEarlyRepayment" />
              <p class="tips ml-4">本产品是否支持提前还款。</p>
            </div>
          </el-form-item>
          <div class="flex justify-end">
            <div class="submit"
                 @click="submit(formRef)">完成，提交风控经理</div>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="id"
                   label="产品风控"
                   name="tab2">
        <info />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';
import type { TabsPaneContext, FormInstance, FormRules } from 'element-plus';
import { findById, save, update } from '@/api/bank';
import { getProcessInformationBasedOnRoles, addOperation } from '@/api/judgment';
import { useRouter, useRoute } from 'vue-router';
import { handleId } from '@/utils/common';
import { getStatus } from '@/store/useProduct';
import Info from './Info.vue';
import Cookies from 'js-cookie';

const emit = defineEmits(['getList']);
interface RuleForm {
  productDefinition: string;
  productName: string;
  productCurrency: number;
  bankGuaranteeTypeIds: any[];
  currentWorkingLife?: any;
  educationalRequirements?: any;
  loanCeiling: any;
  loanPurpose: any;
  productObject: any;
  maximumAge: any;
  maximumAnnualInterestRate: any;
  maximumTermOfLoan: any;
  age: boolean;
  minimumAge: any;
  minimumAprOnLoan: any;
  minimumLoan: any;
  minimumTermOfLoan: any;
  modeRepayment?: any;
  otherPurposesOfLoan: string;
  productObject: any;
  productType: number;
  providentFundAndSocialSecurity: any;
  whetherToSupportEarlyRepayment?: any;
}

const router = useRouter();
const route = useRoute();
const id = computed(() => route.query.id);
const curTab = ref<string>('tab1');
const config = ref<any[]>([]);
const info = ref<Record<string, any>>(null);
const formRef = ref<FormInstance>();
const form = reactive<RuleForm>({
  productDefinition: '',
  productName: '',
  productCurrency: 1,
  bankGuaranteeTypeIds: [],
  currentWorkingLife: [],
  educationalRequirements: [],
  loanCeiling: '',
  loanPurpose: '',
  productObject: '',
  maximumAge: '',
  maximumAnnualInterestRate: '',
  maximumTermOfLoan: '',
  age: false,
  minimumAge: '',
  minimumAprOnLoan: '',
  minimumLoan: '',
  minimumTermOfLoan: '',
  modeRepayment: [],
  otherPurposesOfLoan: '',
  productObject: '',
  productType: computed(() => +route.query.type),
  providentFundAndSocialSecurity: false,
  whetherToSupportEarlyRepayment: false,
});
const rules = reactive<FormRules<RuleForm>>({
  productDefinition: [{ required: true, message: '请输入产品定义', trigger: 'blur' }],
  productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
  productCurrency: [{ required: true, message: '请选择产品币种', trigger: 'change' }],
  modeRepayment: [{ required: true, message: '请选择还款方式', trigger: 'change' }],
});

// tab切换回调
const tabChange = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
// 配置项
const getConfig = async () => {
  const { process } = await getProcessInformationBasedOnRoles(form.productType === 1 ? 45 : 44);
  config.value = process;
};
// 详情
const getDetail = async () => {
  if (id.value) {
    try {
      const { data } = await findById(id.value);
      info.value = data;
    } finally {
    }
  }
};
watch(
  () => route.query,
  () => {
    getDetail();
  },
  {
    immediate: true,
  },
);
// 提交
const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        const param = JSON.parse(JSON.stringify(form));

        // 企业
        if (param.productType) {
          if (!param.productObject) return ElMessage.error('请选择企业类型');
        }
        if ((!param.productType && param.age) || param.productType) {
          if (!param.minimumAge) return ElMessage.error('请输入最小年龄');
          if (!param.maximumAge) return ElMessage.error('请输入最大年龄');
          if (param.minimumAge < 0 || param.minimumAge > 999 || param.maximumAge < 0 || param.maximumAge > 999) return ElMessage.error('请输入合理的年龄');
          if (param.minimumAge > param.maximumAge) return ElMessage.error('最小年龄不得大于最大年龄');
        }

        // 个人
        if (!param.productType) {
          if (param.edu && !param.educationalRequirements.length) return ElMessage.error('请选择学历要求');
          if (param.curWL && !param.currentWorkingLife.length) return ElMessage.error('请选择工作年限');
          if (param.curWL && !param.currentWorkingLife.length) return ElMessage.error('请选择工作年限');
        }

        param.currentWorkingLife = param.currentWorkingLife.join();
        param.educationalRequirements = param.educationalRequirements.join();
        param.modeRepayment = param.modeRepayment.join();
        param.providentFundAndSocialSecurity = param.providentFundAndSocialSecurity ? 1 : '';
        param.whetherToSupportEarlyRepayment = param.whetherToSupportEarlyRepayment ? 58 : '';
        // 担保方式
        param.addBankProductsGuarantyStyleReqList = [];
        param.bankGuaranteeTypeIds.forEach((e: number) => {
          param.addBankProductsGuarantyStyleReqList.push({
            bankGuaranteeTypeId: (e > 22 && e < 33) || (e > 32 && e < 38) ? e : '',
            pid: e > 22 && e < 33 ? 110 : e > 32 && e < 38 ? 111 : e,
          });
        });
        if (id.value) {
          param.id = id.value;
          param.status = 295;
          await update(param);
          addRecord(param);
        } else {
          await save(param);
          addRecord(param);
        }
        ElMessage.success('提交成功！');
        emit('getList', 1);
      } finally {
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};
// 新增判分记录
const addRecord = async (data: Record<string, any>) => {
  const isEnterprise = data.productType === 1;
  const preIds = `1,${Cookies.get('sand-level')},41,${data.productType ? 45 : 44}`; // 1，关卡id，角色（这个页面是产品经理新增产品），个人/企业（44/45）
  const lcRule = <Record<string, any>[]>[
    handleId(48, 1, data.productDefinition, preIds + ',48', 3),
    handleId(49, 2, data.productName, preIds + ',49', 3),
    handleId(50, 3, 1, preIds + ',50', 1),
  ];

  // 贷款用途
  if (isEnterprise) {
    // 企业
    lcRule.push(
      handleId(62, 7, data.productObject, preIds + ',61,62', 1),
      handleId(63, 8, '[' + data.minimumAge + ',' + data.maximumAge + ']' + '', preIds + ',61,63', 5),
      handleId(65, 19, data.loanPurpose, preIds + ',65', 1),
    );
  } else {
    // 个人
    data.age && lcRule.push(handleId(100, 41, '[' + data.minimumAge + ',' + data.maximumAge + ']' + '', preIds + ',51,100', 5));
    data.edu && lcRule.push(handleId(101, 42, data.educationalRequirements, preIds + ',51,101', 1));
    data.curWL && lcRule.push(handleId(102, 43, data.currentWorkingLife, preIds + ',51,102', 1));
    data.providentFundAndSocialSecurity && lcRule.push(handleId(103, '', '', preIds + ',51,103', '')); // 公积金社保

    lcRule.push(
      data.loanPurpose === 107 ? handleId(107, 11, data.otherPurposesOfLoan, preIds + ',52,107', 3) : handleId(data.loanPurpose, '', '', preIds + ',52,' + data.loanPurpose, 1),
    );
  }

  // 担保方式
  data.bankGuaranteeTypeIds.includes(108) && lcRule.push(handleId(108, '', '', preIds + ',53,108', ''));
  data.bankGuaranteeTypeIds.includes(109) && lcRule.push(handleId(109, '', '', preIds + ',53,109', ''));
  data.bankGuaranteeTypeIds.includes(110) && lcRule.push(handleId(110, 13, data.bankGuaranteeTypeIds.filter((e: number) => e > 22 && e < 33).join(), preIds + ',53,110', 1));
  data.bankGuaranteeTypeIds.includes(111) && lcRule.push(handleId(111, 14, data.bankGuaranteeTypeIds.filter((e: number) => e > 32 && e < 38).join(), preIds + ',53,111', 1));

  lcRule.push(
    handleId(54, 15, '[' + data.minimumLoan + ',' + data.loanCeiling + ']', preIds + ',54', 5),
    handleId(55, 16, '[' + data.minimumAprOnLoan + ',' + data.maximumAnnualInterestRate + ']', preIds + ',55', 5),
    handleId(56, 17, '[' + data.minimumTermOfLoan + ',' + data.maximumTermOfLoan + ']', preIds + ',56', 5),
    handleId(57, 18, data.modeRepayment, preIds + ',57', 1),
  );

  data.whetherToSupportEarlyRepayment && lcRule.push(handleId(58, '', '', preIds + ',58', ''));

  await addOperation({
    parentId: preIds,
    lcJudgmentRuleReq: lcRule,
    projectId: 1,
  });
};
onMounted(() => {
  getConfig();
});
</script>

<style lang="scss" scoped>
@import url(../../../styles/form.scss);
.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>