修复bug

src/views/content/article/detail.vue

@@ -9,7 +9,7 @@
           <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
-      <el-form-item label="背景图片：">
+      <el-form-item v-if="form.templateType !== undefined" label="背景图片：" prop="backgroundImage">
         <Upload listType="picture-card" :url="form.backgroundImage" @upload="upload($event, 'backgroundImage')"
           :disabled="disabled" />
       </el-form-item>
@@ -17,27 +17,39 @@
         <Upload listType="picture-card" :url="form.audioBackgroundImage" @upload="upload($event, 'audioBackgroundImage')"
           :disabled="disabled" />
       </el-form-item>
-      <el-form-item v-if="form.templateType == 1" label="页面排版：" style="min-width: 50%">
+      <el-form-item v-if="form.templateType == 1" label="页面排版：" style="width: 60%">
         <el-button type="primary" icon="el-icon-plus" size="mini" @click="getAdd">添加</el-button>
         <el-table :data="form.contentShareLayoutList">
           <el-table-column label="布局类型" align="center">
             <template slot-scope="scope">
-              <el-select v-model="scope.row.layoutType" placeholder="请选择布局类型">
-                <el-option v-for="item in layoutOptions" :key="item.value" :value="item.value" :label="item.label" />
-              </el-select>
+              <el-form-item :prop="`contentShareLayoutList.${scope.$index}.layoutType`"
+                :rules="{ required: true, trigger: 'change' }">
+                <el-select v-model="scope.row.layoutType" placeholder="请选择布局类型">
+                  <el-option v-for="item in layoutOptions" :key="item.value" :value="item.value" :label="item.label" />
+                </el-select>
+              </el-form-item>
             </template>
           </el-table-column>
           <el-table-column label="内容" align="center">
             <template slot-scope="scope">
-              <Upload v-if="scope.row.layoutType === 0" listType="picture-card" :url="scope.row.contentPic"
-                @upload="upload($event, `contentPic`, scope.$index)" :disabled="disabled" />
-              <el-input v-else v-model="scope.row.contentName" placeholder="请选择内容" readonly
-                @focus="getDialog(scope.row.layoutType, scope.$index)" :title="scope.row.contentName" />
+              <el-form-item v-if="scope.row.layoutType === 0" :prop="`contentShareLayoutList.${scope.$index}.contentPic`"
+                :rules="{ required: true, trigger: 'change' }">
+                <Upload listType="picture-card" :url="scope.row.contentPic"
+                  @upload="upload($event, `contentPic`, scope.$index)" :disabled="disabled" />
+              </el-form-item>
+              <el-form-item v-else :prop="`contentShareLayoutList.${scope.$index}.contentName`"
+                :rules="{ required: true, trigger: 'change' }">
+                <el-input v-model="scope.row.contentName" placeholder="请选择内容" readonly
+                  @focus="getDialog(scope.row.layoutType, scope.$index)" :title="scope.row.contentName" />
+              </el-form-item>
             </template>
           </el-table-column>
           <el-table-column label="排序" align="center">
             <template slot-scope="scope">
-              <el-input-number v-model="scope.row.sort" :min="1" step-strictly />
+              <el-form-item :prop="`contentShareLayoutList.${scope.$index}.sort`"
+                :rules="{ required: true, trigger: 'blur' }">
+                <el-input-number v-model="scope.row.sort" :min="1" step-strictly />
+              </el-form-item>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" width="100px">
@@ -60,49 +72,49 @@
       <el-form-item label="是否开启按钮：">
         <el-switch v-model="form.isButton" :active-value="1" :inactive-value="0" />
       </el-form-item>
-      <el-form-item v-if="form.isButton == 1" label="按钮交互：">
+      <el-form-item v-if="form.isButton == 1" label="按钮交互：" prop="buttonFixType">
         <el-select v-model="form.buttonFixType" placeholder="请选择按钮交互">
           <el-option v-for="item in buttonOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-row v-if="form.isButton == 1" style="width: 100%">
         <el-col :span="8">
-          <el-form-item label="左按钮文案：">
+          <el-form-item label="左按钮文案：" prop="leftButtonText">
             <el-input v-model="form.leftButtonText" placeholder="请输入按钮文案" />
           </el-form-item>
           <el-form-item label="左按钮图片：">
             <Upload listType="picture-card" :url="form.leftButtonImg" @upload="upload($event, 'leftButtonImg')"
               :disabled="disabled" />
           </el-form-item>
