diff --git a/src/main.ts b/src/main.ts index 95d9410..c8e6363 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,7 +4,6 @@ import print from 'vue3-print-nb' import axios from 'axios' import * as ElementPlusIconsVue from '@element-plus/icons-vue' -import * as GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' import App from './App.vue' import pinia from './store' @@ -25,7 +24,6 @@ if (useSettingsStore().app.iconifyOfflineUse) { downloadAndInstall() } -window.GC = GC const app = createApp(App) app.config.globalProperties.hasPerm = hasPermission app.config.globalProperties.buttonPerm = buttonPerm diff --git a/src/main.ts b/src/main.ts index 95d9410..c8e6363 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,7 +4,6 @@ import print from 'vue3-print-nb' import axios from 'axios' import * as ElementPlusIconsVue from '@element-plus/icons-vue' -import * as GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' import App from './App.vue' import pinia from './store' @@ -25,7 +24,6 @@ if (useSettingsStore().app.iconifyOfflineUse) { downloadAndInstall() } -window.GC = GC const app = createApp(App) app.config.globalProperties.hasPerm = hasPermission app.config.globalProperties.buttonPerm = buttonPerm diff --git a/src/views/business/lab/excelEdit/excelEditDialog.vue b/src/views/business/lab/excelEdit/excelEditDialog.vue index bb359d4..8af9e30 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -23,13 +23,15 @@ import qrImg from '../../../../assets/images/qrExample.png' import { exportFile, importFile } from './methods/file' import bindForm from './methods/bind/bindForm' -import { bindPicture, getSpanInfo } from './methods/bind/bindPicture' +import bindTable from './methods/bind/bindTable' +import bindPicture from './methods/bind/bindPicture' +import bindPagingSeal from './methods/pagingSeal' import { importSjsFile } from './index' const emits = defineEmits(['initComplete']) GC.Spread.Common.CultureManager.culture('zh-cn') -let designer: any = null -let spread: any = null -let sheet: any = null +let designer: any = null // 表格设计器实例 +let spread: any = null // 创建工作簿实例 +let sheet: any = null // 获取当前活动工作表 const designerContainerRef = ref(null) // 引用Designer的宿主Dom元素 // ----------------------------------------初始化相关----------------------------------------------- // designer初始化完成 @@ -42,17 +44,23 @@ const handleImportFile = (file: any, data: any) => { // 导入完成 importFile(spread, file).then(() => { - // 绑定数据 + // 绑定表单 bindForm(spread, data) - - // getSpanInfo(sheet, 52, 20) - // bindPicture(sheet, ) + // 绑定表格 + // bindTable(spread, data) + // 绑定图片 handleBindPicture() + // 骑缝章 + bindPagingSeal( + spread, + 'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png', + 180, 120 + ) }) } // 执行导出文件 const handleExportFile = async () => { - const blob = await exportFile(spread, 'xlsx', true) + const blob = await exportFile(spread, 'xlsx', false) console.log('获取到文件', blob) } @@ -80,42 +88,6 @@ 13, ) } - -// -----------------------------------数据绑定------------------------------------------------- -// 表格绑定 -function handleBindTable() { - console.log('执行表格绑定') - const datasource = { - dw: '我是单位', - dz: '我是地址', - } - // var datasource = [ - // { name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM' }, - // ] - // var colInfos = [ - // { name: 'position', displayName: '姓名', size: 50, visible: false }, - // { name: 'name', displayName: 'Display Name', size: 70 }, - // { name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 }, - // { name: 'age', displayName: 'Age', size: 40, resizable: false }, - // ] - const sheet = spread.getSheet(1) // 获取第几个sheet页 - // sheet.autoGenerateColumns = false - sheet.setDataSource(datasource) - // sheet.bindColumns(colInfos) -} - -// 表单绑定 -function handleBindForm(formData: any) { - console.log('执行表单绑定') - const data = { - certificateNo: '12345678987', - dz: '我是地址', - } - const source = new GC.Spread.Sheets.Bindings.CellBindingSource(data) - const sheet = spread.getSheet(2) // 获取第几个sheet页 - sheet.setDataSource(source) -} - // ----------------------------------弹窗基本操作----------------------------------------------- const dialogVisible = ref(false) // 弹窗显示 const loading = ref(false) @@ -123,9 +95,11 @@ const initDialog = (id: string, sampleid: string, orderid: string) => { dialogVisible.value = true nextTick(() => { - designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) + designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) // 表格设计器实例 spread = designer.getWorkbook() // 创建工作簿实例 sheet = spread.getActiveSheet() // 获取当前活动工作表 + console.log('当前工作表sheet', sheet) + initComplete() }) } diff --git a/src/main.ts b/src/main.ts index 95d9410..c8e6363 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,7 +4,6 @@ import print from 'vue3-print-nb' import axios from 'axios' import * as ElementPlusIconsVue from '@element-plus/icons-vue' -import * as GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' import App from './App.vue' import pinia from './store' @@ -25,7 +24,6 @@ if (useSettingsStore().app.iconifyOfflineUse) { downloadAndInstall() } -window.GC = GC const app = createApp(App) app.config.globalProperties.hasPerm = hasPermission app.config.globalProperties.buttonPerm = buttonPerm diff --git a/src/views/business/lab/excelEdit/excelEditDialog.vue b/src/views/business/lab/excelEdit/excelEditDialog.vue index bb359d4..8af9e30 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -23,13 +23,15 @@ import qrImg from '../../../../assets/images/qrExample.png' import { exportFile, importFile } from './methods/file' import bindForm from './methods/bind/bindForm' -import { bindPicture, getSpanInfo } from './methods/bind/bindPicture' +import bindTable from './methods/bind/bindTable' +import bindPicture from './methods/bind/bindPicture' +import bindPagingSeal from './methods/pagingSeal' import { importSjsFile } from './index' const emits = defineEmits(['initComplete']) GC.Spread.Common.CultureManager.culture('zh-cn') -let designer: any = null -let spread: any = null -let sheet: any = null +let designer: any = null // 表格设计器实例 +let spread: any = null // 创建工作簿实例 +let sheet: any = null // 获取当前活动工作表 const designerContainerRef = ref(null) // 引用Designer的宿主Dom元素 // ----------------------------------------初始化相关----------------------------------------------- // designer初始化完成 @@ -42,17 +44,23 @@ const handleImportFile = (file: any, data: any) => { // 导入完成 importFile(spread, file).then(() => { - // 绑定数据 + // 绑定表单 bindForm(spread, data) - - // getSpanInfo(sheet, 52, 20) - // bindPicture(sheet, ) + // 绑定表格 + // bindTable(spread, data) + // 绑定图片 handleBindPicture() + // 骑缝章 + bindPagingSeal( + spread, + 'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png', + 180, 120 + ) }) } // 执行导出文件 const handleExportFile = async () => { - const blob = await exportFile(spread, 'xlsx', true) + const blob = await exportFile(spread, 'xlsx', false) console.log('获取到文件', blob) } @@ -80,42 +88,6 @@ 13, ) } - -// -----------------------------------数据绑定------------------------------------------------- -// 表格绑定 -function handleBindTable() { - console.log('执行表格绑定') - const datasource = { - dw: '我是单位', - dz: '我是地址', - } - // var datasource = [ - // { name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM' }, - // ] - // var colInfos = [ - // { name: 'position', displayName: '姓名', size: 50, visible: false }, - // { name: 'name', displayName: 'Display Name', size: 70 }, - // { name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 }, - // { name: 'age', displayName: 'Age', size: 40, resizable: false }, - // ] - const sheet = spread.getSheet(1) // 获取第几个sheet页 - // sheet.autoGenerateColumns = false - sheet.setDataSource(datasource) - // sheet.bindColumns(colInfos) -} - -// 表单绑定 -function handleBindForm(formData: any) { - console.log('执行表单绑定') - const data = { - certificateNo: '12345678987', - dz: '我是地址', - } - const source = new GC.Spread.Sheets.Bindings.CellBindingSource(data) - const sheet = spread.getSheet(2) // 获取第几个sheet页 - sheet.setDataSource(source) -} - // ----------------------------------弹窗基本操作----------------------------------------------- const dialogVisible = ref(false) // 弹窗显示 const loading = ref(false) @@ -123,9 +95,11 @@ const initDialog = (id: string, sampleid: string, orderid: string) => { dialogVisible.value = true nextTick(() => { - designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) + designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) // 表格设计器实例 spread = designer.getWorkbook() // 创建工作簿实例 sheet = spread.getActiveSheet() // 获取当前活动工作表 + console.log('当前工作表sheet', sheet) + initComplete() }) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts index a17dcd4..89093ef 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts @@ -1,8 +1,8 @@ import GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' -const certTypeMap: { [key: string]: string } = { - 1: '校准证书' -} +// const certTypeMap: { [key: string]: string } = { +// 1: '校准证书' +// } /** * 处理表单数据字段的对应 @@ -23,14 +23,26 @@ monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 dttTest: { - propA: '我是测试字段' - } + propA: '我是测试字段', + }, + equipmentList: data.equipmentInfoList.map((item: any) => { + return { + ...item, + number1: 1, + number2: 2, + number3: 3, + number4: 4, + nameAndModel: item.equipmentName + item.modelNo, // 名称 + 数值 + deptNameAndCertificateNo: item.mesureDeptName + item.certificateNo, // 溯源机构+证书编号 + } + }), } break default: break } - + // 只留两行 + // result = { ...result, equipmentList: [result.equipmentList[0], result.equipmentList[1]] } return result } @@ -43,11 +55,12 @@ // 处理数据 const solvedData = solveFormData(type, data) // 获取sheet页数量 - const seetCount = spread.getSheetCount() - for (let i = 0; i < seetCount; i++) { + const sheetCount = spread.getSheetCount() + for (let i = 0; i < sheetCount; i++) { // 单元格绑定数据源 const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) - const sheet = spread.getSheet(i) // 获取第几个sheet页 + // 获取第几个sheet页 + const sheet = spread.getSheet(i) // 填入数据 sheet.setDataSource(source) } diff --git a/src/main.ts b/src/main.ts index 95d9410..c8e6363 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,7 +4,6 @@ import print from 'vue3-print-nb' import axios from 'axios' import * as ElementPlusIconsVue from '@element-plus/icons-vue' -import * as GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' import App from './App.vue' import pinia from './store' @@ -25,7 +24,6 @@ if (useSettingsStore().app.iconifyOfflineUse) { downloadAndInstall() } -window.GC = GC const app = createApp(App) app.config.globalProperties.hasPerm = hasPermission app.config.globalProperties.buttonPerm = buttonPerm diff --git a/src/views/business/lab/excelEdit/excelEditDialog.vue b/src/views/business/lab/excelEdit/excelEditDialog.vue index bb359d4..8af9e30 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -23,13 +23,15 @@ import qrImg from '../../../../assets/images/qrExample.png' import { exportFile, importFile } from './methods/file' import bindForm from './methods/bind/bindForm' -import { bindPicture, getSpanInfo } from './methods/bind/bindPicture' +import bindTable from './methods/bind/bindTable' +import bindPicture from './methods/bind/bindPicture' +import bindPagingSeal from './methods/pagingSeal' import { importSjsFile } from './index' const emits = defineEmits(['initComplete']) GC.Spread.Common.CultureManager.culture('zh-cn') -let designer: any = null -let spread: any = null -let sheet: any = null +let designer: any = null // 表格设计器实例 +let spread: any = null // 创建工作簿实例 +let sheet: any = null // 获取当前活动工作表 const designerContainerRef = ref(null) // 引用Designer的宿主Dom元素 // ----------------------------------------初始化相关----------------------------------------------- // designer初始化完成 @@ -42,17 +44,23 @@ const handleImportFile = (file: any, data: any) => { // 导入完成 importFile(spread, file).then(() => { - // 绑定数据 + // 绑定表单 bindForm(spread, data) - - // getSpanInfo(sheet, 52, 20) - // bindPicture(sheet, ) + // 绑定表格 + // bindTable(spread, data) + // 绑定图片 handleBindPicture() + // 骑缝章 + bindPagingSeal( + spread, + 'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png', + 180, 120 + ) }) } // 执行导出文件 const handleExportFile = async () => { - const blob = await exportFile(spread, 'xlsx', true) + const blob = await exportFile(spread, 'xlsx', false) console.log('获取到文件', blob) } @@ -80,42 +88,6 @@ 13, ) } - -// -----------------------------------数据绑定------------------------------------------------- -// 表格绑定 -function handleBindTable() { - console.log('执行表格绑定') - const datasource = { - dw: '我是单位', - dz: '我是地址', - } - // var datasource = [ - // { name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM' }, - // ] - // var colInfos = [ - // { name: 'position', displayName: '姓名', size: 50, visible: false }, - // { name: 'name', displayName: 'Display Name', size: 70 }, - // { name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 }, - // { name: 'age', displayName: 'Age', size: 40, resizable: false }, - // ] - const sheet = spread.getSheet(1) // 获取第几个sheet页 - // sheet.autoGenerateColumns = false - sheet.setDataSource(datasource) - // sheet.bindColumns(colInfos) -} - -// 表单绑定 -function handleBindForm(formData: any) { - console.log('执行表单绑定') - const data = { - certificateNo: '12345678987', - dz: '我是地址', - } - const source = new GC.Spread.Sheets.Bindings.CellBindingSource(data) - const sheet = spread.getSheet(2) // 获取第几个sheet页 - sheet.setDataSource(source) -} - // ----------------------------------弹窗基本操作----------------------------------------------- const dialogVisible = ref(false) // 弹窗显示 const loading = ref(false) @@ -123,9 +95,11 @@ const initDialog = (id: string, sampleid: string, orderid: string) => { dialogVisible.value = true nextTick(() => { - designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) + designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) // 表格设计器实例 spread = designer.getWorkbook() // 创建工作簿实例 sheet = spread.getActiveSheet() // 获取当前活动工作表 + console.log('当前工作表sheet', sheet) + initComplete() }) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts index a17dcd4..89093ef 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts @@ -1,8 +1,8 @@ import GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' -const certTypeMap: { [key: string]: string } = { - 1: '校准证书' -} +// const certTypeMap: { [key: string]: string } = { +// 1: '校准证书' +// } /** * 处理表单数据字段的对应 @@ -23,14 +23,26 @@ monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 dttTest: { - propA: '我是测试字段' - } + propA: '我是测试字段', + }, + equipmentList: data.equipmentInfoList.map((item: any) => { + return { + ...item, + number1: 1, + number2: 2, + number3: 3, + number4: 4, + nameAndModel: item.equipmentName + item.modelNo, // 名称 + 数值 + deptNameAndCertificateNo: item.mesureDeptName + item.certificateNo, // 溯源机构+证书编号 + } + }), } break default: break } - + // 只留两行 + // result = { ...result, equipmentList: [result.equipmentList[0], result.equipmentList[1]] } return result } @@ -43,11 +55,12 @@ // 处理数据 const solvedData = solveFormData(type, data) // 获取sheet页数量 - const seetCount = spread.getSheetCount() - for (let i = 0; i < seetCount; i++) { + const sheetCount = spread.getSheetCount() + for (let i = 0; i < sheetCount; i++) { // 单元格绑定数据源 const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) - const sheet = spread.getSheet(i) // 获取第几个sheet页 + // 获取第几个sheet页 + const sheet = spread.getSheet(i) // 填入数据 sheet.setDataSource(source) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts index 2642f36..d7374ac 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts @@ -1,14 +1,9 @@ /** - * 绑定图片 - */ -import GC from '@grapecity-software/spread-sheets' - -/** * 图片绑定 * @param spread * @param data */ -export function bindPicture( +export default function bindPicture( sheet: any, name: string, // 为添加的图片指定一个唯一的名称。这个名称可用于后续对该图片进行引用、操作或管理。 url: string, // 图片的来源地址,可以是本地文件路径(在支持的环境下),也可以是网络图片的 URL @@ -21,7 +16,7 @@ left = 0, // 图片在工作表中的左偏移量,即图片左上角相对于工作表左上角的水平距离,单位通常为像素 top = 0, // 图片在工作表中的上偏移量,即图片左上角相对于工作表左上角的垂直距离,单位通常为像素。 ) { - const picture = sheet.pictures.add(name, url, left, top, width, height) + const picture = sheet.shapes.addPictureShape(name, url, left, top, width, height) picture.startRow(startRow) picture.startColumn(startColumn) // 设置图片在工作表中起始列的索引 picture.startRowOffset(startRowOffset) // 用于设置图片相对于起始行的垂直偏移量,单位通常为像素。如果设置为 10,表示图片会相对于起始行向下偏移 10 像素。 diff --git a/src/main.ts b/src/main.ts index 95d9410..c8e6363 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,7 +4,6 @@ import print from 'vue3-print-nb' import axios from 'axios' import * as ElementPlusIconsVue from '@element-plus/icons-vue' -import * as GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' import App from './App.vue' import pinia from './store' @@ -25,7 +24,6 @@ if (useSettingsStore().app.iconifyOfflineUse) { downloadAndInstall() } -window.GC = GC const app = createApp(App) app.config.globalProperties.hasPerm = hasPermission app.config.globalProperties.buttonPerm = buttonPerm diff --git a/src/views/business/lab/excelEdit/excelEditDialog.vue b/src/views/business/lab/excelEdit/excelEditDialog.vue index bb359d4..8af9e30 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -23,13 +23,15 @@ import qrImg from '../../../../assets/images/qrExample.png' import { exportFile, importFile } from './methods/file' import bindForm from './methods/bind/bindForm' -import { bindPicture, getSpanInfo } from './methods/bind/bindPicture' +import bindTable from './methods/bind/bindTable' +import bindPicture from './methods/bind/bindPicture' +import bindPagingSeal from './methods/pagingSeal' import { importSjsFile } from './index' const emits = defineEmits(['initComplete']) GC.Spread.Common.CultureManager.culture('zh-cn') -let designer: any = null -let spread: any = null -let sheet: any = null +let designer: any = null // 表格设计器实例 +let spread: any = null // 创建工作簿实例 +let sheet: any = null // 获取当前活动工作表 const designerContainerRef = ref(null) // 引用Designer的宿主Dom元素 // ----------------------------------------初始化相关----------------------------------------------- // designer初始化完成 @@ -42,17 +44,23 @@ const handleImportFile = (file: any, data: any) => { // 导入完成 importFile(spread, file).then(() => { - // 绑定数据 + // 绑定表单 bindForm(spread, data) - - // getSpanInfo(sheet, 52, 20) - // bindPicture(sheet, ) + // 绑定表格 + // bindTable(spread, data) + // 绑定图片 handleBindPicture() + // 骑缝章 + bindPagingSeal( + spread, + 'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png', + 180, 120 + ) }) } // 执行导出文件 const handleExportFile = async () => { - const blob = await exportFile(spread, 'xlsx', true) + const blob = await exportFile(spread, 'xlsx', false) console.log('获取到文件', blob) } @@ -80,42 +88,6 @@ 13, ) } - -// -----------------------------------数据绑定------------------------------------------------- -// 表格绑定 -function handleBindTable() { - console.log('执行表格绑定') - const datasource = { - dw: '我是单位', - dz: '我是地址', - } - // var datasource = [ - // { name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM' }, - // ] - // var colInfos = [ - // { name: 'position', displayName: '姓名', size: 50, visible: false }, - // { name: 'name', displayName: 'Display Name', size: 70 }, - // { name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 }, - // { name: 'age', displayName: 'Age', size: 40, resizable: false }, - // ] - const sheet = spread.getSheet(1) // 获取第几个sheet页 - // sheet.autoGenerateColumns = false - sheet.setDataSource(datasource) - // sheet.bindColumns(colInfos) -} - -// 表单绑定 -function handleBindForm(formData: any) { - console.log('执行表单绑定') - const data = { - certificateNo: '12345678987', - dz: '我是地址', - } - const source = new GC.Spread.Sheets.Bindings.CellBindingSource(data) - const sheet = spread.getSheet(2) // 获取第几个sheet页 - sheet.setDataSource(source) -} - // ----------------------------------弹窗基本操作----------------------------------------------- const dialogVisible = ref(false) // 弹窗显示 const loading = ref(false) @@ -123,9 +95,11 @@ const initDialog = (id: string, sampleid: string, orderid: string) => { dialogVisible.value = true nextTick(() => { - designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) + designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) // 表格设计器实例 spread = designer.getWorkbook() // 创建工作簿实例 sheet = spread.getActiveSheet() // 获取当前活动工作表 + console.log('当前工作表sheet', sheet) + initComplete() }) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts index a17dcd4..89093ef 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts @@ -1,8 +1,8 @@ import GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' -const certTypeMap: { [key: string]: string } = { - 1: '校准证书' -} +// const certTypeMap: { [key: string]: string } = { +// 1: '校准证书' +// } /** * 处理表单数据字段的对应 @@ -23,14 +23,26 @@ monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 dttTest: { - propA: '我是测试字段' - } + propA: '我是测试字段', + }, + equipmentList: data.equipmentInfoList.map((item: any) => { + return { + ...item, + number1: 1, + number2: 2, + number3: 3, + number4: 4, + nameAndModel: item.equipmentName + item.modelNo, // 名称 + 数值 + deptNameAndCertificateNo: item.mesureDeptName + item.certificateNo, // 溯源机构+证书编号 + } + }), } break default: break } - + // 只留两行 + // result = { ...result, equipmentList: [result.equipmentList[0], result.equipmentList[1]] } return result } @@ -43,11 +55,12 @@ // 处理数据 const solvedData = solveFormData(type, data) // 获取sheet页数量 - const seetCount = spread.getSheetCount() - for (let i = 0; i < seetCount; i++) { + const sheetCount = spread.getSheetCount() + for (let i = 0; i < sheetCount; i++) { // 单元格绑定数据源 const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) - const sheet = spread.getSheet(i) // 获取第几个sheet页 + // 获取第几个sheet页 + const sheet = spread.getSheet(i) // 填入数据 sheet.setDataSource(source) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts index 2642f36..d7374ac 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts @@ -1,14 +1,9 @@ /** - * 绑定图片 - */ -import GC from '@grapecity-software/spread-sheets' - -/** * 图片绑定 * @param spread * @param data */ -export function bindPicture( +export default function bindPicture( sheet: any, name: string, // 为添加的图片指定一个唯一的名称。这个名称可用于后续对该图片进行引用、操作或管理。 url: string, // 图片的来源地址,可以是本地文件路径(在支持的环境下),也可以是网络图片的 URL @@ -21,7 +16,7 @@ left = 0, // 图片在工作表中的左偏移量,即图片左上角相对于工作表左上角的水平距离,单位通常为像素 top = 0, // 图片在工作表中的上偏移量,即图片左上角相对于工作表左上角的垂直距离,单位通常为像素。 ) { - const picture = sheet.pictures.add(name, url, left, top, width, height) + const picture = sheet.shapes.addPictureShape(name, url, left, top, width, height) picture.startRow(startRow) picture.startColumn(startColumn) // 设置图片在工作表中起始列的索引 picture.startRowOffset(startRowOffset) // 用于设置图片相对于起始行的垂直偏移量,单位通常为像素。如果设置为 10,表示图片会相对于起始行向下偏移 10 像素。 diff --git a/src/views/business/lab/excelEdit/methods/bind/bindTable.ts b/src/views/business/lab/excelEdit/methods/bind/bindTable.ts new file mode 100644 index 0000000..f4e5b12 --- /dev/null +++ b/src/views/business/lab/excelEdit/methods/bind/bindTable.ts @@ -0,0 +1,55 @@ +import GC from '@grapecity-software/spread-sheets' +// import dayjs from 'dayjs' +// const certTypeMap: { [key: string]: string } = { +// 1: '校准证书', +// } + +/** + * 处理表单数据字段的对应 + * @param type 模板类型 + * @param data 要处理的数据 + */ +const solveFormData = (type: string, data: any) => { + let result: any + switch (type) { + case '校准证书': + console.log('pppppppppppppp') + console.log(data.equipmentInfoList) + + result = { + equipmentList: data.equipmentInfoList.map((item: any) => { + return { + ...item, + number1: 1, + number2: 2, + number3: 3, + number4: 4, + } + }), + } + break + default: + break + } + console.log('处理后的表格数据', result) + return result +} + +/** + * 表单绑定 + * @param spread + * @param data + */ +export default function bindTable(spread: any, data: any, type = '校准证书') { + // 处理数据 + const solvedData = solveFormData(type, data) + // 获取sheet页数量 + const seetCount = spread.getSheetCount() + for (let i = 0; i < seetCount; i++) { + // 单元格绑定数据源 + const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) + const sheet = spread.getSheet(i) // 获取第几个sheet页 + // 填入数据 + sheet.setDataSource(source) + } +} diff --git a/src/main.ts b/src/main.ts index 95d9410..c8e6363 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,7 +4,6 @@ import print from 'vue3-print-nb' import axios from 'axios' import * as ElementPlusIconsVue from '@element-plus/icons-vue' -import * as GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' import App from './App.vue' import pinia from './store' @@ -25,7 +24,6 @@ if (useSettingsStore().app.iconifyOfflineUse) { downloadAndInstall() } -window.GC = GC const app = createApp(App) app.config.globalProperties.hasPerm = hasPermission app.config.globalProperties.buttonPerm = buttonPerm diff --git a/src/views/business/lab/excelEdit/excelEditDialog.vue b/src/views/business/lab/excelEdit/excelEditDialog.vue index bb359d4..8af9e30 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -23,13 +23,15 @@ import qrImg from '../../../../assets/images/qrExample.png' import { exportFile, importFile } from './methods/file' import bindForm from './methods/bind/bindForm' -import { bindPicture, getSpanInfo } from './methods/bind/bindPicture' +import bindTable from './methods/bind/bindTable' +import bindPicture from './methods/bind/bindPicture' +import bindPagingSeal from './methods/pagingSeal' import { importSjsFile } from './index' const emits = defineEmits(['initComplete']) GC.Spread.Common.CultureManager.culture('zh-cn') -let designer: any = null -let spread: any = null -let sheet: any = null +let designer: any = null // 表格设计器实例 +let spread: any = null // 创建工作簿实例 +let sheet: any = null // 获取当前活动工作表 const designerContainerRef = ref(null) // 引用Designer的宿主Dom元素 // ----------------------------------------初始化相关----------------------------------------------- // designer初始化完成 @@ -42,17 +44,23 @@ const handleImportFile = (file: any, data: any) => { // 导入完成 importFile(spread, file).then(() => { - // 绑定数据 + // 绑定表单 bindForm(spread, data) - - // getSpanInfo(sheet, 52, 20) - // bindPicture(sheet, ) + // 绑定表格 + // bindTable(spread, data) + // 绑定图片 handleBindPicture() + // 骑缝章 + bindPagingSeal( + spread, + 'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png', + 180, 120 + ) }) } // 执行导出文件 const handleExportFile = async () => { - const blob = await exportFile(spread, 'xlsx', true) + const blob = await exportFile(spread, 'xlsx', false) console.log('获取到文件', blob) } @@ -80,42 +88,6 @@ 13, ) } - -// -----------------------------------数据绑定------------------------------------------------- -// 表格绑定 -function handleBindTable() { - console.log('执行表格绑定') - const datasource = { - dw: '我是单位', - dz: '我是地址', - } - // var datasource = [ - // { name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM' }, - // ] - // var colInfos = [ - // { name: 'position', displayName: '姓名', size: 50, visible: false }, - // { name: 'name', displayName: 'Display Name', size: 70 }, - // { name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 }, - // { name: 'age', displayName: 'Age', size: 40, resizable: false }, - // ] - const sheet = spread.getSheet(1) // 获取第几个sheet页 - // sheet.autoGenerateColumns = false - sheet.setDataSource(datasource) - // sheet.bindColumns(colInfos) -} - -// 表单绑定 -function handleBindForm(formData: any) { - console.log('执行表单绑定') - const data = { - certificateNo: '12345678987', - dz: '我是地址', - } - const source = new GC.Spread.Sheets.Bindings.CellBindingSource(data) - const sheet = spread.getSheet(2) // 获取第几个sheet页 - sheet.setDataSource(source) -} - // ----------------------------------弹窗基本操作----------------------------------------------- const dialogVisible = ref(false) // 弹窗显示 const loading = ref(false) @@ -123,9 +95,11 @@ const initDialog = (id: string, sampleid: string, orderid: string) => { dialogVisible.value = true nextTick(() => { - designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) + designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) // 表格设计器实例 spread = designer.getWorkbook() // 创建工作簿实例 sheet = spread.getActiveSheet() // 获取当前活动工作表 + console.log('当前工作表sheet', sheet) + initComplete() }) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts index a17dcd4..89093ef 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts @@ -1,8 +1,8 @@ import GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' -const certTypeMap: { [key: string]: string } = { - 1: '校准证书' -} +// const certTypeMap: { [key: string]: string } = { +// 1: '校准证书' +// } /** * 处理表单数据字段的对应 @@ -23,14 +23,26 @@ monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 dttTest: { - propA: '我是测试字段' - } + propA: '我是测试字段', + }, + equipmentList: data.equipmentInfoList.map((item: any) => { + return { + ...item, + number1: 1, + number2: 2, + number3: 3, + number4: 4, + nameAndModel: item.equipmentName + item.modelNo, // 名称 + 数值 + deptNameAndCertificateNo: item.mesureDeptName + item.certificateNo, // 溯源机构+证书编号 + } + }), } break default: break } - + // 只留两行 + // result = { ...result, equipmentList: [result.equipmentList[0], result.equipmentList[1]] } return result } @@ -43,11 +55,12 @@ // 处理数据 const solvedData = solveFormData(type, data) // 获取sheet页数量 - const seetCount = spread.getSheetCount() - for (let i = 0; i < seetCount; i++) { + const sheetCount = spread.getSheetCount() + for (let i = 0; i < sheetCount; i++) { // 单元格绑定数据源 const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) - const sheet = spread.getSheet(i) // 获取第几个sheet页 + // 获取第几个sheet页 + const sheet = spread.getSheet(i) // 填入数据 sheet.setDataSource(source) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts index 2642f36..d7374ac 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts @@ -1,14 +1,9 @@ /** - * 绑定图片 - */ -import GC from '@grapecity-software/spread-sheets' - -/** * 图片绑定 * @param spread * @param data */ -export function bindPicture( +export default function bindPicture( sheet: any, name: string, // 为添加的图片指定一个唯一的名称。这个名称可用于后续对该图片进行引用、操作或管理。 url: string, // 图片的来源地址,可以是本地文件路径(在支持的环境下),也可以是网络图片的 URL @@ -21,7 +16,7 @@ left = 0, // 图片在工作表中的左偏移量,即图片左上角相对于工作表左上角的水平距离,单位通常为像素 top = 0, // 图片在工作表中的上偏移量,即图片左上角相对于工作表左上角的垂直距离,单位通常为像素。 ) { - const picture = sheet.pictures.add(name, url, left, top, width, height) + const picture = sheet.shapes.addPictureShape(name, url, left, top, width, height) picture.startRow(startRow) picture.startColumn(startColumn) // 设置图片在工作表中起始列的索引 picture.startRowOffset(startRowOffset) // 用于设置图片相对于起始行的垂直偏移量,单位通常为像素。如果设置为 10,表示图片会相对于起始行向下偏移 10 像素。 diff --git a/src/views/business/lab/excelEdit/methods/bind/bindTable.ts b/src/views/business/lab/excelEdit/methods/bind/bindTable.ts new file mode 100644 index 0000000..f4e5b12 --- /dev/null +++ b/src/views/business/lab/excelEdit/methods/bind/bindTable.ts @@ -0,0 +1,55 @@ +import GC from '@grapecity-software/spread-sheets' +// import dayjs from 'dayjs' +// const certTypeMap: { [key: string]: string } = { +// 1: '校准证书', +// } + +/** + * 处理表单数据字段的对应 + * @param type 模板类型 + * @param data 要处理的数据 + */ +const solveFormData = (type: string, data: any) => { + let result: any + switch (type) { + case '校准证书': + console.log('pppppppppppppp') + console.log(data.equipmentInfoList) + + result = { + equipmentList: data.equipmentInfoList.map((item: any) => { + return { + ...item, + number1: 1, + number2: 2, + number3: 3, + number4: 4, + } + }), + } + break + default: + break + } + console.log('处理后的表格数据', result) + return result +} + +/** + * 表单绑定 + * @param spread + * @param data + */ +export default function bindTable(spread: any, data: any, type = '校准证书') { + // 处理数据 + const solvedData = solveFormData(type, data) + // 获取sheet页数量 + const seetCount = spread.getSheetCount() + for (let i = 0; i < seetCount; i++) { + // 单元格绑定数据源 + const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) + const sheet = spread.getSheet(i) // 获取第几个sheet页 + // 填入数据 + sheet.setDataSource(source) + } +} diff --git a/src/views/business/lab/excelEdit/methods/file.ts b/src/views/business/lab/excelEdit/methods/file.ts index 61510af..312ee55 100644 --- a/src/views/business/lab/excelEdit/methods/file.ts +++ b/src/views/business/lab/excelEdit/methods/file.ts @@ -45,7 +45,7 @@ return file instanceof Blob } -/** +/** * @param spread spread实例 * @param file 文件 * @returns @@ -82,6 +82,44 @@ }) } +/** + * + * @param spread 工作簿实例 + */ +export function handleTableToRange(spread: any) { + // 获取 sheet 页数量 + const sheetCount = spread.getSheetCount() + for (let i = 0; i < sheetCount; i++) { + const sheet = spread.getSheet(i) // 获取sheet页 + const tables = sheet.tables.all() // 获取这个sheet页所有的表格 + // 检查工作表中是否有表格 + if (tables.length === 0) { + console.log(`工作表 ${sheet.name()} 中没有表格`) + continue + } + // 遍历该工作表中的所有表格 + for (let j = 0; j < tables.length; j++) { + const table = tables[j] + try { + spread.commandManager().execute({ + cmd: 'tableToRange', + sheetName: sheet.name(), + tableName: table.name(), + }) + console.log( + `工作表 ${sheet.name()} 中表格 ${table.name()} 转换为区域操作成功`, + ) + } + catch (error) { + console.error( + `执行工作表 ${sheet.name()} 中表格 ${table.name()} 转换为区域操作时出错:`, + error, + ) + } + } + } +} + // 获取文件导出选项 function getExportOptions(fileType: any) { return { @@ -89,18 +127,21 @@ // 包含绑定数据源,文件中包含数据绑定时,是否导出绑定数据 includeBindingSource: true, // 是否保存为视图 - saveAsView: true, + // 如果需要确保导出的文件与用户在视图中看到的内容一致(包括格式化后的数据显示),可以将 saveAsView 设置为 true。 + // 如果需要避免特定控件(如日期范围控件)的值类型发生变化,可以将 saveAsView 设置为 false + saveAsView: false, // 导出文件时是否包含样式 includeStyles: true, // 导出文件时是否包含公式 + // 如果 includeFormulas 设置为 true(默认值),则导出的文件将包含公式;如果设置为 false,则公式将被忽略,仅导出计算结果或静态数据。 includeFormulas: true, // 包含未使用名称,导出文件时是否包含无用的名称管理器,若文件中包含大量无用的名称管理器,设置为true可减小文件大小 includeUnusedNames: true, // 包含有样式但无数据的最小范围单元格,是否导出无用的空单元格,文件中包含大量空白单元格,希望提升导出效率时,建议开启。 includeEmptyRegionCells: true, - // 包含自动合并的单元格,导出文件是否将自动合并的单元格视为真是合并单元格,当文件中包含自动合并的单元格,导出Excel时,希望成为真实的合并单元格时,建议开启 + // 包含自动合并的单元格,导出文件是否将自动合并的单元格视为真实合并单元格,当文件中包含自动合并的单元格,导出Excel时,希望成为真实的合并单元格时,建议开启 includeAutoMergedCells: true, - // 导出时是否包含计算缓存数据,计算缓存数据可以更快的打开文件。 + // 决定是否包含计算引擎缓存。如果设置为 true,导出的文件将包含计算引擎的缓存数据,这可以帮助在重新加载文件时加快计算速度,因为一些计算结果已经被缓存。 includeCalcModelCache: false, } } @@ -132,6 +173,7 @@ onlyFetchFile = false, getFileName = 'exportFile', ) { + handleTableToRange(spread) const options = getExportOptions(fileType) const fileName = `${getFileName}.${fileType}` return new Promise((resolve) => { diff --git a/src/main.ts b/src/main.ts index 95d9410..c8e6363 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,7 +4,6 @@ import print from 'vue3-print-nb' import axios from 'axios' import * as ElementPlusIconsVue from '@element-plus/icons-vue' -import * as GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' import App from './App.vue' import pinia from './store' @@ -25,7 +24,6 @@ if (useSettingsStore().app.iconifyOfflineUse) { downloadAndInstall() } -window.GC = GC const app = createApp(App) app.config.globalProperties.hasPerm = hasPermission app.config.globalProperties.buttonPerm = buttonPerm diff --git a/src/views/business/lab/excelEdit/excelEditDialog.vue b/src/views/business/lab/excelEdit/excelEditDialog.vue index bb359d4..8af9e30 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -23,13 +23,15 @@ import qrImg from '../../../../assets/images/qrExample.png' import { exportFile, importFile } from './methods/file' import bindForm from './methods/bind/bindForm' -import { bindPicture, getSpanInfo } from './methods/bind/bindPicture' +import bindTable from './methods/bind/bindTable' +import bindPicture from './methods/bind/bindPicture' +import bindPagingSeal from './methods/pagingSeal' import { importSjsFile } from './index' const emits = defineEmits(['initComplete']) GC.Spread.Common.CultureManager.culture('zh-cn') -let designer: any = null -let spread: any = null -let sheet: any = null +let designer: any = null // 表格设计器实例 +let spread: any = null // 创建工作簿实例 +let sheet: any = null // 获取当前活动工作表 const designerContainerRef = ref(null) // 引用Designer的宿主Dom元素 // ----------------------------------------初始化相关----------------------------------------------- // designer初始化完成 @@ -42,17 +44,23 @@ const handleImportFile = (file: any, data: any) => { // 导入完成 importFile(spread, file).then(() => { - // 绑定数据 + // 绑定表单 bindForm(spread, data) - - // getSpanInfo(sheet, 52, 20) - // bindPicture(sheet, ) + // 绑定表格 + // bindTable(spread, data) + // 绑定图片 handleBindPicture() + // 骑缝章 + bindPagingSeal( + spread, + 'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png', + 180, 120 + ) }) } // 执行导出文件 const handleExportFile = async () => { - const blob = await exportFile(spread, 'xlsx', true) + const blob = await exportFile(spread, 'xlsx', false) console.log('获取到文件', blob) } @@ -80,42 +88,6 @@ 13, ) } - -// -----------------------------------数据绑定------------------------------------------------- -// 表格绑定 -function handleBindTable() { - console.log('执行表格绑定') - const datasource = { - dw: '我是单位', - dz: '我是地址', - } - // var datasource = [ - // { name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM' }, - // ] - // var colInfos = [ - // { name: 'position', displayName: '姓名', size: 50, visible: false }, - // { name: 'name', displayName: 'Display Name', size: 70 }, - // { name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 }, - // { name: 'age', displayName: 'Age', size: 40, resizable: false }, - // ] - const sheet = spread.getSheet(1) // 获取第几个sheet页 - // sheet.autoGenerateColumns = false - sheet.setDataSource(datasource) - // sheet.bindColumns(colInfos) -} - -// 表单绑定 -function handleBindForm(formData: any) { - console.log('执行表单绑定') - const data = { - certificateNo: '12345678987', - dz: '我是地址', - } - const source = new GC.Spread.Sheets.Bindings.CellBindingSource(data) - const sheet = spread.getSheet(2) // 获取第几个sheet页 - sheet.setDataSource(source) -} - // ----------------------------------弹窗基本操作----------------------------------------------- const dialogVisible = ref(false) // 弹窗显示 const loading = ref(false) @@ -123,9 +95,11 @@ const initDialog = (id: string, sampleid: string, orderid: string) => { dialogVisible.value = true nextTick(() => { - designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) + designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) // 表格设计器实例 spread = designer.getWorkbook() // 创建工作簿实例 sheet = spread.getActiveSheet() // 获取当前活动工作表 + console.log('当前工作表sheet', sheet) + initComplete() }) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts index a17dcd4..89093ef 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts @@ -1,8 +1,8 @@ import GC from '@grapecity-software/spread-sheets' import dayjs from 'dayjs' -const certTypeMap: { [key: string]: string } = { - 1: '校准证书' -} +// const certTypeMap: { [key: string]: string } = { +// 1: '校准证书' +// } /** * 处理表单数据字段的对应 @@ -23,14 +23,26 @@ monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 dttTest: { - propA: '我是测试字段' - } + propA: '我是测试字段', + }, + equipmentList: data.equipmentInfoList.map((item: any) => { + return { + ...item, + number1: 1, + number2: 2, + number3: 3, + number4: 4, + nameAndModel: item.equipmentName + item.modelNo, // 名称 + 数值 + deptNameAndCertificateNo: item.mesureDeptName + item.certificateNo, // 溯源机构+证书编号 + } + }), } break default: break } - + // 只留两行 + // result = { ...result, equipmentList: [result.equipmentList[0], result.equipmentList[1]] } return result } @@ -43,11 +55,12 @@ // 处理数据 const solvedData = solveFormData(type, data) // 获取sheet页数量 - const seetCount = spread.getSheetCount() - for (let i = 0; i < seetCount; i++) { + const sheetCount = spread.getSheetCount() + for (let i = 0; i < sheetCount; i++) { // 单元格绑定数据源 const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) - const sheet = spread.getSheet(i) // 获取第几个sheet页 + // 获取第几个sheet页 + const sheet = spread.getSheet(i) // 填入数据 sheet.setDataSource(source) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts index 2642f36..d7374ac 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts @@ -1,14 +1,9 @@ /** - * 绑定图片 - */ -import GC from '@grapecity-software/spread-sheets' - -/** * 图片绑定 * @param spread * @param data */ -export function bindPicture( +export default function bindPicture( sheet: any, name: string, // 为添加的图片指定一个唯一的名称。这个名称可用于后续对该图片进行引用、操作或管理。 url: string, // 图片的来源地址,可以是本地文件路径(在支持的环境下),也可以是网络图片的 URL @@ -21,7 +16,7 @@ left = 0, // 图片在工作表中的左偏移量,即图片左上角相对于工作表左上角的水平距离,单位通常为像素 top = 0, // 图片在工作表中的上偏移量,即图片左上角相对于工作表左上角的垂直距离,单位通常为像素。 ) { - const picture = sheet.pictures.add(name, url, left, top, width, height) + const picture = sheet.shapes.addPictureShape(name, url, left, top, width, height) picture.startRow(startRow) picture.startColumn(startColumn) // 设置图片在工作表中起始列的索引 picture.startRowOffset(startRowOffset) // 用于设置图片相对于起始行的垂直偏移量,单位通常为像素。如果设置为 10,表示图片会相对于起始行向下偏移 10 像素。 diff --git a/src/views/business/lab/excelEdit/methods/bind/bindTable.ts b/src/views/business/lab/excelEdit/methods/bind/bindTable.ts new file mode 100644 index 0000000..f4e5b12 --- /dev/null +++ b/src/views/business/lab/excelEdit/methods/bind/bindTable.ts @@ -0,0 +1,55 @@ +import GC from '@grapecity-software/spread-sheets' +// import dayjs from 'dayjs' +// const certTypeMap: { [key: string]: string } = { +// 1: '校准证书', +// } + +/** + * 处理表单数据字段的对应 + * @param type 模板类型 + * @param data 要处理的数据 + */ +const solveFormData = (type: string, data: any) => { + let result: any + switch (type) { + case '校准证书': + console.log('pppppppppppppp') + console.log(data.equipmentInfoList) + + result = { + equipmentList: data.equipmentInfoList.map((item: any) => { + return { + ...item, + number1: 1, + number2: 2, + number3: 3, + number4: 4, + } + }), + } + break + default: + break + } + console.log('处理后的表格数据', result) + return result +} + +/** + * 表单绑定 + * @param spread + * @param data + */ +export default function bindTable(spread: any, data: any, type = '校准证书') { + // 处理数据 + const solvedData = solveFormData(type, data) + // 获取sheet页数量 + const seetCount = spread.getSheetCount() + for (let i = 0; i < seetCount; i++) { + // 单元格绑定数据源 + const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) + const sheet = spread.getSheet(i) // 获取第几个sheet页 + // 填入数据 + sheet.setDataSource(source) + } +} diff --git a/src/views/business/lab/excelEdit/methods/file.ts b/src/views/business/lab/excelEdit/methods/file.ts index 61510af..312ee55 100644 --- a/src/views/business/lab/excelEdit/methods/file.ts +++ b/src/views/business/lab/excelEdit/methods/file.ts @@ -45,7 +45,7 @@ return file instanceof Blob } -/** +/** * @param spread spread实例 * @param file 文件 * @returns @@ -82,6 +82,44 @@ }) } +/** + * + * @param spread 工作簿实例 + */ +export function handleTableToRange(spread: any) { + // 获取 sheet 页数量 + const sheetCount = spread.getSheetCount() + for (let i = 0; i < sheetCount; i++) { + const sheet = spread.getSheet(i) // 获取sheet页 + const tables = sheet.tables.all() // 获取这个sheet页所有的表格 + // 检查工作表中是否有表格 + if (tables.length === 0) { + console.log(`工作表 ${sheet.name()} 中没有表格`) + continue + } + // 遍历该工作表中的所有表格 + for (let j = 0; j < tables.length; j++) { + const table = tables[j] + try { + spread.commandManager().execute({ + cmd: 'tableToRange', + sheetName: sheet.name(), + tableName: table.name(), + }) + console.log( + `工作表 ${sheet.name()} 中表格 ${table.name()} 转换为区域操作成功`, + ) + } + catch (error) { + console.error( + `执行工作表 ${sheet.name()} 中表格 ${table.name()} 转换为区域操作时出错:`, + error, + ) + } + } + } +} + // 获取文件导出选项 function getExportOptions(fileType: any) { return { @@ -89,18 +127,21 @@ // 包含绑定数据源,文件中包含数据绑定时,是否导出绑定数据 includeBindingSource: true, // 是否保存为视图 - saveAsView: true, + // 如果需要确保导出的文件与用户在视图中看到的内容一致(包括格式化后的数据显示),可以将 saveAsView 设置为 true。 + // 如果需要避免特定控件(如日期范围控件)的值类型发生变化,可以将 saveAsView 设置为 false + saveAsView: false, // 导出文件时是否包含样式 includeStyles: true, // 导出文件时是否包含公式 + // 如果 includeFormulas 设置为 true(默认值),则导出的文件将包含公式;如果设置为 false,则公式将被忽略,仅导出计算结果或静态数据。 includeFormulas: true, // 包含未使用名称,导出文件时是否包含无用的名称管理器,若文件中包含大量无用的名称管理器,设置为true可减小文件大小 includeUnusedNames: true, // 包含有样式但无数据的最小范围单元格,是否导出无用的空单元格,文件中包含大量空白单元格,希望提升导出效率时,建议开启。 includeEmptyRegionCells: true, - // 包含自动合并的单元格,导出文件是否将自动合并的单元格视为真是合并单元格,当文件中包含自动合并的单元格,导出Excel时,希望成为真实的合并单元格时,建议开启 + // 包含自动合并的单元格,导出文件是否将自动合并的单元格视为真实合并单元格,当文件中包含自动合并的单元格,导出Excel时,希望成为真实的合并单元格时,建议开启 includeAutoMergedCells: true, - // 导出时是否包含计算缓存数据,计算缓存数据可以更快的打开文件。 + // 决定是否包含计算引擎缓存。如果设置为 true,导出的文件将包含计算引擎的缓存数据,这可以帮助在重新加载文件时加快计算速度,因为一些计算结果已经被缓存。 includeCalcModelCache: false, } } @@ -132,6 +173,7 @@ onlyFetchFile = false, getFileName = 'exportFile', ) { + handleTableToRange(spread) const options = getExportOptions(fileType) const fileName = `${getFileName}.${fileType}` return new Promise((resolve) => { diff --git a/src/views/business/lab/excelEdit/methods/pagingSeal.ts b/src/views/business/lab/excelEdit/methods/pagingSeal.ts new file mode 100644 index 0000000..3aee1b4 --- /dev/null +++ b/src/views/business/lab/excelEdit/methods/pagingSeal.ts @@ -0,0 +1,51 @@ +/** + * 骑缝章 + * 思路:根据sheet页数去裁剪图片 + * */ +export default function bindPagingSeal( + spread: any, + url: string, // 图片的源路径或 Base64 编码字符串。 + width: number, // 图片的宽度。 + height: number, // 图片的高度。 + startRow = 0, // 起始行 + x = 0, // 图片左上角的 x 坐标。 + y = 0, // 图片左上角的 y 坐标。 + name?: string, // 图片的名称。 +) { + const sheetCount = spread.getSheetCount() + const itemPictureWidth = width / sheetCount // 每份章的宽度 + const itemPictureWidthProportion = itemPictureWidth / width // 每个占章总宽度的比例 + console.log('几个sheet页', sheetCount) + console.log('每份章的宽度', itemPictureWidth) + console.log('每个占章总宽度的比例', itemPictureWidthProportion) + + for (let i = 0; i < sheetCount; i++) { + const sheet = spread.getSheet(i) + // 获取工作表的最后一列索引 + const lastColumnIndex = sheet.getColumnCount() - 1 + const picture = sheet.shapes.addPictureShape( + name || 'picture', + url, + x, + y, + itemPictureWidth, + height, + ) + // 设置图片位置到最右边 + picture.startRow(startRow) // 设置起始行 + picture.startColumn(lastColumnIndex) // 设置起始列 + picture.startColumnOffset(0 - itemPictureWidth) // 调整偏移量以适应图片宽度 + // 可选:设置结束行列以更好地控制图片范围 + // picture.endRow(0) + picture.endColumn(lastColumnIndex) + // 裁剪 + picture.pictureFormat({ + crop: { + left: i * itemPictureWidthProportion, // The left value% of the image will be cropped + right: 1 - (i + 1) * itemPictureWidthProportion, // The right value% of the image will be cropped + top: 0, // The top value% of the image will be cropped + bottom: 0, // The bottom value% of the image will be cropped + }, + }) + } +}