refactor: clean

src/components/Base/Table/index.vue

@@ -97,6 +97,7 @@ export default class Table extends Vue {
   padding: $gutter $gutter 0;
   background-color: #fff;
   z-index: 99;
+  transition: height 500ms ease;
 
   >>> .el-table {
     .el-table__header {
@@ -113,7 +114,7 @@ export default class Table extends Vue {
           height: 34px;
           color: #555;
           background-color: $--color-white;
-          padding: 3px 0;
+          padding: 0;
         }
         &.el-table__row--striped {
           td.el-table__cell {

src/styles/variables.scss

@@ -5,3 +5,14 @@
 $gutter: 15px;
 $gutter-medium: 24px;
 $sideBarWidth: 173px;
+
+$--table-header-font-color: #555;
+$--table-header-background-color: rgba($--color-primary, 0.15);
+
+$--table-font-color: $--color-text-primary;
+
+$--table-row-hover-background-color: rgba($--color-primary, 0.1);
+$--table-current-row-background-color: rgba($--color-primary, 0.7);
+
+$--scrollbar-background-color: rgba($--color-text-secondary, 0.2);
+$--scrollbar-hover-background-color: rgba($--color-text-secondary, 0.4);

src/utils/constant.ts

@@ -4,7 +4,7 @@ export const gisNames = ['spectrum']
 
 export const pageSizes = [10, 20, 30, 50, 100, 1000]
 
-export const getDefaultPagination = () => ({ current: 1, size: 10 })
+export const getDefaultPagination = () => ({ current: 1, size: 30 })
 
 /** 体系默认levels
  * 正常黑色#333333、优质绿色#06B64C、轻度黄色#E29F3B、中度粉色#F25FFF、严重红色#F65252、无效黑色#333333+透明度60%

src/views/currentSystem/authorityManagement/mobileDevice/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="page-container">
-    <div class="actions">
+  <tf-page>
+    <template v-slot:action>
       <QueryForm
         :selected="selected"
         @query="onQuery"
@@ -9,7 +9,7 @@
         @review="onReview"
         :loading="loading"
       />
-    </div>
+    </template>
     <tf-table
       v-loading="loading.query"
       :columns="mobileDeviceCols"
@@ -42,7 +42,7 @@
       :disabled="query.status === '0'"
       @submit="onSubmit"
     />
-  </div>
+  </tf-page>
 </template>
 
 <script lang="ts">

src/views/spectrum/configuration/device/widget.vue

@@ -168,15 +168,12 @@ export default class Device extends Vue {
   }
 
   mounted() {
-    this.doQuery()
-    this.getAllTypes()
+    this.preparing()
   }
 
-  @Watch('isActive')
-  refetchData(active: boolean) {
-    if (active) {
-      this.getAllTypes()
-    }
+  preparing() {
+    this.doQuery()
+    this.getAllTypes()
   }
 }
 </script>

src/views/spectrum/configuration/neighbor/widget.vue

@@ -170,15 +170,9 @@ export default class Device extends Vue {
     this.doQuery()
     this.getAllPoints()
   }
-  mounted() {
-    this.preparing()
-  }
 
-  @Watch('isActive')
-  refetchData(active: boolean) {
-    if (active) {
-      this.preparing()
-    }
+  mounted() {
+    this.getAllPoints()
   }
 }
 </script>

src/views/spectrum/configuration/point/PointForm/ThresholdForm.vue

@@ -27,7 +27,9 @@
       ref="table"
       :columns="cols"
       :data="formData.items"
-      style="padding-left:0;padding-right:0; min-height: 600px;"
+      :style="
+        `padding-left:0;padding-right:0;height:${formData.items.length ? formData.items.length * 34 + 55 : 400}px`
+      "
       v-loading="loading.standardParam"
     >
       <template v-slot:target="{ row }">
@@ -117,9 +119,9 @@
           />
         </el-form-item>
       </template>
-      <template v-slot:action="{ row, index }">
+      <template v-slot:action="{ row, $index }">
         <el-form-item :show-message="false" label-width="0" style="margin-bottom:0">
-          <el-button type="text" icon="el-icon-plus" @click="onAdd" v-if="index === formData.items.length - 1" />
+          <el-button type="text" icon="el-icon-plus" @click="onAdd" v-if="$index === formData.items.length - 1" />
           <el-button type="text" icon="el-icon-delete" @click="() => onDel(row)" v-if="formData.items.length !== 1" />
         </el-form-item>
       </template>

src/views/spectrum/configuration/point/widget.vue

@@ -1,5 +1,5 @@
 <template>
-  <tf-page>
+  <tf-page :isActive="isActive">
     <template v-slot:action>
       <QueryForm
         :selected="selected"
@@ -281,12 +281,5 @@ export default class Point extends Vue {
   mounted() {
     this.preparing()
   }
-
-  @Watch('isActive')
-  refetchData(active: boolean) {
-    if (active) {
-      this.preparing()
-    }
-  }
 }
 </script>

src/views/spectrum/configuration/standard/widget.vue

@@ -1,5 +1,5 @@
 <template>
-  <tf-page>
+  <tf-page :isActive="isActive">
     <template v-slot:action>
       <el-row type="flex" justify="space-between" style="margin-bottom: 15px">
         <div>
@@ -319,22 +319,5 @@ export default class Standards extends Vue {
   mounted() {
     this.preparing()
   }
-
-  @Watch('isActive')
-  refetchData(active: boolean) {
-    if (active) {
-      this.preparing()
-    }
-  }
 }
 </script>
-
-<style scoped>
-.actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 22px;
-  margin-bottom: 15px;
-}
-</style>

src/views/spectrum/configuration/team/widget.vue

@@ -1,5 +1,5 @@
 <template>
-  <tf-page>
+  <tf-page :isActive="isActive">
     <template v-slot:action>
       <QueryForm
         :selected="selected"
@@ -54,7 +54,7 @@ import { pointPage } from '../api/point'
 
 @Component({ name: 'Device', components: { QueryForm, TeamForm } })
 export default class Device extends Vue {
-  // @Prop({ type: Boolean, default: false }) isActive!: boolean
+  @Prop({ type: Boolean, default: false }) isActive!: boolean
   teamCols = teamCols
 
   visible = false

src/views/spectrum/configuration/type/widget.vue

@@ -1,5 +1,5 @@
 <template>
-  <tf-page>
+  <tf-page :isActive="isActive">
     <template v-slot:action>
       <el-row type="flex" justify="space-between" style="margin-bottom: 15px">
         <div>
@@ -326,13 +326,6 @@ export default class DeviceTypes extends Vue {
   mounted() {
     this.preparing()
   }
-
-  @Watch('isActive')
-  refetchData(active: boolean) {
-    if (active) {
-      this.preparing()
-    }
-  }
 }
 </script>