提交

src/views/OriginalityPage.vue

@@ -86,11 +86,11 @@
   />
 
   <el-dialog v-model="dialogVisible" title="创意" width="700">
-    <el-form :model="form" label-width="auto">
-      <el-form-item label="创意名称">
+    <el-form :model="form" label-width="auto" ref="ruleFormRef" :rules="rules">
+      <el-form-item label="创意名称" prop="creativeName">
         <el-input v-model="form.creativeName" prop="creativeName" />
       </el-form-item>
-      <el-form-item label="广告主">
+      <el-form-item label="广告主" prop="advertiserId">
         <el-select filterable clearable v-model="form.advertiserId" placeholder="选择广告主">
           <el-option
             v-for="item in AdvertiserList"
@@ -192,7 +192,7 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="createOrUpdate">确定</el-button>
+        <el-button type="primary" @click="() => createOrUpdate(ruleFormRef)">确定</el-button>
       </el-form-item>
     </el-form>
   </el-dialog>
@@ -224,6 +224,7 @@ import {
 import { ElLoading, ElMessage } from 'element-plus'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import type { FormInstance } from 'element-plus'
 import { formatDate } from '@/tool/index'
 const router = useRouter()
 const dialogVisible = ref(false)
@@ -234,6 +235,7 @@ const page = ref<Pages>({
   total: 0,
   keyword: '',
 })
+const ruleFormRef = ref<FormInstance>()
 const AdvertiserList = ref<AdvertiserItem[]>()
 
 const options = ref<AsSpaceItem[]>([])
@@ -258,6 +260,57 @@ const typeOptions = [
 const tableData = ref<OriginalityList>([])
 const siteList = ref<SiteList>([])
 
+const rules = {
+  creativeName: [
+    {
+      required: true,
+      message: '请输入创意名称',
+      trigger: 'blur',
+    },
+  ],
+  advertiserId: [
+    {
+      required: true,
+      message: '请输选择广告主',
+      trigger: 'change',
+    },
+  ],
+  dates: [
+    {
+      required: true,
+      message: '请输选择广告主',
+      trigger: 'change',
+    },
+  ],
+  mediaIds: [
+    {
+      required: true,
+      message: '请输选择站点',
+      trigger: 'change',
+    },
+  ],
+  showType: [
+    {
+      required: true,
+      message: '请输选择投放形式',
+      trigger: 'change',
+    },
+  ],
+  intervalType: [
+    {
+      required: true,
+      message: '请输选择广告位排期',
+      trigger: 'change',
+    },
+  ],
+  slot: [
+    {
+      required: true,
+      message: '请输选择广告位',
+      trigger: 'change',
+    },
+  ],
+}
 // 获取站点信息
 getSiteList().then((res) => {
   siteList.value = res.data
@@ -404,33 +457,37 @@ const getOriginality = () => {
 }
 
 // 创建或更新创意
-const createOrUpdate = () => {
-  const Func = form.value.creativeId ? updateOriginality : createOriginality
-  let timeInterval = ''
-  for (let i = 0; i < tableSchedulingData.value.length; i++) {
-    const v = tableSchedulingData.value[i]
-    for (let i = 0; i < 24; i++) {
-      timeInterval += v[i] ? '1' : '0'
+const createOrUpdate = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      const Func = form.value.creativeId ? updateOriginality : createOriginality
+      let timeInterval = ''
+      for (let i = 0; i < tableSchedulingData.value.length; i++) {
+        const v = tableSchedulingData.value[i]
+        for (let i = 0; i < 24; i++) {
+          timeInterval += v[i] ? '1' : '0'
+        }
+      }
+      const p: OriginalityItem = {
+        creativeId: form.value.creativeId,
+        advertiserId: form.value.advertiserId,
+        creativeName: form.value.creativeName,
+        intervalType: form.value.intervalType,
+        timeInterval,
+        startDate: form.value.dates ? form.value.dates[0] : '',
+        endDate: form.value.dates ? form.value.dates[1] : '',
+        showType: form.value.showType,
+        mediaIds: form.value.mediaIds,
+        slotIds: form.value.slot,
+        showIntervalTime: form.value.showIntervalTime,
+      }
+      Func(p).then(() => {
+        ElMessage.success(form.value.creativeId ? '更新成功' : '创建成功')
+        dialogVisible.value = false
+        getOriginality()
+      })
     }
-  }
-  const p: OriginalityItem = {
-    creativeId: form.value.creativeId,
-    advertiserId: form.value.advertiserId,
-    creativeName: form.value.creativeName,
-    intervalType: form.value.intervalType,
-    timeInterval,
-    startDate: form.value.dates ? form.value.dates[0] : '',
-    endDate: form.value.dates ? form.value.dates[1] : '',
-    showType: form.value.showType,
-    mediaIds: form.value.mediaIds,
-    slotIds: form.value.slot,
-    showIntervalTime: form.value.showIntervalTime,
-  }
-  Func(p).then(({ data }) => {
-    ElMessage.success(form.value.creativeId ? '更新成功' : '创建成功')
-    form.value.creativeId = data.creativeId
-    dialogVisible.value = !dialogVisible.value
-    getOriginality()
   })
 }