大屏应用位置整合

2022-06-24 17:03:35 +08:00
parent 8e04ec040a
commit e55e0fc2cc
5 changed files with 509 additions and 494 deletions
--- a/packages/bigscreen/designer/AppDesigner.vue
+++ b/packages/bigscreen/designer/AppDesigner.vue
@@ -1,34 +1,19 @@
 <template>
-  <ai-list v-if="!isShowDetail">
-    <template slot="title">
-      <ai-title title="大屏列表" :isShowBottomBorder="false" :instance="instance"></ai-title>
-    </template>
-    <template slot="tabs">
-      <el-tabs v-model="currIndex">
-        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
-          <component :urlPrefix="urlPrefix" :areaId="areaId" :ref="tab.name" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance"
-                     :dict="dict" :permissions="permissions"/>
-        </el-tab-pane>
-      </el-tabs>
-    </template>
-  </ai-list>
-  <Add v-else-if="componentName === 'Add'" :urlPrefix="urlPrefix" :areaId="areaId" :params="params" :instance="instance" :dict="dict" :permissions="permissions"
-       @change="onChange"></Add>
-  <SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance" :dict="dict" :permissions="permissions"
-              @change="onChange"></SourceData>
+  <section class="AppDesigner">
+    <component :is="currentPage" v-bind="$props"/>
+  </section>
 </template>

 <script>
 import List from './components/List.vue'
 import Add from './components/Add'
 import SourceData from './components/SourceData'
