|
@@ -1,9 +1,10 @@
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
import type { VbenFormProps } from '@vben/common-ui';
|
|
import type { VbenFormProps } from '@vben/common-ui';
|
|
|
|
|
+import type { RoleGroupEntity } from '@vben/types';
|
|
|
|
|
|
|
|
import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
|
|
import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
|
|
|
|
|
|
|
|
-import { h } from 'vue';
|
|
|
|
|
|
|
+import { h, onMounted, ref } from 'vue';
|
|
|
|
|
|
|
|
import { Page, useVbenModal } from '@vben/common-ui';
|
|
import { Page, useVbenModal } from '@vben/common-ui';
|
|
|
import { MdiDelete, MdiDetail, MdiEdit } from '@vben/icons';
|
|
import { MdiDelete, MdiDetail, MdiEdit } from '@vben/icons';
|
|
@@ -12,6 +13,7 @@ import { ElMessage, ElMessageBox, ElTag } from 'element-plus';
|
|
|
|
|
|
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
|
|
import { deleteAccountApi, getAccountListApi } from '#/api/account';
|
|
import { deleteAccountApi, getAccountListApi } from '#/api/account';
|
|
|
|
|
+import { getRoleListApi } from '#/api/role';
|
|
|
import { $t } from '#/locales';
|
|
import { $t } from '#/locales';
|
|
|
|
|
|
|
|
import AccountForm from './form.vue';
|
|
import AccountForm from './form.vue';
|
|
@@ -103,7 +105,16 @@ const gridOptions: VxeGridProps<any> = {
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
{ title: '备注', field: 'accountbz', sortable: true },
|
|
{ title: '备注', field: 'accountbz', sortable: true },
|
|
|
- { title: '角色组', field: 'accountgrouplist', sortable: true },
|
|
|
|
|
|
|
+ {
|
|
|
|
|
+ title: '角色组',
|
|
|
|
|
+ field: 'accountgrouplist',
|
|
|
|
|
+ sortable: true,
|
|
|
|
|
+ slots: {
|
|
|
|
|
+ default: ({ row }) => {
|
|
|
|
|
+ return formatRoleNames(row.accountgrouplist);
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
{ title: '创建人', field: 'accountcreateuser', sortable: true },
|
|
{ title: '创建人', field: 'accountcreateuser', sortable: true },
|
|
|
{ title: '开通时间', field: 'accountcreatedate', sortable: true },
|
|
{ title: '开通时间', field: 'accountcreatedate', sortable: true },
|
|
|
// { title: '到期时间', field: 'accountenddate' },
|
|
// { title: '到期时间', field: 'accountenddate' },
|
|
@@ -139,6 +150,46 @@ const [Modal, modalApi] = useVbenModal({
|
|
|
connectedComponent: AccountForm,
|
|
connectedComponent: AccountForm,
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+// 角色数据映射
|
|
|
|
|
+const roleMap = ref<Map<string, string>>(new Map());
|
|
|
|
|
+
|
|
|
|
|
+// 获取角色列表并创建ID到名称的映射
|
|
|
|
|
+async function fetchRoleList() {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const res = await getRoleListApi({
|
|
|
|
|
+ pageindex: 1,
|
|
|
|
|
+ rows: 1000,
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ if (res && res.Data) {
|
|
|
|
|
+ const map = new Map<string, string>();
|
|
|
|
|
+ res.Data.filter((item: RoleGroupEntity) => item.available === 1).forEach(
|
|
|
|
|
+ (item: RoleGroupEntity) => {
|
|
|
|
|
+ map.set(item.id.toString(), item.title);
|
|
|
|
|
+ },
|
|
|
|
|
+ );
|
|
|
|
|
+ roleMap.value = map;
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error('获取角色列表失败', error);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 将角色ID转换为角色名称
|
|
|
|
|
+function formatRoleNames(roleIds: string): string {
|
|
|
|
|
+ if (!roleIds) return '';
|
|
|
|
|
+
|
|
|
|
|
+ const ids = roleIds.split(',').filter(Boolean);
|
|
|
|
|
+ const names = ids.map((id) => roleMap.value.get(id) || id).filter(Boolean);
|
|
|
|
|
+
|
|
|
|
|
+ return names.join(', ');
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 初始化时获取角色列表
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ fetchRoleList();
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
/* 创建 */
|
|
/* 创建 */
|
|
|
function handleCreate() {
|
|
function handleCreate() {
|
|
|
modalApi.setState({ showCancelButton: true });
|
|
modalApi.setState({ showCancelButton: true });
|