设计页面驻留调整

packages/bigscreen/designer/components/Add.vue

@@ -27,7 +27,7 @@
         </ai-card>
         <ai-card title="大屏">
           <template #right>
-            <el-button @click="add('')" type="primary">添加大屏</el-button>
+            <el-button @click="gotoDesign()" type="primary">添加大屏</el-button>
             <el-button @click="dialog=true" type="primary">定制大屏</el-button>
           </template>
           <template #content>
@@ -62,16 +62,6 @@
           </template>
         </ai-card>
       </el-form>
-      <Layout
-          v-if="isShowLayout"
-          :instance="instance"
-          :dict="dict"
-          :params="query"
-          @change="onChange"
-          :urlPrefix="urlPrefix"
-          :theme="config.theme"
-          @close="isShowLayout = false">
-      </Layout>
       <ai-dialog :visible.sync="dialog" title="定制大屏" @closed="custom={}" @onConfirm="handleCustomizedDV">
         <el-form ref="CustomDVFrom" size="small" :model="custom" :rules="rules" label-width="80px">
           <el-form-item label="大屏标题" prop="title">
@@ -110,7 +100,6 @@ export default {
   components: {
     Layout
   },
-
   data() {
     return {
       info: {},
@@ -130,7 +119,6 @@ export default {
         {prop: 'id', label: 'ID'}
       ],
       tableData: [],
-      isShowLayout: false,
       id: '',
       dialog: false,
       custom: {},
@@ -143,36 +131,32 @@ export default {
       }
     }
   },
-
   created() {
     this.dict.load('customizedDVs')
-    this.getInfo()
+    this.getInfo().then(() => this.$route.params?.id && this.onChange(this.$route.params))
   },
-
-
-    methods: {
-      getInfo() {
-        let {id} = this.$route.query
-        if (!id) return
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => {
-          if (res?.data) {
-            this.form = {
-              ...res.data
-            }
-            if (res.data.relationLsIds) {
-              this.tableData = res.data.lsList.map(v => {
-                let conf = JSON.parse(v.config || '') || {}
-                return {
-                  id: v.id,
-                  title: v.title,
-                  dv: conf.custom || '',
-                  meta: JSON.stringify(conf.meta),
-                  isCustom: !!conf.custom,
-                  status: v.status
-                }
-              })
-              this.total = res.data.lsList.length
-
+  methods: {
+    getInfo() {
+      let {id} = this.$route.query
+      if (!id) return Promise.reject()
+      return this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => {
+        if (res?.data) {
+          this.form = {
+            ...res.data
+          }
+          if (res.data.relationLsIds) {
+            this.tableData = res.data.lsList.map(v => {
+              let conf = JSON.parse(v.config || '') || {}
+              return {
+                id: v.id,
+                title: v.title,
+                dv: conf.custom || '',
+                meta: JSON.stringify(conf.meta),
+                isCustom: !!conf.custom,
+                status: v.status
+              }
+            })
+            this.total = res.data.lsList.length
             this.$nextTick(() => {
               this.rowDrop()
             })
@@ -180,15 +164,13 @@ export default {
         }
       })
     },
-
-      onStatusChange (id) {
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/enableLargeScreen?id=${id}`).then(res => {
-          if (res.code === 0) {
-            this.$message.success('操作成功')
-          }
-        })
-      },
-
+    onStatusChange(id) {
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/enableLargeScreen?id=${id}`).then(res => {
+        if (res.code === 0) {
+          this.$message.success('操作成功')
+        }
+      })
+    },
     rowDrop() {
       const tbody = document.querySelector('.el-table__body-wrapper tbody')
       const _this = this
@@ -199,61 +181,46 @@ export default {
         }
       })
     },
-
-      toViewer(id) {
-        this.$router.push({query: {id}, hash: "#preview"})
-      },
-      onChange(e) {
-        const ids = this.tableData.map(v => v.id)
-        if (ids.indexOf(e.id) < 0) {
-          this.tableData.push({
-            title: e.title,
-            id: e.id,
-            status: '1'
-          })
-        } else {
-          const index = this.tableData.findIndex(v => v.id === e.id)
-          this.$set(this.tableData[index], 'title', e.title)
-        }
-
-        this.$nextTick(() => {
-          if (this.$route.query.id) {
-            const ids = this.tableData.map(v => v.id).join(',')
-            const names = this.tableData.map(v => v.name).join(',')
-            this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreenProject`, {
-              ...this.form,
-              relationLsIds: ids,
-              relationLsNames: names
-            }).then(res => {
-              if (res.code == 0) {
-              }
-            })
-          }
-        })
-      },
-
-    add() {
-      this.query = {
-        id: '',
-        name: this.form.name
-      }
-      this.isShowLayout = true
+    toViewer(id) {
+      this.$router.push({query: {id}, hash: "#preview"})
+    },
+    onChange(e) {
+      const ids = this.tableData.map(v => v.id)
+      if (ids.indexOf(e.id) < 0) {
+        this.tableData.push({
+          title: e.title,
+          id: e.id,
+          status: '1'
+        })
+      } else {
+        const index = this.tableData.findIndex(v => v.id === e.id)
+        this.$set(this.tableData[index], 'title', e.title)
+      }
+      this.$nextTick(() => {
+        if (this.$route.query.id) {
+          const ids = this.tableData.map(v => v.id).join(',')
+          const names = this.tableData.map(v => v.name).join(',')
+          this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreenProject`, {
+            ...this.form,
+            relationLsIds: ids,
+            relationLsNames: names
+          }).then(res => {
+            if (res.code == 0) {
+            }
+          })
+        }
+      })
+    },
+    gotoDesign(did) {
+      const {id} = this.$route.query
+      this.$router.push({hash: "#design", query: {id, did, name: this.form.name}})
     },
-
     toEdit(id, isCustom, form) {
       if (!isCustom) {
-        this.query = {
-          id,
-          name: this.form.name
-        }
-
-        this.isShowLayout = true
+        this.gotoDesign(id)
       } else {
         this.dialog = true
-        this.custom = {
-          ...form,
-
-        }
+        this.custom = form
       }
     },