报表插件（ReportSheet）实现添加记录时弹窗输入表单内容

收藏

在ReportSheet预览模式下，如果需要添加记录，我们此时可以右键，出现上下文菜单，选择“添加记录”。发现会出现一个空白行进行数据填报。

但是当列很多，希望弹窗一个窗口，用Form表单的形式去添加记录，该如何实现呢？
下文，我们将探索这个需求。
image.png35348204.png

首先，我们需要引入一个弹窗组件，本文以Element-UI组件中的Drawer组件为例进行介绍。
接下来，我将介绍如何在添加记录的时候，弹窗，进行表单的填写，确定后，回填到报表中。
一、设置数据源、报表
在designerInitialized方法中，设置数据源，初始化报表，以及设置模板

designerInitialized(designer) {
this.designer = designer;
const spread = designer.getWorkbook()
this.spreadDom = spread.getHost()
spread.suspendPaint()
const reportSheet = spread.addSheetTab(0, '报表1', GC.Spread.Sheets.SheetType.reportSheet);
const templateSheet = reportSheet.getTemplate();
templateSheet.getRange(0, 0, 2, 4).backColor('pink')
let data = [
{id: 1, name: "张三", age: 27, sex: 0},
{id: 2, name: "李四", age: 31, sex: 1},
{id: 3, name: "小王", age: 22, sex: 1},
{id: 4, name: "小韩", age: 45, sex: 0},
{id: 5, name: "小明", age: 25, sex: 0},
];
const ordersTable = spread.dataManager().addTable('person', {data});
ordersTable.fetch().then(() => {
const columns = ['id', 'name', 'age', 'sex'];
columns.forEach((columnName, i) => {
templateSheet.setValue(0, i, columnName);
let obj = {
type: 'List',
binding: `person[${columnName}]`,
};
if (i == 0) {
obj.defaultValue = "=sjs.uuid()"
}
templateSheet.setTemplateCell(1, i, obj);
});
templateSheet.getRange(0, 0, 2, 4).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
templateSheet.getRange(0, 0, 2, 4).borderLeft(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
templateSheet.getRange(0, 0, 2, 4).borderRight(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
templateSheet.getRange(0, 0, 2, 4).borderTop(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
templateSheet.getRange(0, 0, 2, 4).borderBottom(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
templateSheet.setFormatter(1,3,'[=0]男;[=1]女')
templateSheet.setColumnVisible(0,false)
reportSheet.refresh();
});
reportSheet.renderMode('Preview');
spread.resumePaint()
},

复制代码

在上述代码中，我们设置了静态数据源，添加了报表，并且在template中设置了字段，添加了样式。
上述代码中，需要注意的是，我们为id设置了默认值，=sjs.uuid()，所以在数据填报时，可以将此字段隐藏。
二、设置弹窗

<el-drawer
title="请添加记录!"
:before-close="handleClose"
:visible.sync="dialog"
direction="rtl"
custom-class="demo-drawer"
ref="drawer"
>
<div class="demo-drawer__content">
<el-form :model="form">
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth">
<el-input v-model="form.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth">
<el-select v-model="form.sex">
<el-option label="男" value="0"></el-option>
<el-option label="女" value="1"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="cancelForm">取消</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">
{{ loading ? '提交中 ...' : '确定' }}
</el-button>
</div>
</div>
</el-drawer>

复制代码

下面是data数据

data: function () {
return {
dialog: false,
loading: false,
form: {
name: '',
age: "",
sex: ""
},
formLabelWidth: '80px',
timer: null,
styleInfo: {height: "98vh", width: '100%'},
designer: null,
spreadDom: null
};

复制代码

三、设置右键菜单
我们需要修改下“添加记录”对应的逻辑，使dialog参数为true

var designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
let newCommand = GC.Spread.Sheets.Designer.getCommand('reportSheetAddRecord');
newCommand.execute = () => {
console.log('this.dialog', this.dialog)
this.dialog = true
}
designerConfig.commandMap = {"reportSheetAddRecord": newCommand};
designer.setConfig(designerConfig)

复制代码

四、设置添加记录

handleClose(done) {
if (this.loading) {
return;
}
let spread = GC.Spread.Sheets.findControl(this.spreadDom)
let reportSheet = spread.getActiveSheetTab()
let sheet = reportSheet.getSheet();
let activeCellRow = sheet.getActiveRowIndex() ;
let activeCellColumn = sheet.getActiveColumnIndex();
reportSheet.addRecordAt(activeCellRow, activeCellColumn);
//addRecordAt会改变active cell 所以需要重新获取下activeCellRow和activeCellColumn
activeCellRow = sheet.getActiveRowIndex();
activeCellColumn = sheet.getActiveColumnIndex();
reportSheet.updateCellValue(activeCellRow, activeCellColumn , this.form.name)
reportSheet.updateCellValue(activeCellRow, activeCellColumn + 1, this.form.age)
reportSheet.updateCellValue(activeCellRow, activeCellColumn + 2, this.form.sex)
this.form.name = ''
this.form.age = ''
this.form.sex = ''
done()
},

复制代码

最后结果：

demo:

ElDrawer.zip (22.75 KB, 下载次数: 8)

		自动登录	找回密码
密码			立即注册

报表插件（ReportSheet）实现添加记录时弹窗输入表单内容

0 个回复

SpreadJS 认证

SpreadJS 高级认证