fix(全局样式)：全局更改属性表样式，添加格式化金额方法

src/main.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: wanglj 471442253@qq.com
+ * @Date: 2023-01-04 16:23:23
+ * @LastEditors: wanglj
+ * @LastEditTime: 2023-01-05 10:36:59
+ * @Description: file content
+ * @FilePath: \opms_frontend\src\main.js
+ */
 import Vue from 'vue'
 import App from './App'
 import i18n from './i18n'
@@ -5,13 +13,14 @@ import store from './store'
 import router from './router'
 import '@/vab'
 
-import { parseTime, translateDataToTree, resetForm } from '@/utils'
+import { parseTime, translateDataToTree, resetForm, formatPrice } from '@/utils'
 import dictApi from '@/api/system/dict'
 
 Vue.prototype.parseTime = parseTime
 Vue.prototype.translateDataToTree = translateDataToTree
 Vue.prototype.getDicts = dictApi.getDictDataByType
 Vue.prototype.resetForm = resetForm
+Vue.prototype.formatPrice = formatPrice
 
 Vue.config.productionTip = false
 new Vue({

src/utils/index.js

@@ -264,3 +264,14 @@ export function resetForm(refName) {
     this.$refs[refName].resetFields()
   }
 }
+
+/**
+ * @description 金额格式化
+ * @param price {Number} 金额
+ * @param currency {String} 币种 CNY 人民币；USD 美元；EUR 欧元
+ * @returns {String} 格式化后的字符串
+ */
+export function formatPrice(price, currency = 'CNY') {
+  if (!price) price = 0
+  return price.toLocaleString('zh-CN', { style: 'currency', currency })
+}

src/vab/components/VabQueryForm/index.vue

@@ -27,16 +27,19 @@
   .vab-query-form {
     ::v-deep {
       .el-form-item:first-child {
-        margin: 0 0 $base-margin/2 0 !important;
+        // margin: 0 0 $base-margin/2 0 !important;
+        margin-bottom: $base-margin/2 !important;
       }
-
       .el-form-item + .el-form-item {
-        margin: 0 0 $base-margin/2 0 !important;
-
+        // margin: 0 0 $base-margin/2 0 !important;
+        margin-bottom: $base-margin/2 !important;
         .el-button {
           margin: 0 0 0 10px !important;
         }
       }
+      .el-form-item {
+        margin-right: $base-margin/2;
+      }
 
       .top-panel {
         @include panel;

src/vab/styles/default.scss

@@ -4123,3 +4123,43 @@ $--background-color-base: $base-color-background;
   background-color: transparent;
   border: none;
 }
+
+.el-tree {
+  padding-top: 10px;
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    padding-right: 8px;
+    span:first-child {
+      flex:1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width:0;
+    }
+  }
+  .el-tree-node__content {
+    height: 36px;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .el-tree-node:focus > .el-tree-node__content {
+    /*设置选中的样式 */
+    background-color: #dde9ff !important;
+  }
+
+  .el-tree-node__content:hover {
+    /*设置鼠标飘过的颜色 */
+    background: #eaf9ff !important;
+    color: #007bff;
+  }
+
+  .el-tree-node.is-current > .el-tree-node__content {
+    /*current选中的样式 */
+    color: #4d95fd;
+    font-weight: bold;
+    background-color: #dde9ff !important;
+  }
+}

src/views/base/distributor/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="user-management-container">
-    <el-row :gutter="20">
-      <el-col :span="4" :xs="24">
+    <el-row :gutter="20" type="flex">
+      <el-col :span="6">
         <div class="head-container">
           <span style="font-size: 25px">所属区域</span>
         </div>
-        <div class="head-container">
+        <div class="tree-container">
           <el-tree
             ref="tree"
             :data="deptOptions"
@@ -15,138 +15,66 @@
             :filter-node-method="filterNode"
             highlight-current
             :props="defaultProps"
-            @node-click="handleNodeClick" />
+            @node-click="handleNodeClick">
+            <span slot-scope="{ node }" class="custom-tree-node">
+              <span>{{ node.label }}</span>
+              <span>
+                <i class="el-icon-more"></i>
+              </span>
+            </span>
+          </el-tree>
         </div>
       </el-col>
-
-      <el-col :span="20" :xs="24">
+      <el-col :span="18">
         <vab-query-form>
-          <vab-query-form-left-panel :span="15">
+          <vab-query-form-left-panel :span="18">
             <el-form :inline="true" :model="queryForm" @submit.native.prevent>
               <el-form-item>
-                <el-input
-                  v-model.trim="queryForm.distCode"
-                  clearable
-                  placeholder="经销商编码" />
+                <el-input v-model.trim="queryForm.distCode" clearable placeholder="经销商编码" />
               </el-form-item>
-              &nbsp;
               <el-form-item>
-                <el-input
-                  v-model.trim="queryForm.distName"
-                  clearable
-                  placeholder="经销商名称" />
+                <el-input v-model.trim="queryForm.distName" clearable placeholder="经销商名称" />
               </el-form-item>
-              &nbsp;
               <el-form-item>
-                <el-input
-                  v-model.trim="queryForm.belongSale"
-                  clearable
-                  placeholder="所属销售" />
-              </el-form-item>
-              <el-form-item>
-                <el-button
-                  icon="el-icon-search"
-                  type="primary"
-                  @click="queryData">
-                  查询
-                </el-button>
+                <el-input v-model.trim="queryForm.belongSale" clearable placeholder="所属销售" />
               </el-form-item>
             </el-form>
-            <vab-query-form-left-panel :span="2">
-              <el-button
-                icon="el-icon-plus"
-                type="primary"
-                @click="handleEdit($event)">
-                新建
-              </el-button>
-            </vab-query-form-left-panel>
           </vab-query-form-left-panel>
+          <vab-query-form-right-panel :span="6">
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+            <el-button icon="el-icon-plus" type="primary" @click="handleEdit($event)">新建</el-button>
+          </vab-query-form-right-panel>
         </vab-query-form>
-
-        <el-table
-          v-loading="listLoading"
-          border
-          :data="list"
-          :height="height"
-          @selection-change="setSelectRows">
-          <el-table-column
-            align="center"
-            show-overflow-tooltip
-            type="selection" />
-          <el-table-column
-            align="center"
-            label="经销商编码"
-            prop="distCode"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="经销商名称"
-            prop="distName"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="助记名"
-            prop="abbrName"
-            show-overflow-tooltip />
+        <el-table v-loading="listLoading" border :data="list" :height="height" @selection-change="setSelectRows">
+          <el-table-column align="center" show-overflow-tooltip type="selection" />
+          <el-table-column align="center" label="经销商编码" prop="distCode" show-overflow-tooltip />
+          <el-table-column align="center" label="经销商名称" prop="distName" show-overflow-tooltip />
+          <el-table-column align="center" label="助记名" prop="abbrName" show-overflow-tooltip />
           <!-- <el-table-column
         align="center"
         label="省级ID"
         prop="parentId"
         show-overflow-tooltip /> -->
-          <el-table-column
-            align="center"
-            label="所在省份"
-            prop="provinceDesc"
-            show-overflow-tooltip />
+          <el-table-column align="center" label="所在省份" prop="provinceDesc" show-overflow-tooltip />
           <!-- <template #default="{ row }">
         {{ row.District.distName  }}
       </template>
       </el-table-column> -->
-          <el-table-column
-            align="center"
-            label="归属销售"
-            prop="belongSale"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="业务范围"
-            prop="businessScope"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="负责人"
-            prop="distBoss"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="负责人电话"
-            prop="distBossPhone"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="创建人"
-            prop="createdName"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="创建时间"
-            prop="createdTime"
-            show-overflow-tooltip />
+          <el-table-column align="center" label="归属销售" prop="belongSale" show-overflow-tooltip />
+          <el-table-column align="center" label="业务范围" prop="businessScope" show-overflow-tooltip />
+          <el-table-column align="center" label="负责人" prop="distBoss" show-overflow-tooltip />
+          <el-table-column align="center" label="负责人电话" prop="distBossPhone" show-overflow-tooltip />
+          <el-table-column align="center" label="创建人" prop="createdName" show-overflow-tooltip />
+          <el-table-column align="center" label="创建时间" prop="createdTime" show-overflow-tooltip />
 
-          <el-table-column
-            align="center"
-            label="操作"
-            show-overflow-tooltip
-            width="85">
+          <el-table-column align="center" label="操作" show-overflow-tooltip width="85">
             <template #default="{ row }">
               <el-button type="text" @click="handleEdit(row)">编辑</el-button>
               <el-button type="text" @click="handleDelete(row)">删除</el-button>
             </template>
           </el-table-column>
           <template #empty>
-            <el-image
-              class="vab-data-empty"
-              :src="require('@/assets/empty_images/data_empty.png')" />
+            <el-image class="vab-data-empty" :src="require('@/assets/empty_images/data_empty.png')" />
           </template>
         </el-table>
         <el-pagination
@@ -271,25 +199,18 @@
     },
   }
 </script>
-<style>
-  .el-tree-node:focus > .el-tree-node__content {
-    /*设置选中的样式 */
-    background-color: #dde9ff !important;
-  }
-
-  .el-tree-node__content:hover {
-    /*设置鼠标飘过的颜色 */
-    background: #eaf9ff !important;
-    color: #007bff;
-  }
-
-  .el-tree--highlight-current
-    .el-tree-node.is-current
-    > .el-tree-node__content {
-    /*current选中的样式 */
-    color: #4d95fd;
-    font-weight: bold;
-    background-color: #dde9ff !important;
+<style lang="scss" scoped>
+  $base: '.user-management';
+  #{$base}-container {
+    > .el-row {
+      height: calc(100vh - 60px - 50px - 12px * 2 - 40px - 24px);
+    }
+    .tree-container {
+      height: calc(100% - 30px);
+      .el-tree {
+        height: 100%;
+        overflow-y: auto;
+      }
+    }
   }
 </style>
->

src/views/base/region/index.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="user-management-container">
-    <el-row :gutter="20">
-      <el-col :span="5" :xs="24">
+    <el-row :gutter="20" type="flex">
+      <el-col :span="6">
         <div class="head-container" style="margin-bottom: 5px">
           <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
+          <el-button icon="el-icon-plus" style="margin-top: 10px" type="primary" @click="getCheckedNodes($event)">
+            添加区域
+          </el-button>
           <el-tree
             ref="tree"
             class="filter-tree"
@@ -14,7 +17,14 @@
             highlight-current
             node-key="id"
             :props="defaultProps"
-            @node-click="handleNodeClick" />
+            @node-click="handleNodeClick">
+            <span slot-scope="{ node }" class="custom-tree-node">
+              <span>{{ node.label }}</span>
+              <span>
+                <i class="el-icon-more"></i>
+              </span>
+            </span>
+          </el-tree>
           <!-- <el-tree ref="tree" :data="deptOptions" node-key="id" 
           :filter-node-method="filterNode" :props="defaultProps"
           @node-click="handleNodeClick" /> -->
@@ -22,104 +32,48 @@
         <!-- <div class="buttons">
     <el-button  @click="getCheckedNodes($event)">添加区域</el-button>
   </div> -->
-        <vab-query-form-left-panel :span="2">
-          <el-button
-            icon="el-icon-plus"
-            type="primary"
-            @click="getCheckedNodes($event)">
-            添加区域
-          </el-button>
-        </vab-query-form-left-panel>
       </el-col>
-      <el-col :span="15" :xs="24">
+      <el-col :span="18">
         <vab-query-form>
-          <vab-query-form-left-panel :span="20">
+          <vab-query-form-left-panel :span="18">
             <el-form :inline="true" :model="queryForm" @submit.native.prevent>
               <el-form-item style="letter-spacing: 12px">
-                <el-input
-                  v-model.trim="queryForm.custCode"
-                  clearable
-                  placeholder="客户编码" />
-              </el-form-item>
-              &nbsp;
-
-              <el-form-item>
-                <el-input
-                  v-model.trim="queryForm.custName"
-                  clearable
-                  placeholder="客户名称" />
+                <el-input v-model.trim="queryForm.custCode" clearable placeholder="客户编码" />
               </el-form-item>
-              &nbsp;
               <el-form-item>
-                <el-input
-                  v-model.trim="queryForm.custIndustry"
-                  clearable
-                  placeholder="客户行业" />
+                <el-input v-model.trim="queryForm.custName" clearable placeholder="客户名称" />
               </el-form-item>
               <el-form-item>
-                <el-button
-                  icon="el-icon-search"
-                  type="primary"
-                  @click="queryData">
-                  查询
-                </el-button>
+                <el-input v-model.trim="queryForm.custIndustry" clearable placeholder="客户行业" />
               </el-form-item>
             </el-form>
-            <vab-query-form-left-panel :span="2">
-              <el-button
-                icon="el-icon-plus"
-                type="primary"
-                @click="handleEdit($event)">
-                添加
-              </el-button>
-            </vab-query-form-left-panel>
           </vab-query-form-left-panel>
+          <vab-query-form-right-panel :span="6">
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+            <el-button icon="el-icon-plus" type="primary" @click="handleEdit($event)">添加</el-button>
+          </vab-query-form-right-panel>
         </vab-query-form>
 
         <el-table
           v-loading="listLoading"
           border
           :data="list"
-          style="width: 100%; height: 500px"
+          height="calc(100% - 52px - 43px)"
+          style="width: 100%"
           @selection-change="setSelectRows">
-          <el-table-column
-            align="center"
-            show-overflow-tooltip
-            type="selection" />
-          <el-table-column
-            align="center"
-            label="省份"
-            prop="distName"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="客户数量"
-            prop="count"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="创建人"
-            prop="createdName"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="创建时间"
-            prop="createdTime"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="操作"
-            show-overflow-tooltip
-            width="85">
+          <el-table-column align="center" show-overflow-tooltip type="selection" />
+          <el-table-column align="center" label="省份" prop="distName" show-overflow-tooltip />
+          <el-table-column align="center" label="客户数量" prop="count" show-overflow-tooltip />
+          <el-table-column align="center" label="创建人" prop="createdName" show-overflow-tooltip />
+          <el-table-column align="center" label="创建时间" prop="createdTime" show-overflow-tooltip />
+          <el-table-column align="center" label="操作" show-overflow-tooltip width="85">
             <template #default="{ row }">
               <el-button type="text" @click="handleEdit(row)">编辑</el-button>
               <el-button type="text" @click="handleDelete(row)">删除</el-button>
             </template>
           </el-table-column>
           <template #empty>
-            <el-image
-              class="vab-data-empty"
-              :src="require('@/assets/empty_images/data_empty.png')" />
+            <el-image class="vab-data-empty" :src="require('@/assets/empty_images/data_empty.png')" />
           </template>
         </el-table>
         <el-pagination
@@ -272,30 +226,18 @@
     },
   }
 </script>
