smartai2dian0/src/modules/permission/group/index.vue

<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" :model_list="model_list" :record="current_record"
    @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: 'groupName', width: 150, titleSlotName: 'groupName' },
  { 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 model_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.groupName;
    edit_form.description = record.description;
    is_edit_mode.value = true;
  }

  edit_visible.value = visible;
}
// 成员管理
const handleMembertConfig = async (record, visible) => {
  if (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) => {
  if (record) {
    current_record.value = 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,
    ...edit_form
  };

  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>