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..0395709 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -23,13 +23,14 @@ 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 { 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,11 +43,11 @@ const handleImportFile = (file: any, data: any) => { // 导入完成 importFile(spread, file).then(() => { - // 绑定数据 + // 绑定表单 bindForm(spread, data) - - // getSpanInfo(sheet, 52, 20) - // bindPicture(sheet, ) + // 绑定表格 + // bindTable(spread, data) + // 绑定图片 handleBindPicture() }) } @@ -80,42 +81,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 +88,12 @@ 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..0395709 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -23,13 +23,14 @@ 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 { 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,11 +43,11 @@ const handleImportFile = (file: any, data: any) => { // 导入完成 importFile(spread, file).then(() => { - // 绑定数据 + // 绑定表单 bindForm(spread, data) - - // getSpanInfo(sheet, 52, 20) - // bindPicture(sheet, ) + // 绑定表格 + // bindTable(spread, data) + // 绑定图片 handleBindPicture() }) } @@ -80,42 +81,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 +88,12 @@ 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..217734b 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts @@ -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 } 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..0395709 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -23,13 +23,14 @@ 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 { 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,11 +43,11 @@ const handleImportFile = (file: any, data: any) => { // 导入完成 importFile(spread, file).then(() => { - // 绑定数据 + // 绑定表单 bindForm(spread, data) - - // getSpanInfo(sheet, 52, 20) - // bindPicture(sheet, ) + // 绑定表格 + // bindTable(spread, data) + // 绑定图片 handleBindPicture() }) } @@ -80,42 +81,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 +88,12 @@ 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..217734b 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts @@ -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 } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts index 2642f36..fe751cd 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 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..0395709 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -23,13 +23,14 @@ 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 { 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,11 +43,11 @@ const handleImportFile = (file: any, data: any) => { // 导入完成 importFile(spread, file).then(() => { - // 绑定数据 + // 绑定表单 bindForm(spread, data) - - // getSpanInfo(sheet, 52, 20) - // bindPicture(sheet, ) + // 绑定表格 + // bindTable(spread, data) + // 绑定图片 handleBindPicture() }) } @@ -80,42 +81,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 +88,12 @@ 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..217734b 100644 --- a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts +++ b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts @@ -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 } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts index 2642f36..fe751cd 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 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..8545a05 --- /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) + } +}