Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	web/yarn.lock

web/.env.development

@@ -2,7 +2,7 @@
 ENV = 'development'
 
 # 本地环境接口地址
-VITE_API_URL = 'http://127.0.0.1:8000/'
+VITE_API_URL = 'http://127.0.0.1:8000'
 
 # 是否启用按钮权限
 VITE_PM_ENABLED = true

web/.gitignore

@@ -1,7 +1,8 @@
 .DS_Store
 node_modules
 /dist
-
+package-lock.json
+yarn.lock
 
 # local env files
 .env.local

web/package.json

@@ -49,7 +49,7 @@
 		"vue-grid-layout": "^3.0.0-beta1",
 		"vue-i18n": "^9.2.2",
 		"vue-router": "^4.1.6",
-		"vxe-table": "^4.3.10",
+		"vxe-table": "^4.4.1",
 		"xe-utils": "^3.5.7"
 	},
 	"devDependencies": {

web/src/App.vue

@@ -59,7 +59,12 @@ onBeforeMount(() => {
 	// 设置批量第三方 js
 	setIntroduction.jsCdn();
   //websockt 模块
-  websocket.init(wsReceive)
+  try {
+    websocket.init(wsReceive)
+  }catch (e) {
+    console.log("websocket错误")
+  }
+
 });
 // 页面加载时
 onMounted(() => {

web/src/main.ts

@@ -27,7 +27,8 @@ import iconfont from '/@/assets/iconfont/iconfont.json'; //引入json文件
 import '/@/assets/iconfont/iconfont.css'; //引入css
 // 自动注册插件
 import { scanAndInstallPlugins } from '/@/views/plugins/index';
-
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
 let forIconfont = analyzingIconForIconfont(iconfont); //解析class
 iconList.addIcon(forIconfont.list); // 添加iconfont dvadmin3的icon
 iconList.addIcon(elementPlus); // 添加element plus的图标
@@ -47,6 +48,8 @@ pinia.use(piniaPersist);
 directive(app);
 other.elSvg(app);
 
+
+app.use(VXETable)
 app.use(permission);
 app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(VueGridLayout).use(fastCrud).mount('#app');
 

web/src/plugin/permission/func.permission.ts

@@ -9,7 +9,7 @@ export default {
         return XEUtils.includeArrays(BtnPermission, value)
       }else if(typeof value === 'string'){
         const index = XEUtils.arrayIndexOf(BtnPermission, value)
-        return index>0?true:false
+        return index>-1?true:false
       }
      }
     return true

web/src/utils/service.ts

@@ -22,15 +22,19 @@ function createService() {
 		},
 		paramsSerializer: {
 			serialize(params) {
-				return qs.stringify(params, {
-					indices: false,
-					encoder: (val: string) => {
-						if (typeof val === 'boolean') {
-							return val ? 1 : 0;
-						}
-						return val;
-					},
-				});
+				interface paramsObj {
+					[key: string]: any;
+				}
+				let result:paramsObj = {};
+				for (const [key, value] of Object.entries(params)) {
+					if (value !== '') {
+						result[key] = value;
+					}
+					if(typeof value === 'boolean'){
+						result[key] = value? 'True': 'False';
+					}
+				}
+				return qs.stringify(result);
 			},
 		},
 	});

web/src/views/system/areas/crud.tsx

@@ -205,7 +205,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 							name: 'fs-dict-switch',
 							activeText: '',
 							inactiveText: '',
