仓单预售 指定挂牌

src/router/index.ts

@@ -1725,6 +1725,14 @@ const routes: Array<RouteRecordRaw> = [
                                     requireAuth: true,
                                 },
                             },
+                            {
+                                path: '/spot_trade/warehouse_pre_sale/warehouse_pre_sale_designate',
+                                name: 'warehouse_pre_sale_designate',
+                                component: () => import('@/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_designate/index.vue'),
+                                meta: {
+                                    requireAuth: true,
+                                },
+                            },
                         ]
                     },
                     {

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_designate/components/buy/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <!-- 仓单贸易 贸易圈挂牌 卖-->
+  <div>
+    <a-table :columns="columns"
+             :class="['srcollYTable', isBottom ? 'condSecondTabTableHalfTop' : 'condSecondTabTableHalfTopNoBottom', 'halfBottom',  tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
+             :scroll="{ x: '100%', y: isBottom ? 'calc((100vh- 443px)/2 - 14px)' : 'calc((100vh - 196px)/2 - 16px)' }"
+             :pagination="false"
+             :loading="loading"
+             :expandedRowKeys="expandedRowKeys"
+             :customRow="Rowclick"
+             rowKey="key"
+             :data-source="tableList">
+      <template #index="{ index }">
+        <span>{{ index + 1 }}</span>
+      </template>
+      <template #marginvalue="{ text }">
+        <span>{{ (text * 100).toFixed(2) + '%'}}</span>
+      </template>
+      <!-- 议价 -->
+      <template #canbargain="{ text }">
+        <span>{{ text ? '是' : '否' }}</span>
+      </template>
+      <!-- 整单 -->
+      <template #canpart="{ text }">
+        <span>{{ text  === 1 ? '否' : '是' }}</span>
+      </template>
+      <!-- 挂牌有效期 -->
+      <template #validtime="{ text }">
+        <span>{{ formatTime(text, 'd') }}</span>
+      </template>
+    </a-table>
+    <!-- 右键 -->
+    <contextMenu :contextMenu="contextMenu"
+                 @cancel="closeContext"
+                 :list="filterBtn(firstBtn)"></contextMenu>
+    <component :is="componentId"
+               v-if="componentId"
+               :componentId="componentId"
+               :selectedRow="selectedRow"
+               :buyOrSell="BuyOrSell.Buy"
+               @cancel="closeComponent"></component>
+  </div>
+</template>
+
+<script lang="ts">
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
+import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
+import { queryOrderQuote, queryQueryOrderQuoteMyq } from '@/services/go/wrtrade';
+import { handleComposeTable } from '@/common/setup/table/compose';
+import Filter from '../../components/filter/index.vue';
+import { Goods } from '@/services/go/ermcp/goodsInfo/interface';
+import { getShowBottomValue } from '@/common/config/constrolBottom';
+import { handleColumns, filterBtn } from '../../setup';
+import { BuyOrSell } from '@/common/constants/enumCommon';
+import { formatTime } from '@/common/methods';
+import Bus from '@/utils/eventBus/index';
+
+export default defineComponent({
+    name: 'warehouse_receipt_trade_blocs_buy',
+    components: {
+        contextMenu,
+        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+    },
+    setup() {
+        const isBottom = getShowBottomValue();
+        // 表头
+        const { getBuyOrSellColumns } = handleColumns();
+        const columns = getBuyOrSellColumns(BuyOrSell.buy);
+
+        // 表格列表数据
+        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+        // 获取列表数据
+        const queryTableAction = () => {
+            const param: QueryOrderQuoteMyqReq = {
+                buyorsell: BuyOrSell.buy,
+                haswr: 0,
+            };
+            queryTable(queryQueryOrderQuoteMyq, param);
+        };
+        // 表格通用逻辑
+        const param: ComposeTableParam = {
+            queryFn: queryTableAction,
+            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+            tableFilterKey: [],
+            isDetail: false,
+        };
+        const {
+            contextMenu,
+            openContext,
+            closeContext, // 右键
+            expandedRowKeys,
+            selectedRow,
+            Rowclick, // 表格折腾面板数据与单击、双击事件
+            componentId,
+            closeComponent,
+            openComponent, // 控制异步组件
+            firstBtn,
+            secondBtn, // 表格按钮
+        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+        function search(value: Object) {
+            // const param: QueryOrderQuoteReq = {
+            //     wrpricetype: 2,
+            //     haswr: 1,
+            // };
+            // Object.assign(param, value);
+            // queryTable(queryOrderQuote, param);
+        }
+        // 单据挂牌成功 刷新数据
+        Bus.$on('spotTrade', queryTableAction);
+        return {
+            isBottom,
+            contextMenu,
+            openContext,
+            closeContext, // 右键
+            columns,
+            expandedRowKeys,
+            selectedRow,
+            Rowclick, // 表格折腾面板数据与单击、双击事件
+            componentId,
+            closeComponent, // 控制异步组件
+            firstBtn, // 表格按钮
+            loading,
+            tableList,
+            search,
+            formatTime,
+            filterBtn,
+            BuyOrSell,
+        };
+    },
+});
+</script>
+<style lang="less">
+</style>

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_designate/components/delisting/index.vue

@@ -0,0 +1,509 @@
+<template>
+  <!--仓单贸易 贸易圈挂牌 摘牌-->
+  <Drawer :title="isBargin() ? '议价摘牌' : '摘牌'"
+          :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-row>
+          <a-row :gutter="24">
+            <a-col :span="24">
+              <a-form-item label="挂牌方">
+                <span class="white ml8">{{selectedRow.username}}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="挂牌数量">
+                <span class="white ml8">{{selectedRow.orderqty}}{{selectedRow.enumdicname}}</span>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-col :span="24"
+                 v-if="isBargin()">
+            <a-form-item label="摘牌价格"
+                         name="price">
+              <a-input-number class="commonInput"
+                              style="width: 260px"
+                              :min="0"
+                              v-model:value="formState.price" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="24"
+                 v-else>
+            <a-form-item label="摘牌价格">
+              <span class="white ml8">{{selectedRow.fixedprice}}</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="24"
+                 v-if="isBuy()">
+            <a-form-item label="现货仓单"
+                         name="LadingBillId">
+              <a-select class="inlineFormSelect"
+                        style="width: 260px"
+                        v-model:value="formState.LadingBillId"
+                        placeholder="请选择">
+                <a-select-option v-for="item in wrHoldList"
+                                 :value="item.id"
+                                 :key="item.id">{{item.name}}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+          <a-row :gutter="24"
+                 v-if="isCanpart()">
+            <a-col :span="24">
+              <a-form-item label="摘牌数量"
+                           class="relative"
+                           name="num">
+                <a-input-number class="dialogInput yellowInput"
+                                style="width: 260px"
+                                :min="0"
+                                :max="getMaxNum()"
+                                v-model:value="formState.num" />
+                <span class="input-enumdicname-absolute">{{selectedRow.enumdicname}}</span>
+                <div class="labelTip">({{selectedRow.delistminqty}}{{selectedRow.enumdicname}}起)
+                </div>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24"
+                 v-if="isCanpart()">
+            <a-col :span="24"
+                   class="mt-20">
+              <a-form-item>
+                <a-slider :min="0"
+                          v-model:value="formState.num"
+                          :max="selectedRow.orderqty"
+                          class="formSlider"
+                          style="width: 260px" />
+                <div class="unit">
+                  <span>0</span>
+                  <span>{{getMaxNum()}}{{selectedRow.enumdicname}}</span>
+                </div>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">&nbsp;</a-col>
+          </a-row>
+          <a-col :span="24"
+                 v-if="!isCanpart()">
+            <a-form-item label="摘牌数量">
+              <span class="white ml8">{{selectedRow.orderqty}}{{selectedRow.enumdicname}}</span>
+            </a-form-item>
+          </a-col>
+          <a-row :gutter="24">
+            <a-col :span="24"
+                   class="mt-20">
+              <a-form-item label="摘牌金额">
+                <span class="white ml8">{{getMoney()}}</span>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24">
+            <a-col :span="24">
+              <a-form-item label="履约保证金">
+                <span class="white ml8">{{getMargin()}}</span>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24">
+            <a-col :span="24">
+              <a-form-item label="可用资金">
+                <span class="white ml8">{{getCanUseMoney(getSelectedAccount())}}</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"
+                        :loading="loading"
+                        :disabled="loading"
+                        @click="submit">{{isBuy() ? '卖出' : '买入'}}</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, HdWRDealOrderReq, WrBargainApplyReq, 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 { getMarketRunByTradeMode, marketIsRun } from '@/services/bus/market';
+import { QueryOrderQuoteMyqQsp, WrOrderQuote } from '@/services/go/wrtrade/interface';
+
+import { validateAction } from '@/common/setup/form';
+
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+
+import { BuyOrSell, TradeMode } from '@/common/constants/enumCommon';
+import { getCanUseMoney } from '@/services/bus/account';
+import { TempWrOrderQuoteDetail } from '@/views/market/spot_trade/components/post_buying/interface';
+import { handleForm, handleSpotWarrant } from './setup';
+import { getRules } from '@/services/bus/rules';
+import { ListingForm } from './interface';
+import { HdWRDealOrder, wrBargainApply } from '@/services/proto/warehousetrade';
+import Long from 'long';
+import Bus from '@/utils/eventBus';
+
+export default defineComponent({
+    emits: ['cancel', 'update'],
+    name: 'warehouse_receipt_trade_blocs_delisting_tab',
+    components: { Des, Drawer, PlusOutlined, MinusOutlined },
+    props: {
+        selectedRow: {
+            type: Object as PropType<QueryOrderQuoteMyqQsp>,
+            default: {},
+        },
+        buyOrSell: {
+            type: Number as PropType<BuyOrSell>,
+            default: BuyOrSell.buy,
+        },
+        componentId: {
+            type: String,
+            default: '',
+        },
+    },
+    setup(props, context) {
+        const { visible, cancel } = _closeModal(context);
+        const { rules, formState, formRef } = handleForm();
+        const loading = ref<boolean>(false);
+        const accountList = getAccountTypeList([2]);
+        // 现货仓单
+        const { wrHoldList, allWrHoldList } = handleSpotWarrant(props.buyOrSell, props.selectedRow, loading);
+        if (accountList.length) {
+            formState.accountid = accountList[0].accountid;
+        }
+
+        function getSelectedAccount() {
+            return accountList.find((e) => e.accountid === formState.accountid)!;
+        }
+        function getPrice() {
+            return isBargin() ? formState.price : props.selectedRow.fixedprice;
+        }
+        function getNum() {
+            return isCanpart() ? formState.num : props.selectedRow.orderqty;
+        }
+        // 摘牌金额
+        function getMoney() {
+            const price = getPrice();
+            const num = getNum();
+            if (price) {
+                return (price * num).toFixed(2);
+            } else {
+                return '--';
+            }
+        }
+        // 履约保证金
+        function getMargin() {
+            const price = getPrice();
+            const num = getNum();
+            let result = 0;
+            const { marginvalue } = props.selectedRow;
+            if (price && num && marginvalue) {
+                result = price * num * marginvalue;
+            }
+            return result ? Math.floor(2) : '--';
+        }
+        function getMaxNum() {
+            const qty = props.selectedRow.orderqty;
+            let result = 0;
+            if (!isBuy()) {
+                // 交易规则
+                const rules = getRules();
+                const { buymarginvalue } = rules.length ? rules[0] : { buymarginvalue: 0 };
+                const canUseMoney = Number(getCanUseMoney(getSelectedAccount()));
+                if (canUseMoney && !isNaN(canUseMoney)) {
+                    const num = +(canUseMoney / buymarginvalue).toFixed(0);
+                    // 买 最大可摘数量=min{挂牌数量，可用资金/(履约保证金比例)}
+                    result = Math.min(qty, num);
+                }
+            } else {
+                // 卖出 最大可摘数量=min{挂牌数量，仓单可用数量}
+                const id = formState.LadingBillId;
+                if (id) {
+                    const item = allWrHoldList.value.find((el) => el.ladingbillid === id)!;
+                    result = Math.min(qty, item.enableqty);
+                }
+            }
+            return result;
+        }
+        function isBuy() {
+            return props.buyOrSell === BuyOrSell.buy;
+        }
+        // 是否部分摘牌
+        function isCanpart() {
+            return props.selectedRow.canpart === 1;
+        }
+        // 是否议价 摘牌
+        function isBargin() {
+            return props.componentId === 'warehouse_receipt_trade_blocs_bargain_delisting';
+        }
+        if (isBargin()) {
+            formState.price = props.selectedRow.fixedprice;
+        }
+
+        function submit() {
+            // 判断是否开市
+            if (!marketIsRun(TradeMode.WarehouseReceiptTrade)) {
+                return;
+            }
+            validateAction<ListingForm>(formRef, formState).then((res) => {
+                const price = getPrice();
+                const num = getNum();
+                if (isBargin()) {
+                    // 议价摘牌
+                    const param: WrBargainApplyReq = {
+                        WRTradeOrderID: Long.fromString(props.selectedRow.wrtradeorderid),
+                        ApplyQty: num,
+                        UserID: getUserId().toString(),
+                        AccountID: getSelectedAccountId().toString(),
+                        BuyOrSell: (isBuy() ? BuyOrSell.sell : BuyOrSell.buy).toString(),
+                        ApplyPrice: price.toString(),
+                        ApplyRemark: '',
+                    };
+                    requestResultLoadingAndInfo(wrBargainApply, param, loading, ['议价摘牌成功', '议价摘牌失败:']).then(() => {
+                        cancel(true);
+                        Bus.$emit('blocsTrade', true);
+                    });
+                } else {
+                    // 首先确定  这是仓单贸易的有仓单挂摘牌 HasWr = 1
+                    // 其次判断  摘牌 1。摘买 （需要通过自己的仓单进行摘买）  2。摘卖 （不需要通过仓单）
+                    const param = {
+                        UserID: getUserId(), // uint32 用户ID
+                        AccountID: getSelectedAccountId(), // uint64 资金账号
+                        RelatedWRTradeOrderID: props.selectedRow.wrtradeorderid, // uint64 关联委托单号(摘牌委托关联挂牌委托单ID)
+                        WRTransferUserID: props.selectedRow.userid, // uint32 仓单受让用户
+                        OrderQty: num, // uint64 委托数量
+                        OrderSrc: 0, // uint32 委托来源
+                        ClientSerialNo: uuidv4(), // string 客户端流水号
+                        ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // string 客户端委托时间
+                        ClientType: 4, // uint32 终端类型
+                        OperatorID: getUserId(), // uint64 操作员账号ID
+                        BuyOrSell: 0, // uint32 买卖方向
+                        ApplyID: 0, // uint64 申请ID
+                        LadingBillId: 0, // uint64 提单id(wrholdlb的LadingBillId字段),卖的时候填写
+                        SubNum: 0, // uint64 提单子单号(wrholdlb的SubNum字段),卖的时候填写
+                        WRFactorTypeId: Long.fromString(props.selectedRow.wrfactortypeid), // uint64 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写
+                        TradeDate: moment().format('YYYYMMDD'), // string 交易日
+                        DeliveryMonth: '', // string 交收月
+                        HasWr: 1, // uint32 是否有仓单-0:没有仓单 1:有仓单
+                        IsFinancing: 0, // uint32 是否融资购买(买摘牌时有效)-0:否 1:是
+                        ProductDetailID: res.caseId, // uint64 金融机构产品组合ID(融资购买时有效)
+                    };
+                    // 摘买方向
+                    if (isBuy()) {
+                        param.BuyOrSell = BuyOrSell.sell;
+                        param.LadingBillId = Long.fromString(res.LadingBillId);
+                        const item = wrHoldList.value.find((el) => el.id === res.LadingBillId);
+                        if (item) {
+                            param.SubNum = +item.subnum;
+                        }
+                    } else {
+                        param.BuyOrSell = BuyOrSell.buy;
+                    }
+
+                    requestResultLoadingAndInfo(HdWRDealOrder, param, loading, ['摘牌成功', '摘牌失败:']).then(() => {
+                        cancel(true);
+                        Bus.$emit('blocsTrade', true);
+                    });
+                }
+            });
+        }
+        return {
+            submit,
+            cancel,
+            visible,
+            accountList,
+            rules,
+            formState,
+            formRef,
+            getSelectedAccount,
+            getCanUseMoney,
+            getMoney,
+            isBuy,
+            isBargin,
+            wrHoldList,
+            loading,
+            getMaxNum,
+            isCanpart,
+            getMargin,
+        };
+    },
+});
+</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/warehouse_pre_sale/warehouse_pre_sale_designate/components/delisting/interface.ts

@@ -0,0 +1,12 @@
+export interface ListingForm {
+    accountid: undefined | number,
+    price: number,
+    num: number,
+    LadingBillId: string,
+    case: string,
+    caseId: number,
+}
+export interface Wrhold {
+    id: string,
+    name: string,
+}

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_designate/components/delisting/setup.ts

@@ -0,0 +1,54 @@
+import { BuyOrSell } from "@/common/constants/enumCommon";
+import { queryResultLoadingAndInfo } from "@/common/methods/request/resultInfo";
+import { validateCommon } from "@/common/setup/validate";
+import { queryHoldLB } from "@/services/go/wrtrade";
+import { QueryOrderQuoteMyqQsp, WrHoldLB } from "@/services/go/wrtrade/interface";
+import { Wrhold } from "@/views/market/spot_trade/spot_trade_order_transaction/components/delisting/interface";
+import { RuleObject } from "ant-design-vue/lib/form/interface";
+import { reactive, Ref, ref, UnwrapRef } from "vue";
+import { ListingForm } from "./interface";
+
+export function handleForm() {
+    const formRef = ref();
+    const formState: UnwrapRef<ListingForm> = reactive({
+        accountid: undefined,
+        price: 0,
+        num: 0,
+        LadingBillId: '',
+        case: '',
+        caseId: 0
+    })
+    const v_ContractType = async (rule: RuleObject, value: number) => {
+        return validateCommon(value, '请输入摘牌数量');
+    };
+    const rules = {
+        accountid: [{ required: true, message: '请选择交易账户' }],
+        LadingBillId: [{ required: true, message: '请选择现货仓单' }],
+        caseId: [{ required: true, message: '请选择融资方案' }],
+        num: [{ required: true, message: '请输入摘牌数量', trigger: 'blur', type: 'number', },
+        { required: true, validator: v_ContractType }],
+
+    }
+    return { rules, formState, formRef }
+}
+
+
+export function handleSpotWarrant(buyOrSell: BuyOrSell, selectedRow: QueryOrderQuoteMyqQsp, loading: Ref<boolean>) {
+    const wrHoldList = ref<Wrhold[]>([])
+    const allWrHoldList = ref<WrHoldLB[]>([])
+    if (buyOrSell === BuyOrSell.buy) {
+        queryResultLoadingAndInfo(queryHoldLB, loading).then(res => {
+            allWrHoldList.value = res
+            wrHoldList.value.length = 0
+            res.forEach(e => {
+                if (e.wrfactortypeid === String(selectedRow.wrfactortypeid)) {
+                    const { wrholdeno, enableqty, ladingbillid, enumdicname, subnum } = e
+                    const result = { id: ladingbillid, name: `${wrholdeno}（${enableqty}${enumdicname}）`, subnum }
+                    wrHoldList.value.push(result)
+                }
+            })
+        })
+    }
+
+    return { wrHoldList, allWrHoldList }
+}

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_designate/components/post-buying/index.vue

@@ -0,0 +1,419 @@
+<template>
+  <!--仓单贸易 贸易圈挂牌 挂牌求购 -->
+  <Drawer :title="'挂牌求购'"
+          :placement="'right'"
+          :visible="visible"
+          @cancel="cancel"
+          class="top486">
+    <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"
+                           class="inputIconBox">
+                <a-input-number class="commonInput"
+                                style="width: 260px"
+                                :min="0"
+                                v-model:value="formState.FixedPrice" />
+                <MinusOutlined @click="decreasePrice" />
+                <PlusOutlined @click="increasePrice" />
+                <a-checkbox class="commonCheckbox"
+                            v-model:checked="priceCheck">可议价</a-checkbox>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="挂牌数量"
+                           name="OrderQty"
+                           class="inputIconBox">
+                <a-input-number class="commonInput"
+                                style="width: 260px"
+                                :min="0"
+                                v-model:value="formState.OrderQty" />
+                <MinusOutlined @click="decreaseNumber" />
+                <PlusOutlined @click="increaseNumber" />
+                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                <a-checkbox v-model:checked="numCheck"
+                            class="commonCheckbox">整单</a-checkbox>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="24"
+                   v-if="!numCheck">
+              <a-form-item label="起摘数量"
+                           name="delistingQty">
+                <a-input-number class="commonInput"
+                                v-model:value="formState.delistingQty"
+                                :min="0"
+                                style="width: 260px !important" />
+                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="履约保证金"
+                           name="margin">
+                <a-input-number class="commonInput"
+                                v-model:value="formState.margin"
+                                :min="0"
+                                style="width: 260px" />
+                <span class="input-enumdicname">%</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="交收月"
+                           name="DeliveryMonth">
+                <a-month-picker style="width: 140px"
+                                v-model:value="formState.DeliveryMonth"
+                                :allowClear="'false'"
+                                class="commonDatePicker dialogDatePicker" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="挂牌有效期"
+                           name="vidaliteTime"
+                           class="inputIconBox">
+                <a-date-picker style="width: 260px"
+                               v-model:value="formState.vidaliteTime"
+                               :allowClear="false"
+                               class="commonDatePicker dialogDatePicker" />
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="24">
+              <a-form-item label="履约方式"
+                           class="inputIconBox">
+                <span :class="['clickBox', formState.permanceTempName ? 'white' : '']"
+                      @click="openPermance">{{formState.permanceTempName ? formState.permanceTempName : '选择履约模板'}}</span>
+                <svg class="icon svg-icon"
+                     aria-hidden="true"
+                     @click="openPermance">
+                  <use xlink:href="#icon-moban" />
+                </svg>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="指定朋友"
+                           class="inputIconBox">
+                <span :class="['clickBox', getFriendLength() ? 'white' : '']"
+                      @click="openFriend">{{getFriendLength() ? `已选${getFriendLength() }人` : '选择朋友'}}</span>
+                <svg class="icon svg-icon"
+                     aria-hidden="true"
+                     @click="openFriend">
+                  <use xlink:href="#icon-pengyou1" />
+                </svg>
+                <a-checkbox class="commonCheckbox"
+                            v-model:checked="friendCheck"
+                            @change="limiteFriends">不限</a-checkbox>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="挂牌金额">
+                <span class="white ml8">{{getMoney()}}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <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">{{getCanUseMoney(getSelectedAccount())}}</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>
+  <!-- 选择朋友 -->
+  <Friend v-if="showFriend"
+          :friends="formState.friends"
+          @cancel="chooseFriend"
+          @update="chooseFriend" />
+  <!-- 选择履约模板 -->
+  <Permance v-if="showPermance"
+            @cancel="choosePermance"
+            @update="choosePermance" />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, UnwrapRef } 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 { getUserId } from '@/services/bus/account';
+import { v3, v4 as uuidv4 } from 'uuid';
+import moment, { Moment } from 'moment';
+import { getMarketRunByTradeMode, marketIsRun } from '@/services/bus/market';
+import { validateAction } from '@/common/setup/form';
+import { getCanUseMoney } from '@/services/bus/account';
+import { TempWrOrderQuoteDetail } from '@/views/market/spot_trade/components/post_buying/interface';
+import Friend from '@/common/components/friends/index.vue';
+import Permance from '@/common/components/permanceTemp/choosePermancePlanTmp.vue';
+import { BlocsListingForm } from '@/common/setup/warehouse_receipt_trade/interface';
+import { message } from 'ant-design-vue';
+import { useBlocksPrice, useBlocksNumber, useBlocksAccount, useBlocksMoney, useBlocksFriends, useBlocksPermaceTemp, handleForm } from '@/common/setup/warehouse_receipt_trade/listing';
+import { TradeMode } from '@/common/constants/enumCommon';
+import { useVerifyBeginDelistingNum } from '@/hooks/form/verify';
+
+export default defineComponent({
+    emits: ['cancel', 'update'],
+    name: ModalEnum.spot_trade_warehouse_post_buying,
+    components: { Des, Drawer, PlusOutlined, MinusOutlined, Friend, Permance },
+    props: {
+        selectedRow: {
+            type: Object as PropType<TempWrOrderQuoteDetail>,
+            default: {},
+        },
+    },
+    setup(props, context) {
+        const { visible, cancel } = _closeModal(context);
+        // 表单
+        const { rules, formState, formRef } = handleForm<TempWrOrderQuoteDetail>(props.selectedRow);
+        // 验证 起摘数量
+        const { v_beginDelistingRules } = useVerifyBeginDelistingNum(props.selectedRow.minivalue);
+        rules.delistingQty = v_beginDelistingRules;
+        // 交收月
+        const momth = props.selectedRow.deliverymonth;
+        if (momth) {
+            formState.DeliveryMonth = moment(momth);
+        }
+        // 选择朋友
+        const { friendCheck, showFriend, chooseFriend, openFriend, getFriendLength, limiteFriends } = useBlocksFriends(formState);
+        // 履约模板
+        const { showPermance, choosePermance, openPermance } = useBlocksPermaceTemp(formState);
+        // 价格
+        const { priceCheck, increasePrice, decreasePrice } = useBlocksPrice(formState);
+        const loading = ref<boolean>(false);
+        // 摘牌数量
+        const { numCheck, increaseNumber, decreaseNumber } = useBlocksNumber(formState);
+        function submit() {
+            // 判断是否开市
+            if (!marketIsRun(TradeMode.WarehouseReceiptTrade)) {
+                return;
+            }
+            const marketInfo = getMarketRunByTradeMode(TradeMode.WarehouseReceiptTrade);
+            if (marketInfo) {
+                validateAction<BlocsListingForm>(formRef, formState).then((res) => {
+                    if (!formState.permanceTempName) {
+                        message.error('请选择履约模板');
+                        return;
+                    }
+                    if (!friendCheck.value) {
+                        if (formState.friends.length === 0) {
+                            message.error('请选择朋友');
+                            return;
+                        }
+                    }
+                    const param = {
+                        AccountID: res.accountid, // 默认内部资金账号第一个
+                        ClientSerialNo: uuidv4(), // 客户端流水号
+                        // OperateSrc: 2,
+                        ClientType: 4,
+                        // MarketID: marketInfo.marketid,
+                        LadingBillId: 0, // 提单id(wrholdlb的LadingBillId字段),卖的时候填写 uint64
+                        // LadingBillId: 'uint642081626946446000001', // 提单id(wrholdlb的LadingBillId字段),卖的时候填写 uint64
+                        TradeDate: moment(marketInfo.tradedate).format('YYYYMMDD'), // 交易日 string
+                        // SubNum: '0', // 提单子单号
+                        SubNum: 0,
+                        // WRFactorTypeId: '2121626946446000001', // 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写 uint64
+                        WRFactorTypeId: props.selectedRow.wrfactortypeid ? props.selectedRow.wrfactortypeid : 0, // 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写 uint64
+                        IsSpecified: 1, // 是否指定对手 0：不指定 1：指定 uint32
+                        MatchAccIDs: res.friends, // 仓单贸易对手资金账号ID集合(指定对手时填写) uint32
+                        OrderQty: res.OrderQty, // 委托数量(可挂部分数据量) ======
+                        DeliveryGoodsID: props.selectedRow.deliverygoodsid, // 交割商品商品ID  // 有仓单求购
+                        WRPriceType: 1, // 价格方式 1：固定价 2：浮动价
+                        FixedPrice: res.FixedPrice, // 固定价格
+                        PriceFactor: 1, // 价格系数(浮动价时填写)
+                        PriceMove: 0, // 升贴水(浮动价时填写)
+                        TimevalidType: 3, // 时间有效类型 1：当日有效 2：本周有效 3：指定时间有效 4：一直有效
+                        ValidTime: moment(formState.vidaliteTime).format('YYYY-MM-DD HH:mm:ss'), // 有效期限
+                        ClientOrderTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+                        FirstRatio: 0, // 首付比例
+                        PerformanceTemplateID: res.permaceTempId, // 履约计划模板ID
+                        UserID: getUserId(),
+                        OperatorID: getUserId(), // 操作员账号ID
+                        BuyOrSell: 0, // 买卖方向 0买1卖
+                        PriceDisplayMode: 1, // 浮动价显示方式 1：合并显示 2：分开显示
+                        CanBargain: priceCheck.value ? 1 : 0, // 挂牌是否可议价0:不可1:可-摘牌是否议价
+                        Attachment1: '', // 附件1
+                        Attachment2: '', // 附件2
+                        Remark: '', // 备注
+                        ApplyID: 0, // 申请ID
+                        WRTradeGoods: [],
+                        CanPart: numCheck.value ? 0 : 1, // 是否允许部份摘牌0:不允许;1:允许
+                        WRStandardID: props.selectedRow.wrstandardid,
+                        HasWr: 0, // 无仓单挂牌  是否有无仓单
+                        DeliveryMonth: moment(formState.DeliveryMonth).format('YYYY-MM-DD HH:mm:ss'),
+                        DelistMinQty: formState.delistingQty, // 起摘数量
+                        MarginFlag: 1, // 挂牌是否指定保证金 0:否 1:是
+                        MarginAlgorithm: 1, // 指定保证金方式 1:比率 2:固定
+                        MarginValue: +(formState.margin / 100), // 指定保证金设置值
+                        AllFriendsFlag: friendCheck.value ? 1 : 0, //是否全好友可见 0：否 1:是
+                        FactoryItems:
+                            props.selectedRow.wrResult != undefined
+                                ? props.selectedRow.wrResult.map((it) => {
+                                      return {
+                                          DGFactoryItemTypeID: it.dgfactoryitemtypeid, // uint64 要素项类型ID
+                                          DGFactoryItemID: it.dgfactoryitemid, // uint64 预约要素项类型值
+                                          ItemTypeMode: 1, // uint32 要素项类型模式
+                                      };
+                                  })
+                                : [], // DGFactoryItems 要素类型明细集合(没有仓单要素ID填写)
+                    };
+                    requestResultLoadingAndInfo(hdWROrder, param, loading, ['求购成功', '求购失败:']).then(() => {
+                        cancel(true);
+                    });
+                });
+            }
+        }
+        return {
+            submit,
+            cancel,
+            visible,
+            rules,
+            formState,
+            formRef,
+            getCanUseMoney,
+            ...useBlocksAccount(formState),
+            ...useBlocksMoney(formState),
+            priceCheck,
+            increasePrice,
+            decreasePrice,
+            showPermance,
+            choosePermance,
+            openPermance,
+            numCheck,
+            increaseNumber,
+            decreaseNumber,
+            friendCheck,
+            showFriend,
+            chooseFriend,
+            openFriend,
+            getFriendLength,
+            limiteFriends,
+        };
+    },
+});
+</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;
+        }
+    }
+}
+
+.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;
+}
+.ant-input-suffix {
+    position: absolute;
+    right: -25px;
+}
+.ant-form.dialogForm .ant-row.ant-form-item .ant-form-item-label {
+    width: 80px;
+}
+.ant-form.dialogForm .ant-row.ant-form-item .ant-form-item-control-wrapper {
+    width: calc(100% - 80px);
+}
+.ant-form.dialogForm {
+    .ant-row.btnCenter.ant-form-item {
+        width: 100%;
+        .ant-col.ant-form-item-control-wrapper {
+            width: 100%;
+        }
+    }
+}
+</style>

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_designate/components/sell/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <!-- 仓单贸易 贸易圈挂牌 买-->
+  <div>
+    <a-table :columns="columns"
+             :class="['srcollYTable', isBottom ? 'condSecondTabTableHalfTop' : 'condSecondTabTableHalfTopNoBottom',  tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
+             :scroll="{ x: '100%', y: isBottom ? 'calc((100vh- 443px)/2 - 14px)' : 'calc((100vh - 196px)/2 - 16px)' }"
+             :pagination="false"
+             :loading="loading"
+             :expandedRowKeys="expandedRowKeys"
+             :customRow="Rowclick"
+             rowKey="key"
+             :data-source="tableList">
+      <template #index="{ index }">
+        <span>{{ index + 1 }}</span>
+      </template>
+      <template #marginvalue="{ text }">
+        <span>{{ (text * 100).toFixed(2) + '%'}}</span>
+      </template>
+      <!-- 议价 -->
+      <template #canbargain="{ text }">
+        <span>{{ text ? '是' : '否' }}</span>
+      </template>
+      <!-- 整单 -->
+      <template #canpart="{ text }">
+        <span>{{ text  === 1 ? '否' : '是' }}</span>
+      </template>
+      <!-- 挂牌有效期 -->
+      <template #validtime="{ text }">
+        <span>{{ formatTime(text, 'd') }}</span>
+      </template>
+    </a-table>
+    <!-- 右键 -->
+    <contextMenu :contextMenu="contextMenu"
+                 @cancel="closeContext"
+                 :list="filterBtn(firstBtn)"></contextMenu>
+    <component :is="componentId"
+               v-if="componentId"
+               :componentId="componentId"
+               :selectedRow="selectedRow"
+               :buyOrSell="BuyOrSell.sell"
+               @cancel="closeComponent"></component>
+  </div>
+</template>
+
+<script lang="ts">
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
+import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
+import { queryOrderQuote, queryQueryOrderQuoteMyq } from '@/services/go/wrtrade';
+import { handleComposeTable } from '@/common/setup/table/compose';
+import Filter from '../../components/filter/index.vue';
+import { Goods } from '@/services/go/ermcp/goodsInfo/interface';
+import { getShowBottomValue } from '@/common/config/constrolBottom';
+import { handleColumns, filterBtn } from '../../setup';
+import { BuyOrSell } from '@/common/constants/enumCommon';
+import { formatTime } from '@/common/methods';
+import Bus from '@/utils/eventBus/index';
+
+export default defineComponent({
+    name: 'warehouse_receipt_trade_blocs_sell',
+    components: {
+        contextMenu,
+        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+    },
+    setup() {
+        const isBottom = getShowBottomValue();
+        // 表头
+        const { getBuyOrSellColumns } = handleColumns();
+        const columns = getBuyOrSellColumns(BuyOrSell.sell);
+
+        // 表格列表数据
+        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+        // 获取列表数据
+        const queryTableAction = () => {
+            const param: QueryOrderQuoteMyqReq = {
+                buyorsell: BuyOrSell.sell,
+                haswr: 0,
+            };
+            queryTable(queryQueryOrderQuoteMyq, param);
+        };
+        // 表格通用逻辑
+        const param: ComposeTableParam = {
+            queryFn: queryTableAction,
+            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+            tableFilterKey: [],
+            isDetail: false,
+        };
+        const {
+            contextMenu,
+            openContext,
+            closeContext, // 右键
+            expandedRowKeys,
+            selectedRow,
+            Rowclick, // 表格折腾面板数据与单击、双击事件
+            componentId,
+            closeComponent,
+            openComponent, // 控制异步组件
+            firstBtn,
+            secondBtn, // 表格按钮
+        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+        function search(value: Object) {
+            // const param: QueryOrderQuoteReq = {
+            //     wrpricetype: 2,
+            //     haswr: 1,
+            // };
+            // Object.assign(param, value);
+            // queryTable(queryOrderQuote, param);
+        }
+        // 单据挂牌成功 刷新数据
+        Bus.$on('spotTrade', queryTableAction);
+        return {
+            isBottom,
+            contextMenu,
+            openContext,
+            closeContext, // 右键
+            columns,
+            expandedRowKeys,
+            selectedRow,
+            Rowclick, // 表格折腾面板数据与单击、双击事件
+            componentId,
+            closeComponent, // 控制异步组件
+            firstBtn, // 表格按钮
+            loading,
+            tableList,
+            search,
+            formatTime,
+            filterBtn,
+            BuyOrSell,
+        };
+    },
+});
+</script>
+<style lang="less">
+</style>

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_designate/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <!-- 仓单贸易 贸易圈挂牌-->
+  <div class="topTableHeight">
+    <Filter :enumName="name"
+            @search="search"
+            @buy="buyOpen" />
+    <div>
+      <Sell />
+      <Buy />
+    </div>
+    <component :is="componentId"
+               v-if="componentId"
+               :selectedRow="selectedRow"
+               @cancel="closeComponent"></component>
+  </div>
+</template>
+
+<script lang="ts">
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+import { defineComponent, defineAsyncComponent, ModalEnum } from '@/common/export/commonTable';
+import Filter from '../../components/filter/index.vue';
+import { getShowBottomValue } from '@/common/config/constrolBottom';
+import Buy from './components/buy/index.vue';
+import Sell from './components/sell/index.vue';
+import { handleModalComponent } from '@/common/setup/asyncComponent';
+import { ref } from 'vue';
+import Bus from '@/utils/eventBus';
+
+export default defineComponent({
+    name: EnumRouterName.warehouse_pre_sale_blocs,
+    components: {
+        Filter,
+        Buy,
+        Sell,
+        postBuying: defineAsyncComponent(() => import('./components/post-buying/index.vue')),
+    },
+    setup() {
+        const isBottom = getShowBottomValue();
+        const selectedRow = ref();
+        function queryFn() {
+            Bus.$emit('spotTrade', true);
+        }
+        // 控制异步组件
+        const { componentId, closeComponent } = handleModalComponent(queryFn, selectedRow);
+        function search() {}
+        function buyOpen(value: any) {
+            componentId.value = 'postBuying';
+            selectedRow.value = value;
+        }
+        return {
+            isBottom,
+            search,
+            buyOpen,
+            componentId,
+            closeComponent,
+            selectedRow,
+            name: EnumRouterName.warehouse_pre_sale_blocs,
+        };
+    },
+});
+</script>
+<style lang="less">
+</style>

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_designate/setup.ts

@@ -0,0 +1,41 @@
+import { BtnListType } from '@/common/components/btnList/interface';
+import { BuyOrSell } from '@/common/constants/enumCommon';
+import { QueryOrderQuoteMyqQsp } from '@/services/go/wrtrade/interface';
+
+
+export function handleColumns() {
+    const columns = [
+        { title: '品种', key: 'deliverygoodsname', align: 'center', width: 140 },
+        { title: '商品', key: 'wrtypename', align: 'center', width: 400 },
+        { title: '仓库', key: 'warehousename', align: 'center', width: 200 },
+        { title: '交收月', key: 'deliverymonth', align: 'center', width: 120 },
+        { title: '价格', key: 'fixedprice', align: 'center', width: 120 },
+        { title: '议价', key: 'canbargain', align: 'center', width: 80 },
+        { title: '数量', key: 'orderqty', align: 'center', width: 120 },
+        { title: '整单', key: 'canpart', align: 'center', width: 80 },
+        { title: '挂牌有效期', key: 'validtime', align: 'center', width: 120 },
+        { title: '履约保证金', key: 'marginvalue', align: 'center', width: 120 },
+        { title: '履约方式', key: 'templatename', align: 'center', width: 140 },
+        { title: '挂牌方', key: 'username', align: 'center', width: 100 },
+    ];
+    function getBuyOrSellColumns(type: BuyOrSell) {
+        const title = type === BuyOrSell.buy ? '买' : '卖'
+        const result = [
+            { title, dataIndex: 'index', key: 'index', width: 80, align: 'center' },
+            ...columns
+        ]
+        return result.map(el => {
+            const slots = { customRender: el.key };
+            return { ...el, slots, dataIndex: el.key };
+        })
+    }
+    return { getBuyOrSellColumns }
+}
+
+export function filterBtn(btnList: BtnListType[], selectedRow: QueryOrderQuoteMyqQsp) {
+    let result = btnList.filter(e => e.code !== 'warehouse_receipt_trade_blocs_post_buying')
+    if (selectedRow) {
+        result = selectedRow.canbargain ? result : result.filter(e => e.code !== 'warehouse_receipt_trade_blocs_bargain_delisting')
+    }
+    return result
+}