删去登录版

# Conflicts:
#	package.json

package-lock.json

@@ -12,7 +12,8 @@
         "element-plus": "^2.7.6",
         "vue": "^3.4.29",
         "vue-router": "^4.4.0",
-        "vuex": "^4.1.0"
+        "vuex": "^4.1.0",
+        "vuex-persistedstate": "^4.1.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.5",
@@ -916,6 +917,14 @@
       "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz",
       "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1200,6 +1209,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/shvl": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/shvl/-/shvl-2.0.3.tgz",
+      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==",
+      "deprecated": "older versions vulnerable to prototype pollution"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -1307,6 +1322,19 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/vuex-persistedstate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
+      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.3"
+      },
+      "peerDependencies": {
+        "vuex": "^3.0 || ^4.0.0-rc"
+      }
     }
   }
 }

package.json

@@ -13,7 +13,8 @@
     "element-plus": "^2.7.6",
     "vue": "^3.4.29",
     "vue-router": "^4.4.0",
-    "vuex": "^4.1.0"
+    "vuex": "^4.1.0",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",

src/components/HelloWorld.vue

@@ -1,60 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-const count = ref(0)
-</script>
-
-<template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <h1>{{ this.$route.meta.msg }}</h1>
-
-
-  <div class="card">
-    <el-button type="danger" @click="count++">count is {{ count }}</el-button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-.read-the-docs {
-  color: #888;
-}
-</style>

src/router/authentication.js

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

src/services/authenticationService.js

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

src/services/organizationService.js

