emacroh5lib 1.0.2 → 1.0.3

package/src/views/TestView/index.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="app-container">
+
+    <button @click="handleOpen">打开查看器</button>
+    <button @click="exportExcel($event)">透过Excel模板导出表格</button>
+
+    <image-viewer :list="srcList" @open="openCallback" @close="closeCallback" :show.sync="showViewer"
+      :currentIndex="currentIndex" />
+
+
+    <div class="list" id="list">
+
+      <DragResizeView v-for="(rect, index) in rects" :key="index" :isStorage="true" :name="rect.name" :w="rect.width" :h="rect.height"
+        :x="rect.left" :y="rect.top" :parentW="listWidth" :parentH="listHeight" :axis="rect.axis"
+        :isActive="rect.active" :minw="rect.minw" :minh="rect.minh" :isDraggable="rect.draggable"
+        :isResizable="rect.resizable" :parentLimitation="rect.parentLim" :snapToGrid="rect.snapToGrid"
+        :aspectRatio="rect.aspectRatio" :z="rect.zIndex" :contentClass="rect.class" v-on:activated="activateEv(index)"
+        v-on:deactivated="deactivateEv(index)" v-on:dragging="changePosition($event, index)"
+        v-on:resizing="changeSize($event, index)">
+        <div class="filler" :style="{ backgroundColor: rect.color }"></div>
+      </DragResizeView>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import ImageViewer from "@/views/ImageViewer/index.vue";
+import DragResizeView from "@/views/DragResizeView/index.vue";
+
+import { formatJson, export_json_to_excel, number_to_excel, testToExcel } from "./Export2Excel"
+
+
+
+import LAY_EXCEL from 'lay-excel';
+
+@Component({
+  components: {
+    ImageViewer,
+    DragResizeView
+  },
+  mounted() {
+
+  }
+})
+export default class TestView extends Vue {
+
+  public currentIndex: Number = 0; // 打开图片查看器时，需要定位到的图片的索引
+  public srcList: Array<String> = [
+    "https://scpic.chinaz.net/files/pic/pic9/202203/apic39703.jpg",
+    "https://scpic.chinaz.net/files/pic/pic9/202005/zzpic24899.jpg",
+    "https://scpic.chinaz.net/files/pic/pic9/202109/bpic24244.jpg",
+    "https://scpic.chinaz.net/files/pic/pic9/202110/hpic4529.jpg",
+    "https://scpic.chinaz.net/files/pic/pic9/201912/zzpic22106.jpg",
+    "https://scpic.chinaz.net/files/pic/pic9/202202/apic38580.jpg",
+  ] // 图片查看器数据集
+  public showViewer: Boolean = false // 是否打开图片查看器
+
+  public listWidth = 0;
+  public listHeight = 0;
+
+  public handleOpen() {
+    this.showViewer = true;
+  }
+  public openCallback() { } // 打开时的回调
+  public closeCallback() { } // 关闭时的回调
+
+  public rects = [
+    {
+      'name': "test-0",
+      'width': 200,
+      'height': 150,
+      'top': 10,
+      'left': 10,
+      'draggable': true,
+      'resizable': true,
+      'minw': 10,
+      'minh': 10,
+      'axis': 'both',
+      'parentLim': true,
+      'snapToGrid': false,
+      'aspectRatio': false,
+      'zIndex': 1,
+      'color': '#EF9A9A',
+      'active': false
+    },
+    {
+      'name': "test-1",
+      'width': 200,
+      'height': 150,
+      'top': 170,
+      'left': 220,
+      'draggable': true,
+      'resizable': true,
+      'minw': 10,
+      'minh': 10,
+      'axis': 'both',
+      'parentLim': true,
+      'snapToGrid': false,
+      'aspectRatio': false,
+      'zIndex': 1,
+      'color': '#E6C27A',
+      'active': false,
+      'class': 'box-shaddow'
+    },
+    {
+      'name': "test-2",
+      'width': 200,
+      'height': 150,
+      'top': 10,
+      'left': 220,
+      'draggable': true,
+      'resizable': true,
+      'minw': 10,
+      'minh': 10,
+      'axis': 'both',
+      'parentLim': true,
+      'snapToGrid': false,
+      'aspectRatio': false,
+      'zIndex': 2,
+      'color': '#AED581',
+      'active': false
+    },
+    {
+      'name': "test-3",
+      'width': 200,
+      'height': 150,
+      'top': 170,
+      'left': 10,
+      'draggable': true,
+      'resizable': true,
+      'minw': 10,
+      'minh': 10,
+      'axis': 'both',
+      'parentLim': true,
+      'snapToGrid': false,
+      'aspectRatio': false,
+      'zIndex': 3,
+      'color': '#81D4FA',
+      'active': false
+    }
+  ]
+
+  public exportExcel(e): void {
+    console.log('event', e);
+
+    // testToExcel(e)
+    // LAY_EXCEL.exportExcel([[1, 2, 3]], '表格导出.xlsx', 'xlsx')
+
+
+    // var list = [[null,1, 2, 3], [null,1, 2, "a撒地方打赏打发士大夫"]]
+    var list = {
+      "aaa1撒旦飞洒": [
+        [null, 1, 2, 3]
+      ],
+      "bbb1": [
+        [2, 1, 2, null]
+      ]
+    }
+
+    // 2. 使用批量设置样式函数 setExportCellStyle 对单元格维度的数据进行批量设置样式
+    // PS:注意这里是ARGB，前两位是透明度
+    LAY_EXCEL.setExportCellStyle(list, 'A1:Z1', {
+      s: {
+        border: {
+          top: { style: 'thick', color: { rgb: 'FFFF0000' } },
+          bottom: { style: 'thick', color: { rgb: 'FFFF0000' } },
+          left: { style: 'thick', color: { rgb: 'FFFF0000' } },
+          right: { style: 'thick', color: { rgb: 'FFFF0000' } }
+        },
+        fill: {
+          fgColor: {
+            rgb: "ffff00"
+          }
+        },
+        font: {
+          name: "楷体",
+          sz: 22,
+          color: {
+            rgb: "ff0000"
+          },
+          bold: true,
+          italic: false,
+          underline: false
+        },
+      }
+    })
+
+
+    LAY_EXCEL.exportExcel(list, '表格导出.xlsx', 'xlsx')
+  }
+
+  activateEv(index) {
+    console.log("activateEv index", index);
+  }
+
+  deactivateEv(index) {
+    console.log("deactivateEv index", index);
+  }
+
+  changePosition(newRect, index) {
+    console.log("changePosition newRect", newRect);
+    console.log("changePosition index", index);
+  }
+
+  changeSize(newRect, index) {
+    console.log("changeSize newRect", newRect);
+    console.log("changeSize index", index);
+  }
+
+  public mounted() {
+    const listEl = document.getElementById('list') as HTMLElement;
+    this.listWidth = listEl.clientWidth;
+    this.listHeight = listEl.clientHeight;
+
+    window.addEventListener('resize', () => {
+      // this.listWidth = listEl.clientWidth;
+      // this.listHeight = listEl.clientHeight;
+    })
+  }
+
+
+}
+</script>
+
+<style lang="less" scoped>
+@import "index.less";
+</style>