gcs-ui-lib 1.0.1

package/src/utils/directive/vtitle.js

@@ -0,0 +1,140 @@
+let tooltip = undefined
+import getWidth from './asciiWidth.js'
+const popClass = 'at-title-pop-' + Date.now()
+
+function tipInit(Vue) {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+
+  tooltip = new Vue({
+    data() {
+      return {
+        visible: false
+      }
+    },
+    render(_h) {
+      var _vm = this
+      return _h(
+        'el-popover',
+        {
+          ref: 'title-pop',
+          attrs: {
+            value: _vm.visible,
+            trigger: 'manual',
+            placement: 'top',
+            'popper-class': 'n20-title-pop',
+          },
+          on: {
+            input(v) {
+              _vm.visible = v
+            }
+          }
+        },
+        [_h('span', { staticClass: popClass })]
+      )
+    }
+  }).$mount(el)
+}
+
+function tipShow(el, arg) {
+  let text = undefined
+  if (el.$tooltipTitle) {
+    if (!el.$tooltipTitleOverflow || el.clientWidth < el.scrollWidth) {
+      text = el.$tooltipTitle
+    }
+  } else {
+    let _input = el.querySelector('.el-input__inner')
+    if (_input && _input.clientWidth < _input.scrollWidth) {
+      text = _input.value
+    }
+  }
+
+  if (text) {
+    let popEl = document.querySelector('.' + popClass)
+    if (arg === 'br') {
+      popEl.innerText = String(text).replace(/,/g, '\n')
+    } else {
+      popEl.innerText = text
+    }
+
+    if (tooltip.$refs['title-pop'].referenceElm !== el) {
+      tooltip.$refs['title-pop'].doDestroy()
+      tooltip.$refs['title-pop'].referenceElm = el
+    }
+
+    tooltip.visible = true
+  }
+}
+
+function tipHide(el) {
+  if (tooltip.$refs['title-pop'].referenceElm === el) {
+    tooltip.visible = false
+  }
+}
+
+const TitleDirective = {}
+TitleDirective.install = (Vue) => {
+  if (Vue.prototype.$isServer) return
+  Vue.directive('title', {
+    bind: function (el, binding, vnode) {
+      tooltip || tipInit(Vue)
+
+      el.$tooltipTitleOverflow = vnode.data.attrs && vnode.data.attrs['show-overflow-tooltip']
+      el.$tooltipTitle = binding.value
+
+      let vmethods = vnode.child ? vnode.child.$options : vnode.context.$options
+      vmethods.deactivated || (vmethods.deactivated = [])
+
+      vmethods.deactivated.push(tipHide.bind(null, el))
+      el.$tipShow = () => tipShow(el, binding.arg)
+      el.$tipHide = () => tipHide(el)
+      el.addEventListener('mouseenter', el.$tipShow)
+      el.addEventListener('mouseleave', el.$tipHide)
+    },
+    update: function (el, binding) {
+      el.$tooltipTitle = binding.value
+    },
+    unbind: function (el, binding) {
+      tipHide(el)
+      el.removeEventListener('mouseenter', el.$tipShow)
+      el.removeEventListener('mouseleave', el.$tipHide)
+    }
+  })
+}
+
+const HoverTooltip = {}
+HoverTooltip.install = (Vue) => {
+  if (Vue.prototype.$isServer) return
+  Vue.directive('hover-tooltip', {
+    bind(el, binding, vnode) {
+      tooltip || tipInit(Vue)
+
+      el.$tooltipTitle = binding.value
+
+      let vmethods = vnode.child ? vnode.child.$options : vnode.context.$options
+      vmethods.deactivated || (vmethods.deactivated = [])
+
+      vmethods.deactivated.push(tipHide.bind(null, el))
+      el.$tipShow = () => tipShow(el, binding.arg)
+      el.$tipHide = () => tipHide(el)
+      el.addEventListener('mouseenter', () => {
+        console.log(getWidth(binding.value))
+        if (getWidth(binding.value) > (binding.arg || 98)) {
+          return el.$tipShow()
+        }
+      })
+
+      el.addEventListener('mouseleave', el.$tipHide)
+    },
+    update: function (el, binding) {
+      el.$tooltipTitle = binding.value
+    },
+    unbind: function (el, binding) {
+      tipHide(el)
+      el.removeEventListener('mouseenter', el.$tipShow)
+      el.removeEventListener('mouseleave', el.$tipHide)
+    }
+  })
+}
+
+export { TitleDirective, HoverTooltip }

package/src/utils/excel.js

