feat: 完成鸽达达后台安全与审计改造
This commit is contained in:
richjohnrambo
@@ -0,0 +1,364 @@
|
||||
<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 = computed(() => dict.getOptions('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>
|
||||
Reference in New Issue
Block a user