修改

src/components/WebSet/WebSiteCustomer.vue

@@ -22,7 +22,7 @@
         <li>
           <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
             @click="resetPageIndex(),getData()" />
-          <input type="button" class="normalBtn" @click="outerVisible=true,clearMsg()" value="新增頁面" />
+          <input type="button" class="normalBtn" @click="goUrl('WebSiteUpdate',0)" value="新增頁面" />
         </li>
       </ul>
     </div>
@@ -40,7 +40,7 @@
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
-              <el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,updateData(scope.row)">
+              <el-button type="primary" icon="el-icon-edit" circle @click="goUrl('WebSiteUpdate',scope.row.Id)">
               </el-button>
             </el-tooltip>
             <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
@@ -53,23 +53,6 @@
         layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total=total>
       </el-pagination>
     </div>
-
-    <el-dialog title="新增修改页面" :visible.sync="outerVisible" center width="400px">
-      <el-form :model="addMsg" ref="addMsg" label-width="120px">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="页面名称">
-              <el-input type="text" v-model="addMsg.PageName" maxlength="50" placeholder="页面名称">
-              </el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
-        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 <script>
@@ -84,8 +67,6 @@
         },
         total: 0,
         currentPage: 1,
-        //弹窗
-        outerVisible: false,
         dataList: [],
         addMsg: {
           Id: 0, //编号
@@ -128,25 +109,6 @@
         this.msg.pageIndex = 1;
         this.currentPage = 1;
       },
-      //修改
-      updateData(item) {
-        this.apipost(
-          "ws_post_GetPage", {
-            Id: item.Id,
-          },
-          res => {
-            if (res.data.resultCode == 1) {
-              var tempData = res.data.data;
-              this.addMsg.Id = tempData.Id;
-              this.addMsg.PageName = tempData.PageName;
-
-            } else {
-              this.Error(res.data.message);
-            }
-          },
-          err => {}
-        );
-      },
       //删除
       deleteData(item) {
         var that = this;
@@ -167,29 +129,19 @@
           );
         });
       },
-      //清空数据
-      clearMsg() {
-        this.addMsg.Id = 0;
-        this.addMsg.PageName = "";
-      },
-      //新增、修改广告
-      submitForm(addMsg) {
-        this.apipost(
-          "ws_post_SetPage", this.addMsg,
-          res => {
-            if (res.data.resultCode == 1) {
-              this.getData();
-              this.clearMsg();
-              this.Success(res.data.message);
-              this.outerVisible = false;
-            } else {
-              this.Error(res.data.message);
-            }
-          },
-          err => {}
-        );
+      //跳转
+      goUrl(name, id) {
+        this.$router.push({
+          name: name,
+          query: {
+            Id: id,
+            blank: "y",
+            tab: "编辑自定页面"
+          }
+        });
       },
 
+
     }
   }
 

src/components/WebSet/WebSiteEdit.vue

@@ -402,6 +402,12 @@
           isShelves: 0
         };
         this.dragObj=obj;
+        if(this.dataList.length==0){
+          if(!this.isDraggable){
+            this.dataList.push(this.dragObj);
+            this.isDraggable=true;
+          }
+        }
       },
       //从左拖动到右边结束
       drop(ev,index){

src/components/WebSet/WebSiteUpdate.vue

+<style>
+  .WebSiteIndex .WebSiteTopdiv {
+    /* text-align: right; */
+    margin: 10px 0;
+    width: 1080px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+</style>
+<template>
+  <!--首頁(首页)-->
+  <div class="WebSiteIndex">
+    <div class="WebSiteTopdiv">
+      自訂頁面 版面設定
+      <el-input type="text" v-model="postMsg.PageName" class="w250"></el-input>
+      <el-button type="primary" size="small" @click="saveData()">保存</el-button>
+    </div>
+    <div>
+      <WebSiteEdit ref="WebSiteEdit" :templateData="postMsg.PageDataList" v-on:getNewTemplateData="getNewTemplateData">
+      </WebSiteEdit>
+    </div>
+  </div>
+</template>
+<script>
+  import WebSiteEdit from "../WebSet/WebSiteEdit.vue"
+  export default {
+    data() {
+      return {
+        postMsg: {
+          PageName: '',
+          Id: 0,
+          PageDataList: [],
+        }
+      };
+    },
+    mounted() {
+      if (this.$route.query.Id && this.$route.query.Id > 0) {
+        this.postMsg.Id = this.$route.query.Id;
+        this.getPage();
+      }
+    },
+    components: {
+      WebSiteEdit
+    },
+    methods: {
+      //修改
+      getPage() {
+        this.apipost(
+          "ws_post_GetPage", {
+            Id: this.postMsg.Id,
+          },
+          res => {
+            if (res.data.resultCode == 1) {
+              var tempData = res.data.data;
+              console.log(tempData,'data');
+              this.postMsg.PageDataList = tempData.PageDataList;
+              this.postMsg.Id = tempData.Id;
+              this.postMsg.PageName = tempData.PageName;
+              this.$refs.WebSiteEdit.initData(this.postMsg.PageDataList);
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      //新增、修改广告
+      saveData() {
+        this.apipost(
+          "ws_post_SetPage", this.postMsg,
+          res => {
+            if (res.data.resultCode == 1) {
+              if (this.postMsg.Id > 0) {
+                this.getPage();
+              } else {
+                this.$router.push({
+                  name: name,
+                  query: {
+                    Id: res.data.data.Id,
+                    tab: "编辑自定页面"
+                  }
+                });
+              }
+              this.Success(res.data.message);
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+
+      //获取模板数据
+      getNewTemplateData(templateDataList) {
+        this.postMsg.PageDataList = templateDataList;
+      }
+    }
+  }
+
+</script>

src/router/config.js

@@ -4561,6 +4561,14 @@ export default {
                 title: '自订页面'
               },
             },
+            {
+              path: '/WebSiteUpdate', //前台网站自定页面 【自定义前端编辑】
+              name: 'WebSiteUpdate',
+              component: resolve => require(['@/components/WebSet/WebSiteUpdate'], resolve),
+              meta: {
+                title: '自订页面编辑'
+              },
+            },
             {
               path: '/WebSiteIndex', //前台网站首页【自定义前端网站】
               name: 'WebSiteIndex',