增加掉期市场委托单以及成交单功能

public/config/router.json

@@ -156,6 +156,36 @@
             {
                 "authType": 2,
                 "sort": 4,
+                "title": "掉期市场",
+                "code": "bottom_swap",
+                "component": "views/footer/index.vue",
+                "children": [
+                    {
+                        "authType": 2,
+                        "sort": 1,
+                        "title": "持仓汇总",
+                        "code": "bottom_swap_position",
+                        "component": "views/footer/swap/position/index.vue"
+                    },
+                    {
+                        "authType": 2,
+                        "sort": 2,
+                        "title": "委托",
+                        "code": "bottom_swap_order",
+                        "component": "views/footer/swap/order/index.vue"
+                    },
+                    {
+                        "authType": 2,
+                        "sort": 3,
+                        "title": "成交",
+                        "code": "bottom_swap_trade",
+                        "component": "views/footer/swap/trade/index.vue"
+                    }
+                ]
+            },
+            {
+                "authType": 2,
+                "sort": 5,
                 "title": "履约信息",
                 "code": "bottom_performance",
                 "component": "views/footer/index.vue",
@@ -178,7 +208,7 @@
             },
             {
                 "authType": 2,
-                "sort": 5,
+                "sort": 6,
                 "title": "资金信息",
                 "code": "bottom_capital",
                 "component": "views/footer/index.vue",
@@ -357,7 +387,7 @@
                     },
                     {
                         "authType": 1,
-                        "sort": 3,
+                        "sort": 2,
                         "title": "预售转让",
                         "code": "query_order_presell",
                         "url": "spot",
@@ -396,7 +426,7 @@
                     },
                     {
                         "authType": 1,
-                        "sort": 2,
+                        "sort": 3,
                         "title": "现货仓单",
                         "code": "query_order_spot",
                         "url": "spot",
@@ -418,6 +448,31 @@
                                 "component": "views/query/order/spot/history/index.vue"
                             }
                         ]
+                    },
+                    {
+                        "authType": 1,
+                        "sort": 4,
+                        "title": "掉期市场",
+                        "code": "query_order_swap",
+                        "url": "swap",
+                        "urlType": 1,
+                        "component": "views/query/order/swap/index.vue",
+                        "children": [
+                            {
+                                "authType": 2,
+                                "sort": 1,
+                                "title": "当前记录",
+                                "code": "query_order_swap_list",
+                                "component": "views/query/order/swap/list/index.vue"
+                            },
+                            {
+                                "authType": 2,
+                                "sort": 2,
+                                "title": "历史记录",
+                                "code": "query_order_swap_history",
+                                "component": "views/query/order/swap/history/index.vue"
+                            }
+                        ]
                     }
                 ]
             },
@@ -504,6 +559,31 @@
                                 "component": "views/query/trade/spot/history/index.vue"
                             }
                         ]
+                    },
+                    {
+                        "authType": 1,
+                        "sort": 4,
+                        "title": "掉期市场",
+                        "code": "query_trade_swap",
+                        "url": "swap",
+                        "urlType": 1,
+                        "component": "views/query/trade/swap/index.vue",
+                        "children": [
+                            {
+                                "authType": 2,
+                                "sort": 1,
+                                "title": "当前记录",
+                                "code": "query_trade_swap_list",
+                                "component": "views/query/trade/swap/list/index.vue"
+                            },
+                            {
+                                "authType": 2,
+                                "sort": 2,
+                                "title": "历史记录",
+                                "code": "query_trade_swap_history",
+                                "component": "views/query/trade/swap/history/index.vue"
+                            }
+                        ]
                     }
                 ]
             },

src/packages/pc/views/footer/spot/order/cancel/index.vue

@@ -1,4 +1,4 @@
-<!-- 现货仓单-挂单-撤销 -->
+<!-- 掉期市场-挂单-撤销 -->
 <template>
     <app-drawer title="提示" v-model:show="show" :loading="loading" :refresh="refresh">
         <div>确认要撤销吗？</div>

src/packages/pc/views/footer/swap/order/cancel/index.vue