-							style: '--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6',
+							style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
 							onChange: compute((context) => {
 								return () => {
 									api.UpdateObj(context.row).then((res: APIResponseData) => {

web/src/views/system/dept/index.vue

@@ -20,9 +20,9 @@
                         @node-click="handleNodeClick"
                     >
                         <template #default="{ node, data }">
-                            <span v-if="data.status" class="text-center font-black text-xl"><SvgIcon
+                            <span v-if="data.status" class="text-center font-black font-normal"><SvgIcon
                                 :name="node.data.icon"/>&nbsp;{{ node.label }}</span>
-                            <span v-else class="text-center font-black text-xl text-red-700"><SvgIcon
+                            <span v-else class="text-center font-black font-normal text-red-700"><SvgIcon
                                 :name="node.data.icon"/>&nbsp;{{ node.label }}</span>
                         </template>
                     </el-tree>
@@ -302,4 +302,7 @@ onMounted(() => {
 .el-card {
     height: 100%;
 }
+.font-normal {
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+}
 </style>

web/src/views/system/dictionary/crud.tsx

@@ -179,7 +179,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 							name: 'fs-dict-switch',
 							activeText: '',
 							inactiveText: '',
-							style: '--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6',
+							style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
 							onChange: compute((context) => {
 								return () => {
 									api.UpdateObj(context.row).then((res: APIResponseData) => {

web/src/views/system/fileList/index.vue

@@ -1,152 +1,26 @@
 <template>
   <fs-page>
-      <el-row style="margin: 10px">
-        <el-col :span="6" :offset="18">
-          <el-input
-              class="w-60"
-              placeholder="请输入名称"
-              v-model="fileParams.name"
-              @keyup.enter="getData"
-              clearable
-              @blur="getData"
-          >
-            <template #append>
-              <el-button :icon="Search" @click="getData">
-              </el-button>
-            </template>
-          </el-input>
-        </el-col>
-      </el-row>
-    <el-row :gutter="10" style="height: 65vh;margin: 10px">
-      <el-col :span="3" v-for="(item,index) in fileList" :key="index">
-        <el-card>
-          <el-image
-              style="width: 150px; height: 150px"
-              :src="formatImgUrl(item.url)"
-              :zoom-rate="1.2"
-              :preview-src-list="[formatImgUrl(item.url)]"
-              :initial-index="4"
-              fit="fill"
-          />
-          <div>
-            <el-text>{{ item.name }}</el-text>
-          </div>
-          <div>
-            <el-popover
-                placement="bottom"
-                :width="500"
-                trigger="click"
-            >
-              <template #reference>
-                <el-button type="text">详细</el-button>
-              </template>
-              <div>
-                <el-descriptions
-                    :column="2"
-                    border
-                >
-                  <el-descriptions-item label="文件名称">{{ item.name }}</el-descriptions-item>
-                  <el-descriptions-item label="创建人">{{ item.creator_name }}</el-descriptions-item>
-                  <el-descriptions-item label="存储引擎">{{ item.engine }}</el-descriptions-item>
-                  <el-descriptions-item label="创建时间">{{ item.create_datetime }}</el-descriptions-item>
-                </el-descriptions>
-              </div>
-            </el-popover>
-            <el-popconfirm title="您确定要删除?" @confirm="onDel(item)">
-              <template #reference>
-                <el-button type="text">删除</el-button>
-              </template>
-            </el-popconfirm>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-divider></el-divider>
-    <el-row style="margin-left: 10px">
-      <el-col :span="12" >
-        <el-pagination
-            v-model:current-page="pageConfig.page"
-            v-model:page-size="pageConfig.limit"
-            background
-            :page-sizes="[5, 10, 20, 50]"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="pageConfig.total"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-        />
-      </el-col>
-    </el-row>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
-<script lang="ts" setup name="fileList">
-import {DelObj, GetList} from "./api";
-import {ref, onMounted,reactive} from "vue";
-import {getBaseURL} from "/@/utils/baseUrl";
-import {ElMessage} from "element-plus";
-import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
-const fileParams = reactive({name:''})
-const fileList = ref([])
-const mimeType = ref([])
-const pageConfig = reactive({
-  page:1,
-  limit:10,
-  total:0
-})
-const getData = function () {
-  let params = {
-    page:pageConfig.page,
-    limit:pageConfig.limit,
-    name:fileParams.name
-  }
-  GetList(params).then((res: any) => {
-    const {data,page,limit,total} = res
-    pageConfig.page = page
-    pageConfig.limit=limit
-    pageConfig.total=total
-    fileList.value = data
-  })
-}
-
-
-const onDel = function (item: any) {
-  DelObj(item.id).then((res: any) => {
-    ElMessage.success("删除成功！");
-    getData()
-  })
-}
-const formatImgUrl = function (src: string) {
-  return getBaseURL() + src
-}
-
-const handleSizeChange = function (val: any) {
-  pageConfig.limit = val
-  getData()
-}
-
-const handleCurrentChange = function (val: any) {
-  pageConfig.page = val
-  getData()
-}
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+// crud组件的ref
+const crudRef = ref();
+// crud 配置的ref
+const crudBinding = ref();
+// 暴露的方法
+const { crudExpose } = useExpose({ crudRef, crudBinding });
+// 你的crud配置
+const { crudOptions } = createCrudOptions({ crudExpose });
+// 初始化crud配置
+const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 
+// 页面打开后获取列表数据
 onMounted(() => {
-  getData()
-})
+  crudExpose.doRefresh();
+});
 </script>
-<style scoped>
-.demo-tabs > .el-tabs__content {
-  padding: 32px;
-  color: #6b778c;
-  font-size: 32px;
-  font-weight: 600;
-}
-
-.el-tabs--right .el-tabs__content,
-.el-tabs--left .el-tabs__content {
-  height: 100%;
-}
-
-.el-tabs__nav-scroll {
-  border-right: 1px solid #efefef;
-}
-</style>

web/src/views/system/login/api.ts

@@ -2,7 +2,7 @@ import { request } from "/@/utils/service";
 
 export function getCaptcha() {
     return request({
-        url: '/api/captcha',
+        url: '/api/captcha/',
         method: 'get',
     });
 }

web/src/views/system/menu/components/menuButton/api.ts

@@ -24,7 +24,7 @@ export function AddObj(obj: AddReq) {
 	});
 }
 
-export function UpdateObj(obj: EditReq) {
+export function UpdateObj(obj: any) {
 	return request({
 		url: apiPrefix + obj.id + '/',
 		method: 'put',

web/src/views/system/menu/components/menuButton/crud.tsx

@@ -24,7 +24,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
-		return await api.UpdateObj(row);
+		return await api.UpdateObj({ ...form, menu: row.menu });
 	};
 	const delRequest = async ({ row }: DelReq) => {
 		return await api.DelObj(row.id);
@@ -34,6 +34,16 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 	};
 	return {
 		crudOptions: {
+			search: {
+        container: {
+          action: {
+            //按钮栏配置
+            col: {
+              span: 8
+            }
+          }
+        },
+      },
 			rowHandle: {
 				//固定右侧
 				fixed: 'right',

web/src/views/system/menu/index.vue

@@ -19,10 +19,10 @@
                              @node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable
                              @node-click="handleNodeClick">
                         <template #default="{ node, data }">
-							<span v-if="data.status" class="text-center font-black text-xl">
+							<span v-if="data.status" class="text-center font-black font-normal">
 								<SvgIcon :name="node.data.icon"/>&nbsp;{{ node.label }}
 							</span>
-                            <span v-else class="text-center font-black text-xl text-red-700">
+                            <span v-else class="text-center font-black text-red-700 font-normal">
 								<SvgIcon :name="node.data.icon"/>&nbsp;{{ node.label }}
 							</span>
                         </template>
@@ -394,4 +394,7 @@ onActivated(() => {
 .el-card {
     height: 100%;
 }
+.font-normal {
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+}
 </style>

web/src/views/system/role/components/api.ts

@@ -0,0 +1,117 @@
+import { request } from "/@/utils/service";
+
+/**
+ * 获取角色所拥有的菜单
+ * @param params
+ */
+export function GetMenu(params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_get_menu/',
+        method: 'get',
+        params:params
+    });
+}
+
+/***
+ * 新增权限
+ * @param data
+ * @constructor
+ */
+export function SaveMenuPermission(data:any) {
+    return request({
+        url: '/api/system/role_menu_permission/save_auth/',
+        method: 'post',
+        data:data
+    });
+}
+
+
+/**
+ * 获取菜单下的按钮
+ * @param params
+ * @constructor
+ */
+export function GetMenuButton(params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_menu_get_button/',
+        method: 'get',
+        params:params
+    });
+}
+
+
+/***
+ * 根据角色获取已授权的菜单
+ * @param params
+ * @constructor
+ */
+export function role_to_menu (params:any={}) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_to_menu/',
+        method: 'get',
+        params: params
+    })
+}
+
+/***
+ * 根据角色获取数据权限范围
+ * @constructor
+ */
+export function GetDataScope (params:any={}) {
+    return request({
+        url: '/api/system/role_menu_button_permission/data_scope/',
+        method: 'get',
+        params: params
+    })
+}
+
+/***
+ * 获取权限部门
+ * @constructor
+ */
+export function GetDataScopeDept (params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_to_dept_all/',
+        method: 'get',
+        params: params
+    })
+}
+
+/***
+ * 新增权限
+ * @param data
+ * @constructor
+ */
+export function CreatePermission(data:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/',
+        method: 'post',
+        data:data
+    });
+}
+
+/***
+ * 根据菜单获取菜单下按钮
+ * @param params
+ */
+export function getObj(params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/menu_to_button/',
+        method: 'get',
+        params:params
+    });
+}
+
+/**
+ * 删除按钮权限
+ * @param data
+ * @constructor
+ */
+export function DeletePermission(data:any) {
+    return request({
+        url: `/api/system/role_menu_button_permission/${data.id}/`,
+        method: 'delete',
+        data:{}
+    });
+}
+

web/src/views/system/role/components/permission.vue

@@ -0,0 +1,379 @@
+<template>
+  <el-drawer
+      size="70%"
+      v-model="drawer"
+      direction="rtl"
+      destroy-on-close
+      :before-close="handleClose"
+  >
+    <template #header>
+      <div>
+        <el-tag size="large" type="primary">当前角色:{{ editedRoleInfo.name }}</el-tag>
+      </div>
+    </template>
+    <div style="padding: 1em">
+      <div style="margin-bottom: 10px">
+        <el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
+      </div>
+      <vxe-table
+          ref="tableRef"
+          border
+          resizable
+          :row-config="{keyField: 'menu_id'}"
+          :tree-config="{transform: true, rowField: 'menu_id', parentField: 'parent'}"
+          :checkbox-config="{labelField: 'menu_id', checkRowKeys: multipleTableData,checkStrictly:true}"
+          :expand-config="{accordion:true}"
+          @toggle-row-expand="menuNodeClick"
+          :data="menuData">
+        <vxe-column type="checkbox" title="ID" width="200" tree-node></vxe-column>
+        <vxe-column field="name" title="目录/菜单" ></vxe-column>
+        <vxe-column type="expand" title="已授予权限" width="120">
+          <template #content="{ row, rowIndex }">
+            <div style="padding: 10px 0px" v-if="!row.is_catalog">
+              <el-button type="primary" size="small" style="margin-bottom: 0.5em"
+                         @click="createBtnPermission">新增
+              </el-button>
+              <el-table size="small" :data="buttonPermissionData" border style="width: 100%">
+                <el-table-column prop="menu_button" label="权限名称" width="100">
+                  <template #default="scope">
+                    <div>{{ scope.row.menu_button__name }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="menu_button__value" label="权限值" width="150">
+                </el-table-column>
+                <el-table-column prop="data_range" label="权限范围" width="140">
+                  <template #default="scope">
+                    <div>{{ formatDataRange(scope.row.data_range) }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="dept" label="权限涉及部门"/>
+                <el-table-column fixed="right" label="操作" width="120">
+                  <template #default="scope">
+                    <el-button type="danger" size="small" @click="onDeleteBtn(scope)">删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <!--      弹窗-->
+      <el-dialog v-model="dialogFormVisible" append-to-body width="400px" title="配置按钮权限">
+        <el-form ref="buttonFormRef" :model="buttonForm" :rules="buttonRules" label-width="120px">
+          <el-form-item label="按钮" prop="menu_button">
+            <el-select v-model="buttonForm.menu_button" placeholder="请选择按钮" @change="onChangeButton">
+              <el-option v-for="(item,index) in buttonOptions" :key="index" :label="item.name"
+                         :value="item.id"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="权限范围" prop="data_range">
+            <el-select v-model="buttonForm.data_range" placeholder="请选择按钮">
+              <el-option v-for="(item,index) in dataScopeOptions" :key="index" :label="item.label"
+                         :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="数据部门" prop="dept" v-show="buttonForm.data_range === 4">
+            <div class="dept-tree">
+              <el-tree
+                  :data="deptOptions"
+                  show-checkbox
+                  default-expand-all
+                  :default-checked-keys="deptCheckedKeys"
+                  ref="deptTree"
+                  node-key="dept_id"
+                  :check-strictly="true"
+                  :props="{ label: 'name' }"
+              ></el-tree>
+            </div>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="onSaveButtonForm">
+          确定
+        </el-button>
+      </span>
+        </template>
+      </el-dialog>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import {ref, defineExpose, reactive, toRefs} from 'vue'
+import {ElMessageBox, ElTable} from 'element-plus'
+import * as api from './api.ts'
+import type {FormRules, FormInstance} from 'element-plus'
+import {ElMessage} from 'element-plus'
+import XEUtils from 'xe-utils'
+import { VXETable, VxeTableInstance,VxeTableEvents } from 'vxe-table'
+
+interface tableRow {
+  menu_id: number
+  name: string
+}
+
+//抽屉是否显示
+const drawer = ref(false)
+//当前编辑的角色信息
+const editedRoleInfo = ref({})
+
+//抽屉关闭确认
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm('您确定要关闭?', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+      .then(() => {
+        done()
+      })
+      .catch(() => {
+        // catch error
+      })
+}
+
+/*****菜单的配置项***/
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+  isLeaf: 'hasChild'
+}
+
+interface Tree {
+  name: string
+  children?: Tree[],
+  id: number
+}
+
+let menuData = ref<Tree>()
+//获取菜单
+const getMenuData = () => {
+  api.GetMenu({}).then((res: any) => {
+    const {data} = res
+    menuData.value = data
+  })
+}
+
+//获取已授权的菜单
+const tableRef = ref<VxeTableInstance<tableRow>>()
+const multipleTableData = ref()
+const getRoleToMenu = () => {
+  api.role_to_menu({role: editedRoleInfo.value.id}).then((res: any) => {
+    const {data} = res
+    multipleTableData.value=data
+  })
+}
+
+let isBtnPermissionShow = ref(false)
+let buttonOptions = ref<[]>()
+let editedMenuInfo = ref()
+//菜单节点点击事件
+const menuNodeClick: VxeTableEvents.ToggleRowExpand<tableRow> = ({ expanded, row}) => {
+  // isBtnPermissionShow.value = !node.is_catalog
+  if (!row.is_catalog) {
+    buttonOptions.value = []
+    editedMenuInfo.value = row
+    api.GetMenuButton({menu: row.menu_id}).then((res: any) => {
+      const {data} = res
+      buttonOptions.value = data
+    })
+    api.getObj({menu: row.menu_id, role: editedRoleInfo.value.id}).then((res: any) => {
+      const {data} = res
+      buttonPermissionData.value = data
+    })
+  }
+
+}
+const menuTree = ref()
+/*****菜单的配置项***/
+/***按钮授权的弹窗****/
+//是否显示新增表单
+const dialogFormVisible = ref(false)
+//部门树
+const deptTree = ref()
+//自定义部门数据
+const deptOptions = ref()
+//选中的部门数据
+const deptCheckedKeys = []
+//按钮表单
+const buttonForm = reactive({
+  menu_button: null,
+  role: null,
+  menu: null,
+  data_range: null,
+  dept: []
+})
+//按钮表格数据
+let buttonPermissionData = ref([])
+//按钮表单验证
+const buttonRules = reactive<FormRules>({
+  menu_button: [
+    {required: true, message: '必填项'}
+  ],
+  data_range: [
+    {required: true, message: '必填项'}
+  ]
+})
+//新增按钮
+const buttonFormRef = ref<FormInstance>()
+const createBtnPermission = () => {
+  dialogFormVisible.value = true
+  buttonForm.menu_button = null
+  buttonForm.menu = null
+  buttonForm.role = null
+  buttonForm.data_range = null
+  buttonForm.dept = []
+}
+//权限范围数据
+const dataScopeOptions = ref<[]>()
+//按钮值变化事件
+const onChangeButton = (val: any) => {
+  dataScopeOptions.value = []
+  //获取权限值范围
+  api.GetDataScope({menu_button: val}).then((res: any) => {
+    dataScopeOptions.value = res.data
+  })
+  //获取权限部门值
+  api.GetDataScopeDept({menu_button: val}).then((res: any) => {
+    deptOptions.value = XEUtils.toArrayTree(res.data, {parentKey: 'parent', strict: false})
+  })
+
+}
+//过滤按钮名称
+const formatMenuBtn = (val: any) => {
+  let obj: any = buttonOptions.value?.find((item: any) => {
+    return item.id === val
+  })
+  return obj ? obj.name : null
+}
+//过滤权限范围
+const formatDataRange = (val: any) => {
+  let obj: any = [
+    {
+      "value": 0,
+      "label": '仅本人数据权限'
+    },
+    {
+      "value": 1,
+      "label": '本部门及以下数据权限'
+    },
+    {
+      "value": 2,
+      "label": '本部门数据权限'
+    },
+    {
+      "value": 3,
+      "label": '全部数据权限'
+    },
+    {
+      "value": 4,
+      "label": '自定义数据权限'
+    }
+  ].find((item: any) => {
+    return item.value === val
+  })
+  return obj ? obj.label : null
+}
+//保存按钮表单
+
+const onSaveButtonForm = async () => {
+  const {id: roleId} = editedRoleInfo.value
+  const {id: menuId} = editedMenuInfo.value
+  const form: any = Object.assign({}, buttonForm)
+  form.role = roleId
+  form.menu = menuId
+  //选中的部门
+  const checkedList = deptTree.value.getCheckedKeys()
+  form.dept = checkedList
+  if (!buttonFormRef.value) return
+  await buttonFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      api.CreatePermission(form).then((res: any) => {
+        const {data} = res
+        buttonPermissionData.value.push(data)
+        dialogFormVisible.value = false
+        ElMessage({
+          type: 'success',
+          message: res.msg,
+        })
+      })
+    } else {
+      ElMessage({
+        type: 'error',
+        title: '提交错误',
+        message: 'F12控制台看详情',
+      })
+      console.log('提交错误', fields)
+    }
+  })
+
+}
+//删除按钮权限
+const onDeleteBtn = (scope: any) => {
+  const {row, $index} = scope
+  ElMessageBox.confirm(
+      '您是否要删除数据?',
+      '温馨提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(() => {
+    api.DeletePermission({id: row.id}).then((res: any) => {
+      buttonPermissionData.value.splice($index, 1)
+      ElMessage({
+        type: 'success',
+        message: res.msg,
+      })
+    })
+  })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
+
+}
+/***按钮授权的弹窗****/
+//初始化数据
+const initGet = () => {
+  getMenuData()
+  getRoleToMenu()
+}
+
+/**
+ * 保存授权
+ */
+const onSaveAuth = () => {
+
+  const $table = tableRef.value
+  if ($table) {
+    const selectRecords = $table.getCheckboxRecords()
+    const menuIdList =  selectRecords.map((record:any) => record.menu_id)
+    const {id: roleId} = editedRoleInfo.value
+    const data = {
+      role: roleId,
+      menu: menuIdList
+    }
+    api.SaveMenuPermission(data).then((res: any) => {
+      ElMessage({
+        message: res.msg,
+        type: 'success',
+      })
+    })
+  }
+
+}
+
+
+defineExpose({drawer, editedRoleInfo, initGet})
+</script>
+
+<style scoped>
+
+</style>

