|
|
@@ -1,24 +1,10 @@
|
|
|
<template>
|
|
|
<!-- 商品订单 - 合约汇总 -->
|
|
|
<section>
|
|
|
- <a-table :columns="tabColumns"
|
|
|
- class="srcollYTable expandLeftTable"
|
|
|
- :scroll="{ x: '100%', y: '190px' }"
|
|
|
- :pagination="false"
|
|
|
- :loading="loading"
|
|
|
- :expandedRowKeys="expandedRowKeys"
|
|
|
- :customRow="Rowclick"
|
|
|
- :expandIcon="expandIcon"
|
|
|
- :expandIconAsCell="false"
|
|
|
- rowKey="key"
|
|
|
- :data-source="tableList">
|
|
|
+ <a-table :columns="tabColumns" class="srcollYTable expandLeftTable" :scroll="{ x: '100%', y: '190px' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" :rowKey="(record,index)=>index" :data-source="tableList">
|
|
|
<!-- 额外的展开行 -->
|
|
|
- <template v-if="btnList.length"
|
|
|
- #expandedRowRender="{ record }">
|
|
|
- <BtnList :btnList="handleBtnList(record,btnList)"
|
|
|
- :record="record"
|
|
|
- class="btn-list-sticky"
|
|
|
- @click="openComponent" />
|
|
|
+ <template v-if="btnList.length" #expandedRowRender="{ record }">
|
|
|
+ <BtnList :btnList="handleBtnList(record,btnList)" :record="record" class="btn-list-sticky" @click="openComponent" />
|
|
|
</template>
|
|
|
<template #createtime="{ record }">
|
|
|
<a>{{ formatTime(record.createtime) }}</a>
|
|
|
@@ -43,11 +29,7 @@
|
|
|
<span>{{ getBuyOrSellName(record.buyorsell) }}</span>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
- <component :is="componentId"
|
|
|
- v-if="componentId"
|
|
|
- :selectedRow="selectedRow"
|
|
|
- :tableList="tableList"
|
|
|
- @cancel="closeComponent"></component>
|
|
|
+ <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :tableList="tableList" @cancel="closeComponent"></component>
|
|
|
</section>
|
|
|
</template>
|
|
|
|
|
|
@@ -70,184 +52,184 @@ import { QueryTradePositionRsp } from '@/services/go/ermcp/order/interface';
|
|
|
import { getBuyOrSellName, getChannelBuildName } from '@/common/constants/enumsName';
|
|
|
|
|
|
const tabColumns = [
|
|
|
- {
|
|
|
- key: '10th',
|
|
|
- dataIndex: 'goodsname',
|
|
|
- title: '订单合约',
|
|
|
- align: 'center',
|
|
|
- slots: {
|
|
|
- customRender: 'goodsname',
|
|
|
- },
|
|
|
- width: 120,
|
|
|
+ {
|
|
|
+ key: '10th',
|
|
|
+ dataIndex: 'goodsname',
|
|
|
+ title: '订单合约',
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ customRender: 'goodsname',
|
|
|
},
|
|
|
- {
|
|
|
- key: '7th',
|
|
|
- dataIndex: 'buyorsell',
|
|
|
- title: '方向',
|
|
|
- align: 'center',
|
|
|
- slots: {
|
|
|
- customRender: 'buyorsell',
|
|
|
- },
|
|
|
- width: 120,
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '7th',
|
|
|
+ dataIndex: 'buyorsell',
|
|
|
+ title: '方向',
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ customRender: 'buyorsell',
|
|
|
},
|
|
|
- {
|
|
|
- key: '8th',
|
|
|
- dataIndex: 'curpositionqty',
|
|
|
- title: '持有数量',
|
|
|
- align: 'center',
|
|
|
- slots: {
|
|
|
- customRender: 'curpositionqty',
|
|
|
- },
|
|
|
- width: 120,
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '8th',
|
|
|
+ dataIndex: 'curpositionqty',
|
|
|
+ title: '持有数量',
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ customRender: 'curpositionqty',
|
|
|
},
|
|
|
- {
|
|
|
- key: '9th',
|
|
|
- dataIndex: 'enableqty',
|
|
|
- title: '可用数量',
|
|
|
- align: 'center',
|
|
|
- slots: {
|
|
|
- customRender: 'enableqty',
|
|
|
- },
|
|
|
- width: 120,
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '9th',
|
|
|
+ dataIndex: 'enableqty',
|
|
|
+ title: '可用数量',
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ customRender: 'enableqty',
|
|
|
},
|
|
|
- {
|
|
|
- key: '0th',
|
|
|
- dataIndex: 'frozenqty',
|
|
|
- title: '冻结数量',
|
|
|
- align: 'center',
|
|
|
- slots: {
|
|
|
- customRender: 'frozenqty',
|
|
|
- },
|
|
|
- width: 120,
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '0th',
|
|
|
+ dataIndex: 'frozenqty',
|
|
|
+ title: '冻结数量',
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ customRender: 'frozenqty',
|
|
|
},
|
|
|
- {
|
|
|
- key: '1th',
|
|
|
- dataIndex: 'averageprice',
|
|
|
- title: '均价',
|
|
|
- align: 'center',
|
|
|
- slots: {
|
|
|
- customRender: 'averageprice',
|
|
|
- },
|
|
|
- width: 120,
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '1th',
|
|
|
+ dataIndex: 'averageprice',
|
|
|
+ title: '均价',
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ customRender: 'averageprice',
|
|
|
},
|
|
|
- {
|
|
|
- key: '2th',
|
|
|
- dataIndex: 'lastprice',
|
|
|
- title: '现价',
|
|
|
- align: 'center',
|
|
|
- slots: {
|
|
|
- customRender: 'lastprice',
|
|
|
- },
|
|
|
- width: 120,
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '2th',
|
|
|
+ dataIndex: 'lastprice',
|
|
|
+ title: '现价',
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ customRender: 'lastprice',
|
|
|
},
|
|
|
- {
|
|
|
- key: '3th',
|
|
|
- dataIndex: 'curholderamount',
|
|
|
- title: '持仓金额',
|
|
|
- align: 'center',
|
|
|
- slots: {
|
|
|
- customRender: 'curholderamount',
|
|
|
- },
|
|
|
- width: 120,
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '3th',
|
|
|
+ dataIndex: 'curholderamount',
|
|
|
+ title: '持仓金额',
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ customRender: 'curholderamount',
|
|
|
},
|
|
|
- {
|
|
|
- key: '4th',
|
|
|
- dataIndex: 'usedmargin',
|
|
|
- title: '占用保证金',
|
|
|
- align: 'center',
|
|
|
- slots: {
|
|
|
- customRender: 'usedmargin',
|
|
|
- },
|
|
|
- width: 130,
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '4th',
|
|
|
+ dataIndex: 'usedmargin',
|
|
|
+ title: '占用保证金',
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ customRender: 'usedmargin',
|
|
|
},
|
|
|
- {
|
|
|
- key: '5th',
|
|
|
- dataIndex: 'marketamount',
|
|
|
- title: '市值',
|
|
|
- align: 'center',
|
|
|
- slots: {
|
|
|
- customRender: 'marketamount',
|
|
|
- },
|
|
|
- width: 120,
|
|
|
+ width: 130,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '5th',
|
|
|
+ dataIndex: 'marketamount',
|
|
|
+ title: '市值',
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ customRender: 'marketamount',
|
|
|
},
|
|
|
- {
|
|
|
- key: '6th',
|
|
|
- dataIndex: 'profitloss',
|
|
|
- title: '浮动盈亏',
|
|
|
- align: 'center',
|
|
|
- slots: {
|
|
|
- customRender: 'profitloss',
|
|
|
- },
|
|
|
- width: 120,
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '6th',
|
|
|
+ dataIndex: 'profitloss',
|
|
|
+ title: '浮动盈亏',
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ customRender: 'profitloss',
|
|
|
},
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
];
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: enumOrderComponents.commodity_contract_summary,
|
|
|
- components: {
|
|
|
- BtnList,
|
|
|
- [ModalEnum.commodity_contract_summary_settlement]: defineAsyncComponent(() => import('./components/commodity_contract_summary_settlement/index.vue')),
|
|
|
- [ModalEnum.commodity_contract_summary_transfer]: defineAsyncComponent(() => import('./components/commodity_contract_summary_transfer/index.vue')),
|
|
|
- commodity_contract_summary_deal_closed: defineAsyncComponent(() => import('./components/commodity_contract_summary_deal_closed/index.vue')),
|
|
|
- commodity_contract_summary_order_closed: defineAsyncComponent(() => import('./components/commodity_contract_summary_order_closed/index.vue')),
|
|
|
- },
|
|
|
- setup() {
|
|
|
- // 表格列表数据
|
|
|
- const { loading, tableList, queryTable } = queryTableList<QueryTradePositionRsp>();
|
|
|
- const { subscribeAction } = handleSubcriteQuote();
|
|
|
- // 交割商品
|
|
|
- handleDeliveryRelation();
|
|
|
+ name: enumOrderComponents.commodity_contract_summary,
|
|
|
+ components: {
|
|
|
+ BtnList,
|
|
|
+ [ModalEnum.commodity_contract_summary_settlement]: defineAsyncComponent(() => import('./components/commodity_contract_summary_settlement/index.vue')),
|
|
|
+ [ModalEnum.commodity_contract_summary_transfer]: defineAsyncComponent(() => import('./components/commodity_contract_summary_transfer/index.vue')),
|
|
|
+ commodity_contract_summary_deal_closed: defineAsyncComponent(() => import('./components/commodity_contract_summary_deal_closed/index.vue')),
|
|
|
+ commodity_contract_summary_order_closed: defineAsyncComponent(() => import('./components/commodity_contract_summary_order_closed/index.vue')),
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ // 表格列表数据
|
|
|
+ const { loading, tableList, queryTable } = queryTableList<QueryTradePositionRsp>();
|
|
|
+ const { subscribeAction } = handleSubcriteQuote();
|
|
|
+ // 交割商品
|
|
|
+ handleDeliveryRelation();
|
|
|
|
|
|
- // 挂牌点选商品
|
|
|
- // const { deliverGoods, getQuoteList, goodsList, } = handleDeliveryRelation([1, 3]);
|
|
|
- // // 参考行情商品
|
|
|
- // const goodsList = getQutoGoodsByTradeMode(TradeMode.quote99);
|
|
|
- // 获取列表数据
|
|
|
- const queryTableAction = () => {
|
|
|
- queryTable(queryTradePosition).then((res) => {
|
|
|
- const result: string[] = [];
|
|
|
- res.forEach((el) => {});
|
|
|
- const goodsList = res.map((el) => {
|
|
|
- return el.goodscode;
|
|
|
- });
|
|
|
- // 行情订阅
|
|
|
- subscribeAction(goodsList);
|
|
|
- });
|
|
|
- };
|
|
|
- // 表格通用逻辑
|
|
|
- const param: ComposeOrderTableParam = {
|
|
|
- queryFn: queryTableAction,
|
|
|
- tableName: 'table_pcweb_spot_trade_bottom_commodity_contract_summary',
|
|
|
- recordList: getRecordItemTab(),
|
|
|
- };
|
|
|
- // 现价
|
|
|
- function getLastprice({ goodscode, decimalplace }: QueryTradePositionRsp) {
|
|
|
- const lastPrice = getQuoteDayInfoByCodeFindPrice(goodscode);
|
|
|
- return lastPrice === '--' ? lastPrice : Number(lastPrice).toFixed(decimalplace);
|
|
|
- }
|
|
|
+ // 挂牌点选商品
|
|
|
+ // const { deliverGoods, getQuoteList, goodsList, } = handleDeliveryRelation([1, 3]);
|
|
|
+ // // 参考行情商品
|
|
|
+ // const goodsList = getQutoGoodsByTradeMode(TradeMode.quote99);
|
|
|
+ // 获取列表数据
|
|
|
+ const queryTableAction = () => {
|
|
|
+ queryTable(queryTradePosition).then((res) => {
|
|
|
+ const result: string[] = [];
|
|
|
+ res.forEach((el) => { });
|
|
|
+ const goodsList = res.map((el) => {
|
|
|
+ return el.goodscode;
|
|
|
+ });
|
|
|
+ // 行情订阅
|
|
|
+ subscribeAction(goodsList);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 表格通用逻辑
|
|
|
+ const param: ComposeOrderTableParam = {
|
|
|
+ queryFn: queryTableAction,
|
|
|
+ tableName: 'table_pcweb_spot_trade_bottom_commodity_contract_summary',
|
|
|
+ recordList: getRecordItemTab(),
|
|
|
+ };
|
|
|
+ // 现价
|
|
|
+ function getLastprice({ goodscode, decimalplace }: QueryTradePositionRsp) {
|
|
|
+ const lastPrice = getQuoteDayInfoByCodeFindPrice(goodscode);
|
|
|
+ return lastPrice === '--' ? lastPrice : Number(lastPrice).toFixed(decimalplace);
|
|
|
+ }
|
|
|
|
|
|
- function handleBtnList(record: QueryTradePositionRsp, btnList: BtnListType[]) {
|
|
|
- // 挂牌点选
|
|
|
- const listing = ['commodity_contract_summary_transfer', 'commodity_contract_summary_settlement'];
|
|
|
- // 贸易圈
|
|
|
- const diaoqi = ['commodity_contract_summary_deal_closed', 'commodity_contract_summary_order_closed'];
|
|
|
- const arr = findGoodsTradeModeById(record.goodsid) === TradeMode.DiaoQi ? diaoqi : listing;
|
|
|
- return btnList.filter((e) => arr.includes(e.code));
|
|
|
- }
|
|
|
- return {
|
|
|
- ...handleComposeOrderTable<QueryTradePositionRsp>(param),
|
|
|
- loading,
|
|
|
- tableList,
|
|
|
- formatTime,
|
|
|
- expandIcon,
|
|
|
- getLastprice,
|
|
|
- useHolderprice,
|
|
|
- useProfitloss,
|
|
|
- handleBtnList,
|
|
|
- tabColumns,
|
|
|
- getBuyOrSellName,
|
|
|
- };
|
|
|
- },
|
|
|
+ function handleBtnList(record: QueryTradePositionRsp, btnList: BtnListType[]) {
|
|
|
+ // 挂牌点选
|
|
|
+ const listing = ['commodity_contract_summary_transfer', 'commodity_contract_summary_settlement'];
|
|
|
+ // 贸易圈
|
|
|
+ const diaoqi = ['commodity_contract_summary_deal_closed', 'commodity_contract_summary_order_closed'];
|
|
|
+ const arr = findGoodsTradeModeById(record.goodsid) === TradeMode.DiaoQi ? diaoqi : listing;
|
|
|
+ return btnList.filter((e) => arr.includes(e.code));
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ...handleComposeOrderTable<QueryTradePositionRsp>(param),
|
|
|
+ loading,
|
|
|
+ tableList,
|
|
|
+ formatTime,
|
|
|
+ expandIcon,
|
|
|
+ getLastprice,
|
|
|
+ useHolderprice,
|
|
|
+ useProfitloss,
|
|
|
+ handleBtnList,
|
|
|
+ tabColumns,
|
|
|
+ getBuyOrSellName,
|
|
|
+ };
|
|
|
+ },
|
|
|
});
|
|
|
</script>
|
|
|
|