本帖最后由 杨永康 于 2022-9-2 16:19 编辑
复制粘贴的第一列粘贴不上,没有值,其他列可以,用的设计器
<template>
<div id="designer">
<gc-spread-sheets-designer
:style-info="styleInfo"
:config="config"
:spread-options="spreadOptions"
@designerInitialized="designerInit"
/>
<div>
<el-upload
ref="upload"
:action="uploadActionUrl"
:file-list="fileList"
accept="image/png,image/jpeg,image/jpg"
n-error="handleUploadError"
n-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
style="display:none;"
>
<i class="el-icon-plus" />
</el-upload>
</div>
<div class="block">
<el-dialog
title="图片"
:visible.sync="dialogVisible"
width="50%"
:modal="false"
center
@close="closePanel"
>
<br> <br> <br>
<el-image :src="imageInfo.url" :preview-src-list="[imageInfo.url]" />
</el-dialog>
</div>
</div>
</template>
<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import GC from '@grapecity/spread-sheets'
import '@grapecity/spread-sheets-resources-zh'
import '@grapecity/spread-sheets-designer-resources-cn'
import { designer } from '@grapecity/spread-sheets-designer-vue'
import settings from '@/utils/settings'
export default {
name: 'SpreadDesign',
components: {
designer
},
props: {
styleInfo: {
type: Object,
required: true
},
title: {
type: String,
default: '',
required: false
},
excelJson: {
type: String,
default: '',
required: false
},
spreadOptions: {
type: Object,
required: true
}
},
data() {
window.GC = GC
GC.Spread.Sheets.Designer.LicenseKey = settings.designerLicenseKey
// 部署授权
GC.Spread.Sheets.LicenseKey = settings.licenseKey
const config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
config.commandMap = {
'fileUpload': {
text: '文件上传',
visibleContext: 'ClickViewport',
commandName: '文件上传',
execute: () => {
this.$refs['upload'].$children[0].$refs.input.click()
}
}
}
config.contextMenu.splice(2, 0, 'fileUpload')
// 移除富文本
const index = config.contextMenu.findIndex(item => item === 'richText')
index > -1 && config.contextMenu.splice(index, 1)
// 定义名称
const index1 = config.contextMenu.findIndex(item => item === 'defineName')
index1 > -1 && config.contextMenu.splice(index1, 1)
// 移除标签
const index2 = config.contextMenu.findIndex(item => item === 'cellTag')
index2 > -1 && config.contextMenu.splice(index2, 1)
return {
config: config,
uploadActionUrl: '/drd-plat/file/upload',
fileList: [],
designer: null,
hitInfo: '',
imageInfo: '',
dialogVisible: false,
loading: null
}
},
mounted() {
},
methods: {
closePanel() {
this.imageInfo = ''
},
handleBeforeUpload() {
this.loading = this.$loading({
lock: true,
text: '上传中....',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
},
handleUploadError() {
this.loading.close()
this.$message.error('图片上传失败!')
return false
},
handleUploadSuccess(res, file, fileList) {
const _this = this
_this.loading.close()
if (res.errorCode !== '200') {
_this.$message.error('上传失败')
} else {
_this.fileList = []
const fileInfo = {
name: file.name,
url: res.data,
uid: file.uid
}
_this.fileList.push(fileInfo)
// 获取当前活动单元格
const sheet = _this.designer.getWorkbook().getActiveSheet()
// 设置单元格背景图
sheet.getCell(_this.hitInfo.row, _this.hitInfo.col).backgroundImage(res.data)
// 设置单元格值
sheet.getCell(_this.hitInfo.row, _this.hitInfo.col).text(JSON.stringify(_this.fileList)).foreColor('rgba(255,255,255,0)')
// 设置单元格列宽
sheet.setColumnWidth(_this.hitInfo.col, 150)
// 设置单元格行高
sheet.setRowHeight(_this.hitInfo.row, 50)
// 值超过列宽自动隐藏
sheet.options.allowCellOverflow = false
_this.$message.success('上传成功')
}
this.$refs.upload.clearFiles()
},
checkArray(val) {
if (typeof val === 'string') {
try {
return JSON.parse(val).length > 0
} catch (e) {
return false
}
} else {
return false
}
},
// 在线编辑表格
designerInit(value) {
const _this = this
_this.designer = value
const workbooks = value.getWorkbook()
if (_this.excelJson !== '' && _this.excelJson !== null) {
workbooks.fromJSON(JSON.parse(_this.excelJson))
} else {
const activeIndex = workbooks.getActiveSheetIndex()
if (activeIndex !== 0) {
// 设置默认活动的sheet为第一个
workbooks.startSheetIndex(0)
}
if (_this.title !== '') {
workbooks.getSheet(0).name(_this.title)
}
}
// 监听点击右键
const oldOpenMenu = workbooks.contextMenu.onOpenMenu
workbooks.contextMenu.onOpenMenu = function(menuData, itemsDataForShown, hitInfo, spread) {
oldOpenMenu.apply(this, arguments)
_this.hitInfo = hitInfo.worksheetHitInfo
}
// 监听清除内容
workbooks.getActiveSheet().bind(GC.Spread.Sheets.Events.RangeChanged, function(e, args) {
workbooks.getActiveSheet().getCell(args.row, args.col).backgroundImage('')
// 设置单元格值
workbooks.getActiveSheet().getCell(args.row, args.col).text('')
})
// 监听点击事件
workbooks.getActiveSheet().bind(GC.Spread.Sheets.Events.CellClick, function(sender, args) {
const image = workbooks.getActiveSheet().getCell(args.row, args.col).text()
if (_this.checkArray(image)) {
_this.dialogVisible = true
_this.imageInfo = JSON.parse(image)[0]
}
})
this.$emit('getSpreadSubmitInfo', value)
}
}
}
</script>
<style lang="scss" scoped>
</style>
|