FE_sandTable/src/views/product/strategy/Credit.vue

<template>
  <div id="wrap">
    <div class="flex items-center">
      <span class="mr-2 text-sm font-semibold text-[#333] whitespace-nowrap">评级卡名称</span>
      <el-input class="w-[220px]"
                maxlength="20"
                v-model="form.scoreCardName"></el-input>
      <span class="ml-10 mr-2 text-sm font-semibold text-[#333] whitespace-nowrap">评分对象</span>
      <div class="w-[220px] ">
        <el-select v-model="form.scoringObject">
          <el-option v-for="item in scoringObjects"
                     :key="item"
                     :label="item.name"
                     :value="item.id" />
        </el-select>
      </div>
    </div>
    <h6 class="mt-5 mb-3 text-sm text-[#006BFF] font-semibold">评分表</h6>
    <el-table v-if="form.scoringObject"
              class="c-table"
              :key="1"
              :data="list1"
              :span-method="span1"
              border>
      <el-table-column prop="name"
                       label="选用"
                       min-width="50">
        <template #default="{ row }">
          <div class="items-center">
            <el-checkbox class="mr-2"
                         v-model="row.isChoose"></el-checkbox>
            <span v-if="row.top">{{row.name}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sub"
                       label="维度"
                       min-width="110"></el-table-column>
      <el-table-column prop="remark"
                       label="计算公式"
                       min-width="150">
        <template #default="{ row }">
          <span v-if="isSelect(row.answerId1)">{{ row.remark }}</span>
          <el-select v-else
                     v-model="row.calculationFormula">
            <el-option v-for="item in row?.recordChildren[1]?.subject?.itemList"
                       :key="item"
                       :value="item.options" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="index"
                       label="指标"
                       min-width="60"
                       align="center">
        <template #default="{ row }">
          <span>{{ isSelect(row.answerId1) ? row.index : row?.recordChildren[2]?.recordChildren[0]?.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分值"
                       min-width="150"
                       align="center">
        <template #default="{ row }">
          <el-select v-if="isSelect(row.answerId1)"
                     v-model="row.score">
            <el-option v-for="item in row?.recordChildren[1]?.subject?.itemList"
                       :key="item"
                       :value="item.options" />
          </el-select>
          <div v-else
               :class="'flex items-center'">
            <span v-if="row.answerId2 === 643"
                  class="mr-2 whitespace-nowrap">全部为正常贷款满分，</span>
            <span class="whitespace-nowrap">
              {{ row.answerId2 === 627 ?
                '每少1倍扣' :
               (row.answerId1 === 590 || row.answerId1 === 591 || row.answerId1 === 592) ?
                    row?.recordChildren[2]?.recordChildren[0]?.recordChildren[0]?.name.replace('分','') :
                    row.answerId1 === 595 ?
                      '每降1%扣' :
                      '' }}
            </span>
            <div class="w-[100px] mx-2">
              <el-select v-model="row.score">
                <el-option v-for="item in row?.recordChildren[2]?.recordChildren[0]?.recordChildren[0]?.subject?.itemList"
                           :key="item"
                           :value="item.options" />
              </el-select>
            </div>
            <span>分</span>
            <span v-if="row.answerId2 !== 627"
                  class="mx-2 whitespace-nowrap">
              {{
                row.answerId2 === 607 || row.answerId2 === 609 ?
                  '，大于等于' :
                  row.answerId2 === 667 || row.answerId2 === 668 || row.answerId2 === 670 || row.answerId2 === 694 || row.answerId2 === 695 ?
                    '，负增长不计分' :
                    '，小于等于'
              }}
            </span>
            <template v-if="row.answerId2 !== 627 && row.answerId2 !== 667 && row.answerId2 !== 668 && row.answerId2 !== 670 && row.answerId2 !== 694 && row.answerId2 !== 695">
              <div class="w-[120px] mx-2">
                <el-select placeholder=""
                           v-model="row.percentage">
                  <el-option v-for="item in row?.recordChildren[2]?.recordChildren[0]?.recordChildren[1]?.subject?.itemList"
                             :key="item"
                             :value="item.options" />
                </el-select>
              </div>
              <span class="whitespace-nowrap">不计分</span>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-table v-else
              class="c-table"
              :key="2"
              :data="list"
              :span-method="span"
              border>
      <el-table-column prop="name"
                       label="选用"
                       min-width="150"
                       align="center">
        <template #default="{ row }">
          <el-checkbox v-model="row.isChoose"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="name"
                       label="维度"
                       min-width="150"
                       align="center"></el-table-column>
      <el-table-column prop="sub"
                       label="指标"
                       min-width="150"
                       align="center"></el-table-column>
      <el-table-column label="分值"
                       min-width="150"
                       align="center">
        <template #default="{ row }">
          <el-select v-model="row.score">
            <el-option v-for="item in row?.itemList"
                       :key="item"
                       :value="item.options" />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <p class="mt-4 mb-2 text-sm font-semibold text-[#333] whitespace-nowrap">描述</p>
    <el-input placeholder="请输入"
              maxlength="100"
              type="textarea"
              v-model="form.description"></el-input>
    <div class="flex justify-center">
      <div class="submit"
           @click="submit">完成配置</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue';
import { ElLoading, ElMessage } from 'element-plus';
import { saveCredit, findCredit } from '@/api/model';
import { getProcessInformationBasedOnRoles, addOperation } from '@/api/judgment';
import { useRouter, useRoute } from 'vue-router';
import type { TableColumnCtx } from 'element-plus';
import { handleId } from '@/utils/common';
import Cookies from 'js-cookie';

const emit = defineEmits(['getList']);

const router = useRouter();
const route = useRoute();
const id = computed(() => +route.query.creditId);
const projectId = +Cookies.get('sand-projectId');
const levelId = +Cookies.get('sand-level');
let loading: boolean = true;
const list = ref<Record<string, any>[]>([]);
const list1 = ref<Record<string, any>[]>([]);
const detail = ref<Record<string, any>>({});
const scoringObjects = ref<Array<any>>([
  {
    id: 0,
    name: '个人',
  },
  {
    id: 1,
    name: '企业',
  },
]);
const form = reactive({
  checkpointId: levelId,
  projectId,
  description: '',
  scoreCardName: '',
  scoringObject: 1,
  id: computed(() => route.query.creditId || ''),
});

// 配置项
const getConfig = async () => {
  const { process } = await getProcessInformationBasedOnRoles(148);
  // 个人
  const result = [];
  process[0]?.recordChildren.slice(3).forEach((e, j) => {
    e?.recordChildren.forEach((n, i) => {
      if (i) {
        const cur = !form.scoringObject && detail.value[j];
        result.push({
          answerId1: e.id,
          answerId2: n.id,
          subjectId: n.subjectId,
          id: cur ? cur?.dimensionIndexList[i - 1]?.id : '',
          dimensionId: cur ? cur?.dimensionId : '',
          strategyId: cur ? cur?.strategyId : '',
          name: e.name,
          sub: n.name,
          isChoose: cur ? !!cur?.isChoose : false,
          score: cur ? cur?.dimensionIndexList[i - 1]?.score + '' : '0',
          span: i === 1 ? 1 : 0,
          parent: i === 1 ? '' : j,
          itemList: n?.subject?.itemList || [],
        });
      }
    });
  });
  list.value = result;

  // 企业
  const result1 = [];
  process[1]?.recordChildren.slice(3).forEach((e, j) => {
    result1.push({
      id: e.id,
      name: e.name,
      isChoose: false,
      top: 1,
    });
    e?.recordChildren.forEach((n, i) => {
      if (i) {
        let temp = {
          answerId1: e.id,
          answerId2: n.id,
          subjectId: n.subjectId,
          id: '',
          dimensionId: '',
          strategyId: '',
          name: e.name,
          sub: n.name,
          index: n?.recordChildren[1]?.name,
          remark: n.remark,
          isChoose: false,
          score: '',
          span: i === 1 ? 1 : 0,
          middle: 1, // 第二层的标识
          parent: i === 1 ? '' : j,
          recordChildren: n?.recordChildren,
        };
        result1.push(temp);
        if (e.id === 589 || e.id === 594) {
          n?.recordChildren.forEach((m, o) => {
            if (o > 1) {
              temp = JSON.parse(JSON.stringify(temp));
              temp.index = m.name;
              delete temp.middle;
              result1.push(temp);
            }
          });
        }
      }
    });
  });
  list1.value = result1;
  console.log('🚀 ~ file: Credit.vue:202 ~ getConfig ~ result1:', result1);
  loading.close();
};
// 详情
const getDetail = async () => {
  loading = ElLoading.service();
  if (id.value) {
    try {
      const res = await findCredit(id.value);
      const info = res.scoringStrategy;
      if (info) {
        detail.value = info.dimensionOfTheRatingTableList;
        form.checkpointId = info.checkpointId;
        form.description = info.description;
        form.projectId = info.projectId;
        form.scoreCardName = info.scoreCardName;
        form.scoringObject = info.scoringObject;
      }
      getConfig();
    } finally {
    }
  } else {
    getConfig();
    detail.value = [];
    form.checkpointId = levelId;
    form.description = '';
    form.projectId = projectId;
    form.scoreCardName = '';
    form.scoringObject = 1;
  }
};
watch(
  () => route.query,
  () => {
    getDetail();
  },
  {
    immediate: true,
  },
);
const isSelect = (rule: number): boolean => {
  return rule === 589 || rule === 594;
};
interface SpanMethodProps {
  row: Record<string, any>;
  column: TableColumnCtx<Record<string, any>>;
  rowIndex: number;
  columnIndex: number;
}

const rowMerge1 = [1, 4, 7, 10, 40, 43, 46];
const rowMerge2 = [2, 3, 5, 6, 8, 9, 11, 12, 41, 42, 44, 45, 47, 48];
const rowMerge3 = [0, 13, 18, 26, 33, 39, 49];
// 表格合并
const span1 = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
  if (rowMerge3.includes(rowIndex)) {
    if (!columnIndex) {
      return {
        rowspan: 1,
        colspan: 5,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }

  if (!columnIndex || columnIndex === 1 || columnIndex === 2) {
    if (rowMerge1.includes(rowIndex)) {
      return {
        rowspan: 3,
        colspan: 1,
      };
    } else if (rowMerge2.includes(rowIndex)) {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
const span = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
  if (!columnIndex || columnIndex === 1) {
    if (!rowIndex || rowIndex === 31) {
      return {
        rowspan: 5,
        colspan: 1,
      };
    } else if (rowIndex === 5 || rowIndex === 11 || rowIndex === 39 || rowIndex === 53) {
      return {
        rowspan: 2,
        colspan: 1,
      };
    } else if (rowIndex === 7 || rowIndex === 13 || rowIndex === 17 || rowIndex === 27 || rowIndex === 41 || rowIndex === 45 || rowIndex === 49) {
      return {
        rowspan: 4,
        colspan: 1,
      };
    } else if (rowIndex === 21 || rowIndex === 24 || rowIndex === 36) {
      return {
        rowspan: 3,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
// 提交
const submit = async () => {
  if (!form.scoreCardName) return ElMessage.error('请输入评分卡名称');
  loading = ElLoading.service();
  const param = [];
  list.value.forEach((e) => {
    const child = {
      id: e.id,
      dimensionId: e.dimensionId,
      recordName: e.sub,
      score: e.score,
    };
    if (e.span) {
      param.push({
        dimensionId: e.dimensionId,
        strategyId: e.strategyId,
        recordName: e.name,
        isChoose: +e.isChoose,
        dimensionIndexList: [child],
      });
    } else {
      param[e.parent].dimensionIndexList.push(child);
    }
  });
  await saveCredit({
    ...form,
    dimensionOfTheRatingTableList: param,
  });
  // addRecord();

  ElMessage.success('提交成功！');
  emit('getList', 1);
  id.value && getDetail();
};
// 新增判分记录
const addRecord = async () => {
  const isEnterprise = form.scoringObject;
  const preIds = `1,${Cookies.get('sand-level')},42,148,${form.scoringObject ? 513 : 512}`; // 1，关卡id，角色（这个页面是风控经理），个人/企业（512/513）
  const lcRule: Array<Record<string, any>> = [handleId(514, 190, form.scoreCardName, preIds + ',514', 3), handleId(515, 191, form.scoringObject ? 392 : 391, preIds + ',515', 1)];
  form.description && lcRule.push(handleId(516, 192, '94,' + form.description, preIds + ',516', 3));

  // 企业
  if (isEnterprise) {
    list.value.forEach((e) => {
      // 选择了才需要给
      if (e.isChoose) {
        e.middle ? lcRule.push(handleId(518, '', '', `${preIds},${e.answerId1},${e.answerId2},518`, '')) : lcRule.push(handleId(518, '', '', `${preIds},${e.answerId1},518`, ''));
      }
      lcRule.push(handleId(e.answerId2, e.subjectId, e?.itemList?.find((n) => n.options == e.score)?.itemId || '', `${preIds},${e.answerId1},${e.answerId2}`, 1));
    });
  } else {
    // 个人
    list.value.forEach((e) => {
      e.span && e.isChoose && lcRule.push(handleId(518, '', '', preIds + ',' + e.answerId1 + ',518', ''));
      lcRule.push(handleId(e.answerId2, e.subjectId, e?.itemList?.find((n) => n.options == e.score)?.itemId || '', preIds + ',' + e.answerId1 + ',' + e.answerId2, 1));
    });
  }

  await addOperation({
    checkpointId: levelId,
    parentId: preIds,
    lcJudgmentRuleReq: lcRule,
    projectId,
  });
};
</script>

<style lang="scss" scoped>
@import url(../../../styles/form.scss);
</style>