|
|
@@ -1,214 +1,53 @@
|
|
|
<template>
|
|
|
- <table cellspacing="0" cellpadding="0" v-if="!goodsId">
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <app-select v-model="dateType" :options="options" />
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr v-if="dateType != 0">
|
|
|
- <td>
|
|
|
- <app-calendar :default-date="[currentDate]" @confirm="onConfirm" :title="$t('common.calendar')" :confirm-text="$t('operation.confirm')" />
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- <app-pull-refresh v-if="dateType === 0" ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
|
|
|
- :page-count="pageCount" @refresh="run">
|
|
|
- <div class="g-detail-table">
|
|
|
- <table cellspacing="0" cellpadding="0" v-for="(item, index) in dataList" :key="index">
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <th>
|
|
|
- <span>{{ item.goodscode }}/ {{ item.goodsname }}</span>
|
|
|
- <time class="text-small">{{ formatDate(item.ordertime) }}</time>
|
|
|
- </th>
|
|
|
- <th>
|
|
|
- <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <span class="text-small">委托单号</span>
|
|
|
- <span>{{ item.orderid }}</span>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <span class="text-small">委托状态</span>
|
|
|
- <span>{{ getWRTradeOrderStatusName(item.orderstatus) }}</span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <span class="text-small">委托价格({{ enumName(item.goodsid) }})</span>
|
|
|
- <span>{{ formatDecimal(item.orderprice, item.decimalplace) }}</span>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <span class="text-small">委托数量({{ item.goodscode }})</span>
|
|
|
- <span>{{ item.orderqty }}</span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- <tfoot>
|
|
|
- <tr>
|
|
|
- <td colspan="2">
|
|
|
- <Button size="small" @click="cancelOrder(item)">撤销</Button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tfoot>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </app-pull-refresh>
|
|
|
- <app-pull-refresh v-else ref="pullRefreshRef" v-model:loading="hisLoading" v-model:error="error" v-model:pageIndex="hisPageIndex"
|
|
|
- :page-count="hisPageCount" @refresh="onRefresh">
|
|
|
- <div class="g-detail-table">
|
|
|
- <table cellspacing="0" cellpadding="0" v-for="(item, index) in dataList" :key="index">
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <th>
|
|
|
- <span>{{ item.goodscode }}/ {{ item.goodsname }}</span>
|
|
|
- <time class="text-small">{{ formatDate(item.ordertime) }}</time>
|
|
|
- </th>
|
|
|
- <th>
|
|
|
- <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <span class="text-small">委托单号</span>
|
|
|
- <span>{{ item.orderid }}</span>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <span class="text-small">委托状态</span>
|
|
|
- <span>{{ getWRTradeOrderStatusName(item.orderstatus) }}</span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <span class="text-small">委托价格({{ enumName(item.goodsid) }})</span>
|
|
|
- <span>{{ formatDecimal(item.orderprice, item.decimalplace) }}</span>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <span class="text-small">委托数量({{ item.goodscode }})</span>
|
|
|
- <span>{{ item.orderqty }}</span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- <tfoot>
|
|
|
- <tr>
|
|
|
- <td colspan="2">
|
|
|
- <Button size="small" @click="cancelOrder(item)">撤销</Button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tfoot>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </app-pull-refresh>
|
|
|
- <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)"
|
|
|
- @closed="closeComponent" v-if="componentId" />
|
|
|
+ <div class="g-detail-table">
|
|
|
+ <table cellspacing="0" cellpadding="0">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <Checkbox v-model="checked">历史</Checkbox>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <app-date-picker v-model="dateValue" @confirm="onRefresh()" v-if="checked" />
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <order-history ref="historyRef" :params="historyParams" v-if="checked" />
|
|
|
+ <order-list :params="listParams" v-else />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, defineAsyncComponent, onUnmounted } from 'vue'
|
|
|
-import { useRequest } from '@/hooks/request'
|
|
|
-import { Button } from 'vant'
|
|
|
-import { useComponent } from '@/hooks/component'
|
|
|
-import { queryTradeOrderDetail, queryHisTradeOrderDetail } from '@/services/api/order'
|
|
|
-import { formatDate, formatDecimal } from '@/filters'
|
|
|
-import { getBuyOrSellName, getGoodsCurrencyItemName, getWRTradeOrderStatusName } from '@/constants/order'
|
|
|
-import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
|
|
|
-import AppSelect from '@mobile/components/base/select/index.vue'
|
|
|
-import AppCalendar from '@mobile/components/base/calendar/index.vue'
|
|
|
-import eventBus from '@/services/bus'
|
|
|
-import { useFuturesStore } from '@/stores'
|
|
|
+import { shallowRef, reactive, defineAsyncComponent } from 'vue'
|
|
|
+import { Checkbox } from 'vant'
|
|
|
+import AppDatePicker from '@mobile/components/base/datepicker/index.vue'
|
|
|
|
|
|
const props = defineProps({
|
|
|
- goodsId: Number
|
|
|
+ accountid: {
|
|
|
+ type: Number,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
})
|
|
|
|
|
|
-const dateType = shallowRef(0)
|
|
|
-const currentDate = shallowRef(new Date())
|
|
|
-const options = shallowRef([
|
|
|
- { label: '当前', value: 0 },
|
|
|
- { label: '历史', value: 1 }
|
|
|
-])
|
|
|
-
|
|
|
-const error = shallowRef(false)
|
|
|
-const dataList = shallowRef<Model.TradeOrderDetailRsp[]>([])
|
|
|
-const hisDataList = shallowRef<Model.HisTradeOrderDetailRsp[]>([])
|
|
|
-const pullRefreshRef = shallowRef()
|
|
|
-const selectedRow = shallowRef<Model.TradeOrderDetailRsp>()
|
|
|
+const OrderList = defineAsyncComponent(() => import('./list/index.vue')) // 当前
|
|
|
+const OrderHistory = defineAsyncComponent(() => import('./history/index.vue')) // 历史
|
|
|
|
|
|
-const componentMap = new Map<string, unknown>([
|
|
|
- ['Cancel', defineAsyncComponent(() => import('./cancel/index.vue'))], // 撤销
|
|
|
-])
|
|
|
+const historyRef = shallowRef()
|
|
|
+const checked = shallowRef(false)
|
|
|
+const dateValue = shallowRef([])
|
|
|
|
|
|
-const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
|
|
|
- pullRefreshRef.value?.refresh()
|
|
|
+const listParams = reactive<Partial<Model.TradeOrderDetailReq>>({
|
|
|
+ accountID: props.accountid.toString()
|
|
|
})
|
|
|
|
|
|
-const { loading, pageIndex, pageCount, run } = useRequest(queryTradeOrderDetail, {
|
|
|
- defaultParams: {
|
|
|
- pagesize: 20,
|
|
|
- tradeMode: '10',
|
|
|
- orderStatus: '3,7'
|
|
|
- },
|
|
|
- onSuccess: (res) => {
|
|
|
- dataList.value = []
|
|
|
- dataList.value.push(...res.data.filter(e => e.goodsid === props.goodsId))
|
|
|
- },
|
|
|
- onError: () => {
|
|
|
- error.value = true
|
|
|
- }
|
|
|
+const historyParams = reactive<Partial<Model.HisTradeOrderDetailReq>>({
|
|
|
+ accountID: props.accountid.toString()
|
|
|
})
|
|
|
|
|
|
-const { loading: hisLoading, pageIndex: hisPageIndex, pageCount: hisPageCount, run: runHis } = useRequest(queryHisTradeOrderDetail, {
|
|
|
- manual: true,
|
|
|
- onSuccess: (res) => {
|
|
|
- if (pageIndex.value === 1) {
|
|
|
- hisDataList.value = []
|
|
|
- }
|
|
|
- hisDataList.value.push(...res.data)
|
|
|
- },
|
|
|
- onError: () => {
|
|
|
- error.value = true
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-const enumName = (id: string) => {
|
|
|
- const { currencyid = 0 } = useFuturesStore().getGoods(id) ?? {}
|
|
|
- return getGoodsCurrencyItemName(currencyid)
|
|
|
-}
|
|
|
-
|
|
|
-// 撤销
|
|
|
-const cancelOrder = (item: Model.TradeOrderDetailRsp) => {
|
|
|
- selectedRow.value = item
|
|
|
- openComponent('Cancel')
|
|
|
-}
|
|
|
-
|
|
|
-// 选择日期
|
|
|
-const onConfirm = (value: Date) => {
|
|
|
- currentDate.value = value
|
|
|
- pageIndex.value = 1
|
|
|
- pullRefreshRef.value?.refresh()
|
|
|
-}
|
|
|
-
|
|
|
const onRefresh = () => {
|
|
|
- const dateString = currentDate.value.toISOString()
|
|
|
- const dateValue = formatDate(dateString, 'YYYYMMDD')
|
|
|
- runHis({
|
|
|
- tradeMode: '10',
|
|
|
- startDate: dateValue,
|
|
|
- endDate: dateValue,
|
|
|
- })
|
|
|
+ const date = dateValue.value.join('')
|
|
|
+ historyParams.startDate = date
|
|
|
+ historyParams.endDate = date
|
|
|
+ historyRef.value?.refresh()
|
|
|
}
|
|
|
-
|
|
|
-// 接收委托回应通知
|
|
|
-const orderRspNotify = eventBus.$on('OrderRsp', () => {
|
|
|
- run()
|
|
|
-})
|
|
|
-
|
|
|
-onUnmounted(() => {
|
|
|
- orderRspNotify.cancel()
|
|
|
-})
|
|
|
-
|
|
|
</script>
|