|
|
@@ -5,14 +5,14 @@
|
|
|
<template>
|
|
|
<div class="container"></div>
|
|
|
<card-layout title="内容配置" :isShowWraning="false" :mandatory="false">
|
|
|
- <el-form
|
|
|
+ <el-form
|
|
|
ref="ruleFormRef"
|
|
|
label-width="auto"
|
|
|
:model="ruleForm"
|
|
|
:label-position="labelPosition"
|
|
|
class="el-form-outer"
|
|
|
>
|
|
|
- <el-form-item label="简介内容" prop="introduction" class="transprant">
|
|
|
+ <el-form-item label="简介内容" prop="introduction" class="transprant">
|
|
|
<el-input
|
|
|
v-model="ruleForm.introduction"
|
|
|
placeholder="请输入500字以内的简介内容"
|
|
|
@@ -23,37 +23,48 @@
|
|
|
:disabled="isDisabled"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
+
|
|
|
<el-form-item label="详情内容" prop="contentType" class="transprant">
|
|
|
<el-radio-group v-model="ruleForm.contentType" :disabled="isDisabled">
|
|
|
- <el-radio :value="item.value" v-for="item in contentTypeOptinos" :key="item.value">{{ item. label }}</el-radio>
|
|
|
+ <el-radio :value="item.value" v-for="item in contentTypeOptinos" :key="item.value">{{
|
|
|
+ item.label
|
|
|
+ }}</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label=" " prop="contentUrl" class="transprant" v-if="ruleForm.contentType === ContentTypeEnum.LINK">
|
|
|
+ <el-form-item
|
|
|
+ label=" "
|
|
|
+ prop="contentUrl"
|
|
|
+ class="transprant"
|
|
|
+ v-if="ruleForm.contentType === ContentTypeEnum.LINK"
|
|
|
+ >
|
|
|
<el-input
|
|
|
v-model="ruleForm.contentUrl"
|
|
|
placeholder="请将链接地址粘贴到此处"
|
|
|
:disabled="isDisabled"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label=" " prop="content" v-if="ruleForm.contentType === ContentTypeEnum.RICHTEXT">
|
|
|
- <div style="border: 1px solid #ccc">
|
|
|
- <Toolbar
|
|
|
- style="border-bottom: 1px solid #ccc"
|
|
|
- :editor="editorRef"
|
|
|
- :defaultConfig="toolbarConfig"
|
|
|
- />
|
|
|
- <Editor
|
|
|
- style="height: 500px; overflow-y: hidden;"
|
|
|
- v-model="valueHtml"
|
|
|
- :defaultConfig="editorConfig"
|
|
|
- @onCreated="handleCreated"
|
|
|
- @onChange="handleChange"
|
|
|
- @onDestroyed="handleDestroyed"
|
|
|
- @onFocus="handleFocus"
|
|
|
- @onBlur="handleBlur"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <el-form-item
|
|
|
+ label=" "
|
|
|
+ prop="content"
|
|
|
+ v-if="ruleForm.contentType === ContentTypeEnum.RICHTEXT"
|
|
|
+ >
|
|
|
+ <div style="border: 1px solid #ccc">
|
|
|
+ <Toolbar
|
|
|
+ style="border-bottom: 1px solid #ccc"
|
|
|
+ :editor="editorRef"
|
|
|
+ :defaultConfig="toolbarConfig"
|
|
|
+ />
|
|
|
+ <Editor
|
|
|
+ style="height: 500px; overflow-y: hidden"
|
|
|
+ v-model="valueHtml"
|
|
|
+ :defaultConfig="editorConfig"
|
|
|
+ @onCreated="handleCreated"
|
|
|
+ @onChange="handleChange"
|
|
|
+ @onDestroyed="handleDestroyed"
|
|
|
+ @onFocus="handleFocus"
|
|
|
+ @onBlur="handleBlur"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="操作人" prop="operator" class="transprant">
|
|
|
<el-input v-model="ruleForm.operator" :disabled="true" />
|
|
|
@@ -63,71 +74,84 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue'
|
|
|
+ import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue';
|
|
|
import type { FormProps } from 'element-plus';
|
|
|
- import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
|
|
- import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|
|
- import { type IEditorConfig } from '@wangeditor/editor-for-vue'
|
|
|
+ import '@wangeditor/editor/dist/css/style.css'; // 引入 css
|
|
|
+ import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
|
|
+ import { type IEditorConfig } from '@wangeditor/editor-for-vue';
|
|
|
import { RuleFormProps, ContentTypeEnum } from './../type';
|
|
|
import { contentTypeOptinos } from '../../constant';
|
|
|
import CardLayout from './CardLayout.vue';
|
|
|
|
|
|
interface Props {
|
|
|
- dataSoure: RuleFormProps,
|
|
|
- isDisabled: boolean
|
|
|
+ dataSoure: RuleFormProps;
|
|
|
+ isDisabled: boolean;
|
|
|
}
|
|
|
- const props = defineProps<Props>()
|
|
|
+ const props = defineProps<Props>();
|
|
|
const labelPosition = ref<FormProps['labelPosition']>('left');
|
|
|
|
|
|
- /**
|
|
|
- * 表单相关操作
|
|
|
+ /**
|
|
|
+ * 表单相关操作
|
|
|
*/
|
|
|
- type Rule = Pick<RuleFormProps, 'introduction' | 'contentType' | 'content' | 'operator' | 'contentUrl'>;
|
|
|
+ type Rule = Pick<
|
|
|
+ RuleFormProps,
|
|
|
+ 'introduction' | 'contentType' | 'content' | 'operator' | 'contentUrl'
|
|
|
+ >;
|
|
|
const ruleForm = ref<Rule>({
|
|
|
introduction: '',
|
|
|
contentType: 1,
|
|
|
content: '',
|
|
|
operator: '',
|
|
|
- contentUrl: ''
|
|
|
- })
|
|
|
+ contentUrl: '',
|
|
|
+ });
|
|
|
|
|
|
- watch(() => props.dataSoure, (value) => {
|
|
|
- if (value) {
|
|
|
- const { introduction, contentType, content, operator, contentUrl } = value;
|
|
|
- ruleForm.value = {
|
|
|
- introduction,
|
|
|
- contentType,
|
|
|
- content,
|
|
|
- operator,
|
|
|
- contentUrl
|
|
|
+ watch(
|
|
|
+ () => props.dataSoure,
|
|
|
+ (value) => {
|
|
|
+ if (value) {
|
|
|
+ const { introduction, contentType, content, operator, contentUrl } = value;
|
|
|
+ ruleForm.value = {
|
|
|
+ introduction,
|
|
|
+ contentType,
|
|
|
+ content,
|
|
|
+ operator,
|
|
|
+ contentUrl,
|
|
|
+ };
|
|
|
+ if (content) {
|
|
|
+ valueHtml.value = content;
|
|
|
+ }
|
|
|
}
|
|
|
- console.log(' ruleForm.value: ', ruleForm.value);
|
|
|
- }
|
|
|
- }, {
|
|
|
- immediate: true
|
|
|
- })
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ );
|
|
|
|
|
|
/********************* 富文本区域配置与方法 **********************/
|
|
|
// 编辑器实例，必须用 shallowRef
|
|
|
- const editorRef = shallowRef()
|
|
|
+ const editorRef = shallowRef();
|
|
|
// 内容 HTML
|
|
|
- const valueHtml = ref()
|
|
|
+ const valueHtml = ref();
|
|
|
// 排除工具栏选项
|
|
|
const toolbarConfig = {
|
|
|
excludeKeys: [
|
|
|
- "insertTable", // 插入表格
|
|
|
- "deleteTable", // 删除表格
|
|
|
+ 'insertTable', // 插入表格
|
|
|
+ 'deleteTable', // 删除表格
|
|
|
'insertVideo',
|
|
|
'uploadVideo',
|
|
|
- "codeBlock", // 代码块
|
|
|
- "emotion", // 表情
|
|
|
- ]
|
|
|
- }
|
|
|
-const editorConfig: Partial<IEditorConfig> = {
|
|
|
- placeholder: '请输入内容...', MENU_CONF: {}}
|
|
|
+ 'codeBlock', // 代码块
|
|
|
+ 'emotion', // 表情
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ const editorConfig: Partial<IEditorConfig> = {
|
|
|
+ placeholder: '请输入内容...',
|
|
|
+ MENU_CONF: {},
|
|
|
+ };
|
|
|
+ let picName = '';
|
|
|
editorConfig.MENU_CONF['uploadImage'] = {
|
|
|
// 上传图片的配置
|
|
|
- server: '/skyeye-file-upload/upload', // form-data fieldName ，默认值 'wangeditor-uploaded-image'
|
|
|
+ server: '/eye_api_bak/api/systemMessage/uploadPicture', // form-data fieldName ，默认值 'wangeditor-uploaded-image'
|
|
|
fieldName: 'file',
|
|
|
// 单个文件的最大体积限制，默认为 2M
|
|
|
maxFileSize: 1 * 1024 * 1024, // 1M
|
|
|
@@ -137,8 +161,10 @@ const editorConfig: Partial<IEditorConfig> = {
|
|
|
// allowedFileTypes: ['image/*'],
|
|
|
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
|
|
|
meta: {
|
|
|
- type: 1,
|
|
|
- targetId: 5
|
|
|
+ // type: 1,
|
|
|
+ // targetId: 5,
|
|
|
+ fileName: picName,
|
|
|
+ bizType: 'ALGO',
|
|
|
},
|
|
|
// 将 meta 拼接到 url 参数中，默认 false
|
|
|
metaWithUrl: false,
|
|
|
@@ -155,7 +181,8 @@ const editorConfig: Partial<IEditorConfig> = {
|
|
|
onBeforeUpload(file) {
|
|
|
console.log('file: ', file);
|
|
|
// file 选中的文件，格式如 { key: file }
|
|
|
- return file
|
|
|
+ picName = file.name;
|
|
|
+ return file;
|
|
|
// 可以 return
|
|
|
// 1. return file 或者 new 一个 file ，接下来将上传
|
|
|
// 2. return false ，不上传这个 file
|
|
|
@@ -163,54 +190,53 @@ const editorConfig: Partial<IEditorConfig> = {
|
|
|
// 上传进度的回调函数
|
|
|
onProgress(progress: number) {
|
|
|
// progress 是 0-100 的数字
|
|
|
- console.log('progress', progress)
|
|
|
+ console.log('progress', progress);
|
|
|
},
|
|
|
// 单个文件上传成功之后
|
|
|
onSuccess(file: File, res: any) {
|
|
|
- console.log(`${file.name} 上传成功`, res)
|
|
|
+ console.log(`${file.name} 上传成功`, res);
|
|
|
},
|
|
|
// 单个文件上传失败
|
|
|
onFailed(file: File, res: any) {
|
|
|
- console.log(`${file.name} 上传失败`, res)
|
|
|
+ console.log(`${file.name} 上传失败`, res);
|
|
|
},
|
|
|
// 上传错误，或者触发 timeout 超时
|
|
|
onError(file: File, err: any, res: any) {
|
|
|
- console.log(`${file.name} 上传出错`, err, res)
|
|
|
+ console.log(`${file.name} 上传出错`, err, res);
|
|
|
},
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
// 执行 createEditor 组件销毁时，也及时销毁编辑器
|
|
|
onBeforeUnmount(() => {
|
|
|
- const editor = editorRef.value
|
|
|
- if (editor == null) return
|
|
|
- editor.destroy()
|
|
|
- })
|
|
|
+ const editor = editorRef.value;
|
|
|
+ if (editor == null) return;
|
|
|
+ editor.destroy();
|
|
|
+ });
|
|
|
|
|
|
const handleCreated = (editor) => {
|
|
|
- editorRef.value = editor
|
|
|
- }
|
|
|
+ editorRef.value = editor;
|
|
|
+ };
|
|
|
const handleChange = (editor) => {
|
|
|
// console.log('change:', editor.children)
|
|
|
- }
|
|
|
+ };
|
|
|
const handleDestroyed = (editor) => {
|
|
|
- console.log('destroyed', editor)
|
|
|
- }
|
|
|
+ console.log('destroyed', editor);
|
|
|
+ };
|
|
|
const handleFocus = (editor) => {
|
|
|
// console.log('focus', editor)
|
|
|
- }
|
|
|
+ };
|
|
|
const handleBlur = (editor) => {
|
|
|
- console.log('blur', editor)
|
|
|
- }
|
|
|
+ console.log('blur', editor);
|
|
|
+ };
|
|
|
|
|
|
const buildFormdata = () => {
|
|
|
return {
|
|
|
...ruleForm.value,
|
|
|
content: valueHtml.value,
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- defineExpose({ buildFormdata })
|
|
|
+ };
|
|
|
+ };
|
|
|
|
|
|
+ defineExpose({ buildFormdata });
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss"></style>
|
sunhongyao341504