Compare commits

..

41 Commits

Author SHA1 Message Date
628c7712ff revert a9d4e8ee50
revert Merge remote-tracking branch 'origin/personal/lsd/user'

# Conflicts:
#	package.json
#	src/main.js
#	src/store/authentication.js
2024-07-05 16:36:47 +08:00
7dd7cc3e5a 移除冗余defineProps/Emits的import 2024-07-05 15:41:43 +08:00
a9d4e8ee50 Merge remote-tracking branch 'origin/personal/lsd/user'
# Conflicts:
#	package.json
#	src/main.js
#	src/store/authentication.js
2024-07-05 15:39:02 +08:00
8ada2a466f 删除导出 2024-07-05 13:07:49 +08:00
874a400803 搜索完成 2024-07-05 06:20:45 +08:00
769254498f 完成了页面嵌入适配,列表上方的创建、修改、删除
NewsList和EditNews之间的数据传递
完全是巨大的工程
2024-07-05 02:19:53 +08:00
6e725128ea 完成了多选修改按钮的实现 2024-07-05 00:14:33 +08:00
f8c0d1066d 新闻列表页面半成品,搜索待完成。
上方4按钮待完成。
权限问题。。。
2024-07-04 18:02:06 +08:00
a1aee89ae7 编辑新闻页面功能已经基本实现,除了和租户关联的问题 2024-07-04 16:47:51 +08:00
ef793edd6b 为编辑新闻页面添加路由别名 2024-07-04 16:47:27 +08:00
3fa9984464 动态刷新列表已上线,太吊了 2024-07-04 12:20:45 +08:00
5ba8b2c662 添加了token后新增功能已跑通 2024-07-04 01:02:02 +08:00
06cada8109 创建了新增+修改二合一页面,写完了新增相关代码,待测试 2024-07-04 00:45:37 +08:00
e88d034f4a 引入CKEditor5相关依赖和支持 2024-07-04 00:44:55 +08:00
c624c8203b router引入新页面:创建+修改一体化.vue(doge 2024-07-04 00:43:45 +08:00
5c96be239b 删除新闻page中的无效css 2024-07-04 00:43:03 +08:00
38563e7ee3 绘制了新闻列表界面 2024-07-03 16:48:27 +08:00
88349683e7 添加了验证码图片支持也验证码前端校验 2024-07-02 22:28:34 +08:00
3427046847 删除了无效方法 2024-07-02 21:52:39 +08:00
03330a8a35 Merge branch 'main' into personal/heshunme/authentication 2024-07-02 00:36:43 +08:00
8bca3e0978 登录模块中去除了局部的localStorage支持,修改了注册错误提示方式为MessageBox。 2024-07-02 00:34:32 +08:00
ff0ae36d16 全局更新了localStorage支持 2024-07-02 00:33:26 +08:00
0ee8483e23 更新了localStorage支持相关packages 2024-07-01 21:40:41 +08:00
b50a4c9177 添加了localStorage支持 2024-07-01 21:40:23 +08:00
c96252d46c 完成并测试了/manageProfile 2024-07-01 21:34:45 +08:00
0417ef3b38 添加了跳转到修改资料页面的按钮 2024-07-01 21:04:00 +08:00
66352ed3c9 整好了登录后自动跳转到Profile页面的功能。修复了登录时后端传来的字段没对上的问题 2024-07-01 21:01:17 +08:00
1ba1744698 登录注册已适配 2024-07-01 20:44:13 +08:00
ea20be6058 完全重写了后端,现在commit一下以前的更改,开始全新的适配 2024-07-01 20:16:07 +08:00
ac7272d59a 修正模块router中没有正确导入vue-router导致页面不能正常加载的问题。 2024-06-30 22:56:06 +08:00
a37a40d1cd 为用户信息展示页面添加逻辑 2024-06-30 17:54:50 +08:00
f776f756c8 继续完善登录状态管理功能 2024-06-30 17:53:43 +08:00
a420b5d908 继续完善登录状态管理功能 2024-06-30 17:36:44 +08:00
2ee3f12888 继续完善login功能 2024-06-30 17:01:16 +08:00
69ee4e94ce Merge branch 'main' into personal/heshunme/authentication 2024-06-30 15:58:40 +08:00
15dbc6fcd2 尝试添加login逻辑 2024-06-30 15:55:26 +08:00
ad1abc8a3d 接收了来着main的vite.config.js的修改 2024-06-30 01:33:18 +08:00
dc4bd8afb6 完成了用户信息管理页面的绘制
注册了该页面的路由
2024-06-30 01:33:14 +08:00
ed09454937 完成了注册页面的绘制,在登录和注册界面上分别添加了相互跳转的链接。
注册了注册页面的路由
2024-06-30 01:33:14 +08:00
4aaf11431c 完成了登录页面的绘制 2024-06-30 01:33:14 +08:00
c996fe40a2 注册登录完成,管理员增查完成 2024-06-29 16:54:34 +08:00
24 changed files with 2409 additions and 1540 deletions

890
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -9,18 +9,18 @@
"preview": "vite preview"
},
"dependencies": {
"@ckeditor/ckeditor5-vue": "^6.0.0",
"@element-plus/icons-vue": "^2.3.1",
"axios": "^1.7.2",
"ckeditor5": "^42.0.0",
"element-plus": "^2.7.6",
"file-saver": "^2.0.5",
"vue": "^3.4.31",
"vue": "^3.4.29",
"vue-router": "^4.4.0",
"vuex": "^4.1.0",
"vuex-persistedstate": "^4.1.0",
"xlsx": "^0.18.5"
"vuex-persistedstate": "^4.1.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.5",
"vite": "^5.3.3"
"vite": "^5.3.1"
}
}

BIN
public/background.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 300 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 130 KiB

View File

@ -1,7 +1,7 @@
<script setup>
import { ref } from 'vue';
import { ref } from 'vue'
const count = ref(0);
const count = ref(0)
</script>
<template>
@ -13,7 +13,7 @@ const count = ref(0);
<img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<h1>{{ $route.meta.msg }}</h1>
<h1>{{ this.$route.meta.msg }}</h1>
<div class="card">
<el-button type="success" @click="count++">count is {{ count }}</el-button>
@ -25,24 +25,19 @@ const count = ref(0);
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter
<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>.
<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>
<!-- 添加导航链接 -->
<ul>
<li><router-link to="/login">Login</router-link></li>
<li><router-link to="/register">Register</router-link></li>
<li><router-link to="/courseList">Courses</router-link></li>
<li><router-link to="/meetings">Meetings</router-link></li>
<li><router-link to="/news">News</router-link></li>
<li><router-link to="/organizations">Organizations</router-link></li>
<li><router-link to="/users">Users</router-link></li>
</ul>
</template>
<style scoped>
@ -61,4 +56,4 @@ const count = ref(0);
.read-the-docs {
color: #888;
}
</style>
</style>

View File

@ -3,6 +3,7 @@ import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import CKEditor from '@ckeditor/ckeditor5-vue';
import router from './router'
import store from './store'
@ -11,4 +12,5 @@ const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(store)
app.use(CKEditor)
app.mount('#app')

View File

@ -1,23 +1,36 @@
// authentication.js
import Login from '../views/authentication/Login.vue';
import Register from '../views/authentication/Register.vue';
import ManageProfile from '../views/authentication/ManageProfile.vue';
import Profile from '../views/authentication/Profile.vue';
import store from '../store';
import {createRouter, createWebHistory} from "vue-router";
export default [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
},
{
path: '/profile',
// path: '/profile/:userId',
name: 'Profile',
component: Profile
const routes = [
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/manageProfile', component: ManageProfile },
{
path: '/profile',
component: Profile,
meta: { requiresAuth: true },
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters['authentication/isAuthenticated']) {
next('/login');
} else {
next();
}
];
} else {
next();
}
});
export default routes;

View File

@ -1,23 +1,9 @@
import Course from '../views/course-management/Course.vue';
import CourseList from '../views/course-management/CourseList.vue';
import BackgroundWrapper from "@views/course-management/BackgroundWrapper.vue";
// import CourseList from '../views/course-management/CourseList.vue'
// import CourseDetail from '../views/course-management/CourseDetail.vue'
// import CourseEdit from '../views/course-management/CourseEdit.vue'
export default [
{
path: '/course',
name: 'Course',
component: Course
},
{
path: '/courseList',
name: 'CourseList',
component: CourseList
},
{
path: '/backgroundWrapper',
name: 'BackgroundWrapper',
component: BackgroundWrapper
}
];
// { path: '/courses', component: CourseList },
// { path: '/courses/:id', component: CourseDetail },
// { path: '/courses/:id/edit', component: CourseEdit }
]

View File

@ -1,9 +1,11 @@
// import NewsList from '../views/news-management/NewsList.vue'
import NewsList from '../views/news-management/NewsList.vue'
import EditNews from "@views/news-management/EditNews.vue";
// import NewsDetail from '../views/news-management/NewsDetail.vue'
// import NewsEdit from '../views/news-management/NewsEdit.vue'
export default [
// { path: '/news', component: NewsList },
{ path: '/news', component: NewsList },
{ path: '/news/edit', component: EditNews, name: 'editNews' },
// { path: '/news/:id', component: NewsDetail },
// { path: '/news/:id/edit', component: NewsEdit }
]

View File

