cloud-web-corejs 1.0.54-dev.542 → 1.0.54-dev.544

package/src/components/{univer → luckysheet}/dialog.vue

@@ -7,19 +7,18 @@
     :modalAppendToBody="true"
     :closeOnClickModal="false"
     :modal="false"
-    :title="title"
+    :title="options.title || 'excel'"
     custom-class="dialog-style list-dialog dialog-checkbox pd_0"
   >
-    <div class="cont" id="containt" :class="{ nfootBtn: readonly }">
-      <univer
-        ref="univer"
+    <div class="cont" id="containt" :class="{ nfootBtn: options.readonly }">
+      <luckysheet
+        ref="luckysheet"
         :data="json"
-        v-if="showUniver"
-        :readonly="readonly"
-        :options="univerConfig"
-      ></univer>
+        v-if="showLuckysheet"
+        :options="options"
+      ></luckysheet>
     </div>
-    <span slot="footer" class="dialog-footer" v-if="!readonly">
+    <span slot="footer" class="dialog-footer" v-if="!options.readonly">
       <el-button type="primary" plain class="button-sty" @click="close">
         <i class="el-icon-close el-icon"></i>
         {{ $t2("取 消", "system.button.cancel2") }}
@@ -33,23 +32,14 @@
 </template>
 
 <script>