web/src/views/system/role/crud.tsx

@@ -27,6 +27,8 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
 	//权限判定
 	const hasPermissions = inject("$hasPermissions")
 
+	// @ts-ignore
+	// @ts-ignore
 	return {
 		crudOptions: {
 			request: {
@@ -175,7 +177,7 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
 							name: 'fs-dict-switch',
 							activeText: '',
 							inactiveText: '',
-							style: '--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6',
+							style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
 							onChange: compute((context) => {
 								return () => {
 									api.UpdateObj(context.row).then((res: APIResponseData) => {

web/src/views/system/role/index.vue

@@ -5,7 +5,8 @@
 				<el-tag size="small">{{ scope.row.url }}</el-tag>
 			</template>
 		</fs-crud>
-		<RolePermission ref="rolePermission"></RolePermission>
+<!--		<RolePermission ref="rolePermission"></RolePermission>-->
+    <permission ref="rolePermission"></permission>
 	</fs-page>
 </template>
 
@@ -14,6 +15,7 @@ import { ref, onMounted } from 'vue';
 import { useExpose, useCrud, dict } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import RolePermission from '/@/views/system/rolePermission/index.vue';
+import permission from './components/permission.vue'
 import * as api from './api';
 import _ from 'lodash-es';
 const rolePermission = ref();

web/src/views/system/rolePermission/index.vue

@@ -198,7 +198,7 @@ let menuData = ref<Tree>()
 const getMenuData = () => {
     api.GetMenu({}).then((res: any) => {
         const {data} = res
-        const list = XEUtils.toArrayTree(data, {parentKey: "parent", strict: true})
+        const list = XEUtils.toArrayTree(data, {parentKey: "parent", key:'menu_id',strict: true})
         menuData.value = list
     })
 }
@@ -212,11 +212,11 @@ const menuNodeClick = (node: any, obj: any) => {
     if (!node.is_catalog) {
         buttonOptions.value = []
         editedMenuInfo.value = node
-        api.GetMenuButton({menu: node.id}).then((res: any) => {
+        api.GetMenuButton({menu: node.menu_id}).then((res: any) => {
             const {data} = res
             buttonOptions.value = data
         })
-        api.getObj({menu: node.id, role: editedRoleInfo.value.id}).then((res: any) => {
+        api.getObj({menu: node.menu_id, role: editedRoleInfo.value.id}).then((res: any) => {
             const {data} = res
             buttonPermissionData.value = data
         })

web/src/views/system/user/crud.tsx

@@ -346,7 +346,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 							name: 'fs-dict-switch',
 							activeText: '',
 							inactiveText: '',
-							style: '--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6',
+							style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
 							onChange: compute((context) => {
 								return () => {
 									api.UpdateObj(context.row).then((res: APIResponseData) => {

web/src/views/system/user/index.vue

@@ -23,7 +23,7 @@
 						@node-click="onTreeNodeClick"
 					>
 						<template #default="{ node, data }">
-							<span class="text-center font-black text-xl">{{ node.label }}</span>
+							<span class="text-center font-black font-normal">{{ node.label }}</span>
 						</template>
 					</el-tree>
 				</el-card>
@@ -142,4 +142,7 @@ onMounted(() => {
 .el-card {
 	height: 100%;
 }
+.font-normal {
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+}
 </style>

web/src/views/system/whiteList/crud.tsx

@@ -217,7 +217,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 							name: 'fs-dict-switch',
 							activeText: '',
 							inactiveText: '',
-							style: '--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6',
+							style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
 							onChange: compute((context) => {
 								return () => {
 									api.UpdateObj(context.row).then((res: APIResponseData) => {

web/vite.config.ts

@@ -17,7 +17,7 @@ const alias: Record<string, string> = {
 const viteConfig = defineConfig((mode: ConfigEnv) => {
 	const env = loadEnv(mode.mode, process.cwd());
 	return {
-		plugins: [vue(), vueJsx(),vueSetupExtend()],
+		plugins: [vue(), vueJsx(), vueSetupExtend()],
 		root: process.cwd(),
 		resolve: { alias },
 		base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
@@ -27,7 +27,7 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 		server: {
 			host: '0.0.0.0',
 			port: env.VITE_PORT as unknown as number,
-			open: env.VITE_OPEN,
+			open: true,
 			hmr: true,
 			proxy: {
 				'/gitee': {