From 0592d70f977509878b211130c4e9cd593f72ad24 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 5 Dec 2023 16:30:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=A2=E9=98=9F=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/team.ts                            |   7 +-
 ui/src/api/user.ts                            |  15 ++-
 ui/src/styles/element-plus.scss               |  36 ++---
 ui/src/views/application/AppOverview.vue      |   2 +-
 ui/src/views/application/CreateAndSetting.vue |   6 +-
 ui/src/views/application/DialogLog.vue        |   2 +-
 .../setting/component/CreateMemberDialog.vue  | 124 +++++-------------
 .../setting/component/PermissionSetting.vue   |   4 +-
 ui/src/views/setting/index.vue                |   3 +-
 .../template/component/CreateModelDialog.vue  |   2 +-
 ui/src/views/template/component/EditModel.vue |   2 +-
 11 files changed, 80 insertions(+), 123 deletions(-)

diff --git a/ui/src/api/team.ts b/ui/src/api/team.ts
index 9e6ef896b..82e8f986e 100644
--- a/ui/src/api/team.ts
+++ b/ui/src/api/team.ts
@@ -13,10 +13,10 @@ const getTeamMember: () => Promise<Result<TeamMember[]>> = () => {
 
 /**
  * 添加成员
- * @param 参数 { "username_or_email": "string" }
+ * @param 参数 []
  */
-const postCreatTeamMember: (data: String) => Promise<Result<boolean>> = (data) => {
-  return post(`${prefix}`, { username_or_email: data })
+const postCreatTeamMember: (data: Array<String>) => Promise<Result<boolean>> = (data) => {
+  return post(`${prefix}/_batch`, data)
 }
 
 /**
@@ -58,7 +58,6 @@ const putMemberPermissions: (member_id: String, body: any) => Promise<Result<any
   return put(`${prefix}/${member_id}`, body)
 }
 
-
 export default {
   getTeamMember,
   postCreatTeamMember,
diff --git a/ui/src/api/user.ts b/ui/src/api/user.ts
index 040e0a132..3dbe9211f 100644
--- a/ui/src/api/user.ts
+++ b/ui/src/api/user.ts
@@ -112,6 +112,18 @@ const resetPassword: (
   return post('/user/re_password', request, undefined, loading)
 }
 
+/**
+ * 添加团队需要查询用户列表
+ * @param loading 接口加载器
+ * email_or_username
+ */
+const getUserList: (email_or_username: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  email_or_username,
+  loading
+) => {
+  return get('/user/list', { email_or_username }, loading)
+}
+
 export default {
   login,
   register,
@@ -121,5 +133,6 @@ export default {
   resetPassword,
   sendEmailToCurrent,
   resetCurrentUserPassword,
-  logout
+  logout,
+  getUserList
 }
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 22e0c8946..2ed279ee8 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -74,24 +74,24 @@
   }
 }
 
-@media only screen and (min-width: 1400px) {
-  .app-list-row {
-    .el-col-lg-6 {
-      display: block;
-      max-width: 20.8333333333%;
-      flex: 0 0 20.8333333333%;
-    }
-  }
-}
-@media only screen and (min-width: 1920px) {
-  .app-list-row {
-    .el-col-xl-4 {
-      display: block;
-      max-width: 16.6666666667%;
-      flex: 0 0 16.6666666667%;
-    }
-  }
-}
+// @media only screen and (min-width: 1400px) {
+//   .app-list-row {
+//     .el-col-lg-6 {
+//       display: block;
+//       max-width: 20.8333333333%;
+//       flex: 0 0 20.8333333333%;
+//     }
+//   }
+// }
+// @media only screen and (min-width: 1920px) {
+//   .app-list-row {
+//     .el-col-xl-4 {
+//       display: block;
+//       max-width: 16.6666666667%;
+//       flex: 0 0 16.6666666667%;
+//     }
+//   }
+// }
 
 .el-card {
   --el-card-padding: calc(var(--app-base-px) * 2);
diff --git a/ui/src/views/application/AppOverview.vue b/ui/src/views/application/AppOverview.vue
index ba36084d2..224ed723b 100644
--- a/ui/src/views/application/AppOverview.vue
+++ b/ui/src/views/application/AppOverview.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer header="概览" back-to="-1">
+  <LayoutContainer header="概览">
     <div class="main-calc-height p-24">
       <h4 class="title-decoration-1 mb-16">应用信息</h4>
       <el-card shadow="never" class="overview-card">
diff --git a/ui/src/views/application/CreateAndSetting.vue b/ui/src/views/application/CreateAndSetting.vue
index 29f0e0812..8dff6bb05 100644
--- a/ui/src/views/application/CreateAndSetting.vue
+++ b/ui/src/views/application/CreateAndSetting.vue
@@ -1,5 +1,9 @@
 <template>
-  <LayoutContainer :header="id ? '设置' : '创建应用'" back-to="-1" class="create-application">
+  <LayoutContainer
+    :header="id ? '设置' : '创建应用'"
+    :back-to="id ? '' : -1"
+    class="create-application"
+  >
     <el-row v-loading="loading">
       <el-col :span="10">
         <div class="p-24 mb-16" style="padding-bottom: 0">
diff --git a/ui/src/views/application/DialogLog.vue b/ui/src/views/application/DialogLog.vue
index c9a5b85ee..14c87d209 100644
--- a/ui/src/views/application/DialogLog.vue
+++ b/ui/src/views/application/DialogLog.vue
@@ -75,7 +75,7 @@ const dayOptions = [
     label: '过去90天'
   },
   {
-    value: 188,
+    value: 183,
     label: '过去半年'
   }
 ]
diff --git a/ui/src/views/setting/component/CreateMemberDialog.vue b/ui/src/views/setting/component/CreateMemberDialog.vue
index 265f263d5..0db8c8577 100644
--- a/ui/src/views/setting/component/CreateMemberDialog.vue
+++ b/ui/src/views/setting/component/CreateMemberDialog.vue
@@ -21,6 +21,7 @@
     >
       <el-form-item label="用户名/邮箱" prop="users">
         <el-select
+          ref="SelectRemoteRef"
           class="custom-select-multiple"
           v-model="memberForm.users"
           multiple
@@ -28,14 +29,16 @@
           remote
           reserve-keyword
           placeholder="请输入成员的用户名或邮箱"
+          no-data-text="用户不存在"
           :remote-method="remoteMethod"
           :loading="loading"
+          @change="changeSelectHandle"
         >
           <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in userOptions"
+            :key="item?.id"
+            :label="item?.username"
+            :value="item?.id"
           />
         </el-select>
       </el-form-item>
@@ -53,115 +56,55 @@ import { ref, watch, onMounted } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { MsgSuccess } from '@/utils/message'
 import TeamApi from '@/api/team'
-
-interface ListItem {
-  value: string
-  label: string
-}
-
-const states = [
-  'Alabama',
-  'Alaska',
-  'Arizona',
-  'Arkansas',
-  'California',
-  'Colorado',
-  'Connecticut',
-  'Delaware',
-  'Florida',
-  'Georgia',
-  'Hawaii',
-  'Idaho',
-  'Illinois',
-  'Indiana',
-  'Iowa',
-  'Kansas',
-  'Kentucky',
-  'Louisiana',
-  'Maine',
-  'Maryland',
-  'Massachusetts',
-  'Michigan',
-  'Minnesota',
-  'Mississippi',
-  'Missouri',
-  'Montana',
-  'Nebraska',
-  'Nevada',
-  'New Hampshire',
-  'New Jersey',
-  'New Mexico',
-  'New York',
-  'North Carolina',
-  'North Dakota',
-  'Ohio',
-  'Oklahoma',
-  'Oregon',
-  'Pennsylvania',
-  'Rhode Island',
-  'South Carolina',
-  'South Dakota',
-  'Tennessee',
-  'Texas',
-  'Utah',
-  'Vermont',
-  'Virginia',
-  'Washington',
-  'West Virginia',
-  'Wisconsin',
-  'Wyoming'
-]
+import UserApi from '@/api/user'
 
 const emit = defineEmits(['refresh'])
 
 const dialogVisible = ref<boolean>(false)
 
 const memberForm = ref({
-  users: [],
-  user: ''
+  users: []
 })
 
-const options = ref<ListItem[]>([])
-const list = ref<ListItem[]>([])
-
+const SelectRemoteRef = ref()
 const addMemberFormRef = ref<FormInstance>()
 
 const loading = ref<boolean>(false)
+const userOptions = ref([])
 
-const validateUsers = (rule: any, value: any, callback: any) => {
-  if (value?.length == 0 && !memberForm.value.user) {
-    callback(new Error('请输入用户名/邮箱'))
-  } else {
-    callback()
-  }
-}
 const rules = ref<FormRules>({
-  users: [{ type: 'array', validator: validateUsers }]
+  users: [
+    {
+      type: 'array',
+      required: true,
+      message: '请输入用户名/邮箱',
+      trigger: 'change'
+    }
+  ]
 })
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
     memberForm.value = {
-      users: [],
-      user: ''
+      users: []
     }
   }
 })
 
 const remoteMethod = (query: string) => {
   if (query) {
-    loading.value = true
     setTimeout(() => {
-      loading.value = false
-      options.value = list.value.filter((item) => {
-        return item.label.toLowerCase().includes(query.toLowerCase())
-      })
+      getUser(query)
     }, 200)
   } else {
-    options.value = []
+    userOptions.value = []
   }
 }
 