-<style>
-  .el-tree-node:focus > .el-tree-node__content {
-    /*设置选中的样式 */
-    background-color: #dde9ff !important;
-  }
-
-  .el-tree-node__content:hover {
-    /*设置鼠标飘过的颜色 */
-    background: #eaf9ff !important;
-    color: #007bff;
-  }
-
-  .el-tree--highlight-current
-    .el-tree-node.is-current
-    > .el-tree-node__content {
-    /*current选中的样式 */
-    color: #4d95fd;
-    font-weight: bold;
-    background-color: #dde9ff !important;
-  }
-
-  .vab-query-form[data-v-64063760]
-    .el-form-item:first-child
-    .el-form-item--small {
-    margin: 0 10px 10px 0 !important;
+<style lang="scss" scoped>
+  $base: '.user-management';
+  #{$base}-container {
+    > .el-row {
+      height: calc(100vh - 60px - 50px - 12px * 2 - 40px - 24px);
+    }
+    .head-container {
+      height: calc(100% - 5px);
+      .el-tree {
+        height: calc(100% - 74px);
+        overflow-y: auto;
+      }
+    }
   }
 </style>

src/views/customer/components/Allocate.vue

@@ -2,7 +2,7 @@
  * @Author: wanglj 471442253@qq.com
  * @Date: 2022-12-26 14:34:34
  * @LastEditors: wanglj
