|
|
@@ -2,13 +2,30 @@
|
|
|
<div class="message-notice-container">
|
|
|
<div class="page-title">
|
|
|
<i class="title-bar"></i>
|
|
|
- <span>{{ isEdit ? '编辑消息通知' : '新增消息通知' }}</span>
|
|
|
+ <span>{{ isEdit ? '编辑公告' : '新增公告' }}</span>
|
|
|
</div>
|
|
|
<div class="form-wrapper">
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
|
|
|
<el-form-item label="标题" prop="title">
|
|
|
<el-input v-model="form.title" placeholder="请输入标题" />
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="封面" prop="coverUrl">
|
|
|
+ <el-upload
|
|
|
+ class="cover-upload"
|
|
|
+ :action="uploadAction"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleCoverSuccess"
|
|
|
+ :before-upload="beforeCoverUpload"
|
|
|
+ >
|
|
|
+ <div v-if="form.coverUrl" class="cover-preview">
|
|
|
+ <el-image :src="form.coverUrl" fit="cover" />
|
|
|
+ </div>
|
|
|
+ <div v-else class="cover-placeholder">
|
|
|
+ <el-icon :size="24"><Plus /></el-icon>
|
|
|
+ <span>上传</span>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="内容" prop="content">
|
|
|
<Editor v-model="form.content" :height="400" />
|
|
|
</el-form-item>
|
|
|
@@ -32,15 +49,40 @@ import Editor from '@/components/Editor/index.vue';
|
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
+import { Plus } from '@element-plus/icons-vue';
|
|
|
import { getMessageInfo, addMessage, updateMessage } from '@/api/pc/enterprise';
|
|
|
|
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
const formRef = ref();
|
|
|
|
|
|
+const uploadAction = import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload';
|
|
|
+
|
|
|
+const beforeCoverUpload = (rawFile: any) => {
|
|
|
+ const isImage = rawFile.type.startsWith('image/');
|
|
|
+ if (!isImage) {
|
|
|
+ ElMessage.error('只能上传图片文件！');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (rawFile.size / 1024 / 1024 > 2) {
|
|
|
+ ElMessage.error('图片大小不能超过2MB！');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleCoverSuccess = (res: any) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ form.coverUrl = res.data.url;
|
|
|
+ } else {
|
|
|
+ ElMessage.warning(res.msg || '上传失败');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
const form = reactive({
|
|
|
title: '',
|
|
|
content: '',
|
|
|
+ coverUrl: '',
|
|
|
status: '0'
|
|
|
});
|
|
|
|
|
|
@@ -61,6 +103,7 @@ onMounted(async () => {
|
|
|
if (res.code === 200 && res.data) {
|
|
|
form.title = res.data.title;
|
|
|
form.content = res.data.content;
|
|
|
+ form.coverUrl = res.data.coverUrl || '';
|
|
|
form.status = String(res.data.status);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
@@ -80,6 +123,7 @@ const handleSave = async () => {
|
|
|
const data: any = {
|
|
|
title: form.title,
|
|
|
content: form.content,
|
|
|
+ coverUrl: form.coverUrl,
|
|
|
status: form.status
|
|
|
};
|
|
|
|
|
|
@@ -123,4 +167,44 @@ const handleSave = async () => {
|
|
|
.form-wrapper {
|
|
|
margin-top: 30px;
|
|
|
}
|
|
|
+
|
|
|
+.cover-upload {
|
|
|
+ :deep(.el-upload) {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: border-color 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #e60012;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.cover-preview {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.cover-placeholder {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
</style>
|
hurx