|
|
@@ -0,0 +1,144 @@
|
|
|
+<!-- 集采交易-预售大厅-详情 -->
|
|
|
+<template>
|
|
|
+ <app-drawer title="详情" :width="800" v-model:show="show" :loading="loading" :refresh="refresh">
|
|
|
+ <app-table-details title="集采信息" :label-width="140" :data="selectedRow" :cell-props="details1" :column="2">
|
|
|
+ <!-- 采购保证金比例 -->
|
|
|
+ <template #buymarginvalue="{ value }">
|
|
|
+ {{ parsePercent(value) }}
|
|
|
+ </template>
|
|
|
+ <!-- 状态 -->
|
|
|
+ <template #presalestatus="{ value }">
|
|
|
+ {{ getWRPresaleStatusName(value) }}
|
|
|
+ </template>
|
|
|
+ <!-- 履约方式 -->
|
|
|
+ <template #performancetemplateid="{ value }">
|
|
|
+ <app-performance-rule :item="getPerformanceTemplateById(value)" />
|
|
|
+ </template>
|
|
|
+ <!-- 集采价格 -->
|
|
|
+ <template #price>
|
|
|
+ <app-table :data="priceList" :columns="priceColumns" :show-toolbar="false" border />
|
|
|
+ </template>
|
|
|
+ </app-table-details>
|
|
|
+ <app-table-details title="钻石参考信息" :label-width="140" :data="selectedRow" :cell-props="details2" :column="2">
|
|
|
+ <!-- 生产方式 -->
|
|
|
+ <template #ysproductionmode="{ value }">
|
|
|
+ {{ getYSProductionModeName(value) }}
|
|
|
+ </template>
|
|
|
+ <!-- 图片 -->
|
|
|
+ <template #pictureurls>
|
|
|
+ <template v-for="(url, index) in imageUrl" :key="index">
|
|
|
+ <el-image :src="url" :preview-src-list="imageUrl" fit="cover" />
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </app-table-details>
|
|
|
+ <template #footer v-if="selectedRow.presalestatus !== 1">
|
|
|
+ <el-button @click="onCancel(false)" plain>取消</el-button>
|
|
|
+ <el-button type="primary" @click="showBuy = true">认购</el-button>
|
|
|
+ </template>
|
|
|
+ <component :is="Buy" v-bind="{ selectedRow }" @closed="onBuyClosed" v-if="showBuy" />
|
|
|
+ </app-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { shallowRef, reactive, PropType, onMounted, defineAsyncComponent } from 'vue'
|
|
|
+import { getFileUrl, parsePercent } from '@/filters'
|
|
|
+import { getWRPresaleStatusName, getYSProductionModeName } from '@/constants/presale'
|
|
|
+import { useRequest } from '@/hooks/request'
|
|
|
+import { queryPresaleorderapplyprice } from '@/services/api/presale'
|
|
|
+import { performanceStore } from '@/stores'
|
|
|
+import AppDrawer from '@pc/components/base/drawer/index.vue'
|
|
|
+import AppTable from '@pc/components/base/table/index.vue'
|
|
|
+import AppTableDetails from '@pc/components/base/table-details/index.vue'
|
|
|
+import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vue'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ selectedRow: {
|
|
|
+ type: Object as PropType<Ermcp.GZPreSellRsp>,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+// 认购
|
|
|
+const Buy = defineAsyncComponent(() => import('../buy/index.vue'))
|
|
|
+
|
|
|
+const { getPerformanceTemplateById } = performanceStore.actions
|
|
|
+const show = shallowRef(true)
|
|
|
+const showBuy = shallowRef(false)
|
|
|
+const refresh = shallowRef(false)
|
|
|
+const loading = shallowRef(false)
|
|
|
+const imageUrl = reactive<string[]>([])
|
|
|
+
|
|
|
+const { dataList: priceList } = useRequest(queryPresaleorderapplyprice, {
|
|
|
+ params: {
|
|
|
+ applyid: props.selectedRow.presaleapplyid
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const details1 = [
|
|
|
+ { prop: 'wrstandardname', label: '商品名称:' },
|
|
|
+ { prop: 'customername', label: '卖方:' },
|
|
|
+ { prop: 'presaleqty', label: '集采总量:' },
|
|
|
+ { prop: 'yszscategory', label: '钻石类型:' },
|
|
|
+ { prop: 'minbuyqty', label: '最小采购单位:' },
|
|
|
+ { prop: 'minsuccessqty', label: '最低成团量:' },
|
|
|
+ { prop: 'maxbuyqty', label: '最大采购单位:' },
|
|
|
+ { prop: 'buymarginvalue', label: '采购保证金比例:' },
|
|
|
+ { prop: 'startdate', label: '开始日期:' },
|
|
|
+ { prop: 'enddate', label: '结束日期:' },
|
|
|
+ { prop: 'presalestatus', label: '状态:' },
|
|
|
+ { prop: 'tradeqty', label: '已采购数量:' },
|
|
|
+ { prop: 'performancetemplateid', label: '履约方式:', entireRow: true },
|
|
|
+ { prop: 'price', label: '集采价格:', entireRow: true },
|
|
|
+]
|
|
|
+
|
|
|
+const details2 = [
|
|
|
+ { prop: 'zscolortypestr', label: '颜色:' },
|
|
|
+ { prop: 'sizestr', label: '尺寸:' },
|
|
|
+ { prop: 'zsclaritytypestr', label: '净度:' },
|
|
|
+ { prop: 'yieldrate', label: '成品率:' },
|
|
|
+ { prop: 'qtydesc', label: '数量描述:' },
|
|
|
+ { prop: 'weightdesc', label: '重量描述:' },
|
|
|
+ { prop: 'ysproductionmode', label: '生产方式:' },
|
|
|
+ { prop: 'pictureurls', label: '图片:', entireRow: true },
|
|
|
+ { prop: 'remark', label: '备注:', entireRow: true },
|
|
|
+]
|
|
|
+
|
|
|
+const priceColumns: Ermcp.TableColumn[] = [
|
|
|
+ { prop: 'stepindex', label: '序号' },
|
|
|
+ { prop: 'qty', label: '数量' },
|
|
|
+ { prop: 'price', label: '价格(元/克拉)' },
|
|
|
+]
|
|
|
+
|
|
|
+const onBuyClosed = (isRefresh = false) => {
|
|
|
+ showBuy.value = false
|
|
|
+ if (isRefresh) {
|
|
|
+ onCancel(true)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const onCancel = (isRefresh = false) => {
|
|
|
+ show.value = false
|
|
|
+ refresh.value = isRefresh
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const images = props.selectedRow.pictureurls.split(',')
|
|
|
+ images.forEach((url) => {
|
|
|
+ if (url) {
|
|
|
+ imageUrl.push(getFileUrl(url))
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.el-image {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+
|
|
|
+ +.el-image {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|