- * @LastEditTime: 2023-01-04 18:06:12
+ * @LastEditTime: 2023-01-05 09:15:25
  * @Description: file content
  * @FilePath: \opms_frontend\src\views\customer\components\allocate.vue
 -->

src/views/customer/components/Merge.vue

@@ -2,7 +2,7 @@
  * @Author: wanglj 471442253@qq.com
  * @Date: 2022-12-27 09:33:48
  * @LastEditors: wanglj
- * @LastEditTime: 2023-01-04 18:06:10
+ * @LastEditTime: 2023-01-05 09:15:31
  * @Description: file content
  * @FilePath: \opms_frontend\src\views\customer\components\Merge.vue
 -->

src/views/customer/components/Transfer.vue

@@ -2,7 +2,7 @@
  * @Author: wanglj 471442253@qq.com
  * @Date: 2022-12-26 15:00:19
  * @LastEditors: wanglj
- * @LastEditTime: 2022-12-26 17:23:50
+ * @LastEditTime: 2023-01-05 09:15:39
  * @Description: file content
  * @FilePath: \opms_frontend\src\views\customer\components\Transfer.vue
 -->

src/views/customer/detail.vue

@@ -2,7 +2,7 @@
  * @Author: wanglj 471442253@qq.com
  * @Date: 2022-12-26 09:30:47
  * @LastEditors: wanglj
