请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Ellia.Duan SpreadJS 开发认证
超级版主   /  发表于:2024-10-29 15:16  /   查看:29  /  回复:0
在ReportSheet预览模式下,如果需要添加记录,我们此时可以右键,出现上下文菜单,选择“添加记录”。发现会出现一个空白行进行数据填报。

但是当列很多,希望弹窗一个窗口,用Form表单的形式去添加记录,该如何实现呢?
下文,我们将探索这个需求。
image.png35348204.png
首先,我们需要引入一个弹窗组件,本文以Element-UI组件中的Drawer组件为例进行介绍。
接下来,我将介绍如何在添加记录的时候,弹窗,进行表单的填写,确定后,回填到报表中。
一、设置数据源、报表
designerInitialized方法中,设置数据源,初始化报表,以及设置模板
  1. designerInitialized(designer) {
  2.       this.designer = designer;
  3.       const spread = designer.getWorkbook()
  4.       this.spreadDom = spread.getHost()
  5.       spread.suspendPaint()
  6.       const reportSheet = spread.addSheetTab(0, '报表1', GC.Spread.Sheets.SheetType.reportSheet);
  7.       const templateSheet = reportSheet.getTemplate();
  8.       templateSheet.getRange(0, 0, 2, 4).backColor('pink')
  9.       let data = [
  10.         {id: 1, name: "张三", age: 27, sex: 0},
  11.         {id: 2, name: "李四", age: 31, sex: 1},
  12.         {id: 3, name: "小王", age: 22, sex: 1},
  13.         {id: 4, name: "小韩", age: 45, sex: 0},
  14.         {id: 5, name: "小明", age: 25, sex: 0},
  15.       ];
  16.       const ordersTable = spread.dataManager().addTable('person', {data});
  17.       ordersTable.fetch().then(() => {
  18.         const columns = ['id', 'name', 'age', 'sex'];
  19.         columns.forEach((columnName, i) => {
  20.           templateSheet.setValue(0, i, columnName);
  21.           let obj = {
  22.             type: 'List',
  23.             binding: `person[${columnName}]`,
  24.           };
  25.           if (i == 0) {
  26.             obj.defaultValue = "=sjs.uuid()"
  27.           }
  28.           templateSheet.setTemplateCell(1, i, obj);
  29.         });
  30.         templateSheet.getRange(0, 0, 2, 4).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
  31.         templateSheet.getRange(0, 0, 2, 4).borderLeft(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
  32.         templateSheet.getRange(0, 0, 2, 4).borderRight(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
  33.         templateSheet.getRange(0, 0, 2, 4).borderTop(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
  34.         templateSheet.getRange(0, 0, 2, 4).borderBottom(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
  35.         templateSheet.setFormatter(1,3,'[=0]男;[=1]女')
  36.         templateSheet.setColumnVisible(0,false)

  37.         reportSheet.refresh();

  38.       });
  39.       reportSheet.renderMode('Preview');
  40.       spread.resumePaint()
  41.     },
复制代码
在上述代码中,我们设置了静态数据源,添加了报表,并且在template中设置了字段,添加了样式。
上述代码中,需要注意的是,我们为id设置了默认值,=sjs.uuid(),所以在数据填报时,可以将此字段隐藏。
二、设置弹窗
  1. <el-drawer
  2.       title="请添加记录!"
  3.       :before-close="handleClose"
  4.       :visible.sync="dialog"
  5.       direction="rtl"
  6.       custom-class="demo-drawer"
  7.       ref="drawer"
  8.     >
  9.       <div class="demo-drawer__content">
  10.         <el-form :model="form">
  11.           <el-form-item label="姓名" :label-width="formLabelWidth">
  12.             <el-input v-model="form.name" autocomplete="off"></el-input>
  13.           </el-form-item>
  14.           <el-form-item label="年龄" :label-width="formLabelWidth">
  15.             <el-input v-model="form.age" autocomplete="off"></el-input>
  16.           </el-form-item>
  17.           <el-form-item label="性别" :label-width="formLabelWidth">
  18.             <el-select v-model="form.sex">
  19.               <el-option label="男" value="0"></el-option>
  20.               <el-option label="女" value="1"></el-option>
  21.             </el-select>
  22.           </el-form-item>
  23.         </el-form>
  24.         <div class="demo-drawer__footer">
  25.           <el-button @click="cancelForm">取 消</el-button>
  26.           <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">
  27.             {{ loading ? '提交中 ...' : '确 定' }}
  28.           </el-button>
  29.         </div>
  30.       </div>
  31.     </el-drawer>
复制代码
下面是data数据

  1. data: function () {

  2.     return {
  3.       dialog: false,
  4.       loading: false,
  5.       form: {
  6.         name: '',
  7.         age: "",
  8.         sex: ""
  9.       },
  10.       formLabelWidth: '80px',
  11.       timer: null,
  12.       styleInfo: {height: "98vh", width: '100%'},
  13.       designer: null,
  14.       spreadDom: null
  15.     };
复制代码

三、设置右键菜单
我们需要修改下“添加记录”对应的逻辑,使dialog参数为true
  1. var designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
  2.       let newCommand = GC.Spread.Sheets.Designer.getCommand('reportSheetAddRecord');
  3.       newCommand.execute = () => {
  4.         console.log('this.dialog', this.dialog)
  5.         this.dialog = true
  6.       }
  7.       designerConfig.commandMap = {"reportSheetAddRecord": newCommand};
  8.       designer.setConfig(designerConfig)
复制代码

四、设置添加记录
  1.    handleClose(done) {
  2.       if (this.loading) {
  3.         return;
  4.       }
  5.       let spread = GC.Spread.Sheets.findControl(this.spreadDom)
  6.       let reportSheet = spread.getActiveSheetTab()
  7.       let sheet = reportSheet.getSheet();
  8.       let  activeCellRow = sheet.getActiveRowIndex() ;
  9.       let  activeCellColumn = sheet.getActiveColumnIndex();
  10.       reportSheet.addRecordAt(activeCellRow, activeCellColumn);
  11.       //addRecordAt会改变active cell 所以需要重新获取下activeCellRow和activeCellColumn
  12.       activeCellRow = sheet.getActiveRowIndex();
  13.       activeCellColumn = sheet.getActiveColumnIndex();
  14.       reportSheet.updateCellValue(activeCellRow, activeCellColumn , this.form.name)
  15.       reportSheet.updateCellValue(activeCellRow, activeCellColumn + 1, this.form.age)
  16.       reportSheet.updateCellValue(activeCellRow, activeCellColumn + 2, this.form.sex)
  17.       this.form.name = ''
  18.       this.form.age = ''
  19.       this.form.sex = ''
  20.       done()
  21.     },
复制代码

最后结果:
弹窗添加记录.gif
demo:
ElDrawer.zip (22.75 KB, 下载次数: 0)

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部