@@ -0,0 +1,48 @@
+<!-- 掉期市场-挂单-撤销 -->
+<template>
+    <app-drawer title="提示" v-model:show="show" :loading="loading" :refresh="refresh">
+        <div>确认要撤销吗？</div>
+        <template #footer>
+            <el-button type="info" @click="onCancel(false)">取消</el-button>
+            <el-button type="primary" @click="onCancelSumit()">提交</el-button>
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, PropType } from 'vue'
+import { ElMessage } from 'element-plus'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+import { useCancelOrder } from '@/business/trade'
+import { handleRequestBigNumber } from '@/filters'
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.TradeOrderDetailRsp>,
+        required: true
+    }
+})
+
+const { cancelSubmit, formData, loading } = useCancelOrder()
+
+const show = ref(true)
+const refresh = ref(false)
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onCancelSumit = () => {
+    /// 市场ID
+    formData.Header = { MarketID: props.selectedRow.marketid }
+    formData.OldOrderId = handleRequestBigNumber(props.selectedRow.orderid)
+    /// 提交
+    cancelSubmit().then(() => {
+        ElMessage.success('提交成功')
+        onCancel(true)
+    }).catch((err) => {
+        ElMessage.error('提交失败:' + err)
+    })
+}
+</script>

src/packages/pc/views/footer/swap/order/index.vue