- * @LastEditTime: 2023-01-04 18:05:59
+ * @LastEditTime: 2023-01-05 11:50:51
  * @Description: file content
  * @FilePath: \opms_frontend\src\views\customer\detail.vue
 -->
@@ -22,7 +22,7 @@
               </template>
               <template v-else>
                 <el-button @click="handleReceive">领取客户</el-button>
-                <el-button @click="$refs.allocate.visible = true">分配客户</el-button>
+                <el-button @click="handleAllocate">分配客户</el-button>
               </template>
             </span>
           </h3>
@@ -137,22 +137,22 @@
                 {{ abstract.business }}
               </el-descriptions-item>
               <el-descriptions-item label="商机总额">
-                {{ abstract.businessTotal }}
+                {{ formatPrice(abstract.businessTotal) }}
               </el-descriptions-item>
               <el-descriptions-item label="成交次数">
                 {{ abstract.dealCotal }}
               </el-descriptions-item>
               <el-descriptions-item label="成交总额">
-                {{ abstract.dealTotal }}
+                {{ formatPrice(abstract.dealTotal) }}
               </el-descriptions-item>
               <el-descriptions-item label="回款总额">
-                {{ abstract.paymentTotal }}
+                {{ formatPrice(abstract.paymentTotal) }}
               </el-descriptions-item>
               <el-descriptions-item label="未回款总额">
