From 9f845b9fde083618826a4519dd8672fc605c330c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8C=BF=E5=B0=8F=E5=A4=A9?= <1638245306@qq.com>
Date: Wed, 8 Feb 2023 17:33:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=8F=98=E5=8C=96:=20?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86=E6=8C=89=E9=92=AE=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/menu/components/menuButton/api.ts  |  41 ++++
 .../menu/components/menuButton/curd.tsx       | 224 ++++++++++++++++++
 .../menu/components/menuButton/index.vue      |  68 ++++++
 web/src/views/system/role/api.ts              |  41 ++++
 4 files changed, 374 insertions(+)
 create mode 100644 web/src/views/system/menu/components/menuButton/api.ts
 create mode 100644 web/src/views/system/menu/components/menuButton/curd.tsx
 create mode 100644 web/src/views/system/menu/components/menuButton/index.vue
 create mode 100644 web/src/views/system/role/api.ts

diff --git a/web/src/views/system/menu/components/menuButton/api.ts b/web/src/views/system/menu/components/menuButton/api.ts
new file mode 100644
index 0000000..5db63a9
--- /dev/null
+++ b/web/src/views/system/menu/components/menuButton/api.ts
@@ -0,0 +1,41 @@
+import { request } from '/@/utils/service';
+import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+
+export const apiPrefix = '/api/system/menu_button/';
+export function GetList(query: PageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	});
+}
+export function GetObj(id: InfoReq) {
+	return request({
+		url: apiPrefix + id,
+		method: 'get',
+	});
+}
+
+export function AddObj(obj: AddReq) {
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	});
+}
+
+export function UpdateObj(obj: EditReq) {
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	});
+}
+
+export function DelObj(id: DelReq) {
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	});
+}
diff --git a/web/src/views/system/menu/components/menuButton/curd.tsx b/web/src/views/system/menu/components/menuButton/curd.tsx
new file mode 100644
index 0000000..1bc4030
--- /dev/null
+++ b/web/src/views/system/menu/components/menuButton/curd.tsx
@@ -0,0 +1,224 @@
+import {CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose} from '@fast-crud/fast-crud';
+import _ from 'lodash-es';
+import * as api from "./api";
+import { dictionary } from '/@/utils/dictionary';
+interface CreateCrudOptionsTypes {
+    crudOptions: CrudOptions;
+}
+import { request } from '/@/utils/service';
+//此处为crudOptions配置
+export const createCrudOptions = function ({crudExpose,selectOptions}: {crudExpose: CrudExpose,selectOptions:any}): CreateCrudOptionsTypes {
+
+    const pageRequest = async (query: any) => {
+        return await api.GetList({...query,menu:selectOptions.value.id});
+    };
+    const editRequest = async ({ form, row }: EditReq) => {
+        form.id = row.id;
+        return await api.UpdateObj(form);
+    };
+    const delRequest = async ({ row }: DelReq) => {
+        return await api.DelObj(row.id);
+    };
+    const addRequest = async ({ form }: AddReq) => {
+        return await api.AddObj(form);
+    };
+    return {
+        crudOptions: {
+            request: {
+                pageRequest,
+                addRequest,
+                editRequest,
+                delRequest,
+            },
+            form: {
+                col: {span: 24},
+                labelWidth: '100px',
+                wrapper: {
+                    is: 'el-dialog',
+                    width: '600px',
+                },
+            },
+            columns: {
+                _index: {
+                    title: '序号',
+                    form: {show: false},
+                    column: {
+                        //type: 'index',
+                        align: 'center',
+                        width: '70px',
+                        columnSetDisabled: true, //禁止在列设置中选择
+                        formatter: (context) => {
+                            //计算序号,你可以自定义计算规则，此处为翻页累加
+                            let index = context.index ?? 1;
+                            let pagination = crudExpose.crudBinding.value.pagination;
+                            return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+                        },
+                    },
+                },
+                search: {
+                    title: '关键词',
+                    column: {show: false},
+                    type: 'text',
+                    search: {show: true},
+                    form: {
+                        show: false,
+                        component: {
+                            placeholder: '输入关键词搜索',
+                        },
+                    },
+                },
+                id: {
+                    title: 'ID',
+                    type: 'text',
+                    column: {show: false},
+                    search: {show: false},
+                    form: {show: false},
+                },
+                name: {
+                    title: '权限名称',
+                    type: 'dict-select',
+                    search: {show: true},
+                    dict:dict({
+                        data:dictionary('system_button')
+                    }),
+                    column: {
+                        minWidth: 120,
+                        sortable: true,
+                    },
+                    form: {
+                        rules: [{required: true, message: '角色名称必填'}],
+                        component: {
+                            placeholder: '输入角色名称搜索',
+                        },
+                    },
+                },
+                value: {
+                    title: '权限值',
+                    type: 'text',
+                    search: {show: false},
+                    column: {
+                        width: 120,
+                        sortable: true,
+                    },
+                    form: {
+                        rules: [{required: true, message: '权限标识必填'}],
+                        placeholder: '输入权限标识',
+                    },
+                },
+                method: {
+                    title: '请求方式',
+                    search: {show: false},
+                    type: 'dict-select',
+                    column: {
+                        width: 100,
+                        sortable: true,
+                    },
+                    dict: dict({
+                        data:[
+                            { label: 'GET', value: 0 },
+                            { label: 'POST', value: 1,color:'success' },
+                            { label: 'PUT', value: 2 },
+                            { label: 'DELETE', value: 3 ,color: 'danger'}
+                        ]
+                    })
+                },
+                api: {
+                    title: '接口地址',
+                    minWidth:200,
+                    search: {show: false},
+                    type: 'dict-select',
+                    dict: dict({
+                        getData(){
+                            return request({ url: '/swagger.json' }).then((res:any) => {
+                                const ret = Object.keys(res.paths)
+                                const data = []
+                                for (const item of ret) {
+                                    const obj:any = {}
+                                    obj.label = item
+                                    obj.value = item
+                                    data.push(obj)
+                                }
+                                return data
+                            })
+                        }
+                    }),
+                    column: {
+                        width: 130,
+                        sortable: true,
+                    },
+                    form: {
+                        value: false,
+                    },
+                },
+                status: {
+                    title: '状态',
+                    search: {show: true},
+                    type: 'dict-radio',
+                    dict: dict({
+                        data: [
+                            {
+                                label: '启用',
+                                value: true,
+                                color: 'success',
+                            },
+                            {
+                                label: '禁用',
+                                value: false,
+                                color: 'danger',
+                            },
+                        ],
+                    }),
+                    column: {
+                        width: 90,
+                        sortable: true,
+                    },
+                    form: {
+                        value: true,
+                    },
+                },
+                update_datetime: {
+                    title: '更新时间',
+                    type: 'text',
+                    search: {show: false},
+                    column: {
+                        width: 170,
+                        sortable: true,
+                    },
+                    form: {
+                        show: false,
+                        component: {
+                            placeholder: '输入关键词搜索',
+                        },
+                    },
+                },
+                create_datetime: {
+                    title: '创建时间',
+                    type: 'text',
+                    search: {show: false},
+                    column: {
+                        sortable: true,
+                        width: 170,
+                    },
+                    form: {
+                        show: false,
+                        component: {
+                            placeholder: '输入关键词搜索',
+                        },
+                    },
+                },
+
+                description: {
+                    title: '备注',
+                    type: 'textarea',
+                    search: {show: false},
+                    form: {
+                        component: {
+                            maxlength: 200,
+                            placeholder: '输入备注',
+                        },
+                    },
+                },
+            },
+        },
+    };
+};
diff --git a/web/src/views/system/menu/components/menuButton/index.vue b/web/src/views/system/menu/components/menuButton/index.vue
new file mode 100644
index 0000000..d6bb14b
--- /dev/null
+++ b/web/src/views/system/menu/components/menuButton/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <el-drawer
+      size="70%"
+      v-model="drawer"
+      direction="rtl"
+      destroy-on-close
+      :before-close="handleClose"
+  >
+    <template #header>
+      <div>当前菜单:
+        <el-tag>{{ selectOptions.name }}</el-tag>
+      </div>
+    </template>
+    <div style="position: relative">
+      <fs-page>
+        <fs-crud ref="crudRef" v-bind="crudBinding">
+        </fs-crud>
+      </fs-page>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted} from 'vue';
+import {useExpose, useCrud} from '@fast-crud/fast-crud';
+import {createCrudOptions} from './curd';
+import {ElMessageBox} from "element-plus";
+import * as api from './api'
+// 弹窗是否显示
+const drawer = ref(false)
+// 当前选择的菜单信息
+const selectOptions = ref({name:null})
+
+//抽屉关闭确认
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm('您确定要关闭?', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+      .then(() => {
+        done()
+      })
+      .catch(() => {
+        // catch error
+      })
+}
+// crud组件的ref
+const crudRef = ref();
+// crud 配置的ref
+const crudBinding = ref();
+// 暴露的方法
+const {crudExpose} = useExpose({crudRef, crudBinding});
+// 你的crud配置
+const {crudOptions} = createCrudOptions({crudExpose, selectOptions});
+// 初始化crud配置
+const {resetCrudOptions} = useCrud({crudExpose, crudOptions});
+// 你可以调用此方法，重新初始化crud配置
+// resetCrudOptions(options)
+const initGet = ()=>{
+  api.GetList({menu:selectOptions.value.id}).then((res:any)=>{
+    const {data} = res
+    crudExpose.crudBinding.value.data=data
+  })
+}
+
+defineExpose({drawer, selectOptions,initGet})
+</script>
diff --git a/web/src/views/system/role/api.ts b/web/src/views/system/role/api.ts
new file mode 100644
index 0000000..b5a96cf
--- /dev/null
+++ b/web/src/views/system/role/api.ts
@@ -0,0 +1,41 @@
+import { request } from '/@/utils/service';
+import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+
+export const apiPrefix = '/api/system/role/';
+export function GetList(query: PageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		data: query,
+	});
+}
+export function GetObj(id: InfoReq) {
+	return request({
+		url: apiPrefix + id,
+		method: 'get',
+	});
+}
+
+export function AddObj(obj: AddReq) {
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	});
+}
+
+export function UpdateObj(obj: EditReq) {
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	});
+}
+
+export function DelObj(id: DelReq) {
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	});
+}