@@ -0,0 +1,82 @@
+<!-- 掉期市场-委托 -->
+<template>
+    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading" :row-key="rowKey"
+        :expand-row-keys="expandKeys" @row-click="rowClick">
+        <!-- 商品代码/名称 -->
+        <template #wrtradetype="{ row }">
+            {{ row.goodscode }}/{{ row.goodsname }}
+        </template>
+        <!-- 方向 -->
+        <template #buyorsell="{ value }">
+            {{ getBuyOrSellName(value) }}
+        </template>
+        <!-- 委托状态 -->
+        <template #orderstatus="{ value }">
+            {{ getWRTradeOrderStatusName(value) }}
+        </template>
+        <!-- 委托状态 -->
+        <template #wrtradeorderstatus="{ value }">
+            {{ getWRTradeOrderStatusName(value) }}
+        </template>
+        <!-- 委托时间 -->
+        <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)">撤销</el-button>
+            </div>
+        </template>
+        <template #footer>
+            <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)"
+                @closed="closeComponent" v-if="componentId" />
+        </template>
+    </app-table>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, defineAsyncComponent } from 'vue'
+import { formatDate } from '@/filters'
+import { useRequest } from '@/hooks/request'
+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 AppTable from '@pc/components/base/table/index.vue'
+
+const componentMap = new Map<string, unknown>([
+    ['cancel', defineAsyncComponent(() => import('./cancel/index.vue'))],
+])
+
+const { loading, dataList, run } = useRequest(queryTradeOrderDetail, {
+    params: {
+        tradeMode: '46'
+    },
+})
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    run()
+})
+
+const { rowKey, expandKeys, rowClick } = useComposeTable<Model.TradeOrderDetailRsp>({ rowKey: 'orderid' })
+const selectedRow = shallowRef<Model.TradeOrderDetailRsp>()
+
+const tableColumns = shallowRef<Model.TableColumn[]>([
+    { prop: 'goodsname', label: '商品代码/名称' },
+    { prop: 'buyorsell', label: '方向' },
+    { prop: 'orderqty', label: '委托数量' },
+    { prop: 'orderprice', label: '委托价格' },
+    { prop: 'tradeqty', label: '成交数量' },
+    { prop: 'orderstatus', label: '委托状态' },
+    { prop: 'ordertime', label: '委托时间' },
+    { prop: 'orderid', label: '挂牌单号' },
+])
+
+const showComponent = (componentName: string, row: Model.TradeOrderDetailRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+
+</script>

src/packages/pc/views/footer/swap/position/index.vue

@@ -0,0 +1,47 @@
+<!-- 现掉期市场-持仓汇总 -->
+<template>
+    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
+        <!-- 挂牌类型 -->
+        <template #wrtradetype="{ value }">
+            {{ getWrTradeTypeName(value) }}
+        </template>
+        <!-- 成交金额 -->
+        <template #tradeamount="{ row }">
+            {{ formatDecimal(row.tradeqty*row.tradeprice) }}
+        </template>
+        <!-- 成交时间 -->
+        <template #tradetime="{ value }">
+            {{ formatDate(value) }}
+        </template>
+    </app-table>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+import { formatDate, formatDecimal } from '@/filters'
+import { useRequest } from '@/hooks/request'
+import { queryWrTradeDetail } from '@/services/api/order'
+import { getWrTradeTypeName } from '@/constants/order'
+import AppTable from '@pc/components/base/table/index.vue'
+
+const { loading, dataList } = useRequest(queryWrTradeDetail, {
+    params: {
+        marketid: 17201,
+        haswr: 1
+    },
+})
+
+const tableColumns = shallowRef<Model.TableColumn[]>([
+    { prop: 'wrtradedetailid', label: '成交单号' },
+    { prop: 'wrtradetype', label: '类型' },
+    { prop: 'deliverygoodsname', label: '品种' },
+    { prop: 'wrstandardname', label: '商品' },
+    { prop: 'warehousename', label: '仓库' },
+    { prop: 'tradeprice', label: '成交价格' },
+    { prop: 'tradeqty', label: '成交数量' },
+    { prop: 'tradeamount', label: '成交金额 ' },
+    { prop: 'chargevalue', label: '手续费' },
+    { prop: 'matchusername', label: '对手方' },
+    { prop: 'tradetime', label: '成交时间' }
+])
+</script>

src/packages/pc/views/footer/swap/trade/index.vue

@@ -0,0 +1,53 @@
+<!-- 掉期市场-成交 -->
+<template>
+    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
+        <!-- 类型 -->
+        <template #buildtype="{ value }">
+            {{ getBuildTypeName(value) }}
+        </template>
+         <!-- 方向 -->
+         <template #buyorsell="{ value }">
+            {{ getBuyOrSellName(value) }}
+        </template>
+        <!-- 商品合约 -->
+        <template #goodsname="{ row }">
+            {{ row.goodscode }}/{{ row.goodsname }}
+        </template>
+        <!-- 成交金额 -->
+        <template #tradeamount="{ row }">
+            {{ formatDecimal(row.tradeqty*row.tradeprice) }}
+        </template>
+        <!-- 时间 -->
+        <template #tradetime="{ value }">
+            {{ formatDate(value) }}
+        </template>
+    </app-table>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+import { formatDate, formatDecimal } from '@/filters'
+import { useRequest } from '@/hooks/request'
+import { queryTradeDetail } from '@/services/api/order'
+import { getBuildTypeName, getBuyOrSellName } from '@/constants/order'
+import AppTable from '@pc/components/base/table/index.vue'
+
+const { loading, dataList } = useRequest(queryTradeDetail, {
+    params: {
+        tradeMode: '46'
+    },
+})
+
+const tableColumns = shallowRef<Model.TableColumn[]>([
+    { prop: 'tradeid', label: '成交单号' },
+    { prop: 'goodsname', label: '商品代码/名称' },
+    { prop: 'buildtype', label: '类型' },
+    { prop: 'buyorsell', label: '方向' },
+    { prop: 'tradeprice', label: '成交价格' },
+    { prop: 'charge', label: '手续费' },
+    { prop: 'tradeqty', label: '成交数量' },
+    { prop: 'tradeamount', label: '成交金额 ' },
+    { prop: 'closepl', label: '平仓盈亏' },
+    { prop: 'tradetime', label: '时间' },
+])
+</script>

src/packages/pc/views/query/order/swap/history/index.vue

@@ -0,0 +1,82 @@
+<!-- 委托记录-掉漆市场-历史记录 -->
+<template>
+    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
+        <template #headerLeft>
+            <app-filter :options="filterOptons">
+                <template #before>
+                    <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD"
+                        v-model="filterDate" />
+                </template>
+            </app-filter>
+        </template>
+         <!-- 方向 -->
+         <template #buyorsell="{ value }">
+            {{ getBuyOrSellName(value) }}
+        </template>
+        <!-- 商品代码/名称 -->
+        <template #goodsname="{ row }">
+            {{ row.goodscode }}/{{ row.goodsname }}
+        </template>
+        <!-- 委托状态 -->
+        <template #orderstatus="{ value }">
+            {{ getWRTradeOrderStatusName(value) }}
+        </template>
+        <!-- 委托时间 -->
+        <template #ordertime="{ value }">
+            {{ formatDate(value) }}
+        </template>
+    </app-table>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, reactive } from 'vue'
+import { formatDate } from '@/filters'
+import { useDataFilter } from '@/hooks/datatable'
+import { useRequest } from '@/hooks/request'
+import { queryHisTradeOrderDetail } from '@/services/api/order'
+import { getBuyOrSellName, getWRTradeOrderStatusName } from '@/constants/order'
+import AppTable from '@pc/components/base/table/index.vue'
+import AppFilter from '@pc/components/base/table-filter/index.vue'
+
+const { filterOptons, getQueryParams } = useDataFilter<Model.HisTradeOrderDetailReq>()
+const filterDate = shallowRef<string[]>([])
+
+const formData = reactive<Model.HisTradeOrderDetailReq>({
+    tradeMode: '46',
+})
+
+const { loading, dataList, run } = useRequest(queryHisTradeOrderDetail, {
+    params: {
+        ...formData
+    },
+    manual: true
+})
+
+const tableColumns = shallowRef<Model.TableColumn[]>([
+    { prop: 'orderid', label: '委托单号' },
+    { prop: 'goodsname', label: '商品代码/名称' },
+    { prop: 'buyorsell', label: '方向' },
+    { prop: 'orderqty', label: '委托数量' },
+    { prop: 'orderprice', label: '委托价格' },
+    { prop: 'tradeqty', label: '成交数量' },
+    { prop: 'orderstatus', label: '委托状态' },
+    { prop: 'ordertime', label: '委托时间' },
+])
+
+filterOptons.buttonList = [
+    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() },
+    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) }
+]
+
+const onSearch = (clear = false) => {
+    if (clear) {
+        filterDate.value = []
+    }
+    getQueryParams((qs) => {
+        qs.startDate = filterDate.value[0]
+        qs.endDate = filterDate.value[1]
+        run(qs)
+    }, clear)
+}
+
+</script>