+import Preview from "./components/preview";

 export default {
  name: 'AppDesigner',
  label: '大屏设计',
-
-  components: {List, Add, SourceData},
-
+  components: {Preview, List, Add, SourceData},
  props: {
    instance: Function,
    dict: Object,
@@ -40,6 +25,12 @@ export default {
  },

  computed: {
+    currentPage() {
+      const {hash} = this.$route
+      return hash == "#sourceData" ? SourceData :
+          hash == "#add" ? Add :
+              hash == "#preview" ? Preview : List
+    },
    tabs() {
      return [
        {label: '大屏列表', name: 'FormList', comp: List, permission: ''}
--- a/packages/bigscreen/designer/components/Add.vue
+++ b/packages/bigscreen/designer/components/Add.vue
@@ -1,8 +1,7 @@
 <template>
  <ai-detail>
    <template slot="title">
-      <ai-title :title="id ? '编辑项目' : '添加项目'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
-      </ai-title>
+      <ai-title :title="id ? '编辑项目' : '添加项目'" isShowBack isShowBottomBorder @onBackClick="cancel"/>
    </template>
    <template slot="content">
      <el-form ref="form" :model="form" label-width="110px" label-position="right">
@@ -64,14 +63,6 @@
          :theme="config.theme"
          @close="isShowLayout = false">
      </Layout>
-      <ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="screenId = false" v-if="screenId" :title="form.name">
-        <ai-dv-background
-            :theme="config.theme"
-            v-if="config.length || config.theme === '1'"
-            :src="config.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : config.backgroundImage[0].url">
-        </ai-dv-background>
-        <app-gigscreen-viewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"/>
-      </ai-dv-wrapper>
      <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">
@@ -103,7 +94,6 @@ export default {
  props: {
    instance: Function,
    dict: Object,
-    params: Object,
    urlPrefix: String
  },
  inject: {
@@ -145,24 +135,18 @@ export default {

  created() {
    this.dict.load('customizedDVs')
-    if (this.params && this.params.id) {
-      this.id = this.params.id
-      this.getInfo(this.params.id)
-    }
+    this.getInfo()
  },

-  mounted() {
-
-  },

  methods: {
-    getInfo(id) {
+    getInfo() {
+      let {id} = this.$route.query
      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => {
-        if (res.code === 0) {
+        if (res?.data) {
          this.form = {
            ...res.data
          }
-
          if (res.data.relationLsIds) {
            this.tableData = res.data.lsList.map(v => {
              let conf = JSON.parse(v.config || '') || {}
@@ -195,14 +179,8 @@ export default {
    },

    toViewer(id) {
-      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
-        if (res.data) {
-          this.config = JSON.parse(res.data.config).dashboard
-        }
-      })
-      this.screenId = id
+      this.$router.push({query: {id}, hash: "#preview"})
    },
-
    onChange(e) {
      const ids = this.tableData.map(v => v.id)
      if (ids.indexOf(e.id) < 0) {
@@ -260,7 +238,7 @@ export default {

              this.home && this.home.refreshDvOptions && this.home.refreshDvOptions()
              setTimeout(() => {
-                this.cancel(true)
+                this.cancel()
              }, 600)
            }
          })
@@ -268,11 +246,8 @@ export default {
      })
    },

-    cancel(isRefresh) {
-      this.$emit('change', {
-        type: 'list',
-        isRefresh: !!isRefresh
-      })
+    cancel() {
+      this.$router.push({})
    },

    handleCustomizedDV() {
--- a/packages/bigscreen/designer/components/List.vue
+++ b/packages/bigscreen/designer/components/List.vue
@@ -1,5 +1,6 @@
 <template>
-  <ai-list class="form-list" isTabs style="width: 100%">
+  <ai-list>
+    <ai-title slot="title" title="大屏列表" isShowBottomBorder/>
    <template slot="content">
      <ai-search-bar>
        <template #left>
@@ -155,24 +156,12 @@
        this.loading = false
      })
    },
-
    toEdit(id) {
-        this.$emit('change', {
-          type: 'add',
-          params: {
-            id: id || ''
-          }
-        })
+      this.$router.push({hash: "#add", query: {id}})
    },
-
    toAddData() {
-        this.$emit('change', {
-          type: 'SourceData'
-        })
+      this.$router.push({hash: "#sourceData"})
    }
  }
 }
 </script>
-
-<style scoped lang="scss">
-</style>
--- a/packages/bigscreen/designer/components/SourceData.vue
+++ b/packages/bigscreen/designer/components/SourceData.vue
@@ -1,7 +1,7 @@
 <template>
  <ai-detail>
    <template slot="title">
-      <ai-title title="数据源" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      <ai-title title="数据源" isShowBack isShowBottomBorder @onBackClick="cancel">
      </ai-title>
    </template>
    <template slot="content">
@@ -64,7 +64,8 @@
                <el-radio label="1">SQL</el-radio>
              </el-radio-group>
            </el-form-item>
-            <el-form-item v-if="form.type === '1'" label="sql语句" style="width: 100%;" prop="description" :rules="[{ required: true, message: '请输入sql语句', trigger: 'blur' }]">
+            <el-form-item v-if="form.type === '1'" label="sql语句" style="width: 100%;" prop="description"
+                          :rules="[{ required: true, message: '请输入sql语句', trigger: 'blur' }]">
              <el-input
                  :rows="8"
                  size="small"
@@ -73,7 +74,8 @@
                  v-model="form.sqlContent">
              </el-input>
            </el-form-item>
-            <el-form-item v-if="form.type === '0'" label="村微应用" style="width: 100%;" prop="appId" :rules="[{ required: true, message: '请选择村微应用', trigger: 'change' }]">
+            <el-form-item v-if="form.type === '0'" label="村微应用" style="width: 100%;" prop="appId"
+                          :rules="[{ required: true, message: '请选择村微应用', trigger: 'change' }]">
              <el-select size="small" style="width: 100%;" v-model="form.appId" placeholder="请选择村微应用" @change="onAppChange">
                <el-option
                    v-for="item in appList"
@@ -83,13 +85,15 @@
                </el-option>
              </el-select>
            </el-form-item>
-            <el-form-item v-if="form.type === '0'" label="数据范围" style="width: 100%;" prop="dataRange" :rules="[{ required: true, message: '请选择数据范围', trigger: 'change' }]">
+            <el-form-item v-if="form.type === '0'" label="数据范围" style="width: 100%;" prop="dataRange"
+                          :rules="[{ required: true, message: '请选择数据范围', trigger: 'change' }]">
              <el-radio-group v-model="form.dataRange">
                <el-radio label="0">全部</el-radio>
                <el-radio label="1">自定义条数</el-radio>
              </el-radio-group>
            </el-form-item>
-            <el-form-item label="数据条数" style="width: 100%;" v-if="form.dataRange === '1' && form.type === '0'" prop="count" :rules="[{ required: true, message: '请输入数据条数', trigger: 'blur' }]">
+            <el-form-item label="数据条数" style="width: 100%;" v-if="form.dataRange === '1' && form.type === '0'" prop="count"
+                          :rules="[{ required: true, message: '请输入数据条数', trigger: 'blur' }]">
              <el-input
                  size="small"
                  placeholder="请输入数据条数"
@@ -100,7 +104,8 @@
              <el-form-item :label="'统计项' + index" style="width: 100%;" v-for="(item, index) in form.statisticsConfigs" :key="'statisticsConfigs' + index">
                <div class="form-flex">
                  <div>
-                    <el-select size="small" style="width: 160px;" v-model="item.fieldName" @change="e => onChooseField('statisticsConfigs', e, index)" placeholder="请选择" clearable>
+                    <el-select size="small" style="width: 160px;" v-model="item.fieldName" @change="e => onChooseField('statisticsConfigs', e, index)"
+                               placeholder="请选择" clearable>
                      <el-option
                          v-for="(item, index) in filedList"
                          :key="index"
@@ -438,11 +443,8 @@
      })
    },

-      cancel (isRefresh) {
-        this.$emit('change', {
-          type: 'list',
-          isRefresh: !!isRefresh
-        })
+    cancel() {
+      this.$router.push({})
    }
  }
 }
--- a/packages/bigscreen/designer/components/preview.vue
+++ b/packages/bigscreen/designer/components/preview.vue
@@ -0,0 +1,58 @@
+<template>
+  <section class="preview">
+    <ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="$router.back()" v-if="screenId" :title="info.name">
+      <ai-dv-background
+          :theme="config.theme"
+          v-if="config.length || config.theme === '1'"
+          :src="config.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : config.backgroundImage[0].url">
+      </ai-dv-background>
+      <app-gigscreen-viewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"/>
+    </ai-dv-wrapper>
+  </section>
+</template>
+
+<script>
+import AppGigscreenViewer from "../../viewer/AppGigscreenViewer";
+
+export default {
+  name: "preview",
+  components: {AppGigscreenViewer},
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    urlPrefix: {
+      type: String,
+      default: '/app'
+    }
+  },
+  computed: {
+    screenId: v => v.$route.query.id
+  },
+  data() {
+    return {
+      info: {},
+      config: {}
+    }
+  },
+  methods: {
+    getDvData() {
+      let {id} = this.$route.query
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
+        if (res?.data) {
+          this.info = res.data
+          this.config = JSON.parse(res.data.config).dashboard
+        }
+      })
+    }
+  },
+  created() {
+    this.getDvData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.preview {
+}
+</style>