-          <el-form-item label="跳转方式：">
+          <el-form-item label="跳转方式：" prop="leftButtonForwardType">
             <el-select v-model="form.leftButtonForwardType" placeholder="请选择跳转方式">
               <el-option v-for="item in changeOptions" :key="item.value" :value="item.value" :label="item.label" />
             </el-select>
           </el-form-item>
-          <el-form-item v-if="form.leftButtonForwardType === 1" label="内容添加：">
+          <el-form-item v-if="form.leftButtonForwardType === 1" label="内容添加：" prop="leftButtonContentName">
             <el-input v-model="form.leftButtonContentName" readonly placeholder="请选择内容" @focus="getDialog(2, -1)" />
           </el-form-item>
-          <el-form-item v-if="form.leftButtonForwardType === 0" label="跳转链接：">
+          <el-form-item v-if="form.leftButtonForwardType === 0" label="跳转链接：" prop="leftButtonForwardUrl">
             <el-input v-model="form.leftButtonForwardUrl" placeholder="请输入跳转链接" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="右按钮文案：">
+          <el-form-item label="右按钮文案：" prop="rightButtonText">
             <el-input v-model="form.rightButtonText" placeholder="请输入按钮文案" />
           </el-form-item>
           <el-form-item label="右按钮图片：">
             <Upload listType="picture-card" :url="form.rightButtonImg" @upload="upload($event, 'rightButtonImg')"
               :disabled="disabled" />
           </el-form-item>
-          <el-form-item label="跳转方式：">
+          <el-form-item label="跳转方式：" prop="rightButtonForwardType">
             <el-select v-model="form.rightButtonForwardType" placeholder="请选择跳转方式">
               <el-option v-for="item in changeOptions" :key="item.value" :value="item.value" :label="item.label" />
             </el-select>
           </el-form-item>
-          <el-form-item v-if="form.rightButtonForwardType === 1" label="内容添加：">
+          <el-form-item v-if="form.rightButtonForwardType === 1" label="内容添加：" prop="rightButtonContentName">
             <el-input v-model="form.rightButtonContentName" readonly placeholder="请选择内容" @focus="getDialog(2, -2)" />
           </el-form-item>
-          <el-form-item v-if="form.rightButtonForwardType === 0" label="跳转链接：">
+          <el-form-item v-if="form.rightButtonForwardType === 0" label="跳转链接：" prop="rightButtonForwardUrl">
             <el-input v-model="form.rightButtonForwardUrl" placeholder="请输入跳转链接" />
           </el-form-item>
         </el-col>
@@ -248,6 +260,9 @@ export default {
         templateType: [{
           required: true, message: '请选择模版类型', trigger: 'change'
         }],
+        backgroundImage: [{
+          required: true, message: '请上传背景图片', trigger: 'change'
+        }],
         shareTitle: [{
           required: true, message: '请输入分享标题', trigger: 'blur'
         }],
@@ -256,6 +271,33 @@ export default {
         }],
         shareIcon: [{
           required: true, message: '请上传分享图片', trigger: 'change'
+        }],
+        buttonFixType: [{
+          required: true, message: '请选择按钮交互', trigger: 'change'
+        }],
+        leftButtonText: [{
+          required: true, message: '请输入按钮文案', trigger: 'blur'
+        }],
+        leftButtonForwardType: [{
+          required: true, message: '请选择跳转方式', trigger: 'change'
+        }],
+        leftButtonContentName: [{
+          required: true, message: '请选择内容', trigger: 'change'
+        }],
+        leftButtonForwardUrl: [{
+          required: true, message: '请输入跳转链接', trigger: 'blur'
+        }],
+        rightButtonText: [{
+          required: true, message: '请输入按钮文案', trigger: 'blur'
+        }],
+        rightButtonForwardType: [{
+          required: true, message: '请选择跳转方式', trigger: 'change'
+        }],
+        rightButtonContentName: [{
+          required: true, message: '请选择内容', trigger: 'change'
+        }],
+        rightButtonForwardUrl: [{
+          required: true, message: '请输入跳转链接', trigger: 'blur'
         }]
       }
     }
@@ -422,5 +464,11 @@ export default {
   .el-form-item {
     width: 500px;
   }
+
+  .el-table__row {
+    .el-form-item {
+      width: 100%;
+    }
+  }
 }
 </style>