+const changeSelectHandle = () => {
+  SelectRemoteRef.value.query = ''
+}
+
 const open = () => {
   dialogVisible.value = true
 }
@@ -170,10 +113,7 @@ const submitMember = async (formEl: FormInstance | undefined) => {
   await formEl.validate((valid, fields) => {
     if (valid) {
       loading.value = true
-      const submitValue: string = memberForm.value.users?.length
-        ? memberForm.value.users.toString()
-        : memberForm.value.user
-      TeamApi.postCreatTeamMember(submitValue).then(() => {
+      TeamApi.postCreatTeamMember(memberForm.value.users).then(() => {
         MsgSuccess('提交成功')
         emit('refresh')
         dialogVisible.value = false
@@ -184,11 +124,13 @@ const submitMember = async (formEl: FormInstance | undefined) => {
   })
 }
 
-onMounted(() => {
-  list.value = states.map((item) => {
-    return { value: `value:${item}`, label: `label:${item}` }
+const getUser = (val: string) => {
+  UserApi.getUserList(val, loading).then((res) => {
+    userOptions.value = res.data
   })
-})
+}
+
+onMounted(() => {})
 
 defineExpose({ open, close })
 </script>
diff --git a/ui/src/views/setting/component/PermissionSetting.vue b/ui/src/views/setting/component/PermissionSetting.vue
index 29a0b513d..615629d45 100644
--- a/ui/src/views/setting/component/PermissionSetting.vue
+++ b/ui/src/views/setting/component/PermissionSetting.vue
@@ -20,7 +20,7 @@
         </div>
       </template>
     </el-table-column>
-    <el-table-column label="管理" align="center">
+    <el-table-column label="管理" align="center" width="60">
       <!-- <template #header>
         <el-checkbox
           v-model="allChecked[MANAGE]"
@@ -32,7 +32,7 @@
         <el-checkbox v-model="row.operate[MANAGE]" @change="checkedOperateChange(MANAGE, row)" />
       </template>
     </el-table-column>
-    <el-table-column label="使用" align="center">
+    <el-table-column label="使用" align="center" width="60">
       <!-- <template #header>
         <el-checkbox
           v-model="allChecked[USE]"
diff --git a/ui/src/views/setting/index.vue b/ui/src/views/setting/index.vue
index c6aa375d5..ab7e6b1ff 100644
--- a/ui/src/views/setting/index.vue
+++ b/ui/src/views/setting/index.vue
@@ -22,7 +22,6 @@
               <div>
                 <span class="mr-8">{{ row.username }}</span>
                 <el-tag v-if="isManage(row.type)" class="default-tag">所有者</el-tag>
-                <el-tag type="warning" v-else>用户</el-tag>
               </div>
               <div @click.stop style="margin-top: 5px">
                 <el-dropdown trigger="click" v-if="!isManage(row.type)">
@@ -71,7 +70,7 @@ import type { TeamMember } from '@/api/type/team'
 import CreateMemberDialog from './component/CreateMemberDialog.vue'
 import PermissionSetting from './component/PermissionSetting.vue'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
-import { DATASET, APPLICATION} from './utils'
+import { DATASET, APPLICATION } from './utils'
 
 const CreateMemberRef = ref<InstanceType<typeof CreateMemberDialog>>()
 const loading = ref(false)
diff --git a/ui/src/views/template/component/CreateModelDialog.vue b/ui/src/views/template/component/CreateModelDialog.vue
index 9ab431991..e2e104c5d 100644
--- a/ui/src/views/template/component/CreateModelDialog.vue
+++ b/ui/src/views/template/component/CreateModelDialog.vue
@@ -16,7 +16,7 @@
         >
         <el-breadcrumb-item
           ><span class="active-breadcrumb">{{
-            `添加 ${providerValue?.name} 模型`
+            `添加 ${providerValue?.name}`
           }}</span></el-breadcrumb-item
         >
       </el-breadcrumb>
diff --git a/ui/src/views/template/component/EditModel.vue b/ui/src/views/template/component/EditModel.vue
index 9d64cda6d..86013447f 100644
--- a/ui/src/views/template/component/EditModel.vue
+++ b/ui/src/views/template/component/EditModel.vue
@@ -11,7 +11,7 @@
       <el-breadcrumb separator=">">
         <el-breadcrumb-item
           ><span class="active-breadcrumb">{{
-            `编辑 ${providerValue?.name} 模型`
+            `编辑 ${providerValue?.name}`
           }}</span></el-breadcrumb-item
         >
       </el-breadcrumb>