npm - @scenetechnology/cj_element_table - Versions diffs - 0.0.1 - Mend

@scenetechnology/cj_element_table 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/.browserslistrc +4 -0
package/.env.base +11 -0
package/.env.dev +23 -0
package/.env.gitee +23 -0
package/.env.pro +24 -0
package/.env.test +23 -0
package/.eslintrc.js +18 -0
package/README.md +24 -0
package/babel.config.js +6 -0
package/dist/cj_element_table.common.js +66535 -0
package/dist/cj_element_table.common.js.map +1 -0
package/dist/cj_element_table.css +1 -0
package/dist/cj_element_table.umd.js +66554 -0
package/dist/cj_element_table.umd.js.map +1 -0
package/dist/cj_element_table.umd.min.js +61 -0
package/dist/cj_element_table.umd.min.js.map +1 -0
package/dist/demo.html +1 -0
package/package.json +42 -0
package/packages/components/SaveViewDialog.vue +109 -0
package/packages/components/exportExcel.js +305 -0
package/packages/components/exportTable.vue +361 -0
package/packages/components/historyDialog.vue +100 -0
package/packages/components/index.vue +1235 -0
package/packages/components/tablesetting.vue +344 -0
package/packages/components/tuo-drag.vue +197 -0
package/packages/components/viewEdit.vue +239 -0
package/packages/index.js +13 -0
package/public/favicon.ico +0 -0
package/public/index.html +17 -0
package/src/App.vue +59 -0
package/src/api/All.ts +104 -0
package/src/assets/images/TablehederTool.png +0 -0
package/src/assets/images/addIcon.png +0 -0
package/src/assets/images/blue_lock.png +0 -0
package/src/assets/images/changeIcon.png +0 -0
package/src/assets/images/downImg.png +0 -0
package/src/assets/images/kong_icon.png +0 -0
package/src/assets/images/lbIcon.png +0 -0
package/src/assets/images/lookImg.png +0 -0
package/src/assets/images/model_title_icon.png +0 -0
package/src/assets/images/pgIcon.png +0 -0
package/src/assets/images/pzIcon.png +0 -0
package/src/assets/images/tuozhui_icon.png +0 -0
package/src/assets/images/view_save_icon.png +0 -0
package/src/assets/images/view_setting_icon.png +0 -0
package/src/assets/images/yaIcon.png +0 -0
package/src/assets/logo.png +0 -0
package/src/components/Dialog/index.ts +3 -0
package/src/components/Dialog/src/Dialog.vue +72 -0
package/src/components/HelloWorld.vue +60 -0
package/src/components/Upload/index.vue +287 -0
package/src/config/axios/config.ts +122 -0
package/src/config/axios/index.ts +48 -0
package/src/config/axios/service.ts +118 -0
package/src/main.ts +13 -0
package/src/router/index.ts +16 -0
package/src/shims-vue.d.ts +6 -0
package/tsconfig.json +41 -0
package/types/global.d.ts +39 -0
package/types/vite-env.d.ts +0 -0
package/vue.config.js +24 -0

package/dist/demo.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <!doctype html><meta charset="utf-8"><title>cj_element_table demo</title><script src="./cj_element_table.umd.js"></script><link rel="stylesheet" href="./cj_element_table.css"><script>console.log(cj_element_table)</script>

package/package.json ADDED Viewed

@@ -0,0 +1,42 @@
+{
+  "name": "@scenetechnology/cj_element_table",
+  "version": "0.0.1",
+  "private": false,
+  "description": "element plus 3.0 表格组件",
+  "main": "dist/cj_element_table.umd.min.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "build:lib": "vue-cli-service build --target lib --name cj_element_table packages/index.js"
+  },
+  "dependencies": {
+    "axios": "^1.8.4",
+    "element-plus": "^2.9.7",
+    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
+    "less": "^4.3.0",
+    "less-loader": "^12.2.0",
+    "pinia": "^3.0.1",
+    "vue": "^3.2.13",
+    "vue-router": "^4.5.0",
+    "vue-types": "^6.0.0",
+    "web-storage-cache": "^1.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vue/babel-plugin-jsx": "^1.4.0",
+    "@vue/babel-preset-app": "^5.0.8",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "typescript": "~4.9.5"
+  }
+}

