Merge branch 'refs/heads/styleGet' into personal/pjq/test
# Conflicts: # package.json
This commit is contained in:
commit
2a21170ba3
2
package-lock.json
generated
2
package-lock.json
generated
@ -1300,7 +1300,7 @@
|
|||||||
},
|
},
|
||||||
"node_modules/vue-router": {
|
"node_modules/vue-router": {
|
||||||
"version": "4.4.0",
|
"version": "4.4.0",
|
||||||
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",
|
||||||
"integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
|
"integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vue/devtools-api": "^6.5.1"
|
"@vue/devtools-api": "^6.5.1"
|
||||||
|
|||||||
@ -1,59 +1,175 @@
|
|||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const count = ref(0)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="login-page">
|
||||||
<a href="https://vitejs.dev" target="_blank">
|
<div class="login-container">
|
||||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
<h2>测器汇管理系统</h2>
|
||||||
</a>
|
<el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="0px">
|
||||||
<a href="https://vuejs.org/" target="_blank">
|
<el-form-item prop="username">
|
||||||
<img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
|
<el-input v-model="loginForm.username" placeholder="请输入您的账号" prefix-icon="el-icon-user"></el-input>
|
||||||
</a>
|
</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>
|
</div>
|
||||||
<h1>{{ this.$route.meta.msg }}</h1>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<el-button type="success" @click="count++">count is {{ count }}</el-button>
|
|
||||||
<p>
|
|
||||||
Edit
|
|
||||||
<code>components/HelloWorld.vue</code> to test HMR
|
|
||||||
</p>
|
|
||||||
</div>
|
</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>
|
</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>
|
<style scoped>
|
||||||
.logo {
|
.login-page {
|
||||||
height: 6em;
|
display: flex;
|
||||||
padding: 1.5em;
|
justify-content: center;
|
||||||
will-change: filter;
|
align-items: center;
|
||||||
transition: filter 300ms;
|
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);
|
.login-container h2 {
|
||||||
}
|
margin-bottom: 20px;
|
||||||
.read-the-docs {
|
color: #333;
|
||||||
color: #888;
|
|
||||||
}
|
}
|
||||||
</style>
|
</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,10 +1,9 @@
|
|||||||
// ！！！这是一个示例，请根据实际情况修改！！！
|
import authentication_main from '../views/authentication/authentication_main.vue'
|
||||||
// import Login from '../views/authentication/Login.vue'
|
import register from '../views/authentication/authentication_register.vue'
|
||||||
// import Register from '../views/authentication/Register.vue'
|
import authentication_login from "../views/authentication/authentication_login.vue";
|
||||||
// import Profile from '../views/authentication/Profile.vue'
|
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
// { path: '/login', component: Login },
|
{ path: '/main', component: authentication_main },
|
||||||
// { path: '/register', component: Register },
|
{ path: '/login', component: authentication_login },
|
||||||
|
{ path: '/register', component: register },
|
||||||
// { path: '/profile', component: Profile }
|
// { path: '/profile', component: Profile }
|
||||||
]
|
]
|
||||||
|
|||||||
@ -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 [
|
export default [
|
||||||
// { path: '/organizations', component: OrganizationList },
|
{ path: '/organizations', component: Organization_main},
|
||||||
// { path: '/organizations/:id', component: OrganizationDetail },
|
// { path: '/organizations/:id', component: OrganizationDetail },
|
||||||
// { path: '/organizations/:id/edit', component: OrganizationEdit }
|
// { path: '/organizations/:id/edit', component: OrganizationEdit }
|
||||||
]
|
]
|
||||||
|
|||||||
@ -0,0 +1,23 @@
|
|||||||
|
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 => {
|
||||||
|
return response.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
register(user){
|
||||||
|
const url = `http://localhost:8080/users/checkRegister`
|
||||||
|
return axios.post(url, user)
|
||||||
|
.then(response => {
|
||||||
|
return response.data;
|
||||||
|
});
|
||||||
|
//跳转逻辑
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
getAllOrganizations() {
|
||||||
|
return axios.get('http://localhost:8080/api/organizations/listAll').then(response => {
|
||||||
|
return response.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addOrganization(organization) {
|
||||||
|
return axios.post('http://localhost:8080/api/organizations/addOrganization', organization).then(response => {
|
||||||
|
return response.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deleteOrganization(organizationId) {
|
||||||
|
return axios.post('http://localhost:8080/api/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/api/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>
|
||||||
326
src/views/organization-management/Organization_main.vue
Normal file
326
src/views/organization-management/Organization_main.vue
Normal file
@ -0,0 +1,326 @@
|
|||||||
|
<template>
|
||||||
|
<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"
|
||||||
|
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-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="showDialogAdd" title="填写信息" width="80%">
|
||||||
|
<el-form :model="dialogFormAdd" :rules="rules">
|
||||||
|
<el-form-item label="上级部门" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="dialogFormAdd.parentOrganization">
|
||||||
|
<el-option
|
||||||
|
v-for="item in originTableData"
|
||||||
|
:key="item.organizationId"
|
||||||
|
:label="item.organizationName"
|
||||||
|
:value="item.organizationId"
|
||||||
|
>
|
||||||
|
{{item.organizationName}}
|
||||||
|
</el-option>
|
||||||
|
<el-option label="无" value=0></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="organizationName" label="部门名称" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="dialogFormAdd.organizationName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<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 prop="leader" label="负责人" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="dialogFormAdd.leader"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="contactPhone" label="联系电话" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="dialogFormAdd.contactPhone"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<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="dialogFormAdd.organizationStatus" active-value="true" active-text="启用" inactive-value="false" inactive-text="禁用"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<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';
|
||||||
|
|
||||||
|
|
||||||
|
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 showDialogAdd = ref(false);
|
||||||
|
const formLabelWidth = ref('120px');
|
||||||
|
|
||||||
|
const dialogFormAdd = ref(
|
||||||
|
{
|
||||||
|
organizationId:0,
|
||||||
|
parentOrganization: 0,
|
||||||
|
organizationName: '',
|
||||||
|
displayOrder: 0,
|
||||||
|
leader: '',
|
||||||
|
contactPhone: '',
|
||||||
|
email: '',
|
||||||
|
organizationStatus: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
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);
|
||||||
|
//buildTree 负责构建树形结构
|
||||||
|
treeData.value = buildTree(originTableData.value);
|
||||||
|
console.log('树形结构数据', 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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
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 submitForm = () => {
|
||||||
|
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(() => {
|
||||||
|
fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
originTableData,
|
||||||
|
tableData,
|
||||||
|
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