修改 期货市场

src/views/market/futures/compoments/futures-trade/index.vue

@@ -0,0 +1,269 @@
+<template>
+  <!-- 挂牌求购 -->
+  <Drawer :title="'挂牌求购'"
+          :placement="'right'"
+          :visible="visible"
+          @cancel="cancel"
+          class="top">
+    <div class="post_buying">
+      <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="accountid">
+                <a-select class="inlineFormSelect"
+                          style="width: 260px"
+                          v-model:value="formState.accountid"
+                          placeholder="请选择">
+                  <a-select-option v-for="item in accountList"
+                                   :value="item.accountid"
+                                   :key="item.accountid">{{ item.accountid }}</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="挂牌价格"
+                           name="FixedPrice">
+                <a-input-number class="commonInput"
+                                style="width: 260px"
+                                :min="0"
+                                v-model:value="formState.FixedPrice" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="挂牌数量"
+                           name="OrderQty">
+                <a-input-number class="commonInput"
+                                style="width: 260px"
+                                :min="0"
+                                :max="getMaxNum()"
+                                v-model:value="formState.OrderQty" />
+                <span class="input-enumdicname">{{ selectedRow.enumdicname }}</span>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </div>
+        <a-row :gutter="24">
+          <a-col :span="24"
+                 class="fixedBtns">
+            <a-form-item class="btnCenter">
+              <a-button class="listedBtn"
+                        @click="submit"
+                        :loading="loading">买入</a-button>
+              <a-button class="ml10 cancelBtn"
+                        @click="cancel"
+                        :disabled="loading">取消</a-button>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+  </Drawer>
+</template>
+
+<script lang="ts">
+import { Des } from '@/common/components/commonDes';
+import Drawer from '@/common/components/drawer/index.vue';
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+import { ModalEnum } from '@/common/constants/modalNameEnum';
+import { _closeModal } from '@/common/setup/modal/modal';
+import { getAccountTypeList } from '@/services/bus/account';
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import moment, { Moment } from 'moment';
+import { defineComponent, PropType, ref } from 'vue';
+import { TempWrOrderQuoteDetail } from './interface';
+import { handleForm } from './setup';
+
+export default defineComponent({
+    emits: ['cancel', 'update'],
+    name: 'trader',
+    components: { Des, Drawer, PlusOutlined, MinusOutlined },
+    props: {
+        selectedRow: {
+            type: Object as PropType<TempWrOrderQuoteDetail>,
+            default: {},
+        },
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+        time: {
+            type: Object as PropType<Moment>,
+            default: moment(),
+        },
+    },
+    setup(props, context) {
+        const { visible, cancel } = _closeModal(context);
+        const { rules, formState, formRef } = handleForm(props.selectedRow);
+        const loading = ref<boolean>(false);
+        const accountList = getAccountTypeList([2]);
+        if (accountList.length) {
+            formState.accountid = accountList[0].accountid;
+        }
+
+        function submit() {
+            // const marketInfo = getMarketRunByTradeMode(17);
+            // if (marketInfo) {
+            //     validateAction<FormParam>(formRef, formState).then((res) => {
+            //         requestResultLoadingAndInfo(hdWROrder, param, loading, ['求购成功', '求购失败:']).then(() => {
+            //             cancel(true);
+            //         });
+            //     });
+            // }
+        }
+        return {
+            submit,
+            cancel,
+            loading,
+            visible,
+            accountList,
+            rules,
+            formState,
+            formRef,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.post_buying {
+    width: 100%;
+    height: 100%;
+    .flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+    .ant-form {
+        height: 100%;
+    }
+    .condition {
+        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;
+            }
+        }
+        .conditionBtn + .conditionBtn {
+            margin-left: 10px;
+        }
+    }
+}
+
+.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;
+    }
+}
+.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;
+    }
+}
+.ml10 {
+    margin-left: 10px;
+}
+.ant-form.dialogForm .ant-row.ant-form-item {
+    margin-bottom: 14px;
+}
+.mt20 {
+    margin-top: 20px;
+}
+.mt-10 {
+    margin-top: -10px;
+}
+.ant-input-suffix {
+    position: absolute;
+    right: -25px;
+}
+.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;
+}
+.ant-slider.formSlider {
+    width: 260px !important;
+    margin-left: 70px;
+    .ant-slider-rail {
+        margin-right: 0;
+        padding-right: 0;
+        height: 3px !important;
+        border-radius: 2px !important;
+        background-color: @m-blue14;
+    }
+    .ant-slider-track {
+        height: 3px;
+        background-color: @m-blue0;
+    }
+    .ant-slider-step {
+        height: 3px;
+    }
+    .ant-progress-text {
+        display: none;
+    }
+}
+</style>

src/views/market/futures/compoments/futures-trade/interface.ts

@@ -0,0 +1,16 @@
+import { WrOrderQuote } from "@/services/go/wrtrade/interface";
+import { Moment } from "moment";
+
+export interface FormParam {
+    accountid: undefined | number,
+    FixedPrice: number,
+    OrderQty: number,
+    PriceMove: number,
+    DeliveryMonth: Moment,
+    DelistMinQty: number,
+}
+
+
+export interface TempWrOrderQuoteDetail extends WrOrderQuote {
+    wrResult: { dgfactoryitemtypeid: number; dgfactoryitemid: number }[]
+}

