webb2b/src/packages/pc/views/trade/buy/components/details/index.vue

<!-- 挂牌大厅-求购大厅-详情 -->
<template>
    <teleport :to="teleportTo">
        <app-view class="app-details" v-bind="$attrs">
            <template #header>
                <div>
                    <el-button @click="$emit('closed')">返回</el-button>
                </div>
            </template>
            <el-descriptions title="求购信息" :column="2">
                <el-descriptions-item label="委托单号">{{ selectedRow.wrtradeorderid }}</el-descriptions-item>
                <el-descriptions-item label="买方">{{ selectedRow.buyusername }}</el-descriptions-item>
                <el-descriptions-item label="钻石分类">{{ selectedRow.zscategorydisplay }}</el-descriptions-item>
                <el-descriptions-item label="货币类型">{{ selectedRow.zscurrencytypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="尺寸">{{ selectedRow.zssize }}</el-descriptions-item>
                <el-descriptions-item label="形状">{{ selectedRow.zsshapetypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="净度">{{ selectedRow.zsclaritytypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="对称度">{{ selectedRow.zssymmetrytypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="颜色">{{ selectedRow.zscolortypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="切工">{{ selectedRow.zscuttypedisplay }}</el-descriptions-item>
                <el-descriptions-item label="荧光">{{ selectedRow.zsfluorescencetypedisplay }}</el-descriptions-item>
            </el-descriptions>
            <div>
                <div>履约规则</div>
                <app-performance-rule :item="getPerformanceTemplateById(selectedRow.performancetemplateid)" />
            </div>
            <template v-for="(auth, index) in getAuthComponents()" :key="index">
                <component :is="componentMap.get(auth.code)" v-bind="{ selectedRow }" v-if="showComponent" />
            </template>
        </app-view>
    </teleport>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { useMenu } from '@/hooks/menu'
import { useLoginStore, usePerformanceStore } from '@/stores'
import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vue'

const props = defineProps({
    code: String,
    teleportTo: {
        type: String as PropType<'#appPageTeleport' | '#appMainTeleport'>,
        default: '#appPageTeleport'
    },
    selectedRow: {
        type: Object as PropType<Ermcp.BuyOrderRsp>,
        default: () => ({})
    }
})

const { getUserId } = useLoginStore()
const { componentMap, getAuthComponents } = useMenu(props.code)
const { getPerformanceTemplateById } = usePerformanceStore()

// 不能购买自己发布的求购
const showComponent = computed(() => {
    return props.selectedRow.userid !== getUserId()
})
</script>