From bc98ab3805ca89fa1bcdc3c3e4ecc3b265e1df5f Mon Sep 17 00:00:00 2001
From: fmm <1442620801@qq.com>
Date: Sat, 3 Aug 2024 18:33:38 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20vue=E6=96=B0=E5=A2=9E=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nestJs/src/role/dto/delete-role.dto.ts    |   6 -
 .../pro/template/tinyvue/src/api/menu.ts      |  19 +
 .../pro/template/tinyvue/src/api/role.ts      |  18 +-
 .../tinyvue/src/components/menu/index.vue     |  17 +-
 .../pro/template/tinyvue/src/locale/en-US.ts  |   5 +
 .../pro/template/tinyvue/src/locale/zh-CN.ts  |   5 +
 .../tinyvue/src/router/routes/modules/role.ts |  29 +
 .../permission/info/components/info-tab.vue   |   3 +-
 .../template/tinyvue/src/views/role/index.vue |   5 +
 .../views/role/info/components/info-tab.vue   | 497 ++++++++++++++++++
 .../tinyvue/src/views/role/info/index.vue     |  61 +++
 .../src/views/role/info/locale/en-US.ts       |  18 +
 .../src/views/role/info/locale/zh-CN.ts       |  18 +
 .../src/views/userManager/setting/index.vue   |   4 +-
 .../src/views/userManager/useradd/index.vue   |   4 +-
 15 files changed, 690 insertions(+), 19 deletions(-)
 delete mode 100644 packages/toolkits/pro/template/server/nestJs/src/role/dto/delete-role.dto.ts
 create mode 100644 packages/toolkits/pro/template/tinyvue/src/api/menu.ts
 create mode 100644 packages/toolkits/pro/template/tinyvue/src/router/routes/modules/role.ts
 create mode 100644 packages/toolkits/pro/template/tinyvue/src/views/role/index.vue
 create mode 100644 packages/toolkits/pro/template/tinyvue/src/views/role/info/components/info-tab.vue
 create mode 100644 packages/toolkits/pro/template/tinyvue/src/views/role/info/index.vue
 create mode 100644 packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/en-US.ts
 create mode 100644 packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/zh-CN.ts

diff --git a/packages/toolkits/pro/template/server/nestJs/src/role/dto/delete-role.dto.ts b/packages/toolkits/pro/template/server/nestJs/src/role/dto/delete-role.dto.ts
deleted file mode 100644
index a53480b0..00000000
--- a/packages/toolkits/pro/template/server/nestJs/src/role/dto/delete-role.dto.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { IsNotEmpty } from 'class-validator';
-
-export class DeleteRoleDto {
-  @IsNotEmpty()
-  name: string;
-}
diff --git a/packages/toolkits/pro/template/tinyvue/src/api/menu.ts b/packages/toolkits/pro/template/tinyvue/src/api/menu.ts
new file mode 100644
index 00000000..cc79c924
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/api/menu.ts
@@ -0,0 +1,19 @@
+import axios from "axios";
+
+
+
+export function getAllMenu() {
+  return axios.get('/api/menu');
+}
+
+export function updateMenu(data: any) {
+  return axios.patch(`/api/menu`, data);
+}
+
+export function deleteMenu(id: number) {
+  return axios.delete(`/api/menu/${id}`);
+}
+
+export function createMenu(data: any) {
+  return axios.post(`/api/menu`, data);
+}
diff --git a/packages/toolkits/pro/template/tinyvue/src/api/role.ts b/packages/toolkits/pro/template/tinyvue/src/api/role.ts
index 089039c5..6e57f754 100644
--- a/packages/toolkits/pro/template/tinyvue/src/api/role.ts
+++ b/packages/toolkits/pro/template/tinyvue/src/api/role.ts
@@ -2,6 +2,22 @@ import axios from "axios";
 
 
 
