ylyx-cli 1.0.16 → 1.1.1

package/templates/vue-app/files/src/components/UploadExcel/index.vue

@@ -1,149 +1,149 @@
-<template>
-  <div>
-    <input
-      ref="excel-upload-input"
-      class="excel-upload-input"
-      type="file"
-      accept=".xlsx, .xls"
-      @change="handleClick" />
-    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
-      拖拽excel文件到此处 或者
-      <el-button
-        :loading="loading"
-        style="margin-left: 16px"
-        size="mini"
-        type="primary"
-        @click="handleUpload">
-        浏览
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import XLSX from 'xlsx';
-
-export default {
-  props: {
-    beforeUpload: Function, // eslint-disable-line
-    onSuccess: Function, // eslint-disable-line
-  },
-  data() {
-    return {
-      loading: false,
-      excelData: {
-        header: null,
-        results: null,
-      },
-    };
-  },
-  methods: {
-    generateData({ header, results }) {
-      this.excelData.header = header;
-      this.excelData.results = results;
-      this.onSuccess && this.onSuccess(this.excelData);
-    },
-    handleDrop(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      if (this.loading) return;
-      const files = e.dataTransfer.files;
-      if (files.length !== 1) {
-        this.$message.error('只支持单个文件上传!');
-        return;
-      }
-      const rawFile = files[0];
-
-      if (!this.isExcel(rawFile)) {
-        this.$message.error('只支持.xlsx, .xls, .csv 格式文件');
-        return false;
-      }
-      this.upload(rawFile);
-      e.stopPropagation();
-      e.preventDefault();
-    },
-    handleDragover(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      e.dataTransfer.dropEffect = 'copy';
-    },
-    handleUpload() {
-      this.$refs['excel-upload-input'].click();
-    },
-    handleClick(e) {
-      const files = e.target.files;
-      const rawFile = files[0]; // only use files[0]
-      if (!rawFile) return;
-      this.upload(rawFile);
-    },
-    upload(rawFile) {
-      this.$refs['excel-upload-input'].value = null; // fix can't select the same excel
-
-      if (!this.beforeUpload) {
-        this.readerData(rawFile);
-        return;
-      }
-      const before = this.beforeUpload(rawFile);
-      if (before) {
-        this.readerData(rawFile);
-      }
-    },
-    readerData(rawFile) {
-      this.loading = true;
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = e => {
-          const data = e.target.result;
-          const workbook = XLSX.read(data, { type: 'array' });
-          const firstSheetName = workbook.SheetNames[0];
-          const worksheet = workbook.Sheets[firstSheetName];
-          const header = this.getHeaderRow(worksheet);
-          const results = XLSX.utils.sheet_to_json(worksheet);
-          this.generateData({ header, results });
-          this.loading = false;
-          resolve();
-        };
-        reader.readAsArrayBuffer(rawFile);
-      });
-    },
-    getHeaderRow(sheet) {
-      const headers = [];
-      const range = XLSX.utils.decode_range(sheet['!ref']);
-      let C;
-      const R = range.s.r;
-      /* start in the first row */
-      for (C = range.s.c; C <= range.e.c; ++C) {
-        /* walk every column in the range */
-        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
-        /* find the cell in the first row */
-        let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default
-        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
-        headers.push(hdr);
-      }
-      return headers;
-    },
-    isExcel(file) {
-      return /\.(xlsx|xls|csv)$/.test(file.name);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.excel-upload-input {
-  display: none;
-  z-index: -9999;
-}
-.drop {
-  border: 2px dashed #bbb;
-  width: 600px;
-  height: 160px;
-  line-height: 160px;
-  margin: 0 auto;
-  font-size: 24px;
-  border-radius: 5px;
-  text-align: center;
-  color: #bbb;
-  position: relative;
-}
-</style>
+<template>
+  <div>
+    <input
+      ref="excel-upload-input"
+      class="excel-upload-input"
+      type="file"
+      accept=".xlsx, .xls"
+      @change="handleClick" />
+    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
+      拖拽excel文件到此处 或者
+      <el-button
+        :loading="loading"
+        style="margin-left: 16px"
+        size="mini"
+        type="primary"
+        @click="handleUpload">
+        浏览
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import XLSX from 'xlsx';
+
+export default {
+  props: {
+    beforeUpload: Function, // eslint-disable-line
+    onSuccess: Function, // eslint-disable-line
+  },
+  data() {
+    return {
+      loading: false,
+      excelData: {
+        header: null,
+        results: null,
+      },
+    };
+  },
+  methods: {
+    generateData({ header, results }) {
+      this.excelData.header = header;
+      this.excelData.results = results;
+      this.onSuccess && this.onSuccess(this.excelData);
+    },
+    handleDrop(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (this.loading) return;
+      const files = e.dataTransfer.files;
+      if (files.length !== 1) {
+        this.$message.error('只支持单个文件上传!');
+        return;
+      }
+      const rawFile = files[0];
+
+      if (!this.isExcel(rawFile)) {
+        this.$message.error('只支持.xlsx, .xls, .csv 格式文件');
+        return false;
+      }
+      this.upload(rawFile);
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    handleDragover(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy';
+    },
+    handleUpload() {
+      this.$refs['excel-upload-input'].click();
+    },
+    handleClick(e) {
+      const files = e.target.files;
+      const rawFile = files[0]; // only use files[0]
+      if (!rawFile) return;
+      this.upload(rawFile);
+    },
+    upload(rawFile) {
+      this.$refs['excel-upload-input'].value = null; // fix can't select the same excel
+
+      if (!this.beforeUpload) {
+        this.readerData(rawFile);
+        return;
+      }
+      const before = this.beforeUpload(rawFile);
+      if (before) {
+        this.readerData(rawFile);
+      }
+    },
+    readerData(rawFile) {
+      this.loading = true;
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = e => {
+          const data = e.target.result;
+          const workbook = XLSX.read(data, { type: 'array' });
+          const firstSheetName = workbook.SheetNames[0];
+          const worksheet = workbook.Sheets[firstSheetName];
+          const header = this.getHeaderRow(worksheet);
+          const results = XLSX.utils.sheet_to_json(worksheet);
+          this.generateData({ header, results });
+          this.loading = false;
+          resolve();
+        };
+        reader.readAsArrayBuffer(rawFile);
+      });
+    },
+    getHeaderRow(sheet) {
+      const headers = [];
+      const range = XLSX.utils.decode_range(sheet['!ref']);
+      let C;
+      const R = range.s.r;
+      /* start in the first row */
+      for (C = range.s.c; C <= range.e.c; ++C) {
+        /* walk every column in the range */
+        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
+        /* find the cell in the first row */
+        let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
+        headers.push(hdr);
+      }
+      return headers;
+    },
+    isExcel(file) {
+      return /\.(xlsx|xls|csv)$/.test(file.name);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.excel-upload-input {
+  display: none;
+  z-index: -9999;
+}
+.drop {
+  border: 2px dashed #bbb;
+  width: 600px;
+  height: 160px;
+  line-height: 160px;
+  margin: 0 auto;
+  font-size: 24px;
+  border-radius: 5px;
+  text-align: center;
+  color: #bbb;
+  position: relative;
+}
+</style>

package/templates/vue-app/files/src/components/WaterMark/setWaterMark.js

@@ -1,68 +1,68 @@
-import moment from 'moment';
-const initProps = {
-  width: 700, // canvas 的大小
-  height: 550,
-  font: '40px arial,sans-serif', // 如果水印是文字
-  text: '',
-  // img: { // 如果水印是图片
-  //   src: require('@/assets/images/logo-white.png'),
-  //   imgWidth: 200,
-  //   imgHeight: 50
-  // },
-  zIndex: 1, // 水印所在层index
-  devicePixelRatio: 1, // 图像缩放比例
-};
-
-const setMark = (parentDom, waterMarkProp) => {
-  const props = Object.assign({ ...initProps }, { ...waterMarkProp });
-  let dataUrlType = ''; // 转为 base64 的格式
-  let styleSize = props.width / props.devicePixelRatio;
-  const canvas = document.createElement('canvas');
-  let context = canvas.getContext('2d');
-  canvas.width = props.width;
-  canvas.height = props.height;
-  canvas.style.border = '1px solid red';
-  context.translate(props.width / 3, props.height / 2);
-  context.rotate((Math.PI / 180) * -25);
-
-  // 之所以要动态添加一个div，是因为后面界面要监听这个dom元素
-  const div = document.createElement('div');
-  div.style.backgroundSize = `${styleSize}px ${styleSize}px`;
-  div.style.backgroundRepeat = 'repeat';
-  div.style.width = '100%';
-  div.style.height = 'calc(100% - 200px)';
-  div.style.zIndex = props.zIndex;
-  div.style.opacity = '0.3';
-  div.style.position = 'absolute';
-  div.style.top = '200px';
-
-  div.className = 'water-mark-bg';
-
-  if (initProps.img) {
-    let img = new Image();
-    img.src = initProps.img.src;
-    img.style.border = '1px solid #000';
-    const { imgWidth, imgHeight } = props.img;
-    dataUrlType = 'image/png';
-    img.onload = function () {
-      // 如果是图片，要等待图片加载完才可以
-      context.drawImage(img, 0, 0, imgWidth / 2, imgHeight / 2);
-      // context.fillRect(0,0,imgWidth / 2,imgHeight / 2);
-      div.style.backgroundImage = `url("${canvas.toDataURL(dataUrlType)}")`;
-      parentDom.appendChild(div);
-    };
-  } else {
-    context.fillStyle = 'rgba(0, 0, 0, 0.3)';
-    context.font = props.font;
-    context.textAlign = 'center';
-    context.fillText(props.text, props.width / 3, 0);
-    if (props.showTime && props.text != '') {
-      context.fillStyle = 'rgba(0, 0, 0, 0.3)';
-      context.fillText(moment().format('YYYY-MM-DD HH:mm:ss'), props.width / 3, 50);
-    }
-    context.textBaseline = 'middle';
-    div.style.backgroundImage = `url("${canvas.toDataURL(dataUrlType)}")`;
-    parentDom.appendChild(div);
-  }
-};
-export { setMark };
+import moment from 'moment';
+const initProps = {
+  width: 700, // canvas 的大小
+  height: 550,
+  font: '40px arial,sans-serif', // 如果水印是文字
+  text: '',
+  // img: { // 如果水印是图片
+  //   src: require('@/assets/images/logo-white.png'),
+  //   imgWidth: 200,
+  //   imgHeight: 50
+  // },
+  zIndex: 1, // 水印所在层index
+  devicePixelRatio: 1, // 图像缩放比例
+};
+
+const setMark = (parentDom, waterMarkProp) => {
+  const props = Object.assign({ ...initProps }, { ...waterMarkProp });
+  let dataUrlType = ''; // 转为 base64 的格式
+  let styleSize = props.width / props.devicePixelRatio;
+  const canvas = document.createElement('canvas');
+  let context = canvas.getContext('2d');
+  canvas.width = props.width;
+  canvas.height = props.height;
+  canvas.style.border = '1px solid red';
+  context.translate(props.width / 3, props.height / 2);
+  context.rotate((Math.PI / 180) * -25);
+
+  // 之所以要动态添加一个div，是因为后面界面要监听这个dom元素
+  const div = document.createElement('div');
+  div.style.backgroundSize = `${styleSize}px ${styleSize}px`;
+  div.style.backgroundRepeat = 'repeat';
+  div.style.width = '100%';
+  div.style.height = 'calc(100% - 200px)';
+  div.style.zIndex = props.zIndex;
+  div.style.opacity = '0.3';
+  div.style.position = 'absolute';
+  div.style.top = '200px';
+
+  div.className = 'water-mark-bg';
+
+  if (initProps.img) {
+    let img = new Image();
+    img.src = initProps.img.src;
+    img.style.border = '1px solid #000';
+    const { imgWidth, imgHeight } = props.img;
+    dataUrlType = 'image/png';
+    img.onload = function () {
+      // 如果是图片，要等待图片加载完才可以
+      context.drawImage(img, 0, 0, imgWidth / 2, imgHeight / 2);
+      // context.fillRect(0,0,imgWidth / 2,imgHeight / 2);
+      div.style.backgroundImage = `url("${canvas.toDataURL(dataUrlType)}")`;
+      parentDom.appendChild(div);
+    };
+  } else {
+    context.fillStyle = 'rgba(0, 0, 0, 0.3)';
+    context.font = props.font;
+    context.textAlign = 'center';
+    context.fillText(props.text, props.width / 3, 0);
+    if (props.showTime && props.text != '') {
+      context.fillStyle = 'rgba(0, 0, 0, 0.3)';
+      context.fillText(moment().format('YYYY-MM-DD HH:mm:ss'), props.width / 3, 50);
+    }
+    context.textBaseline = 'middle';
+    div.style.backgroundImage = `url("${canvas.toDataURL(dataUrlType)}")`;
+    parentDom.appendChild(div);
+  }
+};
+export { setMark };

package/templates/vue-app/files/src/components/WaterMark/waterMark.vue

@@ -1,69 +1,69 @@
-<template>
-  <div class="water-box" ref="waterMarkRef">
-    <slot></slot>
-  </div>
-</template>
-<script>
-import { setMark } from './setWaterMark';
-export default {
-  props: {
-    waterMarkProp: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {};
-  },
-
-  watch: {
-    waterMarkProp: {
-      handler(newVlaue) {
-        this.waterMarkRefFn();
-      },
-      deep: true,
-    },
-  },
-
-  updated() {},
-  mounted() {
-    setTimeout(() => {
-      this.waterMarkRefFn();
-    }, 0);
-  },
-
-  methods: {
-    waterMarkRefFn() {
-      const waterMarkRef = this.$refs.waterMarkRef;
-      setMark(waterMarkRef, this.waterMarkProp);
-      var MutationObserver =
-        window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
-      let ob = new MutationObserver(function (mutationRecoards, observer) {
-        // observer 观察者实例
-        mutationRecoards.forEach(record => {
-          (record.removedNodes || []).forEach(element => {
-            if (element.className === 'water-mark-bg') {
-              setMark(waterMarkRef);
-            }
-          });
-        });
-      });
-      ob.observe(this.$refs.waterMarkRef, {
-        cattributes: true,
-        childList: true,
-        subtree: true,
-      });
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.water-box {
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  z-index: 9999;
-}
-</style>
+<template>
+  <div class="water-box" ref="waterMarkRef">
+    <slot></slot>
+  </div>
+</template>
+<script>
+import { setMark } from './setWaterMark';
+export default {
+  props: {
+    waterMarkProp: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+
+  watch: {
+    waterMarkProp: {
+      handler(newVlaue) {
+        this.waterMarkRefFn();
+      },
+      deep: true,
+    },
+  },
+
+  updated() {},
+  mounted() {
+    setTimeout(() => {
+      this.waterMarkRefFn();
+    }, 0);
+  },
+
+  methods: {
+    waterMarkRefFn() {
+      const waterMarkRef = this.$refs.waterMarkRef;
+      setMark(waterMarkRef, this.waterMarkProp);
+      var MutationObserver =
+        window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+      let ob = new MutationObserver(function (mutationRecoards, observer) {
+        // observer 观察者实例
+        mutationRecoards.forEach(record => {
+          (record.removedNodes || []).forEach(element => {
+            if (element.className === 'water-mark-bg') {
+              setMark(waterMarkRef);
+            }
+          });
+        });
+      });
+      ob.observe(this.$refs.waterMarkRef, {
+        cattributes: true,
+        childList: true,
+        subtree: true,
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.water-box {
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 9999;
+}
+</style>

package/templates/vue-app/files/src/components/Xgplayer/index.vue

@@ -1,49 +1,49 @@
-<template>
-  <player :config="config" @player="Player = $event" />
-</template>
-
-<script>
-import player from 'xgplayer-vue';
-export default {
-  name: 'Xgplayer',
-  components: {
-    player,
-  },
-  props: {
-    option: {
-      url: {
-        type: String,
-        required: true,
-      },
-      id: {
-        type: String,
-        required: true,
-      },
-    },
-  },
-  data() {
-    return {
-      defaultConfig: {
-        autoplay: true,
-        volume: 0.3,
-        playsinline: true,
-        height: '100%',
-        width: '100%',
-        whitelist: [''],
-      },
-      Player: null,
-    };
-  },
-  computed: {
-    config() {
-      return Object.assign(this.defaultConfig, this.option);
-    },
-  },
-};
-</script>
-
-<style>
-.xgplayer-skin-default .xgplayer-poster {
-  background-position: 50% 100% !important;
-}
-</style>
+<template>
+  <player :config="config" @player="Player = $event" />
+</template>
+
+<script>
+import player from 'xgplayer-vue';
+export default {
+  name: 'Xgplayer',
+  components: {
+    player,
+  },
+  props: {
+    option: {
+      url: {
+        type: String,
+        required: true,
+      },
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+  },
+  data() {
+    return {
+      defaultConfig: {
+        autoplay: true,
+        volume: 0.3,
+        playsinline: true,
+        height: '100%',
+        width: '100%',
+        whitelist: [''],
+      },
+      Player: null,
+    };
+  },
+  computed: {
+    config() {
+      return Object.assign(this.defaultConfig, this.option);
+    },
+  },
+};
+</script>
+
+<style>
+.xgplayer-skin-default .xgplayer-poster {
+  background-position: 50% 100% !important;
+}
+</style>