refactor(系统设置): 表格高度风格统一

2021-05-19 10:26:38 +08:00 · 2021-05-19 10:26:38 +08:00 · 5b90fc5c7a
parent 2607fba4e1
commit 5b90fc5c7a
11 changed files with 45 additions and 13 deletions
--- a/frontend/src/business/components/performance/test/PerformanceTestList.vue
+++ b/frontend/src/business/components/performance/test/PerformanceTestList.vue
@ -11,6 +11,7 @@
        <el-table border :data="tableData" class="adjust-table test-content"
                  @sort-change="sort"
                  @filter-change="filter"
+                  :height="screenHeight"
        >
          <el-table-column
            prop="num"
@ -146,6 +147,7 @@ export default {
        {text: 'Error', value: 'Error'}
      ],
      userFilters: [],
+      screenHeight: 'calc(100vh - 295px)',
    };
  },
  watch: {
--- a/frontend/src/business/components/settings/operatinglog/OperatingLog.vue
+++ b/frontend/src/business/components/settings/operatinglog/OperatingLog.vue
@ -50,14 +50,18 @@
              </el-col>

              <el-col :span="2">
-                <el-button type="primary" size="small" style="float: right" @click="search">{{$t('commons.adv_search.search')}}</el-button>
+                <el-button type="primary" size="small" style="float: right" @click="search">
+                  {{ $t('commons.adv_search.search') }}
+                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>

      </template>
-      <el-table border class="adjust-table" :data="tableData" ref="operLog">
+      <el-table border class="adjust-table" :data="tableData" ref="operLog"
+                :height="screenHeight"
+      >
        <el-table-column prop="operTime" :label="$t('operating_log.time')">
          <template v-slot:default="scope">
            <span>{{ scope.row.operTime | timestampFormatDate }}</span>
@ -67,7 +71,7 @@
        <el-table-column prop="projectName" :label="$t('commons.project')"/>
        <el-table-column prop="operType" :label="$t('operating_log.type')">
          <template v-slot:default="scope">
-            <span>{{getType(scope.row.operType)}}</span>
+            <span>{{ getType(scope.row.operType) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operModule" :label="$t('operating_log.object')" show-overflow-tooltip width="120px"/>
@ -108,6 +112,7 @@
        items: [],
        condition: {},
        tableData: [],
+        screenHeight: 'calc(100vh - 275px)',
        LOG_TYPE: [
          {id: 'CREATE', label: this.$t('api_test.definition.request.create_info')},
          {id: 'DELETE', label: this.$t('commons.delete')},
--- a/frontend/src/business/components/settings/organization/OrganizationMember.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationMember.vue
@ -8,6 +8,7 @@
      <el-table border class="adjust-table ms-select-all-fixed" :data="tableData" style="width: 100%"
                @select-all="handleSelectAll"
                @select="handleSelect"
+                :height="screenHeight"
                ref="userTable">
        <el-table-column type="selection" width="50"/>
        <ms-table-header-select-popover v-show="total>0"
@ -157,6 +158,7 @@
        result: {},
        createVisible: false,
        updateVisible: false,
+        screenHeight: 'calc(100vh - 255px)',
        form: {},
        queryPath: "/user/org/member/list",
        condition: {},
--- a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
@ -5,7 +5,9 @@
        <ms-table-header :condition.sync="condition" @search="list" @create="create"
                         :create-tip="$t('workspace.create')" :title="$t('commons.workspace')"/>
      </template>
-      <el-table border class="adjust-table" :data="items" style="width: 100%">
+      <el-table border class="adjust-table" :data="items" style="width: 100%"
+                :height="screenHeight"
+      >
        <el-table-column prop="name" :label="$t('commons.name')"/>
        <el-table-column prop="description" :label="$t('commons.description')"/>
        <el-table-column :label="$t('commons.member')">
@ -473,6 +475,7 @@
        dialogTotal: 0,
        memberLineData: [],
        memberForm: {},
+        screenHeight: 'calc(100vh - 255px)',
        form: {
          // name: "",
          // description: ""
--- a/frontend/src/business/components/settings/project/EnvironmentList.vue
+++ b/frontend/src/business/components/settings/project/EnvironmentList.vue
@ -15,11 +15,14 @@
      </template>
      <!-- 环境列表内容 -->
      <el-table border :data="environments" @filter-change="filter"
-                @selection-change="handleSelectionChange" class="adjust-table" style="width: 100%" ref="table">
+                @selection-change="handleSelectionChange" class="adjust-table" style="width: 100%" ref="table"
+                :height="screenHeight"
+      >
        <el-table-column type="selection"></el-table-column>
-        <el-table-column :label="$t('commons.project')" width="250" :filters="projectFilters" column-key="projectId" show-overflow-tooltip>
+        <el-table-column :label="$t('commons.project')" width="250" :filters="projectFilters" column-key="projectId"
+                         show-overflow-tooltip>
          <template v-slot="scope">
-            <span>{{idNameMap.get(scope.row.projectId)}}</span>
+            <span>{{ idNameMap.get(scope.row.projectId) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('api_test.environment.name')" prop="name" show-overflow-tooltip>
@ -141,6 +144,7 @@
        total: 0,
        projectIds: [],   //当前工作空间所拥有的所有项目id
        projectFilters: [],
+        screenHeight: 'calc(100vh - 255px)',
      }
    },
    created() {
--- a/frontend/src/business/components/settings/project/MsProject.vue
+++ b/frontend/src/business/components/settings/project/MsProject.vue
@ -12,7 +12,9 @@
      </template>
      <el-table border class="adjust-table" :data="items" style="width: 100%"
                @sort-change="sort"
-                @filter-change="filter">
+                @filter-change="filter"
+                :height="screenHeight"
+      >
        <el-table-column prop="name" :label="$t('commons.name')" width="250" show-overflow-tooltip/>
        <el-table-column prop="description" :label="$t('commons.description')" show-overflow-tooltip>
          <template v-slot:default="scope">
@ -194,6 +196,7 @@ export default {
        // caseTemplateId: [{required: true}],
        // issueTemplateId: [{required: true}],
      },
+      screenHeight: 'calc(100vh - 255px)',
    };
  },
  props: {
--- a/frontend/src/business/components/settings/system/Organization.vue
+++ b/frontend/src/business/components/settings/system/Organization.vue
@ -7,7 +7,9 @@
                         :create-tip="$t('organization.create')" :title="$t('commons.organization')"/>
      </template>
      <!-- system menu organization table-->
-      <el-table border class="adjust-table" :data="tableData" style="width: 100%">
+      <el-table border class="adjust-table" :data="tableData" style="width: 100%"
+                :height="screenHeight"
+      >
        <el-table-column prop="name" :label="$t('commons.name')"/>
        <el-table-column prop="description" :label="$t('commons.description')"/>
        <el-table-column :label="$t('commons.member')">
@ -224,6 +226,7 @@ export default {
      dialogPageSize: 10,
      dialogTotal: 0,
      currentRow: {},
+      screenHeight: 'calc(100vh - 255px)',
      condition: {},
      dialogCondition: {},
      tableData: [],
--- a/frontend/src/business/components/settings/system/SystemWorkspace.vue
+++ b/frontend/src/business/components/settings/system/SystemWorkspace.vue
@ -6,14 +6,16 @@
                         :create-tip="$t('workspace.create')" :title="$t('commons.workspace')"/>
      </template>
      <!-- workspace table -->
-      <el-table border class="adjust-table" :data="items" style="width: 100%">
+      <el-table border class="adjust-table" :data="items" style="width: 100%"
+                :height="screenHeight"
+      >
        <el-table-column prop="name" :label="$t('commons.name')"/>
        <el-table-column prop="description" :label="$t('commons.description')"/>
        <el-table-column prop="organizationName" :label="$t('workspace.organization_name')"/>
        <el-table-column :label="$t('commons.member')">
          <template v-slot:default="scope">
            <el-link type="primary" class="member-size" @click="cellClick(scope.row)">
-              {{scope.row.memberSize}}
+              {{ scope.row.memberSize }}
            </el-link>
          </template>
        </el-table-column>
@ -494,6 +496,7 @@
        dialogTotal: 0,
        memberLineData: [],
        memberForm: {},
+        screenHeight: 'calc(100vh - 255px)',
        form: {
          // name: "",
          // description: ""
--- a/frontend/src/business/components/settings/system/TestResourcePool.vue
+++ b/frontend/src/business/components/settings/system/TestResourcePool.vue
@ -6,7 +6,9 @@
                         :create-tip="$t('test_resource_pool.create_resource_pool')"
                         :title="$t('commons.test_resource_pool')"/>
      </template>
-      <el-table border class="adjust-table" :data="items" style="width: 100%">
+      <el-table border class="adjust-table" :data="items" style="width: 100%"
+                :height="screenHeight"
+      >
        <el-table-column prop="name" :label="$t('commons.name')"/>
        <el-table-column prop="description" :label="$t('commons.description')"/>
        <el-table-column prop="type" :label="$t('test_resource_pool.type')">
@ -203,6 +205,7 @@ export default {
      pageSize: 10,
      total: 0,
      form: {},
+      screenHeight: 'calc(100vh - 255px)',
      requiredRules: [{required: true, message: this.$t('test_resource_pool.fill_the_data'), trigger: 'blur'}],
      rule: {
        name: [
--- a/frontend/src/business/components/settings/system/User.vue
+++ b/frontend/src/business/components/settings/system/User.vue
@ -11,6 +11,7 @@
      <el-table border class="adjust-table ms-select-all-fixed" :data="tableData" style="width: 100%"
                @select-all="handleSelectAll"
                @select="handleSelect"
+                :height="screenHeight"
                ref="userTable">
        <el-table-column type="selection" width="50"/>
        <ms-table-header-select-popover v-show="total>0"
@ -429,6 +430,7 @@ export default {
          id: ''
        }]
      },
+      screenHeight: 'calc(100vh - 255px)',
      checkPasswordForm: {},
      ruleForm: {},
      buttons: [
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@ -8,6 +8,7 @@
      <el-table border class="adjust-table ms-select-all-fixed" :data="tableData" style="width: 100%"
                @select-all="handleSelectAll"
                @select="handleSelect"
+                :height="screenHeight"
                ref="userTable">

        <el-table-column type="selection" width="50"/>
@ -164,6 +165,7 @@
            {required: true, message: this.$t('role.please_choose_role'), trigger: ['blur']}
          ]
        },
+        screenHeight: 'calc(100vh - 255px)',
        multipleSelection: [],
        currentPage: 1,
        pageSize: 10,
@ -173,7 +175,7 @@
        batchAddTitle: this.$t('project.batch_choose_workspace'),
        selectRows: new Set(),
        referenced: false,
-        batchAddUserRoleOptions:[],
+        batchAddUserRoleOptions: [],
        buttons: [
          {
            name: this.$t('user.button.add_user_role_batch'), handleClick: this.addUserRoleBatch