feat: 添加模板库页面

src/api/program.js

@@ -29,6 +29,36 @@ export function getProgramDrafts (query) {
   })
 }
 
+export function getTemplateType () {
+  return tenantRequest({
+    url: '/device/resolutionRatio',
+    method: 'GET',
+    params: addTenant({})
+  }).then(({ data }) => {
+    return {
+      data: Object.keys(data).map(key => {
+        return {
+          value: key,
+          label: key
+        }
+      })
+    }
+  })
+}
+
+// 获取模板数据
+export function getProgramTemplate (query) {
+  const { pageNum: currentPage, pageSize: pageCount, ...params } = query
+  return tenantRequest({
+    url: '/item/listByPage',
+    method: 'POST',
+    data: addTenant({
+      currentPage, pageCount,
+      ...params
+    })
+  })
+}
+
 export function deleteProgramDraft ({ id, name }) {
   return del({
     url: '/item/origin/delete',

src/views/screen/material/program/ProgramDesigner.vue

@@ -25,6 +25,10 @@
         label="节目库"
         name="store"
       />
+      <el-tab-pane
+        label="模板库"
+        name="template"
+      />
     </el-tabs>
     <grid-table
       v-if="isDraft"
@@ -41,32 +45,66 @@
           @view="onEdit"
         >
           <template #button>
-            <div @click="onCopyDraft(item)">复制</div>
-            <div @click="onDel(item)">删除</div>
+            <div @click="onCopyDraft(item)">
+              复制
+            </div>
+            <div @click="onDel(item)">
+              删除
+            </div>
           </template>
         </program>
       </grid-table-item>
     </grid-table>
     <program-store
-      v-else
+      v-if="isStore"
       key="programStore"
       copy
       @copy="onCopy"
     />
+
+    <grid-table
+      v-if="isTemplate"
+      key="template"
+      ref="templateTable"
+      :schema="templateSchema"
+    >
+      <grid-table-item v-slot="item">
+        <program
+          :key="item.id"
+          :program="item"
+          @view="onView"
+        >
+          <template #button>
+            <div @click="onView(item)">
+              预览
+            </div>
+            <div @click="onUse(item)">
+              使用
+            </div>
+          </template>
+        </program>
+      </grid-table-item>
+      <material-dialog ref="materialTemplateDialog" />
+    </grid-table>
+
     <confirm-dialog
       ref="addDialog"
       title="新增节目"
       @confirm="onConfirmAdd"
     >
       <div class="c-grid-form u-align-self--center">
-        <span class="c-grid-form__label u-required">名称</span>
+        <span class="c-grid-form__label u-required">
+          名称
+        </span>
         <el-input
           v-model.trim="program.name"
           placeholder="最多30个字符"
           maxlength="30"
           clearable
         />
-        <span class="c-grid-form__label">分辨率</span>
+        <span class="c-grid-form__label">
+          分辨率
+        </span>
         <schema-select
           v-model="program.resolutionRatio"
           class="u-width--sm"
@@ -74,7 +112,9 @@
           :schema="resolutionRatioSelectSchema"
           @change="onChangeRatio"
         />
-        <span class="c-grid-form__label u-required">宽</span>
+        <span class="c-grid-form__label u-required">
+          宽
+        </span>
         <div class="l-flex--row c-grid-form__option">
           <el-input-number
             v-model="program.width"
@@ -85,7 +125,9 @@
             :max="999999"
             step-strictly
           />
-          <span class="l-flex--row c-sibling-item far u-required">高</span>
+          <span class="l-flex--row c-sibling-item far u-required">
+            高
+          </span>
           <el-input-number
             v-model="program.height"
             class="l-flex__auto c-sibling-item"
@@ -98,6 +140,7 @@
         </div>
       </div>
     </confirm-dialog>
+    <template-asset-choose-dialog ref="assetChooseDialog" />
   </wrapper>
 </template>
 
@@ -109,14 +152,19 @@ import {
   addProgramDraft,
   deleteProgramDraft,
   copyProgramDraft,
-  copyProgram
+  copyProgram,
+  getProgramTemplate,
+  getTemplateType
 } from '@/api/program'
 import Program from './components/Program.vue'
 import ProgramStore from './components/ProgramStore.vue'
+// import TemperatureConfigDialog from '@/views/realm/settings/components/TemperatureThresholdConfigDialog'
+import TemplateAssetChooseDialog from '@/components/dialog/TemplateAssetChooseDialog'
 
 export default {
   name: 'ProgramDesigner',
   components: {
+    TemplateAssetChooseDialog,
     Program,
     ProgramStore
   },
@@ -135,7 +183,16 @@ export default {
         option: { value: 'custom', label: '自定义' },
         remote: this.getRatios
       },
-      program: {}
+      program: {},
+      templateSchema: {
+        list: getProgramTemplate,
+        filters: [
+          { key: 'resolutionRatio', type: 'select', placeholder: '分辨率', remote: getRatios },
+          { key: 'templateType', type: 'select', placeholder: '模板类型', remote: getTemplateType },
+          { key: 'name', type: 'search', placeholder: '模板名称' },
+          { type: 'refresh' }
+        ]
+      }
     }
   },
   computed: {
@@ -143,6 +200,12 @@ export default {
     isDraft () {
       return this.active === 'draft'
     },
+    isStore () {
+      return this.active === 'store'
+    },
+    isTemplate () {
+      return this.active === 'template'
+    },
     isCustom () {
       return this.program.resolutionRatio === 'custom'
     }
@@ -155,14 +218,15 @@ export default {
   },
   methods: {
     getRatios () {
-      return getRatios().then(({ data }) => {
-        return {
-          data: [
-            { value: 'custom', label: '自定义' },
-            ...data
-          ]
-        }
-      })
+      return getRatios()
+        .then(({ data }) => {
+          return {
+            data: [
+              { value: 'custom', label: '自定义' },
+              ...data
+            ]
+          }
+        })
     },
     onChangeRatio (value) {
       if (value !== 'custom') {
@@ -210,17 +274,18 @@ export default {
       addProgramDraft({
         name,
         resolutionRatio: resolutionRatioValue
-      }).then(({ data: id }) => {
-        done()
-        if (this.isDraft) {
-          this.$refs.table.resetCondition({ resolutionRatio: resolutionRatioValue, name })
-        } else {
-          this.changeToDraft()
-        }
-        setTimeout(() => {
-          this.$designProgram(id)
-        }, 500)
       })
+        .then(({ data: id }) => {
+          done()
+          if (this.isDraft) {
+            this.$refs.table.resetCondition({ resolutionRatio: resolutionRatioValue, name })
+          } else {
+            this.changeToDraft()
+          }
+          setTimeout(() => {
+            this.$designProgram(id)
+          }, 500)
+        })
     },
     onCopyDraft ({ id, name }) {
       this.onCopyConfirm({ draft: true, id, name })
@@ -242,28 +307,40 @@ export default {
           confirmButtonText: '复制',
           cancelButtonText: '取消'
         }
-      ).then(
-        ({ value }) => {
-          (draft ? copyProgramDraft : copyProgram)({
-            id,
-            name: value || name
-          }).then(() => {
-            if (this.isDraft) {
-              this.$refs.table.resetCondition({ name })
-            } else {
-              this.changeToDraft()
-            }
-          })
-        }
       )
+        .then(
+          ({ value }) => {
+            (draft ? copyProgramDraft : copyProgram)({
+              id,
+              name: value || name
+            })
+              .then(() => {
+                if (this.isDraft) {
+                  this.$refs.table.resetCondition({ name })
+                } else {
+                  this.changeToDraft()
+                }
+              })
+          }
+        )
     },
     onDel (draft) {
-      deleteProgramDraft(draft).then(() => {
-        this.$refs.table.decrease(1)
-      })
+      deleteProgramDraft(draft)
+        .then(() => {
+          this.$refs.table.decrease(1)
+        })
     },
     onEdit ({ id }) {
       this.$designProgram(id)
+    },
+    onView ({ id }) {
+      console.log(id)
+      // let idtest = '1856226701478084610'
+      this.$refs.materialTemplateDialog.showProgram(id)
+    },
+    onUse ({ id, name }) {
+      console.log(id, name)
+      this.$refs.assetChooseDialog.show()
     }
   }
 }