1. 优化列表显示

src/views/order/groupBuyingMr/index.vue

@@ -1,276 +1,282 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="订单号">
-        <el-input
-          v-model="queryParams.id"
-          placeholder="请输入订单号"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="团队名称" label-width="100px">
-        <el-input
-          v-model="queryParams.teamName"
-          placeholder="请输入团队名称"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="销售员" label-width="100px">
-        <el-input
-          v-model="queryParams.salerPerson"
-          placeholder="请输入销售员"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="团队类型">
-        <el-select
-        v-model="queryParams.teamTypeId"
-        placeholder="团队类型"
-        clearable
-        style="width: 240px"
-        >
-        <el-option
-          v-for="dict in dict.type.team_type"
-          :key="dict.value"
-          :label="dict.label"
-          :value="dict.value"
-        />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否成功开票" label-width="100">
-        <el-select
-          v-model="queryParams.ifSuccessInvoice"
-          placeholder="请选择"
-          clearable
-          style="width: 100%"
-        >
-          <el-option label="否" value="0" />
-          <el-option label="是" value="1" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="订单状态">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="订单状态"
+  <div class="app-container" :style="{'--q-height':qHeight}">
+    <div class="app-container-query" ref="queryFormBox">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="订单号">
+          <el-input
+            v-model="queryParams.id"
+            placeholder="请输入订单号"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="团队名称" label-width="100px">
+          <el-input
+            v-model="queryParams.teamName"
+            placeholder="请输入团队名称"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="销售员" label-width="100px">
+          <el-input
+            v-model="queryParams.salerPerson"
+            placeholder="请输入销售员"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="团队类型">
+          <el-select
+          v-model="queryParams.teamTypeId"
+          placeholder="团队类型"
           clearable
-          style="width: 100%"
-        >
+          style="width: 240px"
+          >
           <el-option
