RyanGoodwill/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
MiLla 2024-06-29 17:10:39 +08:00
parent b613331464
commit f369e99292
9 changed files with 261 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -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 v-if="isAuthenRoute"><authentication/></router-view>
<router-view ></router-view>
</div>
</template>

5
src/router/authentication.js
View File

@ -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 }
]

1
src/router/index.js
View File

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

6
src/router/organizationManagement.js
View File

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

19
src/services/authenticationService.js
View File

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

14
src/services/organizationService.js
View File

@ -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;
});
}
}

41
src/views/authentication_login.vue
View File

@ -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-input v-model="username" placeholder="pls enter the username"></el-input>
<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>
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>

24
src/views/authentication_register.vue
View File

@ -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>

202
src/views/organization-management/Organization_main.vue Normal file
View File

@ -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>