修改 商品掉期买卖大厅

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

@@ -0,0 +1,162 @@
+<template>
+  <!-- 买卖大厅 -->
+  <div class="buy-sell-market">
+    <div class="buy-sell-market-title">
+      <a class="backIcon"
+         @click="cancel">
+        <LeftOutlined />
+      </a>
+      <div class="titleBtn">
+        <div class="name">{{selectedRow.goodsname}}</div>
+        <div class="arrowRightIcon"></div>
+      </div>
+      <div class="priceBar bdf1 ml20">
+        <div class="greenBar green">
+          <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.buyqty}}</div>
+          </div>
+        </div>
+      </div>
+      <!-- 历史走势按钮 -->
+      <a-button class="historyBtn"
+                @click="openComponent({code: 'HisChart'})">
+        历史走势
+        <LineChartOutlined />
+      </a-button>
+      <BtnList :btnList="firstBtn"
+               :record="selectedRow"
+               @click="openComponent" />
+    </div>
+    <a-row class="buySellHall">
+      <a-col :span="12">
+        <Sell :enumName="enumName"
+              ref="sellRef"
+              :parantSelectedRow="selectedRow" />
+      </a-col>
+      <a-col :span="12">
+        <Buy :enumName="enumName"
+             ref="buyRef"
+             :parantSelectedRow="selectedRow" />
+      </a-col>
+    </a-row>
+    <component :is="componentId"
+               v-if="componentId"
+               :selectedRow="selectedRow"
+               :goodsPrice="getGoodsPrice()"
+               :enumName="enumName"
+               @cancel="closeComponent"></component>
+  </div>
+</template>
+
+<script lang="ts">
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+import { defineAsyncComponent, defineComponent, BtnList, ModalEnum } from '@/common/export/commonTable';
+import { _closeModal } from '@/common/setup/modal/modal';
+import { WrOrderQuote } from '@/services/go/wrtrade/interface';
+import { LeftOutlined } from '@ant-design/icons-vue';
+import Buy from '../buy/index.vue';
+import Sell from '../sell/index.vue';
+import { LineChartOutlined, DownOutlined } from '@ant-design/icons-vue';
+import { handleModalComponent } from '@/common/setup/asyncComponent';
+import { onBeforeUnmount, onMounted, PropType, ref } from 'vue';
+import { v4 } from 'uuid';
+import { addSubscribeQuotation, removeSubscribeQuotation } from '@/services/socket/quota';
+import Bus from '@/utils/eventBus/index';
+import { getQuoteDayInfoByCodeFindPrice } from '@/services/bus/goods';
+import TimerUtils from '@/utils/timer/timerUtil';
+import { BtnListType } from '@/common/components/btnList/interface';
+import moment, { Moment } from 'moment';
+import { BuyOrSell } from '@/common/constants/enumCommon';
+import { getBtnList } from '../../setup';
+
+export default defineComponent({
+    emits: ['cancel', 'update'],
+    name: 'buy-sell-market',
+    props: {
+        selectedRow: {
+            type: Object as PropType<WrOrderQuote>,
+            default: {},
+        },
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+    },
+    components: {
+        Buy,
+        Sell,
+        BtnList,
+        LeftOutlined,
+        DownOutlined,
+        LineChartOutlined,
+        Detail: defineAsyncComponent(() => import('../detail/index.vue')),
+        PostBuying: defineAsyncComponent(() => import('../post_buying/index.vue')),
+        HisChart: defineAsyncComponent(() => import('../history-chart/index.vue')),
+    },
+    setup(props, context) {
+        const loading = ref<boolean>(false);
+        const { visible, cancel } = _closeModal(context);
+
+        // const { isWR, isFloat } = handleIs(props.enumName, BuyOrSell.buy);
+        // 买卖大厅 配置数据
+        // 表格操作按钮列表
+        // 获取浮动价商品实时价格
+
+        function getGoodsPrice() {
+            const result = getQuoteDayInfoByCodeFindPrice(props.selectedRow.goodscode);
+            // setGoodsPrice(result);
+            return result;
+        }
+        const buyRef = ref<null | { queryTableAction: Function }>(null);
+        const sellRef = ref<null | { queryTableAction: Function }>(null);
+        const queryFn = () => {
+            buyRef.value?.queryTableAction();
+            sellRef.value?.queryTableAction();
+        };
+        const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, ref({}));
+        // const { hasFinacing } = handleFinacing(loading, props.selectedRow.wrfactortypeid);
+        function handleBtnList(list: BtnListType[]) {
+            // if (!hasFinacing()) {
+            //     return list.filter((e) => e.code !== 'spot_trade_warehouse_financing_delisting');
+            // } else {
+            //     return list;
+            // }
+        }
+        // 单据挂牌成功 通知买大厅刷新数据
+        Bus.$on('spotTrade', queryFn);
+
+        return {
+            buyRef,
+            sellRef,
+            cancel,
+            getGoodsPrice,
+            visible,
+            firstBtn: getBtnList(false),
+            buyMarket: [],
+            sellMarket: [],
+            componentId,
+            closeComponent,
+            openComponent,
+            enumName: props.enumName,
+            handleBtnList,
+        };
+    },
+});
+</script>
+<style lang="less">
+.priceBar {
+    .flex;
+    flex-direction: column;
+    height: 32px;
+    .greenBar,
+    .redBar {
+        height: 16px;
+        line-height: 16px;
+    }
+}
+</style>

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/buy/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <!--  现货贸易 - 买卖大厅 - 卖报价牌 -->
+  <a-table :columns="columns"
+           :class="['buyHallTable', isBottom ? '' : 'buyHallTableHigh', tableList.length ? '' : 'noDataTable']"
+           :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 378px)' : 'calc(100vh - 135px)' }"
+           :pagination="false"
+           :loading="loading"
+           :expandedRowKeys="expandedRowKeys"
+           :customRow="Rowclick"
+           :expandIcon="expandIcon"
+           :expandIconAsCell="false"
+           rowKey="key"
+           :data-source="tableList">
+    <!-- ,  -->
+    <!-- 额外的展开行 -->
+    <template #expandedRowRender="{ record }">
+      <BtnList :btnList="btnList"
+               :record="record"
+               class="btn-list-sticky"
+               @click="openComponent" />
+    </template>
+    <template #username="{text, record }">
+      <span>{{record.userid + " "}}{{text}}</span>
+    </template>
+  </a-table>
+  <component :is="componentId"
+             v-if="componentId"
+             :selectedRow="selectedRow"
+             :buyOrSell="BuyOrSell.buy"
+             :enumName="enumName"
+             :parantSelectedRow="parantSelectedRow"
+             @cancel="closeComponent"></component>
+</template>
+
+<script lang="ts">
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+import { ComposeTableParam, BtnList, defineComponent, handleComposeTable, queryTableList, ModalEnum } from '@/common/export/commonTable';
+import { _closeModal } from '@/common/setup/modal/modal';
+import { queryOrderQuoteDetail } from '@/services/go/wrtrade';
+import { QueryOrderQuoteDetailReq, WrOrderQuote, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
+import { defineAsyncComponent, PropType } from 'vue';
+import { BtnListType } from '@/common/components/btnList/interface';
+import { BuyOrSell } from '@/common/constants/enumCommon';
+import { expandIcon } from '@/common/setup/table/clolumn';
+import { ColumnType } from '@/common/methods/table/interface';
+import { Moment } from 'moment';
+import moment from 'moment';
+import { getShowBottomValue } from '@/common/config/constrolBottom';
+import { queryTjmdTradeOrderDetail } from '@/services/go/Tjmd';
+import { QueryTjmdTradeOrderDetailReq, QueryTjmdTradeOrderDetailRsp } from '@/services/go/Tjmd/interface';
+import { getUserId } from '@/services/bus/account';
+import { getUserAccountType } from '@/services/bus/user';
+import { useBuyOrSellBtnList } from '../setup';
+
+const columns = [
+    {
+        key: '0th',
+        dataIndex: 'index',
+        title: '序号',
+        align: 'center',
+        slots: {
+            customRender: 'index',
+        },
+        width: 60,
+    },
+    {
+        key: '1th',
+        dataIndex: 'fixedprice',
+        title: '买价',
+        align: 'center',
+        slots: {
+            customRender: 'fixedprice',
+        },
+        width: 120,
+    },
+    {
+        key: '2th',
+        dataIndex: 'orderqty',
+        title: '买量',
+        align: 'center',
+        slots: {
+            customRender: 'orderqty',
+        },
+        width: 120,
+    },
+    {
+        key: '3th',
+        dataIndex: 'username',
+        title: '购买方',
+        align: 'center',
+        slots: {
+            customRender: 'username',
+        },
+    },
+];
+
+export default defineComponent({
+    emits: ['cancel', 'openComponent'],
+    name: 'warehouse_receipt_trade_price_delisting_buy',
+    props: {
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+        parantSelectedRow: {
+            type: Object as PropType<WrOrderQuote>,
+            default: {},
+        },
+    },
+    components: {
+        BtnList,
+        [ModalEnum.spot_trade_warehouse_delisting]: defineAsyncComponent(() => import('../delisting/index.vue')),
+    },
+    setup(props, context) {
+        const isBottom = getShowBottomValue();
+        // 表格列表数据
+        const { loading, tableList, queryTable } = queryTableList<QueryTjmdTradeOrderDetailRsp>();
+        // 获取列表数据
+        const queryTableAction = () => {
+            const param: QueryTjmdTradeOrderDetailReq = {
+                buyorsell: 0,
+                userid: getUserId(),
+                usertype: getUserAccountType(),
+                goodsid: props.parantSelectedRow.goodsid,
+            };
+            queryTable(queryTjmdTradeOrderDetail, param);
+        };
+        // 表格通用逻辑
+        const param: ComposeTableParam = {
+            queryFn: queryTableAction,
+            menuType: props.enumName,
+            tableFilterKey: [],
+            isDetail: false,
+        };
+
+        return {
+            isBottom,
+            ...handleComposeTable<WrOrderQuoteDetail>(param),
+            queryTableAction,
+            BuyOrSell,
+            loading,
+            tableList,
+            enumName: props.enumName,
+            expandIcon,
+            btnList: useBuyOrSellBtnList(),
+            columns,
+        };
+    },
+});
+</script>
+<style lang="less">
+.buy-sell-market {
+    .btnDeafault.ant-btn {
+        height: 28px;
+        line-height: 28px;
+    }
+}
+</style>

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

@@ -0,0 +1,125 @@
+<template>
+    <!-- 买卖大厅详情 -->
+    <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 { QueryWrGoodsInfoReq, WrGoodsPerformanceStep, WrOrderQuote, WrTypeItem } from '@/services/go/wrtrade/interface';
+import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { ModalEnum } from '@/common/constants/modalNameEnum';
+import { _closeModal } from '@/common/setup/modal/modal';
+import { queryWrGoodsInfo } from '@/services/go/wrtrade';
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+
+export default defineComponent({
+    name: ModalEnum.spot_trade_warehouse_delisting,
+    components: { Drawer },
+    emits: ['cancel', 'update'],
+    props: {
+        selectedRow: {
+            type: Object as PropType<WrOrderQuote>,
+            default: {},
+        },
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+    },
+    setup(props, context) {
+        const loading = ref<boolean>(false);
+        const { visible, cancel } = _closeModal(context);
+        const lstitem = ref<WrTypeItem[]>();
+        const lststep = ref<WrGoodsPerformanceStep[]>();
+        function isSale(): boolean {
+            return props.enumName === EnumRouterName.warehouse_pre_sale_price || props.enumName === EnumRouterName.warehouse_pre_sale_floating_price;
+        }
+        const param: QueryWrGoodsInfoReq = {
+            haswr: isSale() ? 0 : 1,
+            wrfactortypeid: props.selectedRow.wrfactortypeid,
+        };
+        queryResultLoadingAndInfo(queryWrGoodsInfo, loading, param).then((res) => {
+            if (res.length) {
+                lstitem.value = res[0].lstitem;
+                lststep.value = res[0].lststep;
+            }
+        });
+
+        return {
+            lstitem,
+            lststep,
+            visible,
+            cancel,
+        };
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.detailCont {
+    padding: 10px;
+    .rows {
+        .flex;
+        flex-direction: column;
+        width: 100%;
+        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;
+            }
+        }
+    }
+    .ruleTitle {
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        margin-top: 10px;
+        font-size: 16px;
+        color: @m-grey1;
+    }
+}
+</style>

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/history-chart/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <!-- 历史走势-->
+  <Drawer :title="'历史走势'"
+          :placement="'right'"
+          :visible="visible"
+          @cancel="cancel"
+          class="top500">
+    <div class="chart-main"
+         ref="chartRef"
+         id="history-chart"></div>
+  </Drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, watchEffect } from 'vue';
+import { initData } from '@/common/methods';
+``;
+import * as echarts from 'echarts/core';
+import {
+    BarChart,
+    // 系列类型的定义后缀都为 SeriesOption
+    BarSeriesOption,
+    LineChart,
+    LineSeriesOption,
+} from 'echarts/charts';
+import {
+    TitleComponent,
+    // 组件类型的定义后缀都为 ComponentOption
+    TitleComponentOption,
+    GridComponent,
+    GridComponentOption,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { queryWrAverageTradePrice } from '@/services/go/wrtrade';
+import { TempWrOrderQuoteDetail } from '../post_buying/interface';
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+import { WrAverageTradePriceQsq } from '@/services/go/wrtrade/interface';
+import { BuyOrSell } from '@/common/constants/enumCommon';
+import { _closeModal } from '@/common/setup/modal/modal';
+import Drawer from '@/common/components/drawer/index.vue';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = echarts.ComposeOption<BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption>;
+
+// 注册必须的组件
+echarts.use([TitleComponent, GridComponent, LineChart, BarChart, CanvasRenderer]);
+export default defineComponent({
+    name: 'purchase-history',
+    emits: ['cancel', 'update'],
+    components: { Drawer },
+    props: {
+        selectedRow: {
+            type: Object as PropType<TempWrOrderQuoteDetail>,
+            default: {},
+        },
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+    },
+    setup(props, context) {
+        const { visible, cancel } = _closeModal(context);
+        const option = {
+            xAxis: {
+                type: 'category',
+                data: [''],
+            },
+            yAxis: {
+                type: 'value',
+            },
+            series: [
+                {
+                    data: [1],
+                    type: 'line',
+                    smooth: true,
+                },
+            ],
+        };
+        const chartRef = ref();
+        const chartInstance = ref<echarts.ECharts>();
+        function queryHistoryData() {
+            const param: WrAverageTradePriceQsq = {
+                haswr: 1,
+                wrfactortypeid: props.selectedRow.wrfactortypeid,
+            };
+            queryWrAverageTradePrice(param).then((res) => {
+                option.xAxis.data.length = 0;
+                option.series[0].data.length = 0;
+                res.forEach((el) => {
+                    option.xAxis.data.push(el.tradedate);
+                    option.series[0].data.push(el.averageprice);
+                });
+                if (chartInstance.value) {
+                    chartInstance.value.setOption(option);
+                }
+            });
+        }
+
+        watchEffect(() => {
+            if (chartRef.value) {
+                chartInstance.value = echarts.init(chartRef.value as HTMLElement);
+                chartInstance.value.setOption(option);
+            }
+        });
+
+        initData(() => {
+            queryHistoryData();
+        });
+        return { option, visible, cancel, chartRef };
+    },
+});
+</script>
+
+<style lang="less">
+// .chart-main {
+//     height: 441px;
+//     width: 100%;
+// }
+</style>;

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/post_buying/index.vue

@@ -0,0 +1,383 @@
+<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>
+                <a-radio-group class="commonRadioGroup"
+                               v-model:value="formState.priceType">
+                  <a-radio :value="1">固定价</a-radio>
+                  <a-radio :value="2">浮动价</a-radio>
+                </a-radio-group>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24"
+                   v-if="!isFloat()">
+              <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"
+                   v-else>
+              <a-form-item label="基差"
+                           name="PriceMove">
+                <a-input-number class="commonInput"
+                                style="width: 260px"
+                                v-model:value="formState.PriceMove" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24"
+                   v-if="isFloat()">
+              <a-form-item label="估算价"
+                           name="PriceMove">
+                <span class="white">{{getPrice()}}</span>
+              </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-col :span="24"
+                   class="mt-10">
+              <a-form-item>
+                <a-slider :min="0"
+                          v-model:value="formState.OrderQty"
+                          :max="getMaxNum()"
+                          class="formSlider" />
+                <div class="unit">
+                  <span>{{getMaxNum() ? selectedRow.minivalue : 0}}</span>
+                  <span>{{getMaxNum()}}{{selectedRow.enumdicname}}</span>
+                </div>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24"
+                   class="relative mt20">
+              <a-form-item :label="'挂牌金额'">
+                <span class="white ml8">{{getMoney()}}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24"
+                   v-if="getMargin()">
+              <a-form-item :label="'履约保证金'">
+                <span class="white ml8">{{getMargin()}}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="可用资金">
+                <span class="white ml8">{{canUseMoney()}}</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">买入</a-button>
+              <a-button class="ml10 cancelBtn"
+                        @click="cancel">取消</a-button>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+  </Drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+import { Des } from '@/common/components/commonDes';
+import { _closeModal } from '@/common/setup/modal/modal';
+import { ModalEnum } from '@/common/constants/modalNameEnum';
+import Drawer from '@/common/components/drawer/index.vue';
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
+import { hdWROrder } from '@/services/proto/warehousetrade';
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { DGFactoryItems, WRGoodsInfo } from '@/services/proto/warehousetrade/interface';
+import { getAccountTypeList, getSelectedAccountId, getUserId } from '@/services/bus/account';
+import { v4 as uuidv4 } from 'uuid';
+import moment, { Moment } from 'moment';
+import { getMarketByTradeMode, getMarketRunByTradeMode, getMarketsByTradeMode } from '@/services/bus/market';
+import { WrOrderQuote } from '@/services/go/wrtrade/interface';
+import { handleForm, handleNumAndPrice, isFloat } from './setup';
+import { validateAction } from '@/common/setup/form';
+import { FormParam, TempWrOrderQuoteDetail } from './interface';
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+import { BuyOrSell, TradeMode } from '@/common/constants/enumCommon';
+import { getCanUseMoney } from '@/services/bus/account';
+import { geLoginID_number } from '@/services/bus/login';
+import { OrderReq } from '@/services/socket/order/interface';
+import { QueryQuoteGoodsListRsp } from '@/services/go/Tjmd/interface';
+import { Order } from '@/services/socket/order';
+
+export default defineComponent({
+    emits: ['cancel', 'update'],
+    name: ModalEnum.spot_trade_warehouse_post_buying,
+    components: { Des, Drawer, PlusOutlined, MinusOutlined },
+    props: {
+        selectedRow: {
+            type: Object as PropType<TempWrOrderQuoteDetail>,
+            default: {},
+        },
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+        refGoods: {
+            type: Object as PropType<QueryQuoteGoodsListRsp>,
+            default: {},
+        },
+    },
+    setup(props, context) {
+        // 控制弹窗
+        const { visible, cancel } = _closeModal(context);
+        // 表单
+        const { rules, formState, formRef } = handleForm();
+        const loading = ref<boolean>(false);
+        // 默认的资金账号
+        const accountList = getAccountTypeList([2]);
+        if (accountList.length) {
+            formState.accountid = accountList[0].accountid;
+        }
+        function getSelectedAccount() {
+            return accountList.find((e) => e.accountid === formState.accountid);
+        }
+
+        const { getMaxNum, getMoney, getMargin, getPrice, canUseMoney } = handleNumAndPrice(props.enumName, props.selectedRow);
+        function submit() {
+            // const param: OrderReq = {
+            //     ClientSerialNo: uuidv4(), // 客户端流水号
+            //     ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 客户端委托时间
+            //     ClientType: 4, // 终端类型
+            //     LoginID: geLoginID_number()!, // 登陆账号
+            //     AccountID: getSelectedAccountId(), // 交易账号
+            //     GoodsID: props.selectedRow.goodsid, // 商品ID
+            //     MarketID: getMarketByTradeMode(TradeMode.ListingAndSelection)?.marketid, // 市场ID
+            //     ValidType: 1, // 校验类型 当日有效
+            //     OperateType: 1, // 操作类型: 申请
+            //     OrderSrc: 1, // 单据来源: 客户端下单
+            //     RelatedID: Long.fromString(props.selectedRow.orderid), // 操作员账号ID
+            //     OrderPrice: props.selectedRow.orderprice, // 委托价格
+            //     OperatorID: Number(geLoginID_number()),
+            //     // MarketMaxSub: number // 市价允许最大偏差(做市)
+            //     OrderQty: res.num, // 委托数量
+            //     BuyOrSell: props.selectedRow.buyorsell === 1 ? 0 : 1, // 买卖方向  0 买 1 卖
+            //     BuildType: props.selectedRow.buyorsell === 1 ? 1 : 2, // 下单类型  1 建 2 平
+            //     // CurtQuotePrice: 0, // 保留，计算冻结金额使用
+            //     // SpPrice: 0 ,// 止盈价格
+            //     // SlPrice: 0 , // 止损价格
+            //     PriceMode: PriceType.limit, // 取价方式
+            //     TimevalidType: 1, // 时间有效类型 单日有效
+            //     TriggerType: 1, // 预埋单触发类型
+            //     // TriggerPrice: number // 预埋单触发价格
+            //     ListingSelectType: 2, // 挂牌点选类型 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
+            // };
+            // requestResultLoadingAndInfo(Order, param, loading, ['摘牌成功', '摘牌失败:']).then(() => {
+            //     cancel(true);
+            // });
+        }
+        return {
+            submit,
+            cancel,
+            visible,
+            accountList,
+            rules,
+            formState,
+            formRef,
+            isFloat,
+            getMaxNum,
+            getMoney,
+            getMargin,
+            getSelectedAccount,
+            canUseMoney,
+            getPrice,
+        };
+    },
+});
+</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/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/post_buying/interface.ts

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

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/post_buying/setup.ts

@@ -0,0 +1,104 @@
+import { EnumRouterName } from "@/common/constants/enumRouterName";
+import { getAccountTypeList, getCanUseMoney } from "@/services/bus/account";
+import { getQuoteDayInfoByCodeFindPrice } from "@/services/bus/goods";
+import { getRules } from '@/services/bus/rules';
+import { AccountListItem } from "@/services/dataCenter/interafce/account";
+import { WrOrderQuote } from "@/services/go/wrtrade/interface";
+import { reactive, ref, UnwrapRef } from "vue";
+import { FormParam } from "./interface";
+
+const formState: UnwrapRef<FormParam> = reactive({
+    accountid: undefined,
+    FixedPrice: 0,
+    OrderQty: 0,
+    PriceMove: 0,
+    priceType: 1,
+})
+export function handleForm() {
+    const formRef = ref();
+    const rules = {
+        FixedPrice: [{ required: true, message: '请输入挂牌价格', trigger: 'blur', type: 'number', }],
+        OrderQty: [{ required: true, message: '请输入挂牌数量', trigger: 'blur', type: 'number', min: 1 }],
+        PriceMove: [{ required: true, message: '请输入基差', trigger: 'blur', type: 'number' }],
+        accountid: [{ required: true, message: '请输入交易账号' }],
+    }
+    return { rules, formState, formRef }
+}
+
+
+export function useSelectedAccount() {
+    // 资金账号
+    const accountList = getAccountTypeList([2]);
+    // 获取选中的资金账号
+    const getSelectedAccount = () => accountList.find((e) => e.accountid === formState.accountid);
+    return { getSelectedAccount }
+}
+// 是否是浮动价
+export function isFloat() { return formState.priceType === 2 }
+
+
+export function handleNumAndPrice(enumName: EnumRouterName, selectedRow: WrOrderQuote) {
+    const { goodscode } = selectedRow
+    // 获取选中的资金账号
+    const { getSelectedAccount } = useSelectedAccount();
+    // 交易规则
+    const rules = getRules()
+    const { buymarginvalue, buymarginalgorithm } = rules.length ? rules[0] : { buymarginvalue: 0, buymarginalgorithm: 1 }
+    //保证金模式 1： 比率 2： 固定
+    const marginMethod = () => buymarginalgorithm === 1
+    function canUseMoney() {
+        return Number(getCanUseMoney(getSelectedAccount() as AccountListItem))
+    }
+    // 挂牌最大数量
+    function getMaxNum() {
+        // 可用资金
+        const money = canUseMoney()
+        // 挂牌最大数量=可用资金/(买方履约保证金比例*挂牌价格)
+        let result = 0
+        if (isFloat()) {
+            const price = getPrice()
+            if (price !== '--') {
+                result = money / (Number(price) * buymarginvalue)
+            }
+        } else {
+            const margin = marginMethod() ? (buymarginvalue * formState.FixedPrice) : (buymarginvalue + formState.FixedPrice)
+            if (margin) {
+                result = Math.floor(money / margin)
+            }
+        }
+        return +result.toFixed(0)
+    }
+    //  摘牌金额
+    function getMoney() {
+        let result = 0
+        if (isFloat()) {
+            const goodsPrice = getQuoteDayInfoByCodeFindPrice(goodscode)
+            if (goodsPrice && goodsPrice !== '--') {   // 有实时行情价格
+                // 估算总价=挂牌基差+期货合约价；
+                const predictTotal = formState.PriceMove + (goodsPrice as number);
+                // 估算总额=估算总价*摘牌数量；
+                result = predictTotal * formState.OrderQty
+            }
+        } else {
+            // 摘牌金额=挂牌价格*摘牌数量
+            result = formState.OrderQty * formState.FixedPrice
+        }
+        return Number(result.toFixed(2))
+    }
+    // 履约保证金
+    function getMargin() {
+        // 浮动价 履约保证金=估算总额*买方履约保证金比例
+        // 一口价 履约保证金=挂牌金额*买方履约保证金比例
+        const margin = marginMethod() ? (buymarginvalue * getMoney()) : (buymarginvalue + getMoney())
+        return Number((margin).toFixed(2))
+    }
+    function getPrice() {
+        let result = '--'
+        const goodsPrice = getQuoteDayInfoByCodeFindPrice(goodscode)
+        if (goodsPrice && goodsPrice !== '--') {   // 有实时行情价格
+            result = ((goodsPrice as number) + formState.PriceMove).toFixed(2)
+        }
+        return result
+    }
+    return { getMaxNum, getMoney, getMargin, getPrice, canUseMoney }
+}

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/sell/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <!-- 现货贸易 - 买卖大厅 - 买报价牌 -->
+  <a-table :columns="handleColumn(columns)"
+           :class="['sellHallTable', isBottom ? '' : 'sellHallTableHigh', tableList.length ? '' : 'noDataTable']"
+           :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 378px)' : 'calc(100vh - 135px)' }"
+           :pagination="false"
+           :loading="loading"
+           :expandedRowKeys="expandedRowKeys"
+           :customRow="Rowclick"
+           :expandIcon="expandIcon"
+           :expandIconAsCell="false"
+           rowKey="key"
+           :data-source="tableList">
+    <!-- 额外的展开行 -->
+    <template #expandedRowRender="{ record }">
+      <BtnList :btnList="btnList"
+               :record="record"
+               @click="openComponent" />
+    </template>
+    <template #username="{text, record }">
+      <span>{{record.userid + " " }}{{text}}</span>
+    </template>
+  </a-table>
+  <component :is="componentId"
+             v-if="componentId"
+             :selectedRow="selectedRow"
+             :enumName="enumName"
+             :buyOrSell="BuyOrSell.sell"
+             :parantSelectedRow="parantSelectedRow"
+             @cancel="closeComponent"></component>
+</template>
+
+<script lang="ts">
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+import { ComposeTableParam, BtnList, defineComponent, handleComposeTable, queryTableList, ModalEnum } from '@/common/export/commonTable';
+import { _closeModal } from '@/common/setup/modal/modal';
+import { queryOrderQuoteDetail } from '@/services/go/wrtrade';
+import { QueryOrderQuoteDetailReq, WrOrderQuote, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
+import { defineAsyncComponent, PropType } from 'vue';
+import { BtnListType } from '@/common/components/btnList/interface';
+import { BuyOrSell } from '@/common/constants/enumCommon';
+import { expandIcon } from '@/common/setup/table/clolumn';
+import { ColumnType } from '@/common/methods/table/interface';
+import { Moment } from 'moment';
+import moment from 'moment';
+import { getShowBottomValue } from '@/common/config/constrolBottom';
+import { useBuyOrSellBtnList } from '../setup';
+import { getUserId } from '@/services/bus/account';
+import { getUserAccountType } from '@/services/bus/user';
+import { queryTjmdTradeOrderDetail } from '@/services/go/Tjmd';
+import { QueryTjmdTradeOrderDetailReq } from '@/services/go/Tjmd/interface';
+
+const columns = [
+    {
+        key: '0th',
+        dataIndex: 'index',
+        title: '序号',
+        align: 'center',
+        slots: {
+            customRender: 'index',
+        },
+        width: 60,
+    },
+    {
+        key: '1th',
+        dataIndex: 'fixedprice',
+        title: '买价',
+        align: 'center',
+        slots: {
+            customRender: 'fixedprice',
+        },
+        width: 120,
+    },
+    {
+        key: '2th',
+        dataIndex: 'orderqty',
+        title: '买量',
+        align: 'center',
+        slots: {
+            customRender: 'orderqty',
+        },
+        width: 120,
+    },
+    {
+        key: '3th',
+        dataIndex: 'username',
+        title: '购买方',
+        align: 'center',
+        slots: {
+            customRender: 'username',
+        },
+    },
+];
+
+export default defineComponent({
+    emits: ['cancel', 'openComponent'],
+    name: 'warehouse_receipt_trade_price_delisting_sell',
+    props: {
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+        parantSelectedRow: {
+            type: Object as PropType<WrOrderQuote>,
+            default: {},
+        },
+    },
+    components: {
+        BtnList,
+        [ModalEnum.spot_trade_warehouse_delisting]: defineAsyncComponent(() => import('../delisting/index.vue')),
+    },
+    setup(props, context) {
+        const isBottom = getShowBottomValue();
+        console.log(isBottom.value, 'isBottom');
+        // 表格列表数据
+        const { loading, tableList, queryTable } = queryTableList<WrOrderQuoteDetail>();
+
+        // 获取列表数据
+        const queryTableAction = () => {
+            const param: QueryTjmdTradeOrderDetailReq = {
+                buyorsell: 1,
+                userid: getUserId(),
+                usertype: getUserAccountType(),
+                goodsid: props.parantSelectedRow.goodsid,
+            };
+            queryTable(queryTjmdTradeOrderDetail, param);
+        };
+        // 表格通用逻辑
+        const param: ComposeTableParam = {
+            queryFn: queryTableAction,
+            menuType: EnumRouterName.warehouse_receipt_trade_floating_price,
+            tableFilterKey: [],
+            isDetail: false,
+        };
+        function handleColumn(columns: ColumnType[]) {
+            columns.forEach((item) => {
+                columns.forEach((item) => {
+                    if (item.dataIndex == 'username') {
+                        delete item.width;
+                    }
+                });
+            });
+            return columns;
+        }
+        return {
+            isBottom,
+            ...handleComposeTable<WrOrderQuoteDetail>(param),
+            queryTableAction,
+            loading,
+            tableList,
+            BuyOrSell,
+            enumName: props.enumName,
+            expandIcon,
+            handleColumn,
+            btnList: useBuyOrSellBtnList(),
+            columns,
+        };
+    },
+});
+</script>
+<style lang="less">
+.buy-sell-market {
+    .btnDeafault.ant-btn {
+        height: 28px;
+        line-height: 28px;
+    }
+}
+</style>

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

@@ -0,0 +1,9 @@
+import { BtnListType } from "@/common/components/btnList/interface";
+
+// 获取按钮列表
+export function useBuyOrSellBtnList() {
+    const btnList: BtnListType[] = [
+        { lable: '摘牌', code: 'Listing', className: 'btnDeafault' },
+    ];
+    return btnList
+}

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/index.vue

@@ -73,16 +73,14 @@
     <component :is="componentId"
                v-if="componentId"
                :selectedRow="selectedRow"
+               :refGoods="findItemGoods(selectedRow?.goodscode)"
                @cancel="closeComponent"></component>
   </div>
 </template>
 
 <script lang="ts">
-import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
 
-import { handleDeliveryRelation } from '../setup';
-
 import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
 
@@ -95,30 +93,26 @@ import { ref } from 'vue';
 import { useQueryData } from '@/common/setup/request';
 import { QueryQuoteGoodsListReq } from '@/services/go/Tjmd/interface';
 import { queryQuoteGoodsList } from '@/services/go/Tjmd';
-import { useSwapList, columnsList } from './setup';
+import { useSwapList, columnsList, getBtnList } from './setup';
 
 export default defineComponent({
     name: 'spot_trade_order_transaction_swap',
     components: {
         contextMenu,
-        BuyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
-        Listing: defineAsyncComponent(() => import('../components/listing/index.vue')),
-        Detail: defineAsyncComponent(() => import('../components/detail/index.vue')),
+        BuyAndSell: defineAsyncComponent(() => import('./components/buy-sell-market/index.vue')),
+        PostBuying: defineAsyncComponent(() => import('./components/post_buying/index.vue')),
+        Detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
     },
     setup() {
         const isBottom = getShowBottomValue();
-        const { loading, goodsList, getRefGoodsList, filterGoodsList } = useSwapList();
+        const { loading, goodsList, getRefGoodsList, filterGoodsList, findItemGoods } = useSwapList();
 
         const param: TableParam = {
             columnsList,
             queryFn: () => {},
             clickName: 'BuyAndSell',
         };
-        const btnList: BtnListType[] = [
-            { lable: '挂牌求购', code: 'Listing', className: 'btnDeafault' },
-            { lable: '详情', code: 'Detail', className: 'btnDeafault' },
-            { lable: '买卖大厅', code: 'BuyAndSell', className: 'btnDeafault' },
-        ];
+
         // 行情按需订阅
         let stopSubcribe = handleSubcriteOnDemandQuote<RefGoodsList>(goodsList);
         // 过滤标的合约
@@ -132,7 +126,7 @@ export default defineComponent({
         return {
             isBottom,
             ...handleTableEventAndData<RefGoodsList>(param),
-            btnList,
+            btnList: getBtnList(true),
             handleQuotePriceColor,
             quoteChange,
             quoteAmplitude,
@@ -141,6 +135,7 @@ export default defineComponent({
             goodsList,
             loading,
             goodsChange,
+            findItemGoods,
         };
     },
 });

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

@@ -1,3 +1,4 @@
+import { BtnListType } from "@/common/components/btnList/interface"
 import { TradeMode } from "@/common/constants/enumCommon"
 import { initData } from "@/common/methods"
 import { queryTableList } from "@/common/setup/table"
@@ -57,7 +58,10 @@ export const useSwapList = () => {
         }
         return result
     }
-    return { loading, goodsList, getRefGoodsList, filterGoodsList }
+    function findItemGoods(goodscode: string) {
+        return tableList.value.find(el => el.goodscode === goodscode)!
+    }
+    return { loading, goodsList, getRefGoodsList, filterGoodsList, findItemGoods }
 }
 
 export const columnsList = [
@@ -89,4 +93,16 @@ export const columnsList = [
     // { title: '持仓量', key: 'holdvolume' },
     // { title: '日增', key: 'holdincrement' },
     // { title: '金额', key: 'totalturnover' },
-];
+];
+
+// 获取按钮列表
+export function getBtnList(isBuyAndSell: boolean) {
+    const btnList: BtnListType[] = [
+        { lable: '挂牌求购', code: 'PostBuying', className: 'btnDeafault' },
+        { lable: '详情', code: 'Detail', className: 'btnDeafault' },
+    ];
+    if (isBuyAndSell) {
+        btnList.push({ lable: '买卖大厅', code: 'BuyAndSell', className: 'btnDeafault' })
+    }
+    return btnList
+}