基本完成，再完善其他的功能与界面就行

src/App.vue

@@ -5,8 +5,7 @@ import authentication from "./views/authentication_login.vue";
 
 <template>
   <div id="app">
-    <router-view v-if="isHelloRoute"><HelloWorld/></router-view>
+    <router-view ></router-view>
-    <router-view v-if="isAuthenRoute"><authentication/></router-view>
   </div>
 </template>
 

src/router/authentication.js

@@ -1,7 +1,8 @@
 import authentication from '../views/authentication_login.vue'
-
+import register from '../views/authentication_register.vue'
 export default [
+    { path: '/', component: authentication },
     { path: '/login', component: authentication },
-    // { path: '/register', component: Register },
+    { path: '/register', component: register },
     // { path: '/profile', component: Profile }
 ]

src/router/index.js

@@ -9,7 +9,6 @@ import userManagementRoutes from './userManagement'
 import authentication from "../views/authentication_login.vue";
 
 const routes = [
-    { path: '/', component: HelloWorld },
     ...authenticationRoutes,
     ...courseManagementRoutes,
     ...meetingManagementRoutes,

src/router/organizationManagement.js

@@ -1,9 +1,7 @@
-// import OrganizationList from '../views/organization-management/OrganizationList.vue'
+import Organization_main from '../views/organization-management/Organization_main.vue'
-// import OrganizationDetail from '../views/organization-management/OrganizationDetail.vue'
-// import OrganizationEdit from '../views/organization-management/OrganizationEdit.vue'
 
 export default [
-    // { path: '/organizations', component: OrganizationList },
+    { path: '/organizations', component: Organization_main},
     // { path: '/organizations/:id', component: OrganizationDetail },
     // { path: '/organizations/:id/edit', component: OrganizationEdit }
 ]

src/services/authenticationService.js

@@ -1,29 +1,22 @@
 import axios from "axios";
 
 export default {
-    login(username, password, apiUrl="http://localhost:8080"){
+    login(account, password){
-        const url = `${apiUrl}/users/checkLogin`
+        const url = `http://localhost:8080/users/checkLogin`
         const data = {
-            username: username,
+            account: account,
             password: password
         };
         return axios.post(url, data)
             .then(response => {
-                alert(">login方法中<");
+                alert(response.data.account);
-                alert(response.data.username);
                 return response.data;
             });
     },
     register(user){
-        const url = `${apiUrl}/users/checkLogin`
+        const url = `http://localhost:8080/users/checkRegister`
-        const data = {
+        return axios.post(url, user)
-            username: username,
-            password: password
-        };
-        return axios.post(url, data)
             .then(response => {
-                alert(">login方法中<");
-                alert(response.data.username);
                 return response.data;
             });
         //跳转逻辑

src/services/organizationService.js

@@ -0,0 +1,14 @@
+import axios  from "axios";
+
+export default {
+    getAllOrganizations() {
+        return axios.get('http://localhost:8080/organizations/listAll').then(response => {
+            return response.data;
+        });
+    },
+    addOrganization(organization) {
+        return axios.post('http://localhost:8080/organizations/addOrganization', organization).then(response => {
+            return response.data;
+        });
+    }
+}

src/views/authentication_login.vue

@@ -1,39 +1,32 @@
 <script setup>
+import authenticationService from "../services/authenticationService.js";
+import {ref} from "vue";
+import {useRouter} from "vue-router";
+const account = ref('');
+const password = ref('');
 
+const router = useRouter();
+
+const handleLogin = () => {
+  authenticationService.login(account.value,password.value).then(res=>{
+  });
+};
+
+const handleRegister = () => {
+    router.push('/register');
+};
 </script>
 
 <template>
-  <h1>登录</h1>
+  <el-text size="large">登录</el-text>
-  <el-input v-model="username" placeholder="pls enter the username"></el-input>
+  <el-input v-model="account" placeholder="pls enter the account"></el-input>
   <el-input v-model="password" placeholder="pls enter the password"></el-input>
   <el-button type="success" @click="handleLogin">LOGIN</el-button>
   <el-button type="success" @click="handleRegister">REGISTER</el-button>
 </template>
 
 <script>
-   import authenticationService from "../services/authenticationService.js";
 
-   export default {
-     name: 'Authentication',
-     data(){
-       return {
-         username: '',
-         password: '',
-       };
-     },methods:{
-       handleLogin(){
-         authenticationService.login(this.username,this.password).then(res=>{
-           alert(res.username);
-           alert("login方法调用完毕");
-
-         });
-       },handleRegister(){
-         authenticationService.register(this.username,this.password).then(res=>{
-           alert(res);
-         });
-       }
-     }
-   }
 
 
 </script>

src/views/authentication_register.vue

@@ -1,7 +1,9 @@
 <script setup>
 import authenticationService from "../services/authenticationService.js";
+import {computed, ref} from "vue";
+import {useRouter} from "vue-router";
 
-const username = ref('');
+const account = ref('');
 const password = ref('');
 const fullname = ref('');
 const organization = ref('');
@@ -9,21 +11,25 @@ const email = ref('');
 const gender = ref('');
 const phone = ref('');
 const pname = ref('');
+//
+// const topText = computed(() => {
+//   return `Welcome, ${username.value || 'Guest'}!`;
+// });
+const router = useRouter();
 
 const handleBack = () => {
-  location.href = "/login";
+  router.push('/login');
 };
 
 const handleRegister = () => {
   const user = {
-    username: username.value,
+    account: account.value,
     password: password.value,
-    fullname: fullname.value,
+    name: fullname.value,
     organization: organization.value,
     email: email.value,
     gender: gender.value,
     phone: phone.value,
-    pname: pname.value,
   };
 
   authenticationService.register(user).then(res => {
@@ -32,20 +38,22 @@ const handleRegister = () => {
 };
 </script>
 
+
 <template>
-  <el-input v-model="username" placeholder="pls enter the username"></el-input>
+<!--  <el-text>{{ topText }}</el-text>-->
+  <el-input v-model="account" placeholder="pls enter the account"></el-input>
   <el-input v-model="password" placeholder="pls enter the password"></el-input>
-  <el-input v-model="fullname" placeholder="pls enter the fullname"></el-input>
+  <el-input v-model="fullname" placeholder="pls enter the name"></el-input>
   <el-input v-model="organization" placeholder="pls enter the organization"></el-input>
   <el-input v-model="email" placeholder="pls enter the email"></el-input>
   <el-input v-model="gender" placeholder="pls enter the gender"></el-input>
   <el-input v-model="phone" placeholder="pls enter the phone"></el-input>
-  <el-input v-model="pname" placeholder="pls enter the pname"></el-input>
   <el-button type="success" @click="handleBack">BACK</el-button>
   <el-button type="success" @click="handleRegister">REGISTER</el-button>
 </template>
 
 
+
 <style scoped>
 
 </style>

src/views/organization-management/Organization_main.vue

@@ -0,0 +1,202 @@
+<template>
+  <el-text>{{ showDialog }}</el-text>
+  <el-button type="primary" @click="showDialog = true">添加部门</el-button>
+<!--  <el-table :data="tableData"-->
+<!--            style="width: 100%; margin-bottom: 20px"-->
+<!--            height="500px"-->
+<!--            row-key="organizationId"-->
+<!--            border-->
+<!--            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"-->
+<!--            default-expand-all>-->
+    <el-table
+      :data="tableData"
+      style="width: 100%; margin-bottom: 20px"
+      row-key="organizationId"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      border
+      default-expand-all
+    >
+    <el-table-column prop="organizationId" label="部门ID" width="180" />
+    <el-table-column prop="parentOrganization.organizationName" label="上级部门" width="180">
+      <template #default="{ row }">
+        {{ row.parentOrganization ? row.parentOrganization.organizationName : '无' }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="organizationName" label="部门名称" width="180" />
+    <el-table-column prop="leader" label="负责人" width="180" />
+    <el-table-column prop="contactPhone" label="负责人联系电话" width="180" />
+    <el-table-column prop="email" label="负责人邮箱" width="180" />
+    <el-table-column prop="organizationStatus" label="部门状态" width="180">
+      <template #default="{ row }">
+        <span v-if="row.organizationStatus">
+           <el-text type="success">启用</el-text>
+        </span>
+        <span v-else>
+          <el-text type="danger">禁用</el-text>
+        </span>
+      </template>
+    </el-table-column>
+  </el-table>
+
+<!--  添加表单-->
+  <el-dialog v-model="showDialog" title="填写信息" width="80%">
+    <el-form :model="dialogForm">
+      <el-form-item label="上级部门" :label-width="formLabelWidth">
+        <el-select v-model="dialogForm.parentOrganization">
+          <el-option
+              v-for="item in originTableData"
+              :key="item.organizationId"
+              :label="item.organizationName"
+              :value="item.organizationId"
+          >
+            {{item.organizationName}}
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="部门名称" :label-width="formLabelWidth">
+        <el-input v-model="dialogForm.organizationName"></el-input>
+      </el-form-item>
+      <el-form-item label="显示排列" :label-width="formLabelWidth">
+        <el-input v-model="dialogForm.displayOrder"></el-input>
+      </el-form-item>
+      <el-form-item label="负责人" :label-width="formLabelWidth">
+        <el-input v-model="dialogForm.leader"></el-input>
+      </el-form-item>
+      <el-form-item label="联系电话" :label-width="formLabelWidth">
+        <el-input v-model="dialogForm.contactPhone"></el-input>
+      </el-form-item>
+      <el-form-item label="邮箱" :label-width="formLabelWidth">
+        <el-input v-model="dialogForm.email"></el-input>
+      </el-form-item>
+      <el-form-item label="部门状态" :label-width="formLabelWidth">
+        <el-switch v-model="dialogForm.organizationStatus" active-value="true" active-text="启用" inactive-value="false" inactive-text="禁用"></el-switch>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+        <el-button @click="showDialog = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">提交</el-button>
+      </span>
+  </el-dialog>
+</template>
+
+<script lang="ts">
+import { ref, onMounted, defineComponent } from 'vue';
+import organizationService from '../../services/organizationService';
+
+
+interface Organization {
+  organizationId: number;
+  parentOrganization: Organization | null;
+  organizationName: string;
+  leader: string;
+  contactPhone: string;
+  email: string;
+  displayOrder: number;
+  organizationStatus: boolean;
+  children?: Organization[]; // 子组织数组
+  hasChildren: boolean; // 是否有子组织
+}
+
+export default defineComponent({
+  setup() {
+
+    const showDialog = ref(false);
+    const formLabelWidth = ref('120px');
+
+    const dialogForm = ref(
+        {
+          parentOrganization: '',
+          organizationName: '',
+          displayOrder: 0,
+          leader: '',
+          contactPhone: '',
+          email: '',
+          organizationStatus: true,
+        }
+    );
+
+    const originTableData = ref<Organization[]>([]);
+    const tableData = ref<Organization[]>([]);
+
+    const fetchData = async () => {
+      try {
+        const data = await organizationService.getAllOrganizations(); // 假设此函数可以获取后端数据
+        console.log('获取到的部门信息', data);
+        originTableData.value = data;
+        console.log(originTableData.value)
+        // 转换数据为树形结构
+        const treeData = buildTree(data); // 假设有一个函数 buildTree 负责构建树形结构
+        console.log('树形结构数据', treeData);
+        tableData.value = treeData;
+      } catch (error) {
+        console.error('Error fetching organization:', error);
+      }
+    };
+
+    const buildTree = (flatData: Organization[]): Organization[] => {
+      const map: Record<number, Organization> = {};
+      const roots: Organization[] = [];
+
+      flatData.forEach(org => {
+        map[org.organizationId] = org;
+        org.children = [];
+      });
+
+      flatData.forEach(org => {
+        if (org.parentOrganization?.organizationId && map[org.parentOrganization.organizationId]) {
+          map[org.parentOrganization.organizationId].children.push(org);
+          map[org.parentOrganization.organizationId].hasChildren = false;
+          // map[org.organizationId].hasChildren = true; // 标记是否有子组织
+        } else {
+          roots.push(org);
+        }
+      });
+      console.log('roots:', roots);
+      return roots;
+    };
+    // const buildTree = (flatData: Organization[]): Organization[] => {
+    //   const map: Record<number, Organization> = {};
+    //   const roots: Organization[] = [];
+    //
+    //   flatData.forEach(org => {
+    //     map[org.organizationId] = org;
+    //     org.children = [];
+    //   });
+    //
+    //   flatData.forEach(org => {
+    //     if (org.parentOrganization && map[org.parentOrganization.organizationId]) {
+    //       map[org.parentOrganization.organizationId].children.push(org);
+    //       map[org.organizationId].hasChildren = true; // 标记是否有子组织
+    //     } else {
+    //       roots.push(org);
+    //     }
+    //   });
+    //   console.log('roots:', roots);
+    //   return roots;
+    // };
+
+    const submitForm = () => {
+      console.log('提交表单', dialogForm.value);
+      organizationService.addOrganization(dialogForm.value);
+      showDialog.value = false;
+    }
+
+    onMounted(() => {
+      fetchData();
+    });
+
+    return {
+      originTableData,
+      tableData,
+      showDialog,
+      dialogForm,
+      submitForm,
+      formLabelWidth,
+    };
+  },
+});
+</script>
+
+<style scoped>
+
+</style>