页面修改

src/components/WebSet/WebSiteEdit.vue

@@ -88,7 +88,7 @@
     justify-content: center;
   }
 
-.WebSite_item {
+  .WebSite_item {
     display: flex;
     border-bottom: 1px solid #f6f6f6;
     background-color: #fff;
@@ -183,14 +183,14 @@
                   <h2 class="temp-title">{{item.plugData.Title}}</h2>
                   <h3 class="temp-subtitle">
                     <template v-if="item.Id=='white_label_video'">
-                        {{item.plugData.Describe}}
+                      {{item.plugData.Describe}}
                     </template>
                   </h3>
                   <div class="group-tool">
-                    <el-button type="primary" size="small" @click="isShowDialog=true">編輯</el-button>
-                    <el-button type="danger" size="small">刪除</el-button>
+                    <el-button type="primary" size="small" @click="showDialog(item)">編輯</el-button>
+                    <el-button type="danger" size="small" @click="deletePlug(index)">刪除</el-button>
                     <span class="Movie_sj">上架</span>
-                    <el-switch v-model="item.plugData.isShelves" :active-value="1" :inactive-value="0" active-color="#13ce66"
+                    <el-switch v-model="item.isShelves" :active-value="1" :inactive-value="0" active-color="#13ce66"
                       inactive-color="#dcdfe6"></el-switch>
                   </div>
                 </div>
@@ -201,17 +201,20 @@
       </div>
     </div>
     <el-dialog title="版面區塊設定" :visible.sync="isShowDialog" width="900px">
-      <plugvideodialog :plugData="dialogData" ref="plugvideodialog"></plugvideodialog>
+      <!--视频-->
+      <plugvideodialog v-if="currentEditItem.Id=='white_label_video'" :plugData="currentEditItemData"></plugvideodialog>
+      <!--轮播图-->
+      <sliderdialog v-if="currentEditItem.Id=='white_label_slider'" :plugData="currentEditItemData"></sliderdialog>
       <span slot="footer" class="dialog-footer">
         <el-button @click="isShowDialog = false" size="small">取 消</el-button>
-        <el-button type="danger" size="small" @click="setVideoInfo()">确 定</el-button>
+        <el-button type="danger" size="small" @click="setSubPlugData()">确 定</el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 <script>
   import plugvideodialog from "../WebSet/plug-in/video_dialog.vue"
-
+  import sliderdialog from "../WebSet/plug-in/slider_dialog.vue"
   export default {
     data() {
       return {
@@ -223,27 +226,44 @@
         dataList: [],
         //模板详情列表
         detailsList: [],
-        isShowDialog:false,
-        dialogData:{}
+        isShowDialog: false,
+        //当前编辑项插件数据
+        currentEditItemData: {},
+        //当前编号的插件
+        currentEditItem: {},
       };
     },
     created() {},
     components: {
-      plugvideodialog
+      plugvideodialog,
+      sliderdialog,
     },
     methods: {
+      //显示弹窗
+      showDialog(item) {
+        this.isShowDialog = true;
+        this.currentEditItem = item;
+        this.currentEditItemData = JSON.parse(JSON.stringify(item.plugData));
+      },
       //获取数据
-      getsubplugdata(index, obj) {
-        this.dataList[index].plugData = obj;
+      setSubPlugData() {
+        this.isShowDialog = false;
+        this.currentEditItem.plugData = JSON.parse(JSON.stringify(this.currentEditItemData));
+      },
+      //删除插件
+      deletePlug(index) {
+        var that = this;
+        this.Confirm('是否要删除此数据?', function () {
+          that.dataList.splice(index, 1);
+        })
       },
       //添加数据到组件列表
       AddData(item) {
         var obj = {
           Id: item.TemplateKey,
           plugData: item.TemplateData,
-          isShelves:1
+          isShelves: 0
         };
-        console.log(item);
         this.dataList.push(obj);
       },
       //获取下拉框