初始化

frontend/packages/TemplateList/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <div
+    v-loading="loading || innerLoading"
+    class="template-list-wrap"
+  >
+    <div
+      v-if="hasCreate"
+      class="template-item"
+      @click="addNew"
+    >
+      <div
+        class="iconfont-div"
+      >
+        <i class="iconfont el-icon-plus" />
+      </div>
+      <div
+        class="name"
+      >
+        从空白新建
+      </div>
+    </div>
+    <div
+      v-for="template in templateList"
+      :key="template.id"
+      class="template-item template-choose-item"
+    >
+      <div
+        class="thumbnail"
+      >
+        <el-image
+          :ref="'img' + template.id"
+          :src="template.thumbnail"
+          :preview-src-list="[template.thumbnail]"
+        />
+
+        <span class="template-list-item-actions">
+          <i
+            class="el-icon-zoom-in"
+            @click="preview(template.id)"
+          />
+          <i
+            class="el-icon-edit-outline"
+            @click="useIt(template.id)"
+          />
+        </span>
+      </div>
+      <div class="name">
+        {{ template.name }}
+      </div>
+    </div>
+    <el-empty
+      v-if="!templateList.length && !hasCreate"
+      description="暂无模板"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TemplateList',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    hasCreate: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    pageInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      innerLoading: false,
+      templateList: [],
+      type: null, // 类型
+      isInDesign: false // 是否在设计页面
+    }
+  },
+  methods: {
+    init (type, isInDesign) {
+      this.isInDesign = isInDesign
+      this.type = type
+      this.getTemplateList(type)
+    },
+    // 得到模板列表
+    getTemplateList (type) {
+      this.type = type
+      this.$dataRoomAxios.get('/bigScreen/template/list', {
+        type
+      }).then((list) => {
+        this.templateList = list
+      })
+    },
+    // 从空白新建
+    addNew () {
+      this.$emit('addNew')
+    },
+    // 预览
+    preview (id) {
+      // 触发el-image的点击事件
+      this.$refs['img' + id][0].showViewer = true
+    },
+    // 使用它作为模版
+    useIt (id) {
+      if (this.hasCreate) {
+        this.$emit('useIt', id)
+      } else {
+        this.$confirm('使用该模板将会覆盖当前页面的所有内容，是否继续？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          customClass: 'bs-el-message-box'
+        }).then(() => {
+          const className = this.type === 'com.gccloud.dataroom.core.module.manage.dto.DataRoomPageDTO'
+          this.innerLoading = true
+          this.$dataRoomAxios.post(`/bigScreen/${this.type}/design/get/template`, {
+            pageTemplateId: id,
+            name: this.pageInfo.name,
+            code: this.pageInfo.code,
+            id: this.pageInfo.id,
+            className
+          }).then(res => {
+            this.$emit('replaceItByTemplate', res)
+          }).finally(() => {
+            this.innerLoading = false
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.template-list-wrap {
+   display: grid;
+  // 不固定列
+  grid-template-columns: repeat(auto-fill, 140px);
+  grid-gap: 20px;
+  justify-content: center;
+
+  .template-item {
+    cursor: pointer;
+    margin-right: 20px;
+
+    .iconfont-div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 140px;
+      width: 140px;
+      border: 1px solid #e5e5e5;
+      color: #999999;
+
+      .iconfont {
+        font-size: 40px;
+      }
+    }
+
+    .thumbnail {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 140px;
+      width: 140px;
+      background: #f2f2f2;
+      position: relative;
+
+      .template-list-item-actions {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        cursor: default;
+        text-align: center;
+        color: #fff;
+        opacity: 0;
+        font-size: 20px;
+        background-color: rgba(0,0,0,.5);
+        transition: opacity .3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        i {
+          margin: 0 10px;
+        }
+      }
+      &:hover {
+        .template-list-item-actions {
+          opacity: 1;
+        }
+      }
+    }
+
+    .thumbnail img {
+      width: 100%;
+    }
+
+    .name {
+      margin-top: 10px;
+      text-align: center;
+    }
+  }
+
+  // 移动上去显示遮罩层预览和使用
+
+  .template-choose-item {
+
+  }
+}
+
+</style>