优化系统接口api分类提取

src/api/system/dept/index.ts

@@ -1,22 +1,7 @@
-import request from '/@/utils/request';
-
-export function getDeptList(query?:Object) {
-    return request({
-        url: '/system/dept/list',
-        method: 'get',
-        params:query
-    })
-}
-
-
-export function addDept(data:object) {
-    return request({
-        url: '/system/dept/add',
-        method: 'post',
-        data:data
-    })
-}
+import request,{ get, post, del, put } from '/@/utils/request';
 
+export const getDeptList = (params: object) => post('/system/dept/tree', params)
+export const addDept = (data: object) => post('/system/dept/add', data)
 
 export function editDept(data:object) {
     return request({

src/api/system/index.ts

@@ -0,0 +1,11 @@
+import { get, post, del, put } from '/@/utils/request';
+
+export default {
+  role: {
+    getRoleList: (params: object) => get('/system/role/tree', params),
+    getRole: (id: number) => get('/system/role/getInfoById', { id }),
+    addRole: (data: object) => post('/system/role/add', data),
+    deleteRole: (id: number) => del('/system/role/delInfoById', { id }),
+    editRole: (data: object) => put('/system/role/edit', data)
+  }
+}

src/api/system/role/index.ts

@@ -1,7 +0,0 @@
-import { get, post, del, put } from '/@/utils/request';
-
-export const getRoleList = (params: object) => get('/system/role/tree', params)
-export const getRole = (id: number) => get('/system/role/getInfoById', { id })
-export const addRole = (data: object) => post('/system/role/add', data)
-export const deleteRole = (id: number) => del('/system/role/delInfoById', { id })
-export const editRole = (data: object) => put('/system/role/edit', data)

src/views/system/dept/component/editDept.vue

@@ -1,85 +1,79 @@
 <template>
-	<div class="system-edit-dept-container">
-		<el-dialog :title="(ruleForm.deptId!==0?'修改':'添加')+'部门'" v-model="isShowDialog" width="769px">
-			<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="上级部门">
-							<el-cascader
-								:options="deptData"
-								:props="{ checkStrictly: true,emitPath: false, value: 'deptId', label: 'deptName' }"
-								placeholder="请选择部门"
-								clearable
-								class="w100"
-								v-model="ruleForm.parentId"
-							>
-								<template #default="{ node, data }">
-									<span>{{ data.deptName }}</span>
-									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-								</template>
-							</el-cascader>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="部门名称" prop="deptName">
-							<el-input v-model="ruleForm.deptName" placeholder="请输入部门名称" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="负责人">
-							<el-input v-model="ruleForm.leader" placeholder="请输入负责人" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="手机号">
-							<el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="邮箱">
-							<el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="排序">
-							<el-input-number v-model="ruleForm.orderNum" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="部门状态">
-							<el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.deptId!==0?'修 改':'添 加'}}</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
+  <div class="system-edit-dept-container">
+    <el-dialog :title="(ruleForm.deptId!==0?'修改':'添加')+'部门'" v-model="isShowDialog" width="769px">
+      <el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
+        <el-row :gutter="35">
+          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+            <el-form-item label="上级部门">
+              <el-cascader :options="deptData" :props="{ checkStrictly: true,emitPath: false, value: 'deptId', label: 'deptName' }" placeholder="请选择部门" clearable class="w100" v-model="ruleForm.parentId">
+                <template #default="{ node, data }">
+                  <span>{{ data.deptName }}</span>
+                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+                </template>
+              </el-cascader>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="部门名称" prop="deptName">
+              <el-input v-model="ruleForm.deptName" placeholder="请输入部门名称" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="负责人">
+              <el-input v-model="ruleForm.leader" placeholder="请输入负责人" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="手机号">
+              <el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="邮箱">
+              <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="排序">
+              <el-input-number v-model="ruleForm.orderNum" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="部门状态">
+              <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="onCancel" size="default">取 消</el-button>
+          <el-button type="primary" @click="onSubmit" size="default">{{ruleForm.deptId!==0?'修 改':'添 加'}}</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts">
-import {reactive, toRefs, defineComponent, getCurrentInstance,ref,unref} from 'vue';
-import {addDept,editDept, getDeptList} from "/@/api/system/dept";
-import {ElMessage} from "element-plus";
+import { reactive, toRefs, defineComponent, getCurrentInstance, ref, unref } from 'vue';
+import { addDept, editDept, getDeptList } from '/@/api/system/dept';
+import { ElMessage } from 'element-plus';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
 	deptName: string;
 	id: number;
-  parentId:number;
+	parentId: number;
 	children?: TableDataRow[];
 }
 interface RuleFormState {
-  deptId:number;
+	id: number;
 	parentId: number;
+	organizationId: number;
 	deptName: string;
-  orderNum: number;
-  leader: string;
+	orderNum: number;
+	leader: string;
 	phone: string | number;
 	email: string;
 	status: number;
@@ -88,44 +82,42 @@ interface DeptSate {
 	isShowDialog: boolean;
 	ruleForm: RuleFormState;
 	deptData: Array<TableDataRow>;
-  rules: object;
+	rules: object;
 }
 
 export default defineComponent({
 	name: 'systemEditDept',
-	setup(prop,{emit}) {
-    const {proxy} = getCurrentInstance() as any;
-    const formRef = ref<HTMLElement | null>(null);
+	setup(prop, { emit }) {
+		const { proxy } = getCurrentInstance() as any;
+		const formRef = ref<HTMLElement | null>(null);
 		const state = reactive<DeptSate>({
 			isShowDialog: false,
 			ruleForm: {
-        deptId:0,
-        parentId: 0, // 上级部门
+				deptId: 0,
+				parentId: 0, // 上级部门
 				deptName: '', // 部门名称
-        orderNum:0,
-        leader: '',
-        phone: '',
-        email: '',
-        status: 1,
+				orderNum: 0,
+				leader: '',
+				phone: '',
+				email: '',
+				status: 1,
 			},
 			deptData: [], // 部门数据
-      rules: {
-        deptName:[
-          {required: true, message: "部门名称不能为空", trigger: "blur"},
-        ]
-      }
+			rules: {
+				deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
+			},
 		});
 		// 打开弹窗
-		const openDialog = (row?: RuleFormState|number) => {
-      resetForm()
-      getDeptList().then((res:any)=>{
-        state.deptData =  proxy.handleTree(res.data.deptList??[], "deptId","parentId");
-      });
-      if(row && typeof row === "object"){
-        state.ruleForm = row;
-      }else if(row && typeof row === 'number'){
-        state.ruleForm.parentId = row
-      }
+		const openDialog = (row?: RuleFormState | number) => {
+			resetForm();
+			getDeptList().then((res: any) => {
+				state.deptData = proxy.handleTree(res.data.deptList ?? [], 'deptId', 'parentId');
+			});
+			if (row && typeof row === 'object') {
+				state.ruleForm = row;
+			} else if (row && typeof row === 'number') {
+				state.ruleForm.parentId = row;
+			}
 			state.isShowDialog = true;
 		};
 		// 关闭弹窗
@@ -138,46 +130,46 @@ export default defineComponent({
 		};
 		// 新增
 		const onSubmit = () => {
-      const formWrap = unref(formRef) as any;
-      if (!formWrap) return;
-      formWrap.validate((valid: boolean) => {
-        if (valid) {
-          if(state.ruleForm.deptId===0){
-            //添加
-            addDept(state.ruleForm).then(()=>{
-              ElMessage.success('角色添加成功');
-              closeDialog(); // 关闭弹窗
-              emit('deptList')
-            });
-          }else{
-            //修改
-            editDept(state.ruleForm).then(()=>{
-              ElMessage.success('角色修改成功');
-              closeDialog(); // 关闭弹窗
-              emit('deptList')
-            });
-          }
-        }
-      });
+			const formWrap = unref(formRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					if (state.ruleForm.deptId === 0) {
+						//添加
+						addDept(state.ruleForm).then(() => {
+							ElMessage.success('角色添加成功');
+							closeDialog(); // 关闭弹窗
+							emit('deptList');
+						});
+					} else {
+						//修改
+						editDept(state.ruleForm).then(() => {
+							ElMessage.success('角色修改成功');
+							closeDialog(); // 关闭弹窗
+							emit('deptList');
+						});
+					}
+				}
+			});
+		};
+		const resetForm = () => {
+			state.ruleForm = {
+				deptId: 0,
+				parentId: 0, // 上级部门
+				deptName: '', // 部门名称
+				orderNum: 0,
+				leader: '',
+				phone: '',
+				email: '',
+				status: 1,
+			};
 		};
-    const resetForm = ()=>{
-      state.ruleForm = {
-        deptId:0,
-        parentId: 0, // 上级部门
-        deptName: '', // 部门名称
-        orderNum:0,
-        leader: '',
-        phone: '',
-        email: '',
-        status: 1,
-      }
-    };
 		return {
 			openDialog,
 			closeDialog,
 			onCancel,
 			onSubmit,
-      formRef,
+			formRef,
 			...toRefs(state),
 		};
 	},

src/views/system/dept/index.vue

@@ -1,18 +1,18 @@
 <template>
-	<div class="system-dept-container">
-		<el-card shadow="hover">
-			<div class="system-dept-search mb15">
+  <div class="system-dept-container">
+    <el-card shadow="hover">
+      <div class="system-dept-search mb15">
         <el-form :inline="true">
           <el-form-item label="部门名称">
-            <el-input size="default" v-model="tableData.param.deptName" placeholder="请输入部门名称" class="w-50 m-2" clearable/>
+            <el-input size="default" v-model="tableData.param.deptName" placeholder="请输入部门名称" class="w-50 m-2" clearable />
           </el-form-item>
           <el-form-item label="状态">
             <el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.status" clearable>
-              <el-option label="启用"  value="1" />
-              <el-option label="禁用"  value="0" />
+              <el-option label="启用" value="1" />
+              <el-option label="禁用" value="0" />
             </el-select>
           </el-form-item>
-				  <el-form-item>
+          <el-form-item>
             <el-button size="default" type="primary" class="ml10" @click="deptList">
               <el-icon>
                 <ele-Search />
@@ -23,55 +23,49 @@
               <el-icon>
                 <ele-FolderAdd />
               </el-icon>
-              新增部门
+              新增组织
             </el-button>
           </el-form-item>
         </el-form>
       </div>
-			<el-table
-				:data="tableData.data"
-				style="width: 100%"
-				row-key="deptId"
-				default-expand-all
-				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-			>
-				<el-table-column prop="deptName" label="部门名称" show-overflow-tooltip> </el-table-column>
-				<el-table-column prop="status" label="部门状态" show-overflow-tooltip>
-					<template #default="scope">
-						<el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
-						<el-tag type="info" v-else>禁用</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="orderNum" label="排序" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
-				<el-table-column label="操作" show-overflow-tooltip width="140">
-					<template #default="scope">
-						<el-button size="small" type="text" @click="onOpenAddDept(scope.row)">新增</el-button>
-						<el-button size="small" type="text" @click="onOpenEditDept(scope.row)">修改</el-button>
-						<el-button size="small" type="text" @click="onTabelRowDel(scope.row)">删除</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-		</el-card>
-		<EditDept ref="editDeptRef" @deptList="deptList"/>
-	</div>
+      <el-table :data="tableData.data" style="width: 100%" row-key="deptId" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+        <el-table-column prop="deptName" label="部门名称" show-overflow-tooltip> </el-table-column>
+        <el-table-column prop="status" label="部门状态" show-overflow-tooltip>
+          <template #default="scope">
+            <el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
+            <el-tag type="info" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderNum" label="排序" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
+        <el-table-column label="操作" show-overflow-tooltip width="140">
+          <template #default="scope">
+            <el-button size="small" type="text" @click="onOpenAddDept(scope.row)">新增</el-button>
+            <el-button size="small" type="text" @click="onOpenEditDept(scope.row)">修改</el-button>
+            <el-button size="small" type="text" @click="onTabelRowDel(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <EditDept ref="editDeptRef" @deptList="deptList" />
+  </div>
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive, onMounted, defineComponent,getCurrentInstance } from 'vue';
+import { ref, toRefs, reactive, onMounted, defineComponent, getCurrentInstance } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditDept from '/@/views/system/dept/component/editDept.vue';
-import {deleteDept, getDeptList} from "/@/api/system/dept";
+import { deleteDept, getDeptList } from '/@/api/system/dept';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
-  deptId:number;
-  parentId:number;
-  deptName:string;
-  status:number;
-  orderNum:number;
-  createdAt:string;
-	children?:TableDataRow[];
+	deptId: number;
+	parentId: number;
+	deptName: string;
+	status: number;
+	orderNum: number;
+	createdAt: string;
+	children?: TableDataRow[];
 }
 interface TableDataState {
 	tableData: {
@@ -80,8 +74,8 @@ interface TableDataState {
 		param: {
 			pageNum: number;
 			pageSize: number;
-      deptName:string;
-      status:string;
+			deptName: string;
+			status: string;
 		};
 	};
 }
@@ -90,7 +84,7 @@ export default defineComponent({
 	name: 'systemDept',
 	components: { EditDept },
 	setup() {
-    const {proxy} = getCurrentInstance() as any;
+		const { proxy } = getCurrentInstance() as any;
 		const editDeptRef = ref();
 		const state = reactive<TableDataState>({
 			tableData: {
@@ -99,23 +93,23 @@ export default defineComponent({
 				param: {
 					pageNum: 1,
 					pageSize: 10,
-          deptName:'',
-          status:''
+					deptName: '',
+					status: '',
 				},
 			},
 		});
 		// 初始化表格数据
 		const initTableData = () => {
-      deptList();
+			deptList();
+		};
+		const deptList = () => {
+			getDeptList(state.tableData.param).then((res: any) => {
+				state.tableData.data = proxy.handleTree(res.data.deptList ?? [], 'deptId', 'parentId');
+			});
 		};
-    const deptList = ()=>{
-      getDeptList(state.tableData.param).then((res:any)=>{
-        state.tableData.data = proxy.handleTree(res.data.deptList??[], "deptId","parentId");
-      });
-    };
 		// 打开新增菜单弹窗
 		const onOpenAddDept = (row?: TableDataRow) => {
-      editDeptRef.value.openDialog(row?.deptId);
+			editDeptRef.value.openDialog(row?.deptId);
 		};
 		// 打开编辑菜单弹窗
 		const onOpenEditDept = (row: TableDataRow) => {
@@ -129,10 +123,10 @@ export default defineComponent({
 				type: 'warning',
 			})
 				.then(() => {
-          deleteDept(row.deptId).then(()=>{
-					  ElMessage.success('删除成功');
-            deptList();
-          })
+					deleteDept(row.deptId).then(() => {
+						ElMessage.success('删除成功');
+						deptList();
+					});
 				})
 				.catch(() => {});
 		};
@@ -142,7 +136,7 @@ export default defineComponent({
 		});
 		return {
 			editDeptRef,
-      deptList,
+			deptList,
 			onOpenAddDept,
 			onOpenEditDept,
 			onTabelRowDel,

src/views/system/role/component/editRole.vue

@@ -61,7 +61,7 @@
 
 <script lang="ts">
 import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
-import { addRole, editRole, getRole } from '/@/api/system/role';
+import api from '/@/api/system';
 import { getMenuList } from '/@/api/system/menu';
 import { ElMessage } from 'element-plus';
 import { getBackEndControlRoutes } from '/@/router/backEnd';
@@ -139,7 +139,7 @@ export default defineComponent({
 			resetForm();
 			getMenuData();
 			if (row) {
-				getRole(row.id).then((res: any) => {
+				api.role.getRole(row.id).then((res: any) => {
 					state.formData = res;
 					// if (res.data.role) {
 					// 	state.formData = res.data.role;
@@ -170,7 +170,7 @@ export default defineComponent({
 					// state.formData.menuIds = getMenuAllCheckedKeys();
 					if (state.formData.id === 0) {
 						//添加
-						addRole(state.formData)
+						api.role.addRole(state.formData)
 							.then(() => {
 								ElMessage.success('角色添加成功');
 								closeDialog(); // 关闭弹窗
@@ -182,7 +182,7 @@ export default defineComponent({
 							});
 					} else {
 						//修改
-						editRole(state.formData)
+						api.role.editRole(state.formData)
 							.then(() => {
 								ElMessage.success('角色修改成功');
 								closeDialog(); // 关闭弹窗
@@ -250,6 +250,7 @@ export default defineComponent({
 			menuRef,
 			formRef,
 			handleCheckedTreeExpand,
+			getMenuAllCheckedKeys,
 			handleCheckedTreeNodeAll,
 			handleCheckedTreeConnect,
 			resetMenuSession,

src/views/system/role/index.vue

@@ -73,7 +73,7 @@ import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentIns
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditRole from '/@/views/system/role/component/editRole.vue';
 import permissionVue from '/@/views/system/role/component/permission.vue';
-import { deleteRole, getRoleList } from '/@/api/system/role';
+import api from '/@/api/system';
 // 定义接口来定义对象的类型
 interface TableData {
 	id: number;
@@ -120,7 +120,7 @@ export default defineComponent({
 			roleList();
 		};
 		const roleList = () => {
-			getRoleList(state.tableData.param).then((res: Array<TableData>) => {
+			api.role.getRoleList(state.tableData.param).then((res: Array<TableData>) => {
 				state.tableData.data = res || [];
 			});
 		};
@@ -140,7 +140,7 @@ export default defineComponent({
 				type: 'warning',
 			})
 				.then(() => {
-					deleteRole(row.id).then(() => {
+					api.role.deleteRole(row.id).then(() => {
 						ElMessage.success('删除成功');
 						proxy.$refs['editRoleRef'].resetMenuSession();
 						roleList();