-export function getRoles() {
+export function getAllRole() {
   return axios.get('/api/role');
 }
+
+export function getAllRoleDetail() {
+  return axios.get('/api/role/detail');
+}
+
+export function updateRole(data: any) {
+  return axios.patch(`/api/role`, data);
+}
+
+export function deleteRole(id: number) {
+  return axios.delete(`/api/role/${id}`);
+}
+
+export function createRole(data: any) {
+  return axios.post(`/api/role`, data);
+}
diff --git a/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue b/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue
index b53081d4..a1597c6b 100644
--- a/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue
@@ -35,6 +35,7 @@
     IconApplication,
     IconGroup,
     IconFolderOpened,
+    IconActivation,
   } from '@opentiny/vue-icon';
   import { TreeMenu as tinyTreeMenu } from '@opentiny/vue';
   import router from '@/router';
@@ -52,6 +53,7 @@
   const iconApplication = IconApplication();
   const iconFolderOpened = IconFolderOpened();
   const iconGroup = IconGroup();
+  const iconActivation = IconActivation();
   const tree = ref();
   const expandeArr = ref();
   const routerTitle = [
@@ -230,17 +232,18 @@
       bold: 'title',
     },
     {
-      value: 'PermissionSetting',
-      name: 'menu.permission.setting',
-      icon: null,
-      bold: 'title',
+      value: 'Role',
+      name: 'menu.role',
+      icon: iconActivation,
+      bold: 'main-title',
     },
     {
-      value: 'PermissionAdd',
-      name: 'menu.permission.permissionAdd',
+      value: 'AllRole',
+      name: 'menu.role.info',
       icon: null,
       bold: 'title',
     },
+
   ];
 
   // 获取路由数据
@@ -311,6 +314,8 @@
       'User',
       'Cloud',
       'UserManager',