package/packages/components/SaveViewDialog.vue ADDED Viewed

@@ -0,0 +1,109 @@
+<template>
+  <el-dialog v-model="dialogVisible" @clickClose="closeDialog" :title="title" width="600" max-height="600">
+    <el-input v-model="viewForm.name" :maxlength="maxLength" placeholder="请输入视图名称" style="width:100%;margin:20px 0 10px 0;" />
+    <el-radio-group v-model="viewForm.type" style="margin: 10px 0;">
+      <el-radio label="2">个人视图</el-radio>
+      <el-radio label="1">公共视图</el-radio>
+    </el-radio-group>
+    <div class="tips">
+      <el-icon><WarningFilled /></el-icon>保存的列表视图包含筛选条件、列表排序、表头排序等信息
+    </div>
+    <template #footer>
+      <ElButton type="primary" :loading="loading" @click="handleSave">提交</ElButton>
+      <ElButton @click="closeDialog">取消</ElButton>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, defineProps, defineEmits,watch } from 'vue'
+import { ElInput, ElRadioGroup, ElRadio, ElButton, ElIcon,ElMessage } from 'element-plus'
+import { WarningFilled } from '@element-plus/icons-vue'
+import { Dialog } from '@/components/Dialog'
+import { Form } from '../Form'
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  maxLength: {
+    type: Number,
+    default: 50
+  },
+  Form: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const emit = defineEmits(['update:modelValue', 'save'])
+const dialogVisible = ref(props.modelValue)
+const loading = ref(false)
+const viewForm = ref({
+  name: '',
+  type: '2',...props.Form})
+// 监听modelValue变化
+watch(() => props.modelValue, (val) => {
+  dialogVisible.value = val
+})
+watch(() => props.Form, (val) => {
+  viewForm.value = val
+})
+// 监听dialogVisible变化
+watch(() => dialogVisible.value, (val) => {
+  emit('update:modelValue', val)
+})
+const closeDialog = () => {
+  dialogVisible.value = false
+  viewForm.value = {
+    name: '',
+    type: '2'
+  }
+}
+const handleSave = async () => {
+  if (!viewForm.value.name) {
+    ElMessage.warning('请输入视图名称')
+    return
+  }else{
+    loading.value = true
+    try {
+        emit('save', viewForm.value)
+    } finally {
+        loading.value = false
+    }
+  }
+}
+</script>
+<style scoped>
+.tips {
+  color: #909399;
+  font-size: 12px;
+  margin-top: 10px;
+}
+.tips .el-icon {
+  margin-right: 5px;
+  vertical-align: middle;
+}
+.tips{
+  color:rgb(255, 128, 44);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 10px;
+  i{
+    margin-right: 10px;
+  }
+}
+</style>

package/packages/components/exportExcel.js ADDED Viewed

