角色管理

api/app/admin/controller/Role.php

@@ -13,6 +13,12 @@ class Role extends BaseAuthorized
         return Result::rest($res);
     }
 
+    public function create()
+    {
+        $res = $this->RoleService()->create();
+        return Result::rest($res);
+    }
+
     public function update()
     {
         $res = $this->RoleService()->update();

api/app/common/service/RoleService.php

@@ -13,6 +13,13 @@ class RoleService extends Service
         return (new Role)->select();
     }
 
+    public function create($param = [])
+    {
+        $param = $this->autoParams($param);
+
+        return Role::create($param);
+    }
+
     public function update($param = [])
     {
         $param = $this->autoParams($param);

h5/src/api/Urls.ts

@@ -103,7 +103,7 @@ const Urls = {
 		list: 'admin/role/list', //列表
         codes: '/admin/role/codes', // 权限列表
 		update: 'admin/role/update', //更新
-		add: 'admin/role/add', //添加
+		create: 'admin/role/create', //添加
 		del: 'admin/role/del', //删除/批量删除
 	},
 };

h5/src/api/model/Role.ts

@@ -1,10 +0,0 @@
-import Http from "/@/utils/net/Http";
-import Urls from "../Urls";
-const Role = {
-    async getList(params: any) {
-        let url = Urls.role.list;
-        let res = await Http.get(url, params);
-        return res;
-    }
-};
-export default Role;

h5/src/api/role/index.ts

