diff --git a/src/views/system/notice/noteAdd.vue b/src/views/system/notice/noteAdd.vue index e9cce80..2d254c1 100644 --- a/src/views/system/notice/noteAdd.vue +++ b/src/views/system/notice/noteAdd.vue @@ -11,6 +11,7 @@ const emits = defineEmits(['resetData']) const userInfo = useUserStore() const title = ref('') +const TiLength = ref(0) const ruleFormRef = ref() // from组件 const ruleForm = reactive({ noticeNo: '', // 通知公告编号 @@ -23,10 +24,24 @@ noticeTitle: '', // 标题 id: '', }) // 表单 +const validateContent = (rule: any, value: any, callback: any) => { + console.log(getTextLength(value)) + if (getTextLength(value) === 0) { + callback(new Error('发布内容必填')) + } + else { + if (getTextLength(value) <= 500) { + callback() + } + else { + callback(new Error('内容长度不能超过500')) + } + } +} const rules = ref({ - noticeTitle: [{ required: true, message: '标题必填', trigger: 'blur' }], - noticeSketch: [{ required: true, message: '内容简述必填', trigger: 'blur' }], - noticeContent: [{ required: true, message: '发布内容必填', trigger: 'blur' }], + noticeTitle: [{ required: true, message: '标题必填', trigger: ['blur', 'change'] }], + noticeSketch: [{ required: true, message: '内容简述必填', trigger: ['blur', 'change'] }], + noticeContent: [{ required: true, message: '发布内容必填', trigger: ['blur', 'change'], validator: validateContent }], }) // 表单验证规则 const dialogVisible = ref(false) // 弹窗显示 @@ -44,10 +59,10 @@ dialogVisible.value = true title.value = row.title if (row.title === '新建') { + resetDialog() ruleForm.noticePublisher = userInfo.$state.name ruleForm.noticeCompany = userInfo.$state.deptName ruleForm.noticeTime = dayjs().format('YYYY-MM-DD HH:mm:ss') - resetDialog() } else { // 获取详情信息 @@ -147,6 +162,15 @@ const upload = () => { fileRef.value.click() } + +/** + * 计算富文本输入框内输入字符的长度(不包含p、img、video等标签,仅计算输入文字的长度) + */ + +function getTextLength(newHtml: string) { + // console.log(newHtml.replace(/<[^>]+>/g, '')) + return newHtml.replace(/<[^>]+>/g, '').length +} // 富文本实例对象 const editorRef = shallowRef() // 菜单配置 @@ -352,6 +376,16 @@ editorRef.value = editor // 一定要用 Object.seal() ,否则会报错 }) } +const onChange = (editor: any) => { + console.log(editor, 'editor') + TiLength.value = getTextLength(editor.getText()) + ruleFormRef.value?.validateField('noticeContent') + // console.log(editor.getText()) + // editorRef.value = editor + // nextTick(() => { + // editorRef.value = editor // 一定要用 Object.seal() ,否则会报错 + // }) +} const minioFileUrl = ref('') watch(() => ruleForm.minioFileName, (newVal) => { if (newVal) { @@ -390,10 +424,10 @@ - + - + @@ -418,7 +452,12 @@ :default-config="editorConfig" mode="default" @onCreated="onCreated" + @onChange="onChange" /> + +
+ {{ TiLength }}/500 +
@@ -437,6 +476,12 @@