增加挂牌委托 挂牌成交 以及相关历史单据功能

src/business/trade/index.ts

@@ -243,20 +243,23 @@ export function useSpotPresaleTransferDesting() {
 export function useWrListingCancelOrder() {
     const loading = shallowRef(false)
 
-    const cancelSubmit = async (id: string, buyorsell: number) => {
+    /// 接口请求
+    const formData = reactive<Proto.WRListingCancelOrderReq>({
+        UserID: loginStore.userId,
+        AccountID: accountStore.accountId,
+        OperatorID: loginStore.loginId,
+        OrderSrc: OrderSrc.ORDERSRC_CLIENT,
+        ClientOrderTime: formatDate(new Date().toISOString()),
+        ClientSerialNo: v4(),
+        ClientType: ClientType.Web,
+    })
+
+    const cancelSubmit = async () => {
         try {
             loading.value = true
             return await wrListingCancelOrder({
                 data: {
-                    UserID: loginStore.userId,
-                    AccountID: accountStore.accountId,
-                    OperatorID: loginStore.loginId,
-                    OrderSrc: OrderSrc.ORDERSRC_CLIENT,
-                    OldWRTradeOrderID: Long.fromString(id),
-                    ClientOrderTime: formatDate(new Date().toISOString()),
-                    ClientSerialNo: v4(),
-                    ClientType: ClientType.Web,
-                    BuyOrSell: buyorsell,
+                    ...formData,
                 }
             })
         } finally {
@@ -266,6 +269,7 @@ export function useWrListingCancelOrder() {
 
     return {
         loading,
+        formData,
         cancelSubmit
     }
 }

src/constants/order.ts

@@ -27,6 +27,12 @@ export enum PriceMode {
     Limit = 2, // 限价
 }
 
+/// 仓单贸易类型
+export enum WrTradeType {
+    Liting = 1,
+    DeListing = 2,
+}
+
 /**
  * 获取买卖方向列表
  * @returns 
@@ -38,6 +44,19 @@ export function getBuyOrSellList() {
     ]
 }
 
+
+/**
+ * 获取仓单贸易类型列表
+ * @returns 
+ */
+export function getWrTradeTypeList() {
+    return [
+        { label: '挂牌', value: WrTradeType.Liting },
+        { label: '摘牌', value: WrTradeType.DeListing },
+    ]
+}
+
+
 /**
  * 获取	委托单据类型列表
  * @returns 
@@ -58,6 +77,15 @@ export function getBuyOrSellName(value: number) {
     return getEnumTypeName(getBuyOrSellList(), value)
 }
 
+
+/**
+ * 获取仓单贸易类型名称
+ * @returns 
+ */
+export function getWrTradeTypeName(value: number) {
+    return getEnumTypeName(getWrTradeTypeList(), value)
+}
+
 /**
  * 获取买卖方向名称
  * @returns 

src/packages/mobile/views/order/list/Index.vue

@@ -32,8 +32,10 @@
                 <component :is="componentMap.get('goodstrade')" />
             </Tab>
             <Tab title="挂牌委托">
+                <component :is="componentMap.get('listingorder')" />
             </Tab>
             <Tab title="挂牌成交">
+                <component :is="componentMap.get('listingtrade')" />
             </Tab>
             <Tab title="点价委托">
                 <component :is="componentMap.get('pricingorder')" />
@@ -68,6 +70,10 @@ const componentMap = new Map<string, unknown>([
     ['hisgoodstrade', defineAsyncComponent(() => import('./components/hisgoodstrade/list/Index.vue'))], // 历史订单成交
     ['pricingorder', defineAsyncComponent(() => import('./components/pricingorder/list/Index.vue'))], // 挂牌点价委托
     ['pricingtrade', defineAsyncComponent(() => import('./components/pricingtrade/list/Index.vue'))], // 挂牌点价成交
+    ['listingtrade', defineAsyncComponent(() => import('./components/listingtrade/list/Index.vue'))], // 挂牌委托
+    ['listingorder', defineAsyncComponent(() => import('./components/listingorder/list/Index.vue'))], // 挂牌成交
+    ['hislistingtrade', defineAsyncComponent(() => import('./components/hislistingtrade/list/Index.vue'))], // 历史挂牌委托
+    ['hislistingorder', defineAsyncComponent(() => import('./components/hislistingorder/list/Index.vue'))], // 历史挂牌成交
 ])
 
 const onMoreClick = () => {
@@ -94,6 +100,14 @@ const onMoreClick = () => {
             showComponent('hisgoodstrade')
             break
         }
+        case 7: {
+            showComponent('hislistingorder')
+            break
+        }
+        case 8: {
+            showComponent('hislistingtrade')
+            break
+        }
     }
 }
 

src/packages/mobile/views/order/list/components/hislistingorder/detail/Index.vue

@@ -0,0 +1,55 @@
+<!-- 我的订单- 历史挂牌委托 - 详情 -->
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar title="详细" @back="closed" />
+            </template>
+            <div v-if="props" class="order-detail__container g-form__container">
+                <CellGroup title="历史挂牌委托信息">
+                    <Cell title="商品代码/名称" :value="selectedRow.deliverygoodscode + '/' + selectedRow.deliverygoodsname" />
+                    <Cell title="仓库" :value="selectedRow.warehousename" />
+                    <Cell title="仓库" :value="getWrTradeTypeName(selectedRow.wrtradetype)" />
+                    <Cell title="方向" :value="getBuyOrSellName(selectedRow.buyorsell)" />
+                    <Cell title="委托价格" :value="formatDecimal(selectedRow.fixedprice)" />
+                    <Cell title="委托数量" :value="formatDecimal(selectedRow.orderqty)" />
+                    <Cell title="成交数量" :value="formatDecimal(selectedRow.tradeqty)" />
+                    <Cell title="撤销数量" :value="formatDecimal(selectedRow.cancelqty)" />
+                    <Cell title="委托时间" :value="formatDate(selectedRow.ordertime)" />wrtradeorderstatus
+                    <Cell title="委托状态" :value="getWRTradeOrderStatusName(selectedRow.wrtradeorderstatus)" />
+                    <Cell title="委托单号" :value="selectedRow.wrtradeorderid" />
+                </CellGroup>
+            </div>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType } from 'vue'
+import AppModal from '@/components/base/modal/index.vue'
+import { CellGroup, Cell } from 'vant'
+import { getBuyOrSellName, getWRTradeOrderStatusName, getWrTradeTypeName } from '@/constants/order'
+import { formatDate, formatDecimal } from '@/filters'
+
+const showModal = shallowRef(true)
+// 是否刷新父组件数据
+const refresh = shallowRef(false)
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.WrOrderDetailRsp>,
+        required: true,
+    }
+})
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/order/list/components/hislistingorder/list/Index.vue

@@ -0,0 +1,149 @@
+<!-- 我的订单- 历史挂牌订单 - 委托 -->
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar title="历史挂牌委托" @back="closed" />
+            </template>
+            <Cell title="查询日期" :value="date" @click="show = true" is-link></Cell>
+            <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
+        :page-count="pageCount" @refresh="run">
+                <div class="g-order-list">
+                    <div class="g-order-list__box" v-for="(item, index) in dataList" :key="index">
+                        <div class="g-order-list__titlebar">
+                            <div class="left">
+                                <h5>{{ item.goodscode }}/{{ item.goodsname }}</h5>
+                            </div>
+                        </div>
+                        <div class="g-order-list__content">
+                            <ul>
+                                <li>
+                                    <span>时间：</span>
+                                    <span>{{ formatDate(item.ordertime, 'HH:mm:ss') }}</span>
+                                </li>
+                                <li>
+                                    <span>方向：</span>
+                                    <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
+                                </li>
+                                <li>
+                                    <span>挂牌数量：</span>
+                                    <span>{{ formatDecimal(item.orderqty) }}</span>
+                                </li>
+                                <li>
+                                    <span>挂牌价格：</span>
+                                    <span>{{ formatDecimal(item.fixedprice) }}</span>
+                                </li>
+                                <li>
+                                    <span>成交数量：</span>
+                                    <span>{{ formatDecimal(item.tradeqty) }}</span>
+                                </li>
+                                <li>
+                                    <span>仓库：</span>
+                                    <span>{{ item.warehousename }}</span>
+                                </li>
+                                <li>
+                                    <span>委托状态：</span>
+                                    <span>{{ getWRTradeOrderStatusName(item.wrtradeorderstatus) }}</span>
+                                </li>
+                                <li>
+                                    <span>单号：</span>
+                                    <span>{{ item.wrtradeorderid }}</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="g-order-list__btnbar">
+                            <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
+                        </div>
+                    </div>
+                </div>
+                <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)" @closed="closeComponent"
+                    v-if="componentId" />
+            </app-pull-refresh>
+            <Calendar :show="show" type="range" :max-date="new Date()" :min-date="moment().subtract(1, 'years').toDate()"
+            @close="onClose" @confirm="onConfirm" />
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, ref, reactive, defineAsyncComponent } from 'vue'
+import { useRequest } from '@/hooks/request'
+import { queryWrOrderDetail } from '@/services/api/order'
+import { getBuyOrSellName, getWRTradeOrderStatusName } from '@/constants/order'
+import { formatDate, formatDecimal } from '@/filters'
+import { useComponent } from '@/hooks/component'
+import { Button, Calendar, Cell } from 'vant'
+import moment from 'moment'
+import AppModal from '@/components/base/modal/index.vue'
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+
+const dataList = shallowRef<Model.WrOrderDetailRsp[]>([])
+const showModal = shallowRef(true)
+/// 是否显示日历
+const show = shallowRef(false)
+/// 显示日期
+const date = ref('')
+const selectedRow = shallowRef<Model.WrOrderDetailRsp>()
+const error = shallowRef(false)
+const pullRefreshRef = shallowRef()
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    pullRefreshRef.value?.refresh()
+})
+
+const componentMap = new Map<string, unknown>([
+    ['detail', defineAsyncComponent(() => import('../detail/Index.vue'))],
+])
+
+const formData = reactive<Model.WrOrderDetailReq>({
+    marketid: 17201,
+    haswr: 1,
+})
+
+const { loading, pageIndex, pageCount, run } = useRequest(queryWrOrderDetail, {
+    manual: true,
+    params: {
+        ...formData
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
+
+const showComponent = (componentName: string, row: Model.WrOrderDetailRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+
+const onClose = () => {
+    show.value = false
+}
+
+const onConfirm = (values: Date[]) => {
+    const [start, end] = values;
+    show.value = false
+    formData.begindate = formatDate(start.toString(), 'YYYYMMDD')
+    formData.enddate = formatDate(end.toString(), 'YYYYMMDD')
+    date.value = formData.begindate + '-' + formData.enddate
+    /// 查询
+    pullRefreshRef.value?.refresh()
+}
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/order/list/components/hislistingtrade/detail/Index.vue

@@ -0,0 +1,56 @@
+<!-- 我的订单- 历史挂牌成交 - 详情 -->
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar title="详细" @back="closed" />
+            </template>
+            <div v-if="props" class="order-detail__container g-form__container">
+                <CellGroup title="历史挂牌成交信息">
+                    <Cell title="商品代码/名称" :value="selectedRow.deliverygoodscode+'/'+selectedRow.deliverygoodsname"/>
+                    <Cell title="仓库" :value="selectedRow.warehousename" />
+                    <Cell title="类型" :value="getWrTradeTypeName(selectedRow.wrtradetype)" />
+                    <Cell title="方向" :value="getBuyOrSellName(selectedRow.buyorsell)" />
+                    <Cell title="成交价格" :value="formatDecimal(selectedRow.tradeprice)" />
+                    <Cell title="成交数量" :value="formatDecimal(selectedRow.tradeqty)" />
+                    <Cell title="成交金额" :value="formatDecimal(selectedRow.tradeqty*selectedRow.tradeprice)" />
+                    <Cell title="成交时间" :value="formatDate(selectedRow.tradetime)" />
+                    <Cell title="对手方" :value="selectedRow.matchaccountid" />
+                    <Cell title="成交单号" :value="selectedRow.wrtradedetailid" />
+                </CellGroup>
+            </div>
+            <div v-else>
+                <Empty />
+            </div>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType } from 'vue'
+import { CellGroup, Cell } from 'vant'
+import { formatDate, formatDecimal } from '@/filters'
+import AppModal from '@/components/base/modal/index.vue'
+import { getBuyOrSellName, getWrTradeTypeName } from '@/constants/order'
+
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.WrTradeDetailRsp>,
+        required: true,
+    }
+})
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/order/list/components/hislistingtrade/list/Index.vue

@@ -0,0 +1,145 @@
+<!-- 我的订单- 历史挂牌订单 - 成交 -->
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar title="历史挂牌成交" @back="closed" />
+            </template>
+            <Cell title="查询日期" :value="date" @click="show = true" is-link></Cell>
+            <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
+        :page-count="pageCount" @refresh="run">
+                <div class="g-order-list">
+                    <div class="g-order-list__box" v-for="(item, index) in dataList" :key="index">
+                        <div class="g-order-list__titlebar">
+                            <div class="left">
+                                <h5>{{ item.deliverygoodscode }}/{{ item.deliverygoodsname }}</h5>
+                            </div>
+                        </div>
+                        <div class="g-order-list__content">
+                            <ul>
+                                <li>
+                                    <span>成交时间：</span>
+                                    <span>{{ formatDate(item.tradedate) }}</span>
+                                </li>
+                                <li>
+                                    <span>方向：</span>
+                                    <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
+                                </li>
+                                <li>
+                                    <span>成交数量：</span>
+                                    <span>{{ item.tradeqty }}</span>
+                                </li>
+                                <li>
+                                    <span>成交价格：</span>
+                                    <span>{{ formatDecimal(item.tradeqty) }}</span>
+                                </li>
+                                <li>
+                                    <span>成交金额：</span>
+                                    <span>{{ formatDecimal(item.tradeprice*item.tradeqty) }}</span>
+                                </li>
+                                <li>
+                                    <span>仓库：</span>
+                                    <span>{{ item.warehousename }}</span>
+                                </li>
+                                <li>
+                                    <span>成交单号：</span>
+                                    <span>{{ item.wrtradedetailid }}</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="g-order-list__btnbar">
+                            <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
+                        </div>
+                    </div>
+                </div>
+                <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)" @closed="closeComponent"
+                    v-if="componentId" />
+            </app-pull-refresh>
+            <Calendar :show="show" type="range" :max-date="new Date()" :min-date="moment().subtract(1, 'years').toDate()"
+            @close="onClose" @confirm="onConfirm" />
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, ref, reactive, defineAsyncComponent } from 'vue'
+import { useRequest } from '@/hooks/request'
+import { queryWrTradeDetail } from '@/services/api/order'
+import { getBuyOrSellName } from '@/constants/order'
+import { formatDate, formatDecimal } from '@/filters'
+import { useComponent } from '@/hooks/component'
+import { Button, Calendar, Cell } from 'vant'
+import moment from 'moment'
+import AppModal from '@/components/base/modal/index.vue'
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+
+const dataList = shallowRef<Model.WrTradeDetailRsp[]>([])
+const showModal = shallowRef(true)
+/// 是否显示日历
+const show = shallowRef(false)
+/// 显示日期
+const date = ref('')
+const selectedRow = shallowRef<Model.WrTradeDetailRsp>()
+const error = shallowRef(false)
+const pullRefreshRef = shallowRef()
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    pullRefreshRef.value?.refresh()
+})
+
+const componentMap = new Map<string, unknown>([
+    ['detail', defineAsyncComponent(() => import('../detail/Index.vue'))],
+])
+
+const formData = reactive<Model.WrTradeDetailReq>({
+    marketid: 17201,
+    haswr: 1
+})
+
+const { loading, pageIndex, pageCount, run } = useRequest(queryWrTradeDetail, {
+    manual: true,
+    params: {
+        ...formData
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
+
+const showComponent = (componentName: string, row: Model.WrTradeDetailRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+
+const onClose = () => {
+    show.value = false
+}
+
+const onConfirm = (values: Date[]) => {
+    const [start, end] = values;
+    show.value = false
+    formData.begindate = formatDate(start.toString(), 'YYYYMMDD')
+    formData.enddate = formatDate(end.toString(), 'YYYYMMDD')
+    date.value = formData.begindate + '-' + formData.enddate
+    /// 查询
+    pullRefreshRef.value?.refresh()
+}
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/order/list/components/hisswaporder/list/Index.vue

@@ -1,4 +1,4 @@
-<!-- 我的订单- 掉期订单 - 委托 -->
+<!-- 我的订单- 历史掉期订单 - 委托 -->
 <template>
     <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
         <app-view class="g-form">

src/packages/mobile/views/order/list/components/hisswaptrade/list/Index.vue

@@ -1,4 +1,4 @@
-<!-- 我的订单- 掉期订单 - 成交 -->
+<!-- 我的订单- 历史掉期订单 - 成交 -->
 <template>
     <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
         <app-view class="g-form">

src/packages/mobile/views/order/list/components/listingorder/detail/Index.vue

@@ -0,0 +1,83 @@
+<!-- 我的订单- 挂牌委托 - 详情 -->
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar title="详细" @back="closed" />
+            </template>
+            <div v-if="props" class="order-detail__container g-form__container">
+                <CellGroup title="挂牌委托信息">
+                    <Cell title="商品代码/名称" :value="selectedRow.deliverygoodscode + '/' + selectedRow.deliverygoodsname" />
+                    <Cell title="仓库" :value="selectedRow.warehousename" />
+                    <Cell title="仓库" :value="getWrTradeTypeName(selectedRow.wrtradetype)" />
+                    <Cell title="方向" :value="getBuyOrSellName(selectedRow.buyorsell)" />
+                    <Cell title="委托价格" :value="formatDecimal(selectedRow.fixedprice)" />
+                    <Cell title="委托数量" :value="formatDecimal(selectedRow.orderqty)" />
+                    <Cell title="成交数量" :value="formatDecimal(selectedRow.tradeqty)" />
+                    <Cell title="撤销数量" :value="formatDecimal(selectedRow.cancelqty)" />
+                    <Cell title="委托时间" :value="formatDate(selectedRow.ordertime)" />wrtradeorderstatus
+                    <Cell title="委托状态" :value="getWRTradeOrderStatusName(selectedRow.wrtradeorderstatus)" />
+                    <Cell title="委托单号" :value="selectedRow.wrtradeorderid" />
+                </CellGroup>
+            </div>
+            <template #footer v-if="selectedRow.wrtradeorderstatus === 3 || selectedRow.wrtradeorderstatus === 7">
+                <Button type="primary" block round @click="onCancelSumit">撤销</Button>
+            </template>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType } from 'vue'
+import AppModal from '@/components/base/modal/index.vue'
+import { CellGroup, Cell, Button } from 'vant'
+import { getBuyOrSellName, getWRTradeOrderStatusName, getWrTradeTypeName } from '@/constants/order'
+import { formatDate, formatDecimal } from '@/filters'
+import { useWrListingCancelOrder } from '@/business/trade'
+import { dialog, fullloading } from '@/utils/vant'
+
+const showModal = shallowRef(true)
+// 是否刷新父组件数据
+const refresh = shallowRef(false)
+const { cancelSubmit, formData } = useWrListingCancelOrder()
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.WrOrderDetailRsp>,
+        required: true,
+    }
+})
+
+const onCancelSumit = () => {
+    dialog({
+        message: '确认要撤销吗？',
+        showCancelButton: true,
+    }).then(() => {
+        ///  参数信息
+        formData.Header = { MarketID: 17201 }
+        formData.OldWRTradeOrderID = props.selectedRow.wrtradeorderid
+        formData.BuyOrSell = props.selectedRow.buyorsell
+
+        /// loding....
+        fullloading((hideLoading) => {
+            cancelSubmit().then(() => {
+                hideLoading('撤销成功')
+                closed(true)
+            }).catch((err) => {
+                hideLoading(err, 'fail')
+            })
+        })
+    })
+}
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/order/list/components/listingorder/list/Index.vue

@@ -0,0 +1,131 @@
+<!-- 我的订单-挂牌委托 -->
+<template>
+    <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
+        :page-count="pageCount" @refresh="run">
+        <div class="g-order-list">
+            <div class="g-order-list__box" v-for="(item, index) in dataList" :key="index">
+                <div class="g-order-list__titlebar">
+                    <div class="left">
+                        <h5>{{ item.deliverygoodscode }}/{{ item.deliverygoodsname }}</h5>
+                    </div>
+                </div>
+                <div class="g-order-list__content">
+                    <ul>
+                        <li>
+                            <span>时间：</span>
+                            <span>{{ formatDate(item.ordertime, 'HH:mm:ss') }}</span>
+                        </li>
+                        <li>
+                            <span>方向：</span>
+                            <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
+                        </li>
+                        <li>
+                            <span>挂牌数量：</span>
+                            <span>{{ formatDecimal(item.orderqty) }}</span>
+                        </li>
+                        <li>
+                            <span>挂牌价格：</span>
+                            <span>{{ formatDecimal(item.fixedprice) }}</span>
+                        </li>
+                        <li>
+                            <span>成交数量：</span>
+                            <span>{{ formatDecimal(item.tradeqty) }}</span>
+                        </li>
+                        <li>
+                            <span>仓库：</span>
+                            <span>{{ item.warehousename }}</span>
+                        </li>
+                        <li>
+                            <span>委托状态：</span>
+                            <span>{{ getWRTradeOrderStatusName(item.wrtradeorderstatus) }}</span>
+                        </li>
+                        <li>
+                            <span>单号：</span>
+                            <span>{{ item.wrtradeorderid }}</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="g-order-list__btnbar">
+                    <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
+                    <Button size="small" v-if="(item.wrtradeorderstatus === 3 || item.wrtradeorderstatus === 7)"
+                        @click="onCancelSumit(item)" round>撤销</Button>
+                </div>
+            </div>
+        </div>
+        <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)" @closed="closeComponent"
+            v-if="componentId" />
+    </app-pull-refresh>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, defineAsyncComponent } from 'vue'
+import { Button } from 'vant'
+import { useComponent } from '@/hooks/component'
+import { useRequest } from '@/hooks/request'
+import { queryWrOrderDetail } from '@/services/api/order'
+import { getBuyOrSellName, getWRTradeOrderStatusName } from '@/constants/order'
+import { formatDate, formatDecimal } from '@/filters'
+import { useWrListingCancelOrder } from '@/business/trade'
+import { dialog } from '@/utils/vant'
+import { fullloading } from '@/utils/vant'
+
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+
+const componentMap = new Map<string, unknown>([
+    ['detail', defineAsyncComponent(() => import('../detail/Index.vue'))]
+])
+
+const { cancelSubmit, formData } = useWrListingCancelOrder()
+const dataList = shallowRef<Model.WrOrderDetailRsp[]>([])
+const selectedRow = shallowRef<Model.WrOrderDetailRsp>()
+const error = shallowRef(false)
+const pullRefreshRef = shallowRef()
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    pullRefreshRef.value?.refresh()
+})
+
+const { loading, pageIndex, pageCount, run } = useRequest(queryWrOrderDetail, {
+    params: {
+        pagesize: 20,
+        wrtradetype: 1,
+        marketid: 17201,
+        haswr: 1
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
+
+const onCancelSumit = (item: Model.WrOrderDetailRsp) => {
+    dialog({
+        message: '确认要撤销吗？',
+        showCancelButton: true,
+    }).then(() => {
+        ///  参数信息
+        formData.Header = { MarketID: 17201 }
+        formData.OldWRTradeOrderID = item.wrtradeorderid
+        formData.BuyOrSell = item.buyorsell
+
+        /// loding....
+        fullloading((hideLoading) => {
+            cancelSubmit().then(() => {
+                hideLoading('撤销成功')
+            }).catch((err) => {
+                hideLoading(err, 'fail')
+            })
+        })
+    })
+}
+
+const showComponent = (componentName: string, row: Model.WrOrderDetailRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+</script>

src/packages/mobile/views/order/list/components/listingtrade/detail/Index.vue

@@ -0,0 +1,56 @@
+<!-- 我的订单- 挂牌成交 - 详情 -->
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar title="详细" @back="closed" />
+            </template>
+            <div v-if="props" class="order-detail__container g-form__container">
+                <CellGroup title="挂牌成交信息">
+                    <Cell title="商品代码/名称" :value="selectedRow.deliverygoodscode+'/'+selectedRow.deliverygoodsname"/>
+                    <Cell title="仓库" :value="selectedRow.warehousename" />
+                    <Cell title="类型" :value="getWrTradeTypeName(selectedRow.wrtradetype)" />
+                    <Cell title="方向" :value="getBuyOrSellName(selectedRow.buyorsell)" />
+                    <Cell title="成交价格" :value="formatDecimal(selectedRow.tradeprice)" />
+                    <Cell title="成交数量" :value="formatDecimal(selectedRow.tradeqty)" />
+                    <Cell title="成交金额" :value="formatDecimal(selectedRow.tradeqty*selectedRow.tradeprice)" />
+                    <Cell title="成交时间" :value="formatDate(selectedRow.tradetime)" />
+                    <Cell title="对手方" :value="selectedRow.matchaccountid" />
+                    <Cell title="成交单号" :value="selectedRow.wrtradedetailid" />
+                </CellGroup>
+            </div>
+            <div v-else>
+                <Empty />
+            </div>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType } from 'vue'
+import { CellGroup, Cell } from 'vant'
+import { formatDate, formatDecimal } from '@/filters'
+import AppModal from '@/components/base/modal/index.vue'
+import { getBuyOrSellName, getWrTradeTypeName } from '@/constants/order'
+
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.WrTradeDetailRsp>,
+        required: true,
+    }
+})
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/order/list/components/listingtrade/list/Index.vue

@@ -0,0 +1,98 @@
+<!-- 我的订单-挂牌成交 -->
+<template>
+    <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
+        :page-count="pageCount" @refresh="run">
+        <div class="g-order-list">
+            <div class="g-order-list__box" v-for="(item, index) in dataList" :key="index">
+                <div class="g-order-list__titlebar">
+                    <div class="left">
+                        <h5>{{ item.deliverygoodscode }}/{{ item.deliverygoodsname }}</h5>
+                    </div>
+                </div>
+                <div class="g-order-list__content">
+                    <ul>
+                        <li>
+                            <span>成交时间：</span>
+                            <span>{{ formatDate(item.tradedate) }}</span>
+                        </li>
+                        <li>
+                            <span>方向：</span>
+                            <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
+                        </li>
+                        <li>
+                            <span>成交数量：</span>
+                            <span>{{ item.tradeqty }}</span>
+                        </li>
+                        <li>
+                            <span>成交价格：</span>
+                            <span>{{ formatDecimal(item.tradeqty) }}</span>
+                        </li>
+                        <li>
+                            <span>成交金额：</span>
+                            <span>{{ formatDecimal(item.tradeprice*item.tradeqty) }}</span>
+                        </li>
+                        <li>
+                            <span>仓库：</span>
+                            <span>{{ item.warehousename }}</span>
+                        </li>
+                        <li>
+                            <span>成交单号：</span>
+                            <span>{{ item.wrtradedetailid }}</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="g-order-list__btnbar">
+                    <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
+                </div>
+            </div>
+        </div>
+        <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)" @closed="closeComponent"
+            v-if="componentId" />
+    </app-pull-refresh>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, defineAsyncComponent } from 'vue'
+import { Button } from 'vant'
+import { useComponent } from '@/hooks/component'
+import { useRequest } from '@/hooks/request'
+import { queryWrTradeDetail } from '@/services/api/order'
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+import { getBuyOrSellName } from '@/constants/order'
+import { formatDate, formatDecimal } from '@/filters'
+
+const componentMap = new Map<string, unknown>([
+    ['detail', defineAsyncComponent(() => import('../detail/Index.vue'))],
+])
+
+const dataList = shallowRef<Model.WrTradeDetailRsp[]>([])
+const selectedRow = shallowRef<Model.WrTradeDetailRsp>()
+const error = shallowRef(false)
+const pullRefreshRef = shallowRef()
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    pullRefreshRef.value?.refresh()
+})
+
+const { loading, pageIndex, pageCount, run } = useRequest(queryWrTradeDetail, {
+    params: {
+        pagesize: 20,
+        marketid: 17201,
+        haswr: 1
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
+
+const showComponent = (componentName: string, row: Model.WrTradeDetailRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+</script>

src/types/proto/trade.d.ts

@@ -116,7 +116,7 @@ declare global {
             Header?: IMessageHead;
             UserID?: number // 用户ID
             AccountID?: number // 资金账号
-            OldWRTradeOrderID?: Long // 目标仓单贸易委托单ID
+            OldWRTradeOrderID?: string // 目标仓单贸易委托单ID
             OrderSrc?: number // 委托来源
             ClientSerialNo?: string // 客户端流水号
             ClientOrderTime?: string // 客户端委托时间