-import univer from "./univerSheet.vue";
+import luckysheet from "./view.vue";
 
 export default {
-  name: "univerDialog",
-  components: { univer },
+  name: "luckysheetDialog",
+  components: { luckysheet },
   props: {
     visiable: Boolean,
-    data: String,
-    title: {
-      type: String,
-      default: "excel",
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    univerConfig: {
+    options: {
       type: Object,
       default: () => {},
     },
@@ -58,8 +48,8 @@ export default {
   data() {
     return {
       showDialog: true,
-      json: {},
-      showUniver: false,
+      json: [],
+      showLuckysheet: false,
     };
   },
   computed: {},
@@ -68,16 +58,21 @@ export default {
   },
   methods: {
     init() {
-      if (this.data) {
+      if (this.options.data) {
         try {
-          this.json = JSON.parse(this.data);
+          let data = JSON.parse(this.options.data);
+          if (Array.isArray(data)) {
+            this.json = data;
+          } else {
+            this.json = [];
+          }
         } catch (error) {
-          this.json = {};
+          this.json = [];
           console.error(error);
         }
       }
       this.$nextTick(() => {
-        this.showUniver = true;
+        this.showLuckysheet = true;
       });
     },
     close() {
@@ -85,11 +80,40 @@ export default {
       this.$emit("update:visiable", false);
     },
     dialogSubmit() {
-      let univerRef = this.$refs.univer;
-      this.$refs.univer.getValue().then((value) => {
-        let result = JSON.stringify(value);
-        this.$emit("confirm", result);
-        this.close();
+      let luckysheetRef = this.$refs.luckysheet;
+      let value = luckysheetRef.getValue();
+      luckysheetRef.generateExcelFile((file) => {
+        this.fileToBase64Async(file).then((base64) => {
+          let response = {
+            data: JSON.stringify(value),
+            json: value,
+            file: file,
+            base64: base64,
+          };
+          let onConfirm = this.options.onConfirm;
+          if (onConfirm && typeof onConfirm === "function") {
+            let result = onConfirm(response, this.close);
+            if (result !== false) {
+              this.close();
+            }
+          } else {
+            this.close();
+          }
+        });
+      });
+    },
+    /**
+     * file 转Base64 DataURL
+     * @param {File} file
+     * @returns
+     */
+    fileToBase64Async(file) {
+      return new Promise((resolve, reject) => {
+        let reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = (e) => {
+          resolve(e.target.result);
+        };
       });
     },
   },

package/src/components/luckysheet/export.js

@@ -0,0 +1,390 @@
+// import { createCellPos } from './translateNumToLetter'
+const Excel = require('exceljs')
+
+import FileSaver from 'file-saver'
+export var testaaa = function (){
+  console.log("...");
+}
+export var exportExcel = function(luckysheet, value) {
+  // 参数为luckysheet.getluckysheetfile()获取的对象
+  // 1.创建工作簿，可以为工作簿添加属性
+  const workbook = new Excel.Workbook()
+  // 2.创建表格，第二个参数可以配置创建什么样的工作表
+  if (Object.prototype.toString.call(luckysheet) === '[object Object]') {
+    luckysheet = [luckysheet]
+  }
+  luckysheet.forEach(function(table) {
+    if (table.data.length === 0) return  true
+    // ws.getCell('B2').fill = fills.
+    const worksheet = workbook.addWorksheet(table.name)
+    const merge = (table.config && table.config.merge) || {}
+    const borderInfo = (table.config && table.config.borderInfo) || {}
+    // 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
+    setStyleAndValue(table.data, worksheet)
+    setMerge(merge, worksheet)
+    setBorder(borderInfo, worksheet)
+    return true
+  })
+
+  // return
+  // 4.写入 buffer
+  const buffer = workbook.xlsx.writeBuffer().then(data => {
+    // console.log('data', data)
+    const blob = new Blob([data], {
+      type: 'application/vnd.ms-excel;charset=utf-8'
+    })
+    console.log("导出成功！")
+    FileSaver.saveAs(blob, `${value}.xlsx`)
+  })
+  return buffer
+}
+
+export var generateExcelBlob = function(luckysheet, fileName) {
+  // 参数为luckysheet.getluckysheetfile()获取的对象，返回Blob对象
+  // 1.创建工作簿，可以为工作簿添加属性
+  const workbook = new Excel.Workbook()
+  // 2.创建表格，第二个参数可以配置创建什么样的工作表
+  if (Object.prototype.toString.call(luckysheet) === '[object Object]') {
+    luckysheet = [luckysheet]
+  }
+  luckysheet.forEach(function(table) {
+    if (table.data.length === 0) return  true
+    const worksheet = workbook.addWorksheet(table.name)
+    const merge = (table.config && table.config.merge) || {}
+    const borderInfo = (table.config && table.config.borderInfo) || {}
+    // 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
+    setStyleAndValue(table.data, worksheet)
+    setMerge(merge, worksheet)
+    setBorder(borderInfo, worksheet)
+    return true
+  })
+
+  // 4.写入 buffer 并返回 Blob 对象
+  return workbook.xlsx.writeBuffer().then(data => {
+    const blob = new Blob([data], {
+      type: 'application/vnd.ms-excel;charset=utf-8'
+    })
+    // 如果提供了文件名，设置文件名属性
+    if (fileName) {
+      blob.name = `${fileName}.xlsx`
+    }
+    return blob
+  })
+}
+
+export var generateExcelFile = function(luckysheet, fileName) {
+  // 参数为luckysheet.getluckysheetfile()获取的对象，返回File对象
+  return generateExcelBlob(luckysheet, fileName).then(blob => {
+    const file = new File([blob], `${fileName || 'export'}.xlsx`, {
+      type: 'application/vnd.ms-excel;charset=utf-8'
+    })
+    return file
+  })
+}
+
+var setMerge = function(luckyMerge = {}, worksheet) {
+  const mergearr = Object.values(luckyMerge)
+  mergearr.forEach(function(elem) {
+    // elem格式：{r: 0, c: 0, rs: 1, cs: 2}
+    // 按开始行，开始列，结束行，结束列合并（相当于 K10:M12）
+    worksheet.mergeCells(
+      elem.r + 1,
+      elem.c + 1,
+      elem.r + elem.rs,
+      elem.c + elem.cs
+    )
+  })
+}
+
+var setBorder = function(luckyBorderInfo, worksheet) {
+  if (!Array.isArray(luckyBorderInfo)) return
+  // console.log('luckyBorderInfo', luckyBorderInfo)
+  luckyBorderInfo.forEach(function(elem) {
+    // 现在只兼容到borderType 为range的情况
+    // console.log('ele', elem)
+    if (elem.rangeType === 'range') {
+      let border = borderConvert(elem.borderType, elem.style, elem.color)
+      let rang = elem.range[0]
+      // console.log('range', rang)
+      let row = rang.row
+      let column = rang.column
+      for (let i = row[0] + 1; i < row[1] + 2; i++) {
+        for (let y = column[0] + 1; y < column[1] + 2; y++) {
+          worksheet.getCell(i, y).border = border
+        }
+      }
+    }
+    if (elem.rangeType === 'cell') {
+      // col_index: 2
+      // row_index: 1
+      // b: {
+      //   color: '#d0d4e3'
+      //   style: 1
+      // }
+      const { col_index, row_index } = elem.value
+      const borderData = Object.assign({}, elem.value)
+      delete borderData.col_index
+      delete borderData.row_index
+      let border = addborderToCell(borderData, row_index, col_index)
+      // console.log('bordre', border, borderData)
+      worksheet.getCell(row_index + 1, col_index + 1).border = border
+    }
+    // console.log(rang.column_focus + 1, rang.row_focus + 1)
+    // worksheet.getCell(rang.row_focus + 1, rang.column_focus + 1).border = border
+  })
+}
+var setStyleAndValue = function(cellArr, worksheet) {
+  if (!Array.isArray(cellArr)) return
+  cellArr.forEach(function(row, rowid) {
+    row.every(function(cell, columnid) {
+      if (!cell) return true
+      let fill = fillConvert(cell.bg)
+
+      let font = fontConvert(
+        cell.ff,
+        cell.fc,
+        cell.bl,
+        cell.it,
+        cell.fs,
+        cell.cl,
+        cell.ul
+      )
+      let alignment = alignmentConvert(cell.vt, cell.ht, cell.tb, cell.tr)
+      let value = ''
+
+      if (cell.f) {
+        value = { formula: cell.f, result: cell.v }
+      } else if (!cell.v && cell.ct && cell.ct.s) {
+        // xls转为xlsx之后，内部存在不同的格式，都会进到富文本里，即值不存在与cell.v，而是存在于cell.ct.s之后
+        // value = cell.ct.s[0].v
+        cell.ct.s.forEach(arr => {
+          value += arr.v
+        })
+      } else {
+        value = cell.v
+      }
+      //  style 填入到_value中可以实现填充色
+      let letter = createCellPos(columnid)
+      let target = worksheet.getCell(letter + (rowid + 1))
+      // console.log('1233', letter + (rowid + 1))
+      for (const key in fill) {
+        target.fill = fill
+        break
+      }
+      target.font = font
+      target.alignment = alignment
+      target.value = value
+
+      return true
+    })
+  })
+}
+
+var fillConvert = function(bg) {
+  if (!bg) {
+    return {}
+  }
+  // const bgc = bg.replace('#', '')
+  let fill = {
+    type: 'pattern',
+    pattern: 'solid',
+    fgColor: { argb: bg.replace('#', '') }
+  }
+  return fill
+}
+
+var fontConvert = function(
+  ff = 0,
+  fc = '#000000',
+  bl = 0,
+  it = 0,
+  fs = 10,
+  cl = 0,
+  ul = 0
+) {
+  // luckysheet：ff(样式), fc(颜色), bl(粗体), it(斜体), fs(大小), cl(删除线), ul(下划线)
+  const luckyToExcel = {
+    0: '微软雅黑',
+    1: '宋体（Song）',
+    2: '黑体（ST Heiti）',
+    3: '楷体（ST Kaiti）',
+    4: '仿宋（ST FangSong）',
+    5: '新宋体（ST Song）',
+    6: '华文新魏',
+    7: '华文行楷',
+    8: '华文隶书',
+    9: 'Arial',
+    10: 'Times New Roman ',
+    11: 'Tahoma ',
+    12: 'Verdana',
+    num2bl: function(num) {
+      return num === 0 ? false : true
+    }
+  }
+  // 出现Bug，导入的时候ff为luckyToExcel的val
+
+  let font = {
+    name: typeof ff === 'number' ? luckyToExcel[ff] : ff,
+    family: 1,
+    size: fs,
+    color: { argb: fc.replace('#', '') },
+    bold: luckyToExcel.num2bl(bl),
+    italic: luckyToExcel.num2bl(it),
+    underline: luckyToExcel.num2bl(ul),
+    strike: luckyToExcel.num2bl(cl)
+  }
+
+  return font
+}
+
+var alignmentConvert = function(
+  vt = 'default',
+  ht = 'default',
+  tb = 'default',
+  tr = 'default'
+) {
+  // luckysheet:vt(垂直), ht(水平), tb(换行), tr(旋转)
+  const luckyToExcel = {
+    vertical: {
+      0: 'middle',
+      1: 'top',
+      2: 'bottom',
+      default: 'top'
+    },
+    horizontal: {
+      0: 'center',
+      1: 'left',
+      2: 'right',
+      default: 'left'
+    },
+    wrapText: {
+      0: false,
+      1: false,
+      2: true,
+      default: false
+    },
+    textRotation: {
+      0: 0,
+      1: 45,
+      2: -45,
+      3: 'vertical',
+      4: 90,
+      5: -90,
+      default: 0
+    }
+  }
+
+  let alignment = {
+    vertical: luckyToExcel.vertical[vt],
+    horizontal: luckyToExcel.horizontal[ht],
+    wrapText: luckyToExcel.wrapText[tb],
+    textRotation: luckyToExcel.textRotation[tr]
+  }
+  return alignment
+}
+
+var borderConvert = function(borderType, style = 1, color = '#000') {
+  // 对应luckysheet的config中borderinfo的的参数
+  if (!borderType) {
+    return {}
+  }
+  const luckyToExcel = {
+    type: {
+      'border-all': 'all',
+      'border-top': 'top',
+      'border-right': 'right',
+      'border-bottom': 'bottom',
+      'border-left': 'left'
+    },
+    style: {
+      0: 'none',
+      1: 'thin',
+      2: 'hair',
+      3: 'dotted',
+      4: 'dashDot', // 'Dashed',
+      5: 'dashDot',
+      6: 'dashDotDot',
+      7: 'double',
+      8: 'medium',
+      9: 'mediumDashed',
+      10: 'mediumDashDot',
+      11: 'mediumDashDotDot',
+      12: 'slantDashDot',
+      13: 'thick'
+    }
+  }
+  let template = {
+    style: luckyToExcel.style[style],
+    color: { argb: color.replace('#', '') }
+  }
+  let border = {}
+  if (luckyToExcel.type[borderType] === 'all') {
+    border['top'] = template
+    border['right'] = template
+    border['bottom'] = template
+    border['left'] = template
+  } else {
+    border[luckyToExcel.type[borderType]] = template
+  }
+  // console.log('border', border)
+  return border
+}
+
+function addborderToCell(borders, row_index, col_index) {
+  let border = {}
+  const luckyExcel = {
+    type: {
+      l: 'left',
+      r: 'right',
+      b: 'bottom',
+      t: 'top'
+    },
+    style: {
+      0: 'none',
+      1: 'thin',
+      2: 'hair',
+      3: 'dotted',
+      4: 'dashDot', // 'Dashed',
+      5: 'dashDot',
+      6: 'dashDotDot',
+      7: 'double',
+      8: 'medium',
+      9: 'mediumDashed',
+      10: 'mediumDashDot',
+      11: 'mediumDashDotDot',
+      12: 'slantDashDot',
+      13: 'thick'
+    }
+  }
+  // console.log('borders', borders)
+  for (const bor in borders) {
+    // console.log(bor)
+    if (borders[bor].color.indexOf('rgb') === -1) {
+      border[luckyExcel.type[bor]] = {
+        style: luckyExcel.style[borders[bor].style],
+        color: { argb: borders[bor].color.replace('#', '') }
+      }
+    } else {
+      border[luckyExcel.type[bor]] = {
+        style: luckyExcel.style[borders[bor].style],
+        color: { argb: borders[bor].color }
+      }
+    }
+  }
+
+  return border
+}
+
+function createCellPos(n) {
+  let ordA = 'A'.charCodeAt(0)
+
+  let ordZ = 'Z'.charCodeAt(0)
+  let len = ordZ - ordA + 1
+  let s = ''
+  while (n >= 0) {
+    s = String.fromCharCode((n % len) + ordA) + s
+
+    n = Math.floor(n / len) - 1
+  }
+  return s
+}

package/src/components/{univer → luckysheet}/index.js

@@ -1,9 +1,6 @@
 import Vue from 'vue';
 import dialogComponent from './dialog.vue';
-
-export { default as univerSheet } from "./univerSheet.vue";
-export { default as asuniverDialog } from "./dialog.vue";
-export { default as asuniverButton } from "./button.vue";
+export {default as luckysheetDialog } from './dialog.vue';
 
 /**
  * 打开univerDialog对话框
@@ -17,15 +14,10 @@ export { default as asuniverButton } from "./button.vue";
  * @param {Function} options.onClose - 关闭回调函数
  * @returns {Object} 对话框实例，包含close方法
  */
-export function openUniverSheetDialog(options = {}) {
+export function openLuckysheetDialog(options = {}) {
+  let visiable = true;
   const {
-    visiable = true,
-    data = '',
-    title = 'excel',
-    readonly = false,
-    onConfirm,
     onClose,
-    univerConfig = {},
   } = options;
 
   // 创建组件实例
@@ -33,10 +25,7 @@ export function openUniverSheetDialog(options = {}) {
   const instance = new DialogConstructor({
     propsData: {
       visiable,
-      data,
-      title,
-      readonly,
-      univerConfig: univerConfig,
+      options: options,
     }
   });
 
@@ -57,18 +46,6 @@ export function openUniverSheetDialog(options = {}) {
     }, 300);
   };
 
-  // 监听确认事件
-  if (onConfirm) {
-    instance.$on('confirm', (result) => {
-      onConfirm(result);
-      // 确认后也需要销毁
-      destroyDialog();
-    });
-  } else {
-    // 如果没有传入onConfirm，也要确保确认后销毁
-    instance.$on('confirm', destroyDialog);
-  }
-
   // 监听关闭事件
   if (onClose) {
     instance.$on('update:visiable', (value) => {