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

<template>
    <teleport to="#appPageTeleport" v-if="details">
        <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>{{ details.buywrtradeorderid }}</span>
                        </li>
                        <li>
                            <span>买方</span>
                            <span>{{ details.buyusername }}</span>
                        </li>
                        <li>
                            <span>钻石分类</span>
                            <span>{{ details.zscategorydisplay }}</span>
                        </li>
                        <li>
                            <span>货币类型</span>
                            <span>{{ details.zscurrencytypedisplay }}</span>
                        </li>
                        <li>
                            <span>尺寸</span>
                            <span>{{ handleNoneValue(details.sizedisplay) }}</span>
                        </li>
                        <li>
                            <span>形状</span>
                            <span>{{ handleNoneValue(details.zsshapetypedisplay) }}</span>
                        </li>
                        <li>
                            <span>切工</span>
                            <span>{{ handleNoneValue(details.zscuttypedisplay) }}</span>
                        </li>
                        <li>
                            <span>颜色</span>
                            <span>{{ handleNoneValue(details.zscolortypedisplay) }}</span>
                        </li>
                        <li>
                            <span>抛光</span>
                            <span>{{ handleNoneValue(details.zspolishtypedisplay) }}</span>
                        </li>
                        <li>
                            <span>净度</span>
                            <span>{{ handleNoneValue(details.zsclaritytypedisplay) }}</span>
                        </li>
                        <li>
                            <span>对称</span>
                            <span>{{ handleNoneValue(details.zssymmetrytypedisplay) }}</span>
                        </li>
                        <li>
                            <span>荧光</span>
                            <span>{{ handleNoneValue(details.zsfluorescencetypedisplay) }}</span>
                        </li>
                        <li v-if="details.performancetemplateid">
                            <span>履约规则</span>
                            <app-performance-rule :item="getPerformanceTemplateById(details.performancetemplateid)" />
                        </li>
                        <li>
                            <span>备注</span>
                            <span>{{ handleNoneValue(details.applyremark) }}</span>
                        </li>
                    </ul>
                </el-card>
            </el-aside>
        </el-container>
    </teleport>
    <app-goods v-bind="{ selectedRow }" v-else />
</template>

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

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { handleNoneValue } from '@/filters'
import { performanceStore } from '@/stores'
import AppGoods from '@pc/views/warehousing/goods/components/details/index.vue'
import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vue'
import AppIcon from '@pc/components/base/icon/index.vue'

const props = defineProps({
    selectedRow: {
        type: Object as PropType<Ermcp.MyBargainApplyRsp | Ermcp.MyDelistingApplyRsp>,
        default: () => ({})
    },
})

const { getPerformanceTemplateById } = performanceStore.actions

const details = computed(() => {
    if ('buywrtradeorderid' in props.selectedRow) {
        return props.selectedRow
    }
    return undefined
})
</script>

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