|
|
@@ -1,94 +1,30 @@
|
|
|
<!-- 挂牌点价-持仓明细 按账户风控 -->
|
|
|
<template>
|
|
|
- <app-table :data="tableList" v-model:columns="tableColumns">
|
|
|
- <!-- 商品代码/名称 -->
|
|
|
- <template #goodsname="{ row }">
|
|
|
- {{ row.goodsCode }}
|
|
|
- </template>
|
|
|
- <!-- 方向 -->
|
|
|
- <template #buyorsell="{ row }">
|
|
|
- {{ getBuyOrSellName(row.tHDetailEx.buyOrSell) }}
|
|
|
- </template>
|
|
|
- <!-- 可用数量 -->
|
|
|
- <template #enableqty="{ row }">
|
|
|
- {{ enableqty(row) + getGoodsUnitName(row.goodsUnitID) }}
|
|
|
- </template>
|
|
|
- <!-- 持仓数量 -->
|
|
|
- <template #holderqty="{ row }">
|
|
|
- {{ row.tHDetailEx.holderQty * row.agreeUnit + getGoodsUnitName(row.goodsUnitID) }}
|
|
|
- </template>
|
|
|
- <!-- 冻结数量 -->
|
|
|
- <template #freezeqty="{ row }">
|
|
|
- {{ row.tHDetailEx.freezeQty * row.agreeUnit + getGoodsUnitName(row.goodsUnitID) }}
|
|
|
- </template>
|
|
|
- <!-- 持仓价格 -->
|
|
|
- <template #holderprice="{ row }">
|
|
|
- {{ formatDecimal(row.tHDetailEx.holderPrice, row.decimalPlace) }}
|
|
|
- </template>
|
|
|
- <!-- 持仓金额 -->
|
|
|
- <template #holderamount="{ row }">
|
|
|
- {{ formatDecimal(row.tHDetailEx.holderAmount, row.decimalPlace) }}
|
|
|
- </template>
|
|
|
- <!-- 占用 -->
|
|
|
- <template #usedMargin="{ row }">
|
|
|
- {{ formatDecimal(row.tHDetailEx.payedDeposit + row.tHDetailEx.restockDeposit, row.decimalPlace) }}
|
|
|
- </template>
|
|
|
- <!-- 浮动权益-->
|
|
|
- <template #profitLoss="{ row }">
|
|
|
- <!-- 待优化 -->
|
|
|
- <span :class="handlePriceColor(sbyjOrderStore.calcFloatpl(row))">
|
|
|
- {{ formatDecimal(sbyjOrderStore.calcFloatpl(row)) }}
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <!-- 风险率 -->
|
|
|
- <!-- <template #riskRate="{ row }">
|
|
|
- <span :class="row.tHDetailEx.depositRate >= row.tHDetailEx.promptDepositRate ? 'g-price-up' : ''">
|
|
|
- {{ parsePercent(row.tHDetailEx.riskRate) }}
|
|
|
- </span>
|
|
|
- </template> -->
|
|
|
- <!-- 交易时间 -->
|
|
|
- <template #tradetime="{ row }">
|
|
|
- {{ formatDate(row.tHDetailEx.tradeTime) }}
|
|
|
- </template>
|
|
|
- <!-- 成交单号 -->
|
|
|
- <template #tradeid="{ row }">
|
|
|
- {{ row.tHDetailEx.tradeID }}
|
|
|
- </template>
|
|
|
- <!-- 操作 -->
|
|
|
- <template #operate="{ row }">
|
|
|
- <el-button type="danger" size="small" @click="showComponent('transfer', row)">{{ t('operation.close')
|
|
|
- }}</el-button>
|
|
|
- <el-button type="primary" size="small" @click="showComponent('delivery', row)">{{ t('operation.delivery')
|
|
|
- }}</el-button>
|
|
|
- </template>
|
|
|
- <template #append v-if="showLoadMore">
|
|
|
- <el-button size="small" plain @click="loadMore">{{ t('common.loadMore') }}</el-button>
|
|
|
- </template>
|
|
|
+ <app-table-v2 :data="sbyjOrderStore.orderComputedList" :columns="tableColumns">
|
|
|
<template #footer>
|
|
|
<component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)"
|
|
|
@closed="closeComponent" v-if="componentId" />
|
|
|
</template>
|
|
|
- </app-table>
|
|
|
+ </app-table-v2>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts" setup>
|
|
|
-import { shallowRef, defineAsyncComponent, onMounted } from 'vue'
|
|
|
+<script lang="tsx" setup>
|
|
|
+import { shallowRef, defineAsyncComponent } from 'vue'
|
|
|
+import { Column, TableV2FixedDir } from 'element-plus'
|
|
|
import { getBuyOrSellName } from '@/constants/order'
|
|
|
import { formatDecimal, formatDate, handlePriceColor } from '@/filters'
|
|
|
import { getGoodsUnitName } from '@/constants/unit'
|
|
|
import { useComponent } from '@/hooks/component'
|
|
|
-import { useLocalPagination } from '@/hooks/pagination'
|
|
|
import { i18n } from '@/stores'
|
|
|
import { useSBYJOrderStore } from '@/stores'
|
|
|
-import AppTable from '@pc/components/base/table/index.vue'
|
|
|
+import AppTableV2 from '@pc/components/base/table-v2/index.vue'
|
|
|
|
|
|
const componentMap = new Map<string, unknown>([
|
|
|
['transfer', defineAsyncComponent(() => import('./components/transfer/index.vue'))],
|
|
|
['delivery', defineAsyncComponent(() => import('./components/delivery/index.vue'))],
|
|
|
])
|
|
|
|
|
|
-const { t } = i18n.global
|
|
|
-const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.SBYJMyOrderRsp>()
|
|
|
+const t = i18n.global.t
|
|
|
const selectedRow = shallowRef<Model.SBYJMyOrderRsp>()
|
|
|
|
|
|
const sbyjOrderStore = useSBYJOrderStore()
|
|
|
@@ -106,24 +42,73 @@ const showComponent = (componentName: string, row: Model.SBYJMyOrderRsp) => {
|
|
|
openComponent(componentName)
|
|
|
}
|
|
|
|
|
|
-const tableColumns = shallowRef<Model.TableColumn[]>([
|
|
|
- { field: 'goodsname', label: 'position.goods.goodsname' },
|
|
|
- { field: 'buyorsell', label: 'position.goods.buyorsell' },
|
|
|
- { field: 'holderqty', label: 'position.goods.holddetail.holderqty' },
|
|
|
- { field: 'freezeqty', label: 'position.goods.holddetail.freezeqty' },
|
|
|
- { field: 'enableqty', label: 'position.goods.holddetail.enableqty' },
|
|
|
- { field: 'holderprice', label: 'position.goods.holddetail.holderprice' },
|
|
|
- { field: 'holderamount', label: 'position.goods.holddetail.holderamount' },
|
|
|
- { field: 'usedMargin', label: 'position.goods.holddetail.usedMargin' },
|
|
|
- { field: 'profitLoss', label: 'position.goods.holddetail.profitLoss' },
|
|
|
- { field: 'tradetime', label: 'position.goods.holddetail.tradetime' },
|
|
|
- { field: 'tradeid', label: 'position.goods.holddetail.tradeid' },
|
|
|
- { field: 'operate', label: 'common.operate', fixed: 'right', width: 140 },
|
|
|
+const tableColumns = shallowRef<Partial<Column>[]>([
|
|
|
+ {
|
|
|
+ key: 'goodsCode',
|
|
|
+ dataKey: 'goodsCode',
|
|
|
+ title: t('position.goods.goodsname')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'buyOrSell',
|
|
|
+ title: t('position.goods.buyorsell'),
|
|
|
+ cellRenderer: ({ rowData }) => <span>{getBuyOrSellName(rowData.tHDetailEx.buyOrSell)}</span>
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'holderQty',
|
|
|
+ title: t('position.goods.holddetail.holderqty'),
|
|
|
+ cellRenderer: ({ rowData }) => <span>{rowData.tHDetailEx.holderQty * rowData.agreeUnit + getGoodsUnitName(rowData.goodsUnitID)}</span>
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'freezeQty',
|
|
|
+ title: t('position.goods.holddetail.freezeqty'),
|
|
|
+ cellRenderer: ({ rowData }) => <span>{rowData.tHDetailEx.freezeQty * rowData.agreeUnit + getGoodsUnitName(rowData.goodsUnitID)}</span>
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'enableQty',
|
|
|
+ title: t('position.goods.holddetail.enableqty'),
|
|
|
+ cellRenderer: ({ rowData }) => <span>{enableqty(rowData) + getGoodsUnitName(rowData.goodsUnitID)}</span>
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'holderPrice',
|
|
|
+ title: t('position.goods.holddetail.holderprice'),
|
|
|
+ cellRenderer: ({ rowData }) => <span>{formatDecimal(rowData.tHDetailEx.holderPrice, rowData.decimalPlace)}</span>
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'holderAmount',
|
|
|
+ title: t('position.goods.holddetail.holderamount'),
|
|
|
+ cellRenderer: ({ rowData }) => <span>{formatDecimal(rowData.tHDetailEx.holderAmount, rowData.decimalPlace)}</span>
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'usedMargin',
|
|
|
+ title: t('position.goods.holddetail.usedMargin'),
|
|
|
+ cellRenderer: ({ rowData }) => <span>{formatDecimal(rowData.tHDetailEx.payedDeposit + rowData.tHDetailEx.restockDeposit, rowData.decimalPlace)}</span>
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'floatPL',
|
|
|
+ title: t('position.goods.holddetail.profitLoss'),
|
|
|
+ cellRenderer: ({ rowData }) => <span class={handlePriceColor(rowData.floatPL)}>{formatDecimal(rowData.tHDetailEx.floatPL)}</span>
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'tradeTime',
|
|
|
+ title: t('position.goods.holddetail.tradetime'),
|
|
|
+ width: 180,
|
|
|
+ cellRenderer: ({ rowData }) => <span>{formatDate(rowData.tHDetailEx.tradeTime)}</span>
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'tradeID',
|
|
|
+ dataKey: 'tHDetailEx.tradeID',
|
|
|
+ title: t('position.goods.holddetail.tradeid'),
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'operate',
|
|
|
+ title: t('common.operate'),
|
|
|
+ width: 140,
|
|
|
+ fixed: TableV2FixedDir.RIGHT,
|
|
|
+ cellRenderer: ({ rowData }) => <>
|
|
|
+ <el-button type="danger" size="small" onClick={() => showComponent('transfer', rowData)}>{t('operation.close')}</el-button>
|
|
|
+ <el-button type="primary" size="small" onClick={() => showComponent('delivery', rowData)}>{t('operation.delivery')}</el-button>
|
|
|
+ </>
|
|
|
+ },
|
|
|
])
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- // 待优化
|
|
|
- const dataList = sbyjOrderStore.orderList.filter((e) => e.tHDetailEx.holderQty > 0)
|
|
|
- initTableData(dataList)
|
|
|
-})
|
|
|
</script>
|
