修改

src/components/StoreDesign/special.vue

@@ -57,8 +57,8 @@
         <el-tabs v-model="activeName">
           <el-tab-pane label="基础设置" name="first">
             <div class="contentTwo">
-              <el-form label-width="10rem">
-                <el-form-item label="标题">
+              <el-form label-width="10rem" :model="addMsg" :rules="rules" ref="addMsg">
+                <el-form-item label="标题" prop="Title">
                   <el-input type="text" maxlength="100" size="small" v-model="addMsg.Title"></el-input>
                 </el-form-item>
                 <el-form-item label="专题列表布局方式">
@@ -71,9 +71,9 @@
                     小图模式建议封面图片大小：268×202；大图模式建议封面图片大小：702×350；多图模式建议封面图片大小：268×202，最多上传3张图片
                   </div>
                 </el-form-item>
-                <el-form-item label="封面图">
+                <el-form-item label="封面图" prop="CoverImg">
                   <el-tooltip class="item" effect="dark" content="建议尺寸: 268 * 202" placement="top">
-                    <el-button size="mini" @click="choicImg=true">选择图片</el-button>
+                    <el-button size="mini" @click="choicImg=true,commonIndex=1">选择图片</el-button>
                   </el-tooltip>
                   <div class="customize-share-title">
                     <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
@@ -94,7 +94,7 @@
                 </el-form-item>
                 <el-form-item label="自定义分享图片">
                   <el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
-                    <el-button size="mini" @click="choicImg=true">选择图片</el-button>
+                    <el-button size="mini" @click="choicImg=true,commonIndex=2">选择图片</el-button>
                   </el-tooltip>
                   <div class="customize-share-title">
                     <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
@@ -106,7 +106,7 @@
                 <el-form-item label="是否精选">
                   <el-switch v-model="addMsg.IsChoice" :active-value="1" :inactive-value="0"></el-switch>
                 </el-form-item>
-                <el-form-item label="分类">
+                <el-form-item label="分类" prop="TopicTypeId">
                   <el-select v-model="addMsg.TopicTypeId" size="small">
                     <el-option :key="0" label="请选择" :value="0">
                     </el-option>
@@ -179,6 +179,10 @@
       <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
       </el-button>
     </template>
+    <!-- 选择图片文件 -->
+    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
+      <ChooseImg @SelectId="SelectId"></ChooseImg>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -194,8 +198,17 @@
       imageText
     },
     data() {
+      let validataTopic = (rule, value, callback) => {
+        if (this.addMsg.TopicTypeId == 0) {
+          return callback(new Error('请选择专题分类'));
+        } else {
+          callback();
+        }
+      }
       return {
         loading: false,
+        choicImg:false,
+        commonIndex:-1,
         activeName: 'first',
         pluginData: [],
         TypeList: [], //分类列表
@@ -226,11 +239,22 @@
           ComponentDataList: [], //插件
         },
         rules: {
-          RoleName: [{
+          Title: [{
             required: true,
-            message: "请输入用户名",
+            message: "标题不能为空",
             trigger: "blur"
           }],
+          CoverImg: [{
+            required: true,
+            message: "封面图片不能为空",
+            trigger: "blur"
+          }],
+          TopicTypeId:[{
+            validator: validataTopic,
+            trigger: "change",
+            required: true
+          }]
+
         },
       };
     },
@@ -242,6 +266,15 @@
         this.msg.pageIndex = val;
         this.getList();
       },
+      //选择图片
+      SelectId(msg) {
+        if(this.commonIndex==1){
+           this.addMsg.CoverImg = msg.url;
+        }else if(this.commonIndex==2){
+           this.addMsg.CustomImg=msg.url;
+        }
+        this.choicImg = false;
+      },
       getList() {
         this.apipost("/api/MContent/GetTopicPageList", this.msg, res => {
           if (res.data.resultCode == 1) {
@@ -254,15 +287,13 @@
       },
       submitform(addMsg) {
         //提交创建、修改表单
-        // this.$refs[addMsg].validate(valid => {
-        //   if (valid) {
-
-        //   } else {
-        //     return false;
-        //   }
-        // });
-
-        this.saveMsg();
+        this.$refs[addMsg].validate(valid => {
+          if (valid) {
+            this.saveMsg();
+          } else {
+            return false;
+          }
+        });
       },
       //保存
       saveMsg() {
@@ -311,7 +342,10 @@
             this.addMsg.TopicTypeId = jsonData.TopicTypeId;
             this.addMsg.ReadNum = jsonData.ReadNum;
             this.addMsg.SortNum = jsonData.SortNum;
-            this.addMsg.ComponentDataList = jsonData.ComponentDataList;
+            if(jsonData.ComponentDataList){
+                this.addMsg.ComponentDataList = jsonData.ComponentDataList;
+                this.pluginData = jsonData.ComponentDataList;
+            }
             this.speciaIsShowAdd = false;
           } else {
             this.Info(res.data.message);
@@ -322,7 +356,7 @@
       RemmoveRole(item) {
         var that = this;
         that.Confirm("是否要删除?", function () {
-          that.apipost("/api/MContent/RemoveRole", {
+          that.apipost("/api/MContent/RemoveTopic", {
             Id: item.Id
           }, res => {
             if (res.data.resultCode == 1) {