style update

src/assets/styles/mixin.less

@@ -1846,7 +1846,6 @@ input:-internal-autofill-selected {
 // 买卖大厅表格
 .buyHallTable,.sellHallTable {
     .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
-        min-height: calc(100vh - 470px);
         background: transparent;
     }
     .ant-table {
@@ -1876,7 +1875,6 @@ input:-internal-autofill-selected {
             }
         }
         .ant-table-tbody {
-            min-height: calc(100vh - 470px);
             background: @m-red2;
             tr {
                 td {
@@ -1950,6 +1948,36 @@ input:-internal-autofill-selected {
 .sellHallTable .ant-table .ant-table-tbody tr td:not(:first-child),.buyHallTable .ant-table .ant-table-tbody tr td:not(:first-child) {
     background-color: @m-black2;
 }
+.buyHallTable,.sellHallTable {
+    .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+        min-height: calc(100vh - 470px);
+    }
+    .ant-table {
+        .ant-table-tbody {
+            min-height: calc(100vh - 470px);
+        }
+    }
+}
+.noDataTable {
+    .ant-table {
+        .ant-table-header {
+            height: 35px;
+            margin-bottom: 0 !important;
+            overflow: hidden !important;
+        }
+    }
+}
+// 没有底部时买卖大厅表格高度
+.buyHallTableHigh,.sellHallTableHigh {
+    .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+        min-height: calc(100vh - 180px);
+    }
+    .ant-table {
+        .ant-table-tbody {
+            min-height: calc(100vh - 180px);
+        }
+    }
+}
 // 表单里面的内容
 .formBar {
     ::v-deep.formProgress {

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

@@ -1,30 +1,33 @@
 <template>
-  <!-- 买大厅 -->
-  <a-table :columns="handleColumn(columns)"
-           class="buyHallTable"
-           :scroll="{ x: '100%', y: 'calc(100vh- 470px)' }"
-           :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>
-  </a-table>
-  <component :is="componentId"
-             v-if="componentId"
-             :selectedRow="selectedRow"
-             :buyOrSell="BuyOrSell.buy"
-             :enumName="enumName"
-             :parantSelectedRow="parantSelectedRow"
-             @cancel="closeComponent"></component>
+    <!-- 买大厅 -->
+    <a-table
+        :columns="handleColumn(columns)"
+        :class="['buyHallTable', isBottom ? '' : 'buyHallTableHigh', tableList.length ? '' : 'noDataTable']"
+        :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 470px)' : 'calc(100vh - 180px)' }"
+        :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>
+    </a-table>
+    <component
+        :is="componentId"
+        v-if="componentId"
+        :selectedRow="selectedRow"
+        :buyOrSell="BuyOrSell.buy"
+        :enumName="enumName"
+        :parantSelectedRow="parantSelectedRow"
+        @cancel="closeComponent"
+    ></component>
 </template>
 
 <script lang="ts">
@@ -41,6 +44,7 @@ import { expandIcon } from '@/common/setup/table/clolumn';
 import { ColumnType } from '@/common/methods/table/interface';
 import { Moment } from 'moment';
 import moment from 'moment';
+import { getHasBottom } from '@/common/setup/order/orderData';
 
 export default defineComponent({
     emits: ['cancel', 'openComponent'],
@@ -68,6 +72,8 @@ export default defineComponent({
         [ModalEnum.spot_trade_warehouse_delisting]: defineAsyncComponent(() => import('../delisting/index.vue')),
     },
     setup(props, context) {
+        const isBottom = getHasBottom();
+        console.log(isBottom.value, 'isBottom');
         // 表格列表数据
         const { loading, tableList, queryTable } = queryTableList<WrOrderQuoteDetail>();
         const { wrpricetype, haswr, tableKey } = getBuyMarketParam(props.enumName);
@@ -104,6 +110,7 @@ export default defineComponent({
         }
         function handleBtnList() {}
         return {
+            isBottom,
             ...handleComposeTable<WrOrderQuoteDetail>(param),
             queryTableAction,
             BuyOrSell,

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

@@ -1,30 +1,32 @@
 <template>
-  <!-- 卖大厅 -->
-  <a-table :columns="handleColumn(columns)"
-           class="sellHallTable"
-           :scroll="{ x: '100%', y: 'calc(100vh - 470px)' }"
-           :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>
-  </a-table>
-  <component :is="componentId"
-             v-if="componentId"
-             :selectedRow="selectedRow"
-             :enumName="enumName"
-             :buyOrSell="BuyOrSell.sell"
-             :parantSelectedRow="parantSelectedRow"
-             @cancel="closeComponent"></component>
+    <!-- 卖大厅 -->
+    <a-table
+        :columns="handleColumn(columns)"
+        :class="['sellHallTable', isBottom ? '' : 'sellHallTableHigh', tableList.length ? '' : 'noDataTable']"
+        :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 470px)' : 'calc(100vh - 180px)' }"
+        :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>
+    </a-table>
+    <component
+        :is="componentId"
+        v-if="componentId"
+        :selectedRow="selectedRow"
+        :enumName="enumName"
+        :buyOrSell="BuyOrSell.sell"
+        :parantSelectedRow="parantSelectedRow"
+        @cancel="closeComponent"
+    ></component>
 </template>
 
 <script lang="ts">
@@ -41,6 +43,7 @@ import { expandIcon } from '@/common/setup/table/clolumn';
 import { ColumnType } from '@/common/methods/table/interface';
 import { Moment } from 'moment';
 import moment from 'moment';
+import { getHasBottom } from '@/common/setup/order/orderData';
 
 export default defineComponent({
     emits: ['cancel', 'openComponent'],
@@ -69,6 +72,8 @@ export default defineComponent({
         [ModalEnum.spot_trade_warehouse_financing_delisting]: defineAsyncComponent(() => import('../financing_delisting/index.vue')),
     },
     setup(props, context) {
+        const isBottom = getHasBottom();
+        console.log(isBottom.value, 'isBottom');
         // 表格列表数据
         const { loading, tableList, queryTable } = queryTableList<WrOrderQuoteDetail>();
 
@@ -107,6 +112,7 @@ export default defineComponent({
             return columns;
         }
         return {
+            isBottom,
             ...handleComposeTable<WrOrderQuoteDetail>(param),
             queryTableAction,
             loading,

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

@@ -1,145 +1,140 @@
 <template>
-  <!-- 挂牌求购 -->
-  <Drawer :title="'挂牌求购'"
-          :placement="'top'"
-          :visible="visible"
-          @cancel="cancel"
-          class="top">
-    <div class="post_buying">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <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"
-                   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>估算价估算价</span>
-              </a-form-item>
-            </a-col>
+    <!-- 挂牌求购 -->
+    <Drawer :title="'挂牌求购'" :placement="'top'" :visible="visible" @cancel="cancel" class="top">
+        <div class="post_buying">
+            <div class="formBar">
+                <a-form
+                    class="inlineForm dialogForm"
+                    ref="formRef"
+                    :model="formState"
+                    :rules="rules"
+                >
+                    <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" 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>估算价估算价</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"
-                   v-if="!isWR()">
-              <a-form-item label="交收月"
-                           name="DeliveryMonth">
-                <a-month-picker style="width: 260px"
-                                v-model:value="formState.DeliveryMonth"
-                                :allowClear="false"
-                                class="commonDatePicker dialogDatePicker" />
-              </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="99999999"
-                          class="formSlider" />
-                <div class="unit">
-                  <span>{{selectedRow.minivalue}}</span>
-                  <span>{{getMaxNum()}}{{selectedRow.enumdicname}}</span>
-                </div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="起摘数量"
-                           class="relative">
-                <a-input class="commonInput"
-                         :suffix="selectedRow.enumdicname"
-                         :min="selectedRow.minivalue"
-                         style="width: 260px" />
-                <div class="tip">最小单位：{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   class="relative">
-              <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
-                <span class="white ml8">{{getMoney()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   class="relative">
-              <a-form-item :label="getMargin() ? '履约保证金' : ''">
-                <a-row>
-                  <a-col :span="8"
-                         v-if="getMargin()">
-                    <span class="white ml8">{{getMargin()}}</span>
-                  </a-col>
-                  <a-col :span="4"
-                         class="tr">
-                    <span class="grey1">可用资金</span>
-                  </a-col>
-                  <a-col :span="12">
-                    <span class="white ml8"> {{getCanUseMoney(getSelectedAccount())}}</span>
-                  </a-col>
-                </a-row>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24"
-                   class="mt20">
-              <a-form-item class="tc">
-                <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>
-    </div>
-  </Drawer>
+                        <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" v-if="!isWR()">
+                            <a-form-item label="交收月" name="DeliveryMonth">
+                                <a-month-picker
+                                    style="width: 260px"
+                                    v-model:value="formState.DeliveryMonth"
+                                    :allowClear="false"
+                                    class="commonDatePicker dialogDatePicker"
+                                />
+                            </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="99999999"
+                                    class="formSlider"
+                                />
+                                <div class="unit">
+                                    <span>{{selectedRow.minivalue}}</span>
+                                    <span>{{getMaxNum()}}{{selectedRow.enumdicname}}</span>
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="起摘数量" class="relative">
+                                <a-input
+                                    class="commonInput"
+                                    :suffix="selectedRow.enumdicname"
+                                    :min="selectedRow.minivalue"
+                                    style="width: 260px"
+                                />
+                                <div
+                                    class="tip"
+                                >最小单位：{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" class="relative mt20">
+                            <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
+                                <span class="white ml8">{{getMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" class="relative">
+                            <a-form-item :label="getMargin() ? '履约保证金' : ''">
+                                <a-row>
+                                    <a-col :span="8" v-if="getMargin()">
+                                        <span class="white ml8">{{getMargin()}}</span>
+                                    </a-col>
+                                    <a-col :span="4" class="tr">
+                                        <span class="grey1">可用资金</span>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <span
+                                            class="white ml8"
+                                        >{{getCanUseMoney(getSelectedAccount())}}</span>
+                                    </a-col>
+                                </a-row>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24" type="flex" justify="center">
+                        <a-col :span="24" class="mt20">
+                            <a-form-item class="tc">
+                                <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>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">