团队管理优化

ui/src/views/setting/component/PermissionSetting.vue

@@ -1,50 +1,56 @@
 <template>
-  <el-input v-model="filterText" placeholder="搜索" prefix-icon="Search" class="mb-16" />
+  <el-input
-
+    v-model="filterText"
-  <el-table :data="data" :max-height="tableHeight">
+    placeholder="搜索"
-    <el-table-column prop="name" :label="isApplication ? '应用名称' : '数据集名称'">
+    prefix-icon="Search"
-      <template #default="{ row }">
+    class="p-24 pt-0 pb-0 mb-16 mt-4"
-        <div class="flex align-center">
+  />
-          <AppAvatar
+  <div class="p-24 pt-0">
-            v-if="isApplication"
+    <el-table :data="data" :max-height="tableHeight">
-            :name="row.name"
+      <el-table-column prop="name" :label="isApplication ? '应用名称' : '数据集名称'">
-            pinyinColor
+        <template #default="{ row }">
-            class="mr-12"
+          <div class="flex align-center">
-            shape="square"
+            <AppAvatar
-            :size="24"
+              v-if="isApplication"
-          />
+              :name="row.name"
-          <AppAvatar v-else-if="isDataset" class="mr-12" shape="square" :size="24">
+              pinyinColor
-            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+              class="mr-12"
-          </AppAvatar>
+              shape="square"
-          <span class="ellipsis-1"> {{ row?.name }}</span>
+              :size="24"
-        </div>
+            />
-      </template>
+            <AppAvatar v-else-if="isDataset" class="mr-12" shape="square" :size="24">
-    </el-table-column>
+              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
-    <el-table-column label="管理" align="center" width="60">
+            </AppAvatar>
-      <!-- <template #header>
+            <span class="ellipsis-1"> {{ row?.name }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="管理" align="center" width="60">
+        <!-- <template #header>
         <el-checkbox
           v-model="allChecked[MANAGE]"
           label="管理"
           @change="handleCheckAllChange($event, MANAGE)"
         />
       </template> -->
-      <template #default="{ row }">
+        <template #default="{ row }">
-        <el-checkbox v-model="row.operate[MANAGE]" @change="checkedOperateChange(MANAGE, row)" />
+          <el-checkbox v-model="row.operate[MANAGE]" @change="checkedOperateChange(MANAGE, row)" />
-      </template>
+        </template>
-    </el-table-column>
+      </el-table-column>
-    <el-table-column label="使用" align="center" width="60">
+      <el-table-column label="使用" align="center" width="60">
-      <!-- <template #header>
+        <!-- <template #header>
         <el-checkbox
           v-model="allChecked[USE]"
           label="使用"
           @change="handleCheckAllChange($event, USE)"
         />
       </template> -->
-      <template #default="{ row }">
+        <template #default="{ row }">
-        <el-checkbox v-model="row.operate[USE]" @change="checkedOperateChange(USE, row)" />
+          <el-checkbox v-model="row.operate[USE]" @change="checkedOperateChange(USE, row)" />
-      </template>
+        </template>
-    </el-table-column>
+      </el-table-column>
-  </el-table>
+    </el-table>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue'
@@ -56,7 +62,8 @@ const props = defineProps({
     default: () => []
   },
   id: String,
-  type: String
+  type: String,
+  tableHeight: Number
 })
 
 const isDataset = computed(() => props.type === DATASET)
@@ -68,8 +75,6 @@ const allChecked: any = ref({
   [USE]: false
 })
 
-const tableHeight = ref(0)
-
 const filterText = ref('')
 
 watch(
@@ -113,12 +118,6 @@ function compare(attrs: string | number) {
 }
 
 onMounted(() => {
-  tableHeight.value = window.innerHeight - 300
-  window.onresize = () => {
-    return (() => {
-      tableHeight.value = window.innerHeight - 300
-    })()
-  }
   Object.keys(allChecked.value).map((item) => {
     allChecked.value[item] = compare(item)
   })

ui/src/views/setting/index.vue

@@ -40,21 +40,26 @@
         </common-list>
       </div>
       <div class="permission-setting flex" v-loading="rLoading">
-        <div class="team-manage__table p-24">
+        <div class="team-manage__table">
-          <h4>权限设置</h4>
+          <h4 class="p-24 pb-0 mb-4">权限设置</h4>
           <el-tabs v-model="activeName" class="team-manage__tabs">
             <el-tab-pane
-              v-for="item in settingTags"
+              v-for="(item, index) in settingTags"
               :key="item.value"
               :label="item.label"
               :name="item.value"
             >
-              <PermissionSetting :data="item.data" :type="item.value"></PermissionSetting>
+              <PermissionSetting
+                :key="index"
+                :data="item.data"
+                :type="item.value"
+                :tableHeight="tableHeight"
+              ></PermissionSetting>
             </el-tab-pane>
           </el-tabs>
         </div>
 
-        <div class="team-manage__footer border-t p-16 flex">
+        <div class="submit-button">
           <el-button type="primary" @click="submitPermissions">保存</el-button>
         </div>
       </div>
@@ -81,6 +86,7 @@ const currentUser = ref<String>('')
 const filterText = ref('')
 
 const activeName = ref(DATASET)
+const tableHeight = ref(0)
 
 const settingTags = reactive([
   {
@@ -201,6 +207,13 @@ function refresh() {
 }
 
 onMounted(() => {
+  tableHeight.value = window.innerHeight - 330
+  window.onresize = () => {
+    return (() => {
+      tableHeight.value = window.innerHeight - 330
+      console.log(tableHeight.value)
+    })()
+  }
   getMember()
 })
 </script>
@@ -223,17 +236,28 @@ onMounted(() => {
     box-sizing: border-box;
     width: calc(100% - var(--setting-left-width));
     flex-direction: column;
+    position: relative;
+    .submit-button {
+      position: absolute;
+      top: 54px;
+      right: 24px;
+    }
   }
 
   &__tabs {
     margin-top: 10px;
+    :deep(.el-tabs__nav-wrap::after) {
+      height: 1px;
+    }
+    :deep(.el-tabs__nav-scroll) {
+      padding: 0 24px;
+    }
+    :deep(.el-tabs__active-bar) {
+      height: 3px;
+    }
   }
   &__table {
     flex: 1;
   }
-  &__footer {
-    flex: 0 0 auto;
-    justify-content: right;
-  }
 }
 </style>