src/views/market/futures/compoments/futures-trade/setup.ts

@@ -0,0 +1,36 @@
+import { useVerifyListingBasis, useVerifyListingNum } from '@/hooks/form/verify';
+import moment from "moment";
+import { onBeforeUnmount, reactive, ref, UnwrapRef } from "vue";
+import { FormParam, TempWrOrderQuoteDetail } from "./interface";
+
+function initFormData(): FormParam {
+    return {
+        accountid: undefined,
+        FixedPrice: 0,
+        OrderQty: 0,
+        PriceMove: 0,
+        DelistMinQty: 0,
+        DeliveryMonth: moment()
+    }
+}
+const formState: UnwrapRef<FormParam> = reactive(initFormData())
+export function handleForm(selectedRow: TempWrOrderQuoteDetail) {
+    const formRef = ref();
+    formState.OrderQty = selectedRow.minivalue
+
+    const { v_num } = useVerifyListingNum<FormParam, 'DelistMinQty'>(formState, 'DelistMinQty', selectedRow.minivalue);
+    const { v_basis } = useVerifyListingBasis(selectedRow, 'goodsid');
+
+    const rules = {
+        FixedPrice: [{ required: true, message: '请输入挂牌价格', trigger: 'blur', type: 'number', }],
+        OrderQty: [{ required: true, validator: v_num, trigger: 'change', type: 'number' }],
+        PriceMove: [{ required: true, validator: v_basis, trigger: 'blur', type: 'number', }],
+        accountid: [{ required: true, message: '请输入交易账号' }],
+    }
+    onBeforeUnmount(() => {
+        Object.assign(formState, initFormData(), { OrderQty: selectedRow.minivalue })
+    })
+    return { rules, formState, formRef }
+}
+
+

src/views/market/futures/index.vue

@@ -51,47 +51,41 @@
                :selectedKey="index"
                @selectMenu="changeTab" />
     <!-- 右键 -->
-    <!-- <contextMenu :contextMenu="contextMenu"
+    <contextMenu :contextMenu="contextMenu"
                  @cancel="closeContext"
-                 :list="btnList"></contextMenu>
+                 :list="buttons"></contextMenu>
     <component :is="componentId"
                v-if="componentId"
                :selectedRow="selectedRow"
-               @cancel="closeComponent"></component> -->
+               @cancel="closeComponent"></component>
   </div>
 </template>
 
 <script lang="ts">
-import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
-
-import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
-import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
-
-import { handleTableEventAndData } from '@/common/setup/table/compose';
-import { TableParam } from '@/common/setup/table/interface';
-import { BtnListType } from '@/common/components/btnList/interface';
+import { TabList } from '@/common/components/description/interface';
+import ThridMenu from '@/common/components/thirdMenu/index.vue';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
+import { handleModalComponent } from '@/common/setup/asyncComponent';
+import { handleQuotePriceColor, handleSubcriteOnDemandQuote, quoteAmplitude, quoteAmplituOfVibration, quoteChange } from '@/common/setup/table/tableQuote';
+import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
 import { ref } from 'vue';
-import { useQueryData } from '@/common/setup/request';
-import { QueryQuoteGoodsListReq } from '@/services/go/Tjmd/interface';
-import { queryQuoteGoodsList } from '@/services/go/Tjmd';
-import APP from '@/services';
-import { getGoodsList } from '@/services/bus/goods';
-import { Goods } from '@/services/go/ermcp/goodsInfo/interface';
 import { getColumnsList, useExternalexchange } from './setup';
-import ThridMenu from '@/common/components/thirdMenu/index.vue';
-import { Externalexchange } from '@/services/go/useInfo/interface';
-import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
-import { TabList } from '@/common/components/description/interface';
+import { getTableButton } from '@/common/setup/table/button';
+import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
+import { handleContextMenu } from '@/common/components/contextMenu/setup';
 
 export default defineComponent({
     name: 'spot_trade_order_transaction_swap',
     components: {
         ThridMenu,
+        contextMenu,
+        trade: defineAsyncComponent(() => import('./compoments/futures-trade/index.vue')),
     },
     setup() {
         const isBottom = getShowBottomValue();
-
+        const selectedRow = ref<QueryQuoteDayRsp>();
+        const buttons = getTableButton();
+        console.log('buttons', buttons);
         const { index, loading, tabList, tableList, hanldeQuoteData } = useExternalexchange();
         // 行情按需订阅
         let stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(tableList);
@@ -103,7 +97,6 @@ export default defineComponent({
             // 重新发起订阅
             stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(tableList);
         }
-
         return {
             index,
             loading,
@@ -111,15 +104,14 @@ export default defineComponent({
             changeTab,
             tableList,
             isBottom,
-            // ...handleTableEventAndData<Goods>(param),
             handleQuotePriceColor,
             quoteChange,
             quoteAmplitude,
             quoteAmplituOfVibration,
-            // goodsList,
             getColumnsList,
-            // loading,
-            // goodsChange,
+            buttons,
+            ...handleModalComponent(() => {}, selectedRow),
+            ...handleContextMenu(),
         };
     },
 });