|
|
@@ -0,0 +1,128 @@
|
|
|
+<template>
|
|
|
+ <!--订单交易 挂牌转让-->
|
|
|
+ <div class="topTableHeight">
|
|
|
+ <a-table :columns="columns"
|
|
|
+ :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', getQuoteList().length ? 'noPlaceHolder' : 'hasPlaceHolder']"
|
|
|
+ :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }"
|
|
|
+ :pagination="false"
|
|
|
+ :loading="loading"
|
|
|
+ :expandedRowKeys="expandedRowKeys"
|
|
|
+ :customRow="Rowclick"
|
|
|
+ rowKey="goodscode"
|
|
|
+ ref="tableRef"
|
|
|
+ :data-source="getQuoteList()">
|
|
|
+ <template #totalturnover="{ text }">
|
|
|
+ <span>{{changeUnit(text)}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 涨跌 -->
|
|
|
+ <template #change="{ record }">
|
|
|
+ <span>{{quoteChange(record, record.decimalplace)}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 幅度 -->
|
|
|
+ <template #amplitude="{ record }">
|
|
|
+ <span>{{quoteAmplituOfVibration(record, record.decimalplace)}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 振幅 -->
|
|
|
+ <template #vibration="{ record }">
|
|
|
+ <span>{{quoteAmplituOfVibration(record, record.decimalplace)}}</span>
|
|
|
+ </template>
|
|
|
+ <template #index="{ index }">
|
|
|
+ <span>{{index + 1}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 买价 -->
|
|
|
+ <template #bid="{ text, record }">
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 卖价 -->
|
|
|
+ <template #ask="{ text, record }">
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 最新价 -->
|
|
|
+ <template #last="{ text, record }">
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 最低价 -->
|
|
|
+ <template #lowest="{ text, record }">
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 最高价 -->
|
|
|
+ <template #highest="{ text, record }">
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ <!-- 右键 -->
|
|
|
+ <contextMenu :contextMenu="contextMenu"
|
|
|
+ @cancel="closeContext"
|
|
|
+ :list="btnList"></contextMenu>
|
|
|
+ <component :is="componentId"
|
|
|
+ v-if="componentId"
|
|
|
+ :selectedRow="selectedRow"
|
|
|
+ :deliverGoods="findDeilverGoodsByGoodsCode(selectedRow.goodscode)"
|
|
|
+ @cancel="closeComponent"></component>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { EnumRouterName } from '@/common/constants/enumRouterName';
|
|
|
+import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
|
|
|
+
|
|
|
+import { handleDeliveryRelation } from '../setup';
|
|
|
+
|
|
|
+import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
|
|
|
+import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
|
|
|
+import { columnsList } from '../setup';
|
|
|
+
|
|
|
+import { handleTableEventAndData } from '@/common/setup/table/compose';
|
|
|
+import { TableParam } from '@/common/setup/table/interface';
|
|
|
+import { BtnListType } from '@/common/components/btnList/interface';
|
|
|
+import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
|
|
|
+import { getShowBottomValue } from '@/common/config/constrolBottom';
|
|
|
+import { ref } from 'vue';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'spot_trade_order_transaction_swap',
|
|
|
+ components: {
|
|
|
+ contextMenu,
|
|
|
+ BuyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
|
|
|
+ Listing: defineAsyncComponent(() => import('../components/listing/index.vue')),
|
|
|
+ Detail: defineAsyncComponent(() => import('../components/detail/index.vue')),
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const isBottom = getShowBottomValue();
|
|
|
+ const loading = ref<boolean>(false);
|
|
|
+ const param: TableParam = {
|
|
|
+ columnsList,
|
|
|
+ queryFn: () => {},
|
|
|
+ clickName: 'BuyAndSell',
|
|
|
+ };
|
|
|
+ const btnList: BtnListType[] = [
|
|
|
+ { lable: '挂牌求购', code: 'Listing', className: 'btnDeafault' },
|
|
|
+ { lable: '详情', code: 'Detail', className: 'btnDeafault' },
|
|
|
+ { lable: '买卖大厅', code: 'BuyAndSell', className: 'btnDeafault' },
|
|
|
+ ];
|
|
|
+ const { deliverGoods, getQuoteList, goodsList, findDeilverGoodsByGoodsCode } = handleDeliveryRelation([1, 3]);
|
|
|
+ // 行情按需订阅
|
|
|
+ handleSubcriteOnDemandQuote<QueryDeliveryRelationRsp>(deliverGoods);
|
|
|
+
|
|
|
+ return {
|
|
|
+ isBottom,
|
|
|
+ ...handleTableEventAndData<QueryQuoteDayRsp>(param),
|
|
|
+ deliverGoods,
|
|
|
+ btnList,
|
|
|
+ handleQuotePriceColor,
|
|
|
+ quoteChange,
|
|
|
+ quoteAmplitude,
|
|
|
+ quoteAmplituOfVibration,
|
|
|
+ getQuoteList,
|
|
|
+ findDeilverGoodsByGoodsCode,
|
|
|
+ goodsList,
|
|
|
+ loading,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+.noData {
|
|
|
+ .position(absolute, 28px, 0, 0, 0);
|
|
|
+}
|
|
|
+</style>
|