update

src/packages/pc/views/footer/pricing/detail2/index.vue

@@ -1,6 +1,6 @@
 <!-- 挂牌点价-持仓明细 按账户风控 -->
 <template>
-    <app-table :data="orderComputedList" v-model:columns="tableColumns" :loading="loading" v-model:error="error">
+    <app-table :data="tableList" v-model:columns="tableColumns">
         <!-- 商品代码/名称 -->
         <template #goodsname="{ row }">
             {{ row.goodsCode }}
@@ -9,17 +9,17 @@
         <template #buyorsell="{ row }">
             {{ getBuyOrSellName(row.tHDetailEx.buyOrSell) }}
         </template>
-         <!-- 可用数量 -->
-         <template #enableqty="{ row }">
+        <!-- 可用数量 -->
+        <template #enableqty="{ row }">
             {{ enableqty(row) + getGoodsUnitName(row.goodsUnitID) }}
         </template>
         <!-- 持仓数量 -->
         <template #holderqty="{ row }">
-            {{ row.tHDetailEx.holderQty*row.agreeUnit + getGoodsUnitName(row.goodsUnitID) }}
+            {{ row.tHDetailEx.holderQty * row.agreeUnit + getGoodsUnitName(row.goodsUnitID) }}
         </template>
         <!-- 冻结数量 -->
         <template #freezeqty="{ row }">
-            {{ row.tHDetailEx.freezeQty*row.agreeUnit + getGoodsUnitName(row.goodsUnitID) }}
+            {{ row.tHDetailEx.freezeQty * row.agreeUnit + getGoodsUnitName(row.goodsUnitID) }}
         </template>
         <!-- 持仓价格 -->
         <template #holderprice="{ row }">
@@ -29,34 +29,37 @@
         <template #holderamount="{ row }">
             {{ formatDecimal(row.tHDetailEx.holderAmount, row.decimalPlace) }}
         </template>
-         <!-- 占用 -->
-         <template #usedMargin="{ row }">
-            {{ formatDecimal(row.tHDetailEx.payedDeposit+row.tHDetailEx.restockDeposit, row.decimalPlace) }}
+        <!-- 占用 -->
+        <template #usedMargin="{ row }">
+            {{ formatDecimal(row.tHDetailEx.payedDeposit + row.tHDetailEx.restockDeposit, row.decimalPlace) }}
         </template>
         <!-- 浮动权益-->
         <template #profitLoss="{ row }">
-            <span :class="handlePriceColor(row.tHDetailEx.floatPL)">{{ formatDecimal(row.tHDetailEx.floatPL) }}</span>
+            <!-- 待优化 -->
+            <span :class="handlePriceColor(sbyjOrderStore.calcFloatpl(row))">{{
+                formatDecimal(sbyjOrderStore.calcFloatpl(row)) }}</span>
         </template>
-         <!-- 风险率 -->
-         <!-- <template #riskRate="{ row }">
+        <!-- 风险率 -->
+        <!-- <template #riskRate="{ row }">
             <span :class="row.tHDetailEx.depositRate >= row.tHDetailEx.promptDepositRate ? 'g-price-up' : ''">
                 {{ parsePercent(row.tHDetailEx.riskRate) }}
             </span>
         </template> -->
-         <!-- 交易时间 -->
-         <template #tradetime="{ row }">
+        <!-- 交易时间 -->
+        <template #tradetime="{ row }">
             {{ formatDate(row.tHDetailEx.tradeTime) }}
         </template>
-         <!-- 成交单号 -->
-         <template #tradeid="{ row }">
+        <!-- 成交单号 -->
+        <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="danger" size="small" @click="showComponent('transfer', row)">{{ t('operation.close')
+                }}</el-button>
         </template>
         <template #append v-if="showLoadMore">
-            <el-button size="small" plain @click="loadMore">{{ t('common.loadMore' )}}</el-button>
+            <el-button size="small" plain @click="loadMore">{{ t('common.loadMore') }}</el-button>
         </template>
         <template #footer>
             <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)"
@@ -65,32 +68,31 @@
     </app-table>
 </template>
 
-<script lang="ts" setup> 
-import { shallowRef, defineAsyncComponent, onUnmounted } from 'vue'
+<script lang="ts" setup>
+import { shallowRef, defineAsyncComponent, onMounted } from 'vue'
 import { getBuyOrSellName } from '@/constants/order'
-import { formatDecimal, formatDate, parsePercent, handlePriceColor } from '@/filters'
+import { formatDecimal, formatDate, handlePriceColor } from '@/filters'
 import { getGoodsUnitName } from '@/constants/unit'
 import { useComponent } from '@/hooks/component'
 import { useLocalPagination } from '@/hooks/pagination'
 import { useTableColumnsStore, i18n } from '@/stores'
 import { useSBYJOrderStore } from '@/stores'
 import AppTable from '@pc/components/base/table/index.vue'
-import eventBus from '@/services/bus'
 
 const componentMap = new Map<string, unknown>([
     ['transfer', defineAsyncComponent(() => import('./components/transfer/index.vue'))],
 ])
 
+const { t } = i18n.global
 const { getTableColumns } = useTableColumnsStore()
-const { showLoadMore, loadMore } = useLocalPagination<Model.SBYJMyOrderRsp>()
+const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.SBYJMyOrderRsp>()
+
 const selectedRow = shallowRef<Model.SBYJMyOrderRsp>()
 const tableColumns = shallowRef<Model.TableColumn[]>([])
-const { t } = i18n.global
 
-const { getSBYJMyOrders, $toRefs } = useSBYJOrderStore()
-const { orderComputedList, loading, error } = $toRefs()
+const sbyjOrderStore = useSBYJOrderStore()
 
-const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => getSBYJMyOrders())
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => sbyjOrderStore.getSBYJMyOrders())
 
 // 可用重量
 const enableqty = (item: Model.SBYJMyOrderRsp) => {
@@ -98,9 +100,6 @@ const enableqty = (item: Model.SBYJMyOrderRsp) => {
     return (tHDetailEx.holderQty - tHDetailEx.freezeQty) * agreeUnit
 }
 
-// 接收头寸变化通知通知
-const posChangedNtf = eventBus.$on('PosChangedNtf', () => getSBYJMyOrders())
-
 const showComponent = (componentName: string, row: Model.SBYJMyOrderRsp) => {
     selectedRow.value = row
     openComponent(componentName)
@@ -110,5 +109,9 @@ getTableColumns('order-detail2', true).then((res) => {
     tableColumns.value = res
 })
 
-onUnmounted(() => posChangedNtf.cancel())
+onMounted(() => {
+    // 待优化
+    const dataList = sbyjOrderStore.orderList.filter((e) => e.tHDetailEx.holderQty > 0)
+    initTableData(dataList)
+})
 </script>

src/stores/modules/position.ts

@@ -223,6 +223,7 @@ export const useSBYJOrderStore = defineStore(() => {
         orderComputedList,
         getSBYJMyOrders,
         getOrderListByGoodsId,
+        calcFloatpl,
         eventNotify,
         subscribe
     }