|
| 1 | +<template> |
| 2 | + <el-dialog width="600" :title="$t('views.chatUser.setUserGroups')" v-model="dialogVisible" |
| 3 | + :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"> |
| 4 | + <el-form label-position="top" ref="formRef" :rules="rules" :model="form" require-asterisk-position="right"> |
| 5 | + <el-form-item :label="$t('views.chatUser.settingMethod')" prop="user_group_ids"> |
| 6 | + <el-radio-group v-model="form.is_append"> |
| 7 | + <el-radio :value="true">{{ $t('views.chatUser.append') }}</el-radio> |
| 8 | + <el-radio :value="false">{{ $t('views.chatUser.replace') }}</el-radio> |
| 9 | + </el-radio-group> |
| 10 | + </el-form-item> |
| 11 | + <el-form-item :label="$t('views.chatUser.group.title')" prop="user_group_ids"> |
| 12 | + <el-select v-model="form.user_group_ids" multiple filterable :placeholder="$t('common.selectPlaceholder')" |
| 13 | + :loading="props.optionLoading"> |
| 14 | + <el-option v-for="item in props.chatGroupList" :key="item.id" :label="item.name" :value="item.id"> |
| 15 | + </el-option> |
| 16 | + </el-select> |
| 17 | + </el-form-item> |
| 18 | + </el-form> |
| 19 | + <template #footer> |
| 20 | + <span class="dialog-footer"> |
| 21 | + <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button> |
| 22 | + <el-button type="primary" @click="submit(formRef)" :loading="loading"> |
| 23 | + {{ $t('common.save') }} |
| 24 | + </el-button> |
| 25 | + </span> |
| 26 | + </template> |
| 27 | + </el-dialog> |
| 28 | +</template> |
| 29 | + |
| 30 | +<script setup lang="ts"> |
| 31 | +import { ref, reactive } from 'vue' |
| 32 | +import type { FormInstance } from 'element-plus' |
| 33 | +import { MsgSuccess } from '@/utils/message' |
| 34 | +import { t } from '@/locales' |
| 35 | +import userManageApi from '@/api/system/chat-user' |
| 36 | +import type { ListItem } from '@/api/type/common' |
| 37 | +
|
| 38 | +const props = defineProps<{ |
| 39 | + optionLoading: boolean, |
| 40 | + chatGroupList: ListItem[], |
| 41 | +}>() |
| 42 | +
|
| 43 | +const emit = defineEmits<{ |
| 44 | + (e: 'refresh'): void; |
| 45 | +}>(); |
| 46 | +
|
| 47 | +const dialogVisible = ref<boolean>(false) |
| 48 | +const defaultForm = { |
| 49 | + user_group_ids: [], |
| 50 | + is_append: true, |
| 51 | + ids: [] |
| 52 | +} |
| 53 | +const form = ref<{ |
| 54 | + ids: string[], user_group_ids: string[], is_append: boolean |
| 55 | +}>({ |
| 56 | + ...defaultForm, |
| 57 | +}) |
| 58 | +
|
| 59 | +function open(ids: string[]) { |
| 60 | + form.value = { ...defaultForm, ids } |
| 61 | + dialogVisible.value = true |
| 62 | +} |
| 63 | +
|
| 64 | +const formRef = ref<FormInstance>(); |
| 65 | +
|
| 66 | +const rules = reactive({ |
| 67 | + user_group_ids: [{ required: true, message: t('common.selectPlaceholder'), trigger: 'blur' }], |
| 68 | + is_append: [{ required: true, message: t('common.selectPlaceholder'), trigger: 'blur' }], |
| 69 | +}) |
| 70 | +
|
| 71 | +const loading = ref<boolean>(false) |
| 72 | +const submit = async (formEl: FormInstance | undefined) => { |
| 73 | + if (!formEl) return |
| 74 | + await formEl.validate((valid) => { |
| 75 | + if (valid) { |
| 76 | + userManageApi.batchAddGroup(form.value, loading).then(() => { |
| 77 | + MsgSuccess(t('common.settingSuccess')) |
| 78 | + emit('refresh') |
| 79 | + dialogVisible.value = false |
| 80 | + }) |
| 81 | + } |
| 82 | + }) |
| 83 | +} |
| 84 | +
|
| 85 | +defineExpose({ open }) |
| 86 | +</script> |
0 commit comments