feat: createGroupUserDialog

Author: 1myuan

ui/src/api/system/user-group.ts

@@ -41,32 +41,21 @@ const delUserGroup: (user_group_id: string, loading?: Ref<boolean>) => Promise<R
 
 /**
  * 给用户组添加用户
- * @param 参数
- * {
- "additionalProp1": "string",
- "additionalProp2": "string",
- "additionalProp3": "string"
- }
  */
 const postAddMember: (
   user_group_id: string,
-  body: Record<string, any>,
+  body: string[],
   loading?: Ref<boolean>,
 ) => Promise<Result<any>> = (user_group_id, body, loading) => {
   return post(`${prefix}/${user_group_id}/add_member`, body, {}, loading)
 }
 
 /**
  * 从用户组删除用户
- * @param 参数 {
- "additionalProp1": "string",
- "additionalProp2": "string",
- "additionalProp3": "string"
- }
  */
 const postRemoveMember: (
   user_group_id: string,
-  body: Record<string, any>,
+  body: string[],
   loading?: Ref<boolean>,
 ) => Promise<Result<any>> = (user_group_id, body, loading) => {
   return post(`${prefix}/${user_group_id}/remove_member`, body, {}, loading)

ui/src/locales/lang/zh-CN/views/chat-user.ts

@@ -7,9 +7,11 @@ export default {
   group: {
     title: '用户组',
     name: '用户组名称',
+    usernameOrName: '用户名/姓名',
     delete: {
       confirmTitle: '是否删除用户组：',
       confirmMessage: '删除后，该用户组下的成员将全部移除，请谨慎操作！',
     },
+    batchDeleteMember: '是否移除选中的 {count} 个成员？',
   }
 }

ui/src/views/system-chat-user/group/component/CreateGroupUserDialog.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-dialog :title="$t('views.role.member.add')" v-model="dialogVisible" :close-on-click-modal="false"
+    :close-on-press-escape="false" :destroy-on-close="true">
+    <el-form label-position="top" ref="formRef" :rules="rules" :model="form" require-asterisk-position="right">
+      <el-form-item :label="$t('views.chatUser.group.usernameOrName')" prop="user">
+        <el-select v-model="form.user" multiple filterable :placeholder="$t('common.selectPlaceholder')"
+          :loading="optionLoading">
+          <el-option v-for="item in chatUserList" :key="item.id" :label="item.nick_name" :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(formRef)" :loading="loading">
+          {{ $t('common.create') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onBeforeMount } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+import SystemGroupApi from '@/api/system/user-group'
+import userManageApi from '@/api/system/chat-user'
+import type { ChatUserItem } from '@/api/type/systemChatUser'
+
+const emit = defineEmits<{
+  (e: 'refresh'): void;
+}>();
+
+const dialogVisible = ref<boolean>(false)
+const defaultForm = {
+  user: []
+}
+const form = ref<{ user: string[] }>({
+  ...defaultForm,
+})
+
+const optionLoading = ref(false)
+const chatUserList = ref<ChatUserItem[]>([])
+async function getChatUserList() {
+  try {
+    const res = await userManageApi.getChatUserList(optionLoading)
+    chatUserList.value = res.data
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+onBeforeMount(() => {
+  getChatUserList()
+})
+
+const groupId = ref('');
+function open(id: string) {
+  form.value = { ...defaultForm }
+  groupId.value = id
+  dialogVisible.value = true
+}
+
+const formRef = ref<FormInstance>();
+
+const rules = reactive({
+  user: [{ required: true, message: t('common.selectPlaceholder'), trigger: 'blur' }],
+})
+
+const loading = ref<boolean>(false)
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      SystemGroupApi.postAddMember(groupId.value, form.value.user, loading).then(() => {
+        MsgSuccess(t('common.createSuccess'))
+        emit('refresh')
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>

ui/src/views/system-chat-user/group/index.vue

@@ -118,7 +118,7 @@
             <el-table-column :label="$t('common.operation')" width="100" fixed="right">
               <template #default="{ row }">
                 <el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`" placement="top">
-                  <el-button type="primary" text @click.stop="handleDeleteUser([row.id])">
+                  <el-button type="primary" text @click.stop="handleDeleteUser(row)">
                     <el-icon>
                       <EditPen />
                     </el-icon>
@@ -132,21 +132,19 @@
     </el-card>
   </ContentContainer>
   <CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh" />
-  <!-- <CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getUserGroupList" /> -->
+  <CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getUserGroupList" />
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch, reactive, onBeforeMount } from 'vue'
+import { onMounted, ref, watch, reactive } from 'vue'
 import SystemGroupApi from '@/api/system/user-group'
-import userManageApi from '@/api/system/chat-user'
 import { t } from '@/locales'
 import type { ChatUserGroupUserItem } from '@/api/type/systemChatUser'
 import iconMap from '@/components/app-icon/icons/common'
 import CreateOrUpdateGroupDialog from './component/CreateOrUpdateGroupDialog.vue'
-// import CreateGroupUserDialog from './component/CreateGroupUserDialog.vue'
+import CreateGroupUserDialog from './component/CreateGroupUserDialog.vue'
 import type { ListItem } from '@/api/type/common'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
-import type { ChatUserItem } from '@/api/type/systemChatUser'
 
 const filterText = ref('')
 const loading = ref(false)
@@ -253,32 +251,33 @@ watch(() => current.value?.id, () => {
   getList()
 })
 
-const chatUserList = ref<ChatUserItem[]>([])
-async function getChatUserList() {
-  try {
-    const res = await userManageApi.getChatUserList()
-    chatUserList.value = res.data
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-onBeforeMount(() => {
-  getChatUserList()
-})
-
-// const createGroupUserDialogRef = ref<InstanceType<typeof CreateGroupUserDialog>>()
+const createGroupUserDialogRef = ref<InstanceType<typeof CreateGroupUserDialog>>()
 function createUser() {
-  // createGroupUserDialogRef.value?.open();
+  createGroupUserDialogRef.value?.open(current.value?.id);
 }
 
 const multipleSelection = ref<string[]>([])
 function handleSelectionChange(val: string[]) {
   multipleSelection.value = val
 }
 
-function handleDeleteUser(ids?: string[]) {
-  // TODO
+function handleDeleteUser(item?: ChatUserGroupUserItem) {
+  MsgConfirm(
+    item ? `${t('views.workspace.member.delete.confirmTitle')}${item.nick_name} ?` : '',
+    t('views.chatUser.group.batchDeleteMember', { number: multipleSelection.value.length }),
+    {
+      confirmButtonText: t('common.confirm'),
+      confirmButtonClass: 'danger',
+    },
+  )
+    .then(() => {
+      SystemGroupApi.postRemoveMember(current.value?.id as string, item ? [item.id] : multipleSelection.value, loading).then(async () => {
+        MsgSuccess(t('common.deleteSuccess'))
+        await getList()
+      })
+    })
+    .catch(() => {
+    })
 }
 </script>