@ -1,34 +0,0 @@
// authenticationService.js
import axios from 'axios';
const API_URL = '/api';
class AuthenticationService {
login(credentials) {
return axios.post(`${API_URL}/login`, credentials);
}
register(user) {
return axios.post(`${API_URL}/register`, user);
}
updateUserInfo(user) {
return axios.post(`${API_URL}/update`, user);
}
changePassword(data) {
return axios.post(`${API_URL}/changePassword`, null, {
params: {
username: data.username,
oldPassword: data.oldPassword,
newPassword: data.newPassword
}
});
}
getUserInfo(token) {
return axios.get(`${API_URL}/profile?token=${token}`);
}
}
export default new AuthenticationService();

View File

@ -1,31 +1,43 @@
import axios from 'axios';
const state = {
token: null
}
isAuthenticated: false,
token: null,
};
const mutations = {
setUser(state, {token}) {
state.token = token
}
}
state.isAuthenticated = true;
state.token = token;
},
clearUser(state) {
state.isAuthenticated = false;
state.token = null;
},
};
const actions = {
login({commit}, token) {
commit('setUser', token)
async login({commit}, credentials) {
const response = await axios.post('/api/login', credentials);
if (response.status === 200) {
commit('setUser', {token: response.data.token});
}
return response;
},
logout({commit}) {
commit('setUser', null)
}
}
commit('clearUser');
},
};
const getters = {
isAuthenticated: state => !!state.token,
token: state => state.token
}
isAuthenticated: (state) => state.isAuthenticated,
token: (state) => state.token,
};
export default {
namespaced: true,
state,
mutations,
actions,
getters
}
getters,
};

View File

@ -1,4 +1,158 @@
@import url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body, html {
margin: 0;
padding: 0;
}
}
@media print {
body {
margin: 0 !important;
}
}
.main-container {
font-family: 'Lato';
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.ck-content {
font-family: 'Lato';
line-height: 1.6;
word-break: break-word;
}
.editor-container_classic-editor .editor-container__editor {
min-width: 750px;
max-width: 1000px;
width: 100%;
}
.ck-content h3.category {
font-family: 'Oswald';
font-size: 20px;
font-weight: bold;
color: #555;
letter-spacing: 10px;
margin: 0;
padding: 0;
}
.ck-content h2.document-title {
font-family: 'Oswald';
font-size: 50px;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
}
.ck-content h3.document-subtitle {
font-family: 'Oswald';
font-size: 20px;
color: #555;
margin: 0 0 1em;
font-weight: bold;
padding: 0;
}
.ck-content p.info-box {
--background-size: 30px;
--background-color: #e91e63;
padding: 1.2em 2em;
border: 1px solid var(--background-color);
background: linear-gradient(
135deg,
var(--background-color) 0%,
var(--background-color) var(--background-size),
transparent var(--background-size)
),
linear-gradient(
135deg,
transparent calc(100% - var(--background-size)),
var(--background-color) calc(100% - var(--background-size)),
var(--background-color)
);
border-radius: 10px;
margin: 1.5em 2em;
box-shadow: 5px 5px 0 #ffe6ef;
}
.ck-content blockquote.side-quote {
font-family: 'Oswald';
font-style: normal;
float: right;
width: 35%;
position: relative;
border: 0;
overflow: visible;
z-index: 1;
margin-left: 1em;
}
.ck-content blockquote.side-quote::before {
content: '“';
position: absolute;
top: -37px;
left: -10px;
display: block;
font-size: 200px;
color: #e7e7e7;
z-index: -1;
line-height: 1;
}
.ck-content blockquote.side-quote p {
font-size: 2em;
line-height: 1;
}
.ck-content blockquote.side-quote p:last-child:not(:first-child) {
font-size: 1.3em;
text-align: right;
color: #555;
}
.ck-content span.marker {
background: yellow;
}
.ck-content span.spoiler {
background: #000;
color: #000;
}
.ck-content span.spoiler:hover {
background: #000;
color: #fff;
}
.ck-content pre.fancy-code {
border: 0;
margin-left: 2em;
margin-right: 2em;
border-radius: 10px;
}
.ck-content pre.fancy-code::before {
content: '';
display: block;
height: 13px;
margin-bottom: 8px;
background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==) no-repeat;
}
.ck-content pre.fancy-code-dark {
background: #272822;
color: #fff;
box-shadow: 5px 5px 0 #0000001f;
}
.ck-content pre.fancy-code-bright {
background: #dddfe0;
color: #000;
box-shadow: 5px 5px 0 #b3b3b3;
}

View File