src/packages/pc/views/query/order/swap/index.vue

@@ -0,0 +1,8 @@
+<!-- 委托记录-掉期市场 -->
+<template>
+    <app-auth-component direction="bottom" />
+</template>
+
+<script lang="ts" setup>
+import AppAuthComponent from '@pc/components/modules/auth-component/index.vue'
+</script>

src/packages/pc/views/query/order/swap/list/index.vue

@@ -0,0 +1,47 @@
+<!-- 委托记录-掉期市场-当前记录 -->
+<template>
+    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
+        <!-- 方向 -->
+        <template #buyorsell="{ value }">
+            {{ getBuyOrSellName(value) }}
+        </template>
+        <!-- 商品代码/名称 -->
+        <template #goodsname="{ row }">
+            {{ row.goodscode }}/{{ row.goodsname }}
+        </template>
+        <!-- 委托状态 -->
+        <template #orderstatus="{ value }">
+            {{ getWRTradeOrderStatusName(value) }}
+        </template>
+        <!-- 委托时间 -->
+        <template #ordertime="{ value }">
+            {{ formatDate(value) }}
+        </template>
+    </app-table>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+import { formatDate } from '@/filters'
+import { useRequest } from '@/hooks/request'
+import { queryTradeOrderDetail } from '@/services/api/order'
+import { getBuyOrSellName, getWRTradeOrderStatusName } from '@/constants/order'
+import AppTable from '@pc/components/base/table/index.vue'
+
+const { loading, dataList } = useRequest(queryTradeOrderDetail, {
+    params: {
+        tradeMode: '46'
+    },
+})
+
+const tableColumns = shallowRef<Model.TableColumn[]>([
+    { prop: 'orderid', label: '委托单号' },
+    { prop: 'goodsname', label: '商品代码/名称' },
+    { prop: 'buyorsell', label: '方向' },
+    { prop: 'orderqty', label: '委托数量' },
+    { prop: 'orderprice', label: '委托价格' },
+    { prop: 'tradeqty', label: '成交数量' },
+    { prop: 'orderstatus', label: '委托状态' },
+    { prop: 'ordertime', label: '委托时间' }
+])
+</script>

src/packages/pc/views/query/trade/swap/history/index.vue

