|
|
@@ -0,0 +1,123 @@
|
|
|
+<!-- 交易市场-仓单交易-买卖大厅 -->
|
|
|
+<template>
|
|
|
+ <teleport to="#appPageTeleport">
|
|
|
+ <app-view class="g-view-detail">
|
|
|
+ <template #header>
|
|
|
+ <div class="g-view-detail__header">
|
|
|
+ <el-button type="primary" icon="ArrowLeftBold" @click="emit('closed')" link />
|
|
|
+ <div class="btnbar">
|
|
|
+ <el-button type="primary" @click="openComponent('listing')">挂牌求购</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="market-trade-spot-order" style="display: flex;height: 100%;">
|
|
|
+ <app-table class="sell" :data="sellList" v-model:columns="sellColumns" :row-key="rowKey"
|
|
|
+ :expand-row-keys="expandKeys" @row-click="rowClick" showIndex>
|
|
|
+ <!-- 展开行 -->
|
|
|
+ <template #expand="{ row }">
|
|
|
+ <div class="buttonbar">
|
|
|
+ <el-button type="primary" size="small" :disabled="row.userid === loginStore.userId"
|
|
|
+ @click="openComponent('delisting')">摘牌</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </app-table>
|
|
|
+ <app-table class="buy" :data="buyList" v-model:columns="buyColumns" :row-key="rowKey"
|
|
|
+ :expand-row-keys="expandKeys" @row-click="rowClick" showIndex>
|
|
|
+ <!-- 展开行 -->
|
|
|
+ <template #expand="{ row }">
|
|
|
+ <div class="buttonbar">
|
|
|
+ <el-button type="primary" size="small" :disabled="row.userid === loginStore.userId"
|
|
|
+ @click="openComponent('delisting')">摘牌</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </app-table>
|
|
|
+ <component ref="componentRef" v-bind="{ quoteItem, quoteDetail }" :is="componentMap.get(componentId)"
|
|
|
+ @closed="closeComponent" v-if="componentId" />
|
|
|
+ </div>
|
|
|
+ </app-view>
|
|
|
+ </teleport>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { shallowRef, defineAsyncComponent, onUnmounted, PropType } from 'vue'
|
|
|
+import { useRequest } from '@/hooks/request'
|
|
|
+import { BuyOrSell } from '@/constants/order'
|
|
|
+import { useComponent } from '@/hooks/component'
|
|
|
+import { useComposeTable } from '@pc/components/base/table'
|
|
|
+import { queryOrderQuote, queryOrderQuoteDetail } from '@/services/api/goods'
|
|
|
+import { useLoginStore } from '@/stores'
|
|
|
+import eventBus from '@/services/bus'
|
|
|
+import AppTable from '@pc/components/base/table/index.vue'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ selectedRow: {
|
|
|
+ type: Object as PropType<Model.OrderQuoteRsp>,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+const emit = defineEmits(['closed'])
|
|
|
+
|
|
|
+const componentMap = new Map<string, unknown>([
|
|
|
+ ['listing', defineAsyncComponent(() => import('./listing/index.vue'))], // 挂牌
|
|
|
+ ['delisting', defineAsyncComponent(() => import('./delisting/index.vue'))], // 摘牌
|
|
|
+])
|
|
|
+
|
|
|
+const loginStore = useLoginStore()
|
|
|
+const { rowKey, expandKeys, selectedRow: quoteDetail, rowClick } = useComposeTable<Model.OrderQuoteDetailRsp>({ rowKey: 'wrtradeorderid' })
|
|
|
+const { componentRef, componentId, openComponent, closeComponent } = useComponent()
|
|
|
+
|
|
|
+const { data: quoteItem, run: getOrderQuote } = useRequest(queryOrderQuote, {
|
|
|
+ params: {
|
|
|
+ wrpricetype: 1,
|
|
|
+ wrfactortypeid: props.selectedRow.wrfactortypeid
|
|
|
+ },
|
|
|
+ onSuccess: (res) => {
|
|
|
+ quoteItem.value = res.data[0]
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 买大厅列表
|
|
|
+const { dataList: buyList, run: getBuyList } = useRequest(queryOrderQuoteDetail, {
|
|
|
+ params: {
|
|
|
+ wrpricetype: 1,
|
|
|
+ haswr: 1,
|
|
|
+ wrfactortypeid: props.selectedRow.wrfactortypeid,
|
|
|
+ buyorsell: BuyOrSell.Buy
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+// 卖大厅列表
|
|
|
+const { dataList: sellList, run: getSellList } = useRequest(queryOrderQuoteDetail, {
|
|
|
+ params: {
|
|
|
+ wrpricetype: 1,
|
|
|
+ haswr: 1,
|
|
|
+ wrfactortypeid: props.selectedRow.wrfactortypeid,
|
|
|
+ buyorsell: BuyOrSell.Sell
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+const buyColumns = shallowRef<Model.TableColumn[]>([
|
|
|
+ { prop: 'username', label: '销售方' },
|
|
|
+ { prop: 'orderqty', label: '卖量' },
|
|
|
+ { prop: 'fixedprice', label: '卖价' },
|
|
|
+])
|
|
|
+
|
|
|
+const sellColumns = shallowRef<Model.TableColumn[]>([
|
|
|
+ { prop: 'fixedprice', label: '买价' },
|
|
|
+ { prop: 'orderqty', label: '买量' },
|
|
|
+ { prop: 'username', label: '购买方' },
|
|
|
+])
|
|
|
+
|
|
|
+// 挂牌委托变更广播通知
|
|
|
+const listingOrderChangeNtf = eventBus.$on('ListingOrderChangeNtf', () => {
|
|
|
+ getOrderQuote()
|
|
|
+ getBuyList()
|
|
|
+ getSellList()
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => listingOrderChangeNtf.cancel())
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|