@ -1,93 +1,121 @@
<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { ElInput, ElButton, ElCheckbox, ElForm, ElFormItem, ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import AuthenticationService from '../../services/authenticationService';
import { useRouter } from 'vue-router';
const router = useRouter();
const store = useStore();
const router = useRouter();
const credentials = reactive({
username: '',
password: ''
});
const username = ref('');
const password = ref('');
const rememberMe = ref(false);
const handleLogin = async () => {
console.log('Logging in with', { username: username.value, password: password.value, rememberMe: rememberMe.value });
const login = async () => {
try {
const response = await AuthenticationService.login(credentials);
const response = await store.dispatch('authentication/login', {
username: username.value,
password: password.value,
});
if (response.status === 200) {
store.commit('authentication/setUser', { token: response.data.token });
router.push("/profile");
ElMessage.success('登录成功');
router.push('/profile');
} else {
ElMessage.error('登录失败,请稍后再试');
}
} catch (error) {
ElMessage.error('用户名或密码错误');
console.error("登录错误:", error);
if (error.response && error.response.status === 401) {
ElMessage.error('用户名或密码错误');
} else {
ElMessage.error('登录失败,请稍后再试');
}
}
};
const goToRegister = () => {
router.push('/register');
};
</script>
<template>
<div class="login-wrapper">
<div class="login-container">
<h1>用户登录</h1>
<el-form @submit.prevent="login" label-width="100px">
<el-form-item label="用户名:">
<el-input v-model="credentials.username" id="username" class="short-input"/>
</el-form-item>
<el-form-item label="密码:">
<el-input v-model="credentials.password" id="password" type="password" class="short-input"/>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">登录</el-button>
<el-button type="default" @click="goToRegister">注册</el-button>
</el-form-item>
</el-form>
<div class="login-container">
<div class="login-box">
<h2>测盟汇管理系统</h2>
<ElForm @submit.prevent="handleLogin">
<ElFormItem>
<label for="username">
<i class="fas fa-user"></i> 账号
</label>
<ElInput v-model="username" type="text" id="username" placeholder="请输入您的账号" required />
</ElFormItem>
<ElFormItem>
<label for="password">
<i class="fas fa-lock"></i> 密码
</label>
<ElInput v-model="password" type="password" id="password" placeholder="请输入您的密码" required />
</ElFormItem>
<ElFormItem>
<ElCheckbox v-model="rememberMe" id="rememberMe">记住密码</ElCheckbox>
</ElFormItem>
<ElFormItem>
<ElButton type="primary" native-type="submit" class="login-button">登录</ElButton>
</ElFormItem>
<ElFormItem>
<ElButton type="text" @click="() => $router.push('/register')">注册</ElButton>
</ElFormItem>
</ElForm>
</div>
</div>
</template>
<style scoped>
.login-wrapper {
.login-container {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
height: 100vh;
background: url('@public/background1.jpg') no-repeat center center;
background: url('background.jpg') no-repeat center center;
background-size: cover;
}
.login-container {
max-width: 400px;
width: 100%;
padding: 30px;
border: 1px solid #ebeef5;
border-radius: 10px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 0.9);
.login-box {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 20%;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: 24px;
color: #333;
h2 {
margin-bottom: 1rem;
}
.el-form-item {
margin-bottom: 20px;
margin-bottom: 1rem;
text-align: left;
}
.short-input {
width: 80%;
.el-form-item label {
display: block;
margin-bottom: 0.5rem;
}
.el-input {
width: 100%;
}
.el-button {
margin-right: 10px;
width: 100%;
padding: 0.75rem;
}
</style>
.el-button--primary {
background-color: #007bff;
color: white;
}
.el-button--primary:hover {
background-color: #0056b3;
}
</style>

View File

@ -0,0 +1,219 @@
<script setup>
import {onMounted, ref} from 'vue';
import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElRadio, ElRadioGroup, ElTabPane, ElTabs} from 'element-plus';
import 'element-plus/dist/index.css';
import axios from "axios";
import {useStore} from 'vuex';
import {useRouter} from 'vue-router';
const store = useStore();
const router = useRouter();
const token = store.getters['authentication/token'];
const nickname = ref('');
const phoneNumber = ref('');
const email = ref('');
const gender = ref('');
const department = ref('');
const role = ref('');
const currentPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
onMounted(
async () => {
try {
// VuexJWT token
if (!token) {
store.commit('authentication/logout');
router.push('/login');
}
// token
const response = await axios.get(`/api/userProfile?token=${token}`);
if (response.status === 200) {
const user = response.data;
nickname.value = user.nickname;
phoneNumber.value = user.phoneNumber;
email.value = user.email;
gender.value = user.gender;
department.value = user.department;
role.value = user.role;
} else {
ElMessage.error('获取用户信息失败,请重试');
}
} catch (error) {
console.error('Error fetching user profile:', error);
ElMessage.error('获取用户信息失败,请重试');
}
}
)
const handleSaveProfile = async () => {
console.log('Saving profile with', {
nickname: nickname.value,
phoneNumber: phoneNumber.value,
email: email.value,
gender: gender.value,
department: department.value,
role: role.value
});
//
try {
const response = await axios.post('/api/manageUserProfile', {
token: token,
nickname: nickname.value,
phoneNumber: phoneNumber.value,
email: email.value,
gender: gender.value,
department: department.value,
role: role.value
});
if (response.status === 200) {
ElMessage.success('资料保存成功');
} else {
ElMessage.error('保存用户信息失败,请重试');
}
} catch (error) {
console.info('Error saving user profile:', error);
ElMessage.error('保存用户信息失败,请重试');
}
};
const handleChangePassword = async () => {
if (newPassword.value !== confirmPassword.value) {
ElMessage.error('新密码和确认密码不一致');
return;
}
// console.log('Changing password with', {currentPassword: currentPassword.value, newPassword: newPassword.value});
//
try {
const response = await axios.post('/api/changePassword', {
token: token,
currentPassword: currentPassword.value,
newPassword: newPassword.value
});
if (response.status === 200) {
ElMessage.success('密码修改成功,请重新登录');
store.commit('authentication/logout');
router.push('/login');
} else {
ElMessage.error('修改密码失败,请重试');
}
} catch (error) {
console.info('Error changing password:', error);
ElMessage.error('修改密码失败,请重试');
}
};
</script>
<template>
<div class="profile-container">
<div class="profile-box">
<h2>基本资料</h2>
<ElTabs>
<ElTabPane label="基本资料">
<ElForm @submit.prevent="handleSaveProfile" label-width="100px">
<ElFormItem label="用户昵称">
<ElInput v-model="nickname" type="text" placeholder="请输入用户昵称" required/>
</ElFormItem>
<ElFormItem label="手机号码">
<ElInput v-model="phoneNumber" type="text" placeholder="请输入手机号码" required/>
</ElFormItem>
<ElFormItem label="邮箱">
<ElInput v-model="email" type="email" placeholder="请输入邮箱" required/>
</ElFormItem>
<ElFormItem label="性别">
<ElRadioGroup v-model="gender">
<ElRadio label="男"></ElRadio>
<ElRadio label="女"></ElRadio>
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="部门">
<ElInput v-model="department" type="text" placeholder="请输入部门" required/>
</ElFormItem>
<ElFormItem label="角色">
<ElInput v-model="role" type="text" placeholder="请输入角色" required/>
</ElFormItem>
<!-- <ElFormItem label="角色">-->
<!-- <ElSelect v-model="role" placeholder="请选择角色" required>-->
<!-- <ElOption label="管理员" value="admin"/>-->
<!-- <ElOption label="用户" value="user"/>-->
<!-- </ElSelect>-->
<!-- </ElFormItem>-->
<ElFormItem>
<ElButton type="primary" @click="handleSaveProfile">保存</ElButton>
<ElButton type="danger">取消</ElButton>
</ElFormItem>
</ElForm>
</ElTabPane>
<ElTabPane label="修改密码">
<ElForm @submit.prevent="handleChangePassword" label-width="100px">
<ElFormItem label="旧密码">
<ElInput v-model="currentPassword" type="password" placeholder="请输入旧密码" required/>
</ElFormItem>
<ElFormItem label="新密码">
<ElInput v-model="newPassword" type="password" placeholder="请输入新密码" required/>
</ElFormItem>
<ElFormItem label="确认密码">
<ElInput v-model="confirmPassword" type="password" placeholder="请输入确认密码" required/>
</ElFormItem>
<ElFormItem>
<ElButton type="primary" @click="handleChangePassword">修改密码</ElButton>
</ElFormItem>
</ElForm>
</ElTabPane>
</ElTabs>
<ElButton type="text" @click="() => $router.push('/profile')">返回</ElButton>
</div>
</div>
</template>
<style scoped>
.profile-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: white;
}
.profile-box {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 600px;
}
h2 {
margin-bottom: 1rem;
}
.el-form-item {
margin-bottom: 1rem;
text-align: left;
}
.el-form-item label {
display: block;
margin-bottom: 0.5rem;
}
.el-input {
width: 100%;
}
.el-button--primary {
background-color: #007bff;
color: white;
}
.el-button--primary:hover {
background-color: #0056b3;
}
</style>

View File

@ -1,251 +1,144 @@
<script setup>
import {onMounted, ref} from 'vue';
import 'element-plus/dist/index.css';
import {useStore} from 'vuex';
import axios from "axios";
import {ElButton, ElMessage} from "element-plus";
import {useRouter} from 'vue-router';
const store = useStore();
const router = useRouter();
const nickname = ref('');
const phoneNumber = ref('');
const email = ref('');
const department = ref('');
const role = ref('');
const createdAt = ref('');
onMounted(async () => {
try {
// VuexJWT token
const token = store.getters['authentication/token'];
if (!token) {
store.commit('authentication/logout');
router.push('/login');
}
// token
const response = await axios.get(`/api/userProfile?token=${token}`);
if (response.status === 200) {
const user = response.data;
nickname.value = user.nickname;
phoneNumber.value = user.phoneNumber;
email.value = user.email;
department.value = user.department;
role.value = user.role;
createdAt.value = user.createdAt;
} else {
ElMessage.error("获取用户信息失败,请重试");
}
} catch (error) {
console.error('Error fetching user profile:', error);
ElMessage.error("获取用户信息失败,请重试");
}
});
</script>
<template>
<div class="profile-wrapper">
<div class="profile-container">
<el-button type="danger" @click="confirmLogout" class="logout-button">注销</el-button>
<el-tabs v-model="activeTab">
<el-tab-pane label="用户信息" name="userInformation"></el-tab-pane>
<el-tab-pane label="信息修改" name="profile"></el-tab-pane>
<el-tab-pane label="更改密码" name="changePassword"></el-tab-pane>
</el-tabs>
<div v-if="activeTab === 'userInformation'" class="user-information">
<h2>用户信息</h2>
<div class="user-info">
<div class="user-details">
<p>用户名: {{ user.username }}</p>
<p>电子邮箱: {{ user.email }}</p>
<p>电话号码: {{ user.phoneNumber }}</p>
<p>所属企业: {{ user.company }}</p>
<p>创建日期: {{ user.createdDate }}</p>
</div>
<div class="user-avatar">
<img src='@assets/avatar.jpg' alt="用户头像" />
</div>
<div class="profile-container">
<div class="profile-box">
<h2>个人信息</h2>
<div class="profile-image">
<img src="@assets/avatar.jpg" alt="Profile Image"/>
</div>
<div class="profile-info">
<div class="divider"></div>
<div class="info-item">
<span class="info-label">用户昵称</span>
<span class="info-value">{{ nickname }}</span>
</div>
<div class="divider"></div>
<div class="info-item">
<span class="info-label">手机号码</span>
<span class="info-value">{{ phoneNumber }}</span>
</div>
<div class="divider"></div>
<div class="info-item">
<span class="info-label">用户邮箱</span>
<span class="info-value">{{ email }}</span>
</div>
<div class="divider"></div>
<div class="info-item">
<span class="info-label">所属部门</span>
<span class="info-value">{{ department }}</span>
</div>
<div class="divider"></div>
<div class="info-item">
<span class="info-label">所属角色</span>
<span class="info-value">{{ role }}</span>
</div>
<div class="divider"></div>
<div class="info-item">
<span class="info-label">创建日期</span>
<span class="info-value">{{ createdAt }}</span>
</div>
<div class="divider"></div>
</div>
<div v-if="activeTab === 'profile'" class="centered-content">
<h2>信息修改</h2>
<el-form @submit.prevent="updateProfile" label-width="120px" class="centered-form profile-form">
<el-form-item label="用户名:">
<el-input v-model="user.username" id="username" class="short-input" disabled />
</el-form-item>
<el-form-item label="电子邮箱:">
<el-input v-model="user.email" id="email" class="short-input" />
</el-form-item>
<el-form-item label="电话号码:">
<el-input v-model="user.phoneNumber" id="phoneNumber" class="short-input" />
</el-form-item>
<el-form-item label="所属企业:">
<el-input v-model="user.company" id="company" class="short-input" />
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">更新</el-button>
</el-form-item>
</el-form>
</div>
<div v-if="activeTab === 'changePassword'" class="centered-content">
<h2>更改密码</h2>
<el-form @submit.prevent="changePassword" label-width="120px" class="centered-form password-form">
<el-form-item label="旧密码:">
<el-input v-model="passwords.oldPassword" :type="showOldPassword ? 'text' : 'password'" class="short-password-input" />
<el-button @click="togglePasswordVisibility('oldPassword')">{{ showOldPassword ? '隐藏' : '显示' }}</el-button>
</el-form-item>
<el-form-item label="新密码:">
<el-input v-model="passwords.newPassword" :type="showNewPassword ? 'text' : 'password'" class="short-password-input" />
<el-button @click="togglePasswordVisibility('newPassword')">{{ showNewPassword ? '隐藏' : '显示' }}</el-button>
</el-form-item>
<el-form-item label="再次确认:">
<el-input v-model="passwords.confirmPassword" :type="showConfirmPassword ? 'text' : 'password'" class="short-password-input" />
<el-button @click="togglePasswordVisibility('confirmPassword')">{{ showConfirmPassword ? '隐藏' : '显示' }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">更改</el-button>
</el-form-item>
</el-form>
</div>
<ElButton type="text" @click="() => $router.push('/manageProfile')">修改信息</ElButton>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'; // ElMessageBox
import AuthenticationService from '../../services/authenticationService';
const store = useStore();
const router = useRouter();
const activeTab = ref('userInformation');
const user = ref({
id: null,
username: '',
email: '',
phoneNumber: '',
company: '',
createdDate: ''
});
const passwords = ref({
oldPassword: '',
newPassword: '',
confirmPassword: ''
});
const showOldPassword = ref(false);
const showNewPassword = ref(false);
const showConfirmPassword = ref(false);
const token = store.getters['authentication/token'];
const fetchUserInfo = async () => {
try {
const response = await AuthenticationService.getUserInfo(token);
user.value = response.data;
} catch (error) {
console.error("获取用户信息错误:", error);
}
};
const updateProfile = async () => {
try {
await AuthenticationService.updateUserInfo(user.value);
ElMessage.success('个人信息更新成功');
await fetchUserInfo();
} catch (error) {
console.error("更新个人信息错误:", error);
ElMessage.error('更新个人信息失败');
}
};
const changePassword = async () => {
if (passwords.value.newPassword !== passwords.value.confirmPassword) {
ElMessage.error('新密码和确认密码不一致');
return;
}
try {
await AuthenticationService.changePassword({
username: user.value.username,
oldPassword: passwords.value.oldPassword,
newPassword: passwords.value.newPassword
});
ElMessage.success('密码更改成功');
} catch (error) {
console.error("更改密码错误:", error);
ElMessage.error('旧密码错误');
}
};
const togglePasswordVisibility = (field) => {
if (field === 'oldPassword') {
showOldPassword.value = !showOldPassword.value;
} else if (field === 'newPassword') {
showNewPassword.value = !showNewPassword.value;
} else if (field === 'confirmPassword') {
showConfirmPassword.value = !showConfirmPassword.value;
}
};
const confirmLogout = () => {
ElMessageBox.confirm('是否确认注销?', '注销确认', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(logout).catch(() => {});
};
const logout = () => {
store.commit('authentication/logout');
router.push('/login');
};
onMounted(() => {
fetchUserInfo();
});
</script>
<style scoped>
.profile-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-image: url('@public/background2.jpg');
background-size: cover;
background-position: center;
}
.profile-container {
max-width: 600px;
width: 100%;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: white;
}
h1, h2 {
text-align: center;
margin-bottom: 20px;
.profile-box {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 30%;
max-width: 300px;
text-align: center;
}
.profile-form, .password-form {
margin-bottom: 30px;
.profile-image img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 1rem;
}
.centered-content {
display: flex;
flex-direction: column;
align-items: center;
.profile-info {
text-align: left;
}
.centered-form {
width: 100%;
max-width: 400px;
.info-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.user-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 20px 20px 80px;
border-top: 1px solid #ebeef5;
margin-top: 20px;
.info-label {
font-weight: bold;
}
.user-details {
flex: 1;
padding-right: 20px;
.info-value {
color: #555;
}
.user-avatar {
padding-right: 50px;
.divider {
height: 1px;
background: #e0e0e0;
margin: 0.5rem 0;
}
.user-avatar img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
.short-input {
width: 90%;
}
.short-password-input {
width: 80%;
}
.logout-button {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
padding: 10px 20px;
}
</style>
</style>

View File

@ -1,189 +1,161 @@
<template>
<el-container class="register-container">
<el-main class="register-main">
<el-card class="register-card">
<el-header>
<h2>注册</h2>
</el-header>
<el-form @submit.prevent="register" label-position="top" class="register-form">
<el-form-item label="用户名" required>
<el-input class="form-input" type="text" v-model="username"></el-input>
</el-form-item>
<el-form-item label="密码" required>
<el-input class="form-input" type="password" v-model="password"></el-input>
</el-form-item>
<el-form-item label="电子邮箱" required>
<el-input class="form-input" type="email" v-model="email"></el-input>
</el-form-item>
<el-form-item label="电话号码" required>
<el-input class="form-input" type="text" v-model="phoneNumber"></el-input>
</el-form-item>
<el-form-item label="所属企业" required>
<el-input class="form-input" type="text" v-model="company"></el-input>
</el-form-item>
<el-form-item label="选择身份">
<el-select class="form-input" v-model="role" placeholder="选择身份">
<el-option label="租户" value="USER"></el-option>
<el-option label="管理员" value="ADMIN"></el-option>
</el-select>
</el-form-item>
<el-form-item label="请输入验证码" required>
<el-input class="form-input" type="text" v-model="verificationCode"></el-input>
<el-button class="verification-button" type="primary" @click="getVerificationCode">获取验证码</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">注册</el-button>
<el-button type="default" @click="goToLogin">返回</el-button>
</el-form-item>
</el-form>
<el-alert v-if="message" type="info" :closable="false">{{ message }}</el-alert>
</el-card>
</el-main>
</el-container>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import authenticationService from '../../services/authenticationService';
import {ref} from 'vue';
import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox} from 'element-plus';
import 'element-plus/dist/index.css';
import axios from 'axios';
import {useRouter} from 'vue-router';
const username = ref('');
const password = ref('');
const email = ref('');
const phoneNumber = ref('');
const company = ref('');
const role = ref('USER');
const password = ref('');
const verificationCode = ref('');
const message = ref('');
const correctCode = ref('');
const router = useRouter();
const verificationCodeImage = ref('');
const handleRegister = async () => {
console.log('Registering with', {
username: username.value,
phoneNumber: phoneNumber.value,
password: password.value,
verificationCode: verificationCode.value
});
if (verificationCode.value!==correctCode.value){
await ElMessageBox.alert("验证码错误");
return
}
try {
const response = await axios.post('/api/register', {
username: username.value,
phoneNumber: phoneNumber.value,
password: password.value,
verificationCode: verificationCode.value,
});
if (response.status === 200) {
ElMessage.success(response.data.message);
router.push('/login');
} else {
await ElMessageBox.alert(response.data.message);
}
} catch (error) {
await ElMessageBox.alert(error.response.data.message || '注册失败,请稍后再试');
}
};
const getVerificationCode = async () => {
//
message.value = '验证码已发送。请检查您的邮箱/短信。';
};
const register = async () => {
if (!username.value) {
ElMessage.error('用户名不能为空!');
return;
}
if (!password.value) {
ElMessage.error('密码不能为空!');
return;
}
if (!email.value) {
ElMessage.error('电子邮箱不能为空!');
return;
}
if (!phoneNumber.value) {
ElMessage.error('电话号码不能为空!');
return;
}
if (!company.value) {
ElMessage.error('所属企业不能为空!');
return;
}
if (!verificationCode.value) {
ElMessage.error('验证码不能为空!');
return;
}
try {
const response = await authenticationService.register({
username: username.value,
password: password.value,
email: email.value,
phoneNumber: phoneNumber.value,
company: company.value,
role: role.value
});
message.value = response.data.message;
router.push('/login');
} catch (error) {
console.error("注册失败:", error.response.data.message);
message.value = error.response.data.message;
}
};
const response = await axios.get('/api/getVerificationCode');
const goToLogin = () => {
router.push('/login');
if (response.status === 200) {
verificationCodeImage.value = '/api/'+response.data.path; //
correctCode.value = response.data.code;
ElMessage.success('验证码已获取');
} else {
ElMessage.error('获取验证码失败,请稍后再试');
}
} catch (error) {
ElMessage.error('获取验证码失败,请稍后再试');
}
};
</script>
<template>
<div class="register-container">
<div class="register-box">
<h2>企业租户注册</h2>
<ElForm @submit.prevent="handleRegister">
<ElFormItem>
<label for="userName">用户名称</label>
<ElInput v-model="username" type="text" id="userName" placeholder="请输入企业名称" required/>
</ElFormItem>
<ElFormItem>
<label for="phoneNumber">手机号码</label>
<ElInput v-model="phoneNumber" type="text" id="phoneNumber" placeholder="请输入企业联系方式" required/>
</ElFormItem>
<ElFormItem>
<label for="password">密码</label>
<ElInput v-model="password" type="password" id="password" placeholder="请输入密码" required/>
</ElFormItem>
<ElFormItem>
<label for="verificationCode">验证码</label>
<ElInput v-model="verificationCode" type="text" id="verificationCode" placeholder="请输入验证码" required>
<template #append>
<ElButton type="primary" @click="getVerificationCode" class="verification-button">获取验证码</ElButton>
</template>
</ElInput>
</ElFormItem>
<ElFormItem v-if="verificationCodeImage">
<img :src="verificationCodeImage" alt="验证码" />
</ElFormItem>
<ElFormItem>
<ElButton type="primary" native-type="submit" class="register-button">注册</ElButton>
</ElFormItem>
<ElFormItem>
<ElButton type="text" @click="() => $router.push('/login')">返回登录</ElButton>
</ElFormItem>
</ElForm>
</div>
</div>
</template>
<style scoped>
.register-container {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url('@public/background1.jpg');
background: url('background.jpg') no-repeat center center;
background-size: cover;
background-position: center;
padding: 20px;
}
.register-main {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.register-card {
padding: 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.register-box {
background: white;
padding: 2rem;
border-radius: 8px;
background-color: white;
width: 100%;
max-width: 350px; /* 调整卡片的宽度 */
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 20%;
}
.register-form {
width: 100%;
max-height: 400px;
overflow-y: auto; /* 使表单内容可滚动 */
h2 {
margin-bottom: 1rem;
}
.el-form-item {
margin-bottom: 15px; /* 调整表单项之间的间距 */
margin-bottom: 1rem;
text-align: left;
}
.el-header h2 {
text-align: center;
margin: 0 0 20px;
.el-form-item label {
display: block;
margin-bottom: 0.5rem;
}
.form-input {
width: calc(100% - 12px); /* 调整输入框的宽度,与滚动条保持距离 */
padding-right: 12px; /* 增加右侧内边距 */
box-sizing: border-box; /* 确保宽度包含内边距 */
.el-input {
width: 100%;
}
.verification-button {
margin-top: 10px; /* 调整验证码按钮上方的间距 */
width: 120px; /* 确保按钮宽度合适 */
display: flex;
justify-content: center;
align-items: center;
padding: 0; /* 去除默认内边距 */
}
.el-alert {
margin-top: 20px;
.el-button {
width: 100%;
padding: 0.75rem;
}
/* 自定义滚动条样式 */
.register-form::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
.el-button--primary {
background-color: #007bff;
color: white;
}
.register-form::-webkit-scrollbar-track {
background: #f1f1f1; /* 滚动条轨道颜色 */
border-radius: 10px;
.el-button--primary:hover {
background-color: #0056b3;
}
.register-form::-webkit-scrollbar-thumb {
background: #888; /* 滚动条滑块颜色 */
border-radius: 10px;
}
.register-form::-webkit-scrollbar-thumb:hover {
background: #555; /* 滚动条滑块在悬停时的颜色 */
}
</style>
</style>

View File

@ -1,17 +0,0 @@
<template>
<div class="background-wrapper">
<slot></slot>
</div>
</template>
<style scoped>
.background-wrapper {
background: url('@public/background2.jpg') no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>

View File

@ -1,425 +0,0 @@
<script setup>
import {onMounted, ref, computed} from 'vue';
import {
ElButton,
ElForm,
ElFormItem,
ElInput,
ElMessage,
ElMessageBox,
ElUpload
} from 'element-plus';
import {Delete, Plus, Refresh, ZoomIn} from "@element-plus/icons-vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import axios from "axios";
import BackgroundWrapper from './BackgroundWrapper.vue'; // BackgroundWrapper
const route = useRoute();
const router = useRouter();
const store = useStore();
const token = ref('')
const form = ref({
token: '',
title: '',
description: '',
orderNo: '',
author: '',
videoPath: '',
imagePath: ''
});
const createMode = ref(false);
const modeTitle = ref('');
const videoFileList = ref([]); //
const imageFileList = ref([]); //
const basePath = '/api/courses'
const videoUploadUrl = basePath + '/upload'; //
const imageUploadUrl = videoUploadUrl; //
const dialogImageUrl = ref('');
const dialogVisible = ref(false); //
//
const id = ref('');
const beforeVideoUpload = (file) => {
const isMp4 = file.type === 'video/mp4';
if (!isMp4) {
ElMessage.error('只能上传 mp4 格式的视频文件!');
return false;
}
const isLt500M = file.size / 1024 / 1024 < 500;
if (!isLt500M) {
ElMessage.error('上传视频大小不能超过 500MB');
return false;
}
return true;
};
const beforeImageUpload = (file) => {
const isImage = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg';
if (!isImage) {
ElMessage.error('只能上传 png/jpg/jpeg 格式的图片文件!');
return false;
}
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
ElMessage.error('上传文件大小不能超过 5MB');
return false;
}
return true;
};
const handleVideoSuccess = (response, file, fileList) => {
file.url = response.url;
form.value.videoPath = response.url; //
};
const handleImageSuccess = (response, file, fileList) => {
file.url = response.url;
form.value.imagePath = response.url; //
};
const handleVideoError = (error, file, fileList) => {
ElMessage.error('视频上传失败,请重试!');
};
const handleImageError = (error, file, fileList) => {
ElMessage.error('图片上传失败,请重试!');
};
const handleVideoChange = (file, fileList) => {
if (fileList.length > 1) {
fileList.splice(0, fileList.length - 1)
}
};
const handleImageChange = (file, fileList) => {
if (fileList.length > 1) {
fileList.splice(0, fileList.length - 1)
}
};
const handlePictureCardPreview = (file) => {
dialogImageUrl.value = file.url
dialogVisible.value = true
}
const handleRemoveImage = (file) => {
imageFileList.value = imageFileList.value.filter((item) => item.uid !== file.uid);
}
const handleRemoveVideo = (file) => {
videoFileList.value = videoFileList.value.filter((item) => item.uid !== file.uid);
}
const handleCommit = async () => {
if (form.value.title === '' || form.value.description === '' || form.value.orderNo === '' || form.value.author === '') {
await ElMessageBox.alert('请填写完整信息!');
return;
}
if (isNaN(form.value.orderNo)) {
await ElMessageBox.alert('排序必须是一个数字!');
return;
}
if (imageFileList.value.length === 0 || videoFileList.value.length === 0) {
await ElMessageBox.alert('请选择封面图片和课程视频!');
return;
}
form.value.imagePath = imageFileList.value[0].url;
form.value.videoPath = videoFileList.value[0].url;
if (createMode.value) {
try {
const response = await axios.post(basePath, form.value);
ElMessage.success('添加成功!');
router.push('/courseList');
} catch (e) {
await ElMessageBox.alert(e.response.data.message);
}
} else {
try {
const response = await axios.put(`${basePath}/${id.value}`, form.value);
ElMessage.success('修改成功!');
router.push('/courseList');
} catch (e) {
await ElMessageBox.alert(e.response.data.message);
}
}
};
const isLayoutReady = ref(false);
const fetchCourseDetail = async () => {
let params = {
token: token.value,
}
const res = await axios.get(basePath + '/' + id.value, {params});
form.value.title = res.data.title;
form.value.description = res.data.description;
form.value.orderNo = res.data.orderNo;
form.value.author = res.data.author;
form.value.videoPath = res.data.videoPath;
form.value.imagePath = res.data.imagePath;
imageFileList.value.push({url: res.data.imagePath});
videoFileList.value.push({url: res.data.videoPath});
}
const orderNo = computed({
get() {
return form.value.orderNo;
},
set(value) {
form.value.orderNo = value.replace(/\D/g, ''); //
}
});
onMounted(() => {
token.value = store.getters['authentication/token'];
form.value.token = token.value;
if (route.query.mode === 'create' || route.params.mode === 'create') {
createMode.value = true;
modeTitle.value = '添加课程';
}
if (route.query.mode === 'edit' || route.params.mode === 'edit') {
id.value = route.params.id === undefined ? route.query.id : route.params.id;
createMode.value = false;
modeTitle.value = '修改课程';
fetchCourseDetail();
}
});
</script>
<template>
<BackgroundWrapper class="background-wrapper">
<div class="form-container">
<ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
<h2>{{ modeTitle }}</h2>
<ElFormItem label="课程名称" required>
<ElInput v-model="form.title" placeholder="请输入课程名称" required></ElInput>
</ElFormItem>
<ElFormItem label="课程封面" required>
<el-upload
:action="imageUploadUrl"
:limit="2"
:before-upload="beforeImageUpload"
:on-success="handleImageSuccess"
:on-error="handleImageError"
:on-change="handleImageChange"
:file-list="imageFileList"
list-type="picture-card"
auto-upload
v-model:file-list="imageFileList"
>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<el-icon><zoom-in/></el-icon>
</span>
<span
class="el-upload-list__item-delete"
@click="handleRemoveImage(file)"
>
<el-icon><Delete/></el-icon>
</span>
</span>
</div>
</template>
<el-icon v-if="imageFileList.length === 0">
<Plus/>
</el-icon>
<el-icon v-else>
<Refresh/>
</el-icon>
</el-upload>
<div class="tip">
请上传大小不超过 <span style="color: red;">5MB</span> 格式为 <span style="color: red;">png/jpg/jpeg</span> 的文件
</div>
</ElFormItem>
<ElFormItem label="课程视频" required>
<el-upload
:action="videoUploadUrl"
:limit="2"
:before-upload="beforeVideoUpload"
:on-success="handleVideoSuccess"
:on-error="handleVideoError"
:on-change="handleVideoChange"
:file-list="videoFileList"
list-type="picture-card"
auto-upload
v-model:file-list="videoFileList"
>
<template #file="{ file }">
<div>
<video class="el-upload-list__item-thumbnail" :src="file.url" controls></video>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-delete"
@click="handleRemoveVideo(file)"
>
<el-icon><Delete/></el-icon>
</span>
</span>
</div>
</template>
<el-icon v-if="videoFileList.length === 0">
<Plus/>
</el-icon>
<el-icon v-else>
<Refresh/>
</el-icon>
</el-upload>
<div class="tip">
请上传大小不超过 <span style="color: red;">500MB</span> 格式为 <span style="color: red;">mp4</span> 的文件
</div>
</ElFormItem>
<ElFormItem label="课程简介" required>
<ElInput v-model="form.description" placeholder="请输入课程简介" required></ElInput>
</ElFormItem>
<ElFormItem label="课程排序" required>
<ElInput v-model="orderNo" placeholder="请输入课程排序(数字)" required></ElInput>
</ElFormItem>
<ElFormItem label="作者" required>
<ElInput v-model="form.author" placeholder="请输入作者" required></ElInput>
</ElFormItem>
<ElFormItem>
<ElButton type="primary" native-type="submit">确定</ElButton>
<ElButton @click="router.push('/courseList')">取消</ElButton>
</ElFormItem>
</ElForm>
</div>
<el-dialog v-model="dialogVisible" class="image-preview">
<img w-full :src="dialogImageUrl" alt="Preview Image"/>
</el-dialog>
</BackgroundWrapper>
</template>
<style scoped>
html, body {
height: 100%;
margin: 0;
}
.background-wrapper {
position: fixed; /* 确保背景覆盖整个视口 */
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto; /* 只在内容溢出时允许滚动 */
/* 自定义滚动条样式 */
scrollbar-width: thin;
scrollbar-color: #007bff #f0f0f0;
}
/* 针对 Webkit 浏览器的自定义滚动条 */
.background-wrapper::-webkit-scrollbar {
width: 8px;
}
.background-wrapper::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 10px;
}
.background-wrapper::-webkit-scrollbar-thumb {
background-color: #007bff;
border-radius: 10px;
border: 3px solid #f0f0f0;
}
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
}
.image-preview {
display: flex;
justify-content: center;
align-items: center;
}
.image-preview img {
max-width: 100%;
height: auto;
}
.tip {
margin-top: 8px;
color: #727272;
font-size: 12px;
}
.el-form {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 65%; /* 增加宽度 */
max-height: 90vh; /* 确保表单不会超过视口高度 */
overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
/* 自定义滚动条样式 */
scrollbar-width: thin;
scrollbar-color: #007bff #f0f0f0;
}
/* 针对 Webkit 浏览器的自定义滚动条 */
.el-form::-webkit-scrollbar {
width: 8px;
}
.el-form::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 10px;
}
.el-form::-webkit-scrollbar-thumb {
background-color: #007bff;
border-radius: 10px;
border: 3px solid #f0f0f0;
}
.el-form-item {
margin-bottom: 1rem;
text-align: left;
}
.el-form-item label {
display: block;
margin-bottom: 0.5rem;
}
.el-input,
.el-select {
width: calc(100% - 12px); /* 设置文本框宽度,使其与滚动条保持一定距离 */
}
.el-button--primary {
background-color: #007bff;
color: white;
}
.el-button--primary:hover {
background-color: #0056b3;
}
.dynamic-width-select {
min-width: 30%;
max-width: 100%;
width: auto; /* 使宽度根据内容调整 */
}
</style>

View File

@ -1,333 +0,0 @@
<script setup>
import { onMounted, ref } from 'vue';
import { ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox, ElPagination, ElTable, ElTableColumn } from 'element-plus';
import axios from "axios";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import Course from "@views/course-management/Course.vue";
import BackgroundWrapper from './BackgroundWrapper.vue';
import _ from 'lodash';
import { write, utils } from 'xlsx';
import { saveAs } from 'file-saver';
const router = useRouter();
const store = useStore();
const token = store.getters['authentication/token'];
const searchTitle = ref('');
const searchAuthor = ref('');
const searchDescription = ref('');
const sortOrder = ref('');
const allCoursesData = ref([]);
const coursesData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const coursesCount = ref(0);
const firstTimeLoad = ref(true);
const selections = ref([]);
const loadCourses = async (forceReload = false) => {
if (forceReload) {
firstTimeLoad.value = true;
allCoursesData.value = [];
}
if (firstTimeLoad.value || allCoursesData.value.length < (currentPage.value * pageSize.value) && (currentPage.value * pageSize.value) <= coursesCount.value) {
let params = {
token: token,
start: allCoursesData.value.length,
end: allCoursesData.value.length + pageSize.value * 2
};
try {
const response = await axios.get('/api/courses', { params });
const data = response.data;
coursesCount.value = data.courseCount;
allCoursesData.value.push(...data.courseList);
} catch (e) {
console.log(e);
}
firstTimeLoad.value = false;
}
coursesData.value = allCoursesData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
};
onMounted(() => {
loadCourses();
});
const handleSearch = async () => {
try {
const response = await axios.get('/api/courses/search', {
params: {
token: token,
title: searchTitle.value || '',
author: searchAuthor.value || '',
description: searchDescription.value || '',
sortOrder: sortOrder.value || '',
start: 0,
end: pageSize.value
}
});
const data = response.data;
coursesCount.value = data.courseCount;
allCoursesData.value = data.courseList;
coursesData.value = allCoursesData.value.slice(0, pageSize.value);
currentPage.value = 1;
firstTimeLoad.value = false;
} catch (e) {
console.error(e);
}
};
const handleReset = async () => {
searchTitle.value = '';
searchAuthor.value = '';
searchDescription.value = '';
sortOrder.value = '';
await loadCourses(true); //
};
const handleSort = async () => {
//
const sortedCourses = _.cloneDeep(allCoursesData.value).map(course => ({
...course,
orderNo: Number(course.orderNo)
})).sort((a, b) => a.orderNo - b.orderNo);
//
allCoursesData.value = sortedCourses;
//
const start = (currentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
coursesData.value = allCoursesData.value.slice(start, end);
};
const handleExport = () => {
// 簿
const workbook = utils.book_new();
// allCoursesData
const sheetData = allCoursesData.value.map(course => ({
'课程名称': course.title,
'作者': course.author,
'课程简介': course.description,
'排序': course.orderNo
}));
//
const worksheet = utils.json_to_sheet(sheetData);
// 簿
utils.book_append_sheet(workbook, worksheet, 'Courses');
// Excel
const wbout = write(workbook, { bookType: 'xlsx', type: 'array' });
// 使 file-saver
saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '课程信息.xlsx');
};
const handleEditButton = () => {
if (selections.value.length === 1) {
//
const selectedCourse = selections.value[0];
router.push({ name: 'Course', query: { mode: 'edit', id: selectedCourse.id } });
} else if (selections.value.length > 1) {
//
ElMessage.warning('无法同时修改多个目标');
} else {
//
ElMessage.warning('请先选择要修改的课程');
}
};
const handleDeleteButton = async () => {
if (selections.value.length === 0) {
ElMessage.warning('请先选择要删除的课程');
return;
}
ElMessageBox.confirm(
'是否确认删除选中的课程?此操作不可撤销。',
'确认删除',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
).then(async () => {
try {
const deletePromises = selections.value.map(selection =>
axios.delete(`/api/courses/${selection.id}`, { params: { token: token } })
);
await Promise.all(deletePromises);
ElMessage.success('删除成功');
selections.value = []; //
await loadCourses(true); //
} catch (e) {
ElMessage.error('删除失败');
console.error(e);
}
}).catch(() => {
ElMessage.info('已取消删除操作');
});
};
const handleSelectionChange = (newSelections) => {
selections.value = newSelections;
};
const handleEditInTable = (index) => {
router.push({ name: 'Course', query: { mode: 'edit', id: coursesData.value[index].id } });
};
const handleDeleteInTable = async (index) => {
ElMessageBox.confirm(
'是否确认删除该课程?此操作不可撤销。',
'确认删除',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
).then(async () => {
try {
await axios.delete(`/api/courses/${coursesData.value[index].id}`, { params: { token: token } });
coursesData.value.splice(index, 1);
allCoursesData.value.splice(index, 1);
coursesCount.value--;
await loadCourses(true); //
} catch (e) {
ElMessage.error('删除失败');
console.error(e);
}
}).catch(() => {
ElMessage.info('已取消删除操作');
});
};
</script>
<template>
<BackgroundWrapper class="background-wrapper">
<div class="center-wrapper">
<div class="container">
<div class="search-container">
<el-form inline>
<el-form-item label="课程名称">
<el-input v-model="searchTitle" placeholder="请输入课程名称" />
</el-form-item>
<el-form-item label="排序">
<el-input v-model="sortOrder" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="作者">
<el-input v-model="searchAuthor" placeholder="请输入作者" />
</el-form-item>
<el-form-item label="课程简介">
<el-input v-model="searchDescription" placeholder="请输入简介" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="button-container">
<el-button type="success" @click="router.push('/course?mode=create')">新增</el-button>
<el-button type="warning" @click="handleEditButton">修改</el-button>
<el-button type="danger" @click="handleDeleteButton">删除</el-button>
<el-button type="info" @click="handleSort">排序</el-button>
<el-button type="primary" @click="handleExport">导出</el-button>
</div>
<el-table :data="coursesData" style="width: 100%;" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="orderNo" label="排序" align="center"></el-table-column>
<el-table-column prop="title" label="课程名称" align="center"></el-table-column>
<el-table-column prop="author" label="作者" align="center"></el-table-column>
<el-table-column prop="description" label="课程简介" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button @click="handleEditInTable(scope.$index)" type="text">修改</el-button>
<el-button @click="handleDeleteInTable(scope.$index)" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
@size-change="pageSize = $event; loadCourses(true)"
@current-change="currentPage = $event; loadCourses(true)"
:current-page="currentPage"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="coursesCount"
:page-sizes="[10, 20, 50, 100]"
>
</el-pagination>
</div>
</div>
</div>
</BackgroundWrapper>
</template>
<style scoped>
html, body {
height: 100%;
margin: 0;
}
.background-wrapper {
position: fixed; /* 确保背景覆盖整个视口 */
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto; /* 只在内容溢出时允许滚动 */
}
.center-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.container {
padding: 20px;
background: rgba(255, 255, 255, 0.8); /* 为了让内容清晰,可加上一层半透明白色背景 */
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 800px; /* 控制页面内容宽度 */
width: 100%;
}
.search-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.button-container {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.el-table {
margin-bottom: 10px;
}
.pagination-container {
display: flex;
justify-content: flex-end;
margin-bottom: -10px;
}
</style>

View File

@ -0,0 +1,594 @@
<script setup>
import {onMounted, ref} from 'vue';
import {
ElButton,
ElForm,
ElFormItem,
ElInput,
ElMessage,
ElMessageBox,
ElOption,
ElSelect,
ElUpload
} from 'element-plus';
import {
AccessibilityHelp,
Alignment,
Autoformat,
AutoLink,
Autosave,
BalloonToolbar,
BlockQuote,
Bold,
ClassicEditor,
CodeBlock,
Essentials,
FindAndReplace,
GeneralHtmlSupport,
Heading,
HorizontalLine,
Indent,
IndentBlock,
Italic,
Link,
Paragraph,
SelectAll,
Style,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextTransformation,
Undo
} from 'ckeditor5';
import translations from 'ckeditor5/translations/zh-cn.js';
import 'ckeditor5/ckeditor5.css';
import {Delete, Plus, Refresh, ZoomIn} from "@element-plus/icons-vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import axios from "axios";
const route = useRoute();
const router = useRouter();
const store = useStore();
const token = ref('')
const form = ref({
token: '',
title: '',
author: '',
content: '',
summary: '',
tenant: '',
imagePath: ''
});
const createMode = ref(false);
const componentMode = ref(false);
const modeTitle = ref('');
const fileList = ref([]); //
const basePath = '/api/news'
const uploadUrl = basePath + '/uploadPic'; //
const dialogImageUrl = ref('');
const dialogVisible = ref(false); //
const props = defineProps({
mode: {
type: String,
required: false
},
id: {
type: String,
required: false
}
});
const containerStyle = ref('form-container')
const emit = defineEmits(['setNewsDialogInvisible']);
const setNewsDialogInvisible = (changed) => {
emit('setNewsDialogInvisible', changed);
};
//
const id = ref('');
const beforeUpload = (file) => {
// png, jpg, jpeg
const isImage = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg';
if (!isImage) {
ElMessage.error('只能上传 png/jpg/jpeg 格式的图片文件!');
return false;
}
// 5MB
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
ElMessage.error('上传文件大小不能超过 5MB');
return false;
}
return true;
};
const handleSuccess = (response, file, fileList) => {
file.url = response.url;
};
const handleError = (error, file, fileList) => {
ElMessage.error('图片上传失败,请重试!');
};
const handleChange = (file, fileList) => {
//
if (fileList.length > 1) {
fileList.splice(0, fileList.length - 1)
}
};
const handlePictureCardPreview = (file) => {
dialogImageUrl.value = file.url
dialogVisible.value = true
}
const handleRemove = (file) => {
fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
console.log(file)
}
const handleCommit = async () => {
// formnull
if (form.value.title === '' || form.value.author === '' || form.value.content === '' || form.value.summary === '' || form.value.tenant === '') {
await ElMessageBox.alert('请填写完整信息!');
return;
}
if (fileList.value.length === 0) {
await ElMessageBox.alert('请选择图片!');
return;
}
form.value.imagePath = fileList.value[0].url;
if (createMode.value) {
try {
const response = await axios.post(basePath, form.value);
ElMessage.success('添加成功!');
if (componentMode){
setNewsDialogInvisible(true);
}
else{
router.push('/news');
}
} catch (e) {
await ElMessageBox.alert(e.response.data.message);
}
} else {
try {
const response = await axios.put(`${basePath}/${id.value}`, form.value);
ElMessage.success('修改成功!');
if (componentMode){
setNewsDialogInvisible(true);
}
else{
router.push('/news');
}
} catch (e) {
await ElMessageBox.alert(e.response.data.message);
}
}
};
const handleCancel = () => {
if (componentMode){
setNewsDialogInvisible(false);
}
else{
router.push('/news');
}
};
const isLayoutReady = ref(false);
const config = ref(null); // CKEditor needs the DOM tree before calculating the configuration.
const editor = ClassicEditor;
const fetchNewsDetail = async () => {
let params = {
token: token.value,
}
const res = await axios.get(basePath + '/' + id.value, {params});
form.value.title = res.data.title;
form.value.author = res.data.author;
form.value.content = res.data.content;
form.value.summary = res.data.summary;
form.value.tenant = res.data.tenant;
form.value.imagePath = res.data.imagePath;
fileList.value.push({url: res.data.imagePath});
}
onMounted(() => {
token.value = store.getters['authentication/token'];
form.value.token = token.value;
if (props.mode !== undefined){
componentMode.value = true;
containerStyle.value = 'form-container-component'
if (props.mode === 'create'){
createMode.value = true;
modeTitle.value = '添加资讯';
}
else if (props.mode === 'edit'){
createMode.value = false;
id.value = props.id;
modeTitle.value = '修改资讯';
fetchNewsDetail();
}
}
else if (route.query.mode === 'create' || route.params.mode === 'create') {
createMode.value = true;
modeTitle.value = '添加资讯';
} else if (route.query.mode === 'edit' || route.params.mode === 'edit') {
id.value = route.params.id === undefined ? route.query.id : route.params.id;
createMode.value = false;
modeTitle.value = '修改资讯';
fetchNewsDetail();
}
config.value = {
toolbar: {
items: [
'undo',
'redo',
'|',
'heading',
'style',
'|',
'bold',
'italic',
'|',
'link',
'insertTable',
'blockQuote',
'codeBlock',
'|',
'alignment',
'|',
'indent',
'outdent'
],
shouldNotGroupWhenFull: false
},
plugins: [
AccessibilityHelp,
Alignment,
Autoformat,
AutoLink,
Autosave,
BalloonToolbar,
BlockQuote,
Bold,
CodeBlock,
Essentials,
FindAndReplace,
GeneralHtmlSupport,
Heading,
HorizontalLine,
Indent,
IndentBlock,
Italic,
Link,
Paragraph,
SelectAll,
Style,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextTransformation,
Undo
],
balloonToolbar: ['bold', 'italic', '|', 'link'],
heading: {
options: [
{
model: 'paragraph',
title: 'Paragraph',
class: 'ck-heading_paragraph'
},
{
model: 'heading1',
view: 'h1',
title: 'Heading 1',
class: 'ck-heading_heading1'
},
{
model: 'heading2',
view: 'h2',
title: 'Heading 2',
class: 'ck-heading_heading2'
},
{
model: 'heading3',
view: 'h3',
title: 'Heading 3',
class: 'ck-heading_heading3'
},
{
model: 'heading4',
view: 'h4',
title: 'Heading 4',
class: 'ck-heading_heading4'
},
{
model: 'heading5',
view: 'h5',
title: 'Heading 5',
class: 'ck-heading_heading5'
},
{
model: 'heading6',
view: 'h6',
title: 'Heading 6',
class: 'ck-heading_heading6'
}
]
},
htmlSupport: {
allow: [
{
name: /^.*$/,
styles: true,
attributes: true,
classes: true
}
]
},
initialData: '',
language: 'zh-cn',
link: {
addTargetToExternalLinks: true,
defaultProtocol: 'https://',
decorators: {
toggleDownloadable: {
mode: 'manual',
label: 'Downloadable',
attributes: {
download: 'file'
}
}
}
},
menuBar: {
isVisible: true
},
placeholder: '请在此处输入你的文章',
style: {
definitions: [
{
name: 'Article category',
element: 'h3',
classes: ['category']
},
{
name: 'Title',
element: 'h2',
classes: ['document-title']
},
{
name: 'Subtitle',
element: 'h3',
classes: ['document-subtitle']
},
{
name: 'Info box',
element: 'p',
classes: ['info-box']
},
{
name: 'Side quote',
element: 'blockquote',
classes: ['side-quote']
},
{
name: 'Marker',
element: 'span',
classes: ['marker']
},
{
name: 'Spoiler',
element: 'span',
classes: ['spoiler']
},
{
name: 'Code (dark)',
element: 'pre',
classes: ['fancy-code', 'fancy-code-dark']
},
{
name: 'Code (bright)',
element: 'pre',
classes: ['fancy-code', 'fancy-code-bright']
}
]
},
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
},
translations: [translations]
};
isLayoutReady.value = true;
});
</script>
<template>
<div :class="containerStyle">
<ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
<h2>{{ modeTitle }}</h2>
<ElFormItem label="新闻标题" required>
<ElInput v-model="form.title" placeholder="请输入新闻标题" required></ElInput>
</ElFormItem>
<ElFormItem label="新闻图片路径" required>
<el-upload
:action="uploadUrl"
:limit="2"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
:on-change="handleChange"
:file-list="fileList"
list-type="picture-card"
auto-upload
v-model:file-list="fileList"
required
>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<el-icon><zoom-in/></el-icon>
</span>
<span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<el-icon><Delete/></el-icon>
</span>
</span>
</div>
</template>
<el-icon v-if="fileList.length === 0">
<Plus/>
</el-icon>
<el-icon v-else>
<Refresh/>
</el-icon>
</el-upload>
<div class="tip">
请上传大小不超过 <span style="color: red;">5MB</span> 格式为 <span style="color: red;">png/jpg/jpeg</span> 的文件
</div>
</ElFormItem>
<ElFormItem label="新闻内容" required>
<div class="editor-container editor-container_classic-editor editor-container_include-style"
ref="editorContainerElement">
<div class="editor-container__editor">
<div ref="editorElement">
<ckeditor v-if="isLayoutReady" v-model="form.content" :editor="editor" :config="config"/>
</div>
</div>
</div>
</ElFormItem>
<ElFormItem label="作者" required>
<ElInput v-model="form.author" placeholder="请输入作者" required></ElInput>
</ElFormItem>
<ElFormItem label="新闻简介" required>
<ElInput v-model="form.summary" placeholder="请输入新闻简介" required></ElInput>
</ElFormItem>
<ElFormItem label="选择租户" required>
<ElSelect v-model="form.tenant" placeholder="请选择" class="dynamic-width-select">
<ElOption label="Option 1" value="option1"></ElOption>
<ElOption label="Option 2" value="option2"></ElOption>
<ElOption label="Option 3" value="option3"></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem>
<ElButton type="primary" native-type="submit">确定</ElButton>
<ElButton @click="handleCancel">取消</ElButton>
</ElFormItem>
</ElForm>
</div>
<el-dialog v-model="dialogVisible" class="image-preview">
<img w-full :src="dialogImageUrl" alt="Preview Image"/>
</el-dialog>
</template>
<style scoped>
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: white;
overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
}
.image-preview {
display: flex;
justify-content: center;
align-items: center;
}
.image-preview img {
max-width: 100%;
height: auto;
}
.tip {
margin-top: 8px;
color: #727272;
font-size: 12px;
}
.el-form {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 55%;
max-height: 90vh; /* 确保表单不会超过视口高度 */
overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
}
.el-form-item {
margin-bottom: 1rem;
text-align: left;
}
.el-form-item label {
display: block;
margin-bottom: 0.5rem;
}
.el-input,
.el-select {
width: 100%;
}
.el-button--primary {
background-color: #007bff;
color: white;
}
.el-button--primary:hover {
background-color: #0056b3;
}
.dynamic-width-select {
min-width: 30%;
max-width: 100%;
width: auto; /* 使宽度根据内容调整 */
}
.form-container-component {
display: flex;
justify-content: center;
align-items: center;
height: auto;
background: white;
overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
}
.form-container-component .el-form {
background: white;
padding: 2rem;
width: 100%;
height: 100%;
max-height: 90vh; /* 确保表单不会超过视口高度 */
overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
}
</style>

View File

@ -0,0 +1,306 @@
<script setup>
import {onMounted, ref} from 'vue';
import {
ElButton,
ElForm,
ElFormItem,
ElInput,
ElMessage,
ElMessageBox,
ElPagination,
ElTable,
ElTableColumn
} from 'element-plus';
import axios from "axios";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import EditNews from "@views/news-management/EditNews.vue";
const router = useRouter();
const store = useStore();
const token = store.getters['authentication/token']
const searchTitle = ref('');
const searchPath = ref('');
const searchAuthor = ref('');
const searchSummary = ref('');
const sortOrder = ref('');
const allNewsData = ref([]);
const newsData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const newsCount = ref(0);
const firstTimeLoad = ref(true);
const selections = ref([]);
const editNewsDialogVisible = ref(false);
const editNewsDialogMode = ref('create');
const editId = ref("");
const searchMode = ref(false);
const loadNews = async () => {
if (searchMode.value) {
newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
return;
}
if (firstTimeLoad.value || allNewsData.value.length < (currentPage.value * pageSize) && (currentPage.value * pageSize) <= newsCount) {
// console.error(allNewsData.value.length, currentPage.value, pageSize.value, newsCount.value)
let params = {
token: token,
start: allNewsData.value.length,
end: allNewsData.value.length + pageSize.value * 2
}
try {
const response = await axios.get('/api/news', {params})
const data = response.data
newsCount.value = data.newsCount;
allNewsData.value.push(...data.newsList);
ElMessage.success('列表已刷新');
} catch (e) {
console.log(e)
}
firstTimeLoad.value = false;
}
newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
// console.error((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value, newsData.value);
};
onMounted(() => {
loadNews();
})
const handleSearch = async () => {
const params = {
token: token,
title: searchTitle.value,
author: searchAuthor.value,
summary: searchSummary.value,
imagePath: searchPath.value
}
try {
const response = await axios.post('/api/news/search', params);
const data = response.data;
allNewsData.value = data.newsList;
newsCount.value = data.newsCount;
newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
searchMode.value = true;
ElMessage.success('搜索成功');
} catch (e) {
ElMessage.error('搜索失败');
console.error(e);
}
};
const handleReset = async () => {
searchTitle.value = '';
searchPath.value = '';
searchAuthor.value = '';
searchSummary.value = '';
sortOrder.value = '';
searchMode.value = false;
await refreshNewsList();
};
const handleCreateButton = () => {
editNewsDialogMode.value = 'create'
openEditNewsDialog()
};
const handleEditButton = () => {
if (selections.value.length === 1) {
editNewsDialogMode.value = 'edit'
editId.value = selections.value[0].id
openEditNewsDialog()
return
}
//selectionid
selections.value.forEach(selection => {
const url = router.resolve({name: 'editNews', query: {mode: 'edit', id: selection.id}}).href;
window.open(url, '_blank');
});
};
//
const handleDeleteButton = () => {
if (selections.value.length === 0) {
ElMessage.warning('请选择要删除的资讯');
return;
}
ElMessageBox.confirm(
`你是否确认要删除<span style="color: red; ">${selections.value.length}</span>条资讯`,
'警告',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
dangerouslyUseHTMLString: true
}
).then(async () => {
try {
for (const selection of selections.value) {
await axios.delete(`/api/news/${selection.id}`, {params: {token: token}});
}
ElMessage.success('删除成功');
//
await refreshNewsList()
} catch (e) {
ElMessage.error('删除失败');
console.error(e);
}
}).catch(() => {
ElMessage.info('已取消删除');
});
};
const handleSelectionChange = (newSelections) => {
selections.value = newSelections
}
const handleEditInTable = async (index) => {
// router.push({name: 'editNews', query: {mode: 'edit', id: newsData.value[index].id}})
editNewsDialogMode.value = 'edit'
editId.value = newsData.value[index].id
openEditNewsDialog()
};
const handleDeleteInTable = async (index) => {
try {
await axios.delete(`/api/news/${newsData.value[index].id}`, {params: {token: token,}})
newsData.value.splice(index, 1);
allNewsData.value.splice(index, 1);
newsCount.value--;
} catch (e) {
ElMessage.error('删除失败')
console.error(e)
}
};
const refreshNewsList = async () => {
newsData.value = [];
allNewsData.value = [];
newsCount.value = 0;
currentPage.value = 1;
firstTimeLoad.value = true;
await loadNews();
};
const openEditNewsDialog = () => {
editNewsDialogVisible.value = true;
};
const setNewsDialogInvisible = (changed) => {
editNewsDialogVisible.value = false;
if (changed){
refreshNewsList();
}
}
</script>
<template>
<div class="container">
<div class="search-container">
<el-form inline>
<el-form-item label="新闻标题">
<el-input v-model="searchTitle" placeholder="请输入标题"/>
</el-form-item>
<el-form-item label="新闻图片路径">
<el-input v-model="searchPath" placeholder="请输入路径"/>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="sortOrder" placeholder="请输入排序"/>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="searchAuthor" placeholder="请输入作者"/>
</el-form-item>
<el-form-item label="新闻简介">
<el-input v-model="searchSummary" placeholder="请输入简介"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="button-container">
<el-button type="success" @click="handleCreateButton">新增</el-button>
<el-button type="warning" @click="handleEditButton">修改</el-button>
<el-button type="danger" @click="handleDeleteButton">删除</el-button>
</div>
<el-table :data="newsData" style="width: 100%;"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="title" label="新闻标题" align="center"></el-table-column>
<el-table-column prop="author" label="作者" align="center"></el-table-column>
<el-table-column prop="summary" label="新闻简介" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button @click="handleEditInTable(scope.$index)" type="text">修改</el-button>
<el-button @click="handleDeleteInTable(scope.$index)" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
@size-change="pageSize = $event;loadNews()"
@current-change="currentPage = $event;loadNews()"
:current-page="currentPage"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="newsCount"
:page-sizes="[10, 20, 50, 100]"
>
</el-pagination>
</div>
</div>
<el-dialog
v-model="editNewsDialogVisible"
width="60%"
top="8vh"
destroy-on-close
>
<EditNews :mode="editNewsDialogMode" :id="editId" @setNewsDialogInvisible="setNewsDialogInvisible"/>
</el-dialog>
</template>
<style scoped>
.container {
padding: 20px;
}
.search-container {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 20px;
}
.button-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.el-table {
margin-bottom: 20px;
}
.pagination-container {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
</style>

View File

@ -1,56 +0,0 @@
<template>
<div>
<h2>Profile</h2>
<form @submit.prevent="updateProfile">
<div>
<label for="nickname">Nickname:</label>
<input type="text" v-model="user.nickname">
</div>
<div>
<label for="phoneNumber">Phone Number:</label>
<input type="text" v-model="user.phoneNumber">
</div>
<div>
<label for="gender">Gender:</label>
<input type="text" v-model="user.gender">
</div>
<button type="submit">Update Profile</button>
</form>
<form @submit.prevent="changePassword">
<div>
<label for="oldPassword">Old Password:</label>
<input type="password" v-model="oldPassword" required>
</div>
<div>
<label for="newPassword">New Password:</label>
<input type="password" v-model="newPassword" required>
</div>
<button type="submit">Change Password</button>
</form>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
data() {
return {
oldPassword: '',
newPassword: ''
};
},
computed: {
...mapState(['user'])
},
methods: {
...mapActions(['updateProfile', 'changePassword']),
async updateProfile() {
await this.updateProfile(this.user);
},
async changePassword() {
await this.changePassword({ oldPassword: this.oldPassword, newPassword: this.newPassword });
}
}
};
</script>