-            v-for="dict in dict.type.order_status_type"
+            v-for="dict in dict.type.team_type"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="支付时间">
-        <el-date-picker
-          v-model="queryParams.time"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <!-- <el-form-item label="场次时间">
-        <el-date-picker
-          style="width: 230px;"
-          v-model="queryParams.performDate"
-          @change="pagePerformTimeListFun"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item> -->
-      <el-form-item label="场次时间" label-width="70px">
-        <el-date-picker
-          style="width: 250px;"
-          v-model="queryParams.performDate"
-          @change="pagePerformTimeListFun"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="场次" v-if="!multiPerformDate">
-        <el-select
-          v-model="queryParams.performTimeId"
-          placeholder="场次"
-          clearable
-          style="width: 100%"
-        >
-          <el-option
-            v-for="dict in pagePerformTimeList"
-            :key="dict.id"
-            :label="dict.timeSnapshot+'('+dict.performTimeStart+'-'+dict.performTimeEnd+')'"
-            :value="dict.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="开票时间">
-        <el-date-picker
-          style="width: 230px;"
-          v-model="queryParams.invoiceTime"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-button
-        type="primary"
-        size="mini"
-        icon="el-icon-download"
-        v-hasPermi="['groupBuyingMr:groupBuyingMr:excel']"
-        @click="handleExport"
-        v-loading.fullscreen.lock="handleExportLoading"
-        element-loading-text="正在拼命生成数据中..."
-        element-loading-spinner="el-icon-loading"
-        element-loading-background="rgba(0, 0, 0, 0.5)"
-      >导出excel</el-button>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否成功开票" label-width="100">
+          <el-select
+            v-model="queryParams.ifSuccessInvoice"
+            placeholder="请选择"
+            clearable
+            style="width: 100%"
+          >
+            <el-option label="否" value="0" />
+            <el-option label="是" value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="订单状态">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="订单状态"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in dict.type.order_status_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支付时间">
+          <el-date-picker
+            v-model="queryParams.time"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <!-- <el-form-item label="场次时间">
+          <el-date-picker
+            style="width: 230px;"
+            v-model="queryParams.performDate"
+            @change="pagePerformTimeListFun"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="选择日期">
+          </el-date-picker>
+        </el-form-item> -->
+        <el-form-item label="场次时间" label-width="70px">
+          <el-date-picker
+            style="width: 250px;"
+            v-model="queryParams.performDate"
+            @change="pagePerformTimeListFun"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="场次" v-if="!multiPerformDate">
+          <el-select
+            v-model="queryParams.performTimeId"
+            placeholder="场次"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in pagePerformTimeList"
+              :key="dict.id"
+              :label="dict.timeSnapshot+'('+dict.performTimeStart+'-'+dict.performTimeEnd+')'"
+              :value="dict.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开票时间">
+          <el-date-picker
+            style="width: 230px;"
+            v-model="queryParams.invoiceTime"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    
+    <div class="app-container-table-box">
+      <el-row :gutter="10" class="mb8">
+        <el-button
+          type="primary"
+          size="mini"
+          icon="el-icon-download"
+          v-hasPermi="['groupBuyingMr:groupBuyingMr:excel']"
+          @click="handleExport"
+          v-loading.fullscreen.lock="handleExportLoading"
+          element-loading-text="正在拼命生成数据中..."
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.5)"
+        >导出excel</el-button>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+      <div class="app-container-table-info">
+        <el-table ref="tables" v-loading="loading" height="100%" :data="dataList" border>
+          <el-table-column label="序号" align="center" fixed="left" type="index" width="60"></el-table-column>
+          <el-table-column label="订单号" align="center" fixed="left" prop="id" />
+          <el-table-column label="团队名称" align="center" fixed="left" prop="teamName" />
+          <el-table-column label="团队类型" align="center" fixed="left" prop="type">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.team_type" :value="scope.row.teamType"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="联系电话" align="center" prop="teamMobile" />
+          <el-table-column label="客户负责人" align="center" prop="teamContact" />
+          <el-table-column label="销售员" align="center" prop="salerPerson" />
+          <el-table-column label="剧目名称" align="center" prop="performName" />
+          <el-table-column label="票务名称" align="center" prop="goodsName" />
+          <el-table-column label="座位类型" align="center" prop="seatTypeName" />
+          <el-table-column label="场次时间" align="center" prop="performDate" />
+          <el-table-column label="场次" width="120" align="center" prop="timeSnapshot">
+            <template slot-scope="scope">
+              <span>{{ scope.row.timeSnapshot }} <br /> ({{ scope.row.performTimeStart + '-' + scope.row.performTimeEnd }})</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="团购数量" align="center" prop="quantity" />
+          <!-- <el-table-column label="支付总额" align="center" prop="orderPrice">
+            <template slot-scope="scope">
+              <span>￥{{ scope.row.orderPrice }}</span>
+            </template>
+          </el-table-column> -->
+          <el-table-column label="应付金额" align="center" prop="orderPrice">
+            <template slot-scope="scope">
+              <span>￥{{ scope.row.orderPrice }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="实付金额" align="center" prop="realPrice">
+            <template slot-scope="scope">
+              <span>￥{{ scope.row.realPrice }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付方式" align="center" prop="type">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付时间" align="center" prop="payTime" width="160" >
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.payTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="订单状态" align="center" prop="type">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.order_status_type" :value="scope.row.status"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="已核销票数" align="center" prop="usedTotal">
+            <template slot-scope="scope">
+              <span>{{ scope.row.usedTotal }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="已核销金额" align="center" prop="usedPriceTotal">
+            <template slot-scope="scope">
+              <span>{{ scope.row.usedPriceTotal }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="退票数量" align="center" prop="refundTotal">
+            <template slot-scope="scope">
+              <span>{{ scope.row.refundTotal }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="退票金额" align="center" prop="refundPriceTotal">
+            <template slot-scope="scope">
+              <span>{{ scope.row.refundPriceTotal }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="是否成功开票" align="center">
+            <template slot-scope="scope">
+              <el-tag type="danger" v-if="scope.row.ifSuccessInvoice  == '0'">否</el-tag>
+              <el-tag type="success" v-else-if="scope.row.ifSuccessInvoice  == '1'">是</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票时间" align="center" prop="invoiceTime">
+            <template slot-scope="scope">
+              <span>{{ scope.row.invoiceTime }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                @click="openDetails(scope.row)"
+                v-hasPermi="['groupBuyingMr:groupBuyingMr:details']"
+              >详情</el-button>
+              <el-button
+              v-if="scope.row.status===0"
+                size="mini"
+                type="text"
+                @click="handleCorporatePay(scope.row)"
+                v-hasPermi="['groupBuyingMr:groupBuyingMr:details']"
+              >对公转账</el-button>
+              <el-button
+                v-if="scope.row.status === 0"
+                size="mini"
+                type="text"
+                @click="handleCancelOrder(scope.row)"
+                v-hasPermi="['groupBuyingMr:groupBuyingMr:cancel']"
+              >关闭订单</el-button>
+              <el-button
+                  v-if="scope.row.status == 3 || scope.row.status == 7"
+                  size="mini"
+                  type="text"
+                  @click="handleOpen([scope.row])"
+                  v-hasPermi="['groupBuyingMr:groupBuyingMr:print']"
+                >打印小票</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
 
-    <el-table ref="tables" v-loading="loading" :data="dataList" border>
-      <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
-      <el-table-column label="订单号" align="center" prop="id" />
-      <el-table-column label="团队名称" align="center" prop="teamName" />
-      <el-table-column label="团队类型" align="center" prop="type">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.team_type" :value="scope.row.teamType"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="联系电话" align="center" prop="teamMobile" />
-      <el-table-column label="客户负责人" align="center" prop="teamContact" />
-      <el-table-column label="销售员" align="center" prop="salerPerson" />
-      <el-table-column label="剧目名称" align="center" prop="performName" />
-      <el-table-column label="票务名称" align="center" prop="goodsName" />
-      <el-table-column label="座位类型" align="center" prop="seatTypeName" />
-      <el-table-column label="场次时间" align="center" prop="performDate" />
-      <el-table-column label="场次" width="120" align="center" prop="timeSnapshot">
-        <template slot-scope="scope">
-          <span>{{ scope.row.timeSnapshot }} <br /> ({{ scope.row.performTimeStart + '-' + scope.row.performTimeEnd }})</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="团购数量" align="center" prop="quantity" />
-      <!-- <el-table-column label="支付总额" align="center" prop="orderPrice">
-        <template slot-scope="scope">
-          <span>￥{{ scope.row.orderPrice }}</span>
-        </template>
-      </el-table-column> -->
-      <el-table-column label="应付金额" align="center" prop="orderPrice">
-        <template slot-scope="scope">
-          <span>￥{{ scope.row.orderPrice }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="实付金额" align="center" prop="realPrice">
-        <template slot-scope="scope">
-          <span>￥{{ scope.row.realPrice }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="支付方式" align="center" prop="type">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="支付时间" align="center" prop="payTime" width="160" >
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.payTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="订单状态" align="center" prop="type">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.order_status_type" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="已核销票数" align="center" prop="usedTotal">
-        <template slot-scope="scope">
-          <span>{{ scope.row.usedTotal }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="已核销金额" align="center" prop="usedPriceTotal">
-        <template slot-scope="scope">
-          <span>{{ scope.row.usedPriceTotal }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="退票数量" align="center" prop="refundTotal">
-        <template slot-scope="scope">
-          <span>{{ scope.row.refundTotal }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="退票金额" align="center" prop="refundPriceTotal">
-        <template slot-scope="scope">
-          <span>{{ scope.row.refundPriceTotal }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="是否成功开票" align="center">
-        <template slot-scope="scope">
-          <el-tag type="danger" v-if="scope.row.ifSuccessInvoice  == '0'">否</el-tag>
-          <el-tag type="success" v-else-if="scope.row.ifSuccessInvoice  == '1'">是</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="开票时间" align="center" prop="invoiceTime">
-        <template slot-scope="scope">
-          <span>{{ scope.row.invoiceTime }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            @click="openDetails(scope.row)"
-            v-hasPermi="['groupBuyingMr:groupBuyingMr:details']"
-          >详情</el-button>
-          <el-button
-          v-if="scope.row.status===0"
-            size="mini"
-            type="text"
-            @click="handleCorporatePay(scope.row)"
-            v-hasPermi="['groupBuyingMr:groupBuyingMr:details']"
-          >对公转账</el-button>
-          <el-button
-            v-if="scope.row.status === 0"
-            size="mini"
-            type="text"
-            @click="handleCancelOrder(scope.row)"
-            v-hasPermi="['groupBuyingMr:groupBuyingMr:cancel']"
-          >关闭订单</el-button>
-          <el-button
-              v-if="scope.row.status == 3 || scope.row.status == 7"
-              size="mini"
-              type="text"
-              @click="handleOpen([scope.row])"
-              v-hasPermi="['groupBuyingMr:groupBuyingMr:print']"
-            >打印小票</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+    
 
     <!-- 详情 -->
     <details-dia ref="detailsDia" :dict="dict" @getList="getList"></details-dia>
@@ -348,6 +354,8 @@ export default {
   components: { detailsDia },
   data() {
     return {
+      qHeight: '0px',
+      resizeObserver: null,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -468,6 +476,17 @@ export default {
     this.pagePerformTimeListFun(this.queryParams.performDate)
     this.getList();
   },
+  mounted() {
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        const { width, height } = entry.contentRect;
+        this.width = width;
+        this.height = height;
+        this.qHeight = height + 'px'
+      }
+    });
+    this.resizeObserver.observe(this.$refs.queryFormBox);
+  },
   methods: {
     /** 查询列表 */
     getList() {
@@ -800,10 +819,14 @@ export default {
         });
       }).catch(() => {});
     },
-  }
+  },
+  beforeDestroy() {
+    this.resizeObserver.unobserve(this.$refs.queryFormBox);
+    this.resizeObserver.disconnect();
+  },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 
   .upload-btn {
     width: 100px;
@@ -822,5 +845,17 @@ export default {
   .avatar {
     cursor: pointer;
   }
-
+.app-container {
+  height: calc( 100vh - 110px );
+  box-sizing: border-box;
+}
+.app-container-query {
+  
+}
+.app-container-table-box {
+  height: calc( 100% - var(--q-height) );
+  .app-container-table-info {
+    height: calc( 100% - 100px );
+  }
+}
 </style>

src/views/order/orderMr/index.vue

@@ -1,307 +1,312 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="订单号">
-        <el-input
-          v-model="queryParams.orderId"
-          placeholder="请输入订单号"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="购票人手机号" label-width="100px">
-        <el-input
-          v-model="queryParams.memberMobile"
-          placeholder="请输入购票人手机号"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="剧目名称">
-        <el-input
-          v-model="queryParams.performName"
-          placeholder="请输入剧目名称"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="票务名称">
-        <el-input
-          v-model="queryParams.goodsName"
-          placeholder="请输入票务名称"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="是否成功开票" label-width="100">
-        <el-select
-          v-model="queryParams.ifSuccessInvoice"
-          placeholder="请选择"
-          clearable
-          style="width: 100%"
-        >
-          <el-option label="否" value="0" />
-          <el-option label="是" value="1" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="订单状态">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="订单状态"
-          clearable
-          style="width: 100%"
-        >
-            <el-option
-              v-for="dict in dict.type.order_status_type"
+  <div class="app-container" :style="{'--q-height':qHeight}">
+    <div class="app-container-query" ref="queryFormBox">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="订单号">
+          <el-input
+            v-model="queryParams.orderId"
+            placeholder="请输入订单号"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="购票人手机号" label-width="100px">
+          <el-input
+            v-model="queryParams.memberMobile"
+            placeholder="请输入购票人手机号"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="剧目名称">
+          <el-input
+            v-model="queryParams.performName"
+            placeholder="请输入剧目名称"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="票务名称">
+          <el-input
+            v-model="queryParams.goodsName"
+            placeholder="请输入票务名称"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="是否成功开票" label-width="100">
+          <el-select
+            v-model="queryParams.ifSuccessInvoice"
+            placeholder="请选择"
+            clearable
+            style="width: 100%"
+          >
+            <el-option label="否" value="0" />
+            <el-option label="是" value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="订单状态">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="订单状态"
+            clearable
+            style="width: 100%"
+          >
+              <el-option
+                v-for="dict in dict.type.order_status_type"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支付方式">
+          <el-select
+            v-model="queryParams.payWay"
+            placeholder="支付方式"
+            clearable
+            style="width: 100%"
+          >
+              <el-option
+                v-for="dict in dict.type.pay_way_type"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="购票渠道">
+          <el-select
+            v-model="queryParams.source"
+            placeholder="购票渠道"
+            clearable
+            style="width: 100%"
+          >
+            <!-- <el-option
+              v-for="dict in sourceMapList"
               :key="dict.value"
-              :label="dict.label"
+              :label="dict.name"
               :value="dict.value"
-            />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="支付方式">
-        <el-select
-          v-model="queryParams.payWay"
-          placeholder="支付方式"
-          clearable
-          style="width: 100%"
-        >
+            /> -->
             <el-option
-              v-for="dict in dict.type.pay_way_type"
+              v-for="dict in dict.type.order_form_type"
               :key="dict.value"
               :label="dict.label"
               :value="dict.value"
             />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="购票渠道">
-        <el-select
-          v-model="queryParams.source"
-          placeholder="购票渠道"
-          clearable
-          style="width: 100%"
-        >
-          <!-- <el-option
-            v-for="dict in sourceMapList"
-            :key="dict.value"
-            :label="dict.name"
-            :value="dict.value"
-          /> -->
-          <el-option
-            v-for="dict in dict.type.order_form_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="支付时间">
-        <el-date-picker
-          style="width: 230px;"
-          v-model="queryParams.time"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="下单时间">
-        <el-date-picker
-          style="width: 230px;"
-          v-model="queryParams.createTime"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <!-- <el-form-item label="场次时间">
-        <el-date-picker
-          style="width: 230px;"
-          v-model="queryParams.performDate"
-          @change="pagePerformTimeListFun"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item> -->
-      <el-form-item label="场次时间" label-width="70px">
-        <el-date-picker
-          style="width: 250px;"
-          v-model="queryParams.performDate"
-          @change="pagePerformTimeListFun"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="场次" v-if="!multiPerformDate">
-        <el-select
-          v-model="queryParams.performTimeId"
-          placeholder="场次"
-          clearable
-          style="width: 100%"
-        >
-          <el-option
-            v-for="dict in pagePerformTimeList"
-            :key="dict.id"
-            :label="dict.timeSnapshot+'('+dict.performTimeStart+'-'+dict.performTimeEnd+')'"
-            :value="dict.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="开票时间">
-        <el-date-picker
-          style="width: 230px;"
-          v-model="queryParams.invoiceTime"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-button
-        type="primary"
-        size="mini"
-        icon="el-icon-download"
-        v-hasPermi="['order:orderMr:downloadExcel']"
-        @click="handleExport"
-        v-loading.fullscreen.lock="handleExportLoading"
-        element-loading-text="正在拼命生成数据中..."
-        element-loading-spinner="el-icon-loading"
-        element-loading-background="rgba(0, 0, 0, 0.5)"
-      >导出excel</el-button>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table ref="tables" v-loading="loading" :data="dataList" border>
-      <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
-      <el-table-column label="订单号" align="center" prop="id" />
-      <el-table-column label="购票人手机号" align="center" prop="memberMobile" />
-      <el-table-column label="剧目名称" align="center" prop="performName" />
-      <el-table-column label="票务名称" align="center" prop="goodsName" />
-      <el-table-column label="座位类型" align="center" prop="seatTypeName" />
-      <el-table-column label="购票渠道" align="center" prop="source">
-        <template slot-scope="scope">
-          <!-- <span>{{ sourceList[scope.row.source] }}</span> -->
-          <dict-tag :options="dict.type.order_form_type" :value="scope.row.source"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="场次时间" align="center" prop="performDate" />
-      <el-table-column label="场次" width="120" align="center" prop="timeSnapshot">
-        <template slot-scope="scope">
-          <span>{{ scope.row.timeSnapshot }} <br /> ({{ scope.row.performTimeStart + '-' + scope.row.performTimeEnd }})</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="下单时间" align="center" prop="createTime" />
-      <el-table-column label="购票数量" align="center" prop="quantity" />
-      <el-table-column label="应付金额" align="center" prop="orderPrice">
-        <template slot-scope="scope">
-          <span>￥{{ scope.row.orderPrice }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="实付金额" align="center" prop="realPrice">
-        <template slot-scope="scope">
-          <span>￥{{ scope.row.realPrice }}</span>
-        </template>
-      </el-table-column>
-<!--      <el-table-column label="优惠信息" align="center" prop="refundReason" />-->
-      <el-table-column label="支付方式" align="center" prop="payWay">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay"/>
-        </template>
-      </el-table-column>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支付时间">
+          <el-date-picker
+            style="width: 230px;"
+            v-model="queryParams.time"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="下单时间">
+          <el-date-picker
+            style="width: 230px;"
+            v-model="queryParams.createTime"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <!-- <el-form-item label="场次时间">
+          <el-date-picker
+            style="width: 230px;"
+            v-model="queryParams.performDate"
+            @change="pagePerformTimeListFun"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="选择日期">
+          </el-date-picker>
+        </el-form-item> -->
+        <el-form-item label="场次时间" label-width="70px">
+          <el-date-picker
+            style="width: 250px;"
+            v-model="queryParams.performDate"
+            @change="pagePerformTimeListFun"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="场次" v-if="!multiPerformDate">
+          <el-select
+            v-model="queryParams.performTimeId"
+            placeholder="场次"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in pagePerformTimeList"
+              :key="dict.id"
+              :label="dict.timeSnapshot+'('+dict.performTimeStart+'-'+dict.performTimeEnd+')'"
+              :value="dict.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开票时间">
+          <el-date-picker
+            style="width: 230px;"
+            v-model="queryParams.invoiceTime"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    
+    <div class="app-container-table-box">
+      <el-row :gutter="10" class="mb8">
+        <el-button
+          type="primary"
+          size="mini"
+          icon="el-icon-download"
+          v-hasPermi="['order:orderMr:downloadExcel']"
+          @click="handleExport"
+          v-loading.fullscreen.lock="handleExportLoading"
+          element-loading-text="正在拼命生成数据中..."
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.5)"
+        >导出excel</el-button>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+      <div class="app-container-table-info">
+        <el-table ref="tables" height="100%" v-loading="loading" :data="dataList" border>
+          <el-table-column label="序号" align="center" fixed="left" type="index" width="60"></el-table-column>
+          <el-table-column label="订单号" align="center" fixed="left" prop="id" />
+          <el-table-column label="购票人手机号" align="center" fixed="left" prop="memberMobile" />
+          <el-table-column label="剧目名称" align="center" fixed="left" prop="performName" />
+          <el-table-column label="票务名称" align="center" fixed="left" prop="goodsName" />
+          <el-table-column label="座位类型" align="center" fixed="left" prop="seatTypeName" />
+          <el-table-column label="购票渠道" align="center" fixed="left" prop="source">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.order_form_type" :value="scope.row.source"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="场次时间" align="center" prop="performDate" />
+          <el-table-column label="场次" width="120" align="center" prop="timeSnapshot">
+            <template slot-scope="scope">
+              <span>{{ scope.row.timeSnapshot }} <br /> ({{ scope.row.performTimeStart + '-' + scope.row.performTimeEnd }})</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="下单时间" align="center" prop="createTime" />
+          <el-table-column label="购票数量" align="center" prop="quantity" />
+          <el-table-column label="应付金额" align="center" prop="orderPrice">
+            <template slot-scope="scope">
+              <span>￥{{ scope.row.orderPrice }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="实付金额" align="center" prop="realPrice">
+            <template slot-scope="scope">
+              <span>￥{{ scope.row.realPrice }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付方式" align="center" prop="payWay">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay"/>
+            </template>
+          </el-table-column>
+          
+          <el-table-column label="支付时间" align="center" prop="payTime" width="160" >
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.payTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="订单状态" align="center" prop="status">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.order_status_type" :value="scope.row.status"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="已核销票数" align="center" prop="usedTotal">
+            <template slot-scope="scope">
+              <span>{{ scope.row.usedTotal }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="已核销金额" align="center" prop="usedPriceTotal">
+            <template slot-scope="scope">
+              <span>{{ scope.row.usedPriceTotal }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="退票数量" align="center" prop="refundTotal">
+            <template slot-scope="scope">
+              <span>{{ scope.row.refundTotal }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="退票金额" align="center" prop="refundPriceTotal">
+            <template slot-scope="scope">
+              <span>{{ scope.row.refundPriceTotal }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="是否成功开票" align="center">
+            <template slot-scope="scope">
+              <el-tag type="danger" v-if="scope.row.ifSuccessInvoice  == '0'">否</el-tag>
+              <el-tag type="success" v-else-if="scope.row.ifSuccessInvoice  == '1'">是</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票时间" align="center" prop="invoiceTime">
+            <template slot-scope="scope">
+              <span>{{ scope.row.invoiceTime }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                @click="openDetails(scope.row)"
+                v-hasPermi="['orderMr:orderMr:details']"
+              >详情</el-button>
+              <el-button
+                v-if="scope.row.status === 0"
+                size="mini"
+                type="text"
+                @click="handleCancelOrder(scope.row)"
+                v-hasPermi="['orderMr:orderMr:cancel']"
+              >关闭订单</el-button>
+              <el-button
+                  v-if="scope.row.status == 3 || scope.row.status == 7"
+                  size="mini"
+                  type="text"
+                  @click="handleOpen([scope.row])"
+                  v-hasPermi="['orderMr:orderMr:print']"
+                >打印小票</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
       
-      <el-table-column label="支付时间" align="center" prop="payTime" width="160" >
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.payTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="订单状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.order_status_type" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="已核销票数" align="center" prop="usedTotal">
-        <template slot-scope="scope">
-          <span>{{ scope.row.usedTotal }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="已核销金额" align="center" prop="usedPriceTotal">
-        <template slot-scope="scope">
-          <span>{{ scope.row.usedPriceTotal }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="退票数量" align="center" prop="refundTotal">
-        <template slot-scope="scope">
-          <span>{{ scope.row.refundTotal }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="退票金额" align="center" prop="refundPriceTotal">
-        <template slot-scope="scope">
-          <span>{{ scope.row.refundPriceTotal }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="是否成功开票" align="center">
-        <template slot-scope="scope">
-          <el-tag type="danger" v-if="scope.row.ifSuccessInvoice  == '0'">否</el-tag>
-          <el-tag type="success" v-else-if="scope.row.ifSuccessInvoice  == '1'">是</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="开票时间" align="center" prop="invoiceTime">
-        <template slot-scope="scope">
-          <span>{{ scope.row.invoiceTime }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            @click="openDetails(scope.row)"
-            v-hasPermi="['orderMr:orderMr:details']"
-          >详情</el-button>
-          <el-button
-            v-if="scope.row.status === 0"
-            size="mini"
-            type="text"
-            @click="handleCancelOrder(scope.row)"
-            v-hasPermi="['orderMr:orderMr:cancel']"
-          >关闭订单</el-button>
-          <el-button
-              v-if="scope.row.status == 3 || scope.row.status == 7"
-              size="mini"
-              type="text"
-              @click="handleOpen([scope.row])"
-              v-hasPermi="['orderMr:orderMr:print']"
-            >打印小票</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+    
 
     <!-- 详情 -->
     <details-dia ref="detailsDia" @getList="getList"></details-dia>
@@ -343,6 +348,8 @@ export default {
   components: { detailsDia },
   data() {
     return {
+      qHeight: '0px',
+      resizeObserver: null,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -395,6 +402,17 @@ export default {
     this.pagePerformTimeListFun(this.queryParams.performDate)
     this.getList();
   },
+  mounted() {
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        const { width, height } = entry.contentRect;
+        this.width = width;
+        this.height = height;
+        this.qHeight = height + 'px'
+      }
+    });
+    this.resizeObserver.observe(this.$refs.queryFormBox);
+  },
   methods: {
     /** 查询列表 */
     getList() {
@@ -682,6 +700,25 @@ export default {
             });
           }).catch(() => {});
         },
-  }
+  },
+  beforeDestroy() {
+    this.resizeObserver.unobserve(this.$refs.queryFormBox);
+    this.resizeObserver.disconnect();
+  },
 };
 </script>
+<style scoped lang="scss"> 
+.app-container {
+  height: calc( 100vh - 110px );
+  box-sizing: border-box;
+}
+.app-container-query {
+  
+}
+.app-container-table-box {
+  height: calc( 100% - var(--q-height) );
+  .app-container-table-info {
+    height: calc( 100% - 100px );
+  }
+}
+</style>

src/views/order/viewers/index.vue

@@ -1,171 +1,180 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="订单号">
-        <el-input v-model="queryParams.orderId" placeholder="请输入订单号" clearable style="width: 240px;"
-          @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="订单状态">
-        <el-select v-model="queryParams.orderStatus" placeholder="订单状态" clearable style="width: 100%">
-          <el-option v-for="dict in dict.type.order_status_type" :key="dict.value" :label="dict.label"
-            :value="dict.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="座位类型">
-        <el-select v-model="queryParams.seatTypeId" placeholder="座位类型" clearable style="width: 100%">
-          <el-option v-for="(item, index) in seatTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="购票渠道">
-        <el-select v-model="queryParams.source" placeholder="购票渠道" clearable style="width: 100%">
-          <el-option v-for="dict in dict.type.order_form_type" :key="dict.value" :label="dict.label"
-            :value="dict.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="取票码">
-        <el-input v-model="queryParams.qrcodeNo" placeholder="请输入取票码" clearable style="width: 240px;"
-          @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="支付时间">
-        <!-- <el-date-picker style="width: 230px;" v-model="queryParams.payTime" type="date" value-format="yyyy-MM-dd"
-          placeholder="支付时间">
-        </el-date-picker> -->
-        <el-date-picker
-          v-model="queryParams.payTime"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="场次时间" label-width="70px">
-        <el-date-picker
-          style="width: 250px;"
+  <div class="app-container" :style="{'--q-height':qHeight}">
+    <div class="app-container-query" ref="queryFormBox">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="订单号">
+          <el-input v-model="queryParams.orderId" placeholder="请输入订单号" clearable style="width: 240px;"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="订单状态">
+          <el-select v-model="queryParams.orderStatus" placeholder="订单状态" clearable style="width: 100%">
+            <el-option v-for="dict in dict.type.order_status_type" :key="dict.value" :label="dict.label"
+              :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="座位类型">
+          <el-select v-model="queryParams.seatTypeId" placeholder="座位类型" clearable style="width: 100%">
+            <el-option v-for="(item, index) in seatTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="购票渠道">
+          <el-select v-model="queryParams.source" placeholder="购票渠道" clearable style="width: 100%">
+            <el-option v-for="dict in dict.type.order_form_type" :key="dict.value" :label="dict.label"
+              :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="取票码">
+          <el-input v-model="queryParams.qrcodeNo" placeholder="请输入取票码" clearable style="width: 240px;"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="支付时间">
+          <!-- <el-date-picker style="width: 230px;" v-model="queryParams.payTime" type="date" value-format="yyyy-MM-dd"
+            placeholder="支付时间">
+          </el-date-picker> -->
+          <el-date-picker
+            v-model="queryParams.payTime"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="场次时间" label-width="70px">
+          <el-date-picker
+            style="width: 250px;"
+            v-model="queryParams.performDate"
+            @change="pagePerformTimeListFun"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <!-- <el-form-item label="场次时间">
+          <el-date-picker
+          style="width: 230px;"
           v-model="queryParams.performDate"
           @change="pagePerformTimeListFun"
-          type="daterange"
+          type="date"
           value-format="yyyy-MM-dd"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item>
-      <!-- <el-form-item label="场次时间">
-        <el-date-picker
-        style="width: 230px;"
-        v-model="queryParams.performDate"
-        @change="pagePerformTimeListFun"
-        type="date"
-        value-format="yyyy-MM-dd"
-        placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item> -->
-      <el-form-item label="场次" v-if="!multiPerformDate">
-        <el-select v-model="queryParams.performTimeId" placeholder="场次" clearable style="width: 100%">
-          <el-option
-          v-for="dict in pagePerformTimeList"
-          :key="dict.id"
-          :label="dict.timeSnapshot+'('+dict.performTimeStart+'-'+dict.performTimeEnd+')'"
-          :value="dict.id" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-button type="primary" size="mini" icon="el-icon-download" v-hasPermi="['order:viewers:excel']"
-        @click="handleExport" v-loading.fullscreen.lock="handleExportLoading" element-loading-text="正在拼命生成数据中..."
-        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">导出excel</el-button>
-      <el-button
-      type="primary"
-      size="mini"
-      v-hasPermi="['order:viewers:tuikuai']"
-      :disabled="multipleSelection.length==0"
-        @click="openRefundSubmitModel(multipleSelection)">批量退款</el-button>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+          placeholder="选择日期">
+          </el-date-picker>
+        </el-form-item> -->
+        <el-form-item label="场次" v-if="!multiPerformDate">
+          <el-select v-model="queryParams.performTimeId" placeholder="场次" clearable style="width: 100%">
+            <el-option
+            v-for="dict in pagePerformTimeList"
+            :key="dict.id"
+            :label="dict.timeSnapshot+'('+dict.performTimeStart+'-'+dict.performTimeEnd+')'"
+            :value="dict.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    
+    <div class="app-container-table-box">
+      <el-row :gutter="10" class="mb8">
+        <el-button type="primary" size="mini" icon="el-icon-download" v-hasPermi="['order:viewers:excel']"
+          @click="handleExport" v-loading.fullscreen.lock="handleExportLoading" element-loading-text="正在拼命生成数据中..."
+          element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">导出excel</el-button>
+        <el-button
+        type="primary"
+        size="mini"
+        v-hasPermi="['order:viewers:tuikuai']"
+        :disabled="multipleSelection.length==0"
+          @click="openRefundSubmitModel(multipleSelection)">批量退款</el-button>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+      <div class="app-container-table-info">
+        <el-table ref="tables" height="100%" @selection-change="handleSelectionChange" v-loading="loading" :data="dataList" border>
+          <el-table-column
+          :selectable="isSelectableFun"
+          type="selection"
+          fixed="left"
+          width="55"></el-table-column>
+          <el-table-column label="订单号" fixed="left" align="center" prop="orderId" />
+          <el-table-column label="观影人名称" fixed="left" align="center" prop="name" />
+          <el-table-column label="身份证号" fixed="left" align="center" prop="idcard" />
+          <el-table-column label="票务名称" fixed="left" align="center" prop="goodsName" />
+          <el-table-column label="座位类型" fixed="left" align="center" prop="seatTypeName" />
+          <el-table-column label="购买渠道" fixed="left" align="center" prop="source">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.order_form_type" :value="scope.row.source" />
+            </template>
+          </el-table-column>
+          <el-table-column label="场次时间" align="center" prop="performDate" />
+          <el-table-column label="场次" width="120" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.performTimeStart + '-' + scope.row.performTimeEnd }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="购票人" align="center" prop="memberName" />
+          <el-table-column label="取票码" align="center" prop="qrcodeNo" width="100" />
+          <el-table-column label="购票人手机号" align="center" prop="memberMobile" />
+          <el-table-column label="订单应付总额" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.priceTotal || scope.row.priceTotal == 0  ? '￥' + scope.row.priceTotal : '-' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="订单实付总额" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.realPriceTotal || scope.row.realPriceTotal == 0 ? '￥' + scope.row.realPriceTotal : '-' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="观影人单价" align="center" prop="realPrice">
+            <template slot-scope="scope">
+              <span>{{ scope.row.realPrice || scope.row.realPrice == 0 ? '￥' + scope.row.realPrice : '-' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付方式" align="center" prop="payWay">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay" />
+            </template>
+          </el-table-column>
+          <el-table-column label="支付时间" align="center" prop="payTime" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.payTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="订单状态" align="center">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.order_status_type" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column label="核销渠道" align="center" prop="deviceName" />
+          <el-table-column label="人员类别" align="center">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.personnel_type" :value="scope.row.identity" />
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" align="center" prop="remark" />
+          <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="openDetails(scope.row)"
+                v-hasPermi="['order:viewers:details']">详情</el-button>
+              <el-button v-if="scope.row.status == 3 || scope.row.status == 7" size="mini" type="text"
+                @click="handleOpen([scope.row])"
+                v-hasPermi="['order:viewers:print']">打印</el-button>
+              <el-button v-if="scope.row.status == 3 || scope.row.status == 6" size="mini" type="text"
+                @click="openRefundSubmitModel([scope.row])"
+                v-hasPermi="['order:viewers:tuikuai']">退款</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
 
-    <el-table ref="tables" @selection-change="handleSelectionChange" v-loading="loading" :data="dataList" border>
-      <el-table-column
-      :selectable="isSelectableFun"
-      type="selection"
-      width="55"></el-table-column>
-      <el-table-column label="订单号" align="center" prop="orderId" />
-      <el-table-column label="观影人名称" align="center" prop="name" />
-      <el-table-column label="身份证号" align="center" prop="idcard" />
-      <el-table-column label="票务名称" align="center" prop="goodsName" />
-      <el-table-column label="座位类型" align="center" prop="seatTypeName" />
-      <el-table-column label="购买渠道" align="center" prop="source">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.order_form_type" :value="scope.row.source" />
-        </template>
-      </el-table-column>
-      <el-table-column label="场次时间" align="center" prop="performDate" />
-      <el-table-column label="场次" width="120" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.performTimeStart + '-' + scope.row.performTimeEnd }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="购票人" align="center" prop="memberName" />
-      <el-table-column label="取票码" align="center" prop="qrcodeNo" width="100" />
-      <el-table-column label="购票人手机号" align="center" prop="memberMobile" />
-      <el-table-column label="订单应付总额" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.priceTotal || scope.row.priceTotal == 0  ? '￥' + scope.row.priceTotal : '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="订单实付总额" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.realPriceTotal || scope.row.realPriceTotal == 0 ? '￥' + scope.row.realPriceTotal : '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="观影人单价" align="center" prop="realPrice">
-        <template slot-scope="scope">
-          <span>{{ scope.row.realPrice || scope.row.realPrice == 0 ? '￥' + scope.row.realPrice : '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="支付方式" align="center" prop="payWay">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay" />
-        </template>
-      </el-table-column>
-      <el-table-column label="支付时间" align="center" prop="payTime" width="160">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.payTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="订单状态" align="center">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.order_status_type" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column label="核销渠道" align="center" prop="deviceName" />
-      <el-table-column label="人员类别" align="center">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.personnel_type" :value="scope.row.identity" />
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="openDetails(scope.row)"
-            v-hasPermi="['order:viewers:details']">详情</el-button>
-          <el-button v-if="scope.row.status == 3 || scope.row.status == 7" size="mini" type="text"
-            @click="handleOpen([scope.row])"
-            v-hasPermi="['order:viewers:print']">打印</el-button>
-          <el-button v-if="scope.row.status == 3 || scope.row.status == 6" size="mini" type="text"
-            @click="openRefundSubmitModel([scope.row])"
-            v-hasPermi="['order:viewers:tuikuai']">退款</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+          @pagination="getList" />
+      </div>
+    </div>
+    
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      @pagination="getList" />
+    
 
     <!-- 详情 -->
     <details-dia ref="detailsDia" @getList="getList"></details-dia>
@@ -317,6 +326,8 @@ export default {
   components: { detailsDia },
   data() {
     return {
+      qHeight: '0px',
+      resizeObserver: null,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -399,6 +410,17 @@ export default {
     this.pagePerformTimeListFun(this.queryParams.performDate)
     this.getList();
   },
+  mounted() {
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        const { width, height } = entry.contentRect;
+        this.width = width;
+        this.height = height;
+        this.qHeight = height + 'px'
+      }
+    });
+    this.resizeObserver.observe(this.$refs.queryFormBox);
+  },
   methods: {
     /** 查询列表 */
     getList() {
@@ -928,6 +950,25 @@ export default {
       }
       this.getList();
     }
-  }
+  },
+  beforeDestroy() {
+    this.resizeObserver.unobserve(this.$refs.queryFormBox);
+    this.resizeObserver.disconnect();
+  },
 };
 </script>
+<style scoped lang="scss"> 
+.app-container {
+  height: calc( 100vh - 110px );
+  box-sizing: border-box;
+}
+.app-container-query {
+  
+}
+.app-container-table-box {
+  height: calc( 100% - var(--q-height) );
+  .app-container-table-info {
+    height: calc( 100% - 100px );
+  }
+}
+</style>