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

<!-- 挂牌大厅-求购大厅-详情 -->
<template>
    <teleport :to="teleportTo">
        <el-container class="trade-details">
            <el-aside>
                <el-card shadow="never">
                    <template #header>
                        <div class="card-header" @click="$emit('closed')">
                            <app-icon icon="ArrowLeftBold" />
                            <h4>求购信息</h4>
                        </div>
                    </template>
                    <ul>
                        <li>
                            <span>委托单号</span>
                            <span>{{ selectedRow.wrtradeorderid }}</span>
                        </li>
                        <li>
                            <span>买方</span>
                            <span>{{ selectedRow.buyusername }}</span>
                        </li>
                        <li>
                            <span>钻石分类</span>
                            <span>{{ selectedRow.zscategorydisplay }}</span>
                        </li>
                        <li>
                            <span>货币类型</span>
                            <span>{{ selectedRow.zscurrencytypedisplay }}</span>
                        </li>
                        <li>
                            <span>尺寸</span>
                            <span>{{ handleNoneValue(selectedRow.zssizedisplay) }}</span>
                        </li>
                        <li>
                            <span>形状</span>
                            <span>{{ handleNoneValue(selectedRow.zsshapetypedisplay) }}</span>
                        </li>
                        <li>
                            <span>切工</span>
                            <span>{{ handleNoneValue(selectedRow.zscuttypedisplay) }}</span>
                        </li>
                        <li>
                            <span>颜色</span>
                            <span>{{ handleNoneValue(selectedRow.zscolortypedisplay) }}</span>
                        </li>
                        <li>
                            <span>抛光</span>
                            <span>{{ handleNoneValue(selectedRow.zspolishtypedisplay) }}</span>
                        </li>
                        <li>
                            <span>净度</span>
                            <span>{{ handleNoneValue(selectedRow.zsclaritytypedisplay) }}</span>
                        </li>
                        <li>
                            <span>对称</span>
                            <span>{{ handleNoneValue(selectedRow.zssymmetrytypedisplay) }}</span>
                        </li>
                        <li>
                            <span>荧光</span>
                            <span>{{ handleNoneValue(selectedRow.zsfluorescencetypedisplay) }}</span>
                        </li>
                        <li v-if="selectedRow.performancetemplateid">
                            <span>履约规则</span>
                            <app-performance-rule :item="getPerformanceTemplateById(selectedRow.performancetemplateid)" />
                        </li>
                        <li>
                            <span>备注</span>
                            <span>{{ handleNoneValue(selectedRow.remark) }}</span>
                        </li>
                    </ul>
                </el-card>
            </el-aside>
            <el-main>
                <template v-for="(auth, index) in components" :key="index">
                    <component :is="componentMap.get(auth.code)" v-bind="{ selectedRow }" v-if="showComponent" />
                </template>
            </el-main>
        </el-container>
    </teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    inheritAttrs: false,
})
</script>

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

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

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

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

<style lang="less">
@import './index.less';
</style>