@@ -74,8 +74,8 @@ export const init = async () => {
  * @param param 创建参数
  * @returns 创建后对象
  */
-export const create = async (param: object) => {
-    const res = await Http.post(role.add, param)
+export const create = async (param: any) => {
+    const res = await Http.post(role.create, param)
     return res
 }
 /**

h5/src/components/role/codes.vue

@@ -44,10 +44,10 @@ onMounted(async () => {
 
 const submitForm = async () => {
     const checkedCodes = tree.value?.getCheckedNodes(true).map(node => node.lable)
-    console.log("🚀 ~ file: edit.vue:43 ~ submitForm ~ checkedCodes:", checkedCodes)
     const checkedKeys = tree.value?.getCheckedKeys()
 
     const updateRole = clone(role) as Role
+    
     updateRole.codes = checkedKeys
     updateRole.codes_cn = checkedCodes
 

h5/src/components/role/edit.vue

@@ -1,44 +1,50 @@
 <template>
-    <el-dialog :modelValue="modelValue" @close="$emit('update:modelValue', false)" title="编辑权限">
-        <el-form :model="role" lable-width="120px">
-            <el-form-item lable="名字">
+    <el-dialog :modelValue="modelValue" @close="$emit('update:modelValue', false)" :title="type === 'create' ? '新增角色' : '编辑角色'">
+        <el-form :model="role" lable-width="100px">
+            <el-form-item label="名字">
                 <el-input v-model="role.name" />
             </el-form-item>
-            <el-form-item lable="是否启用">
+            <el-form-item label="是否启用">
                 <el-switch v-model="role.valid" :active-value="1" :inactive-value="0" />
             </el-form-item>
-            <el-form-item lable="备注">
+            <el-form-item label="备注">
                 <el-input v-model="role.remark" type="textarea" />
             </el-form-item>
         </el-form>
         <template #footer>
             <el-button type="default" @click="$emit('update:modelValue', false)">取消</el-button>
-            <el-button v-loading="submitLoading" type="primary" @click="submitForm()">提交</el-button>
+            <el-button v-loading="submitLoading" type="primary" @click="submitForm()">{{ type === 'create' ? '新增' : '更新' }}</el-button>
         </template>
     </el-dialog>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { update } from '/@/api/role'
+import { update, create } from '/@/api/role'
 import type { Role } from '/@/api/role'
 import { ElMessage } from 'element-plus'
 
-const { modelValue, role } = defineProps<{
+const { modelValue, role, type } = defineProps<{
     modelValue: boolean,
-    role: Role
+    role: Role,
+    type: 'update' | 'create'
 }>()
 const emit = defineEmits(['update:modelValue'])
 const submitLoading = ref(false)
 
 const submitForm = async () => {
     submitLoading.value = true
-    const result = await update(role)
+    let result
+    if (type === 'update') {
+        result = await update(role)
+    } else {
+        result = await create(role)
+    }
     if (result.code != 0) {
         return
     }
     submitLoading.value = false
-    ElMessage({ message: '更新成功' })
+    ElMessage({ message: type === 'create' ? '新增成功' : '更新成功' })
 
     emit('update:modelValue', false)
 }

h5/src/views/admin/role/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <Codes v-model="showCodesEditForm" :role="editRole" />
-    <Edit v-model="showRoleEditForm" :role="editRole" />
+    <Codes v-model="isShowCodesEditForm" :role="editRole" />
+    <Edit v-model="isShowRoleEditForm" :role="editRole" :type="editType" />
     <div>
         <el-card class="box-card" v-loading="wholeLoading" element-loading-text="Loading..." style="height: 600px">
             <template #header>
@@ -8,7 +8,7 @@
                     <span>权限管理</span>
                     <div>
                         <el-button type="default" @click="reflush()">刷新列表</el-button>
-                        <el-button type="primary" @click="create()">新增角色</el-button>
+                        <el-button type="primary" @click="showEditDialog('create')">新增角色</el-button>
                     </div>
                 </div>
             </template>
@@ -22,8 +22,8 @@
 </template>
 
 <script lang="ts" setup name="underlyingRoleManage">
-import { ref, reactive, onMounted, h } from 'vue'
-import { ElSwitch, ElTag, ElMessage, ElMessageBox, ElButton, TableV2FixedDir, roleTypes } from 'element-plus'
+import { ref, h } from 'vue'
+import { ElTag, ElMessage, ElMessageBox, ElButton, TableV2FixedDir } from 'element-plus'
 import type { Column } from 'element-plus'
 import { throttle } from 'lodash'
 import { init, update, newRole } from '/@/api/role'
@@ -42,15 +42,19 @@ const wholeLoading = ref(false)
 /**
  * 编辑权限表单的显示控制
  */
-const showCodesEditForm = ref(false)
+const isShowCodesEditForm = ref(false)
 /**
  * 编辑角色表单的显示控制
  */
-const showRoleEditForm = ref(false)
+const isShowRoleEditForm = ref(false)
 /**
  * 需要编辑的角色
  */
 const editRole = ref<Role>(newRole())
+/**
+ * 编辑类型
+ */
+const editType = ref<'update' | 'create'>('update')
 
 /**
  * 虚拟表格列信息
@@ -69,7 +73,8 @@ const columns: Column<any>[] = [
         width: 400,
         cellRenderer: ({ cellData: codes_cn }) => h(
             'div',
-            codes_cn?.map(cn => h(ElTag, { style: { 'margin-right': '5px' } }, cn))
+            { style: { 'overflow-y': 'auto', display: 'flex' } },
+            codes_cn?.map(cn => h(ElTag, { style: { 'margin-right': '5px' } }, cn)) || '暂无权限 ~ 点击权限以授权'
         ),
     },
     {
@@ -101,10 +106,10 @@ const columns: Column<any>[] = [
                     ElButton,
                     {
                         type: row.valid ? 'danger' : 'success',
-                        onClick: throttle(() => {
+                        onClick: (throttle(() => {
                             row.valid = !row.valid
                             update(row)
-                        }),
+                        })),
                     },
                     row.valid ? '禁用' : '启用'
                 ),
@@ -114,8 +119,9 @@ const columns: Column<any>[] = [
                     {
                         type: 'primary',
                         onClick: throttle(() => {
-                            showCodesEditForm.value = true
                             editRole.value = row
+                            editType.value = 'update'
+                            isShowCodesEditForm.value = true
                         }),
                     },
                     '权限'
@@ -124,10 +130,7 @@ const columns: Column<any>[] = [
                     ElButton,
                     {
                         type: 'primary',
-                        onClick: throttle(() => {
-                            showRoleEditForm.value = true
-                            editRole.value = row
-                        }),
+                        onClick: () => showEditDialog('update', row),
                     },
                     '编辑'
                 ),
@@ -135,13 +138,12 @@ const columns: Column<any>[] = [
     },
 ]
 
-/**
- * 创建
- */
-const create = throttle(() => {
-    showRoleEditForm.value = true
-    editRole.value = newRole()
+const showEditDialog = throttle((type: 'create' | 'update' = 'create', role: Role = newRole()) => {
+    editRole.value = role
+    editType.value = type
+    isShowRoleEditForm.value = true
 })
+
 /**
  * 刷新
  */