Merge branch 'personal/lsd/user' into merge
# Conflicts: # package.json # public/background.jpg # src/main.js # src/store/authentication.js
This commit is contained in:
commit
ad6743656b
12
src/App.vue
12
src/App.vue
@ -1,10 +1,8 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import 'element-plus/dist/index.css'
|
||||
</script>
|
||||
|
||||
<!--请不要对App.vue进行修改，请采用在views的对应目录下新建自己需要的文件
|
||||
并通过在/router下的对应模块名称的js中引入路由的方式来显示自己的页面-->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
17
src/assets/global.css
Normal file
17
src/assets/global.css
Normal file
@ -0,0 +1,17 @@
|
||||
body {
|
||||
background-image: url('/public/background.jpg');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
@ -10,7 +10,7 @@ import userManagementRoutes from './userManagement'
|
||||
// 请不要直接修改本文件，使用在router下的对应模块名称的js中引入路由的方式来代替->
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: HelloWorld, meta: {"msg": "HeIl⚪ W0rId!"}},
|
||||
// { path: '/', component: HelloWorld, meta: {"msg": "HeIl⚪ W0rId!"}},
|
||||
...authenticationRoutes,
|
||||
...courseManagementRoutes,
|
||||
...meetingManagementRoutes,
|
||||
|
||||
@ -2,8 +2,32 @@
|
||||
// import UserDetail from '../views/user-management/UserDetail.vue'
|
||||
// import UserEdit from '../views/user-management/UserEdit.vue'
|
||||
|
||||
import Home from "../views/user-management/Home.vue";
|
||||
import Register from "../views/user-management/Register.vue";
|
||||
import TenantManagement from "../views/user-management/TenantManagement.vue";
|
||||
import AddUser from "../views/user-management/AddUser.vue";
|
||||
import AddTenant from "../views/user-management/AddTenant.vue";
|
||||
import UserManagement from "../views/user-management/UserManagement.vue";
|
||||
|
||||
export default [
|
||||
// { path: '/users', component: UserList },
|
||||
// { path: '/users/:id', component: UserDetail },
|
||||
// { path: '/users/:id/edit', component: UserEdit }
|
||||
{ path: '/', component: Home},
|
||||
{ path: '/login', name: 'App', component:Home },
|
||||
{
|
||||
path: '/register',
|
||||
name: 'Register',
|
||||
component: Register
|
||||
},
|
||||
{ path: '/tenantManagement',
|
||||
name: 'TenantManagement',
|
||||
component: TenantManagement
|
||||
},
|
||||
{ path: '/addUser',
|
||||
name: 'AddUser',
|
||||
component: AddUser
|
||||
},
|
||||
{ path: '/addTenant',
|
||||
name: 'AddTenant',
|
||||
component: AddTenant
|
||||
},
|
||||
{ path: '/userManagement', name: 'UM', component:UserManagement }
|
||||
]
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
import axios from "axios";
|
||||
import { useRouter } from 'vue-router';
|
||||
import {ref} from "vue";
|
||||
|
||||
|
||||
export default {
|
||||
login(account, password){
|
||||
const url='http://localhost:8080/checkLogin'
|
||||
const data={
|
||||
account:account,
|
||||
password:password
|
||||
}
|
||||
return axios.post(url, data)
|
||||
.then(response => {
|
||||
const user=ref(null);
|
||||
const router=useRouter();
|
||||
user.value=response.data;
|
||||
if(user.value.account!=null) {
|
||||
alert("登录成功");
|
||||
if (user.value.account === "123" && user.value.password === "123") {
|
||||
alert("进入管理员界面");
|
||||
location.href="/userManagement";
|
||||
} else {
|
||||
alert("进入用户界面");
|
||||
location.href="/tenantManagement";
|
||||
}
|
||||
}else{
|
||||
alert("登录失败");
|
||||
}
|
||||
// 处理登录成功的逻辑
|
||||
return response.data;
|
||||
});
|
||||
|
||||
},
|
||||
register(user){
|
||||
const url='http://localhost:8080/checkRegister'
|
||||
return axios.post(url, user)
|
||||
.then(response=>{
|
||||
return response.data;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
51
src/services/tenantService.js
Normal file
51
src/services/tenantService.js
Normal file
@ -0,0 +1,51 @@
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
addTenant(tenant){
|
||||
const url='http://localhost:8080/addTenant'
|
||||
console.log("hahahhaahhha"+tenant.phone);
|
||||
const data={
|
||||
symbol: tenant.symbol,
|
||||
contact: tenant.contact,
|
||||
phone: tenant.phone,
|
||||
manager: tenant.manager,
|
||||
name: tenant.name,
|
||||
}
|
||||
return axios.post(url, data)
|
||||
.then(response => {
|
||||
if(response.data!=null){
|
||||
alert("新增成功");
|
||||
}else
|
||||
alert("新增失败");
|
||||
location.href="/tenantManagement";
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
getAll(){
|
||||
const url='http://localhost:8080/getAllTenant'
|
||||
return axios.get(url)
|
||||
.then(response => {
|
||||
return response.data;
|
||||
});
|
||||
},
|
||||
|
||||
update(tenant){
|
||||
const url='http://localhost:8080/updateTenant';
|
||||
console.log("哈哈哈哈哈哈哈啊哈哈哈哈哈"+tenant);
|
||||
return axios.post(url,tenant)
|
||||
.then(response => {
|
||||
});
|
||||
},
|
||||
|
||||
delete(tenant){
|
||||
const url='http://localhost:8080/deleteTenant';
|
||||
return axios.post(url,tenant)
|
||||
.then(response => {
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
import axios from "axios";
|
||||
|
||||
import {ref} from "vue";
|
||||
|
||||
export default {
|
||||
addUser(user){
|
||||
const url='http://localhost:8080/addUser'
|
||||
const data={
|
||||
account: user.account,
|
||||
name: user.name,
|
||||
organization: user.organization,
|
||||
email: user.email,
|
||||
gender: user.gender,
|
||||
phone: user.phone,
|
||||
password:user.password
|
||||
}
|
||||
return axios.post(url, data)
|
||||
.then(response => {
|
||||
if(response.data!=null){
|
||||
alert("新增成功");
|
||||
}else
|
||||
alert("新增失败");
|
||||
location.href="/userManagement";
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
getAll(){
|
||||
const url='http://localhost:8080/getAll'
|
||||
return axios.get(url)
|
||||
.then(response => {
|
||||
return response.data;
|
||||
});
|
||||
},
|
||||
|
||||
update(user){
|
||||
const url='http://localhost:8080/update';
|
||||
console.log("哈哈哈哈哈哈哈啊哈哈哈哈哈"+user);
|
||||
return axios.post(url,user)
|
||||
.then(response => {
|
||||
location.href="/userManagement";
|
||||
});
|
||||
},
|
||||
|
||||
delete(user){
|
||||
const url='http://localhost:8080/delete';
|
||||
console.log("哈哈哈哈哈哈哈啊哈哈哈哈哈"+user);
|
||||
return axios.post(url,user)
|
||||
.then(response => {
|
||||
if(response.data==boolean){
|
||||
alert("删除成功");
|
||||
}else
|
||||
alert("删除失败");
|
||||
location.href="/userManagement";
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
107
src/views/user-management/AddTenant.vue
Normal file
107
src/views/user-management/AddTenant.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<el-card class="form-container" shadow="hover">
|
||||
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">租户名称</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="name" placeholder="请输入名称" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">租户标识</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="symbol" placeholder="请输入标识" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">联系人</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="contact" placeholder="请输入联系人" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">手机号码</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="phone" placeholder="请输入手机号码" />
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">管理员</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="manager" placeholder="请输入管理员" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :offset="6" :span="18">
|
||||
<el-button type="primary" @click="addFinished">确认新增</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import tenantService from "../../services/tenantService.js";
|
||||
|
||||
const manager = ref<String>('');
|
||||
const phone = ref<String>('');
|
||||
const contact = ref<String>('');
|
||||
const name = ref<String>('');
|
||||
const symbol = ref<String>('');
|
||||
|
||||
|
||||
const addFinished = () => {
|
||||
const tenant = {
|
||||
symbol: symbol.value,
|
||||
name: name.value,
|
||||
contact: contact.value,
|
||||
manager: manager.value,
|
||||
phone: phone.value,
|
||||
};
|
||||
tenantService.addTenant(tenant);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f0f2f5; /* 设置背景色为浅色 */
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: #333; /* 深色背景 */
|
||||
color: white; /* 确保文本颜色与深色背景有对比 */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.el-text {
|
||||
color: white; /* 确保文本颜色与深色背景有对比 */
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
119
src/views/user-management/AddUser.vue
Normal file
119
src/views/user-management/AddUser.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<el-card class="form-container" shadow="hover">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">用户名称</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="name" placeholder="请输入名称" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">用户账号</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="account" placeholder="请输入账号" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">用户密码</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="password" placeholder="请输入密码" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">手机号码</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="phone" placeholder="请输入手机号码" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">邮箱</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="email" placeholder="请输入邮箱" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">用户性别</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="gender" placeholder="请输入性别" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">组织</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="organization" placeholder="请输入组织" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :offset="6" :span="18">
|
||||
<el-button type="primary" @click="addFinished">确认新增</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import userService from "../../services/userService.js";
|
||||
|
||||
const account = ref<String>('');
|
||||
const phone = ref<String>('');
|
||||
const email = ref<String>('');
|
||||
const name = ref<String>('');
|
||||
const gender = ref<String>('');
|
||||
const organization = ref<String>('');
|
||||
const password = ref<String>('');
|
||||
|
||||
const addFinished = () => {
|
||||
const user = {
|
||||
account: account.value,
|
||||
name: name.value,
|
||||
organization: organization.value,
|
||||
password: password.value,
|
||||
email: email.value,
|
||||
gender: gender.value,
|
||||
phone: phone.value,
|
||||
};
|
||||
userService.addUser(user);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f0f2f5; /* 设置背景色为浅色 */
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: #333; /* 深色背景 */
|
||||
color: white; /* 确保文本颜色与深色背景有对比 */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.el-text {
|
||||
color: white; /* 确保文本颜色与深色背景有对比 */
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
64
src/views/user-management/Home.vue
Normal file
64
src/views/user-management/Home.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<el-card class="login-container" shadow="hover">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">名称</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="account" placeholder="请输入账号" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="6">
|
||||
<el-text class="mx-1" type="primary">密码</el-text>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="password" placeholder="请输入密码" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :offset="6" :span="9">
|
||||
<el-button type="primary" @click="handleLogin">登录</el-button>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-button type="primary" @click="handleRegister">注册</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import authenticationService from "../../services/authenticationService.js";
|
||||
import {useRouter} from "vue-router";
|
||||
import {ref} from "vue";
|
||||
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
background-color: #333; /* 深色背景 */
|
||||
color: white; /* 确保文本颜色与深色背景有对比 */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-text {
|
||||
color: white; /* 确保文本颜色与深色背景有对比 */
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
108
src/views/user-management/Register.vue
Normal file
108
src/views/user-management/Register.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<div class="form-item">
|
||||
<el-text class="label" type="primary">名称</el-text>
|
||||
<el-input v-model="name" class="input" placeholder="请输入名称" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<el-text class="label" type="primary">账号</el-text>
|
||||
<el-input v-model="account" class="input" placeholder="请输入账号" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<el-text class="label" type="primary">密码</el-text>
|
||||
<el-input v-model="password" class="input" placeholder="请输入密码" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<el-text class="label" type="primary">性别</el-text>
|
||||
<el-input v-model="gender" class="input" placeholder="请输入性别" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<el-text class="label" type="primary">电话号码</el-text>
|
||||
<el-input v-model="phone" class="input" placeholder="请输入电话号码" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<el-text class="label" type="primary">邮箱</el-text>
|
||||
<el-input v-model="email" class="input" placeholder="请输入邮箱" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<el-text class="label" type="primary">组织</el-text>
|
||||
<el-input v-model="organization" class="input" placeholder="请输入组织" />
|
||||
</div>
|
||||
<el-button plain @click="open" class="register-button">注册</el-button>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { Action } from 'element-plus'
|
||||
import { useRouter } from 'vue-router';
|
||||
import authenticationService from "../../services/authenticationService.js";
|
||||
|
||||
const name = ref<string>('');
|
||||
const password = ref<string>('');
|
||||
const gender = ref<string>('');
|
||||
const phone = ref<string>('');
|
||||
const email = ref<string>('');
|
||||
const organization = ref<string>('');
|
||||
const account = ref<string>('');
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const open = () => {
|
||||
const user = {
|
||||
account: account.value,
|
||||
password: password.value,
|
||||
name: name.value,
|
||||
organization: organization.value,
|
||||
email: email.value,
|
||||
gender: gender.value,
|
||||
phone: phone.value,
|
||||
};
|
||||
authenticationService.register(user).then(res => {
|
||||
alert(res);
|
||||
});
|
||||
ElMessageBox.alert('注册成功', '提示', {
|
||||
confirmButtonText: 'OK',
|
||||
callback: (action: Action) => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: `action: ${action}`,
|
||||
});
|
||||
// 跳转到 /login 页面
|
||||
router.push('/login');
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.register-button {
|
||||
margin-left: 110px; /* Adjust to align with the inputs */
|
||||
}
|
||||
</style>
|
||||
230
src/views/user-management/TenantManagement.vue
Normal file
230
src/views/user-management/TenantManagement.vue
Normal file
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="searchSymbol" placeholder="请输入标识"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-input v-model="searchContact" placeholder="请输入联系人"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-input v-model="searchPhone" placeholder="请输入手机号"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-input v-model="searchName" placeholder="请输入名称"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="mt-2">
|
||||
<el-col :span="24">
|
||||
<el-button type="primary" @click="handleAdd">新增</el-button>
|
||||
<el-button plain @click="dialogVisible=true">修改</el-button>
|
||||
<el-button type="danger" @click="handleDelete">删除</el-button>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" @click="handleReset">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="tableData" style="width: 100%" class="mt-2" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="symbol" label="租户标识" width="120"></el-table-column>
|
||||
<el-table-column prop="contact" label="联系人" width="120"></el-table-column>
|
||||
<el-table-column prop="phone" label="电话" width="120"></el-table-column>
|
||||
<el-table-column prop="name" label="租户名称" width="120"></el-table-column>
|
||||
<el-table-column prop="manager" label="管理员" width="120"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
|
||||
<span>修改租户信息</span>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-form :model="formData">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人">
|
||||
<el-input v-model="formData.contact"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话">
|
||||
<el-input v-model="formData.phone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="管理员">
|
||||
<el-input v-model="formData.manager"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">关闭</el-button>
|
||||
<el-button type="primary" @click="editFinished">确认修改</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import tenantService from "../../services/tenantService.js";
|
||||
import { onMounted, ref, defineComponent } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { Action } from 'element-plus'
|
||||
|
||||
interface Tenant {
|
||||
symbol: string;
|
||||
contact: string;
|
||||
phone: string;
|
||||
name: string;
|
||||
manager: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const searchSymbol = ref('');
|
||||
const searchContact = ref('');
|
||||
const searchPhone = ref('');
|
||||
const searchName = ref('');
|
||||
const tableData = ref<Tenant[]>([]);
|
||||
|
||||
const selectedRows = ref<Tenant[]>([]);
|
||||
const formData = ref({
|
||||
symbol: '',
|
||||
contact: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
manager: '',
|
||||
});
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const handleClose = (done: () => void) => {
|
||||
done();
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const data = await tenantService.getAll();
|
||||
tableData.value = data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching organization:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectionChange = (rows) => {
|
||||
selectedRows.value = rows;
|
||||
if (rows.length === 1) {
|
||||
formData.value = { ...rows[0] };
|
||||
} else {
|
||||
formData.value = {
|
||||
symbol: '',
|
||||
contact: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
manager: '',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const editFinished = async () => {
|
||||
try {
|
||||
await tenantService.update(formData.value);
|
||||
ElMessageBox.alert('删除成功', '提示', {
|
||||
// if you want to disable its autofocus
|
||||
// autofocus: false,
|
||||
confirmButtonText: 'OK',
|
||||
callback: (action: Action) => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: `action: ${action}`,
|
||||
})
|
||||
},
|
||||
})
|
||||
dialogVisible.value = false;
|
||||
location.href="/tenantManagement";
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error("Error updating user:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
location.href = '/addTenant';
|
||||
};
|
||||
|
||||
|
||||
const handleDelete = async () => {
|
||||
try{
|
||||
await tenantService.delete(formData.value);
|
||||
ElMessageBox.alert('删除成功', '提示', {
|
||||
// if you want to disable its autofocus
|
||||
// autofocus: false,
|
||||
confirmButtonText: 'OK',
|
||||
callback: (action: Action) => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: `action: ${action}`,
|
||||
})
|
||||
},
|
||||
})
|
||||
fetchData();
|
||||
}catch(error){
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleSearch = async () => {
|
||||
tableData.value =tableData.value.filter(
|
||||
(data) => {
|
||||
const isNameValid = searchName.value;
|
||||
const isSymbolValid =searchSymbol.value;
|
||||
const isPhoneValid = searchPhone.value;
|
||||
const isContactValid = searchContact.value;
|
||||
// search.value && search.value.
|
||||
|
||||
return (!isNameValid || data.name.toLowerCase().includes(searchName.value.toLowerCase())) &&
|
||||
(!isPhoneValid || data.phone.toLowerCase().includes(searchPhone.value.toLowerCase()) )&&
|
||||
(!isSymbolValid || data.symbol.toLowerCase().includes(searchSymbol.value.toLowerCase()))&&
|
||||
(!isContactValid || data.contact.toLowerCase().includes(searchContact.value.toLowerCase()))
|
||||
}
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
const handleReset=()=>{
|
||||
location.href = '/tenantManagement';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
|
||||
return {
|
||||
tableData,
|
||||
handleAdd,
|
||||
formData,
|
||||
dialogVisible,
|
||||
handleClose,
|
||||
selectedRows,
|
||||
handleSelectionChange,
|
||||
editFinished,
|
||||
handleDelete,
|
||||
searchPhone,
|
||||
searchSymbol,
|
||||
searchName,
|
||||
searchContact,
|
||||
handleSearch,
|
||||
handleReset
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mt-2 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
219
src/views/user-management/UserManagement.vue
Normal file
219
src/views/user-management/UserManagement.vue
Normal file
@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="searchOrganization" placeholder="请输入组织"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-input v-model="searchName" placeholder="请输入用户名"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-input v-model="searchPhone" placeholder="请输入手机号"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="mt-2">
|
||||
<el-col :span="24">
|
||||
<el-button type="primary" @click="handleAdd">新增</el-button>
|
||||
<el-button plain @click="dialogVisible=true">修改</el-button>
|
||||
<el-button type="danger" @click="handleDelete">删除</el-button>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" @click="handleReset">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="tableData" style="width: 100%" class="mt-2" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="id" label="用户编号" width="120"></el-table-column>
|
||||
<el-table-column prop="account" label="账号" width="120"></el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="120"></el-table-column>
|
||||
<el-table-column prop="organization" label="组织" width="120"></el-table-column>
|
||||
<el-table-column prop="phone" label="手机号" width="150"></el-table-column>
|
||||
<el-table-column prop="email" label="邮箱" width="180"></el-table-column>
|
||||
<el-table-column prop="gender" label="性别" width="180"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
|
||||
<span>修改用户</span>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-form :model="formData">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="账号">
|
||||
<el-input v-model="formData.account"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="组织">
|
||||
<el-input v-model="formData.organization"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="formData.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-input v-model="formData.gender"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话">
|
||||
<el-input v-model="formData.phone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码">
|
||||
<el-input type="password" v-model="formData.password"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">关闭</el-button>
|
||||
<el-button type="primary" @click="editFinished">确认修改</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import userService from "../../services/userService.js";
|
||||
import { onMounted, ref, defineComponent } from 'vue';
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
account: string;
|
||||
name: string;
|
||||
organization: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
gender: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
const searchOrganization = ref('');
|
||||
const searchName = ref('');
|
||||
const searchPhone = ref('');
|
||||
|
||||
|
||||
const tableData = ref<User[]>([]);
|
||||
|
||||
const selectedRows = ref<User[]>([]);
|
||||
|
||||
|
||||
const formData = ref({
|
||||
id: null,
|
||||
account: '',
|
||||
name: '',
|
||||
organization: '',
|
||||
email: '',
|
||||
gender: '',
|
||||
phone: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const handleClose = (done: () => void) => {
|
||||
done();
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const data = await userService.getAll();
|
||||
tableData.value = data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching organization:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectionChange = (rows) => {
|
||||
selectedRows.value = rows;
|
||||
if (rows.length === 1) {
|
||||
formData.value = { ...rows[0] };
|
||||
} else {
|
||||
formData.value = {
|
||||
id: null,
|
||||
account: '',
|
||||
name: '',
|
||||
organization: '',
|
||||
email: '',
|
||||
gender: '',
|
||||
phone: '',
|
||||
password: '',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const editFinished = async () => {
|
||||
try {
|
||||
await userService.update(formData.value);
|
||||
dialogVisible.value = false;
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error("Error updating user:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
location.href = '/addUser';
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try{
|
||||
await userService.delete(formData.value);
|
||||
fetchData();
|
||||
}catch(error){
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleSearch = async () => {
|
||||
tableData.value =tableData.value.filter(
|
||||
(data) => {
|
||||
const isNameValid = searchName.value;
|
||||
const isOrganizationValid =searchOrganization.value;
|
||||
const isPhoneValid = searchPhone.value;
|
||||
// search.value && search.value.
|
||||
|
||||
return (!isNameValid || data.name.toLowerCase().includes(searchName.value.toLowerCase())) &&
|
||||
(!isPhoneValid || data.phone.toLowerCase().includes(searchPhone.value.toLowerCase()) )&&
|
||||
(!isOrganizationValid || data.organization.toLowerCase().includes(searchOrganization.value.toLowerCase()))
|
||||
}
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
const handleReset=()=>{
|
||||
location.href = '/userManagement';
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
|
||||
return {
|
||||
tableData,
|
||||
handleAdd,
|
||||
formData,
|
||||
dialogVisible,
|
||||
handleClose,
|
||||
selectedRows,
|
||||
handleSelectionChange,
|
||||
editFinished,
|
||||
handleDelete,
|
||||
searchPhone,
|
||||
searchOrganization,
|
||||
searchName,
|
||||
handleSearch,
|
||||
handleReset
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mt-2 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user