|
|
@@ -0,0 +1,306 @@
|
|
|
+<template>
|
|
|
+ <a-card class="account-page-card">
|
|
|
+ <Action :btn_text="'新建用户组'" @searchClick="searchClick" @resetClick="resetClick" @createClick="createClick"
|
|
|
+ @sizeChange="tableSizeChange" @refreshClick="refreshClick"></Action>
|
|
|
+ <DataTable :data="table_data" :columns="table_columns" row-key="groupId" :size="table_size" :loading="table_loading"
|
|
|
+ :pagination="pagination_props" @pageChange="handlePageChange">
|
|
|
+ <template #status="{ record }">
|
|
|
+ <a-switch v-model="record.status" @change="statusChange(record)" checked-value="1" unchecked-value="0" />
|
|
|
+ </template>
|
|
|
+ <template #operationSlot="{ record }">
|
|
|
+ <a-button type="text" @click="handleEdit(record, true)">编辑</a-button>
|
|
|
+ <a-button type="text" @click="handleMembertConfig(record, true)">成员管理</a-button>
|
|
|
+ <a-button type="text" @click="handlePermissionConfig(record, true)">权限管理</a-button>
|
|
|
+ <a-popconfirm content="确定删除该条数据吗?" type="warning" @ok="handleDelete(record.groupId)">
|
|
|
+ <a-button type="text" status="warning">删除</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ </template>
|
|
|
+ </DataTable>
|
|
|
+ </a-card>
|
|
|
+
|
|
|
+ <Modal :visible.sync="edit_visible" @ok="modalSave" @cancel="handleEdit(null, false)"
|
|
|
+ :title="is_edit_mode ? '编辑' : '新增'">
|
|
|
+ <GroupForm :edit_form="edit_form" :is_edit_mode="is_edit_mode" />
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ <MembertConfigModal :visible.sync="membert_config_visible" :memberList="memberList"
|
|
|
+ :selectedMemberList="selectedMemberList" @ok="membertConfigModalSave"
|
|
|
+ @update:selectedMemberList="updateSelectedMemberList" @cancel="handleMembertConfig(null, false)"
|
|
|
+ @close="handleMembertConfig(null, false)" />
|
|
|
+
|
|
|
+ <!-- TODO -->
|
|
|
+ <PermissionConfigModal :visible.sync="permission_config_visible" :knowledge_list="knowledge_list"
|
|
|
+ :agents_list="agents_list" @getActiveTab="handlePermissionModalTab" @ok="handlePermissionConfigSave"
|
|
|
+ @cancel="handlePermissionConfig(null, false)" />
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, reactive, onMounted } from 'vue';
|
|
|
+import { Message } from '@arco-design/web-vue';
|
|
|
+import DataTable from '../../../views/permission/DataTable.vue';
|
|
|
+import Action from '../../../views/permission/Action.vue';
|
|
|
+import Modal from '../Modal.vue';
|
|
|
+import GroupForm from './GroupForm.vue';
|
|
|
+import MembertConfigModal from './MembertConfigModal.vue';
|
|
|
+import PermissionConfigModal from './PermissionConfigModal.vue';
|
|
|
+
|
|
|
+import { QueryGroupList, QueryGroupUsers, SaveGroupUsers, ConfigGroupResource, GroupStatusSwitch, DeleteGroup, CreateGroup, UpdateGroup } from '../../../apis/permission/gruop';
|
|
|
+// TODO接口 模型tabs接口还没有
|
|
|
+import { QueryAllKnowledgeList, QueryAllDialogList } from '../../../apis/permission/common';
|
|
|
+
|
|
|
+const keywords = ref('');
|
|
|
+// 表格相关
|
|
|
+const table_data = ref([]);
|
|
|
+const table_columns = ref([
|
|
|
+ { title: '序号', width: 80, slotName: 'index' },
|
|
|
+ { title: '组名称', dataIndex: 'name', width: 150, titleSlotName: 'name' },
|
|
|
+ { title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true, titleSlotName: 'description' },
|
|
|
+ { title: '状态', dataIndex: 'status', slotName: 'status' },
|
|
|
+ { title: '操作', dataIndex: 'operation', slotName: 'operationSlot' },
|
|
|
+]);
|
|
|
+const pagination_props = ref({
|
|
|
+ total: 10,
|
|
|
+ current: 1,
|
|
|
+ pageSize: 12,
|
|
|
+})
|
|
|
+const table_size = ref('medium');
|
|
|
+const table_loading = ref(false);
|
|
|
+const current_record = ref(null);
|
|
|
+
|
|
|
+// 编辑表单相关
|
|
|
+const edit_visible = ref(false);
|
|
|
+const is_edit_mode = ref(false);
|
|
|
+const edit_form = reactive({
|
|
|
+ groupName: '',
|
|
|
+ description: '',
|
|
|
+});
|
|
|
+
|
|
|
+// 成员管理相关
|
|
|
+const membert_config_visible = ref(false);
|
|
|
+const memberList = ref([]);
|
|
|
+const selectedMemberList = ref([]);
|
|
|
+
|
|
|
+// 权限管理相关
|
|
|
+const permission_config_visible = ref(false);
|
|
|
+const knowledge_list = ref([]);
|
|
|
+const agents_list = ref([]);
|
|
|
+
|
|
|
+const getGroupList = async () => {
|
|
|
+ const params = {
|
|
|
+ keyword: keywords.value,
|
|
|
+ current: pagination_props.value.current,
|
|
|
+ pageSize: pagination_props.value.pageSize,
|
|
|
+ };
|
|
|
+ table_loading.value = true
|
|
|
+ const { code, data } = await QueryGroupList(params);
|
|
|
+ if (code === 200) {
|
|
|
+
|
|
|
+ pagination_props.value.total = data.total;
|
|
|
+ table_data.value = data.items;
|
|
|
+
|
|
|
+ table_loading.value = false
|
|
|
+ } else {
|
|
|
+ table_loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const searchClick = (value) => {
|
|
|
+ keywords.value = value;
|
|
|
+ getGroupList();
|
|
|
+}
|
|
|
+const resetClick = () => {
|
|
|
+ keywords.value = '';
|
|
|
+ getGroupList();
|
|
|
+}
|
|
|
+const createClick = () => {
|
|
|
+ edit_form.groupName = '';
|
|
|
+ edit_form.description = '';
|
|
|
+
|
|
|
+ is_edit_mode.value = false;
|
|
|
+ edit_visible.value = true;
|
|
|
+}
|
|
|
+const refreshClick = () => {
|
|
|
+ console.log('刷新')
|
|
|
+}
|
|
|
+
|
|
|
+// 切换页码
|
|
|
+const handlePageChange = (current) => {
|
|
|
+ pagination_props.value.current = current;
|
|
|
+ getGroupList();
|
|
|
+};
|
|
|
+
|
|
|
+// TODO功能 状态切换拦截
|
|
|
+const beforeStatusChange = async () => {
|
|
|
+ await new Promise((resolve, reject) => setTimeout(() => {
|
|
|
+ resolve()
|
|
|
+ }, 1000))
|
|
|
+}
|
|
|
+
|
|
|
+// 用户状态切换
|
|
|
+const statusChange = async (record) => {
|
|
|
+ const params = {
|
|
|
+ id: record.groupId,
|
|
|
+ status: record.status,
|
|
|
+ };
|
|
|
+ const { code } = await GroupStatusSwitch(params)
|
|
|
+ if (code === 200) {
|
|
|
+ Message.success({
|
|
|
+ title: '成功',
|
|
|
+ content: '状态切换成功.',
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const handleEdit = (record, visible) => {
|
|
|
+ if (record) {
|
|
|
+ edit_form.groupId = record.groupId;
|
|
|
+ edit_form.groupName = record.name;
|
|
|
+ edit_form.description = record.description;
|
|
|
+ is_edit_mode.value = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ edit_visible.value = visible;
|
|
|
+}
|
|
|
+// 成员管理
|
|
|
+const handleMembertConfig = async (record, visible) => {
|
|
|
+ if (record) {
|
|
|
+ current_record.value = record;
|
|
|
+ const { code, data: { inGroup, notInGroup } } = await QueryGroupUsers(record.groupId);
|
|
|
+ if (code === 200) {
|
|
|
+ const allUsers = [...inGroup, ...notInGroup];
|
|
|
+
|
|
|
+ memberList.value = allUsers.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.userName,
|
|
|
+ value: item.userId,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ selectedMemberList.value = inGroup.map((item) => item.userId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ membert_config_visible.value = visible;
|
|
|
+}
|
|
|
+// 成员管理保存
|
|
|
+const membertConfigModalSave = async (selectedMemberList) => {
|
|
|
+ const data = {
|
|
|
+ id: current_record.value.groupId,
|
|
|
+ userList: selectedMemberList,
|
|
|
+ };
|
|
|
+ const { code } = await SaveGroupUsers(data);
|
|
|
+ if (code === 200) {
|
|
|
+ Message.success({
|
|
|
+ title: '成员管理',
|
|
|
+ content: '成员修改成功',
|
|
|
+ });
|
|
|
+ membert_config_visible.value = false;
|
|
|
+ getGroupList();
|
|
|
+ }
|
|
|
+}
|
|
|
+const updateSelectedMemberList = (newSelection) => {
|
|
|
+ selectedMemberList.value = newSelection;
|
|
|
+};
|
|
|
+
|
|
|
+// 权限配置
|
|
|
+const handlePermissionConfig = async (record, visible) => {
|
|
|
+ // TODO接口 回显问题
|
|
|
+ if (record) {
|
|
|
+ edit_form.groupId = record.groupId;
|
|
|
+ getConfigList('1');
|
|
|
+ }
|
|
|
+ permission_config_visible.value = visible;
|
|
|
+}
|
|
|
+
|
|
|
+const handlePermissionModalTab = (tab) => {
|
|
|
+ if (tab.key) getConfigList(tab.key);
|
|
|
+}
|
|
|
+
|
|
|
+const handlePermissionConfigSave = async ({ checkedKeys }) => {
|
|
|
+ permission_config_visible.value = false;
|
|
|
+ const { knowledge, agents, model } = checkedKeys;
|
|
|
+ const data = {
|
|
|
+ id: edit_form.groupId,
|
|
|
+ knowledges: knowledge,
|
|
|
+ dialogs: agents,
|
|
|
+ llms: model,
|
|
|
+ };
|
|
|
+ const { code } = await ConfigGroupResource(data);
|
|
|
+ if (code === 200) {
|
|
|
+ Message.success({
|
|
|
+ title: '权限配置',
|
|
|
+ content: '权限配置成功',
|
|
|
+ });
|
|
|
+ getGroupList();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 删除用户
|
|
|
+const handleDelete = async (groupId) => {
|
|
|
+ const { code } = await DeleteGroup(groupId);
|
|
|
+ if (code === 200) {
|
|
|
+ Message.success({
|
|
|
+ title: '删除用户',
|
|
|
+ content: '删除成功',
|
|
|
+ });
|
|
|
+ getGroupList();
|
|
|
+ }
|
|
|
+}
|
|
|
+const modalSave = async () => {
|
|
|
+ edit_visible.value = false;
|
|
|
+ const data = {
|
|
|
+ id: is_edit_mode.value ? edit_form.groupId : undefined,
|
|
|
+ groupName: edit_form.groupName,
|
|
|
+ description: edit_form.description,
|
|
|
+ };
|
|
|
+
|
|
|
+ const apiCall = is_edit_mode.value ? UpdateGroup : CreateGroup;
|
|
|
+ const { code } = await apiCall(data);
|
|
|
+
|
|
|
+ if (code === 200) {
|
|
|
+ const action = is_edit_mode.value ? '编辑' : '新增';
|
|
|
+ Message.success({
|
|
|
+ title: `${action}用户`,
|
|
|
+ content: `${action}成功`,
|
|
|
+ });
|
|
|
+ getGroupList();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const tableSizeChange = (size) => {
|
|
|
+ table_size.value = size;
|
|
|
+}
|
|
|
+
|
|
|
+const getConfigList = async (tabsKey) => {
|
|
|
+ if (tabsKey === '1') {
|
|
|
+ const { code, data: { rows } } = await QueryAllKnowledgeList();
|
|
|
+ if (code === 200) {
|
|
|
+ knowledge_list.value = rows;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (tabsKey === '2') {
|
|
|
+ const { code, data: { rows } } = await QueryAllDialogList();
|
|
|
+ if (code === 200) {
|
|
|
+ agents_list.value = rows;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (tabsKey === '3') {
|
|
|
+ // const { code, data: { rows } } = await QueryAllDialogList();
|
|
|
+ // if (code === 200) {
|
|
|
+ // agents_list.value = rows;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getGroupList()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="css" scoped>
|
|
|
+.account-page-card {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+}
|
|
|
+</style>
|
张涛