QRAPI/Web/src/views/system/message/components/editDialog.vue

<template>
  <el-dialog
    v-model="state.isShowDialog"
    draggable
    :close-on-click-modal="false"
    width="80%"
    top="5vh"
    destroy-on-close
  >
    <template #header>
      <div>
        <el-icon class="el-custom-dialog-icon">
          <Edit />
        </el-icon>
        <span>公告通知</span>
      </div>
    </template>
    <div class="app-container" style="min-height: 150px;" v-loading="state.loading">
      <el-form ref="elFormRef" :model="state.form" :rules="rules" label-width="90px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="标题" prop="title">
              <el-input v-model="state.form.title" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="'default'"
              />
              <Editor
                style="height: 60vh; overflow-y: hidden"
                v-model="state.form.content"
                :defaultConfig="editorConfig"
                :mode="'default'"
                @onCreated="handleCreated"
              />
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="el-custom-dialog-footer">
        <el-button type="primary" @click="submit" :disabled="state.loading">确定</el-button>
        <el-button @click="() => (state.isShowDialog = false)" :disabled="state.loading">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { reactive, ref, shallowRef, onBeforeUnmount } from 'vue'
import { addMessage, updateMessage, getMessage } from '@/api/system/messageApi'
import { uploadFile } from '@/api/system/fileApi'
import { ElMessage } from 'element-plus'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// import { DomEditor } from '@wangeditor/editor'

const baseUrl = import.meta.env.VITE_API_BASE_URL

const emits = defineEmits(['onClose'])
const toolbarConfig = {
  excludeKeys: ['group-video'], //排除上传视频
  insertKeys: {
    index: 23, // 自定义插入的位置
    keys: ['uploadAttachment'], // “上传附件”菜单
  }
}
const editorConfig = {
  placeholder: '请输入内容...',
  // 在编辑器中，点击选中“附件”节点时，要弹出的菜单
  hoverbarKeys: {
    attachment: {
      menuKeys: ['downloadAttachment'], // “下载附件”菜单
    },
  },
  MENU_CONF: {
    uploadImage: {
      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 2 * 1024 * 1024, // 2M

      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,

      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],

      // 跨域是否传递 cookie ，默认为 false
      withCredentials: false,

      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒

      // 上传错误，或者触发 timeout 超时
      onError(file, err, res) {
        console.log(`${file.name} 上传出错`, err, res)
        ElMessage.error(`${file.name} 上传出错`)
      },

      // 自定义上传
      async customUpload(file, insertFn) {
        state.loading = true
        // file 即选中的文件
        let formData = new FormData()
        formData.append('file', file)
        let resp = await uploadFile(formData)
        let {data}=resp
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        insertFn(baseUrl+data.bridgeFilePath, data.fileName, null)
         
        state.loading = false
      }
    },
    // “上传附件”菜单的配置
    uploadAttachment: {
      timeout: 60 * 1000, // 60s
      metaWithUrl: false, // meta 拼接到 url 上
      maxFileSize: 10 * 1024 * 1024, // 10M
      onError(file, err, res) {
        console.log(`${file.name} 上传出错`, err, res)
        ElMessage.error(`${file.name} 上传出错`)
      },
      // 用户自定义上传
      async customUpload(file, insertFn) {
        state.loading = true
        let formData = new FormData()
        formData.append('file', file)
        let resp = await uploadFile(formData)
        let {data}=resp
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        insertFn(data.fileName, baseUrl+data.bridgeFilePath)
         
        state.loading = false
      },

    },
  }
}
const state = reactive({
  isShowDialog: false,
  form: {},
  loading: false,
})
const elFormRef = ref()
const editorRef = shallowRef()

const rules = {
  title: [{ required: true, message: '请输入标题！', trigger: 'blur' }]
}

function openDialog(id) {
  resetForm()
  if (id) {
    state.loading = true
    getMessage(id)
      .then((res) => {
        state.form = res.data
      })
      .finally(() => (state.loading = false))
  }
  state.isShowDialog = true
}

function resetForm() {
  state.form = {
    id: null,
    messageType: 0,
    title: '',
    content: '',
    status: 0
  }
  elFormRef.value?.resetFields()
}

function submit() {
  elFormRef.value.validate((valid) => {
    if (valid) {
      state.loading = true
      let postData = Object.assign({}, state.form)
      if (state.form.id) {
        updateMessage(postData)
          .then(() => {
            emits('onClose')
            ElMessage({
              message: '更新成功',
              type: 'success'
            })
            state.isShowDialog = false
          })
          .finally(() => (state.loading = false))
      } else {
        addMessage(postData)
          .then(() => {
            emits('onClose')
            ElMessage({
              message: '新增成功',
              type: 'success'
            })
            state.isShowDialog = false
          })
          .finally(() => (state.loading = false))
      }
    }
  })
}

onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

function handleCreated(editor) {
  editorRef.value = editor
  //必须setTimeout才能获取到toolbar 的配置
  // setTimeout(() => {
  //   const toolbar = DomEditor.getToolbar(editor)

  //   const curToolbarConfig = toolbar.getConfig()
  //   curToolbarConfig.excludeKeys = [
  //     "group-video" //排除上传视频
  //   ]
  //   console.log(curToolbarConfig)
  // })
}

defineExpose({
  openDialog
})
</script>