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

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

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

首先，我们需要引入一个弹窗组件，本文以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. 
    
38.         reportSheet.refresh();
    
39. 
    
40.       });
    
41.       reportSheet.renderMode('Preview');
    
42.       spread.resumePaint()
    
43.     },

复制代码

在上述代码中，我们设置了静态数据源，添加了报表，并且在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. 
   
2. data: function () {
   
3. 
   
4.     return {
   
5.       dialog: false,
   
6.       loading: false,
   
7.       form: {
   
8.         name: '',
   
9.         age: "",
   
10.         sex: ""
    
11.       },
    
12.       formLabelWidth: '80px',
    
13.       timer: null,
    
14.       styleInfo: {height: "98vh", width: '100%'},
    
15.       designer: null,
    
16.       spreadDom: null
    
17.     };
    

复制代码

三、设置右键菜单
我们需要修改下“添加记录”对应的逻辑，使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.     },

复制代码

最后结果：

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

2024-10-29 15:07 上传

点击文件名下载附件