怎么修改gc-sjsdesigner-dialog的css样式

Wilson.Zhang · Wilson.Zhang

您好！测试了下，可以通过<style>标签引入样式生效，如下图所示。需要您提供一个能够复现问题的完整demo，仅复现问题即可，不用携带不便公开的代码和数据。
1727334653699.png195594786.png

闲着 · 闲着

Wilson.Zhang 发表于 2024-9-26 15:11
您好！测试了下，可以通过标签引入样式生效，如下图所示。需要您提供一个能够复现问题的完整demo，仅复现问 ...

<template>
<div id="custom-form">
<el-button icon="el-icon-folder-opened" size="mini" type="warning" @click="save">导出</el-button>
<el-button icon="el-icon-folder-opened" size="mini" type="warning" @click="save1">测试</el-button>
<gc-spread-sheets-designer class="sample-spreadsheets"
:config='config'
@designerInitialized="designerInitialized">
</gc-spread-sheets-designer>
</div>
</template>
<script>
import GC from "@grapecity/spread-sheets";
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets-designer-resources-cn'
import '@grapecity/spread-sheets-designer-vue'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-io';
import '@grapecity/spread-sheets-pdf';
import '@grapecity/spread-sheets-print';
import * as ExcelIO from "@grapecity/spread-excelio";
GC.Spread.Common.CultureManager.culture("zh-cn");
export default {
name: 'App',
data: () => ({
spread: null,
sheet: null,
header: null,
config: null,
edit:false,
table: [],
zylbData: {},
projectData: {},
loading: true,
backLoading: false,
}),
methods: {
save() {
// 创建ExcelIO实例
let excelIo = new GC.Spread.Excel.IO();
// 导出工作簿
var serializationOption = {
includeBindingSource: true, // 将绑定源包含在将工作簿转换为 JSON 时，默认值为 false
ignoreStyle: true, // 在将工作簿转换为 JSON 时忽略样式，默认值为 false
ignoreFormula: true, // 在将工作簿转换为 JSON 时忽略公式，默认值为 false
saveAsView: true, // 在将工作簿转换为 JSON 时包含格式化结果，默认值为 false
rowHeadersAsFrozenColumns: true, // 在将工作簿转换为 JSON 时将行标题视为冻结列，默认值为 false
columnHeadersAsFrozenRows: true, // 在将工作簿转换为 JSON 时将列标题视为冻结行，默认值为 false
includeAutoMergedCells: true // 在将工作簿转换为 JSON 时包含自动合并的单元格到实际合并的单元格中
}
var json = JSON.stringify(this.spread.toJSON(serializationOption));
excelIo.save(json, function(blob) {
// 使用FileSaver保存文件
saveAs(blob, 'exportedFile.xlsx');
}, function(e) {
if (e.errorCode === 1) {
alert(e.errorMessage);
}
})
},
save1(){
var lxs = ['ZXL-PROJ','ZXL-WBSC','KTJ-WBL','FGS-WBL'];
console.log(lxs.indexOf('KTJ-WBL'))
},
designerInitialized (value) {
this.designer = value;
this.spread = this.designer.getWorkbook(); //获取表格
this.spread.suspendPaint();
this.spread.options.newTabVisible = false; //关闭新建sheet页按钮
this.spread.options.scrollbarShowMax = true; // 显示的滚动条是否基于表单中的完整列数和行数
this.spread.options.scrollbarMaxAlign = true; // 滚动条是否与活动表单的最后一行和一列对齐
this.spread.options.allowUserResize= true;//是否允许用户调整列和行的大小
document.getElementsByClassName('gc-ribbon-bar')[0].style.display='none'; //隐藏上面开始（字体。。。）等设计器的 Excel 功能
let sheet = this.spread.getSheet(0)
let option = {allowResizeRows: true, allowResizeColumns: true,};//设置可以调整行高和列宽
sheet.options.protectionOptions = option;
sheet.options.isProtected = true;//开启表单保护模式
// //spreadJs的提示信息保护框屏蔽
// this.spread.unbind(GC.Spread.Sheets.Events.InvalidOperation + ".GC_Designer_Events");
// //修改spreadJs保护框的提示信息
// sheet.bind(GC.Spread.Sheets.Events.InvalidOperation, function (e, info) {
// alert("Message (" + info.message + ")");
// });
// 启用列宽拖拽功能
sheet.addSpan(0, 0, 2, 17);
sheet.setValue(0, 0, '单位维保类项目前置论证方案');
sheet.addSpan(2, 0, 2, 4);
sheet.setValue(2, 0, '项目分类');
sheet.addSpan(2, 4, 2, 2);
sheet.setValue(2, 4, '项目一级分类');
sheet.addSpan(2, 6, 2, 2);
sheet.addSpan(2, 8, 2, 2);
sheet.setValue(2, 8, '项目二级分类');
sheet.addSpan(8, 0, 2, 3);
sheet.setValue(8, 0, '项目预计估算成本(万元）');
sheet.addSpan(8, 3, 2, 4);
sheet.setFormula(8, 3, '=ROUND(J9+N9,0)');
sheet.addSpan(8, 7, 2, 2);
sheet.setValue(8, 7, '外部成本');
sheet.addSpan(8, 9, 2, 2);
sheet.addSpan(8, 11, 2, 2);
sheet.setValue(8, 11, '分公司内部劳务');
sheet.addSpan(8, 13, 2, 10);
//自定义添加提示信息
var cnResource = GC.Spread.Common.CultureManager.getResources("zh-cn")
cnResource.Sheets.Exp_InvalidOperationInProtect = "槽糕，出错了1！"
cnResource.Sheets.Exp_PasteChangeMergeCell = "槽糕，出错了2！"
GC.Spread.Common.CultureManager.addCultureInfo("zh-cn", null, cnResource);
var res = GC.Spread.Sheets.Designer.getResources();
res.title = "xx 设计器";
console.log(JSON.stringify(cnResource))
// sheet.options.isProtected = false;
this.spread.resumePaint();
},
handleCloseModal(){
this.edit = false
}
}
}
</script>
<style scoped>
.custom-form-row {
display: flex;
flex-direction: row;
margin-bottom: 8px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: auto;
}
.sample-spreadsheets-container {
width: calc(100%);
height: 700px;
overflow: auto;
float: left;
}
.sample-spreadsheets {
width: 100%;
height: 560px;
}
.sample-loading {
display: block;
position: absolute;
background-color: #eceaf1;
z-index: 99999;
opacity: 0.8;
margin-left: 45%;
margin-top: 10%;
}
.custom-margin-fix {
margin-left: 8px;
}
/deep/.gc-sjsdesigner-dialog{
position: absolute !important;
z-index: 99999 !important;
opacity: 18 !important;
color: chartreuse !important;
border: chartreuse !important;
}
.gc-sjsdesigner-dialog{
position: absolute !important;
z-index: 99999 !important;
opacity: 18 !important;
color: chartreuse !important;
border: chartreuse !important;
background-color: chartreuse;
}
</style>

复制代码

Wilson.Zhang · Wilson.Zhang

闲着发表于 2024-9-26 15:21

收到demo，测验后向您同步结论。

Wilson.Zhang · Wilson.Zhang

您好！您提供的代码片段中引用了您项目工程内部的资源，我们将其注释后未能复现问题。您方便提供一个能复现问题的可运行demo吗？这样能保证咱们运行的文件一致，便于分析问题。

Wilson.Zhang · Wilson.Zhang

您好！或者您尝试下通过document获取DOM元素，对DOM元素设置相应的style属性，看看能否满足需要。

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

[处理中] 怎么修改gc-sjsdesigner-dialog的css样式