feat: 团队管理

ui/src/api/team.ts

@@ -1,5 +1,5 @@
 import { Result } from '@/request/Result'
-import { get, post, del } from '@/request/index'
+import { get, post, del, put } from '@/request/index'
 import type { TeamMember, TeamMemberRequest } from '@/api/type/team'
 // import type { Ref } from 'vue'
 
@@ -36,9 +36,33 @@ const getMemberPermissions: (member_id: String) => Promise<Result<any>> = (membe
   return get(`${prefix}/${member_id}`)
 }
 
+/**
+ * 获取成员权限
+ * @param 参数 member_id
+ * @param 参数 {
+          "team_member_permission_list": [
+            {
+              "target_id": "string",
+              "type": "string",
+              "operate": {
+                "USE": true,
+                "MANAGE": true
+              }
+            }
+          ]
+        }
+ */
+const putMemberPermissions: (member_id: String, body: any) => Promise<Result<any>> = (
+  member_id,
+  body
+) => {
+  return put(`${prefix}/${member_id}`, undefined, body)
+}
+
 export default {
   getTeamMember,
   postCreatTeamMember,
   delTeamMember,
-  getMemberPermissions
+  getMemberPermissions,
+  putMemberPermissions
 }

ui/src/router/routes.ts

@@ -9,6 +9,7 @@ export const routes: Array<RouteRecordRaw> = [
     path: '/',
     name: 'home',
     component: () => import('@/layout/app-layout/index.vue'),
+    redirect: '/setting',
     children: [
       {
         path: '/first',

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

@@ -1,20 +1,28 @@
 <template>
-  <el-table v-bind="$attrs" :max-height="tableHeight">
+  <el-table :data="data" :max-height="tableHeight">
     <el-table-column prop="name" label="数据集名称" />
     <el-table-column label="管理" align="center">
       <template #header>
-        <el-checkbox v-model="allChecked" label="管理" />
+        <el-checkbox
+          v-model="allChecked[MANAGE]"
+          label="管理"
+          @change="handleCheckAllChange($event, MANAGE)"
+        />
       </template>
       <template #default="{ row }">
-        <el-checkbox v-model="row.operate['MANAGE']" />
+        <el-checkbox v-model="row.operate[MANAGE]" @change="checkedOperateChange(MANAGE, row)" />
       </template>
     </el-table-column>
     <el-table-column label="使用" align="center">
       <template #header>
-        <el-checkbox v-model="allChecked" label="使用" />
+        <el-checkbox
+          v-model="allChecked[USE]"
+          label="使用"
+          @change="handleCheckAllChange($event, USE)"
+        />
       </template>
       <template #default="{ row }">
-        <el-checkbox v-model="row.operate['USE']" />
+        <el-checkbox v-model="row.operate[USE]" @change="checkedOperateChange(USE, row)" />
       </template>
     </el-table-column>
   </el-table>
@@ -22,13 +30,64 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
 
-// const emit = defineEmits(['refresh'])
+const MANAGE = 'MANAGE'
+const USE = 'USE'
 
-const allChecked = ref(false)
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  },
+  id: String
+})
 
-const tableHeight = ref(0)
+const emit = defineEmits(['update:data'])
+const allChecked: any = ref({
+  [MANAGE]: false,
+  [USE]: false
+})
 
-const loading = ref<boolean>(false)
+const tableHeight = ref(100)
+
+watch(
+  () => props.data,
+  (val) => {
+    Object.keys(allChecked.value).map((item) => {
+      allChecked.value[item] = compare(item)
+    })
+    emit('update:data', val)
+  },
+  {
+    deep: true
+  }
+)
+
+function handleCheckAllChange(val: string | number | boolean, Name: string | number) {
+  if (val) {
+    props.data.map((item: any) => {
+      item.operate[Name] = true
+    })
+  } else {
+    props.data.map((item: any) => {
+      item.operate[Name] = false
+    })
+  }
+}
+function checkedOperateChange(Name: string | number, row: any) {
+  if (Name === MANAGE) {
+    props.data.map((item: any) => {
+      if (item.id === row.id) {
+        item.operate[USE] = true
+      }
+    })
+  }
+  allChecked.value[Name] = compare(Name)
+}
+
+function compare(attrs: string | number) {
+  const filterData = props.data.filter((item: any) => item?.operate[attrs])
+  return props.data.length > 0 && filterData.length === props.data.length
+}
 
 onMounted(() => {
   tableHeight.value = window.innerHeight - 300
@@ -37,6 +96,9 @@ onMounted(() => {
       tableHeight.value = window.innerHeight - 300
     })()
   }
+  Object.keys(allChecked.value).map((item) => {
+    allChecked.value[item] = compare(item)
+  })
 })
 </script>
 <style lang="scss" scope></style>

ui/src/views/setting/index.vue

@@ -56,12 +56,11 @@
             >
               <PermissionSetting :data="item.data"></PermissionSetting>
             </el-tab-pane>
-            <!-- <el-tab-pane label="应用" name="application">应用</el-tab-pane> -->
           </el-tabs>
         </div>
 
         <div class="team-manage__footer border-t p-15 flex">
-          <el-button type="primary">保存</el-button>
+          <el-button type="primary" @click="submitPermissions">保存</el-button>
         </div>
       </div>
     </div>
@@ -76,7 +75,6 @@ import type { TeamMember } from '@/api/type/team'
 import CreateMemberDialog from './component/CreateMemberDialog.vue'
 import PermissionSetting from './component/PermissionSetting.vue'
 import { MsgSuccess } from '@/utils/message'
-import { timePanelSharedProps } from 'element-plus/es/components/time-picker/src/props/shared'
 
 const DATASET = 'DATASET'
 
@@ -95,12 +93,12 @@ const settingTags = reactive([
     label: '数据集',
     value: DATASET,
     data: [] as any
+  },
+  {
+    label: '应用',
+    value: 'application',
+    data: [] as any
   }
-  // {
-  //   label: '应用',
-  //   value: 'application',
-  //   data: []
-  // }
 ])
 
 watch(filterText, (val) => {
@@ -111,6 +109,30 @@ watch(filterText, (val) => {
   }
 })
 
+function submitPermissions() {
+  rLoading.value = true
+  const obj: any = {
+    team_member_permission_list: []
+  }
+  settingTags.map((item) => {
+    item.data.map((v: any) => {
+      obj['team_member_permission_list'].push({
+        target_id: v.id,
+        type: v.type,
+        operate: v.operate
+      })
+    })
+  })
+  TeamApi.putMemberPermissions(currentUser.value, obj)
+    .then(() => {
+      MsgSuccess('提交成功')
+      MemberPermissions(currentUser.value)
+    })
+    .catch(() => {
+      rLoading.value = false
+    })
+}
+
 function MemberPermissions(id: String) {
   rLoading.value = true
   TeamApi.getMemberPermissions(id)
@@ -122,12 +144,6 @@ function MemberPermissions(id: String) {
           }
         })
       }
-      // if (!res.data || Object.keys(res.data).length == 0) {
-      //   permissionsData.value = []
-      // } else {
-      //   permissionsData.value = res.data
-      // }
-
       rLoading.value = false
     })
     .catch(() => {