@@ -0,0 +1,305 @@
+/**
+ *  exceljs 封装
+ *  author：yf
+ *  time:20220323
+ *  博客：https://www.jianshu.com/p/27e8a5cfc420
+ * */
+import ExcelJS from 'exceljs'
+import FileSaver from 'file-saver'
+function isNullFn(val) {
+    return val === null || val === void 0 || val === '' || (val).toString() === 'NaN'
+}
+/**
+ *  将chart与index计算，原理是使用ascii计算
+ *  @chart：参与计算的字母，这里代表excel的列A ->Z
+ *
+ * */
+// function chartCalFn(chart, index) {
+//     return String.fromCharCode(chart.charCodeAt() + index)
+// }
+function chartCalFn(chart, index) {
+    let columnLetter = '';
+    let charCode = chart.charCodeAt(chart.length - 1);
+    let newCharCode = charCode + index;
+    if (newCharCode > 'Z'.charCodeAt()) {
+        // Handle overflow, i.e., 'Z' + 1 -> 'AA'
+        let carry = Math.floor((newCharCode - 'A'.charCodeAt()) / 26);
+        let remainder = (newCharCode - 'A'.charCodeAt()) % 26;
+        columnLetter = String.fromCharCode('A'.charCodeAt() + remainder);
+        if (carry > 0) {
+            columnLetter = String.fromCharCode('A'.charCodeAt() + carry - 1) + columnLetter;
+        }
+    } else {
+        columnLetter = String.fromCharCode(newCharCode);
+    }
+    return columnLetter;
+}
+// 获取换算后行的位置。 如 2、25等
+function getRowFn(tableRef, index) {
+    let startRow = parseInt(tableRef.replace(/[A-Z]/g, '')) // 表格开始的行位置
+    return startRow + parseInt(index)
+}
+// 获取换算后列的位置, 如：B、BC等
+function getColumnFn(tableRef, index) {
+    // tableRef可能为 AA等
+    let startCol = tableRef.replace(/[0-9]/g, '')    // 表格开始的列位置
+    let before = startCol.substr(0, startCol.length - 1) // 前面的字母
+    let after = startCol.substr(startCol.length - 1, 1) // 最后一位字母
+    return before + '' + chartCalFn(after, index)
+}
+/**
+ *  获取换算后的单元格位置
+ *  @tableRef: 表格左上角位置
+ *  @coords: 需要平移的坐标，格式：[需要横向平移的个数，需要纵向平移的个数]
+ *  return String 返回平移行列后的单元格位置
+ * */
+function getCellFn(tableRef, coords) {
+    if (!coords || coords.length !== 2) {
+        console.error('坐标错误')
+        return tableRef
+    }
+    return getColumnFn(tableRef, coords[0]) + '' + getRowFn(tableRef, coords[1])
+}
+/**
+ *  excel 导出表格
+ *  @tableConfigArr: 同exceljs  sheet.addTable参数 参考 https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E8%A1%A8%E6%A0%BC
+ *      注意：1.columns中的_width属性是为了这里便于封装使用的，用于设置表格列宽，exceljs 官网没有此属性，别混淆
+ *            2._tableBorder?: boolean 可选封装参数，true 则导出的表格有边框 false 则看表格的theme
+ *            3._mergeCells?: [Array<string>] 可选封装参数，需要合并的单元格. eg: [['C3:C5']]
+ *            4._cellStyle?: [{   // 单元格样式设置
+ *              coords:[0,2], // 如表格ref为C3,则这里表示的是C5 [横坐标，纵坐标],可以理解为以表格左上角为原点
+ *              style:{} // 同exceljs 单元格样式 参考https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E6%A0%B7%E5%BC%8F
+ *             }]
+ *            5._sheetRefName?: string 注意：当customConfig.sheetName 设置为数组的时候，也就是有多个选项卡的时候，不写此参数则，默认加入第一张sheet
+ *
+ *  @customConfig: {
+       *     sheetName: string || Array 表格选项卡名称
+       *               当为数组sheetName时，sheetName 单项可为string代表名称，可为对象，结构如下：
+       *                                    {"name": "sheet1",
+       *                                    "option": { // option同exceljs 工作表 参考：https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E5%B7%A5%E4%BD%9C%E8%A1%A8%E5%B1%9E%E6%80%A7
+       *                                      "properties": {"tabColor": {"argb": "FFC0000"}}}
+       *                                    }
+       *     fileName: string 导出的excel文件名，如：test
+       *  }
+ * */
+// 参数如下：
+// 参数说明：为了更友好的参考官网，这里封装的结构基本和exceljs官网一致，但某些为了方便调用的配置的参数,都以 "_"开头，如：_width,_cellStyle,_mergeCells,_tableBorder
+// tableConfigArr 结构如下：
+// [
+//   {
+//     "name": "MyTestTable",
+//     "ref": "C3",
+//     "headerRow": false,
+//     "totalsRow": false,
+//     "style": {"theme": "TableStyleLight1"},
+//     "columns": [
+//       {"name": "日期", "_width": 30},
+//       {"name": "姓名", "_width": 30},
+//       {"name": "省份", "_width": 30},
+//     ],
+//     "rows": [
+//       ["2016-05-02", "王小虎", "上海"],
+//       ["2016-05-03", "王小虎", "上海"],
+//     ],
+//     "_tableBorder": true,
+//     "_mergeCells": [
+//       ["C3:C5"],
+//       ["D3:H3"],
+//     ],
+//     "_cellStyle": [ // 单元格样式设置,代表表格左上角平移1列2行后的单元格，如表格ref为C3,则这里表示的是D5 [横坐标，纵坐标],可以理解为以表格左上角为原点，
+//       {
+//         "coords": [0, 2],
+//         "style": {"alignment": {"vertical": "middle", "horizontal": "left"}}
+//       },
+//     ],
+//     "_sheetRefName": "sheet2"
+//   }
+// ],
+// customConfig 结构如下：
+// {
+//     "sheetName": [
+//       {"name": "sheet1", "option": {"properties": {"tabColor": {"argb": "FFC0000"}}}},
+//       "sheet2"
+//     ],
+//     "fileName": "合并表头的表格导出"
+// }
+export function $export(tableConfigArr, customConfig) {
+    let { sheetName, fileName } = customConfig
+    const workbook = new ExcelJS.Workbook();
+    workbook.creator = 'admin';
+    workbook.lastModifiedBy = 'admin';
+    workbook.created = new Date();
+    workbook.modified = new Date();
+    workbook.lastPrinted = new Date();
+    // 创建带有红色标签颜色的工作表
+    // const sheet = workbook.addWorksheet(sheetName, {properties: {tabColor: {argb: 'FFC0000'}}});
+    // 生成 sheet start ----------
+    let sheetname = null
+    if (Array.isArray(sheetName)) { // 多个工作表
+        sheetname = sheetName[0].name ? sheetName[0].name : sheetName[0]
+        sheetName.map(item => {
+            workbook.addWorksheet(item.name ? item.name : item, item.option || {});
+        })
+    } else { // 只有一个工作表
+        if (typeof sheetName === 'string') {
+            sheetname = sheetName
+            workbook.addWorksheet(sheetName);
+        } else {
+            sheetname = sheetName.name
+            workbook.addWorksheet(sheetname, sheetName.option || {});
+        }
+    }
+    // 生成 sheet end ----------
+    let sheet = null;
+    tableConfigArr.map(tableConfig => {
+        let { ref: tableRef, _sheetRefName } = tableConfig // 因为tableRef可能为 AE:2 这种组合
+        if (_sheetRefName) { // 指定了插入哪个sheet
+            // 按 name 提取工作表
+            sheet = workbook.getWorksheet(_sheetRefName);
+        } else {
+            sheet = workbook.getWorksheet(sheetname);
+        }
+        console.log('sheet----', sheet)
+        // table-列宽设置 start -------
+        let { columns } = tableConfig
+        columns.map((item, index) => {
+            if (isNullFn(item._width)) return // 没有设置宽度使用exceljs默认宽
+            let currentChart = sheet.getColumn(getColumnFn(tableRef, index))
+            currentChart.width = item._width // 设置列宽度
+        })
+        // table-列宽设置 end -------
+        // 单元格合并 start --------
+        let { _mergeCells } = tableConfig
+        _mergeCells && _mergeCells.length && _mergeCells.map(item => {
+            sheet.mergeCells(item);
+        })
+        // 单元格合并 end --------
+        // 单元格样式设置 start ------
+        let { _cellStyle } = tableConfig
+        _cellStyle && _cellStyle.length && _cellStyle.map(item => {
+            let cell = sheet.getCell(getCellFn(tableRef, item.coords))
+            item.style && Object.keys(item.style).map(sub => { // 设置单元格样式
+                cell[sub] = item.style[sub]
+            })
+        })
+        // 单元格样式设置 end ------
+        // 表格设置边框 start -------
+        let { _tableBorder, rows } = tableConfig
+        // const imageId2 = workbook.addImage({
+        //     base64: myBase64Image,
+        //     extension: 'png',
+        //   });
+        let imageId2 = ''
+        rows.forEach((item1, index1) => {
+            item1.forEach((item2, index2) => {
+                if (typeof item2 === 'string' && item2.indexOf('data:image') !== -1) {
+                    // console.log('index1---',index1,'index2---',index2)
+                    imageId2 = workbook.addImage({
+                        base64: item2,
+                        extension: 'png',
+                    });
+                    sheet.getRow(index1 + 2).height = 85;
+                    sheet.getColumn(index2 + 1).width = 30;
+                    sheet.addImage(imageId2, {
+                        tl: { col: index2, row: index1 + 1 }, // 图片的左上角所在的单元格
+                        // br: { col: index2+1, row: index1+2 }, // 图片的右下角所在的单元格
+                        ext: { width: 85, height: 85 },
+                        editAs: 'oneCell',
+                    });
+                    //   sheet.addImage(imageId2, {
+                    //     tl: { col: index2+0.3, row: index1+1 }, // 图片的左上角所在的单元格
+                    //     // br: { col: index2+1, row: index1+2 }, // 图片的右下角所在的单元格
+                    //     ext: { width: 85, height: 85 },
+                    //     editAs: 'oneCell',
+                    //   });
+                    //   row.height = 42.5;
+                    // 调整单元格的尺寸以适应图片
+                    //   sheet.getRow(index1+2).height = 85;
+                    //   sheet.getColumn(index2+1).width = 200;
+                    // sheet.addImage(imageId2, 'A3:A3');
+                    // sheet.addImage(imageId2, {
+                    //     tl: { col: 6.5, row: 6.5 },
+                    //     br: { col: 6.5, row: 6.5 },
+                    //     ext: { width: 500, height: 200 },
+                    //     editAs: 'oneCell'
+                    // });
+                    rows[index1][index2] = ""
+                } else if (Array.isArray(item2) && item2.length > 0) {
+                    for (let itemValue of item2) {
+                        console.log(itemValue)
+                        if (typeof itemValue === 'string' && itemValue.indexOf('data:image') !== -1) {
+                            imageId2 = workbook.addImage({
+                                base64: itemValue,
+                                extension: 'png',
+                            });
+                            sheet.getRow(index1 + 2).height = 85;
+                            sheet.getColumn(index2 + 1).width = 30;
+                            sheet.addImage(imageId2, {
+                                tl: { col: index2, row: index1 + 1 }, // 图片的左上角所在的单元格
+                                // br: { col: index2+1, row: index1+2 }, // 图片的右下角所在的单元格
+                                ext: { width: 85, height: 85 },
+                                editAs: 'oneCell',
+                            });
+                        }
+                    }
+                    rows[index1][index2] = ""
+                }
+            })
+        })
+        console.log('rows--', rows)
+        if (_tableBorder) {
+            let { columns, rows, headerRow, totalsRow } = tableConfig
+            let rowMaxIndex = rows.length
+            headerRow && (rowMaxIndex++); // 有标题行则+1
+            totalsRow && (rowMaxIndex++); // 有合计行则+1
+            let colMaxIndex = columns.length
+            for (let rowIndex = 0; rowIndex < rowMaxIndex; rowIndex++) {
+                for (let colIndex = 0; colIndex < colMaxIndex; colIndex++) {
+                    let cell = sheet.getCell(getCellFn(tableRef, [colIndex, rowIndex]))
+                    cell.border = {
+                        top: { style: 'thin' },
+                        left: { style: 'thin' },
+                        bottom: { style: 'thin' },
+                        right: { style: 'thin' }
+                    }
+                }
+            }
+        }
+        // 表格设置边框 end -------
+        sheet.addTable(tableConfig)
+    })
+    // workbook.xlsx.writeFile('test.xlsx') // node端才能使用
+    workbook.xlsx.writeBuffer().then(buffer => {
+        console.log('文件更新成功');
+        FileSaver.saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `${fileName || 'excel'}.xlsx`);
+    }).catch((err) => {
+        console.error('操作文件时出错:', err);
+    });
+}