完善组织管理部分

src/api/system/index.ts

@@ -7,5 +7,11 @@ export default {
     addRole: (data: object) => post('/system/role/add', data),
     deleteRole: (id: number) => del('/system/role/delInfoById', { id }),
     editRole: (data: object) => put('/system/role/edit', data)
+  },
+  org: {
+    getList: (params: object) => get('/system/organization/tree', params),
+    del: (id: number) => del('/system/organization/del', { id }),
+    add: (data: object) => post('/system/organization/add',data),
+    edit: (data: object) => put('/system/organization/edit',data),
   }
 }

src/utils/validator.ts

@@ -0,0 +1,11 @@
+const reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
+
+export const phoneValidate = (rule: any, value: any, callback: any) => {
+  if (!value) {
+    return callback()
+  }
+
+  if (!reg_tel.test(value)) {
+    callback(new Error('请填写正确手机号'))
+  }
+}

src/views/system/org/component/edit.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="system-edit-dept-container">
+    <el-dialog :title="(ruleForm.id?'修改':'添加')+'组织'" 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: 'id', label: 'name' }" placeholder="请选择组织" clearable class="w100" v-model="ruleForm.parentId">
+                <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="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="组织名称" prop="name">
+              <el-input v-model="ruleForm.name" 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="负责人" 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="手机号" 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="邮箱" prop="email">
+              <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.id?'修 改':'添 加'}}</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
+import api from '/@/api/system';
+import { phoneValidate } from '/@/utils/validator';
+import { ElMessage } from 'element-plus';
+
+interface RuleFormState {
+	id?: number;
+	parentId: number;
+	orderNum: number;
+	status: number;
+	name: string;
+	leader: string;
+	phone: string;
+	email: string;
+	children?: RuleFormState[];
+}
+interface DeptSate {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+	deptData: RuleFormState[];
+	rules: object;
+}
+
+const baseForm: RuleFormState = {
+	parentId: -1, // 上级组织
+	name: '', // 组织名称
+	orderNum: 0,
+	leader: '',
+	phone: '',
+	email: '',
+	status: 1,
+};
+
+export default defineComponent({
+	name: 'systemEditDept',
+	setup(prop, { emit }) {
+		const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DeptSate>({
+			isShowDialog: false,
+			ruleForm: {
+				...baseForm,
+			},
+			deptData: [], // 组织数据
+			rules: {
+				name: [{ 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();
+			api.org.getList({ status: 1 }).then((res: any) => {
+				state.deptData = res || [];
+			});
+			if (row && typeof row === 'object') {
+				state.ruleForm = row;
+			} else if (row && typeof row === 'number') {
+				state.ruleForm.parentId = row;
+			}
+			state.isShowDialog = true;
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+			const formWrap = unref(formRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					if (!state.ruleForm.parentId) {
+						state.ruleForm.parentId = -1;
+					}
+					if (!state.ruleForm.id) {
+						//添加
+						api.org.add(state.ruleForm).then(() => {
+							ElMessage.success('角色添加成功');
+							closeDialog(); // 关闭弹窗
+							emit('deptList');
+						});
+					} else {
+						//修改
+						api.org.edit(state.ruleForm).then(() => {
+							ElMessage.success('角色修改成功');
+							closeDialog(); // 关闭弹窗
+							emit('deptList');
+						});
+					}
+				}
+			});
+		};
+		const resetForm = () => {
+			state.ruleForm = {
+				...baseForm,
+			};
+		};
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+			formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>

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

@@ -1,185 +0,0 @@
-<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>
-</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";
-
-// 定义接口来定义对象的类型
-interface TableDataRow {
-	deptName: string;
-	id: number;
-  parentId:number;
-	children?: TableDataRow[];
-}
-interface RuleFormState {
-  deptId:number;
-	parentId: number;
-	deptName: string;
-  orderNum: number;
-  leader: string;
-	phone: string | number;
-	email: string;
-	status: number;
-}
-interface DeptSate {
-	isShowDialog: boolean;
-	ruleForm: RuleFormState;
-	deptData: Array<TableDataRow>;
-  rules: object;
-}
-
-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,
-			},
-			deptData: [], // 部门数据
-      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
-      }
-			state.isShowDialog = true;
-		};
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.isShowDialog = false;
-		};
-		// 取消
-		const onCancel = () => {
-			closeDialog();
-		};
-		// 新增
-		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 resetForm = ()=>{
-      state.ruleForm = {
-        deptId:0,
-        parentId: 0, // 上级部门
-        deptName: '', // 部门名称
-        orderNum:0,
-        leader: '',
-        phone: '',
-        email: '',
-        status: 1,
-      }
-    };
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-      formRef,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/system/org/index.vue

@@ -1,18 +1,19 @@
 <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-form-item label="组织名称">
+            <el-input size="default" v-model="tableData.param.name" 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="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,99 +24,90 @@
               <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="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+        <el-table-column prop="name" label="组织名称" show-overflow-tooltip> </el-table-column>
+        <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="排序" 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" 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"/>
+  </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 {
-  deptId:number;
-  parentId:number;
-  deptName:string;
-  status:number;
-  orderNum:number;
-  createdAt:string;
-	children?:TableDataRow[];
+	id: number;
+	parentId: number;
+	name: string;
+	status: number;
+	orderNum: number;
+	leader: string;
+	phone: string;
+	email: string;
+	children?: TableDataRow[];
 }
 interface TableDataState {
 	tableData: {
 		data: Array<TableDataRow>;
 		loading: boolean;
 		param: {
-			pageNum: number;
-			pageSize: number;
-      deptName:string;
-      status:string;
+			name: 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:''
+					name: '',
+					status: 1,
 				},
 			},
 		});
 		// 初始化表格数据
 		const initTableData = () => {
-      deptList();
+			deptList();
+		};
+		const deptList = () => {
+			api.org.getList(state.tableData.param).then((res: any) => {
+				state.tableData.data = res;
+			});
 		};
-    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?.id);
 		};
 		// 打开编辑菜单弹窗
 		const onOpenEditDept = (row: TableDataRow) => {
@@ -123,16 +115,16 @@ export default defineComponent({
 		};
 		// 删除当前行
 		const onTabelRowDel = (row: TableDataRow) => {
-			ElMessageBox.confirm(`此操作将永久删除部门：${row.deptName}, 是否继续?`, '提示', {
+			ElMessageBox.confirm(`此操作将永久删除组织：${row.name}, 是否继续?`, '提示', {
 				confirmButtonText: '删除',
 				cancelButtonText: '取消',
 				type: 'warning',
 			})
 				.then(() => {
-          deleteDept(row.deptId).then(()=>{
-					  ElMessage.success('删除成功');
-            deptList();
-          })
+					api.org.del(row.id).then(() => {
+						ElMessage.success('删除成功');
+						deptList();
+					});
 				})
 				.catch(() => {});
 		};
@@ -142,7 +134,7 @@ export default defineComponent({
 		});
 		return {
 			editDeptRef,
-      deptList,
+			deptList,
 			onOpenAddDept,
 			onOpenEditDept,
 			onTabelRowDel,