增加按钮权限的增删改查操作

src/api/model/system/menu.ts

@@ -0,0 +1,10 @@
+export interface MenuBtnRow {
+  id?: number; // ID
+  parentId: number; // 父ID
+  menuId: number; // 菜单ID
+  name: string;// 名称
+  code: string | number;// 名称
+  types: string | 'add' | 'edit' | 'del'; // 自定义 add添加 edit编辑 del 删除
+  description?: string; // 描述
+  status: 0 | 1; // 0 停用 1启用
+}

src/api/system/index.ts

@@ -12,7 +12,7 @@ export default {
       detail: (id: number) => get('/system/menu/button/detail', { id }),
       add: (data: object) => post('/system/menu/button/add', data),
       del: (id: number) => del('/system/menu/button/del', { id }),
-      edit: (data: object) => put('/system/menu/button/edit', data)
+      edit: (data: object) => post('/system/menu/button/edit', data)
     }
   },
   role: {

src/store/modules/themeConfig.ts

@@ -133,7 +133,7 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
 			globalI18n: 'zh-cn',
 			// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
-			globalComponentSize: 'large',
+			globalComponentSize: 'default',
 		},
 	},
 	mutations: {

src/utils/validator.ts

@@ -8,4 +8,9 @@ export const phoneValidate = (rule: any, value: any, callback: any) => {
   if (!reg_tel.test(value)) {
     callback(new Error('请填写正确手机号'))
   }
+}
+
+
+export const ruleRequired = (message = '不能为空', trigger = 'blur') => {
+  return { required: true, message, trigger }
 }

src/views/system/menu/component/btn-form.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-dialog v-model="showDialog" :title="`${formData.id?'编辑按钮':'新增按钮'}`" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="80px">
+      <el-form-item label="上级" prop="parentId">
+        <el-cascader :options="parentData" :props="{ label: 'name',value: 'id',checkStrictly: true,emitPath: false }" placeholder="请选择上级菜单" clearable class="w100" v-model="formData.parentId"></el-cascader>
+      </el-form-item>
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="formData.name" placeholder="输入名称" />
+      </el-form-item>
+      <el-form-item label="编码" prop="types">
+        <el-input v-model="formData.types" placeholder="输入编码" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
+      </el-form-item>
+      <el-form-item label="说明" prop="description">
+        <el-input v-model="formData.description" type="textarea" :rows="6" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="showDialog = false">取消</el-button>
+        <el-button type="primary" @click="onSubmit">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, PropType } from 'vue';
+import api from '/@/api/system';
+import { MenuBtnRow } from '/@/api/model/system/menu';
+import { ruleRequired } from '/@/utils/validator';
+import { ElMessage } from 'element-plus';
+
+defineProps({
+	parentData: Array as PropType<MenuBtnRow[]>,
+});
+
+const emit = defineEmits(['getList']);
+
+const showDialog = ref(false);
+const formRef = ref();
+
+const baseForm: MenuBtnRow = {
+	parentId: -1,
+	menuId: 0,
+	code: '',
+	name: '',
+	types: '',
+	description: '',
+	status: 1,
+};
+
+const formData = reactive<MenuBtnRow>({
+	...baseForm,
+});
+
+const ruleForm = {
+	name: [ruleRequired('按钮名称不能为空')],
+	types: [ruleRequired('按钮编码不能为空')],
+};
+
+const onSubmit = async () => {
+	await formRef.value.validate();
+
+	if (!formData.parentId) {
+		formData.parentId = -1;
+	}
+	formData.code = Date.now();
+
+	const theApi = formData.id ? api.menu.btn.edit : api.menu.btn.add;
+
+	await theApi(formData);
+
+	ElMessage.success('操作成功');
+	resetForm();
+	showDialog.value = false; // 关闭弹窗
+	emit('getList');
+};
+
+const resetForm = async () => {
+	Object.assign(formData, { ...baseForm });
+	formRef.value && formRef.value.resetFields();
+};
+
+const open = async (row: any) => {
+	resetForm();
+	showDialog.value = true;
+	Object.assign(formData, { ...row });
+	// console.log(row);
+};
+
+defineExpose({ open });
+</script>

src/views/system/menu/component/btn.vue

@@ -8,25 +8,72 @@
         新增
       </el-button>
     </div>
+
+    <el-table :data="tableData" style="width: 100%" row-key="id" border :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column prop="name" label="按钮名称" width="220" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="types" label="按钮编码" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="status" label="状态" width="100" align="center">
+        <template #default="scope">
+          <el-tag type="success" size="small" v-if="scope.row.status===1">启用</el-tag>
+          <el-tag type="info" size="small" v-else>禁用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100" align="center">
+        <template #default="scope">
+          <el-button size="small" text type="warning" @click="onEdit(scope.row)">修改</el-button>
+          <el-button size="small" text type="danger" @click="onDel(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </el-drawer>
+  <btnForm ref="btnFormRef" :parent-data="tableData" @getList="getList"></btnForm>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import btnForm from './btn-form.vue';
+import { MenuBtnRow } from '/@/api/model/system/menu';
 import api from '/@/api/system';
+import { ElMessageBox, ElMessage } from 'element-plus';
 
 const title = ref('按钮权限');
-const drawer = ref(false);
+const drawer = ref(true);
+const tableData = ref([]);
+const menuRow = ref({ id: 34 });
+const btnFormRef = ref();
+const getList = async () => {
+	let res = await api.menu.btn.getList({ menuID: menuRow.value.id, status: -1 });
+	tableData.value = res || [];
+};
+getList();
 
 const open = async (row: any) => {
-	console.log(row);
+	// console.log(row);
 	title.value = '按钮权限 - ' + row.name;
 	drawer.value = true;
-	let res = await api.menu.btn.getList({ menuID: row.id, status: -1 });
-	console.log(res);
+	menuRow.value = row;
+	getList();
+};
+
+const onAddRow = () => {
+	btnFormRef.value.open({menuId: menuRow.value.id});
 };
-const onAddRow = (row: any) => {
-	console.log(row);
+
+const onEdit = (row: MenuBtnRow) => {
+	btnFormRef.value.open(row);
+};
+
+const onDel = (row: MenuBtnRow) => {
+	ElMessageBox.confirm(`此操作将删除按钮：“${row.name}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await api.menu.btn.del(row.id as number);
+		ElMessage.success('删除成功');
+		getList();
+	});
 };
 
 defineExpose({ open });

src/views/system/post/component/editPost.vue

@@ -107,7 +107,7 @@ export default defineComponent({
 		const openDialog = (row?: DialogRow) => {
 			resetForm();
       api.post.getList({ status: 1 }).then((res: any) => {
-        console.log(res)
+        // console.log(res)
 				state.postData = res || [];
 			});
 			if (row) {