From 06cada810970ea1a9e140e910963a4b45573fa00 Mon Sep 17 00:00:00 2001
From: heshunme <heshunme@outlook.com>
Date: Thu, 4 Jul 2024 00:45:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BA=E4=BA=86=E6=96=B0=E5=A2=9E+?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=8C=E5=90=88=E4=B8=80=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E5=86=99=E5=AE=8C=E4=BA=86=E6=96=B0=E5=A2=9E=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E4=BB=A3=E7=A0=81=EF=BC=8C=E5=BE=85=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/news-management/EditNews.vue | 483 +++++++++++++++++++++++++
 1 file changed, 483 insertions(+)
 create mode 100644 src/views/news-management/EditNews.vue

diff --git a/src/views/news-management/EditNews.vue b/src/views/news-management/EditNews.vue
new file mode 100644
index 0000000..d19c265
--- /dev/null
+++ b/src/views/news-management/EditNews.vue
@@ -0,0 +1,483 @@
+<script setup>
+import {onMounted, ref} from 'vue';
+import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, 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 axios from "axios";
+
+const route = useRoute();
+const router = useRouter();
+const form = ref({
+  title: '',
+  author: '',
+  content: '',
+  summary: '',
+  tenant: '',
+  imagePath: ''
+});
+const createMode = ref(false);
+const modeTitle = ref('');
+
+const fileList = ref([]); // 用于存储上传文件的列表
+const basePath = '/api/news'
+const uploadUrl = basePath + '/uploadPic'; // 上传的后端地址
+const dialogImageUrl = ref('');
+const dialogVisible = ref(false);  // 用于图片放大预览
+
+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 () => {
+  if (createMode.value) {
+    try {
+      form.value.imagePath = fileList.value[0].url;
+      await axios.post(basePath, form.value);
+      ElMessage.success('添加成功！');
+      router.push('/news');
+    } catch (e) {
+      ElMessage.error('添加失败，请重试！');
+    }
+
+  } else {
+    try {
+      const res = await axios.put(basePath, form.value);
+      ElMessage.success('修改成功！');
+      router.push('/news');
+    } catch (e) {
+      ElMessage.error('修改失败，请重试！');
+    }
+
+  }
+};
+
+const isLayoutReady = ref(false);
+const config = ref(null); // CKEditor needs the DOM tree before calculating the configuration.
+const editor = ClassicEditor;
+
+onMounted(() => {
+  if (route.query.mode === 'create') {
+    createMode.value = true;
+    modeTitle.value = '添加资讯';
+  }
+  if (route.query.mode === 'edit') {
+    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="form-container">
+    <el-form :model="form" label-width="120px">
+      <h2>{{ modeTitle }}</h2>
+      <el-form-item label="新闻标题">
+        <el-input v-model="form.title" placeholder="请输入新闻标题"></el-input>
+      </el-form-item>
+      <el-form-item label="新闻图片路径">
+        <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"
+        >
+          <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>
+      </el-form-item>
+      <el-form-item label="新闻内容">
+        <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>
+      </el-form-item>
+      <el-form-item label="作者">
+        <el-input v-model="form.author" placeholder="请输入作者"></el-input>
+      </el-form-item>
+      <el-form-item label="新闻简介">
+        <el-input v-model="form.summary" placeholder="请输入新闻简介"></el-input>
+      </el-form-item>
+      <el-form-item label="选择租户">
+        <el-select v-model="form.tenant" placeholder="请选择" class="dynamic-width-select">
+          <el-option label="Option 1" value="option1"></el-option>
+          <el-option label="Option 2" value="option2"></el-option>
+          <el-option label="Option 3" value="option3"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+        <el-button>取消</el-button>
+      </el-form-item>
+    </el-form>
+  </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; /* 使宽度根据内容调整 */
+}
+</style>
\ No newline at end of file