优化已知问题

pages/ask/add.vue

@@ -6,20 +6,20 @@
       <template #content>
         <span class="text-large font-600 line-clamp-1"> 发布文章 </span>
       </template>
-
       <div class="my-5 sm:my-10">
-        <el-form :model="form" label-width="auto" size="large">
-          <el-form-item label-position="left" label-width="0">
-            <el-input v-model="form.title" placeholder="文章标题"/>
+        <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" size="large">
+          <el-form-item label-position="left" label-width="0" prop="title">
+            <el-input v-model="form.title" :maxlength="100" placeholder="文章标题"/>
           </el-form-item>
-          <el-form-item label-position="left" label-width="0">
+          <el-form-item label-position="left" label-width="0" prop="content">
             <!-- 编辑器 -->
-            <MdEditor v-model="form.content" @onUploadImg="onUploadImg"/>
+            <MdEditor v-model="form.content" placeholder="请填写文章内容" @onUploadImg="onUploadImg"/>
           </el-form-item>
           <el-form-item label="关联栏目" label-position="left">
-            <el-switch v-model="hasCategory" />
+            <el-switch v-model="hasCategory"/>
             <div v-if="hasCategory" class="mx-5">
-              <el-cascader v-model="category" :options="categoryList" placeholder="选项关联的栏目" @change="handleCategory" />
+              <el-cascader v-model="category" :options="categoryList" placeholder="选项关联的栏目"
+                           @change="handleCategory"/>
             </div>
           </el-form-item>
           <el-form-item label="选择话题" label-position="left">
@@ -38,22 +38,15 @@
               </el-select>
             </div>
           </el-form-item>
-          <el-form-item label-position="left" label-width="0">
-            <div class="m-auto text-center flex justify-center text-center items-center">
-              <el-button size="large" @click="saveDraft">存草稿</el-button>
-              <el-button class="sm:w-auto w-full" size="large" type="primary" @click="onRelease">发布</el-button>
-            </div>
+          <el-form-item label="保存操作" label-position="left">
+            <el-button size="large" @click="saveDraft">存草稿</el-button>
+            <el-button class="sm:w-auto" size="large" type="primary" @click="onRelease(formRef)">立即发布
+            </el-button>
           </el-form-item>
-
-
-          <div class="flex flex-col">
-            <el-form-item class="my-4" label-position="left">
-
-            </el-form-item>
-          </div>
         </el-form>
+        <div class="h-[20px]"></div>
+        <el-divider />
       </div>
-
     </el-page-header>
   </div>
 
@@ -66,14 +59,15 @@ import {MdEditor} from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
 import type {CmsWebsite, CmsWebsiteParam} from "~/api/cms/cmsWebsite/model";
 import {addCmsArticle, pageCmsArticle, updateCmsArticle} from "~/api/cms/cmsArticle";
-import type {UploadUserFile} from 'element-plus'
 import useFormData from "~/utils/use-form-data";
 import {uploadOss} from "~/api/system/file";
+import type {FormInstance, FormRules, UploadProps, UploadUserFile} from 'element-plus'
 import {updateCmsWebsiteAll} from "~/api/cms/cmsWebsite";
 import {addShopMerchantApply, updateShopMerchantApply} from "~/api/shop/shopMerchantApply";
 import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
 import {listDictData} from "~/api/system/dict-data";
 import {getLang} from "~/utils/common";
+import type {ShopMerchantApply} from "~/api/shop/shopMerchantApply/model";
 
 const route = useRoute();
 const router = useRouter();
@@ -92,6 +86,7 @@ const srcList = ref<string[]>([])
 const inputWidth = ref<string>('180px');
 const showSearch = ref<boolean>(false);
 const loading = ref(false)
+const formRef = ref<FormInstance>()
 
 // 搜索表单
 const where = reactive<CmsWebsiteParam>({
@@ -188,6 +183,17 @@ const {form, assignFields} = useFormData<CmsArticle>({
   detail: undefined
 });
 
+const rules = reactive<FormRules<CmsArticle>>({
+  title: [
+    {required: true, message: '请输入文章标题', trigger: 'blur'},
+    {min: 5, message: '标题长度太短啦', trigger: 'blur'},
+  ],
+  content: [
+    {required: true, message: '请输入手机号码', trigger: 'blur'},
+    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'},
+  ]
+})
+
 const goBack = () => {
   router.back();
 }
@@ -259,23 +265,31 @@ const saveDraft = () => {
 
 }
 
-const onRelease = () => {
+// 发布文章
+const onRelease = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
   if (loading.value) return // 防止重复提交
+  await formEl.validate(async (valid) => {
+    if (!valid) return;
+    form.files = undefined;
+    if (srcList.value.length > 0) {
+      form.files = JSON.stringify(srcList.value)
+    }
+    // if(!form.developer){
+    //   form.developer = developer.value;
+    // }
 
-  form.files = undefined;
-  if (srcList.value.length > 0) {
-    form.files = JSON.stringify(srcList.value)
-  }
-  // if(!form.developer){
-  //   form.developer = developer.value;
-  // }
-
-  loading.value = true
-  const saveOrUpdate = isUpdate.value ? updateCmsArticle : addCmsArticle;
-  saveOrUpdate(form).then(() => {
-    ElMessage.success('发布成功');
+    loading.value = true
+    const saveOrUpdate = isUpdate.value ? updateCmsArticle : addCmsArticle;
+    saveOrUpdate(form).then(() => {
+      assignFields({});
+      ElMessage.success('发布成功');
+      loading.value = false;
+    }).catch((err => {
+      console.log(err)
+      loading.value = false;
+    }));
   });
-
 }
 
 watch(