轮播图

project/sass/apps/AppCarousel/AppCarousel.vue

@@ -44,7 +44,7 @@
     <!-- 添加的模态框 -->
     <ai-dialog :title="dialog.title" :visible.sync="visible" @onCancel="visible = false" @onConfirm="addConfirm"
                width="800px">
-      <el-form class="ai-form" ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="100px">
+      <el-form class="ai-form" ref="form" :model="dialogInfo" :rules="formRules" size="small" label-width="100px">
         <!-- 首页封面 -->
         <el-form-item style="width: 100%;" label="首页封面" prop="imgUrl">
           <ai-uploader v-model="dialogInfo.imgUrl" @change="change" :instance="instance" :limit="1"></ai-uploader>
@@ -71,8 +71,6 @@
 
     <!-- 详情的模态框 -->
     <ai-dialog title="详情" :visible.sync="detailDialog" customFooter width="800px">
-      <!--  -->
-      <el-form ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="100px">
       <ai-wrapper label-width="80px" :columnsNumber="1">
         <ai-info-item label="首页封面">
           <span><img :src="dialogInfo.imgUrl" alt="" style="width:100px;height:100px;"/></span>
@@ -90,8 +88,6 @@
           <span>{{ this.dict.getLabel('bannerPosition', dialogInfo.position) }}</span>
         </ai-info-item>
       </ai-wrapper>
-      </el-form>
-
       <div class="dialog-footer" slot="footer">
         <el-button @click="detailDialog=false">关闭</el-button>
       </div>
@@ -141,10 +137,10 @@ export default {
       },
       // fileList: '',
       formRules: {
-        imgUrl: [{required: true, message: '请添加图片', trigger: 'blur'}],
+        imgUrl: [{required: true, message: '请添加图片', trigger: 'change'}],
         title: [{required: true, message: '请输入活动名称', trigger: 'blur'}],
-        type: [{required: true, trigger: 'blur'}],
-        // linkUrl: [{ required: true, message: '请输入链接', trigger: 'blur' }]
+        type: [{required: true, message: '请选择链接类型', trigger: 'change'}],
+        position: [{required: true, message: '请选择位置', trigger: 'change'}]
       },
       colConfigs: [
         {prop: 'imgUrl', label: '首页封面', slot: 'imgUrl'},
@@ -229,9 +225,9 @@ export default {
     },
     // 确定新增
     addConfirm() {
-      // console.log('确定')
-      this.instance
-      .post(`/app/appbanner/addOrUpdate`, {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.instance.post(`/app/appbanner/addOrUpdate`, {
             imgUrl: this.dialogInfo.imgUrl[0].url,
             linkUrl: this.dialogInfo.linkUrl,
             status: this.status,
@@ -239,14 +235,15 @@ export default {
             type: this.dialogInfo.type,
             id: this.dialogInfo.id,
             position: this.dialogInfo.position
-      })
-      .then(res => {
+          }).then(res => {
             if (res?.code == 0) {
               this.$message.success('新增成功')
               this.visible = false
               this.getList()
             }
           })
+        }
+      })
     },
     // 发布/取消发布
     release(row) {