frontend/src/views/news-management/EditNews.vue

<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 () => {
  // 判断form中的每一个字段都不为空字符串且不为null
  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>