基本完成，再完善其他的功能与界面就行
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>
|
<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="danger" @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,8 +1,9 @@
|
|||||||
import authentication from '../views/authentication_login.vue'
|
import authentication_main from '../views/authentication/authentication_main.vue'
|
||||||
import register from '../views/authentication_register.vue'
|
import register from '../views/authentication/authentication_register.vue'
|
||||||
|
import authentication_login from "../views/authentication/authentication_login.vue";
|
||||||
export default [
|
export default [
|
||||||
{ path: '/', component: authentication },
|
{ path: '/main', component: authentication_main },
|
||||||
{ path: '/login', component: authentication },
|
{ path: '/login', component: authentication_login },
|
||||||
{ path: '/register', component: register },
|
{ path: '/register', component: register },
|
||||||
// { path: '/profile', component: Profile }
|
// { path: '/profile', component: Profile }
|
||||||
]
|
]
|
||||||
|
|||||||
@ -9,7 +9,6 @@ export default {
|
|||||||
};
|
};
|
||||||
return axios.post(url, data)
|
return axios.post(url, data)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
alert(response.data.account);
|
|
||||||
return response.data;
|
return response.data;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|||||||
@ -10,5 +10,24 @@ export default {
|
|||||||
return axios.post('http://localhost:8080/organizations/addOrganization', organization).then(response => {
|
return axios.post('http://localhost:8080/organizations/addOrganization', organization).then(response => {
|
||||||
return response.data;
|
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>
|
<template>
|
||||||
<el-text>{{ showDialog }}</el-text>
|
<div class="department-management">
|
||||||
<el-button type="primary" @click="showDialog = true">添加部门</el-button>
|
<el-breadcrumb separator="/">
|
||||||
<!-- <el-table :data="tableData"-->
|
<el-breadcrumb-item :to="{ path: '/login' }">登录界面</el-breadcrumb-item>
|
||||||
<!-- style="width: 100%; margin-bottom: 20px"-->
|
<el-breadcrumb-item :to="{ path: '/' }">Hello world</el-breadcrumb-item>
|
||||||
<!-- height="500px"-->
|
<el-breadcrumb-item :to="{ path: '/organization' }">部门管理</el-breadcrumb-item>
|
||||||
<!-- row-key="organizationId"-->
|
</el-breadcrumb>
|
||||||
<!-- border-->
|
<el-row :gutter="20" class="toolbar">
|
||||||
<!-- :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"-->
|
<el-col :span="4">
|
||||||
<!-- default-expand-all>-->
|
<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
|
<el-table
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
style="width: 100%; margin-bottom: 20px"
|
style="width: 100%; margin-bottom: 20px"
|
||||||
@ -29,20 +43,26 @@
|
|||||||
<el-table-column prop="organizationStatus" label="部门状态" width="180">
|
<el-table-column prop="organizationStatus" label="部门状态" width="180">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<span v-if="row.organizationStatus">
|
<span v-if="row.organizationStatus">
|
||||||
<el-text type="success">启用</el-text>
|
<el-text type="success">正常</el-text>
|
||||||
</span>
|
</span>
|
||||||
<span v-else>
|
<span v-else>
|
||||||
<el-text type="danger">禁用</el-text>
|
<el-text type="danger">停用</el-text>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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>
|
</el-table>
|
||||||
|
</div>
|
||||||
<!-- 添加表单-->
|
<!-- 添加表单-->
|
||||||
<el-dialog v-model="showDialog" title="填写信息" width="80%">
|
<el-dialog v-model="showDialogAdd" title="填写信息" width="80%">
|
||||||
<el-form :model="dialogForm">
|
<el-form :model="dialogFormAdd" :rules="rules">
|
||||||
<el-form-item label="上级部门" :label-width="formLabelWidth">
|
<el-form-item label="上级部门" :label-width="formLabelWidth">
|
||||||
<el-select v-model="dialogForm.parentOrganization">
|
<el-select v-model="dialogFormAdd.parentOrganization">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in originTableData"
|
v-for="item in originTableData"
|
||||||
:key="item.organizationId"
|
:key="item.organizationId"
|
||||||
@ -51,36 +71,39 @@
|
|||||||
>
|
>
|
||||||
{{item.organizationName}}
|
{{item.organizationName}}
|
||||||
</el-option>
|
</el-option>
|
||||||
|
<el-option label="无" value=0></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="部门名称" :label-width="formLabelWidth">
|
<el-form-item prop="organizationName" label="部门名称" :label-width="formLabelWidth">
|
||||||
<el-input v-model="dialogForm.organizationName"></el-input>
|
<el-input v-model="dialogFormAdd.organizationName"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="显示排列" :label-width="formLabelWidth">
|
<el-form-item prop="displayOrder" label="显示排列" :label-width="formLabelWidth">
|
||||||
<el-input v-model="dialogForm.displayOrder"></el-input>
|
<el-input-number v-model="dialogFormAdd.displayOrder" :min=1 :max="100"></el-input-number>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="负责人" :label-width="formLabelWidth">
|
<el-form-item prop="leader" label="负责人" :label-width="formLabelWidth">
|
||||||
<el-input v-model="dialogForm.leader"></el-input>
|
<el-input v-model="dialogFormAdd.leader"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="联系电话" :label-width="formLabelWidth">
|
<el-form-item prop="contactPhone" label="联系电话" :label-width="formLabelWidth">
|
||||||
<el-input v-model="dialogForm.contactPhone"></el-input>
|
<el-input v-model="dialogFormAdd.contactPhone"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="邮箱" :label-width="formLabelWidth">
|
<el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
|
||||||
<el-input v-model="dialogForm.email"></el-input>
|
<el-input v-model="dialogFormAdd.email"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="部门状态" :label-width="formLabelWidth">
|
<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-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<span slot="footer" class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button @click="showDialog = false">取消</el-button>
|
<span slot="footer">
|
||||||
|
<el-button @click="showDialogAdd = false">取消</el-button>
|
||||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||||
</span>
|
</span>
|
||||||
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { ref, onMounted, defineComponent } from 'vue';
|
import {ref, onMounted, defineComponent} from 'vue';
|
||||||
import organizationService from '../../services/organizationService';
|
import organizationService from '../../services/organizationService';
|
||||||
|
|
||||||
|
|
||||||
@ -99,13 +122,13 @@ interface Organization {
|
|||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
|
const showDialogAdd = ref(false);
|
||||||
const showDialog = ref(false);
|
|
||||||
const formLabelWidth = ref('120px');
|
const formLabelWidth = ref('120px');
|
||||||
|
|
||||||
const dialogForm = ref(
|
const dialogFormAdd = ref(
|
||||||
{
|
{
|
||||||
parentOrganization: '',
|
organizationId:0,
|
||||||
|
parentOrganization: 0,
|
||||||
organizationName: '',
|
organizationName: '',
|
||||||
displayOrder: 0,
|
displayOrder: 0,
|
||||||
leader: '',
|
leader: '',
|
||||||
@ -115,19 +138,27 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
const originTableData = ref<Organization[]>([]);
|
const originTableData = ref<Organization[]>([]);
|
||||||
const tableData = ref<Organization[]>([]);
|
const tableData = ref<Organization[]>([]);
|
||||||
|
const treeData = ref();
|
||||||
|
const noChildrenData = ref();
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
try {
|
try {
|
||||||
|
tableData.value=[];
|
||||||
const data = await organizationService.getAllOrganizations(); // 假设此函数可以获取后端数据
|
const data = await organizationService.getAllOrganizations(); // 假设此函数可以获取后端数据
|
||||||
console.log('获取到的部门信息', data);
|
console.log('获取到的部门信息', data);
|
||||||
originTableData.value = data;
|
originTableData.value = data;
|
||||||
console.log(originTableData.value)
|
console.log(originTableData.value);
|
||||||
// 转换数据为树形结构
|
//buildTree 负责构建树形结构
|
||||||
const treeData = buildTree(data); // 假设有一个函数 buildTree 负责构建树形结构
|
treeData.value = buildTree(originTableData.value);
|
||||||
console.log('树形结构数据', treeData);
|
console.log('树形结构数据', treeData);
|
||||||
tableData.value = treeData;
|
noChildrenData.value = originTableData.value.map(item => ({
|
||||||
|
...item,
|
||||||
|
children: [] // 将 children 设置为空数组
|
||||||
|
}));
|
||||||
|
console.log('无子组织数据', noChildrenData);
|
||||||
|
tableData.value = treeData.value;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error fetching organization:', error);
|
console.error('Error fetching organization:', error);
|
||||||
}
|
}
|
||||||
@ -151,34 +182,95 @@ export default defineComponent({
|
|||||||
roots.push(org);
|
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);
|
console.log('roots:', roots);
|
||||||
return 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 = () => {
|
const submitForm = () => {
|
||||||
console.log('提交表单', dialogForm.value);
|
console.log('提交表单' , dialogFormAdd.value);
|
||||||
organizationService.addOrganization(dialogForm.value);
|
organizationService.addOrganization(dialogFormAdd.value);
|
||||||
showDialog.value = false;
|
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(() => {
|
onMounted(() => {
|
||||||
@ -188,15 +280,47 @@ export default defineComponent({
|
|||||||
return {
|
return {
|
||||||
originTableData,
|
originTableData,
|
||||||
tableData,
|
tableData,
|
||||||
showDialog,
|
showDialogAdd,
|
||||||
dialogForm,
|
dialogFormAdd,
|
||||||
submitForm,
|
submitForm,
|
||||||
formLabelWidth,
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.department-management {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.dialog-footer{
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user