+      'Permission',
+      'Role'
     ];
     if (filter.indexOf(data.id) === -1) {
       router.push({ name: data.id });
diff --git a/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts b/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts
index 750d6e04..addd305d 100644
--- a/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts
+++ b/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts
@@ -32,6 +32,8 @@ import localeUserManagerUserAdd from '@/views/userManager/useradd/locale/en-US';
 
 import localePermission from '@/views/permission/info/locale/en-US';
 
+import localeRole from '@/views/role/info/locale/en-US';
+
 import localeSettings from './en-US/settings';
 
 import localeHttpError from './en-US/httpError';
@@ -56,6 +58,8 @@ export default {
   'menu.permission.info':'All Permission Info',
   'menu.permission.setting':'Permission Setting',
   'menu.permission.permissionAdd':'Add Permission',
+  'menu.role': 'Role Manager',
+  'menu.role.info':'All Role Info',
   'navbar.docs': 'Docs',
   'navbar.action.locale': 'Switch to English',
   'messageBox.switchRoles': 'Switch Roles',
@@ -86,4 +90,5 @@ export default {
   ...localeUserManagerSetting,
   ...localeUserManagerUserAdd,
   ...localePermission,
+  ...localeRole,
 };
diff --git a/packages/toolkits/pro/template/tinyvue/src/locale/zh-CN.ts b/packages/toolkits/pro/template/tinyvue/src/locale/zh-CN.ts
index 09ae2408..c00ab8cc 100644
--- a/packages/toolkits/pro/template/tinyvue/src/locale/zh-CN.ts
+++ b/packages/toolkits/pro/template/tinyvue/src/locale/zh-CN.ts
@@ -32,6 +32,8 @@ import localeUserManagerUserAdd from '@/views/userManager/useradd/locale/zh-CN';
 
 import localePermission from '@/views/permission/info/locale/zh-CN';
 
+import localeRole from '@/views/role/info/locale/zh-CN';
+
 import localeSettings from './zh-CN/settings';
 
 import localeHttpError from './zh-CN/httpError';
@@ -57,6 +59,8 @@ export default {
   'menu.permission.info':'查看权限',
   'menu.permission.setting':'修改权限',
   'menu.permission.permissionAdd':'添加权限',
+  'menu.role': '角色管理',
+  'menu.role.info':'查看角色',
   'navbar.docs': '文档中心',
   'navbar.action.locale': '切换为中文',
   'messageBox.switchRoles': '切换角色',
@@ -87,4 +91,5 @@ export default {
   ...localeUserManagerSetting,
   ...localeUserManagerUserAdd,
   ...localePermission,
+  ...localeRole,
 };
diff --git a/packages/toolkits/pro/template/tinyvue/src/router/routes/modules/role.ts b/packages/toolkits/pro/template/tinyvue/src/router/routes/modules/role.ts
new file mode 100644
index 00000000..d6e1f749
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/router/routes/modules/role.ts
@@ -0,0 +1,29 @@
+import { RoleType } from '@/types/roleType';
+
+export default {
+  path: 'role',
+  name: 'Role',
+  id: 'Role',
+  label: 'Role',
+  component: () => import('@/views/role/index.vue'),
+  meta: {
+    locale: 'menu.role',
+    requiresAuth: true,
+    order: 9,
+    roles: [RoleType.admin],
+  },
+  children: [
+    {
+      path: 'allRole',
+      name: 'AllRole',
+      id: 'AllRole',
+      label: 'AllRole',
+      component: () => import('@/views/role/info/index.vue'),
+      meta: {
+        locale: 'menu.role.info',
+        requiresAuth: true,
+        roles: [RoleType.admin],
+      },
+    },
+  ],
+};
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/permission/info/components/info-tab.vue b/packages/toolkits/pro/template/tinyvue/src/views/permission/info/components/info-tab.vue
index 88f53dfb..0f4ee9df 100644
--- a/packages/toolkits/pro/template/tinyvue/src/views/permission/info/components/info-tab.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/views/permission/info/components/info-tab.vue
@@ -2,7 +2,7 @@
   <div class="tiny-fullscreen-scroll">
     <div class="tiny-fullscreen-wrapper">
       <div class="permission-add-btn">
-        <tiny-button type="primary" @click="handleAddPermission">添加权限</tiny-button>
+        <tiny-button type="primary" @click="handleAddPermission">{{ $t('permissionInfo.modal.title.add') }}</tiny-button>
       </div>
       <div class="table">
         <tiny-grid ref="expandGrid"
@@ -291,7 +291,6 @@ function handleAddPermission() {
 async function handlePermissionAddSubmit() {
   let data = state.permissionAddData;
   let newTemp = {
-    id: data.id,
     name: data.name,
     desc: data.desc,
   };
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/role/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/role/index.vue
new file mode 100644
index 00000000..6c71efda
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/role/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <router-view />
+</template>
+
+<script lang="ts" setup></script>
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/role/info/components/info-tab.vue b/packages/toolkits/pro/template/tinyvue/src/views/role/info/components/info-tab.vue
new file mode 100644
index 00000000..600c885f
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/role/info/components/info-tab.vue
@@ -0,0 +1,497 @@
+<template>
+  <div class="tiny-fullscreen-scroll">
+    <div class="tiny-fullscreen-wrapper">
+      <div class="role-add-btn">
+        <tiny-button type="primary" @click="handleAddRole">{{ $t('roleInfo.modal.title.add') }}</tiny-button>
+      </div>
+      <div class="table">
+        <tiny-grid ref="expandGrid"
+                   :data="state.tableData"
+                   :auto-resize="true"
+        >
+          <tiny-grid-column type="index" width="60"></tiny-grid-column>
+          <tiny-grid-column type="expand" width="60">
+            <template #default="data">
+              <ul>
+                <li>
+                  <span>{{ $t('roleInfo.table.id') }}:</span>
+                  <span>{{ $t(`${data.row.id}`) }}</span>
+                </li>
+                <li>
+                  <span>{{ $t('roleInfo.table.name') }}:</span>
+                  <span>{{ $t(`${data.row.name}`) }}</span>
+                </li>
+                <li>
+                  <span>{{ $t('roleInfo.table.desc') }}:</span>
+                  <div v-for="item in data.row.permission" :key="item.id">
+                    <span>{{ $t('permissionInfo.table.id')}}:{{ $t(`${item.id}`) }}&nbsp;
+                        {{ $t('permissionInfo.table.name')}}:{{ $t(`${item.name}`) }}&nbsp;
+                        {{ $t('permissionInfo.table.desc')}}:{{ $t(`${item.desc}`) }}</span>
+                  </div>
+                </li>
+<!--                <li>-->
+<!--                  <div v-for="item in data.row.menus" :key="item.id">-->
+<!--                <span>{{ $t('permissionInfo.table.id')}}:{{ $t(`${item.id}`) }}&nbsp;-->
+<!--                      {{ $t('permissionInfo.table.name')}}:{{ $t(`${item.name}`) }}&nbsp;-->
+<!--                      {{ $t('permissionInfo.table.desc')}}:{{ $t(`${item.desc}`) }}</span>-->
+<!--                  </div>-->
+<!--                </li>-->
+              </ul>
+            </template>
+          </tiny-grid-column>
+          <tiny-grid-column
+            field="name"
+            :title="$t('roleInfo.table.id')"
+          >
+            <template #default="data">
+              <span>{{ $t(`${data.row.id}`) }}</span>
+            </template>
+          </tiny-grid-column>
+          <tiny-grid-column
+            field="time"
+            :title="$t('roleInfo.table.name')"
+          >
+            <template #default="data">
+              <span>{{ $t(`${data.row.name}`) }}</span>
+            </template>
+          </tiny-grid-column>
+          <tiny-grid-column field="type" :title="$t('roleInfo.table.desc')">
+            <template #default="data">
+              <span v-if="data.row.permission">
+                {{ $t('permissionInfo.table.id')}}:{{ $t(`${data.row.permission[0].id}`) }}&nbsp;
+                {{ $t('permissionInfo.table.name')}}:{{ $t(`${data.row.permission[0].name}`) }}&nbsp;
+                {{ $t('permissionInfo.table.desc')}}:{{ $t(`${data.row.permission[0].desc}`) }}
+              </span>
+            </template>
+          </tiny-grid-column>
+<!--          <tiny-grid-column field="type" :title="$t('roleInfo.table.menu')">-->
+<!--            <template #default="data">-->
+<!--              <span v-if="data.row.menus">-->
+<!--                {{ $t('menuInfo.table.id')}}:{{ $t(`${data.row.menus[0].id}`) }}&nbsp;-->
+<!--                {{ $t('menuInfo.table.name')}}:{{ $t(`${data.row.menus[0].name}`) }}&nbsp;-->
+<!--                {{ $t('menuInfo.table.desc')}}:{{ $t(`${data.row.menus[0].desc}`) }}-->
+<!--              </span>-->
+<!--            </template>-->
+<!--          </tiny-grid-column>-->
+          <tiny-grid-column
+            :title="$t('roleInfo.table.operations')"
+            align="center"
+          >
+            <template v-slot="data">
+              <a class="operation-update" @click="handleUpdate(data.row.id)">
+                {{ $t('roleInfo.table.operations.update') }}
+              </a>
+              <a class="operation-delete" @click="handleDelete(data.row.id)">
+                {{ $t('roleInfo.table.operations.delete') }}
+              </a>
+            </template>
+          </tiny-grid-column>
+        </tiny-grid>
+      </div>
+    </div>
+  </div>
+  <div v-if="state.isRoleUpdate">
+    <tiny-modal
+      v-model="state.isRoleUpdate"
+      :lock-scroll="true"
+      show-header
+      show-footer
+      mask-closable="true"
+      height="350"
+      width="600"
+      :title="$t('roleInfo.modal.title.update')"
+    >
+      <template #default>
+        <tiny-layout>
+          <tiny-form
+            :model="state.roleUpdData"
+            :rules="rules"
+            label-width="150px"
+            :label-align="true"
+            label-position="left"
+            size="small"
+          >
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.id')"
+                >
+                  <label>{{ state.roleUpdData.id }}</label>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.name')"
+                  prop="name"
+                >
+                  <tiny-input v-model="state.roleUpdData.name"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.desc')"
+                  prop="desc"
+                >
+                  <tiny-base-select
+                    v-model="state.roleUpdData.desc"
+                    :placeholder="$t('baseForm.form.label.placeholder')"
+                    multiple
+                  >
+                    <tiny-option
+                      v-for="item in (state.permissionData as any)"
+                      :key="item.id"
+                      :label="$t(item.name)"
+                      :value="item.id"
+                    ></tiny-option>
+                  </tiny-base-select>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.menu')"
+                  prop="menu"
+                >
+                  <tiny-base-select
+                    v-model="state.roleUpdData.menu"
+                    :placeholder="$t('baseForm.form.label.placeholder')"
+                    multiple
+                  >
+                    <tiny-option
+                      v-for="item in (state.menuData as any)"
+                      :key="item.id"
+                      :label="$t(item.name)"
+                      :value="item.id"
+                    ></tiny-option>
+                  </tiny-base-select>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+          </tiny-form>
+        </tiny-layout>
+      </template>
+      <template #footer>
+        <tiny-button type="primary" @click="handleRoleUpdateSubmit">确定</tiny-button>
+        <tiny-button @click="handleRoleUpdateCancel">取消</tiny-button>
+      </template>
+    </tiny-modal>
+  </div>
+  <div v-if="state.isRoleAdd">
+    <tiny-modal
+      v-model="state.isRoleAdd"
+      :lock-scroll="true"
+      show-header
+      show-footer
+      mask-closable="true"
+      height="350"
+      width="600"
+      :title="$t('roleInfo.modal.title.add')"
+    >
+      <template #default>
+        <tiny-layout>
+          <tiny-form
+            :model="state.roleAddData"
+            :rules="rules"
+            label-width="150px"
+            :label-align="true"
+            label-position="left"
+            size="small"
+          >
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.name')"
+                  prop="name"
+                >
+                  <tiny-input v-model="state.roleAddData.name"></tiny-input>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.desc')"
+                  prop="desc"
+                >
+                  <tiny-base-select
+                    v-model="state.roleAddData.desc"
+                    :placeholder="$t('baseForm.form.label.placeholder')"
+                    multiple
+                  >
+                    <tiny-option
+                      v-for="item in (state.permissionData as any)"
+                      :key="item.id"
+                      :label="$t(item.name)"
+                      :value="item.id"
+                    ></tiny-option>
+                  </tiny-base-select>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+
+            <tiny-row :flex="true" justify="left">
+              <tiny-col :span="10" label-width="100px">
+                <tiny-form-item
+                  :label="$t('roleInfo.modal.input.menu')"
+                  prop="menu"
+                >
+                  <tiny-base-select
+                    v-model="state.roleAddData.menu"
+                    :placeholder="$t('baseForm.form.label.placeholder')"
+                    multiple
+                  >
+                    <tiny-option
+                      v-for="item in (state.menuData as any)"
+                      :key="item.id"
+                      :label="$t(item.name)"
+                      :value="item.id"
+                    ></tiny-option>
+                  </tiny-base-select>
+                </tiny-form-item>
+              </tiny-col>
+            </tiny-row>
+          </tiny-form>
+        </tiny-layout>
+      </template>
+      <template #footer>
+        <tiny-button type="primary" @click="handleRoleAddSubmit">确定</tiny-button>
+        <tiny-button @click="handleRoleAddCancel">取消</tiny-button>
+      </template>
+    </tiny-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, reactive, onMounted, watch, computed} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {
+  Tabs as TinyTabs,
+  TabItem as TinyTabItem,
+  Loading,
+  GridColumn as TinyGridColumn,
+  Grid as TinyGrid, Pager as TinyPager, Modal as TinyModal,
+  Button as TinyButton,
+  Form as TinyForm,
+  FormItem as TinyFormItem,
+  Row as TinyRow,
+  Col as TinyCol,
+  Input as TinyInput, Modal,
+  BaseSelect as TinyBaseSelect,
+  Select as TinySelect,
+  Option as TinyOption,
+} from '@opentiny/vue';
+import {IconChevronDown} from '@opentiny/vue-icon';
+import {useUserStore} from '@/store';
+import {getAllRoleDetail, updateRole ,createRole, deleteRole} from '@/api/role';
+import {getAllPermission} from "@/api/permission";
+import {getAllMenu} from "@/api/menu";
+import { useRouter } from 'vue-router';
+import {getSimpleDate} from "@/utils/time";
+import {updateUserInfo} from "@/api/user";
+
+const router = useRouter();
+
+const {t} = useI18n();
+
+// 加载效果
+const state = reactive<{
+  tableData: any;
+  permissionData: any;
+  menuData:  any;
+  roleUpdData: any;
+  roleAddData: any;
+  isRoleUpdate: boolean;
+  isRoleAdd: boolean;
+}>({
+  tableData: [] as any,
+  permissionData: [] as any,
+  menuData: {} as any,
+  roleUpdData: {} as any,
+  roleAddData: {} as any,
+  isRoleAdd: false,
+  isRoleUpdate: false,
+});
+
+// 变量设置
+const userStore = useUserStore();
+
+// 校验规则
+const rulesType = {
+  required: true,
+  trigger: 'blur',
+};
+const rulesSelect = {
+  required: true,
+  message: '必选',
+  trigger: 'blur',
+};
+const rules = computed(() => {
+  return {
+    name: [rulesType],
+    desc: [rulesSelect],
+    menu: [rulesSelect]
+  };
+});
+
+// 初始化请求数据
+onMounted(() => {
+  fetchRoleData();
+  fetchPermissionData();
+  fetchMenuData();
+});
+
+// 请求数据接口方法
+async function fetchRoleData() {
+  const {data} = await getAllRoleDetail();
+  state.tableData = data;
+};
+
+async function fetchPermissionData() {
+  const {data} = await getAllPermission();
+  state.permissionData = data;
+  console.log(state.permissionData)
+};
+
+async function fetchMenuData() {
+  const {data} = await getAllMenu();
+  state.menuData = data;
+
+};
+
+async function handleDelete (id: string){
+  try {
+    await deleteRole(id);
+    TinyModal.message({
+      message: '已删除',
+      status: 'success',
+    });
+    state.isRoleUpdate = false;
+    state.roleUpdData = {} as any;
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const errorMessage = error.response.data.message || '未知错误';
+      Modal.message({
+        message: errorMessage,
+        status: 'error',
+      });
+    }
+  }
+}
+
+const handleUpdate = (id: string) => {
+  state.isRoleUpdate = true;
+  state.roleUpdData = state.tableData[id - 1];
+}
+
+const handleRoleUpdateCancel =()=>{
+  state.isRoleUpdate = false;
+  state.roleUpdData = {} as any;
+}
+
+async function handleRoleUpdateSubmit(){
+  let data = state.roleUpdData;
+  let newTemp = {
+    id: data.id,
+    name: data.name,
+    permissionIds: data.desc,
+    menuIds:data.menu,
+  };
+  try {
+    await updateRole(newTemp);
+    Modal.message({
+      message: t('baseForm.form.submit.success'),
+      status: 'success',
+    });
+    state.isRoleUpdate = false;
+    state.roleUpdData = {} as any;
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const errorMessage = error.response.data.message || '未知错误';
+      Modal.message({
+        message: errorMessage,
+        status: 'error',
+      });
+    }
+  }
+}
+
+function handleAddRole() {
+  state.isRoleAdd = true;
+}
+
+async function handleRoleAddSubmit() {
+  let data = state.roleAddData;
+  let newTemp = {
+    name: data.name,
+    permissionIds: data.desc,
+    menuIds:data.menu,
+  };
+  try {
+    await createRole(newTemp);
+    Modal.message({
+      message: t('baseForm.form.submit.success'),
+      status: 'success',
+    });
+    state.isRoleAdd = false;
+    state.roleAddData = {} as any;
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const errorMessage = error.response.data.message || '未知错误';
+      Modal.message({
+        message: errorMessage,
+        status: 'error',
+      });
+    }
+  }
+}
+
+async function handleRoleAddCancel() {
+  state.isRoleAdd = false;
+  state.roleAddData = {} as any;
+}
+
+</script>
+
+<style scoped lang="less">
+#contain {
+  height: 100%;
+  padding: 15px;
+  overflow: hidden;
+}
+
+.role-add-btn{
+  padding: 10px 0 10px 10px;
+}
+
+.table {
+  padding-bottom: 20px;
+  background-color: #fff;
+}
+
+.operation {
+
+  &-delete {
+    padding-right: 5px;
+    color: red;
+  }
+
+  &-update {
+    padding-right: 5px;
+    color: #1890ff;
+  }
+
+  &-pwd-update {
+    color: orange;
+  }
+}
+
+
+</style>
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/role/info/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/role/info/index.vue
new file mode 100644
index 00000000..5ceec97d
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/role/info/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['menu.role', 'menu.role.info']" />
+    <div class="container-info">
+      <div class="general-card">
+        <div class="general-content">
+          <info-tab></info-tab>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import infoTab from './components/info-tab.vue';
+</script>
+
+<style scoped lang="less">
+  .container {
+    width: 100%;
+    height: 100%;
+  }
+  .container-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: calc(100% - 60px);
+    margin: 0 auto;
+
+    .general-card {
+      flex: 1 1 auto;
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+      border-radius: 10px;
+
+      .general-top {
+        display: flex;
+        min-height: 178px;
+        margin-bottom: 20px;
+        overflow: hidden;
+        background-image: url('@/assets/images/blue-bg.png');
+        background-size: 100% 100%;
+        border-radius: 4px;
+        box-shadow: 0 0 8px 8px rgba(169, 174, 184, 0.05);
+      }
+
+      .general-content {
+        height: calc(100% - 198px);
+        position: relative;
+        color: black;
+        font-size: medium;
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 0 8px 8px rgba(169, 174, 184, 0.05);
+        overflow-y: auto;
+      }
+    }
+  }
+</style>
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/en-US.ts b/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/en-US.ts
new file mode 100644
index 00000000..c5e62c6d
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/en-US.ts
@@ -0,0 +1,18 @@
+export default {
+  'menu.allRole.info': 'All Role Info',
+  'roleInfo.table.id': 'ID',
+  'roleInfo.table.name': 'Name',
+  'roleInfo.table.desc': 'Desc',
+  'roleInfo.table.menu': 'Menu',
+  'roleInfo.table.operations': 'Operation',
+  'roleInfo.table.operations.update': 'Update',
+  'roleInfo.table.operations.delete': 'Delete',
+  'roleInfo.modal.title.update': 'Update Role',
+  'roleInfo.modal.title.add': 'Add Role',
+  'roleInfo.modal.input.id': 'ID',
+  'roleInfo.modal.input.name': 'Name',
+  'roleInfo.modal.input.desc': 'Desc',
+  'roleInfo.modal.input.menu': 'Menu',
+  'roleInfo.modal.message.error': 'Error',
+  'roleInfo.modal.message.notNull': 'Not Null',
+};
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/zh-CN.ts b/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/zh-CN.ts
new file mode 100644
index 00000000..9c48c5e1
--- /dev/null
+++ b/packages/toolkits/pro/template/tinyvue/src/views/role/info/locale/zh-CN.ts
@@ -0,0 +1,18 @@
+export default {
+  'menu.allRole.info': '查看权限',
+  'roleInfo.table.id': 'ID',
+  'roleInfo.table.name': '名称',
+  'roleInfo.table.desc': '权限',
+  'roleInfo.table.menu': '菜单',
+  'roleInfo.table.operations': '操作',
+  'roleInfo.table.operations.update': '修改',
+  'roleInfo.table.operations.delete': '删除',
+  'roleInfo.modal.title.update': '修改角色',
+  'roleInfo.modal.title.add': '添加角色',
+  'roleInfo.modal.input.id': 'ID',
+  'roleInfo.modal.input.name': '名称',
+  'roleInfo.modal.input.desc': '权限',
+  'roleInfo.modal.input.menu': '菜单',
+  'roleInfo.modal.message.error': '错误',
+  'roleInfo.modal.message.notNull': '不能为空',
+};
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/userManager/setting/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/userManager/setting/index.vue
index 4286f560..fff3f3f2 100644
--- a/packages/toolkits/pro/template/tinyvue/src/views/userManager/setting/index.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/views/userManager/setting/index.vue
@@ -169,7 +169,7 @@ import {
 import {getSimpleDate} from '@/utils/time';
 import {useRoute, useRouter} from 'vue-router';
 import {getAllUser, getUserInfo, updateUserInfo} from '@/api/user'
-import {getRoles} from '@/api/role'
+import {getAllRole} from '@/api/role'
 
 import headtop from './components/head.vue';
 import setFrom from './components/set-from.vue';
@@ -307,7 +307,7 @@ async function fetchData() {
 }
 
 async function fetchRole(){
-  const {data} = await getRoles();
+  const {data} = await getAllRole();
   state.roleData = data;
 }
 
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/userManager/useradd/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/userManager/useradd/index.vue
index 98b0c394..4561fc74 100644
--- a/packages/toolkits/pro/template/tinyvue/src/views/userManager/useradd/index.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/views/userManager/useradd/index.vue
@@ -180,7 +180,7 @@ import {
 import {getSimpleDate} from '@/utils/time';
 import {useRoute, useRouter} from 'vue-router';
 import {getUserInfo, registerUser, updateUserInfo} from '@/api/user'
-import {getRoles} from '@/api/role'
+import {getAllRole} from '@/api/role'
 
 
 const route = useRoute();
@@ -295,7 +295,7 @@ async function handleSubmit() {
 }
 
 async function fetchRole(){
-  const {data} = await getRoles();
+  const {data} = await getAllRole();
   state.roleData = data;
 }
 

From e072394981878d5233f6e2e04be74a9cb479fd08 Mon Sep 17 00:00:00 2001
From: fmm <1442620801@qq.com>
Date: Sat, 3 Aug 2024 18:34:57 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20nest=E8=A7=92=E8=89=B2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=8E=A5=E5=8F=A3=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../server/nestJs/src/role/role.controller.ts     | 13 +++++++++----
 .../server/nestJs/src/role/role.service.ts        | 15 +++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/toolkits/pro/template/server/nestJs/src/role/role.controller.ts b/packages/toolkits/pro/template/server/nestJs/src/role/role.controller.ts
index b65bd3e4..0b1dd3db 100644
--- a/packages/toolkits/pro/template/server/nestJs/src/role/role.controller.ts
+++ b/packages/toolkits/pro/template/server/nestJs/src/role/role.controller.ts
@@ -10,7 +10,6 @@ import {
 import { RoleService } from './role.service';
 import { CreateRoleDto } from './dto/create-role.dto';
 import { UpdateRoleDto } from './dto/update-role.dto';
-import { DeleteRoleDto } from './dto/delete-role.dto';
 import { Permission } from '../public/permission.decorator';
 
 @Controller('role')
@@ -29,16 +28,22 @@ export class RoleController {
     return this.roleService.findAll();
   }
 
+  @Permission('role::get')
+  @Get('/detail')
+  getAllRoleDetail() {
+    return this.roleService.findAllDetail();
+  }
+
   @Patch()
   @Permission('role::update')
   updateRole(@Body() dto: UpdateRoleDto) {
     return this.roleService.update(dto);
   }
 
-  @Delete()
+  @Delete('/:id')
   @Permission('role::remove')
-  deleteRole(@Body() dto: DeleteRoleDto) {
-    return this.roleService.delete(dto);
+  deleteRole(@Param('id') id: number) {
+    return this.roleService.delete(id);
   }
 
   @Permission('role::get')
diff --git a/packages/toolkits/pro/template/server/nestJs/src/role/role.service.ts b/packages/toolkits/pro/template/server/nestJs/src/role/role.service.ts
index 564c17b9..3adb5baf 100644
--- a/packages/toolkits/pro/template/server/nestJs/src/role/role.service.ts
+++ b/packages/toolkits/pro/template/server/nestJs/src/role/role.service.ts
@@ -1,7 +1,6 @@
 import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
 import { CreateRoleDto } from './dto/create-role.dto';
 import { UpdateRoleDto } from './dto/update-role.dto';
-import { DeleteRoleDto } from './dto/delete-role.dto';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Menu, Permission, Role } from '@app/models';
 import { DataSource, In, Repository } from 'typeorm';
@@ -42,7 +41,15 @@ export class RoleService {
     return this.role.save({ name, permission: permissions, menus });
   }
   findAll() {
-    return this.role.find();
+    return this.role.find()
+  }
+
+  findAllDetail(){
+    return this.role
+      .createQueryBuilder('role')
+      .leftJoinAndSelect('role.menus','menus')
+      .leftJoinAndSelect('role.permission','permission')
+      .getMany();
   }
 
   async findOne(id: string) {
@@ -83,10 +90,10 @@ export class RoleService {
     role.menus = menus.length ? menus : undefined;
     return this.role.save(role);
   }
-  async delete(data: DeleteRoleDto) {
+  async delete(id: number) {
     const role = await this.role.find({
       where: {
-        name: data.name,
+        id: id,
       },
     });
     return this.role.remove(role);