feat: 完善截图功能、输入模板名字、保存功能。目前接口不通

src/components/dialog/TemplateAssetChooseDialog/index.vue

@@ -37,6 +37,7 @@
                     @view="onView"
                   />
                 </div>
+                <!--                背景的设置-->
                 <!--              <div-->
                 <!--                v-if="hasRootAssets"-->
                 <!--                ref="rootElement"-->
@@ -241,9 +242,10 @@
               @customPaste="onCustomPaste"
             />
           </div>
+          <!--          放在底层，用截图封面图片-->
           <div
             ref="canvas"
-            style="position: absolute;top:0;left: 0;z-index: -1;"
+            style="position: absolute;top:20px;left: 20px;z-index: -1;"
             class="l-flex__none"
             :style="canvasStyles"
           >
@@ -286,7 +288,9 @@ import {
 } from '@/utils'
 import { getAssetsByQuery } from '@/api/asset'
 import Draggable from 'vuedraggable'
-import { getProgram } from '@/api/program'
+import {
+  getProgram, updateProgramDraft
+} from '@/api/program'
 import { WidgetType } from '@/views/screen/material/program/ast/core/constant'
 import WidgetShortcut from '@/views/screen/material/program/ast/components/WidgetShortcut'
 import {
@@ -297,6 +301,9 @@ import '@wangeditor/editor/dist/css/style.css'
 import domToImage from 'dom-to-image'
 import mixin2 from '@/views/screen/material/program/ast/mixin2'
 import Widget from '@/views/screen/material/program/ast/core/widget/WidgetViewer'
+import {
+  fix, getDuration, getUsedAssets, toJSON
+} from '@/views/screen/material/program/ast/core/utils'
 
 export default {
   name: 'TemplateAssetChooseDialog',
@@ -366,7 +373,7 @@ export default {
     //   return this.title || (this.types.length > 1 ? '请选择资源' : `请选择${AssetTypeInfo[this.types[0]]}`)
     // },
     layers () {
-      return this.widgets.slice().reverse()
+      return this.widgets.filter(this.hasAssets).slice().reverse()
     },
     count () {
       if (this.node) {
@@ -488,11 +495,6 @@ export default {
         }
       }
     },
-    toSnap () {
-      setTimeout(() => {
-        this.test()
-      }, 100)
-    },
     async test () {
       const base64 = await this.snap()
       if (base64) {
@@ -600,14 +602,6 @@ export default {
               this.showMessage('error', '布局分辨率异常，请联系管理员')
               return
             }
-            // this.$emit('update-program',{
-            //   id, status, name, resolutionRatio,
-            //   detail: {
-            //     width: Number(width),
-            //     height: Number(height),
-            //     ...JSON.parse(itemJsonStr)
-            //   }
-            // } );
             this.program = {
               id, status, name, resolutionRatio,
               detail: {
@@ -618,6 +612,7 @@ export default {
             }
             console.log('progam', this.program)
             this.initCanvas(this.program.detail)
+            this.checkRatio()
             // 默认选中第一个
             const widget = this.layers[0]
             this.chooseWidget(widget)
@@ -854,9 +849,17 @@ export default {
       this.assets.splice(index, 1)
       this.selectedWidget.sources = this.assets
     },
+
     onConfirm (done) {
-      // 检查资源是否都有了
-      // forEach()
+      // 检查资源
+      const { ready, message } = fix(this.node)
+      if (!ready) {
+        this.$message({
+          type: 'error',
+          message
+        })
+        return
+      }
       // 输入名字
       this.$prompt(
         '<p class="u-color--black u-font-size--sm u-bold">请输入节目名称</p>',
@@ -873,11 +876,51 @@ export default {
         }
       ).then(({ value }) => {
         console.log('value', value)
-        done()
+        const loading = this.$showLoading()
+        setTimeout(() => {
+          // 不太确定这个options的作用
+          this._save({ name: value, generate: true }, done).finally(() => {
+            this.$closeLoading(loading)
+          })
+        }, 100)
       }).catch(() => {
         console.log('cancel')
       })
     },
+    // 这里参照的是src/views/screen/material/program/ast/Designer.vue
+    async _save (options, done) {
+      console.log('options', options)
+      try {
+        const base64 = await this.snap()
+        const result = await updateProgramDraft({
+          id: this.program.id,
+          duration: getDuration(this.node),
+          itemJsonStr: JSON.stringify(toJSON(this.node)),
+          keyNameList: getUsedAssets(this.node),
+          base64,
+          ...options
+        })
+        if (result) {
+          this.$message({
+            type: 'success',
+            message: '保存成功'
+          })
+          // 关闭
+          done()
+        } else {
+          this.$message({
+            type: 'warning',
+            message: '保存失败'
+          })
+        }
+      } catch (e) {
+        console.warn(e)
+        this.$message({
+          type: 'warning',
+          message: '保存失败'
+        })
+      }
+    },
     onSetImageDuration () {
       const duration = this.duration
       this.assets.forEach(asset => {
@@ -892,6 +935,7 @@ export default {
         case WidgetType.MEDIA:
         case WidgetType.IMAGE:
         case WidgetType.VIDEO:
+        case WidgetType.TEXT:
           return true
         default:
           return false

src/views/screen/material/program/ast/Designer.vue

@@ -18,8 +18,12 @@
         class="l-flex__none c-sibling-item c-designer__shortcut el-icon-arrow-left o-icon o-icon--hover u-pointer"
         @click="onBack"
       />
-      <span class="l-flex__self c-sibling-item near u-font-size--md u-bold u-ellipsis">{{ program.name }}</span>
-      <span class="l-flex__none c-sibling-item near u-font-size--xs">{{ program.resolutionRatio }}</span>
+      <span class="l-flex__self c-sibling-item near u-font-size--md u-bold u-ellipsis">
+        {{ program.name }}
+      </span>
+      <span class="l-flex__none c-sibling-item near u-font-size--xs">
+        {{ program.resolutionRatio }}
+      </span>
       <div
         v-if="hasAudio"
         class="l-flex__none c-sibling-item c-designer__shortcut o-icon o-icon--hover u-pointer"
@@ -132,7 +136,9 @@
               <span class="c-sibling-item--v o-icon o-widget-cfg__icon">
                 <svg-icon :icon-class="cfg.icon" />
               </span>
-              <span class="c-sibling-item--v nearer o-widget-cfg__text u-font-size--xs">{{ cfg.label }}</span>
+              <span class="c-sibling-item--v nearer o-widget-cfg__text u-font-size--xs">
+                {{ cfg.label }}
+              </span>
             </div>
           </div>
           <el-checkbox
@@ -738,6 +744,7 @@ export default {
       })
     },
     async _save (options) {
+      console.log('options', options)
       try {
         const base64 = await this.snap()
         const result = await updateProgramDraft({

src/views/screen/material/program/ast/mixin.js

@@ -95,6 +95,7 @@ export default {
     }
   },
   mounted () {
+    console.log('mounted!!!!!')
     this.initCanvas(this.program.detail)
     this.checkRatio()
     window.addEventListener('resize', this.checkRatio)