找回密码
 立即注册

QQ登录

只需一步,快速开始

杨永康
初级会员   /  发表于:2022-9-2 15:29  /   查看:1229  /  回复:7
500金币
本帖最后由 杨永康 于 2022-9-2 16:19 编辑

image.png824556579.png
复制粘贴的第一列粘贴不上,没有值,其他列可以,用的设计器


<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>

最佳答案

查看完整内容

出现这个问题,是因为你监听的RangeChanged事件中将第一个单元格的值置为空了。

7 个回复

倒序浏览
最佳答案
最佳答案
有点东西悬赏达人认证
初级会员   /  发表于:2022-9-2 15:29:46
来自 7#
出现这个问题,是因为你监听的RangeChanged事件中将第一个单元格的值置为空了。
image.png906371765.png
回复 使用道具 举报
杨永康
初级会员   /  发表于:2022-9-2 16:57:41
2#
image.png777213744.png
这是监听复制剪贴的数据,第一列的数据就莫名其妙的没了
回复 使用道具 举报
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-9-2 18:23:28
3#
是在sheet内做的剪切板复制粘贴操作,将上面的行粘贴到下面吗,

麻烦将当前的workbook对象通过toJSON导出后上传上来,我们来协助排查一下原因
回复 使用道具 举报
杨永康
初级会员   /  发表于:2022-9-5 10:29:57
4#
Richard.Ma 发表于 2022-9-2 18:23
是在sheet内做的剪切板复制粘贴操作,将上面的行粘贴到下面吗,

麻烦将当前的workbook对象通过toJSON导 ...

对,是在sheet内做的剪切板复制粘贴操作,

file.ssjson

6.32 KB, 下载次数: 29

回复 使用道具 举报
杨永康
初级会员   /  发表于:2022-9-5 10:35:40
5#
workbooks{"version":"15.0.6","sheetCount":1,"customList":[],"sheets":{"医用冷柜二级物料库参数定义":{"name":"医用冷柜二级物料库参数定义","isSelected":true,"frozenTrailingRowStickToEdge":true,"frozenTrailingColumnStickToEdge":true,"theme":"Office","data":{"defaultDataNode":{"style":{"themeFont":"Body"}}},"rowHeaderData":{"defaultDataNode":{"style":{"themeFont":"Body"}}},"colHeaderData":{"defaultDataNode":{"style":{"themeFont":"Body"}}},"leftCellIndex":0,"topCellIndex":0,"selections":{"0":{"row":0,"rowCount":1,"col":0,"colCount":1},"length":1},"rowOutlines":{"items":[]},"columnOutlines":{"items":[]},"cellStates":{},"states":{},"outlineColumnOptions":{},"autoMergeRangeInfos":[],"printInfo":{"paperSize":{"width":850,"height":1100,"kind":1}},"shapeCollectionOption":{"snapMode":0},"index":0}},"sheetTabCount":0}
回复 使用道具 举报
杨永康
初级会员   /  发表于:2022-9-5 10:35:43
6#
workbooks{"version":"15.0.6","sheetCount":1,"customList":[],"sheets":{"医用冷柜二级物料库参数定义":{"name":"医用冷柜二级物料库参数定义","isSelected":true,"frozenTrailingRowStickToEdge":true,"frozenTrailingColumnStickToEdge":true,"theme":"Office","data":{"defaultDataNode":{"style":{"themeFont":"Body"}}},"rowHeaderData":{"defaultDataNode":{"style":{"themeFont":"Body"}}},"colHeaderData":{"defaultDataNode":{"style":{"themeFont":"Body"}}},"leftCellIndex":0,"topCellIndex":0,"selections":{"0":{"row":0,"rowCount":1,"col":0,"colCount":1},"length":1},"rowOutlines":{"items":[]},"columnOutlines":{"items":[]},"cellStates":{},"states":{},"outlineColumnOptions":{},"autoMergeRangeInfos":[],"printInfo":{"paperSize":{"width":850,"height":1100,"kind":1}},"shapeCollectionOption":{"snapMode":0},"index":0}},"sheetTabCount":0}
回复 使用道具 举报
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-9-5 18:30:04
8#
我看到你这边已经设置了最佳答案,代码中RangeChanged事件中将第一个单元格的值置为空了

如果问题已经解决的话,这个帖子就结贴了,
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部