@@ -0,0 +1,538 @@
+
+import XLSX from "xlsx";
+//引入xlsx
+/**
+ * 导入excel的函数
+ * @param {*} file 
+ */
+const importsExcel = (file) => {
+    //使用promise导入
+    return new Promise((resolve, reject) => {
+        // 获取上传的文件对象
+        const { files } = file.target; //获取里面的所有文件
+        // 通过FileReader对象读取文件
+        const fileReader = new FileReader();
+
+        fileReader.onload = event => { //异步操作  excel文件加载完成以后触发
+            try {
+                const { result } = event.target;
+                // 以二进制流方式读取得到整份excel表格对象
+                const workbook = XLSX.read(result, { type: 'binary' });
+                let data = []; // 存储获取到的数据
+                // 遍历每张工作表进行读取（这里默认只读取第一张表）
+                for (const sheet in workbook.Sheets) {
+                    if (workbook.Sheets.hasOwnProperty(sheet)) {
+                        data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
+                    }
+                }
+                resolve(data);//导出数据
+            } catch (e) {
+                // 这里可以抛出文件类型错误不正确的相关提示
+                reject("失败");//导出失败
+            }
+        };
+        // 以二进制方式打开文件
+        fileReader.readAsBinaryString(files[0]);
+    })
+
+}
+/**
+ * 导出excel
+ * @param {*} headers 
+ * @param {*} data 
+ * @param {*} fileName 
+ */
+const exportExcel = (headers, data, fileName = 'demo.xlsx') => {
+
+    const _headers = headers
+        .map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 }))
+        .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {});
+    const _data = data
+        .map((item, i) => headers.map((key, j) => Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) })))
+        // 对刚才的结果进行降维处理（二维数组变成一维数组）
+        .reduce((prev, next) => prev.concat(next))
+        // 转换成 worksheet 需要的结构
+        .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {});
+
+    // 合并 headers 和 data
+    const output = Object.assign({}, _headers, _data);
+    // 获取所有单元格的位置
+    const outputPos = Object.keys(output);
+    // 计算出范围 ,["A1",..., "H2"]
+    const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;
+
+    // 构建 workbook 对象
+    const wb = {
+        SheetNames: ['mySheet'],
+        Sheets: {
+            mySheet: Object.assign(
+                {},
+                output,
+                {
+                    '!ref': ref,
+                    '!cols': [{ wpx: 45 }, { wpx: 100 }, { wpx: 200 }, { wpx: 80 }, { wpx: 150 }, { wpx: 100 }, { wpx: 300 }, { wpx: 300 }],
+                },
+            ),
+        },
+    };
+
+    // 导出 Excel
+    XLSX.writeFile(wb, fileName);
+
+}
+
+const exportToExcel = currName => {
+    console.log(document.querySelector(`#table${currName}`), window.saveAs);
+    let fix = document.querySelector(`#table${currName} .el-table__fixed`);
+    let workbook = XLSX.utils.book_new();
+    // let tableSheet = XLSX.utils.table_to_sheet(document.querySelector(`#table${currName}`));
+    let tableSheet = null
+    if (fix) {
+        tableSheet = XLSX.utils.table_to_sheet(document.querySelector(`#table${currName}`).removeChild(fix));
+        document.querySelector(`#table${currName}`).appendChild(fix);
+    } else {
+        tableSheet = XLSX.utils.table_to_sheet(document.querySelector(`#table${currName}`));
+    }
+    XLSX.utils.book_append_sheet(workbook, tableSheet, currName)
+    let wbOut = XLSX.write(workbook, {
+        bookType: 'xlsx',
+        bookSST: true,
+        type: 'array'
+    })
+    try {
+        // window.saveAs(
+        //     new Blob([wbOut],{type:'application/octet-stream'}),
+        //     'demo.xlsx'
+        // )
+        XLSX.writeFile(workbook, 'demo.xlsx');
+    } catch (error) {
+        console.log(error, wbOut);
+    }
+}
+/**
+ * 导出多sheet表格
+ * @param { Object} headers {label: '表头的中文名称'， prop： ‘表格的英文名称’} 
+ * @param { Object } data  
+ * data数据示例
+ * {
+ * sheet: [],
+ * sheet1: [],
+ * sheet2: []
+ * }
+ */
+const exportToMulExcel = (headers, data, mergess) => {
+    let workbook = XLSX.utils.book_new();
+    let headerMap = {};
+    // let headerRows = excelHeader.length;
+    let excelHeader = buildHeader(headers);
+    let merges = doMerges(excelHeader)
+    headers.forEach(item => {
+        headerMap[item.prop] = item.label;
+    })
+    console.log(excelHeader, merges);
+    // let ws = aoa_to_sheet(headers, headers.length);
+    // ws['!merges'] = merges;
+    // merges.forEach(item => {
+    //     ws['!merges'].push(XLSX.utils.decode_range(item))
+    // })
+    for (let key in data) {
+        let tableSheet = [];
+        let dataList = [];
+        if (data[key].length > 0) {
+            dataList = extractData(data[key], headers);
+        } else {
+            dataList = [];
+        }
+        console.log(dataList);
+        dataList = dataList.map(item => {
+            return item.map(item2 => {
+            return isNaN(item2) || item2 == null  ? item2 : parseFloat(item2).toFixed(2)
+        })
+        return 
+        })
+        var sheet = XLSX.utils.aoa_to_sheet(excelHeader.concat(dataList));
+        sheet['!merges'] = merges
+        XLSX.utils.book_append_sheet(workbook, sheet, key);
+
+    }
+    let wbOut = XLSX.write(workbook, {
+        bookType: 'xlsx',
+        bookSST: true,
+        type: 'array'
+    })
+    try {
+        console.log(workbook)
+        XLSX.writeFile(workbook, 'demo.xlsx');
+    } catch (error) {
+        console.log(error, wbOut);
+    }
+}
+const flat = (revealList) => {
+    let result = []
+    revealList.forEach(e => {
+    if (e.children?.length > 0) {
+        result.push(...flat(e.children))
+    } else if (e.hasOwnProperty('prop')) {
+        result.push(e)
+    }
+    })
+    return result;
+}
+const extractData = (selectionData, revealList) => {
+    // 列
+    let headerList = flat(revealList);
+    // 导出的结果集
+    let excelRows = [];
+    // 如果有child集合的话会用到
+    let dataKeys = new Set(Object.keys(selectionData[0]));
+    selectionData.some(e => {
+    if (e.children && e.children.length > 0) {
+        let childKeys = Object.keys(e.children[0]);
+        for (let i = 0; i < childKeys.length; i++) {
+        dataKeys.delete(childKeys[i]);
+        }
+        return true;
+    }
+    })
+    flatData(selectionData, (list) => {
+    excelRows.push(...buildExcelRow(dataKeys, headerList, list));
+    })
+    return excelRows;
+}
+const buildExcelRow = (mainKeys, headers, rawDataList) => {
+    // 合计行
+    let sumCols = [];
+    // 数据行
+    let rows = [];
+    for (let i = 0; i < rawDataList.length; i++) {
+        let cols = []
+        let rawData = rawDataList[i];
+        // 提取数据
+        for (let j = 0; j < headers.length; j++) {
+        let header = headers[j];
+        // 父元素键需要行合并
+        if (rawData['rowSpan'] === 0 && mainKeys.has(header.prop)) {
+            cols.push('!$ROW_SPAN_PLACEHOLDER')
+        } else {
+            let value;
+            value = rawData[header.prop];
+            cols.push(value)
+            // 如果该列需要合计,并且是数字类型
+            if (header['summable'] && typeof value === 'number') {
+            sumCols[j] = (sumCols[j] ? sumCols[j] : 0) + value;
+            }
+        }
+        }
+        rows.push(cols);
+    }
+    return rows;
+}
+const flatData = (list, eachDataCallBack) => {
+    let resultList = [];
+    for (let i = 0; i < list.length; i++) {
+    let data = list[i];
+    let rawDataList = [];
+    // 每个子元素都和父元素合并成一条数据
+    if (data.children && data.children.length > 0) {
+        for (let j = 0; j < data.children.length; j++) {
+        delete data.children[j].bsm
+        let copy = Object.assign({}, data, data.children[j]);
+        rawDataList.push(copy);
+        copy['rowSpan'] = (j > 0 ? 0 : data.children.length);
+        }
+    } else {
+        data['rowSpan'] = 1;
+        rawDataList.push(data);
+    }
+    resultList.push(...rawDataList);
+    if (typeof eachDataCallBack === 'function') {
+        eachDataCallBack(rawDataList)
+    }
+    }
+    return resultList;
+}
+const aoa_to_sheet = (data, headerRows) => {
+    const ws = {};
+    const range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } };
+    for (let R = 0; R !== data.length; ++R) {
+    for (let C = 0; C !== data[R].length; ++C) {
+        if (range.s.r > R) {
+        range.s.r = R;
+        }
+        if (range.s.c > C) {
+        range.s.c = C;
+        }
+        if (range.e.r < R) {
+        range.e.r = R;
+        }
+        if (range.e.c < C) {
+        range.e.c = C;
+        }
+        /// 这里生成cell的时候，使用上面定义的默认样式
+        const cell = {
+        v: data[R][C] || '',
+        s: {
+            font: { name: "宋体", sz: 11, color: { auto: 1 } },
+            alignment: {
+            /// 自动换行
+            wrapText: 1,
+            // 居中
+            horizontal: "center",
+            vertical: "center",
+            indent: 0
+            }
+        }
+        };
+        // 头部列表加边框
+        if (R < headerRows) {
+        cell.s.border = {
+            top: { style: 'thin', color: { rgb: "000000" } },
+            left: { style: 'thin', color: { rgb: "000000" } },
+            bottom: { style: 'thin', color: { rgb: "000000" } },
+            right: { style: 'thin', color: { rgb: "000000" } },
+        };
+        cell.s.fill = {
+            patternType: 'solid',
+            fgColor: { theme: 3, "tint": 0.3999755851924192, rgb: 'DDD9C4' },
+            bgColor: { theme: 7, "tint": 0.3999755851924192, rgb: '8064A2' }
+        }
+        }
+        const cell_ref = XLSX.utils.encode_cell({ c: C, r: R });
+        if (typeof cell.v === 'number') {
+        cell.t = 'n';
+        } else if (typeof cell.v === 'boolean') {
+        cell.t = 'b';
+        } else {
+        cell.t = 's';
+        }
+        ws[cell_ref] = cell;
+    }
+    }
+    if (range.s.c < 10000000) {
+    ws['!ref'] = XLSX.utils.encode_range(range);
+    }
+    return ws;
+}
+const pushRowSpanPlaceHolder = (arr, count) => {
+    for (let i = 0; i < count; i++) {
+    arr.push('!$ROW_SPAN_PLACEHOLDER')
+    }
+}
+const pushColSpanPlaceHolder = (arr, count) => {
+    for (let i = 0; i < count; i++) {
+    arr.push('!$COL_SPAN_PLACEHOLDER')
+    }
+}
+const buildHeader = (revealList) => {
+    let excelHeader = [];
+    // 构建生成excel表头需要的数据结构
+    getHeader(revealList, excelHeader, 0, 0);
+    // 多行表头长短不一，短的向长的看齐，不够的补上行合并占位符
+    let max = Math.max(...(excelHeader.map(a => a.length)))
+    excelHeader.filter(e => e.length < max).forEach(
+    e => pushRowSpanPlaceHolder(e, max - e.length))
+    return excelHeader;
+}
+const getHeader = (headers, excelHeader, deep, perOffset) => {
+    let offset = 0
+    let cur = excelHeader[deep]
+    if (!cur) {
+    cur = excelHeader[deep] = []
+    }
+    // 填充行合并占位符
+    pushRowSpanPlaceHolder(cur, perOffset - cur.length)
+    for (let i = 0; i < headers.length; i++) {
+    let head = headers[i]
+    cur.push(head.label)
+    if (head.hasOwnProperty('children') && Array.isArray(head.children)
+        && head.children.length > 0) {
+        let childOffset = getHeader(head.children, excelHeader, deep + 1,
+        cur.length - 1)
+        // 填充列合并占位符
+        pushColSpanPlaceHolder(cur, childOffset - 1)
+        offset += childOffset
+    } else {
+        offset++
+    }
+    }
+    return offset;
+
+}
+const doMerges = (arr) => {
+    // 要么横向合并 要么纵向合并
+    let deep = arr.length;
+    let merges = [];
+    for (let y = 0; y < deep; y++) {
+    // 先处理横向合并
+    let row = arr[y];
+    let colSpan = 0
+    for (let x = 0; x < row.length; x++) {
+        if (row[x] === '!$COL_SPAN_PLACEHOLDER') {
+        row[x] = undefined;
+        if(x+1 === row.length){
+            merges.push({ s: { r: y, c: x - colSpan - 1}, e: { r: y, c: x } })
+        }
+        colSpan++
+        } else if (colSpan > 0 && x > colSpan) {
+        merges.push({ s: { r: y, c: x - colSpan - 1 }, e: { r: y, c: x - 1 } })
+        colSpan = 0
+        } else {
+        colSpan = 0
+        }
+    }
+    }
+    // 再处理纵向合并
+    let colLength = arr[0].length
+    for (let x = 0; x < colLength; x++) {
+        let rowSpan = 0
+        for (let y = 0; y < deep; y++) {
+            if (arr[y][x] === '!$ROW_SPAN_PLACEHOLDER') {
+                arr[y][x] = undefined;
+                if(y+1 === deep){
+                    merges.push({ s: { r: y - rowSpan , c: x }, e: { r: y , c: x } })
+                }
+                rowSpan++;
+            } else if (rowSpan > 0 && y > rowSpan) {
+                merges.push({ s: { r: y - rowSpan - 1, c: x }, e: { r: y - 1, c: x } })
+                rowSpan = 0;
+            } else {
+                rowSpan = 0;
+            }
+        }
+    }
+    return merges;
+}
+const export_json_to_excel = ({
+    multiHeader = [],
+    header,
+    data,
+    filename,
+    merges = [],
+    list = [],
+    autoWidth = true,
+    bookType = 'xlsx'
+} = {}) => {
+    /* original data */
+    filename = filename || 'excel-list'
+    data = [...data]
+    data.unshift(header);
+
+    for (let i = multiHeader.length - 1; i > -1; i--) {
+        data.unshift(multiHeader[i])
+    }
+
+    var wb = XLSX.utils.book_new(),
+    ws = sheet_from_array_of_arrays(data);
+    list.map((item) => {
+        XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(data[item]), item)
+    })
+    
+
+    if (merges.length > 0) {
+        if (!ws['!merges']) ws['!merges'] = [];
+        merges.forEach(item => {
+            ws['!merges'].push(XLSX.utils.decode_range(item))
+        })
+    }
+
+    if (autoWidth) {
+    /*设置worksheet每列的最大宽度*/
+        const colWidth = data.map(row => row.map(val => {
+            /*先判断是否为null/undefined*/
+            if (val == null) {
+            return {
+                'wch': 10
+            };
+            }
+            /*再判断是否为中文*/
+            else if (val.toString().charCodeAt(0) > 255) {
+            return {
+                'wch': val.toString().length * 2
+            };
+            } else {
+            return {
+                'wch': val.toString().length
+            };
+            }
+        }))
+        /*以第一行为初始值*/
+        let result = colWidth[0];
+        for (let i = 1; i < colWidth.length; i++) {
+            for (let j = 0; j < colWidth[i].length; j++) {
+            if (result[j]['wch'] < colWidth[i][j]['wch']) {
+                result[j]['wch'] = colWidth[i][j]['wch'];
+            }
+            }
+        }
+        ws['!cols'] = result;
+    }
+
+    /* add worksheet to workbook */
+    // wb.SheetNames.push(ws_name);
+    // wb.Sheets[ws_name] = ws;
+
+    var wbout = XLSX.write(wb, {
+        bookType: bookType,
+        bookSST: false,
+        type: 'binary'
+    });
+    // saveAs(new Blob([s2ab(wbout)], {
+    // type: "application/octet-stream"
+    // }), `${filename}.${bookType}`);
+    XLSX.writeFile(wbout, 'demo.xlsx');
+}
+  
+const toJson = (file, name)=>{
+    let pro = new Promise((resolve, reject) => {
+      if (file instanceof Blob) {
+        file.arrayBuffer().then((array) => {
+          try {
+            const workbook = XLSX.read(array, { type: 'array', cellDates: true })
+            resolve(workbook)
+          } catch (err) {
+            reject(err)
+          }
+        })
+      } else if (file instanceof ArrayBuffer) {
+        try {
+          const workbook = XLSX.read(file, { type: 'array', cellDates: true })
+          resolve(workbook)
+        } catch (err) {
+          reject(err)
+        }
+      }
+    })
+  
+    return pro.then((workbook) => {
+      let sheetName = name || workbook.SheetNames[0]
+      let workSheet = workbook.Sheets[sheetName]
+      console.log(workSheet, 'workSheet')
+      if (!workSheet) return Promise.reject(`工作表:${name} 不存在`)
+      let rowsc = XLSX.utils.sheet_to_json(workSheet, {header: 1 , mergeCells:true})
+      // 
+      let header1 = rowsc[0].reduce((acc, val, idx) => {
+        acc[idx] = val;
+        return acc;
+      }, {});
+      let header2 = rowsc[1].reduce((acc, val, idx) => {
+        acc[idx] = val;
+        return acc;
+      }, {});
+      const h = {
+        ...header1,
+        ...header2
+      }
+      let h1 = Object.values(h)
+      console.log(h1, rowsc, 'rowsc')
+      let rows = [h1,...rowsc.slice(2)]
+      return Promise.resolve(rows)
+    })
+  }
+export {
+    importsExcel,
+    exportExcel,
+    exportToExcel,
+    exportToMulExcel,
+    export_json_to_excel,
+    toJson
+}