fix(全局样式)：固定左右格式页面宽度，优化表格高度计算函数

src/vab/plugins/vab.js

@@ -143,28 +143,28 @@ Vue.prototype.$baseNotify = (message, title, type = 'success', position = 'top-r
  * @param {*} formType
  */
 Vue.prototype.$baseTableHeight = (formType) => {
-  let height = window.innerHeight
-  const paddingHeight = 245
+  let height
+  const paddingHeight = 195
   const formHeight = 50
   if ('number' === typeof formType) {
-    height = height - paddingHeight - formHeight * formType
+    height = formHeight * formType + paddingHeight
   } else {
-    height = height - paddingHeight
+    height = paddingHeight
   }
-  return height
+  return `calc(100vh - ${height}px)`
 }
 
 Vue.prototype.$noPagingTableHeight = (formType) => {
-  let height = window.innerHeight
-  const paddingHeight = 240
+  let height
+  const paddingHeight = 190
   const formHeight = 50
 
   if ('number' === typeof formType) {
-    height = height - paddingHeight - formHeight * formType
+    height = formHeight * formType + paddingHeight
   } else {
-    height = height - paddingHeight
+    height = paddingHeight
   }
-  return height
+  return `calc(100vh - ${height}px)`
 }
 
 /**

src/views/base/distributor/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user-management-container">
-    <el-row :gutter="20" type="flex">
-      <el-col :span="6">
+    <div class="side-layout">
+      <div class="tree-side">
         <div class="head-container">
           <span style="font-size: 25px">所属区域</span>
         </div>
@@ -24,8 +24,8 @@
             </span>
           </el-tree>
         </div>
-      </el-col>
-      <el-col :lg="19" :sapn="12" :xs="19">
+      </div>
+      <div class="tree-table">
         <vab-query-form>
           <vab-query-form-top-panel>
             <el-form :inline="true" :model="queryForm" @submit.native.prevent>
@@ -94,8 +94,8 @@
           :total="total"
           @current-change="handleCurrentChange"
           @size-change="handleSizeChange" />
-      </el-col>
-    </el-row>
+      </div>
+    </div>
     <edit ref="edit" @fetch-data="fetchData" />
   </div>
 </template>

src/views/base/region/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user-management-container">
-    <el-row :gutter="20">
-      <el-col :span="5" :xs="16">
+    <div class="side-layout">
+      <div class="tree-side">
         <div class="head-container" style="margin-bottom: 5px">
           <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
           <el-tree
@@ -19,8 +19,8 @@
         <vab-query-form-left-panel>
           <el-button icon="el-icon-plus" type="primary" @click="getCheckedNodes($event)">添加区域</el-button>
         </vab-query-form-left-panel>
-      </el-col>
-      <el-col :lg="19" :sapn="12" :xs="19">
+      </div>
+      <div class="tree-table">
         <vab-query-form>
           <vab-query-form-top-panel>
             <el-form :inline="true" :model="queryForm" @submit.native.prevent>
@@ -95,10 +95,9 @@
           :total="total"
           @current-change="handleCurrentChange"
           @size-change="handleSizeChange" />
-      </el-col>
-    </el-row>
+      </div>
+    </div>
     <edit ref="edit" @fetch-data="fetchData" />
-
     <reg-edit ref="reg-edit" @fetch-data="fetchData" />
   </div>
 </template>

src/views/customer/detail.vue

@@ -2,14 +2,14 @@
  * @Author: wanglj 471442253@qq.com
  * @Date: 2022-12-26 09:30:47
  * @LastEditors: wanglj
- * @LastEditTime: 2023-01-11 16:09:07
+ * @LastEditTime: 2023-01-11 16:32:28
  * @Description: file content
  * @FilePath: \opms_frontend\src\views\customer\detail.vue
 -->
 <template>
   <div class="detail">
-    <el-row :gutter="10">
-      <el-col :span="16">
+    <div class="side-layout">
+      <div class="info">
         <div class="title">
           <p>客户</p>
           <h3>
@@ -262,8 +262,8 @@
             </el-table>
           </el-tab-pane>
         </el-tabs>
-      </el-col>
-      <el-col :span="8">
+      </div>
+      <div class="info-side">
         <div class="buttons">
           <el-button v-permissions="['customer:edit']" type="primary" @click="handleEdit">编辑</el-button>
           <el-button v-permissions="['customer:delete']" @click="handleDelete">删除</el-button>
@@ -300,8 +300,8 @@
             </ul>
           </li>
         </ul>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
     <Contact ref="contact" @contactSave="contactSave" />
     <Edit ref="edit" @customerSave="customerSave" />
     <!-- 分配客户 -->

src/views/customer/list.vue

@@ -2,7 +2,7 @@
  * @Author: wanglj 471442253@qq.com
  * @Date: 2022-12-26 16:34:37
  * @LastEditors: wanglj
- * @LastEditTime: 2023-01-11 16:11:44
+ * @LastEditTime: 2023-01-11 18:06:32
  * @Description: file content
  * @FilePath: \opms_frontend\src\views\customer\list.vue
 -->
@@ -13,37 +13,39 @@
       <el-tab-pane label="我的客户" name="second" />
       <el-tab-pane label="下属的客户" name="third" />
     </el-tabs>
-    <el-row :gutter="10" style="margin-bottom: 10px">
-      <el-col :span="4">
-        <el-input v-model="queryForm.custCode" placeholder="客户编码" />
-      </el-col>
-      <el-col :span="4">
-        <el-input v-model="queryForm.custName" placeholder="客户名称" />
-      </el-col>
-      <el-col :span="4">
-        <el-select v-model="queryForm.custIndustry" placeholder="客户行业" style="width: 100%">
-          <el-option v-for="item in industryOptions" :key="item.value" :label="item.value" :value="item.value" />
-        </el-select>
-      </el-col>
-      <el-col :span="4">
-        <el-select v-model="queryForm.custLevel" placeholder="客户级别" style="width: 100%">
-          <el-option v-for="item in levelOptions" :key="item.value" :label="item.value" :value="item.value" />
-        </el-select>
-      </el-col>
-      <el-col :span="4">
-        <el-date-picker
-          v-model="queryForm.followUpDate"
-          placeholder="最后跟进时间"
-          style="width: 100%"
-          type="date"
-          value-format="yyyy-MM-dd" />
-      </el-col>
-      <el-col :span="4">
-        <el-button icon="el-icon-plus" type="primary" @click="fetchData">查询</el-button>
-        <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
-      </el-col>
-    </el-row>
     <vab-query-form>
+      <vab-query-form-top-panel>
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.custCode" placeholder="客户编码" />
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="queryForm.custName" placeholder="客户名称" />
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="queryForm.custIndustry" placeholder="客户行业" style="width: 100%">
+              <el-option v-for="item in industryOptions" :key="item.value" :label="item.value" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="queryForm.custLevel" placeholder="客户级别" style="width: 100%">
+              <el-option v-for="item in levelOptions" :key="item.value" :label="item.value" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-date-picker
+              v-model="queryForm.followUpDate"
+              placeholder="最后跟进时间"
+              style="width: 100%"
+              type="date"
+              value-format="yyyy-MM-dd" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-plus" type="primary" @click="fetchData">查询</el-button>
+            <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-top-panel>
       <vab-query-form-left-panel :span="12">
         <el-button
           v-permissions="['customer:add']"
@@ -87,7 +89,7 @@
       v-loading="listLoading"
       border
       :data="list"
-      height="calc(100vh - 394px)"
+      :height="$baseTableHeight(3)"
       @selection-change="setSelectRows">
       <el-table-column align="center" show-overflow-tooltip type="selection" />
       <el-table-column

src/views/customer/openSea.vue

@@ -2,43 +2,45 @@
  * @Author: wanglj 471442253@qq.com
  * @Date: 2022-12-15 15:38:21
  * @LastEditors: wanglj
- * @LastEditTime: 2023-01-11 16:06:36
+ * @LastEditTime: 2023-01-11 18:05:30
  * @Description: file content
  * @FilePath: \opms_frontend\src\views\customer\openSea.vue
 -->
 <template>
   <div class="open-sea-container">
-    <el-row :gutter="10" style="margin-bottom: 10px">
-      <el-col :span="4">
-        <el-input v-model="queryForm.custCode" placeholder="客户编码" />
-      </el-col>
-      <el-col :span="4">
-        <el-input v-model="queryForm.custName" placeholder="客户名称" />
-      </el-col>
-      <el-col :span="4">
-        <el-select v-model="queryForm.custIndustry" placeholder="客户行业" style="width: 100%">
-          <el-option v-for="item in industryOptions" :key="item.value" :label="item.value" :value="item.value" />
-        </el-select>
-      </el-col>
-      <el-col :span="4">
-        <el-select v-model="queryForm.custLevel" placeholder="客户级别" style="width: 100%">
-          <el-option v-for="item in levelOptions" :key="item.value" :label="item.value" :value="item.value" />
-        </el-select>
-      </el-col>
-      <el-col :span="4">
-        <el-date-picker
-          v-model="queryForm.followUpDate"
-          placeholder="最后跟进时间"
-          style="width: 100%"
-          type="date"
-          value-format="yyyy-MM-dd" />
-      </el-col>
-      <el-col :span="4">
-        <el-button icon="el-icon-plus" type="primary" @click="fetchData">查询</el-button>
-        <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
-      </el-col>
-    </el-row>
     <vab-query-form>
+      <vab-query-form-top-panel>
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.custCode" placeholder="客户编码" />
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="queryForm.custName" placeholder="客户名称" />
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="queryForm.custIndustry" placeholder="客户行业" style="width: 100%">
+              <el-option v-for="item in industryOptions" :key="item.value" :label="item.value" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="queryForm.custLevel" placeholder="客户级别" style="width: 100%">
+              <el-option v-for="item in levelOptions" :key="item.value" :label="item.value" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-date-picker
+              v-model="queryForm.followUpDate"
+              placeholder="最后跟进时间"
+              style="width: 100%"
+              type="date"
+              value-format="yyyy-MM-dd" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-plus" type="primary" @click="fetchData">查询</el-button>
+            <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-top-panel>
       <vab-query-form-left-panel :span="12">
         <el-button v-permissions="['customer:add']" icon="el-icon-plus" type="primary" @click="$refs.edit.init()">
           新建
@@ -59,7 +61,7 @@
       v-loading="listLoading"
       border
       :data="list"
-      height="calc(100vh - 340px)"
+      :height="$baseTableHeight(2)"
       @selection-change="setSelectRows">
       <el-table-column align="center" show-overflow-tooltip type="selection" />
       <el-table-column

src/views/plat/task/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user-management-container">
-    <el-row :gutter="20" type="flex">
-      <el-col :span="6">
+    <div class="side-layout">
+      <div class="tree-side">
         <span class="type">操作类型</span>
         <div
           :style="{
@@ -50,8 +50,8 @@
           @click="searchType(item.dictValue)">
           {{ item.dictLabel }}
         </div>
-      </el-col>
-      <el-col :span="18">
+      </div>
+      <div class="tree-table">
         <vab-query-form>
           <vab-query-form-top-panel>
             <el-form :inline="true" :model="queryForm" @submit.native.prevent>
@@ -73,7 +73,7 @@
           </vab-query-form-right-panel>
         </vab-query-form>
         <!-- 主页面 -->
-        <el-table v-loading="listLoading" border :data="list" height="calc(100vh - 340px)">
+        <el-table v-loading="listLoading" border :data="list" height="calc(100vh - 340px)" width="100%">
           <el-table-column
             v-for="(item, index) in finallyColumns"
             :key="index"
@@ -123,8 +123,8 @@
           :total="total"
           @current-change="handleCurrentChange"
           @size-change="handleSizeChange" />
-      </el-col>
-    </el-row>
+      </div>
+    </div>
     <!-- 新建督办 -->
     <taskAdd ref="taskAdd" :do-refresh="doRefresh" :types="types" :users="users" />
     <!-- 查看详情 -->