|
|
@@ -1,7 +1,14 @@
|
|
|
<!-- 挂牌点价-委托 -->
|
|
|
<template>
|
|
|
- <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading" :row-key="rowKey"
|
|
|
- :expand-row-keys="expandKeys" @row-click="rowClick">
|
|
|
+ <app-table ref="tableRef" :data="dataList" selection-type="multiple" v-model:columns="tableColumns" :loading="loading" :row-key="rowKey"
|
|
|
+ :expand-row-keys="expandKeys" @selection-change="onTableSelect" @row-dblclick="onDBClickCancel" >
|
|
|
+ <template #headerRight>
|
|
|
+ <div class="buttonbar">
|
|
|
+ <el-button type="primary" size="small" :disabled="selectedRows.length === 0"
|
|
|
+ @click="openComponent('cancel')">{{ t('operation.cancel2') }}</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="openComponent('clear')">{{ t('operation.cancel1') }}</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<!-- 商品代码/名称 -->
|
|
|
<template #wrtradetype="{ row }">
|
|
|
{{ row.goodscode }}/{{ row.goodsname }}
|
|
|
@@ -22,59 +29,89 @@
|
|
|
<template #ordertime="{ value }">
|
|
|
{{ formatDate(value) }}
|
|
|
</template>
|
|
|
- <!-- 展开行 -->
|
|
|
- <template #expand="{ row }">
|
|
|
- <div class="buttonbar">
|
|
|
- <el-button type="danger" v-if="[3, 7].includes(row.orderstatus)" size="small"
|
|
|
- @click="showComponent('cancel', row)">{{ t('operation.cancel1') }}</el-button>
|
|
|
- </div>
|
|
|
+ <template #append v-if="showLoadMore">
|
|
|
+ <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)"
|
|
|
+ <component ref="componentRef" v-bind="{ dataList, selectedRows }" :is="componentMap.get(componentId)"
|
|
|
@closed="closeComponent" v-if="componentId" />
|
|
|
</template>
|
|
|
</app-table>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, defineAsyncComponent } from 'vue'
|
|
|
+import { shallowRef, defineAsyncComponent, ref, onUnmounted } from 'vue'
|
|
|
import { formatDate } from '@/filters'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
|
+import { useLocalPagination } from '@/hooks/pagination'
|
|
|
import { queryTradeOrderDetail } from '@/services/api/order'
|
|
|
import { useComponent } from '@/hooks/component'
|
|
|
import { getWRTradeOrderStatusName, getBuyOrSellName } from '@/constants/order'
|
|
|
-import { useComposeTable } from '@pc/components/base/table'
|
|
|
import { useTableColumnsStore, i18n } from '@/stores'
|
|
|
import AppTable from '@pc/components/base/table/index.vue'
|
|
|
-
|
|
|
-const { t } = i18n.global
|
|
|
+import eventBus from '@/services/bus'
|
|
|
|
|
|
const componentMap = new Map<string, unknown>([
|
|
|
- ['cancel', defineAsyncComponent(() => import('./cancel/index.vue'))],
|
|
|
+ ['cancel', defineAsyncComponent(() => import('./cancel/index.vue'))], // 撤单
|
|
|
+ ['clear', defineAsyncComponent(() => import('./clear/index.vue'))], // 快撤
|
|
|
])
|
|
|
|
|
|
-const { getTableColumns } = useTableColumnsStore()
|
|
|
-const tableColumns = shallowRef<Model.TableColumn[]>([])
|
|
|
+const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.TradeOrderDetailRsp>()
|
|
|
+const tableRef = ref()
|
|
|
+const selectedRows = ref<Model.TradeOrderDetailRsp[]>([])
|
|
|
+const { t } = i18n.global
|
|
|
|
|
|
-const { loading, dataList, run } = useRequest(queryTradeOrderDetail, {
|
|
|
+const { loading, dataList, run, runAsync } = useRequest(queryTradeOrderDetail, {
|
|
|
params: {
|
|
|
- tradeMode: '10'
|
|
|
+ tradeMode: '10',
|
|
|
+ orderStatus: '3,7,12',
|
|
|
},
|
|
|
+ onSuccess: (res) => initTableData(res.data)
|
|
|
})
|
|
|
|
|
|
const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
|
|
|
run()
|
|
|
})
|
|
|
|
|
|
-const { rowKey, expandKeys, rowClick } = useComposeTable<Model.TradeOrderDetailRsp>({ rowKey: 'orderid' })
|
|
|
-const selectedRow = shallowRef<Model.TradeOrderDetailRsp>()
|
|
|
+const { getTableColumns } = useTableColumnsStore()
|
|
|
+getTableColumns('swap-order').then((res) => {
|
|
|
+ tableColumns.value = res
|
|
|
+})
|
|
|
|
|
|
-const showComponent = (componentName: string, row: Model.TradeOrderDetailRsp) => {
|
|
|
- selectedRow.value = row
|
|
|
- openComponent(componentName)
|
|
|
+const tableColumns = shallowRef<Model.TableColumn[]>([])
|
|
|
+
|
|
|
+/// 双击单据撤销
|
|
|
+const onDBClickCancel = (row: Model.TradeOrderDetailRsp) => {
|
|
|
+ selectedRows.value = [row]
|
|
|
+ tableRef.value?.elTable.toggleRowSelection(row, true) // 双击选中该行
|
|
|
+ openComponent('cancel')
|
|
|
}
|
|
|
|
|
|
-getTableColumns('swap-order').then((res) => {
|
|
|
- tableColumns.value = res
|
|
|
+// 勾选表格行
|
|
|
+const onTableSelect = (rows: Model.TradeOrderDetailRsp[]) => {
|
|
|
+ selectedRows.value = rows
|
|
|
+}
|
|
|
+
|
|
|
+// 接收成交通知
|
|
|
+const posChangedNtf = eventBus.$on('OrderDealedNtf', () => {
|
|
|
+ run()
|
|
|
})
|
|
|
+
|
|
|
+// 接收委托回应通知
|
|
|
+const orderRspNotify = eventBus.$on('OrderRsp', () => {
|
|
|
+ const [firstItem] = tableList.value
|
|
|
+ runAsync({
|
|
|
+ incOrderID: firstItem?.orderid
|
|
|
+ }).then((res) => {
|
|
|
+ dataList.value.unshift(...res.data)
|
|
|
+ tableList.value.unshift(...res.data)
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ posChangedNtf.cancel()
|
|
|
+ orderRspNotify.cancel()
|
|
|
+})
|
|
|
+
|
|
|
</script>
|