@@ -0,0 +1,87 @@
+<!-- 成交记录-掉期市场-历史记录 -->
+<template>
+    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
+        <template #headerLeft>
+            <app-filter :options="filterOptons">
+                <template #before>
+                    <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD"
+                        v-model="filterDate" />
+                </template>
+            </app-filter>
+        </template>
+        <!-- 类型 -->
+        <template #buildtype="{ value }">
+            {{ getBuildTypeName(value) }}
+        </template>
+         <!-- 方向 -->
+         <template #buyorsell="{ value }">
+            {{ getBuyOrSellName(value) }}
+        </template>
+        <!-- 商品合约 -->
+        <template #goodsname="{ row }">
+            {{ row.goodscode }}/{{ row.goodsname }}
+        </template>
+        <!-- 成交金额 -->
+        <template #tradeamount="{ row }">
+            {{ formatDecimal(row.tradeqty*row.tradeprice) }}
+        </template>
+        <!-- 时间 -->
+        <template #tradetime="{ value }">
+            {{ formatDate(value) }}
+        </template>
+    </app-table>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, reactive } from 'vue'
+import { formatDate, formatDecimal } from '@/filters'
+import { useRequest } from '@/hooks/request'
+import { useDataFilter } from '@/hooks/datatable'
+import { queryHisTradeDetail, } from '@/services/api/order'
+import { getBuildTypeName, getBuyOrSellName } from '@/constants/order'
+import AppTable from '@pc/components/base/table/index.vue'
+import AppFilter from '@pc/components/base/table-filter/index.vue'
+
+const { filterOptons, getQueryParams } = useDataFilter<Model.HisTradeDetailReq>()
+const filterDate = shallowRef<string[]>([])
+
+const formData = reactive<Model.HisTradeDetailReq>({
+    tradeMode: '46'
+})
+
+const { loading, dataList, run } = useRequest(queryHisTradeDetail, {
+    params: {
+        ...formData
+    },
+    manual: true
+})
+
+const tableColumns = shallowRef<Model.TableColumn[]>([
+    { prop: 'tradeid', label: '成交单号' },
+    { prop: 'goodsname', label: '商品代码/名称' },
+    { prop: 'buildtype', label: '类型' },
+    { prop: 'buyorsell', label: '方向' },
+    { prop: 'tradeprice', label: '成交价格' },
+    { prop: 'charge', label: '手续费' },
+    { prop: 'tradeqty', label: '成交数量' },
+    { prop: 'tradeamount', label: '成交金额 ' },
+    { prop: 'closepl', label: '平仓盈亏' },
+    { prop: 'tradetime', label: '时间' },
+])
+
+filterOptons.buttonList = [
+    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() },
+    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) }
+]
+
+const onSearch = (clear = false) => {
+    if (clear) {
+        filterDate.value = []
+    }
+    getQueryParams((qs) => {
+        qs.startDate = filterDate.value[0]
+        qs.endDate = filterDate.value[1]
+        run(qs)
+    }, clear)
+}
+</script>

src/packages/pc/views/query/trade/swap/index.vue

@@ -0,0 +1,8 @@
+<!-- 成交记录-掉漆市场 -->
+<template>
+    <app-auth-component direction="bottom" />
+</template>
+
+<script lang="ts" setup>
+import AppAuthComponent from '@pc/components/modules/auth-component/index.vue'
+</script>

src/packages/pc/views/query/trade/swap/list/index.vue

@@ -0,0 +1,53 @@
+<!-- 成交记录-掉期市场-当前记录 -->
+<template>
+    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
+        <!-- 类型 -->
+        <template #buildtype="{ value }">
+            {{ getBuildTypeName(value) }}
+        </template>
+         <!-- 方向 -->
+         <template #buyorsell="{ value }">
+            {{ getBuyOrSellName(value) }}
+        </template>
+        <!-- 商品合约 -->
+        <template #goodsname="{ row }">
+            {{ row.goodscode }}/{{ row.goodsname }}
+        </template>
+        <!-- 成交金额 -->
+        <template #tradeamount="{ row }">
+            {{ formatDecimal(row.tradeqty*row.tradeprice) }}
+        </template>
+        <!-- 时间 -->
+        <template #tradetime="{ value }">
+            {{ formatDate(value) }}
+        </template>
+    </app-table>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+import { formatDate, formatDecimal } from '@/filters'
+import { useRequest } from '@/hooks/request'
+import { queryTradeDetail } from '@/services/api/order'
+import { getBuildTypeName, getBuyOrSellName } from '@/constants/order'
+import AppTable from '@pc/components/base/table/index.vue'
+
+const { loading, dataList } = useRequest(queryTradeDetail, {
+    params: {
+        tradeMode: '46'
+    },
+})
+
+const tableColumns = shallowRef<Model.TableColumn[]>([
+    { prop: 'tradeid', label: '成交单号' },
+    { prop: 'goodsname', label: '商品代码/名称' },
+    { prop: 'buildtype', label: '类型' },
+    { prop: 'buyorsell', label: '方向' },
+    { prop: 'tradeprice', label: '成交价格' },
+    { prop: 'charge', label: '手续费' },
+    { prop: 'tradeqty', label: '成交数量' },
+    { prop: 'tradeamount', label: '成交金额 ' },
+    { prop: 'closepl', label: '平仓盈亏' },
+    { prop: 'tradetime', label: '时间' },
+])
+</script>