基本完成，再完善其他的功能与界面就行
This commit is contained in:
parent
1c2ded6dcd
commit
34efcf19ee
@ -1,60 +1,175 @@
|
||||
<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 class="login-page">
|
||||
<div class="login-container">
|
||||
<h2>测器汇管理系统</h2>
|
||||
<el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="0px">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" placeholder="请输入您的账号" prefix-icon="el-icon-user"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="请输入您的密码" prefix-icon="el-icon-lock"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
},
|
||||
rules: {
|
||||
username: [{ type:'email',required: true ,message: '请输入您的账号', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '请输入您的密码', trigger: 'blur' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
// 提交表单
|
||||
console.log('登录成功');
|
||||
} else {
|
||||
console.log('登录失败');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
.login-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: url('https://via.placeholder.com/1920x1080') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
|
||||
.login-container {
|
||||
width: 400px;
|
||||
padding: 40px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
}
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
|
||||
.login-container h2 {
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!-- <div class="department-management">-->
|
||||
<!-- <el-row :gutter="20" class="toolbar">-->
|
||||
<!-- <el-col :span="4">-->
|
||||
<!-- <el-input v-model="searchForm.departmentName" placeholder="请输入部门名称"></el-input>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="4">-->
|
||||
<!-- <el-select v-model="searchForm.status" placeholder="部门状态">-->
|
||||
<!-- <el-option label="正常" value="正常"></el-option>-->
|
||||
<!-- <el-option label="停用" value="停用"></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="4">-->
|
||||
<!-- <el-button type="primary" @click="search">搜索</el-button>-->
|
||||
<!-- <el-button @click="reset">重置</el-button>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- <el-table :data="departments" style="width: 100%">-->
|
||||
<!-- <el-table-column prop="name" label="部门名称" width="180"></el-table-column>-->
|
||||
<!-- <el-table-column prop="order" label="排序" width="80"></el-table-column>-->
|
||||
<!-- <el-table-column prop="status" label="状态" width="100">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-tag :type="scope.row.status === '正常' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column prop="createdTime" label="创建时间" width="200"></el-table-column>-->
|
||||
<!-- <el-table-column label="操作" width="180">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button type="text" size="small" @click="editDepartment(scope.row)">修改</el-button>-->
|
||||
<!-- <el-button type="text" size="small" @click="addSubDepartment(scope.row)">新增</el-button>-->
|
||||
<!-- <el-button type="text" size="small" @click="deleteDepartment(scope.row)">删除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </div>-->
|
||||
<!--</template>-->
|
||||
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!-- data() {-->
|
||||
<!-- return {-->
|
||||
<!-- searchForm: {-->
|
||||
<!-- departmentName: '',-->
|
||||
<!-- status: '',-->
|
||||
<!-- },-->
|
||||
<!-- departments: [-->
|
||||
<!-- // 示例数据-->
|
||||
<!-- { name: '测盟会', order: 0, status: '正常', createdTime: '2021-09-21 17:00:30' },-->
|
||||
<!-- { name: '深圳总公司', order: 1, status: '正常', createdTime: '2021-09-21 17:00:31', children: [-->
|
||||
<!-- { name: '研发部门', order: 1, status: '正常', createdTime: '2021-09-21 17:00:31' },-->
|
||||
<!-- { name: '市场部门', order: 2, status: '正常', createdTime: '2021-09-21 17:00:32' },-->
|
||||
<!-- { name: '测试部门', order: 3, status: '正常', createdTime: '2021-09-21 17:00:32' },-->
|
||||
<!-- ]},-->
|
||||
<!-- { name: '长沙分公司', order: 2, status: '正常', createdTime: '2021-09-21 17:00:33', children: [-->
|
||||
<!-- { name: '运营部门', order: 1, status: '正常', createdTime: '2021-09-21 17:00:33' },-->
|
||||
<!-- { name: '财务部门', order: 2, status: '正常', createdTime: '2021-09-21 17:00:34' },-->
|
||||
<!-- ]},-->
|
||||
<!-- ],-->
|
||||
<!-- };-->
|
||||
<!-- },-->
|
||||
<!-- methods: {-->
|
||||
<!-- search() {-->
|
||||
<!-- // 搜索逻辑-->
|
||||
<!-- console.log('搜索', this.searchForm);-->
|
||||
<!-- },-->
|
||||
<!-- reset() {-->
|
||||
<!-- this.searchForm = {-->
|
||||
<!-- departmentName: '',-->
|
||||
<!-- status: '',-->
|
||||
<!-- };-->
|
||||
<!-- },-->
|
||||
<!-- editDepartment(row) {-->
|
||||
<!-- // 编辑部门逻辑-->
|
||||
<!-- console.log('编辑', row);-->
|
||||
<!-- },-->
|
||||
<!-- addSubDepartment(row) {-->
|
||||
<!-- // 新增子部门逻辑-->
|
||||
<!-- console.log('新增子部门', row);-->
|
||||
<!-- },-->
|
||||
<!-- deleteDepartment(row) {-->
|
||||
<!-- // 删除部门逻辑-->
|
||||
<!-- console.log('删除', row);-->
|
||||
<!-- },-->
|
||||
<!-- },-->
|
||||
<!--};-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<style scoped>-->
|
||||
<!--.department-management {-->
|
||||
<!-- padding: 20px;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.toolbar {-->
|
||||
<!-- margin-bottom: 20px;-->
|
||||
<!--}-->
|
||||
<!--</style>-->
|
||||
@ -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: '/main', component: authentication_main },
|
||||
{ path: '/login', component: authentication_login },
|
||||
{ path: '/register', component: register },
|
||||
// { path: '/profile', component: Profile }
|
||||
]
|
||||
|
||||
@ -9,7 +9,6 @@ export default {
|
||||
};
|
||||
return axios.post(url, data)
|
||||
.then(response => {
|
||||
alert(response.data.account);
|
||||
return response.data;
|
||||
});
|
||||
},
|
||||
|
||||
@ -10,5 +10,24 @@ export default {
|
||||
return axios.post('http://localhost:8080/organizations/addOrganization', organization).then(response => {
|
||||
return response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
deleteOrganization(organizationId) {
|
||||
return axios.post('http://localhost:8080/organizations/deleteOrganization' , {organizationId:organizationId},{headers: {
|
||||
'Content-Type': 'application/json' // 设置 Content-Type 为 application/json
|
||||
}}).then(response => {
|
||||
return response.data;
|
||||
});
|
||||
},
|
||||
updateOrganization(organization) {
|
||||
return axios.post('http://localhost:8080/organizations/updateOrganization', organization).then(response => {
|
||||
return response.data;
|
||||
});
|
||||
},
|
||||
getOrganizationById(organizationId) {
|
||||
return axios.post('http://localhost:8080/organizations/getOrganizationById', {organizationId:organizationId},{headers: {
|
||||
'Content-Type': 'application/json' // 设置 Content-Type 为 application/json
|
||||
}}).then(response => {
|
||||
return response.data;
|
||||
});
|
||||
},
|
||||
}
|
||||
90
src/views/authentication/authentication_login.vue
Normal file
90
src/views/authentication/authentication_login.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-container">
|
||||
<h2>测器汇管理系统</h2>
|
||||
<el-form :model="loginForm" :rules="rules" label-width="0px">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" placeholder="请输入您的账号" prefix-icon="el-icon-user"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="请输入您的密码" prefix-icon="el-icon-lock"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox prop="remeber" v-model="loginForm.remember">记住密码</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {defineComponent, ref} from "vue";
|
||||
import authenticationService from "../../services/authenticationService.js";
|
||||
import router from "../../router/index.js";
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
username:[{
|
||||
required: true, message: '请输入账号', trigger: 'blur'
|
||||
}],
|
||||
leader:[{
|
||||
required: true, message: '请输入密码', trigger: 'blur'
|
||||
}],
|
||||
}
|
||||
};
|
||||
},
|
||||
setup(){
|
||||
const loginForm = ref({
|
||||
username: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
});
|
||||
|
||||
const onSubmit = () => {
|
||||
authenticationService.login(loginForm.value.username,loginForm.value.password).then(res => {
|
||||
console.log(res);
|
||||
console.log(JSON.stringify(res));
|
||||
sessionStorage.setItem('user',JSON.stringify(res));
|
||||
console.log(sessionStorage.getItem('user'));
|
||||
router.push('/main');
|
||||
});
|
||||
}
|
||||
|
||||
return{
|
||||
loginForm,
|
||||
onSubmit,
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: url('https://via.placeholder.com/1920x1080') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 400px;
|
||||
padding: 40px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-container h2 {
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
143
src/views/authentication/authentication_main.vue
Normal file
143
src/views/authentication/authentication_main.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<div class="avatar-container">
|
||||
<h2>个人信息</h2>
|
||||
<el-avatar src="https://avatars.githubusercontent.com/u/1?v=4" size="large"></el-avatar>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="用户昵称">{{user.name}}</el-descriptions-item>
|
||||
<el-descriptions-item label="性别">{{user.gender}}</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号码">{{ user.phone }}</el-descriptions-item>
|
||||
<el-descriptions-item label="用户邮箱">{{user.email}}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属部门">{{user.organization}}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属角色">{{user.role}}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建日期">{{user.createdTime}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="edit-info">
|
||||
<el-link type="primary" @click="editInfo">修改信息</el-link>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="showDialog" title="填写信息" width="80%">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="基础信息">
|
||||
<el-form :model="user" :rules="rules">
|
||||
<el-form-item prop="name" label="用户昵称" :label-width="formLabelWidth">
|
||||
<el-input v-model="user.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="phone" label="手机号" :label-width="formLabelWidth">
|
||||
<el-input v-model="user.phone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
|
||||
<el-input v-model="user.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="gender" label="性别" :label-width="formLabelWidth">
|
||||
<el-radio-group v-model="user.gender">
|
||||
<el-radio value="男">男</el-radio>
|
||||
<el-radio value="女">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-button @click="update" type="primary">确认修改</el-button>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="修改密码">
|
||||
<el-form :model="user" :rules="rules">
|
||||
<el-form-item prop="password" label="旧密码" :label-width="formLabelWidth">
|
||||
<el-input v-model="passwordForm.confirmPassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" label="新密码" :label-width="formLabelWidth">
|
||||
<el-input v-model="passwordForm.newPassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="confirmPassword" label="确认密码" :label-width="formLabelWidth">
|
||||
<el-input v-model="passwordForm.confirmPassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-button @click="update"></el-button>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onMounted, ref} from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const passwordForm = ref({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
});
|
||||
const showDialog = ref(false);
|
||||
const formLabelWidth = ref('120px');
|
||||
const user = ref({
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
gender: '',
|
||||
organization: '',
|
||||
role: '',
|
||||
createdTime: '',
|
||||
});
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{required: true, message: '请输入用户昵称', trigger: 'blur'},
|
||||
{min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
|
||||
],
|
||||
phone: [
|
||||
{required: true, message: '请输入手机号码', trigger: 'blur'},
|
||||
{pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}],
|
||||
|
||||
}
|
||||
|
||||
const editInfo = () => {
|
||||
console.log(user.value);
|
||||
showDialog.value = true;
|
||||
}
|
||||
const update = () => {
|
||||
console.log(user);
|
||||
showDialog.value = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
user.value= JSON.parse(sessionStorage.getItem('user'));
|
||||
});
|
||||
|
||||
return {
|
||||
editInfo,
|
||||
user,
|
||||
showDialog,
|
||||
formLabelWidth,
|
||||
update,
|
||||
passwordForm,
|
||||
rules
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box-card {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-container h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.edit-info {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
103
src/views/authentication/authentication_register.vue
Normal file
103
src/views/authentication/authentication_register.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<script lang="ts">
|
||||
import {defineComponent, ref} from "vue";
|
||||
import router from "../../router/index.js";
|
||||
|
||||
export default defineComponent ({
|
||||
data() {
|
||||
return{
|
||||
rules: {
|
||||
name:[{
|
||||
required: true, message: '请输入账号', trigger: 'blur'
|
||||
}],
|
||||
password:[{
|
||||
required: true, message: '请输入密码', trigger: 'blur'
|
||||
}],
|
||||
contactPhone:[{
|
||||
required: true, message: '请输入联系电话', trigger: 'blur'
|
||||
}],
|
||||
code:[{
|
||||
required: true, message: '请输入验证码', trigger: 'blur'
|
||||
}],
|
||||
}
|
||||
};
|
||||
},
|
||||
setup(){
|
||||
const registerForm = ref({
|
||||
name: '',
|
||||
password: '',
|
||||
contactPhone: '',
|
||||
});
|
||||
|
||||
const handleBack = () => {
|
||||
router.push('/login');
|
||||
};
|
||||
|
||||
const handleRegister = () => {
|
||||
alert('注册成功');
|
||||
};
|
||||
|
||||
return{
|
||||
registerForm,
|
||||
handleRegister,
|
||||
handleBack,
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="register-page">
|
||||
<div class="register-container">
|
||||
<h2>企业租户注册</h2>
|
||||
<el-form :model="registerForm" :rules="rules" label-width="0px">
|
||||
<el-form-item prop="name">
|
||||
<el-input v-model="registerForm.name" placeholder="请输入您的账号" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="registerForm.password" placeholder="请输入您的密码" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="contactPhone">
|
||||
<el-input v-model="registerForm.contactPhone" placeholder="请输入您的联系电话" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input placeholder="请输入验证码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="button">
|
||||
<el-button type="primary" @click="handleRegister">注册</el-button>
|
||||
<el-button type="primary" @click="handleBack">返回</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.register-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: url('https://via.placeholder.com/1920x1080') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.register-container {
|
||||
width: 400px;
|
||||
padding: 40px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-container h2 {
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
.button{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -1,13 +1,27 @@
|
||||
<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">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/login' }">登录界面</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/' }">Hello world</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/organization' }">部门管理</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<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 +43,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,31 +71,34 @@
|
||||
>
|
||||
{{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>
|
||||
|
||||
@ -99,13 +122,13 @@ interface Organization {
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
const showDialog = 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: '',
|
||||
@ -115,19 +138,27 @@ export default defineComponent({
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
const originTableData = ref<Organization[]>([]);
|
||||
const tableData = ref<Organization[]>([]);
|
||||
|
||||
const treeData = ref();
|
||||
const noChildrenData = ref();
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
tableData.value=[];
|
||||
const data = await organizationService.getAllOrganizations(); // 假设此函数可以获取后端数据
|
||||
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 +182,95 @@ 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);
|
||||
showDialogAdd.value = false;
|
||||
|
||||
dialogFormAdd.value = {
|
||||
organizationId:0,
|
||||
parentOrganization: 0,
|
||||
organizationName: '',
|
||||
displayOrder: 0,
|
||||
leader: '',
|
||||
contactPhone: '',
|
||||
email: '',
|
||||
organizationStatus: true,
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
const deleteOrganization = (organizationId:number) => {
|
||||
// const confirmDelete = ElMessageBox.confirm('确认删除该组织?', '提示');
|
||||
// console.log(organizationId);
|
||||
// if(!confirmDelete){
|
||||
// organizationService.deleteOrganization(organizationId);
|
||||
// }
|
||||
organizationService.deleteOrganization(organizationId);
|
||||
fetchData();
|
||||
}
|
||||
|
||||
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));
|
||||
}
|
||||
);
|
||||
// }else{
|
||||
// fetchData();
|
||||
// }
|
||||
}
|
||||
const handleReset = () => {
|
||||
search.value.name = '';
|
||||
search.value.status = '';
|
||||
fetchData();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@ -188,15 +280,47 @@ export default defineComponent({
|
||||
return {
|
||||
originTableData,
|
||||
tableData,
|
||||
showDialog,
|
||||
dialogForm,
|
||||
showDialogAdd,
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user