ieplus-app/src/pagesOther/pages/test-center/list/components/holland-list-item.vue

<template>
    <view class="bg-white mx-card rounded-lg overflow-hidden">
        <view class="p-24 flex justify-between items-center">
            <view class="text-fore-title flex items-center gap-8">
                <text>{{ typeName }}</text>
                <text>-</text>
                <text class="text-orange-400">{{ item.ruleCode }}</text>
            </view>
            <uv-text type="tips" prefix-icon="clock" :text="reportDate" class="!justify-end"/>
        </view>
        <view class="mx-20 grid grid-cols-3 text-sm ie-grid-border">
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">现实型(R)</view>
                <view class="text-fore-title">{{ item.scorer }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">艺术型(A)</view>
                <view class="text-fore-title">{{ item.scorea }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">研究型(I)</view>
                <view class="text-fore-title">{{ item.scorei }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">社会型(S)</view>
                <view class="text-fore-title">{{ item.scores }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">企业型(E)</view>
                <view class="text-fore-title">{{ item.scoree }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">传统型(C)</view>
                <view class="text-fore-title">{{ item.scorec }}</view>
            </view>
        </view>
        <view class="py-20 flex justify-center">
            <ie-tag-button text="查看报告" icon="arrow-right" reverse @click="handleReport"/>
        </view>
    </view>
</template>

<script setup lang="ts">
import {useTransferPage} from "@/hooks/useTransferPage";
import {HollandRecord} from "@/types/test-center";
import {routes} from "@/common/routes";

const props = withDefaults(defineProps<{
    item: HollandRecord
}>(), {
    item: () => ({} as HollandRecord)
})

const {transferTo} = useTransferPage()

const map: Record<string, string> = {
    R: '现实型',
    A: '艺术型',
    I: '研究型',
    S: '社会型',
    E: '企业型',
    C: '传统型'
}

const typeName = computed(() => map[props.item.ruleCode ? props.item.ruleCode[0] : ''])
const reportDate = computed(() => getDateStr(props.item.createTime))

const getDateStr = (str: string) => {
    return str.substring(0, 10)
}

const handleReport = () => {
    transferTo(routes.pageHolland, {
        data: {code: props.item.code}
    })
}
</script>

<style scoped>

</style>