校验富文本必填

src/components/FormUI/wangEditor/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <div v-if="props.item?.label" class="ml-2 mb-2 color959595">{{ props.item.label  }}</div>
-    <div class="box z-10">
+    <div class="z-10 box mb-5">
       <!-- 工具栏 -->
       <Toolbar
         :editor="editorRef"
@@ -15,20 +15,22 @@
         :defaultConfig="editorConfig"
         :editorId="editorId"
         :style="editorStyle"
+        @on-maxLength="onMaxLengthFun"
+        @on-blur="onBlurFun"
         @on-change="handleChange"
         @on-created="handleCreated"
       />
     </div>
   </div>
 </template>
-<!-- <style src="@wangeditor/editor/dist/css/style.css"></style> -->
 <script setup>
-defineOptions({ name: 'wangeditor-index' })
+defineOptions({ name: 'wangEditor-index' })
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
 import { onBeforeUnmount, ref, shallowRef, unref, computed, nextTick, watch } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { i18nChangeLanguage } from '@wangeditor/editor'
 import { isNumber } from '@/utils/is'
+import Snackbar from '@/plugins/snackbar'
 // import { getAccessToken, getTenantId } from '@/utils/auth'
 
 i18nChangeLanguage('zh-CN')
@@ -48,7 +50,7 @@ const props = defineProps({
   },
   height: {
     type: [Number, String],
-    default: '200px'
+    default: '300px'
   },
   editorConfig: {
     type: Object,
@@ -83,7 +85,7 @@ watch(
 watch(
   () => valueHtml.value,
   (val) => {
-    emit('update:modelValue', val)
+    emit('update:modelValue', val === '<p><br></p>' ? '' : val)
   }
 )
 
@@ -91,13 +93,23 @@ const handleCreated = (editor) => {
   editorRef.value = editor
 }
 
+const onMaxLengthFun = (editor) => {
+  const maxLength = editor?.getConfig()?.maxLength || null
+  if (maxLength) Snackbar.info(`最多可输入${maxLength}个字符`)
+}
+
+const onBlurFun = (editor) => {
+  const text = editor.getText()?.replace(/\s+/g, '')
+  if (!text) valueHtml.value = ''
+}
+
 // 编辑器配置
-import Snackbar from '@/plugins/snackbar'
 const editorConfig = computed(() => {
   return Object.assign(
     {
       placeholder: '请输入内容...',
       readOnly: props.item.readonly || props.readonly,
+      maxLength: Number(props.item.maxLength) || Number(props.maxLength) || null,
       customAlert: (s, t) => {
         switch (t) {
           case 'success':

src/views/recruit/enterprise/positionManagement/components/add.vue

@@ -67,6 +67,7 @@ let submitParams = {}
 // 发布
 const handleSave = async () => {
   const baseInfo = await baseInfoRef.value[0].getQuery()
+  if (baseInfo === 'failed') return
   const requirement = await jobRequirementsRef.value[0].getQuery()
   if (!baseInfo || !requirement) return Snackbar.warning('请将信息填写完整')
   

src/views/recruit/enterprise/positionManagement/components/baseInfo.vue

@@ -193,12 +193,14 @@ const items = ref({
       key: 'content',
       value: '',
       label: '岗位职责 *',
+      maxLength: 5000,
     },
     {
       type: 'wangEditor',
       key: 'requirement',
       value: '',
       label: '岗位要求 *',
+      maxLength: 5000,
     },
     // {
     //   type: 'textarea',
@@ -330,6 +332,16 @@ const getQuery = async () => {
     // obj.hirePoint = 0
     obj.hirePrice = 0
   }
+  console.log('obj.content', obj.content)
+  console.log('obj.requirement', obj.requirement)
+  if (!obj.content) {
+    Snackbar.warning('请填写岗位职责')
+    return 'failed'
+  }
+  if (!obj.requirement) {
+    Snackbar.warning('请填写岗位要求')
+    return 'failed'
+  }
   
   query = Object.assign(query, obj)
   return query