fix: 调整接口名称；增加角色管理

src/api/interface/system/config.ts

@@ -5,14 +5,14 @@ export interface ConfigQuery extends PageQuery {
   name?: string
   configKey?: string
   configValue?: string
-  status?: number
+  status?: string
 }
 
 /**
  * 接收后端返回信息
  */
 export interface ConfigVO extends BaseEntity {
-  configId: number | string
+  configId: string
   name: string
   configKey: string
   isLock: string
@@ -25,8 +25,8 @@ export interface ConfigVO extends BaseEntity {
 /**
  * 传入后端的表单信息
  */
-export interface ConfigBo {
-  configId: number | string
+export interface ConfigBO {
+  configId: string
   name: string
   configKey: string
   configValue: string

src/api/interface/system/dict.ts

@@ -4,15 +4,15 @@
 export interface DictQuery extends PageQuery {
   dictLabel?: string
   parentId?: string
-  status?: number
+  status?: string
 }
 
 /**
  * 接收后端返回信息
  */
 export interface DictVO extends BaseEntity {
-  dictId: number | string
-  parentId: number | string
+  dictId: string
+  parentId: string
   dictLabel: string
   dictValue: string
   category: string
@@ -25,9 +25,9 @@ export interface DictVO extends BaseEntity {
 /**
  * 传入后端的表单信息
  */
-export interface DictBo {
-  dictId: number | string
-  parentId: number | string
+export interface DictBO {
+  dictId: string
+  parentId: string
   dictLabel: string
   dictValue: string
   category: string
@@ -41,8 +41,8 @@ export interface DictBo {
  * 接收后端返回树信息
  */
 export interface DictTreeVO extends BaseEntity {
-  dictId: number | string
-  parentId: number | string
+  dictId: string
+  parentId: string
   dictLabel: string
   dictValue?: string
   category?: string

src/api/interface/system/org.ts

@@ -4,16 +4,16 @@
 export interface OrgQuery extends PageQuery {
   name?: string
   parentId?: string
-  status?: number
+  status?: string
 }
 
 /**
  * 组织类型
  */
 export interface OrgVO extends BaseEntity {
-  orgId: number | string
+  orgId: string
   parentName: string
-  parentId: number | string
+  parentId: string
   name: string
   orderNum: number
   leader: string
@@ -30,9 +30,9 @@ export interface OrgVO extends BaseEntity {
  */
 export interface OrgTreeVO extends BaseEntity {
   id?: number | string
-  orgId: number | string
+  orgId: string
   parentName?: string
-  parentId: number | string
+  parentId: string
   children: OrgTreeVO[]
   name: string
   orderNum?: number
@@ -46,10 +46,10 @@ export interface OrgTreeVO extends BaseEntity {
 /**
  * 组织表单类型
  */
-export interface OrgFormBo {
-  orgId: number | string
+export interface OrgBO {
+  orgId: string
   parentName: string
-  parentId: number | string
+  parentId: string
   name: string
   orderNum: number
   leader: string

src/api/interface/system/position.ts

@@ -3,15 +3,15 @@
  */
 export interface PositionQuery extends PageQuery {
   name?: string
-  status?: number
+  status?: string
 }
 
 /**
  * 接收后端返回信息
  */
 export interface PositionVO extends BaseEntity {
-  positionId: number | string
-  orgId: number | string
+  positionId: string
+  orgId: string
   name: string
   category: string
   orderNum: number
@@ -22,8 +22,8 @@ export interface PositionVO extends BaseEntity {
  * 传入后端的表单信息
  */
 export interface PositionBO {
-  positionId: number | string
-  orgId: number | string
+  positionId: string
+  orgId: string
   name: string
   category: string
   orderNum: number

src/api/interface/system/role.ts

@@ -1,37 +1,36 @@
+/**
+ * 查询参数
+ */
 export type RoleQuery = PageQuery & {
   roleName?: string
+  status?: string
 }
 
-export type RoleForm = {
-  id?: number
-  roleName: string
-  remark: string
+/**
+ * 接收后端返回信息
+ */
+export interface RoleVO extends BaseEntity {
+  roleId: string
+  orgId?: string
+  name: string
+  code: string
+  isLock: string
+  category: string
+  orderNum: number
+  remark?: string
 }
 
-export type RoleInfo = {
-  id: number
-  roleName: string
-  remark: string
-  delFlag: string
-  createTime: string
-  updateTime: string
-  isLock?: string
-  permissions?: string
-}
-
-export type RoleMenu = {
-  menuLists: RoleMenuTree[]
-  selectIds: string[]
-}
-
-export type RoleMenuTree = {
-  id: string
-  pid: string
-  title: string
-  children: RoleMenuTree[]
-}
-
-export type RoleMenuForm = {
-  menuIds: string[]
-  roleId: number
+/**
+ * 传入后端的表单信息
+ */
+export interface RoleBO {
+  roleId: string
+  orgId?: string
+  name: string
+  code: string
+  isLock: string
+  category: string
+  orderNum: number
+  remark?: string
+  status?: string
 }

src/api/interface/system/user.ts

@@ -14,7 +14,7 @@ export interface UserQuery extends PageQuery {
   account?: string
   userName?: string
   nickName?: string
-  status?: number
+  status?: string
 }
 
 /**

src/api/module/system/config.ts

@@ -1,5 +1,5 @@
 import http from '@/axios'
-import { ConfigBo, ConfigQuery, ConfigVO } from '@/api/interface/system/config'
+import { ConfigBO, ConfigQuery, ConfigVO } from '@/api/interface/system/config'
 
 class ConfigApi {
   /**
@@ -14,7 +14,7 @@ class ConfigApi {
    * @name 查询列表
    * @returns returns
    */
-  static list = (params: ConfigBo): Promise<ResultData<any>> => {
+  static list = (params: ConfigBO): Promise<ResultData<any>> => {
     return http.get<ConfigVO>({ url: '/system/config/list', params })
   }
 
@@ -22,14 +22,14 @@ class ConfigApi {
    * @name 添加
    * @returns returns
    */
-  static add = (data: ConfigBo): Promise<ResultData<any>> => {
+  static add = (data: ConfigBO): Promise<ResultData<any>> => {
     return http.post({ url: '/system/config/add', data })
   }
   /**
    * @name 更新
    * @returns returns
    */
-  static edit = (data: ConfigBo): Promise<ResultData<any>> => {
+  static edit = (data: ConfigBO): Promise<ResultData<any>> => {
     return http.post({ url: '/system/config/edit', data })
   }
 

src/api/module/system/dict.ts

@@ -1,5 +1,5 @@
 import http from '@/axios'
-import { DictBo, DictQuery, DictTreeVO, DictVO } from '@/api/interface/system/dict'
+import { DictBO, DictQuery, DictTreeVO, DictVO } from '@/api/interface/system/dict'
 
 class DictApi {
   /**
@@ -22,7 +22,7 @@ class DictApi {
    * @name 查询列表
    * @returns returns
    */
-  static list = (params: DictBo): Promise<ResultData<any>> => {
+  static list = (params: DictBO): Promise<ResultData<any>> => {
     return http.get<DictVO>({ url: '/system/dict/list', params })
   }
 
@@ -38,14 +38,14 @@ class DictApi {
    * @name 添加
    * @returns returns
    */
-  static add = (data: DictBo): Promise<ResultData<any>> => {
+  static add = (data: DictBO): Promise<ResultData<any>> => {
     return http.post({ url: '/system/dict/add', data })
   }
   /**
    * @name 更新
    * @returns returns
    */
-  static edit = (data: DictBo): Promise<ResultData<any>> => {
+  static edit = (data: DictBO): Promise<ResultData<any>> => {
     return http.post({ url: '/system/dict/edit', data })
   }
 
@@ -53,7 +53,7 @@ class DictApi {
    * @name 更新
    * @returns returns
    */
-  static delete = (data: DictBo): Promise<ResultData<any>> => {
+  static delete = (data: DictBO): Promise<ResultData<any>> => {
     return http.delete({ url: '/system/dict/delete', data })
   }
 }

src/api/module/system/role.ts

@@ -1,4 +1,4 @@
-import { RoleInfo, RoleQuery } from '@/api/interface/system/role'
+import { RoleVO, RoleQuery, RoleBO } from '@/api/interface/system/role'
 import http from '@/axios'
 
 class RoleApi {
@@ -8,7 +8,38 @@ class RoleApi {
    * @returns {*}
    */
   static page = (params: RoleQuery): Promise<ResultData<any>> => {
-    return http.get<ResPage<RoleInfo>>({ url: '/system/role/page', params })
+    return http.get<ResPage<RoleVO>>({ url: '/system/role/page', params })
+  }
+
+  /**
+   * @name 查询列表
+   * @returns returns
+   */
+  static list = (params: RoleBO): Promise<ResultData<any>> => {
+    return http.get<RoleVO>({ url: '/system/role/list', params })
+  }
+
+  /**
+   * @name 添加
+   * @returns returns
+   */
+  static add = (data: RoleBO): Promise<ResultData<any>> => {
+    return http.post({ url: '/system/role/add', data })
+  }
+  /**
+   * @name 更新
+   * @returns returns
+   */
+  static edit = (data: RoleBO): Promise<ResultData<any>> => {
+    return http.post({ url: '/system/role/edit', data })
+  }
+
+  /**
+   * @name 删除
+   * @returns returns
+   */
+  static delete = (data: string[]): Promise<ResultData<any>> => {
+    return http.delete({ url: '/system/role/delete', data })
   }
 }
 export default RoleApi

src/types/auto-components.d.ts

@@ -75,6 +75,7 @@ declare module 'vue' {
     Pagination: typeof import('./../components/ProTable/Pagination.vue')['default']
     PositionDrawer: typeof import('./../views/system/position/components/PositionDrawer.vue')['default']
     ProTable: typeof import('./../components/ProTable/index.vue')['default']
+    RoleDrawer: typeof import('./../views/system/role/components/RoleDrawer.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchForm: typeof import('./../components/SearchForm/index.vue')['default']

src/views/system/config/components/ConfigDrawer.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts" name="ConfigForm">
-import { ConfigBo } from '@/api/interface/system/config'
+import { ConfigBO } from '@/api/interface/system/config'
 import { ResultEnum } from '@/enums/HttpEnum'
 import { useDictOptions } from '@/hooks'
 
@@ -62,7 +62,7 @@ interface EcoDrawerProps {
   api?: (params: any) => Promise<any> // 调用接口
   title: string // 顶部标题
   isView: boolean
-  row: Partial<ConfigBo>
+  row: Partial<ConfigBO>
   getTableList?: () => void
 }
 

src/views/system/config/index.vue

@@ -27,7 +27,7 @@ import ConfigApi from '@/api/module/system/config'
 import ConfigDrawer from './components/ConfigDrawer.vue'
 import { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface'
 import { useDictOptions, useHandleData } from '@/hooks'
-import { ConfigBo, ConfigQuery, ConfigVO } from '@/api/interface/system/config'
+import { ConfigBO, ConfigQuery, ConfigVO } from '@/api/interface/system/config'
 
 const proTableRef = ref<ProTableInstance>()
 
@@ -77,7 +77,7 @@ const batchDelete = async (ids: (string | number)[]) => {
 
 // 打开 drawer(新增、查看、编辑)
 const drawerRef = ref<InstanceType<typeof ConfigDrawer> | null>(null)
-const openDrawer = (title: string, row: Partial<ConfigBo> = {}) => {
+const openDrawer = (title: string, row: Partial<ConfigBO> = {}) => {
   const params = {
     title,
     row: { ...row },

src/views/system/dict/components/DictDrawer.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts" name="OrgForm">
-import { DictBo, DictTreeVO } from '@/api/interface/system/dict'
+import { DictBO, DictTreeVO } from '@/api/interface/system/dict'
 import DictApi from '@/api/module/system/dict'
 import { ResultEnum } from '@/enums/HttpEnum'
 import { useDictOptions } from '@/hooks'
@@ -89,7 +89,7 @@ interface EcoDrawerProps {
   api?: (params: any) => Promise<any> // 调用接口
   title: string // 顶部标题
   isView: boolean
-  row: Partial<DictBo>
+  row: Partial<DictBO>
   getTableList?: () => void
 }
 

src/views/system/dict/index.vue

@@ -42,7 +42,7 @@ import DictDrawer from './components/DictDrawer.vue'
 import TreeFilter from '@/components/TreeFilter/index.vue'
 import { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface'
 import { useDictOptions, useHandleData } from '@/hooks'
-import { DictBo, DictQuery, DictVO } from '@/api/interface/system/dict'
+import { DictBO, DictQuery, DictVO } from '@/api/interface/system/dict'
 const initParam = reactive({ dictId: '', parentId: '' })
 
 const selectTreeId = ref<string>('')
@@ -112,7 +112,7 @@ const batchDelete = async (ids: (string | number)[]) => {
 
 // 打开 drawer(新增、查看、编辑)
 const drawerRef = ref<InstanceType<typeof DictDrawer> | null>(null)
-const openDrawer = (title: string, row: Partial<DictBo> = {}) => {
+const openDrawer = (title: string, row: Partial<DictBO> = {}) => {
   const params = {
     title,
     row: title === '新增' ? { parentId: selectTreeId.value } : { ...row },

src/views/system/org/components/OrgDrawer.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script setup lang="ts" name="OrgForm">
-import { OrgTreeVO, OrgFormBo } from '@/api/interface/system/org'
+import { OrgTreeVO, OrgBO } from '@/api/interface/system/org'
 import OrgApi from '@/api/module/system/org'
 import { ResultEnum } from '@/enums/HttpEnum'
 import { FormInstance } from 'element-plus'
@@ -69,7 +69,7 @@ interface EcoDrawerProps {
   api?: (params: any) => Promise<any> // 调用接口
   title: string // 顶部标题
   isView: boolean
-  row: Partial<OrgFormBo>
+  row: Partial<OrgBO>
   getTableList?: () => void
 }
 

src/views/system/org/index.vue

@@ -32,7 +32,7 @@ import OrgApi from '@/api/module/system/org'
 import OrgDrawer from './components/OrgDrawer.vue'
 import TreeFilter from '@/components/TreeFilter/index.vue'
 import { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface'
-import { OrgFormBo } from '@/api/interface/system/org'
+import { OrgBO } from '@/api/interface/system/org'
 const initParam = reactive({ orgId: '', parentId: '' })
 
 const selectTreeId = ref<string>('')
@@ -73,7 +73,7 @@ const getTableList = (params: RoleQuery) => OrgApi.page(params)
 
 // 打开 drawer(新增、查看、编辑)
 const drawerRef = ref<InstanceType<typeof OrgDrawer> | null>(null)
-const openDrawer = (title: string, row: Partial<OrgFormBo> = {}) => {
+const openDrawer = (title: string, row: Partial<OrgBO> = {}) => {
   const params = {
     title,
     row: row ? { ...row } : { parentId: selectTreeId.value },

src/views/system/role/components/RoleDrawer.vue

@@ -0,0 +1,106 @@
+<template>
+  <ElDrawer ref="elDrawerRef" v-model="drawerVisible" :title="drawerProps.title" v-bind="$attrs" destroy-on-close>
+    <template #header="scope">
+      <slot name="header" v-bind="scope">
+        <div style="display: flex">
+          <slot name="title">
+            <span style="flex: 1">{{ drawerProps.title }}</span>
+          </slot>
+        </div>
+      </slot>
+    </template>
+
+    <el-form ref="ruleFormRef" label-width="100px" label-suffix=" :" :rules="rules" :model="drawerProps.row" @submit.enter.prevent="handleConfirm">
+      <el-form-item label="参数名称" prop="name">
+        <el-input v-model="drawerProps.row.name" placeholder="填写参数名称" clearable />
+      </el-form-item>
+      <el-form-item label="权限标识" prop="code">
+        <el-input v-model="drawerProps.row.code" placeholder="填写权限标识" clearable />
+      </el-form-item>
+      <el-form-item label="排序" prop="orderNum">
+        <el-input-number v-model="drawerProps.row.orderNum" :precision="0" :min="1" :max="999999" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="drawerProps.row.status">
+          <el-radio-button :value="item.dictValue" v-for="(item, index) in commonStatus" :key="index" :label="item.dictLabel" />
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="drawerProps.row.remark" placeholder="请填写备注" clearable />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <slot name="footer">
+        <ElButton @click="drawerVisible = false">取 消</ElButton>
+        <ElButton type="primary" @click="handleConfirm()">确 定</ElButton>
+      </slot>
+    </template>
+  </ElDrawer>
+</template>
+
+<script setup lang="ts" name="RoleForm">
+import { RoleBO } from '@/api/interface/system/role'
+import { ResultEnum } from '@/enums/HttpEnum'
+import { useDictOptions } from '@/hooks'
+
+const commonStatus = useDictOptions('COMMON_STATUS')
+
+import { FormInstance } from 'element-plus'
+const rules = reactive({
+  name: [{ required: true, message: '请填写角色名称' }],
+  code: [{ required: true, message: '请填权限标识' }],
+  orderNum: [{ required: true, message: '排序不能为空' }],
+  status: [{ required: true, message: '状态不能为空' }]
+})
+
+interface EcoDrawerProps {
+  api?: (params: any) => Promise<any> // 调用接口
+  title: string // 顶部标题
+  isView: boolean
+  row: Partial<RoleBO>
+  getTableList?: () => void
+}
+
+const drawerVisible = ref(false)
+const drawerProps = ref<EcoDrawerProps>({
+  isView: false,
+  title: '',
+  row: {}
+})
+
+// emit
+const emit = defineEmits(['submit'])
+
+// 接收父组件传过来的参数
+const acceptParams = (params: EcoDrawerProps) => {
+  drawerProps.value = params
+  drawerVisible.value = true
+  drawerProps.value.row.status = drawerProps.value.row.status || '1'
+}
+
+// 提交数据（新增/编辑）
+const ruleFormRef = ref<FormInstance>()
+const handleConfirm = () => {
+  ruleFormRef.value!.validate(async valid => {
+    if (!valid) return
+    try {
+      const { code } = await drawerProps.value.api!(drawerProps.value.row)
+      if (code == ResultEnum.SUCCESS) {
+        ElMessage.success({ message: `${drawerProps.value.title}成功！` })
+        drawerProps.value.getTableList!()
+        emit('submit')
+        drawerVisible.value = false
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  })
+}
+
+defineExpose({
+  acceptParams
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/system/role/index.vue

@@ -1,3 +1,86 @@
 <template>
-  <div>角色</div>
+  <div class="table-box">
+    <ProTable
+      ref="proTableRef"
+      title="参数配置"
+      row-key="roleId"
+      :indent="20"
+      :columns="columns"
+      :search-columns="searchColumns"
+      :request-api="getTableList">
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader="scope">
+        <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增 </el-button>
+        <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)"> 批量删除 </el-button>
+      </template>
+
+      <template #operation="{ row }">
+        <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', row)"> 编辑 </el-button>
+        <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" @click="deleteRow(row)"> 删除 </el-button>
+      </template>
+    </ProTable>
+    <RoleDrawer ref="drawerRef" size="40%" />
+  </div>
 </template>
+<script lang="tsx" setup name="RoleManage">
+import RoleApi from '@/api/module/system/role'
+import RoleDrawer from './components/RoleDrawer.vue'
+import { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface'
+import { useDictOptions, useHandleData } from '@/hooks'
+import { RoleBO, RoleQuery, RoleVO } from '@/api/interface/system/role'
+
+const proTableRef = ref<ProTableInstance>()
+
+// 表格配置项
+const columns: ColumnProps<RoleVO>[] = [
+  { type: 'selection', width: 60, selectable: row => row.isLock !== '1' },
+  { type: 'index', label: '序号', width: 60 },
+  { prop: 'name', label: '角色名称' },
+  { prop: 'code', label: '角色标识', tag: true },
+  {
+    prop: 'status',
+    label: '状态',
+    tag: true,
+    enum: useDictOptions('COMMON_STATUS'),
+    width: 80,
+    fieldNames: { label: 'dictLabel', value: 'dictValue', tagType: 'callbackShowStyle' }
+  },
+  { prop: 'orderNum', label: '排序' },
+  { prop: 'remark', label: '备注' },
+  { prop: 'createByName', label: '创建人' },
+  { prop: 'createTime', label: '创建时间' },
+  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
+]
+
+// 表格配置项
+const searchColumns: SearchProps[] = [{ prop: 'name', label: '参数名称', el: 'input' }]
+
+// 获取table列表
+const getTableList = (params: RoleQuery) => RoleApi.page(params)
+
+// 单行删除
+const deleteRow = async (row: RoleVO) => {
+  await useHandleData(RoleApi.delete, [row.roleId], `删除【${row.name}】角色`)
+  proTableRef.value?.getTableList()
+}
+
+// 批量删除信息
+const batchDelete = async (ids: (string | number)[]) => {
+  await useHandleData(RoleApi.delete, ids, '删除所选数据')
+  proTableRef.value?.clearSelection()
+  proTableRef.value?.getTableList()
+}
+
+// 打开 drawer(新增、查看、编辑)
+const drawerRef = ref<InstanceType<typeof RoleDrawer> | null>(null)
+const openDrawer = (title: string, row: Partial<RoleBO> = {}) => {
+  const params = {
+    title,
+    row: { ...row },
+    isView: title === '查看',
+    api: title === '新增' ? RoleApi.add : title === '编辑' ? RoleApi.edit : undefined,
+    getTableList: proTableRef.value?.getTableList
+  }
+  drawerRef.value?.acceptParams(params)
+}
+</script>

vite.config.ts

@@ -77,7 +77,11 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
         'element-plus/es/components/dropdown/style/css',
         'element-plus/es/components/dropdown-menu/style/css',
         'element-plus/es/components/dropdown-item/style/css',
-        'element-plus/es/components/message-box/style/css'
+        'element-plus/es/components/message-box/style/css',
+        'element-plus/es/components/radio-group/style/css',
+        'element-plus/es/components/radio-button/style/css',
+        'element-plus/es/components/input-number/style/css',
+        'element-plus/es/components/tree-select/style/css'
       ]
     }
   }