完善部分管理页面

src/api/system/dept/index.ts

@@ -1,21 +0,0 @@
-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({
-        url: '/system/dept/edit',
-        method: 'put',
-        data:data
-    })
-}
-
-
-export function deleteDept(id:number) {
-    return request({
-        url: '/system/dept/delete',
-        method: 'delete',
-        data:{id}
-    })
-}

src/api/system/index.ts

@@ -13,5 +13,11 @@ export default {
     del: (id: number) => del('/system/organization/del', { id }),
     add: (data: object) => post('/system/organization/add',data),
     edit: (data: object) => put('/system/organization/edit',data),
+  },
+  dept: {
+    getList: (params: object) => get('/system/dept/tree', params),
+    del: (deptId: number) => del('/system/dept/del', { deptId }),
+    add: (data: object) => post('/system/dept/add',data),
+    edit: (data: object) => put('/system/dept/edit',data),
   }
 }

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

@@ -1,9 +1,19 @@
 <template>
   <div class="system-edit-dept-container">
-    <el-dialog :title="(ruleForm.deptId!==0?'修改':'添加')+'部门'" v-model="isShowDialog" width="769px">
+    <el-dialog :title="(ruleForm.deptId?'修改':'添加')+'部门'" 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="所属组织" prop="organizationId">
+              <el-cascader :options="orgData" :props="{ checkStrictly: true,emitPath: false, value: 'id', label: 'name' }" placeholder="请选择组织" clearable class="w100" v-model="ruleForm.organizationId">
+                <template #default="{ node, data }">
+                  <span>{{ data.name }}</span>
+                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+                </template>
+              </el-cascader>
+            </el-form-item>
+          </el-col>
+          <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 }">
@@ -19,17 +29,17 @@
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="负责人">
+            <el-form-item label="负责人" prop="leader">
               <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-form-item label="手机号" prop="phone">
               <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-form-item label="邮箱" prop="email">
               <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
             </el-form-item>
           </el-col>
@@ -48,7 +58,7 @@
       <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>
+          <el-button type="primary" @click="onSubmit" size="default">{{ruleForm.deptId?'修 改':'添 加'}}</el-button>
         </span>
       </template>
     </el-dialog>
@@ -56,62 +66,71 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent, getCurrentInstance, ref, unref } from 'vue';
-import { addDept, editDept, getDeptList } from '/@/api/system/dept';
+import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
+import api from '/@/api/system';
+import { phoneValidate } from '/@/utils/validator';
 import { ElMessage } from 'element-plus';
 
-// 定义接口来定义对象的类型
-interface TableDataRow {
-	deptName: string;
-	id: number;
-	parentId: number;
-	children?: TableDataRow[];
-}
 interface RuleFormState {
-	id: number;
+	deptId?: number;
 	parentId: number;
-	organizationId: number;
-	deptName: string;
+	organizationId: number | null;
 	orderNum: number;
+	status: number;
+	deptName: string;
 	leader: string;
-	phone: string | number;
+	phone: string;
 	email: string;
-	status: number;
+	children?: RuleFormState[];
 }
 interface DeptSate {
 	isShowDialog: boolean;
 	ruleForm: RuleFormState;
-	deptData: Array<TableDataRow>;
+	deptData: RuleFormState[];
+	orgData: any[];
 	rules: object;
 }
 
+const baseForm: RuleFormState = {
+	parentId: -1, // 上级部门
+	deptName: '', // 部门名称
+	organizationId: null, // 组织名称
+	orderNum: 0,
+	leader: '',
+	phone: '',
+	email: '',
+	status: 1,
+};
+
 export default defineComponent({
 	name: 'systemEditDept',
 	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, // 上级部门
-				deptName: '', // 部门名称
-				orderNum: 0,
-				leader: '',
-				phone: '',
-				email: '',
-				status: 1,
+				...baseForm,
 			},
 			deptData: [], // 部门数据
+			orgData: [], // 组织数据
 			rules: {
+				organizationId: [{ required: true, message: '组织不能为空', trigger: 'blur' }],
 				deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
+				leader: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+				phone: [{ validator: phoneValidate, trigger: 'blur' }],
+				email: [{ type: 'email', message: '请输入正确邮箱', trigger: 'blur' }],
 			},
 		});
