365 lines
12 KiB
Vue
365 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<div class="n-layout-page-header"><n-card :bordered="false" title="用户分组" /></div>
|
|
<n-card :bordered="false" class="proCard">
|
|
<BasicForm
|
|
ref="searchFormRef"
|
|
@register="register"
|
|
@submit="reloadTable"
|
|
@reset="reloadTable"
|
|
@keyup.enter="reloadTable"
|
|
/>
|
|
<BasicTable
|
|
ref="actionRef"
|
|
:columns="columns"
|
|
:request="loadDataTable"
|
|
:row-key="(row) => row.id"
|
|
:actionColumn="actionColumn"
|
|
:scroll-x="scrollX"
|
|
:resizeHeightOffset="-10000"
|
|
>
|
|
<template #tableTitle
|
|
><n-button
|
|
type="primary"
|
|
:disabled="!hasPermission(['/imUserPolicyGroup/edit'])"
|
|
@click="openEdit()"
|
|
>新增分组</n-button
|
|
></template
|
|
>
|
|
</BasicTable>
|
|
</n-card>
|
|
|
|
<n-modal
|
|
v-model:show="editVisible"
|
|
preset="dialog"
|
|
:show-icon="false"
|
|
:title="editForm.id ? '编辑用户分组' : '新增用户分组'"
|
|
:style="{ width: dialogWidth }"
|
|
>
|
|
<n-form
|
|
ref="editFormRef"
|
|
:model="editForm"
|
|
:rules="editRules"
|
|
label-placement="left"
|
|
label-width="118"
|
|
>
|
|
<n-grid :cols="2" :x-gap="16">
|
|
<n-form-item-gi label="分组编码" path="groupCode"
|
|
><n-input v-model:value="editForm.groupCode" :disabled="!!editForm.id"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="分组名称" path="groupName"
|
|
><n-input v-model:value="editForm.groupName"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="优先级"
|
|
><n-input-number v-model:value="editForm.priority" :min="0"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="状态"
|
|
><n-select v-model:value="editForm.status" :options="statusOptions"
|
|
/></n-form-item-gi>
|
|
</n-grid>
|
|
<n-divider title-placement="left">好友权限</n-divider>
|
|
<n-grid :cols="2" :x-gap="16">
|
|
<n-form-item-gi label="允许添加好友"
|
|
><n-switch v-model:value="editForm.policy.allow_add_friend"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="直接成为好友"
|
|
><n-switch v-model:value="editForm.policy.direct_add_friend"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="允许二维码添加"
|
|
><n-switch v-model:value="editForm.policy.allow_qrcode_add_friend"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="群成员资料可见"
|
|
><n-switch v-model:value="editForm.policy.allow_group_member_profile"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="禁用时隐藏资料"
|
|
><n-switch v-model:value="editForm.policy.hide_profile_when_friend_disabled"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="好友数量上限"
|
|
><n-input-number v-model:value="editForm.policy.max_friend_count" :min="0"
|
|
/></n-form-item-gi>
|
|
</n-grid>
|
|
<n-divider title-placement="left">消息与群权限</n-divider>
|
|
<n-grid :cols="2" :x-gap="16">
|
|
<n-form-item-gi label="允许单聊"
|
|
><n-switch v-model:value="editForm.policy.allow_private_message"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="允许群聊"
|
|
><n-switch v-model:value="editForm.policy.allow_group_message"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="允许创建群"
|
|
><n-switch v-model:value="editForm.policy.allow_create_group"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="允许加入群"
|
|
><n-switch v-model:value="editForm.policy.allow_join_group"
|
|
/></n-form-item-gi>
|
|
<n-form-item-gi label="允许上传文件"
|
|
><n-switch v-model:value="editForm.policy.allow_upload_file"
|
|
/></n-form-item-gi>
|
|
</n-grid>
|
|
<n-form-item label="IP白名单"
|
|
><n-input
|
|
v-model:value="editForm.ipWhitelistText"
|
|
type="textarea"
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
placeholder="每行一个IP或CIDR"
|
|
/></n-form-item>
|
|
<n-form-item label="IP黑名单"
|
|
><n-input
|
|
v-model:value="editForm.ipBlacklistText"
|
|
type="textarea"
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
placeholder="每行一个IP或CIDR"
|
|
/></n-form-item>
|
|
<n-form-item label="备注"
|
|
><n-input v-model:value="editForm.remark" type="textarea"
|
|
/></n-form-item>
|
|
</n-form>
|
|
<template #action
|
|
><n-space
|
|
><n-button @click="editVisible = false">取消</n-button
|
|
><n-button type="primary" :loading="submitting" @click="submitEdit"
|
|
>保存</n-button
|
|
></n-space
|
|
></template
|
|
>
|
|
</n-modal>
|
|
|
|
<n-modal
|
|
v-model:show="memberVisible"
|
|
preset="dialog"
|
|
:show-icon="false"
|
|
title="分组成员"
|
|
:style="{ width: dialogWidth }"
|
|
>
|
|
<n-space class="member-toolbar">
|
|
<n-input-number v-model:value="memberUserId" :min="1" placeholder="输入用户ID" />
|
|
<n-button
|
|
type="primary"
|
|
:disabled="!hasPermission(['/imUserPolicyGroup/memberAdd'])"
|
|
@click="addMember"
|
|
>添加成员</n-button
|
|
>
|
|
</n-space>
|
|
<BasicTable
|
|
ref="memberTableRef"
|
|
:columns="memberColumns"
|
|
:request="loadMemberTable"
|
|
:row-key="(row) => row.id"
|
|
:pagination="{ pageSize: 10 }"
|
|
:resizeHeightOffset="-10000"
|
|
/>
|
|
</n-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, h, onMounted, reactive, ref } from 'vue';
|
|
import { useDialog, useMessage } from 'naive-ui';
|
|
import { BasicForm, useForm } from '@/components/Form';
|
|
import { BasicTable, TableAction } from '@/components/Table';
|
|
import { useDictStore } from '@/store/modules/dict';
|
|
import { usePermission } from '@/hooks/web/usePermission';
|
|
import { useUserStore } from '@/store/modules/user';
|
|
import { adaModalWidth, adaTableScrollX } from '@/utils/hotgo';
|
|
import {
|
|
Delete,
|
|
Edit,
|
|
List,
|
|
MemberAdd,
|
|
MemberList,
|
|
MemberRemove,
|
|
Status,
|
|
} from '@/api/imUserPolicyGroup';
|
|
import { columns, defaultPolicy, loadOptions, schemas } from './model';
|
|
import { loadPolicyTenantOptions, parseJSON } from '@/views/imPolicyShared';
|
|
|
|
const dict = useDictStore(),
|
|
message = useMessage(),
|
|
dialog = useDialog(),
|
|
userStore = useUserStore();
|
|
const { hasPermission } = usePermission();
|
|
const actionRef = ref(),
|
|
searchFormRef = ref<any>({}),
|
|
editFormRef = ref(),
|
|
memberTableRef = ref();
|
|
const editVisible = ref(false),
|
|
memberVisible = ref(false),
|
|
submitting = ref(false),
|
|
memberUserId = ref<number | null>(null),
|
|
activeGroupId = ref(0);
|
|
const dialogWidth = computed(() => adaModalWidth(820));
|
|
const statusOptions = dict.getOption('sys_normal_disable');
|
|
const emptyForm = () => ({
|
|
id: 0,
|
|
tenantId: Number(searchFormRef.value?.formModel?.tenantId || 0),
|
|
groupCode: '',
|
|
groupName: '',
|
|
priority: 0,
|
|
status: 1,
|
|
policy: { ...defaultPolicy },
|
|
ipWhitelistText: '',
|
|
ipBlacklistText: '',
|
|
remark: '',
|
|
});
|
|
const editForm = ref<any>(emptyForm());
|
|
const editRules = {
|
|
groupCode: { required: true, message: '请输入分组编码', trigger: 'blur' },
|
|
groupName: { required: true, message: '请输入分组名称', trigger: 'blur' },
|
|
};
|
|
const tenantSchema = schemas.value.find((v) => v.field === 'tenantId');
|
|
if (tenantSchema) tenantSchema.ifShow = () => userStore.isCompanyDept;
|
|
const [register] = useForm({
|
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4' },
|
|
labelWidth: 90,
|
|
schemas,
|
|
});
|
|
const loadDataTable = (res) => List({ ...searchFormRef.value?.formModel, ...res });
|
|
const reloadTable = () => actionRef.value?.reload();
|
|
const actionColumn = reactive({
|
|
width: 300,
|
|
title: '操作',
|
|
key: 'action',
|
|
fixed: 'right',
|
|
render: (row) =>
|
|
h(TableAction as any, {
|
|
style: 'button',
|
|
actions: [
|
|
{ label: '编辑', auth: ['/imUserPolicyGroup/edit'], onClick: () => openEdit(row) },
|
|
{
|
|
label: '成员',
|
|
auth: ['/imUserPolicyGroup/memberList'],
|
|
ifShow: () => row.tenantId > 0,
|
|
onClick: () => openMembers(row),
|
|
},
|
|
{
|
|
label: row.status === 1 ? '停用' : '启用',
|
|
auth: ['/imUserPolicyGroup/status'],
|
|
onClick: () => changeStatus(row),
|
|
},
|
|
{
|
|
label: '删除',
|
|
type: 'error',
|
|
auth: ['/imUserPolicyGroup/delete'],
|
|
onClick: () => removeGroup(row),
|
|
},
|
|
],
|
|
}),
|
|
});
|
|
const scrollX = computed(() => adaTableScrollX(columns, actionColumn.width));
|
|
function lines(value: string) {
|
|
return value
|
|
.split(/\r?\n/)
|
|
.map((v) => v.trim())
|
|
.filter(Boolean);
|
|
}
|
|
function openEdit(row?: any) {
|
|
editForm.value = row
|
|
? {
|
|
...row,
|
|
policy: { ...defaultPolicy, ...parseJSON(row.policyJson, {}) },
|
|
ipWhitelistText: parseJSON(row.ipWhitelist, []).join('\n'),
|
|
ipBlacklistText: parseJSON(row.ipBlacklist, []).join('\n'),
|
|
}
|
|
: emptyForm();
|
|
editVisible.value = true;
|
|
}
|
|
async function submitEdit() {
|
|
submitting.value = true;
|
|
try {
|
|
await editFormRef.value?.validate();
|
|
const f = editForm.value;
|
|
await Edit({
|
|
...f,
|
|
policyJson: f.policy,
|
|
ipWhitelist: lines(f.ipWhitelistText),
|
|
ipBlacklist: lines(f.ipBlacklistText),
|
|
});
|
|
message.success('保存成功');
|
|
editVisible.value = false;
|
|
reloadTable();
|
|
} finally {
|
|
submitting.value = false;
|
|
}
|
|
}
|
|
function changeStatus(row) {
|
|
dialog.warning({
|
|
title: row.status === 1 ? '停用分组' : '启用分组',
|
|
content: `确认${row.status === 1 ? '停用' : '启用'}“${row.groupName}”？`,
|
|
positiveText: '确认',
|
|
negativeText: '取消',
|
|
onPositiveClick: async () => {
|
|
await Status({ id: row.id, status: row.status === 1 ? 2 : 1 });
|
|
message.success('操作成功');
|
|
reloadTable();
|
|
},
|
|
});
|
|
}
|
|
function removeGroup(row) {
|
|
dialog.error({
|
|
title: '删除分组',
|
|
content: `确认删除“${row.groupName}”？分组有成员时不可删除。`,
|
|
positiveText: '删除',
|
|
negativeText: '取消',
|
|
onPositiveClick: async () => {
|
|
await Delete({ id: row.id });
|
|
message.success('删除成功');
|
|
reloadTable();
|
|
},
|
|
});
|
|
}
|
|
const memberColumns = [
|
|
{ title: '用户ID', key: 'userId', width: 140 },
|
|
{ title: '有效开始', key: 'validFrom', width: 180 },
|
|
{ title: '有效结束', key: 'validUntil', width: 180 },
|
|
{ title: '备注', key: 'remark', width: 180 },
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 90,
|
|
render: (row) =>
|
|
h(TableAction as any, {
|
|
style: 'button',
|
|
actions: [
|
|
{
|
|
label: '移除',
|
|
type: 'error',
|
|
auth: ['/imUserPolicyGroup/memberRemove'],
|
|
onClick: () => removeMember(row),
|
|
},
|
|
],
|
|
}),
|
|
},
|
|
];
|
|
function openMembers(row) {
|
|
activeGroupId.value = row.id;
|
|
memberVisible.value = true;
|
|
setTimeout(() => memberTableRef.value?.reload(), 0);
|
|
}
|
|
const loadMemberTable = (res) => MemberList({ groupId: activeGroupId.value, ...res });
|
|
async function addMember() {
|
|
if (!memberUserId.value) return message.warning('请输入用户ID');
|
|
await MemberAdd({ groupId: activeGroupId.value, userId: memberUserId.value });
|
|
memberUserId.value = null;
|
|
message.success('添加成功');
|
|
memberTableRef.value?.reload();
|
|
reloadTable();
|
|
}
|
|
async function removeMember(row) {
|
|
await MemberRemove({ id: row.id });
|
|
message.success('移除成功');
|
|
memberTableRef.value?.reload();
|
|
reloadTable();
|
|
}
|
|
onMounted(async () => {
|
|
loadOptions();
|
|
if (userStore.isCompanyDept) await loadPolicyTenantOptions(true);
|
|
reloadTable();
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.member-toolbar {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|