-                {{ abstract.notPaymentTotal }}
+                {{ formatPrice(abstract.notPaymentTotal) }}
               </el-descriptions-item>
               <el-descriptions-item label="开票总额" :span="24">
-                {{ abstract.drawTotal }}
+                {{ formatPrice(abstract.drawTotal) }}
               </el-descriptions-item>
               <el-descriptions-item label="备注" :span="24">
                 {{ detail.remark }}
@@ -255,7 +255,7 @@
     <Contact ref="contact" @contactSave="contactSave" />
     <Edit ref="edit" @customerSave="customerSave" />
     <!-- 分配客户 -->
-    <Allocate ref="allocate" />
+    <Allocate ref="allocate" @refresh="back" />
     <!-- 转移客户 -->
     <Shift ref="shift" @refresh="back" />
     <!-- 移入公海 -->
@@ -482,6 +482,10 @@
           })
           .catch(() => {})
       },
+      handleAllocate() {
+        this.$refs.allocate.ids = [parseInt(this.id)]
+        this.$refs.allocate.visible = true
+      },
       customerSave() {
         this.init()
         this.getDynamics()

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-04 18:05:48
+ * @LastEditTime: 2023-01-05 13:39:44
  * @Description: file content
  * @FilePath: \opms_frontend\src\views\customer\list.vue
 -->
@@ -72,7 +72,7 @@
         show-overflow-tooltip
         :sortable="item.sortable">
         <template #default="{ row }">
-          <el-button v-if="item.prop === 'custName'" style="font-size: 14px" type="text" @click="handleDetail(row)">
+          <el-button v-if="item.prop === 'custName'" class="link-button" type="text" @click="handleDetail(row)">
             {{ row.custName }}
           </el-button>
           <span v-else-if="item.prop === 'custStatus'">
@@ -329,4 +329,11 @@
 
 <style lang="scss" scoped>
   $base: '.list';
+  .link-button {
+    font-size: 14px;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 </style>

src/views/customer/openSea.vue

@@ -2,7 +2,7 @@
  * @Author: wanglj 471442253@qq.com
  * @Date: 2022-12-15 15:38:21
  * @LastEditors: wanglj
- * @LastEditTime: 2023-01-04 18:05:32
+ * @LastEditTime: 2023-01-05 11:38:01
  * @Description: file content
  * @FilePath: \opms_frontend\src\views\customer\openSea.vue
 -->
@@ -66,7 +66,7 @@
         show-overflow-tooltip
         :sortable="item.sortable">
         <template #default="{ row }">
-          <el-button v-if="item.prop === 'custName'" style="font-size: 14px" type="text" @click="handleDetail(row)">
+          <el-button v-if="item.prop === 'custName'" class="link-button" type="text" @click="handleDetail(row)">
             {{ row.custName }}
           </el-button>
           <span v-else-if="item.prop === 'custStatus'">
@@ -378,4 +378,11 @@
 
 <style lang="scss" scoped>
   $base: '.open-sea';
+  .link-button {
+    font-size: 14px;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 </style>

src/views/plat/task/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="user-management-container">
-    <el-row :gutter="20">
-      <el-col :span="2">
-        <span>操作类型</span>
+    <el-row :gutter="20" type="flex">
+      <el-col :span="6">
+        <span class="type">操作类型</span>
         <div style="margin-top: 25px; cursor: pointer" @click="search('1')">
           <i class="el-icon-message-solid" style="margin-right: 10px"></i>
           我的待办（{{ statisticsForm.toDoNumber }}）
@@ -15,10 +15,8 @@
           <i class="el-icon-folder-checked" style="margin-right: 10px"></i>
           我处理的（{{ statisticsForm.completedNumber }}）
         </div>
-        <div style="margin-top: 50px">督办类型</div>
-        <div style="margin-top: 20px; cursor: pointer" @click="searchType('')">
-          全部
-        </div>
+        <div class="type" style="margin-top: 50px">督办类型</div>
+        <div style="margin-top: 20px; cursor: pointer" @click="searchType('')">全部</div>
         <div
           v-for="item in types"
           :key="item.dictCode"
@@ -27,28 +25,19 @@
           {{ item.dictLabel }}
         </div>
       </el-col>
-      <el-col :span="22">
+      <el-col :span="18">
         <el-row :gutter="10" style="margin-bottom: 10px">
           <el-col :span="4">
-            <el-input
-              v-model.trim="queryForm.taskTitle"
-              clearable
-              placeholder="请输入督办标题" />
+            <el-input v-model.trim="queryForm.taskTitle" clearable placeholder="请输入督办标题" />
           </el-col>
           <el-col :span="12">
-            <el-button icon="el-icon-search" type="primary" @click="queryData">
-              查询
-            </el-button>
-            <el-button icon="el-icon-refresh-right" @click="reset">
-              重置
-            </el-button>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+            <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
           </el-col>
         </el-row>
         <vab-query-form>
           <vab-query-form-left-panel :span="12">
-            <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
-              添加
-            </el-button>
+            <el-button icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
           </vab-query-form-left-panel>
           <vab-query-form-right-panel :span="12">
             <el-button icon="el-icon-download" @click="exportData" />
@@ -56,7 +45,7 @@
           </vab-query-form-right-panel>
         </vab-query-form>
         <!-- 主页面 -->
-        <el-table v-loading="listLoading" border :data="list" :height="height">
+        <el-table v-loading="listLoading" border :data="list" height="calc(100vh - 340px)">
           <el-table-column
             v-for="(item, index) in finallyColumns"
             :key="index"
@@ -76,18 +65,11 @@
               <span v-else-if="item.prop === 'isOverdue'">
                 {{ row.isOverdue === '10' ? '否' : '是' }}
               </span>
-              <span
-                v-else-if="
-                  item.prop === 'mainUserId' || item.prop === 'supervisorUserId'
-                ">
+              <span v-else-if="item.prop === 'mainUserId' || item.prop === 'supervisorUserId'">
                 {{ userMap[row[item.prop]] }}
               </span>
               <span
-                v-else-if="
-                  item.prop === 'taskStartDate' ||
-                  item.prop === 'taskEndDate' ||
-                  item.prop === 'createdTime'
-                ">
+                v-else-if="item.prop === 'taskStartDate' || item.prop === 'taskEndDate' || item.prop === 'createdTime'">
                 {{ parseTime(row[item.prop]) }}
               </span>
               <span v-else>{{ row[item.prop] }}</span>
@@ -99,9 +81,7 @@
             </template>
           </el-table-column>
           <template #empty>
-            <el-image
-              class="vab-data-empty"
-              :src="require('@/assets/empty_images/data_empty.png')" />
+            <el-image class="vab-data-empty" :src="require('@/assets/empty_images/data_empty.png')" />
           </template>
         </el-table>
         <el-pagination
@@ -115,11 +95,7 @@
       </el-col>
     </el-row>
     <!-- 新建督办 -->
-    <taskAdd
-      :do-refresh="doRefresh"
-      :self-visible.sync="addDialogVisible"
-      :types="types"
-      :users="users" />
+    <taskAdd :do-refresh="doRefresh" :self-visible.sync="addDialogVisible" :types="types" :users="users" />
     <!-- 查看详情 -->
     <taskDetail
       :do-refresh="doRefresh"
@@ -253,9 +229,7 @@
         return this.$baseTableHeight(1)
       },
       finallyColumns() {
-        return this.columns.filter((item) =>
-          this.checkList.includes(item.label)
-        )
+        return this.columns.filter((item) => this.checkList.includes(item.label))
       },
     },
     async created() {
@@ -405,3 +379,8 @@
     },
   }
 </script>
+<style lang="scss" scoped>
+  .type {
+    font-weight: bold;
+  }
+</style>