dz-app/pages/test-center/list/components/holland-list-item.vue

<template>
    <view class="bg-white mx-card rounded-lg overflow-hidden">
        <view class="p-30 fx-row fx-bet-cen">
            <view class="text-main fx-row gap-8">
                {{ typeName }} -
                <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 mx-grid-border">
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">现实型(R)</view>
                <view class="text-main">{{ item.scorer }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">艺术型(A)</view>
                <view class="text-main">{{ item.scorea }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">研究型(I)</view>
                <view class="text-main">{{ item.scorei }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">社会型(S)</view>
                <view class="text-main">{{ item.scores }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">企业型(E)</view>
                <view class="text-main">{{ item.scoree }}</view>
            </view>
            <view class="fx-row fx-cen-cen py-20">
                <view class="text-content">传统型(C)</view>
                <view class="text-main">{{ item.scorec }}</view>
            </view>
        </view>
        <view class="py-20 fx-row justify-center">
            <mx-tag-button text="查看报告" icon="arrow-right" reverse @click="handleReport"/>
        </view>
    </view>
</template>

<script setup>
import _ from 'lodash'
import {computed} from 'vue'
import {createPropDefine} from "@/utils";
import {useTransfer} from "@/hooks/useTransfer";

const props = defineProps({
    item: createPropDefine({}, Object)
})

const {transferTo} = useTransfer()

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

const typeName = computed(() => map[_.first(props.item.ruleCode)] || '')
const reportDate = computed(() => getDateStr(props.item.createTime))

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

const handleReport = () => {
    transferTo('/pages/test-center/holland/holland', {code: props.item.code})
}
</script>

<style scoped>

</style>