+
 		// 打开弹窗
 		const openDialog = (row?: RuleFormState | number) => {
 			resetForm();
-			getDeptList().then((res: any) => {
-				state.deptData = proxy.handleTree(res.data.deptList ?? [], 'deptId', 'parentId');
+			api.dept.getList({ status: 1 }).then((res: any) => {
+				state.deptData = res || [];
+			});
+
+			api.org.getList({ status: 1 }).then((res: any) => {
+				state.orgData = res || [];
 			});
 			if (row && typeof row === 'object') {
 				state.ruleForm = row;
@@ -130,20 +149,27 @@ export default defineComponent({
 		};
 		// 新增
 		const onSubmit = () => {
+			console.log(state.ruleForm.parentId);
 			const formWrap = unref(formRef) as any;
 			if (!formWrap) return;
 			formWrap.validate((valid: boolean) => {
 				if (valid) {
-					if (state.ruleForm.deptId === 0) {
+					console.log(state.ruleForm);
+					console.log(state.ruleForm.parentId);
+					if (!state.ruleForm.parentId) {
+						state.ruleForm.parentId = -1;
+					}
+					console.log(state.ruleForm.parentId);
+					if (!state.ruleForm.deptId) {
 						//添加
-						addDept(state.ruleForm).then(() => {
+						api.dept.add(state.ruleForm).then(() => {
 							ElMessage.success('角色添加成功');
 							closeDialog(); // 关闭弹窗
 							emit('deptList');
 						});
 					} else {
 						//修改
-						editDept(state.ruleForm).then(() => {
+						api.dept.edit(state.ruleForm).then(() => {
 							ElMessage.success('角色修改成功');
 							closeDialog(); // 关闭弹窗
 							emit('deptList');
@@ -154,14 +180,7 @@ export default defineComponent({
 		};
 		const resetForm = () => {
 			state.ruleForm = {
-				deptId: 0,
-				parentId: 0, // 上级部门
-				deptName: '', // 部门名称
-				orderNum: 0,
-				leader: '',
-				phone: '',
-				email: '',
-				status: 1,
+				...baseForm,
 			};
 		};
 		return {

src/views/system/dept/index.vue

@@ -8,8 +8,9 @@
           </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="1" />
+              <el-option label="禁用" :value="0" />
             </el-select>
           </el-form-item>
           <el-form-item>
@@ -23,39 +24,39 @@
               <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>
+        <el-table-column prop="status" label="部门状态" align="center" min-width="120">
           <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">
+        <el-table-column prop="orderNum" label="排序" align="center" min-width="120"></el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" align="center" min-width="180"></el-table-column>
+        <el-table-column label="操作" align="center" 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>
+            <el-button size="small" text type="warning" @click="onOpenEditDept(scope.row)">修改</el-button>
+            <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
-    <EditDept ref="editDeptRef" @deptList="deptList" />
+    <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 } 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 EditDept from './component/edit.vue';
+import api from '/@/api/system';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
@@ -64,7 +65,9 @@ interface TableDataRow {
 	deptName: string;
 	status: number;
 	orderNum: number;
-	createdAt: string;
+	leader: string;
+	phone: string;
+	email: string;
 	children?: TableDataRow[];
 }
 interface TableDataState {
@@ -72,29 +75,24 @@ interface TableDataState {
 		data: Array<TableDataRow>;
 		loading: boolean;
 		param: {
-			pageNum: number;
-			pageSize: number;
 			deptName: string;
-			status: string;
+			status: number;
 		};
 	};
 }
 
 export default defineComponent({
-	name: 'systemDept',
+	name: 'systemOrg',
 	components: { EditDept },
 	setup() {
-		const { proxy } = getCurrentInstance() as any;
 		const editDeptRef = ref();
 		const state = reactive<TableDataState>({
 			tableData: {
 				data: [],
 				loading: false,
 				param: {
-					pageNum: 1,
-					pageSize: 10,
 					deptName: '',
-					status: '',
+					status: -1,
 				},
 			},
 		});
@@ -103,8 +101,8 @@ export default defineComponent({
 			deptList();
 		};
 		const deptList = () => {
-			getDeptList(state.tableData.param).then((res: any) => {
-				state.tableData.data = proxy.handleTree(res.data.deptList ?? [], 'deptId', 'parentId');
+			api.dept.getList(state.tableData.param).then((res: any) => {
+				state.tableData.data = res;
 			});
 		};
 		// 打开新增菜单弹窗
@@ -123,12 +121,11 @@ export default defineComponent({
 				type: 'warning',
 			})
 				.then(() => {
-					deleteDept(row.deptId).then(() => {
+					api.dept.del(row.deptId).then(() => {
 						ElMessage.success('删除成功');
 						deptList();
 					});
 				})
-				.catch(() => {});
 		};
 		// 页面加载时
 		onMounted(() => {

src/views/system/org/index.vue

@@ -92,7 +92,7 @@ export default defineComponent({
 				loading: false,
 				param: {
 					name: '',
-					status: 1,
+					status: -1,
 				},
 			},
 		});