@@ -2,13 +2,23 @@ import axios  from "axios";
 
 export default {
     getAllOrganizations() {
-        return axios.get('http://localhost:8080/organizations/listAll').then(response => {
+        return axios.get('api/organizations/listAll').then(response => {
             return response.data;
         });
     },
     addOrganization(organization) {
-        return axios.post('http://localhost:8080/organizations/addOrganization', organization).then(response => {
+        return axios.post('api/organizations/addOrganization', organization).then(response => {
             return response.data;
         });
+    },
+    deleteOrganization(organizationId) {
+        return axios.post('api/organizations/deleteOrganization' , {organizationId:organizationId},{headers: {
+            'Content-Type': 'application/json' // 设置 Content-Type 为 application/json
+        }}).then(response => {
+            return response.data;
+        });
+    },
+    getOrganizationByName(organizationName){
+        return axios.get('api/organizations/getByOrganizationName?')
     }
 }

src/store/index.js

@@ -5,6 +5,7 @@ import meetingManagement from './meetingManagement'
 import newsManagement from './newsManagement'
 import organizationManagement from './organizationManagement'
 import userManagement from './userManagement'
+import createPersistedState from "vuex-persistedstate";
 
 // 请不要直接修改本文件，使用修改/store目录下的对应模块名称的js的方式来代替->
 
@@ -16,7 +17,13 @@ const store = createStore({
         newsManagement,
         organizationManagement,
         userManagement
-    }
+    },
+
+    plugins: [
+        createPersistedState({
+            storage: window.localStorage,
+        }),
+    ]
 })
 
 export default store

src/views/authentication_login.vue

@@ -1,36 +0,0 @@
-<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>
-  <el-text size="large">登录</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-button type="success" @click="handleLogin">LOGIN</el-button>
-  <el-button type="success" @click="handleRegister">REGISTER</el-button>
-</template>
-
-<script>
-
-
-
-</script>
-
-<style scoped>
-
-</style>

src/views/authentication_register.vue

@@ -1,59 +0,0 @@
-<script setup>
-import authenticationService from "../services/authenticationService.js";
-import {computed, ref} from "vue";
-import {useRouter} from "vue-router";
-
-const account = ref('');
-const password = ref('');
-const fullname = ref('');
-const organization = ref('');
-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 = () => {
-  router.push('/login');
-};
-
-const handleRegister = () => {
-  const user = {
-    account: account.value,
-    password: password.value,
-    name: fullname.value,
-    organization: organization.value,
-    email: email.value,
-    gender: gender.value,
-    phone: phone.value,
-  };
-
-  authenticationService.register(user).then(res => {
-    alert(res);
-  });
-};
-</script>
-
-
-<template>
-<!--  <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 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-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

@@ -1,13 +1,22 @@
 <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>-->
+  <div class="department-management" v-if="showTable">
+      <el-row :gutter="20" class="toolbar">
+        <el-col :span="4">
+          <el-input v-model="search.name" placeholder="请输入部门名称"></el-input>
+        </el-col>
+        <el-col :span="4">
+          <el-select v-model="search.status" placeholder="部门状态">
+            <el-option label="正常" value=true></el-option>
+            <el-option label="停用" value=false></el-option>
+            <el-option label="全部" value=""></el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-col>
+      </el-row>
+      <el-button type="primary" @click="showDialogAdd = true">添加部门</el-button>
     <el-table
       :data="tableData"
       style="width: 100%; margin-bottom: 20px"
@@ -29,20 +38,26 @@
     <el-table-column prop="organizationStatus" label="部门状态" width="180">
       <template #default="{ row }">
         <span v-if="row.organizationStatus">
-           <el-text type="success">启用</el-text>
+           <el-text type="success">正常</el-text>
         </span>
         <span v-else>
-          <el-text type="danger">禁用</el-text>
+          <el-text type="danger">停用</el-text>
         </span>
       </template>
     </el-table-column>
+        <el-table-column label="操作" width="180">
+          <template #default="scope" >
+            <el-button  type="danger" text @click="deleteOrganization(scope.row.organizationId)">删除</el-button>
+            <el-button  type="danger" text @click="handleUpdate(scope.row.organizationId)">修改</el-button>
+          </template>
+        </el-table-column>
   </el-table>
-
+  </div>
 <!--  添加表单-->
-  <el-dialog v-model="showDialog" title="填写信息" width="80%">
-    <el-form :model="dialogForm">
+  <el-dialog v-model="showDialogAdd" title="填写信息" width="80%">
+    <el-form :model="dialogFormAdd" :rules="rules">
       <el-form-item label="上级部门" :label-width="formLabelWidth">
-        <el-select v-model="dialogForm.parentOrganization">
+        <el-select v-model="dialogFormAdd.parentOrganization">
           <el-option
               v-for="item in originTableData"
               :key="item.organizationId"
@@ -51,37 +66,43 @@
           >
             {{item.organizationName}}
           </el-option>
+          <el-option label="无" value=0></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 prop="organizationName" label="部门名称" :label-width="formLabelWidth">
+        <el-input v-model="dialogFormAdd.organizationName"></el-input>
       </el-form-item>
-      <el-form-item label="显示排列" :label-width="formLabelWidth">
-        <el-input v-model="dialogForm.displayOrder"></el-input>
+      <el-form-item prop="displayOrder" label="显示排列" :label-width="formLabelWidth">
+        <el-input-number v-model="dialogFormAdd.displayOrder" :min=1 :max="100"></el-input-number>
       </el-form-item>
-      <el-form-item label="负责人" :label-width="formLabelWidth">
-        <el-input v-model="dialogForm.leader"></el-input>
+      <el-form-item prop="leader" label="负责人" :label-width="formLabelWidth">
+        <el-input v-model="dialogFormAdd.leader"></el-input>
       </el-form-item>
-      <el-form-item label="联系电话" :label-width="formLabelWidth">
-        <el-input v-model="dialogForm.contactPhone"></el-input>
+      <el-form-item prop="contactPhone" label="联系电话" :label-width="formLabelWidth">
+        <el-input v-model="dialogFormAdd.contactPhone"></el-input>
       </el-form-item>
-      <el-form-item label="邮箱" :label-width="formLabelWidth">
-        <el-input v-model="dialogForm.email"></el-input>
+      <el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
+        <el-input v-model="dialogFormAdd.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-switch v-model="dialogFormAdd.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>
+    <div class="dialog-footer">
+    <span slot="footer">
+        <el-button @click="showDialogAdd = false">取消</el-button>
         <el-button type="primary" @click="submitForm">提交</el-button>
       </span>
+    </div>
   </el-dialog>
+
 </template>
 
 <script lang="ts">
 import {ref, onMounted, defineComponent} from 'vue';
 import organizationService from '../../services/organizationService';
+import {useStore} from 'vuex';
+import {ElMessage, ElMessageBox} from "element-plus";
 
 
 interface Organization {
@@ -99,13 +120,16 @@ interface Organization {
 
 export default defineComponent({
   setup() {
-
-    const showDialog = ref(false);
+    const store = useStore();
+    const showTable = ref(true);
+    const show = ref(false);
+    const showDialogAdd = ref(false);
     const formLabelWidth = ref('120px');
 
-    const dialogForm = ref(
+    const dialogFormAdd = ref(
         {
-          parentOrganization: '',
+          organizationId:0,
+          parentOrganization: 0,
           organizationName: '',
           displayOrder: 0,
           leader: '',
@@ -114,20 +138,33 @@ export default defineComponent({
           organizationStatus: true,
         }
     );
+    const dialogFormPerson = ref({
+
+    });
 
     const originTableData = ref<Organization[]>([]);
     const tableData = ref<Organization[]>([]);
-
+    const treeData = ref();
+    const noChildrenData = ref();
     const fetchData = async () => {
       try {
-        const data = await organizationService.getAllOrganizations(); // 假设此函数可以获取后端数据
+        tableData.value=[];
+        const data = await organizationService.getAllOrganizations();
+        if(data.lenth===1){
+
+        }
         console.log('获取到的部门信息', data);
         originTableData.value = data;
-        console.log(originTableData.value)
-        // 转换数据为树形结构
-        const treeData = buildTree(data); // 假设有一个函数 buildTree 负责构建树形结构
+        console.log(originTableData.value);
+        //buildTree 负责构建树形结构
+        treeData.value = buildTree(originTableData.value);
         console.log('树形结构数据', treeData);
-        tableData.value = treeData;
+        noChildrenData.value = originTableData.value.map(item => ({
+          ...item,
+          children: []  // 将 children 设置为空数组
+        }));
+        console.log('无子组织数据', noChildrenData);
+        tableData.value = treeData.value;
       } catch (error) {
         console.error('Error fetching organization:', error);
       }
@@ -151,34 +188,115 @@ export default defineComponent({
           roots.push(org);
         }
       });
+
+      const sortTree = (nodes: Organization[]) => {
+        nodes.sort((a, b) => a.displayOrder - b.displayOrder);
+        nodes.forEach(node => {
+          if (node.children && node.children.length > 0) {
+            sortTree(node.children);
+          }
+        });
+      };
+
+      sortTree(roots);
+
       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;
+      console.log('提交表单' , dialogFormAdd.value);
+      organizationService.addOrganization(dialogFormAdd.value);
+      ElMessage({
+        type: 'success',
+        message: `添加成功`,
+      })
+      showDialogAdd.value = false;
+
+      dialogFormAdd.value = {
+        organizationId:0,
+        parentOrganization: 0,
+        organizationName: '',
+        displayOrder: 0,
+        leader: '',
+        contactPhone: '',
+        email: '',
+        organizationStatus: true,
+      };
+
+    }
+
+    const deleteOrganization = (organizationId:number) => {
+      ElMessageBox.confirm(
+          '将删除该部门，确定？',
+          '注意！！！',
+          {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+            center: true,
+          }
+      )
+          .then(() => {
+            organizationService.deleteOrganization(organizationId);
+            fetchData();
+            ElMessage({
+              type: 'success',
+              message: '删除成功',
+
+            })
+          })
+          .catch(() => {
+            ElMessage({
+              type: 'info',
+              message: 'Delete canceled',
+            })
+          })
+
+    }
+
+    const handleUpdate = (organizationId:number) => {
+      console.log('编辑部门', organizationId);
+      const organization = originTableData.value.find((item) => item.organizationId === organizationId);
+      console.log('organization', organization);
+      dialogFormAdd.value = {
+        organizationId:organization?.organizationId,
+        parentOrganization: organization?.parentOrganization?.organizationId || 0,
+        organizationName: organization?.organizationName,
+        displayOrder: organization?.displayOrder,
+        leader: organization?.leader,
+        contactPhone: organization?.contactPhone,
+        email: organization?.email,
+        organizationStatus: organization?.organizationStatus,
+      }
+      console.log('dialogFormAdd', dialogFormAdd.value);
+      showDialogAdd.value = true;
+
+    }
+
+    const search = ref({
+      name:'',
+      status:''
+    })
+    const handleSearch = () => {
+      console.log('搜索', search.value);
+      // if(search.value.name != ''){
+        tableData.value = noChildrenData.value.filter(
+            (data) => {
+              const isNameValid = search.value && search.value.name;
+              const isStatusValid = search.value && search.value.status;
+
+              return (!isNameValid || data.organizationName.toLowerCase().includes(search.value.name.toLowerCase())) &&
+                  (!isStatusValid || data.organizationStatus === JSON.parse(search.value.status));
+            }
+        );
+    }
+    const handleReset = () => {
+      search.value.name = '';
+      search.value.status = '';
+      fetchData();
     }
 
     onMounted(() => {
@@ -188,15 +306,49 @@ export default defineComponent({
     return {
       originTableData,
       tableData,
-      showDialog,
-      dialogForm,
+      showDialogAdd,
+      showTable,
+      show,
+      dialogFormAdd,
       submitForm,
       formLabelWidth,
+      deleteOrganization,
+      handleUpdate,
+      search,
+      handleSearch,
+      handleReset,
+    };
+  },
+  data() {
+    return {
+      rules: {
+        organizationName:[{
+          required: true, message: '请输入部门名称', trigger: 'blur'
+        }],
+        leader:[{
+          required: true, message: '请输入负责人名称', trigger: 'blur'
+        }],
+        contactPhone:[{
+          type:'text',required:true,message:'请输入联系电话',trigger:'blur'
+        }],
+        email: [{
+          pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/ ,required: true ,message: '输入邮箱', trigger: 'blur'
+        }],
+      }
     };
   },
 });
 </script>
 
 <style scoped>
+.department-management {
+  padding: 20px;
+}
 
+.toolbar {
+  margin-bottom: 20px;
+}
+.dialog-footer{
+  text-align: right;
+}
 </style>

vite.config.js

@@ -1,7 +1,29 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      '@assets': path.resolve(__dirname, 'src/assets'),
+      '@public': path.resolve(__dirname, 'public'),
+      '@components': path.resolve(__dirname, 'src/components'),
+      '@views': path.resolve(__dirname, 'src/views'),
+      '@store': path.resolve(__dirname, 'src/store'),
+      '@router': path.resolve(__dirname, 'src/router'),
+      '@services': path.resolve(__dirname, 'src/services'),
+    }
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  }
 })