样式调整

src/services/go/wrtrade/index.ts

@@ -25,6 +25,7 @@ import {
     QueryWrTradeDetailReq,
     WrAverageTradePriceQsp,
     WrAverageTradePriceQsq,
+    WrBsGoodsInfo,
     WrBuybackDetail,
     WrDeliveryAvalidHoldLB,
     WrDeliveryDetail,
@@ -158,6 +159,16 @@ export function queryWrGoodsInfo(req: QueryWrGoodsInfoReq): Promise<WrGoodsInfo[
 }
 
 /**
+ * 查询合约交易买卖大厅详情 /WrTrade2/QueryWrBsGoodsInfo
+ * @param req
+ */
+export function queryWrBsGoodsInfo(goodsid: number): Promise<WrBsGoodsInfo[]> {
+    return commonSearch_go('/WrTrade2/QueryWrBsGoodsInfo', { goodsid }).catch((err) => {
+        throw new Error(`查询合约交易买卖大厅详情: ${err}`);
+    });
+}
+
+/**
  * 查询市场交易参数配置 /WrTrade2/QueryWrMarketTradeConfig
  * @param req
  */

src/services/go/wrtrade/interface.ts

@@ -280,6 +280,13 @@ export interface WrGoodsInfo {
     marketid: number//                         市场id
 }
 
+export interface WrBsGoodsInfo {
+    buyorsell: 0 | 1 // 买卖方向 0-买 1-卖
+    goodsid: number // 交易合约ID
+    lstitem: WrTypeItem[] //                   商品信息项
+    lststep: WrGoodsPerformanceStep[]//        履约规则
+}
+
 /**
  * 查询指定成交请求
  */
@@ -967,30 +974,30 @@ export interface QueryWrDeliveryAvalidHoldLBReq {
 }
 
 
-export interface WrDeliveryAvalidHoldLB{
-    accountid	:number;//资金账号
-    avalidqty	:number;//数量(可点选数量)
-    deliverygoodsid	:number;//品种id
-    enumdicname	:string;//单位名称
-    goodsid	:number;//x合约商品id
-    ladingbillid	:string;//提单id
-    pgoodscode	:string;//p商品代码(点价合约)
-    pgoodsid	:number;//p商品id(点价合约)
-    pgoodsname	:string;//p商品名称(点价合约)
-    pricemove	:number;//升贴水
-    subnum	:number;//提单子id
-    userid	:number;//用户id
-    username	:string;//仓单持有人
-    warehousecode	:string;//仓库代码
-    warehouseid	:number;//仓库id
-    warehousename	:string;//仓库名称
-    wrfactortypeid	:string;//仓单要素id
-    wrstandardcode	:string;//品代码
-    wrstandardid	:number;//品类d
-    wrstandardname	:string;//品类名称
-    wrtypename	:string;//商品
-    xgoodscode	:string;//x合约代码
-    xgoodsname	:string;//x合约名称
+export interface WrDeliveryAvalidHoldLB {
+    accountid: number;//资金账号
+    avalidqty: number;//数量(可点选数量)
+    deliverygoodsid: number;//品种id
+    enumdicname: string;//单位名称
+    goodsid: number;//x合约商品id
+    ladingbillid: string;//提单id
+    pgoodscode: string;//p商品代码(点价合约)
+    pgoodsid: number;//p商品id(点价合约)
+    pgoodsname: string;//p商品名称(点价合约)
+    pricemove: number;//升贴水
+    subnum: number;//提单子id
+    userid: number;//用户id
+    username: string;//仓单持有人
+    warehousecode: string;//仓库代码
+    warehouseid: number;//仓库id
+    warehousename: string;//仓库名称
+    wrfactortypeid: string;//仓单要素id
+    wrstandardcode: string;//品代码
+    wrstandardid: number;//品类d
+    wrstandardname: string;//品类名称
+    wrtypename: string;//商品
+    xgoodscode: string;//x合约代码
+    xgoodsname: string;//x合约名称
 }
 export interface WrAverageTradePriceQsq {
     page?: number; //	页码

src/views/market/spot_trade/spot_trade_order_transaction/components/buy-sell-market/index.vue

@@ -2,7 +2,7 @@
     <!-- 买卖大厅 -->
     <div class="buy-sell-market">
         <div class="buy-sell-market-title">
-            <a class="backIcon" @click="cancel">
+            <a class="backIcon" @click="cancelAction">
                 <LeftOutlined />
             </a>
             <div class="titleBtn">
@@ -10,44 +10,51 @@
                 <div class="arrowRightIcon"></div>
             </div>
             <div class="priceBar bdf1 ml20">
-                <div class="inlineBar">
-                    <div class="greenBar green" @click="changeMarketOrDetail">
-                        <div class="numBlock ml15">
-                            <div class="first">卖价</div>
-                            <div class="last">{{selectedRow.sellprice}}</div>
-                        </div>
-                        <div class="numBlock">
-                            <div class="first">卖量</div>
-                            <div class="last">{{selectedRow.sellqty}}</div>
-                        </div>
+                <div>
+                    <!-- 最新价 -->
+                    <span>1255.00</span>
+                    <!-- 涨跌值 -->
+                    <span>1255.00</span>
+                    <!-- 涨跌幅 -->
+                    <span>1255.00</span>
+                </div>
+                <div class="greenBar green">
+                    <div class="numBlock ml15">
+                        <div class="first">卖价</div>
+                        <div class="last">{{selectedRow.sellprice}}</div>
                     </div>
-                    <div class="greenBar green" @click="changeMarketOrDetail">
-                        <div class="numBlock ml15">
-                            <div class="first">卖价</div>
-                            <div class="last">{{selectedRow.sellprice}}</div>
-                        </div>
-                        <div class="numBlock">
-                            <div class="first">卖量</div>
-                            <div class="last">{{selectedRow.sellqty}}</div>
-                        </div>
+                    <div class="numBlock">
+                        <div class="first">卖量</div>
+                        <div class="last">{{selectedRow.sellqty}}</div>
                     </div>
                 </div>
-                <div class="inlineBar">
-                    <div class="redBar red">
-                        <div class="numBlock">
-                            <div class="first">买价</div>
-                            <div class="last">{{selectedRow.buyprice}}</div>
-                        </div>
-                        <div class="numBlock">
-                            <div class="first">买量</div>
-                            <div class="last">{{selectedRow.buyqty}}</div>
-                        </div>
+                <div class="greenBar green">
+                    <div class="numBlock ml15">
+                        <div class="first">卖价</div>
+                        <div class="last">{{selectedRow.sellprice}}</div>
+                    </div>
+                    <div class="numBlock">
+                        <div class="first">卖量</div>
+                        <div class="last">{{selectedRow.sellqty}}</div>
+                    </div>
+                </div>
+                <div class="redBar red">
+                    <div class="numBlock">
+                        <div class="first">买价</div>
+                        <div class="last">{{selectedRow.buyprice}}</div>
+                    </div>
+                    <div class="numBlock">
+                        <div class="first">买量</div>
+                        <div class="last">{{selectedRow.buyqty}}</div>
                     </div>
                 </div>
             </div>
             <BtnList :btnList="btnListData" :record="selectedRow" @click="openComponent" />
         </div>
-        <a-row class="buySellHall" v-if="showMarketOrDetail">
+        <!-- 交易图表 -->
+        <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" />
+        <!-- 买卖大厅内容 -->
+        <a-row class="buySellHall" v-if="showComponentsId === ComponentType.marketContent">
             <a-col :span="12">
                 <Sell ref="sellRef" :parantSelectedRow="deliverGoods" />
             </a-col>
@@ -55,7 +62,11 @@
                 <Buy ref="buyRef" :parantSelectedRow="deliverGoods" />
             </a-col>
         </a-row>
-        <StockExchange :deliverGoods="deliverGoods" v-else />
+        <!-- 成交明细 -->
+        <StockExchange
+            :deliverGoods="deliverGoods"
+            v-if="showComponentsId === ComponentType.tradeDetail"
+        />
         <component
             :is="componentId"
             v-if="componentId"
@@ -84,6 +95,8 @@ import moment, { Moment } from 'moment';
 import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
 import StockExchange from '../stock-exchange/index.vue';
+import Chart from '../chart/index.vue';
+import { ComponentType } from '../../setup';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
@@ -102,6 +115,7 @@ export default defineComponent({
         Buy,
         Sell,
         BtnList,
+        Chart,
         LeftOutlined,
         Listing: defineAsyncComponent(() => import('../listing/index.vue')),
         Detail: defineAsyncComponent(() => import('../detail/index.vue')),
@@ -128,9 +142,19 @@ export default defineComponent({
         };
         const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, ref({}));
 
-        const showMarketOrDetail = ref<boolean>(true);
-        function changeMarketOrDetail() {
-            showMarketOrDetail.value = !showMarketOrDetail.value;
+        const showComponentsId = ref<ComponentType>(ComponentType.chart);
+
+        // 切换组件
+        function changeComponent(type: ComponentType) {
+            showComponentsId.value = type;
+        }
+        // 返回上层组件
+        function cancelAction() {
+            if (showComponentsId.value === ComponentType.chart) {
+                cancel();
+            } else {
+                showComponentsId.value = ComponentType.chart;
+            }
         }
 
         TimerUtils.setInterval(
@@ -152,8 +176,10 @@ export default defineComponent({
             closeComponent,
             openComponent,
             btnListData,
-            showMarketOrDetail,
-            changeMarketOrDetail,
+            changeComponent,
+            ComponentType,
+            showComponentsId,
+            cancelAction,
         };
     },
 });

src/views/market/spot_trade/spot_trade_order_transaction/components/chart/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <!-- 交易图表  -->
+  <div class="chart-container">
+    <div class="chart-content"></div>
+    <div class="chart-tips">
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1"
+                    tab="卖挂">Tab 1</a-tab-pane>
+        <a-tab-pane key="2"
+                    tab="买挂">Tab 2</a-tab-pane>
+        <a-tab-pane key="3"
+                    tab="成交">Tab 3</a-tab-pane>
+      </a-tabs>
+      <div @click="watchMore">查看更多</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
+import { _closeModal } from '@/common/setup/modal/modal';
+import { PropType, ref } from 'vue';
+
+import { QueryHistoryTikDatasRsp, QueryQuoteDayRsp } from '@/services/go/quote/interface';
+import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
+import { QueryHistoryTikDatas } from '@/services/go/quote';
+import { ComponentType } from '../../setup';
+
+const columnsList = [
+    { title: '时间', key: 'TS', dataIndex: 'TS', align: 'center' },
+    { title: '成交价', key: 'Vol', dataIndex: 'Vol', align: 'center' },
+    { title: '成交量', key: 'PE', dataIndex: 'PE', align: 'center' },
+];
+
+export default defineComponent({
+    emits: ['cancel', 'update'],
+    name: 'stock-exchange',
+    props: {
+        deliverGoods: {
+            type: Object as PropType<QueryDeliveryRelationRsp>,
+            default: {},
+        },
+    },
+
+    setup(props, context) {
+        const loading = ref<boolean>(false);
+        const { visible, cancel } = _closeModal(context);
+        const activeKey = ref('1');
+        function watchMore() {
+            const type: ComponentType = activeKey.value === '3' ? ComponentType.tradeDetail : ComponentType.marketContent;
+            context.emit('update', type);
+        }
+        const param = {
+            goodsCode: props.deliverGoods.goodscode,
+        };
+        const tableList = ref<QueryHistoryTikDatasRsp[][]>([]);
+        QueryHistoryTikDatas(param).then((res) => {
+            tableList.value = getHisList(res);
+        });
+        function getHisList(list: QueryHistoryTikDatasRsp[]) {
+            const len = list.length;
+            const result: QueryHistoryTikDatasRsp[][] = [[], [], []];
+            if (len) {
+                if (len === 1) {
+                    result[0] = list;
+                } else if (len === 2) {
+                    result[0].push(list[0]);
+                    result[1].push(list[1]);
+                } else {
+                    const temp = Math.floor(len / 3);
+                    result[0] = list.slice(0, temp);
+                    result[1] = list.slice(temp, 2 * temp);
+                    result[2] = list.slice(temp * 2, temp * 3);
+                    const last = len - temp;
+                    if (last) {
+                        if (last === 1) {
+                            result[0].push(list[len - 1]);
+                        } else {
+                            result[0].push(list[len - 2]);
+                            result[1].push(list[len - 1]);
+                        }
+                    }
+                }
+            }
+            return result;
+        }
+        return {
+            cancel,
+            visible,
+            tableList,
+            columnsList,
+            loading,
+            activeKey,
+            watchMore,
+        };
+    },
+});
+</script>
+<style lang="less">
+.chart-container {
+    display: flex;
+    .chart-content {
+        flex: 1;
+    }
+    .chart-tips {
+        width: 300px;
+    }
+}
+</style>

src/views/market/spot_trade/spot_trade_order_transaction/components/detail/index.vue

@@ -1,23 +1,46 @@
 <template>
-    <Drawer
-        :title="'详情'"
-        :placement="'right'"
-        :visible="visible"
-        width="486px"
-        height="479px"
-        @cancel="cancel"
-        class="top"
-    >
-        <div class="delisting"></div>
-    </Drawer>
+  <!-- 买卖大厅详情 -->
+  <Drawer :title="'详情'"
+          :placement="'right'"
+          :visible="visible"
+          class="top top486"
+          @cancel="cancel">
+    <div class="detailCont">
+      <div class="rows">
+        <div class="row"
+             v-for="item in lstitem"
+             :key="item.name">
+          <div class="left">{{item.name}}</div>
+          <div class="right">{{item.value}}</div>
+        </div>
+      </div>
+      <div class="ruleTitle">履约规则：</div>
+      <div class="rulesCont">
+        <a-row>
+          <a-col :span="24"
+                 class="ruleCol">
+            <div class="line"
+                 v-for="item in lststep"
+                 :key="item.autoid">
+              <!-- <div class="no">{{index + 1}}</div> -->
+              <div class="name">{{item.steptypename}}</div>
+              <div class="time">{{item.stepdate}}</div>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+  </Drawer>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue';
 import Drawer from '@/common/components/drawer/index.vue';
-import { WrOrderQuote } from '@/services/go/wrtrade/interface';
-
+import { QueryWrGoodsInfoReq, WrGoodsPerformanceStep, WrTypeItem } from '@/services/go/wrtrade/interface';
+import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { _closeModal } from '@/common/setup/modal/modal';
+import { queryWrBsGoodsInfo, queryWrGoodsInfo } from '@/services/go/wrtrade';
+import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
 
 export default defineComponent({
@@ -30,13 +53,21 @@ export default defineComponent({
             default: {},
         },
     },
-
     setup(props, context) {
-        const { visible, cancel } = _closeModal(context);
-
         const loading = ref<boolean>(false);
+        const { visible, cancel } = _closeModal(context);
+        const lstitem = ref<WrTypeItem[]>();
+        const lststep = ref<WrGoodsPerformanceStep[]>();
+        queryResultLoadingAndInfo(queryWrBsGoodsInfo, loading, props.parantSelectedRow.goodsid).then((res) => {
+            if (res.length) {
+                lstitem.value = res[0].lstitem;
+                lststep.value = res[0].lststep;
+            }
+        });
 
         return {
+            lstitem,
+            lststep,
             visible,
             cancel,
         };
@@ -44,125 +75,100 @@ export default defineComponent({
 });
 </script>
 
-<style lang="less">
-.delisting {
-    width: 100%;
-    height: 100%;
-    .flex;
-    flex-direction: column;
-    overflow: hidden;
-    .condition {
+<style lang="less" scoped>
+.detailCont {
+    padding: 10px;
+    .rows {
+        .flex;
+        flex-direction: column;
         width: 100%;
-        height: 48px;
-        margin: 0 16px;
-        padding: 10px 0;
-        border-bottom: 1px solid @m-black6;
-        .inlineflex;
-        .conditionBtn {
-            align-self: center;
-            align-items: center;
-            border: 0;
-            min-width: 80px;
-            height: 28px;
-            line-height: 28px;
-            background: @m-black7;
-            .rounded-corners(3px);
-            font-size: 14px;
-            color: @m-blue0;
-            &:hover {
-                background: @m-black7-hover;
-                color: @m-blue0-hover;
+        border: 1px solid @m-black6;
+        background: @m-black13;
+        .row {
+            display: inline-flex;
+            width: 100%;
+            height: 38px;
+            line-height: 38px;
+            border-bottom: 1px solid @m-black6;
+            > div {
+                text-align: center;
+                font-size: 16px;
+            }
+            .left {
+                width: 126px;
+                color: @m-grey1;
+                border-right: 1px solid @m-black6;
+            }
+            .right {
+                flex: 1;
+                color: @m-white11;
             }
-        }
-        .conditionBtn + .conditionBtn {
-            margin-left: 10px;
         }
     }
-    .ant-form {
-        height: 100%;
+    .ruleTitle {
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        margin-top: 10px;
+        font-size: 16px;
+        color: @m-grey1;
     }
-}
-::v-deep.ant-input-suffix {
-    position: absolute;
-    right: -25px;
-}
-.unit {
-    margin-left: 70px;
-    width: 260px;
-    .flex;
-    justify-content: space-between;
-    font-size: 14px;
-    color: @m-grey41;
-    height: 14px;
-    line-height: 14px;
-}
-.listedBtn {
-    width: 120px;
-    height: 30px;
-    line-height: 30px;
-    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
-    border-radius: 3px;
-    color: @m-white0;
-    font-size: 14px;
-    text-align: center;
-    border: 0;
-    &:hover {
-        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
-        color: @m-white0-hover;
+    .rulesCont {
+        margin-top: 10px;
+        .flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        max-width: 450px;
+        .ruleCol.ant-col {
+            margin-bottom: 10px;
+        }
     }
 }
-.cancelBtn:extend(.listedBtn) {
-    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
-    &:hover {
-        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
-        color: @m-white0-hover;
+.ant-row {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    .ant-col {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin-bottom: 20px;
+        .rounded-corners(3px);
+        display: inline-flex;
+        .line {
+            width: 100%;
+            .flex;
+            flex-direction: column;
+            .name {
+                min-width: 120px;
+                height: 30px;
+                background: @m-blue28;
+                border: 1px solid @m-black37;
+                .rounded-corners(3px);
+                text-align: center;
+                font-size: 16px;
+                color: @m-white6;
+            }
+
+            .time {
+                margin: 6px auto 0;
+                width: 50px;
+                height: 28px;
+                background: @m-black38;
+                .rounded-corners(5px);
+                color: @m-blue26;
+                font-size: 14px;
+                text-align: center;
+            }
+        }
+        .line:nth-child(2n) {
+            .name {
+                background: @m-yellow4;
+                border-color: @m-yellow5;
+            }
+        }
+
+        .line + .line {
+            margin-left: 5px;
+        }
     }
 }
-.ml10 {
-    margin-left: 10px;
-}
-.ant-form.dialogForm .ant-row.ant-form-item {
-    margin-bottom: 14px;
-}
-.mt20 {
-    margin-top: 20px;
-}
-.mt-20 {
-    margin-top: -20px;
-}
-.labelTip {
-    font-size: 14px;
-    color: @m-blue16;
-    position: absolute;
-    top: 15px;
-    left: -66px;
-}
-.minusBtn,
-.plusBtn {
-    width: 15px;
-    height: 32px;
-    line-height: 32px;
-    font-size: 15px;
-    color: @m-blue15;
-    cursor: pointer;
-}
-.minusBtn {
-    position: absolute;
-    top: -6px;
-    left: 14px;
-    z-index: 1;
-}
-.plusBtn {
-    position: absolute;
-    top: -6px;
-    right: 14px;
-    z-index: 1;
-}
-.stepper {
-    padding-left: 30px;
-    padding-right: 30px;
-    text-align: center;
-    color: @m-yellow1;
-    font-size: 16px;
-}
-</style>;
+</style>

src/views/market/spot_trade/spot_trade_order_transaction/setup.ts

@@ -82,3 +82,9 @@ export const columnsList = [
     // { title: '日增', key: 'holdincrement' },
     // { title: '金额', key: 'totalturnover' },
 ];
+
+export enum ComponentType {
+    chart,
+    marketContent,
+    tradeDetail,
+}

src/views/order/commodity_contract/components/commodity_contract_summary/components/commodity_contract_summary_transfer/index.vue

@@ -1,46 +1,85 @@
 <template>
-    <!-- 转让-->
-    <Drawer :title="'转让'" :placement="'bottom'" :visible="visible" @cancel="cancel">
-        <div class="listed">
-            <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
-                <div class="formBar">
-                    <a-row :gutter="24">
-                        <a-col :span="24">
-                            <a-form-item label="挂牌价" name="price">
-                                <a-input-number
-                                    class="commonInput"
-                                    v-model:value="formState.price"
-                                    style="width: 100%"
-                                />
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="24">
-                            <a-form-item label="挂牌数量" name="num">
-                                <a-input-number
-                                    class="commonInput"
-                                    v-model:value="formState.num"
-                                    style="width: 100%"
-                                />
-                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
+  <!-- 转让-->
+  <Drawer :title="'转让'"
+          :placement="'bottom'"
+          :visible="visible"
+          @cancel="cancel">
+    <div class="listed">
+      <a-form class="inlineForm dialogForm"
+              ref="formRef"
+              :model="formState"
+              :rules="rules">
+        <div class="formBar">
+          <a-row :gutter="24">
+            <a-col :span="12">
+              <a-form-item label="合约"
+                           name="goodsid">
+                <a-select class="inlineFormSelect"
+                          :default-value="selectedRow.goodsid"
+                          v-model:value="formState.goodsid"
+                          style="width: 100%">
+                  <a-select-option v-for="item in tableList"
+                                   :value="item.goodsid"
+                                   :key="item.goodsid">{{item.goodsname}}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="挂牌价"
+                           name="price">
+                <a-input-number class="commonInput"
+                                v-model:value="formState.price"
+                                style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="挂牌数量"
+                           name="num">
+                <a-input-number class="commonInput"
+                                :max="getMax()"
+                                v-model:value="formState.num"
+                                style="width: 100%" />
+                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="挂牌金额">
+                <a-input class="commonInput"
+                         :value="getMoney()"
+                         style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24"
+                   class="mt-20">
+              <a-form-item>
+                <a-slider ::min="0"
+                          v-model:value="formState.num"
+                          :max="getMax()"
+                          class="formSlider"
+                          style="width: 180px" />
+                <div class="unit">
+                  <span>0</span>
+                  <span>{{getMax()}}{{selectedRow.enumdicname}}</span>
                 </div>
-                <a-row :gutter="24">
-                    <a-col :span="24" class="fixedBtns">
-                        <a-form-item class="btnCenter">
-                            <a-button
-                                class="listedBtn"
-                                :loading="loading"
-                                :disabled="loading"
-                                @click="submit"
-                            >提交</a-button>
-                        </a-form-item>
-                    </a-col>
-                </a-row>
-            </a-form>
+              </a-form-item>
+            </a-col>
+          </a-row>
         </div>
-    </Drawer>
+        <a-row :gutter="24">
+          <a-col :span="24"
+                 class="fixedBtns">
+            <a-form-item class="btnCenter">
+              <a-button class="listedBtn"
+                        :loading="loading"
+                        :disabled="loading"
+                        @click="submit">提交</a-button>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+  </Drawer>
 </template>
 
 <script lang="ts">
@@ -58,15 +97,15 @@ import { PerformanceContractedApplyReq, PerformanceDelayApplyReq } from '@/servi
 import { getSelectedAccount, getSelectedAccountId, getUserId } from '@/services/bus/account';
 import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { performanceContractedApply, performanceDelayApply } from '@/services/proto/performance';
-import {BuyOrSell, DelistingType, PriceType} from '@/common/constants/enumCommon';
+import { BuyOrSell, DelistingType, PriceType } from '@/common/constants/enumCommon';
 import Long from 'long';
-import {OrderReq} from "@/services/socket/order/interface";
-import {v4 as uuidv4} from "uuid";
-import moment from "moment";
-import {getLongTypeLoginID} from "@/services/bus/login";
-import {LongType} from "@/services/socket/login/interface";
-import {Order} from "@/services/socket/order";
-import {QueryTradePositionRsp} from "@/services/go/ermcp/order/interface";
+import { OrderReq } from '@/services/socket/order/interface';
+import { v4 as uuidv4 } from 'uuid';
+import moment from 'moment';
+import { getLongTypeLoginID } from '@/services/bus/login';
+import { LongType } from '@/services/socket/login/interface';
+import { Order } from '@/services/socket/order';
+import { QueryTradePositionRsp } from '@/services/go/ermcp/order/interface';
 
 export default defineComponent({
     name: ModalEnum.commodity_contract_summary_transfer,
@@ -77,56 +116,68 @@ export default defineComponent({
             type: Object as PropType<QueryTradePositionRsp>,
             default: {},
         },
-        buyOrSell: {
-            type: Number as PropType<BuyOrSell>,
-            default: BuyOrSell.buy,
+        tableList: {
+            type: Array as PropType<QueryTradePositionRsp[]>,
+            default: [],
         },
     },
     setup(props, context) {
         const { visible, cancel } = _closeModal(context);
         const loading = ref<boolean>(false);
         const { rules, formState, formRef } = handleForm();
+        formState.goodsid = props.selectedRow.goodsid;
+        function getSelectedGoods() {
+            return props.tableList.find((e) => e.goodsid === formState.goodsid)!;
+        }
+        function getMax() {
+            return getSelectedGoods().enableqty;
+        }
+        function getMoney() {
+            return (formState.price * formState.num).toFixed(getSelectedGoods().decimalplace);
+        }
         function submit() {
             // 挂牌请求 通过合约汇总 挂牌转让
-            const param: OrderReq = {
-                ClientSerialNo: uuidv4(), // 客户端流水号
-                ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 客户端委托时间
-                ClientType: 4, // 终端类型
-                LoginID: Number(getLongTypeLoginID() as LongType), // 登陆账号
-                AccountID: getSelectedAccountId(), // 交易账号
-                GoodsID: props.selectedRow.goodsid, // 商品ID
-                MarketID: props.selectedRow.marketid, // 市场ID
-                ValidType: 1, // 校验类型 当日有效
-                OperateType: 1, // 操作类型: 申请
-                OrderSrc: 1, // 单据来源: 客户端下单
-                OrderPrice: 370, // 委托价格                      (需要填入)
-                OperatorID: Number(getLongTypeLoginID()),
-                // MarketMaxSub: number // 市价允许最大偏差(做市)
-                OrderQty: 1, // 委托数量                          (需要填入)
-                BuyOrSell: 1 ,  // 买卖方向  0 买 1 卖
-                BuildType: 2 ,  // 下单类型  1 建 2 平
-                // CurtQuotePrice: 0, // 保留，计算冻结金额使用
-                // SpPrice: 0 ,// 止盈价格
-                // SlPrice: 0 , // 止损价格
-                PriceMode: PriceType.limit, // 取价方式
-                TimevalidType: 1, // 时间有效类型 单日有效
-                TriggerType: 1, // 预埋单触发类型
-                // TriggerPrice: number // 预埋单触发价格
-                ListingSelectType: 1, // 挂牌点选类型 1：挂牌 2：摘牌 3：先摘后挂
-                DelistingType:  DelistingType.selected, // 摘牌类型 2:点选成交
-                // RelatedID: number // 关联单号
-                OptionType: 1, // 期权类型(1:认购(看涨)2:认沽(看跌))
-                // Premium: number // 权利金
-                // TriggerOperator: number // 触发条件(1:大于等于2:小于等于)
-                // ServiceTime: string // 服务端时间
-                // CouponTypeID: number // 优惠券类型ID(买方)
-                // UsedQty: number // 使用数量
-                // ValidTime: string // 指定有效日期
-                // ReceiveInfoID: number // 收货地址ID
-                OrderFlag: 1,
-            }
-            requestResultLoadingAndInfo(Order, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
-                cancel(true);
+            validateAction<FormState>(formRef, formState).then((res) => {
+                const param: OrderReq = {
+                    ClientSerialNo: uuidv4(), // 客户端流水号
+                    ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 客户端委托时间
+                    ClientType: 4, // 终端类型
+                    LoginID: Number(getLongTypeLoginID() as LongType), // 登陆账号
+                    AccountID: getSelectedAccountId(), // 交易账号
+                    GoodsID: res.goodsid, // 商品ID
+                    MarketID: getSelectedGoods().marketid, // 市场ID
+                    ValidType: 1, // 校验类型 当日有效
+                    OperateType: 1, // 操作类型: 申请
+                    OrderSrc: 1, // 单据来源: 客户端下单
+                    OrderPrice: res.price, // 委托价格                      (需要填入)
+                    OperatorID: Number(getLongTypeLoginID()),
+                    // MarketMaxSub: number // 市价允许最大偏差(做市)
+                    OrderQty: res.num, // 委托数量                          (需要填入)
+                    BuyOrSell: 1, // 买卖方向  0 买 1 卖
+                    BuildType: 2, // 下单类型  1 建 2 平
+                    // CurtQuotePrice: 0, // 保留，计算冻结金额使用
+                    // SpPrice: 0 ,// 止盈价格
+                    // SlPrice: 0 , // 止损价格
+                    PriceMode: PriceType.limit, // 取价方式
+                    TimevalidType: 1, // 时间有效类型 单日有效
+                    TriggerType: 1, // 预埋单触发类型
+                    // TriggerPrice: number // 预埋单触发价格
+                    ListingSelectType: 1, // 挂牌点选类型 1：挂牌 2：摘牌 3：先摘后挂
+                    DelistingType: DelistingType.selected, // 摘牌类型 2:点选成交
+                    // RelatedID: number // 关联单号
+                    OptionType: 1, // 期权类型(1:认购(看涨)2:认沽(看跌))
+                    // Premium: number // 权利金
+                    // TriggerOperator: number // 触发条件(1:大于等于2:小于等于)
+                    // ServiceTime: string // 服务端时间
+                    // CouponTypeID: number // 优惠券类型ID(买方)
+                    // UsedQty: number // 使用数量
+                    // ValidTime: string // 指定有效日期
+                    // ReceiveInfoID: number // 收货地址ID
+                    OrderFlag: 1,
+                };
+                requestResultLoadingAndInfo(Order, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
+                    cancel(true);
+                });
             });
         }
         return {
@@ -137,6 +188,8 @@ export default defineComponent({
             rules,
             formState,
             formRef,
+            getMoney,
+            getMax,
         };
     },
 });

src/views/order/commodity_contract/components/commodity_contract_summary/components/commodity_contract_summary_transfer/interface.ts

@@ -1,4 +1,5 @@
 export interface FormState {
     price: number,
     num: number,
+    goodsid: number,
 }

src/views/order/commodity_contract/components/commodity_contract_summary/components/commodity_contract_summary_transfer/setup.ts

@@ -6,10 +6,17 @@ export function handleForm() {
     const formState: UnwrapRef<FormState> = reactive({
         price: 0,
         num: 0,
+        goodsid: 0,
     })
     const rules = {
-        price: [{ require, message: '请输入挂牌价', trigger: 'blur', type: 'number' }],
-        num: [{ require, message: '请输入挂牌数量', trigger: 'blur', type: 'number' }],
+        price: [
+            { require, message: '请输入挂牌价', trigger: 'blur', type: 'number' },
+            { message: '挂牌价不能小于1', min: 1, type: 'number' }
+        ],
+        num: [
+            { require, message: '请输入挂牌数量', trigger: 'blur', type: 'number' },
+            { message: '挂牌数量小于1', min: 1, type: 'number' }
+        ],
     }
-    return { rules: [], formState, formRef }
+    return { rules, formState, formRef }
 }

src/views/order/commodity_contract/components/commodity_contract_summary/index.vue

@@ -39,6 +39,7 @@
     <component :is="componentId"
                v-if="componentId"
                :selectedRow="selectedRow"
+               :tableList="tableList"
                @cancel="closeComponent"></component>
   </section>
 </template>