ops-management-platform-frontend/src/views/notice/addModal.vue

<template>
  <a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%">
    <a-form :model="form" layout="vertical">
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="标题" name="title">
            <a-input v-model:value="form.title" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="类型" name="type">
            <a-select
              v-model:value="form.type"
              :options="projectNameOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 500px; overflow-y: hidden"
              v-model="form.content"
              :defaultConfig="editorConfig"
              :mode="mode"
              @on-created="handleCreated"
            />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="附件" name="attachment">
            <a-upload
              v-model:file-list="form.attachment"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            >
              <a-button type="primary"> 上传 </a-button>
            </a-upload>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
  import { reactive, ref, shallowRef, onMounted, onBeforeUnmount } from 'vue';
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
  import '@wangeditor/editor/dist/css/style.css';

  export default {
    components: { Editor, Toolbar },
    setup() {
      const title = ref('新增');
      const visible = ref(false);
      const form = reactive({
        title: '',
        type: '',
        content: '<p>hello</p>',
        attachment: [],
      });
      //下拉框
      const projectNameOptions = [
        {
          value: '1',
          label: 'a',
        },
        {
          value: '2',
          label: 'b',
        },
        {
          value: '3',
          label: 'c',
        },
      ];
      const showModal = (type, id) => {
        if (type == 1) {
          title.value = '新增';
        } else if (type == 2) {
          title.value = '编辑';
          console.log(id);
        }
        visible.value = true;
      };

      const handleOk = () => {
        console.log('Form Data:', form);
        // 在此处可以添加表单验证逻辑
        visible.value = false;
      };
      //富文本
      // 编辑器实例，必须用 shallowRef
      const editorRef = shallowRef();

      // 内容 HTML

      // 模拟 ajax 异步获取内容
      onMounted(() => {
        setTimeout(() => {
          form.content = '<p>模拟 Ajax 异步设置内容</p>';
        }, 1500);
      });

      const toolbarConfig = {};
      const editorConfig = { placeholder: '请输入内容...' };

      // 组件销毁时，也及时销毁编辑器
      onBeforeUnmount(() => {
        const editor = editorRef.value;
        if (editor == null) return;
        editor.destroy();
      });

      const handleCreated = (editor) => {
        editorRef.value = editor; // 记录 editor 实例，重要！
      };

      return {
        visible,
        title,
        form,
        showModal,
        handleOk,
        projectNameOptions,
        editorRef,
        mode: 'default',
        toolbarConfig,
        editorConfig,
        handleCreated,
      };
    },
  };
</script>

<style scoped>
  /* 可选样式调整 */
  .ant-modal-body {
    max-width: 600px;
    margin: 0 auto;
  }
</style>