mirror of https://gitee.com/lmlz_0/dc-ui.git
18512435990
1 year ago
6 changed files with 265 additions and 7 deletions
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<div style="margin: 10px;"> |
|||
|
|||
webscoket |
|||
|
|||
<luckysheet :config = "luckysheetConfig"></luckysheet> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref,defineComponent,nextTick } from 'vue'; |
|||
import luckysheet from '../../../components/luckysheet/index.vue'; |
|||
import {getMesh} from './h'; |
|||
|
|||
const luckysheetConfig = ref({ |
|||
title: 'LuckySheet', // 表头名 |
|||
allowCopy: true, // 是否允许拷贝 |
|||
showtoolbar: true, // 是否显示工具栏 |
|||
showinfobar: false, // 是否显示顶部信息栏 |
|||
showsheetbar: true, // 是否显示底部sheet页按钮 |
|||
showstatisticBar: false, // 是否显示底部计数栏 |
|||
sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置 |
|||
allowEdit: true, // 是否允许前台编辑 |
|||
enableAddRow: false, // 允许增加行 |
|||
enableAddCol: false, // 允许增加列 |
|||
userInfo: true, // 右上角的用户信息展示样式 |
|||
showRowBar: false, // 是否显示行号区域 |
|||
showColumnBar: false, // 是否显示列号区域 |
|||
sheetFormulaBar: true, // 是否显示公式栏 |
|||
enableAddBackTop: false, //返回头部按钮 |
|||
rowHeaderWidth: 46, //行标题区域的宽度，如果设置为0，则表示隐藏行标题 |
|||
columnHeaderHeight: 20, //列标题区域的高度，如果设置为0，则表示隐藏列标题 |
|||
data: [ |
|||
//默认数据(部分参数) |
|||
{ |
|||
name: 'Sheet1', //工作表名称 |
|||
color: '', //工作表颜色 |
|||
index: 0, //工作表索引 |
|||
status: 1, //激活状态 |
|||
order: 0, //工作表的下标 |
|||
hide: 0, //是否隐藏 |
|||
row: 30, //行数 |
|||
column: 30, //列数 |
|||
defaultRowHeight: 19, //自定义行高 |
|||
defaultColWidth: 73 //自定义列宽 |
|||
}, |
|||
{ |
|||
name: 'Sheet2', //工作表名称 |
|||
color: '', //工作表颜色 |
|||
index: 1, //工作表索引 |
|||
status: 0, //激活状态 |
|||
order: 1, //工作表的下标 |
|||
hide: 0, //是否隐藏 |
|||
row: 30, //行数 |
|||
column: 30, //列数 |
|||
defaultRowHeight: 19, //自定义行高 |
|||
defaultColWidth: 73 //自定义列宽 |
|||
}, |
|||
{ |
|||
name: 'Sheet3', //工作表名称 |
|||
color: '', //工作表颜色 |
|||
index: 2, //工作表索引 |
|||
status: 0, //激活状态 |
|||
order: 2, //工作表的下标 |
|||
hide: 0, //是否隐藏 |
|||
row: 30, //行数 |
|||
column: 30, //列数 |
|||
defaultRowHeight: 19, //自定义行高 |
|||
defaultColWidth: 73 //自定义列宽 |
|||
} |
|||
] |
|||
}); |
|||
|
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,179 @@ |
|||
// 取结构
|
|||
export function getMesh() { |
|||
|
|||
/** |
|||
* 1.struct 渲染结构 |
|||
* 1.1 vnode 属性 |
|||
* 1.1.1 key 标识 |
|||
* 1.1.2 type 控件类型 |
|||
* 1.1.3 style 设计样式 |
|||
* 1.1.4 items 子组件 |
|||
* 1.1.5 valueType 值类型(0文本,1动态数据,2多标签组合,3按钮) |
|||
* 1.1.6 value 值 |
|||
* 1.1.7 rowIndex 行号 |
|||
* 1.1.8 colIndex 列号 |
|||
* 1.1.9 event 事件(对象{name:'onClick',fun:'callfun',param:{code:'P00005'}}) |
|||
* 1.1.10 class 动态样式(告警"红字") |
|||
* |
|||
* 1.2 事件对象 event |
|||
* 1.2.1 name 事件名 |
|||
* 1.2.2 fun 方法名(外部组件方法。例:'callfun') |
|||
* 1.2.3 param 参数 |
|||
* |
|||
* 1.3 参数对象 param |
|||
* 1.3.1 code 编码(文本处理) |
|||
* 1.3.2 value 动态值(props处理) |
|||
* |
|||
* 2.data 数据结构 |
|||
* 2.1 对象名为参数编码P00001 |
|||
* 2.2 值初始化为空 |
|||
* 2.3 例:{P00001:23,P00002:22,P00003:2222,P00004:45.8,P00005:32.6,P00006:88} |
|||
* |
|||
*/ |
|||
return { |
|||
struct: { |
|||
key:123, |
|||
type:"table", |
|||
style:'', |
|||
class:'tw', |
|||
items:[ |
|||
{ |
|||
type:"tr", |
|||
rowIndex:0, |
|||
items:[ |
|||
{ |
|||
type:"th", |
|||
colIndex:0, |
|||
valueType:0, |
|||
value:"#", |
|||
style:'width: 80px' |
|||
}, |
|||
{ |
|||
type:"th", |
|||
colIndex:1, |
|||
valueType:0, |
|||
value:"一供温", |
|||
style:'width: 100px' |
|||
}, |
|||
{ |
|||
type:"th", |
|||
colIndex:2, |
|||
valueType:0, |
|||
value:"一回温", |
|||
style:'width: 100px' |
|||
}, |
|||
{ |
|||
type:"th", |
|||
colIndex:3, |
|||
valueType:0, |
|||
value:"二供温", |
|||
style:'width: 100px' |
|||
}, |
|||
] |
|||
}, |
|||
{ |
|||
type:"tr", |
|||
rowIndex:1, |
|||
items:[ |
|||
{ |
|||
type:"td", |
|||
colIndex:0, |
|||
key:1-0, |
|||
valueType:0, |
|||
value:"万盈大厦", |
|||
style:'' |
|||
}, |
|||
{ |
|||
type: "td", |
|||
colIndex: 1, |
|||
key: 1-1, |
|||
valueType: 1, |
|||
code: 'P00001', |
|||
style: '' |
|||
}, |
|||
{ |
|||
type: "td", |
|||
colIndex: 2, |
|||
key: 1-2, |
|||
valueType: 1, |
|||
code: "P00002", |
|||
style: '' |
|||
}, |
|||
{ |
|||
type: "td", |
|||
colIndex: 3, |
|||
key: 1-3, |
|||
valueType: 1, |
|||
code: "P00003", |
|||
style: '' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
type: "tr", |
|||
rowIndex: 2, |
|||
style: "height:150px ;", |
|||
items: [ |
|||
{ |
|||
type:"td", |
|||
colIndex:0, |
|||
key:2-1, |
|||
valueType:0, |
|||
value:"民丰大厦", |
|||
style:'' |
|||
}, |
|||
{ |
|||
type:"td", |
|||
colIndex:1, |
|||
key:2-2, |
|||
valueType:1, |
|||
code:'P00004', |
|||
style:'' |
|||
}, |
|||
{ |
|||
type: "td", |
|||
colIndex: 2, |
|||
key: 2-3, |
|||
valueType: 2, |
|||
items: [ |
|||
{ |
|||
type: "div", |
|||
style: "margin-left: 3px;float: left;margin-top: 3px;", |
|||
valueType: 1, |
|||
code: 'P00005' |
|||
}, |
|||
{ |
|||
type: "div", |
|||
class: "btn", |
|||
valueType: 3, |
|||
event: 'onClick', |
|||
fun: "callfun", |
|||
param: { |
|||
value: 'P00005' |
|||
} |
|||
} |
|||
] |
|||
} |
|||
, |
|||
{ |
|||
type:"td", |
|||
colIndex:3, |
|||
key:2-4, |
|||
valueType:1, |
|||
code:"P00006", |
|||
style:'' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}, |
|||
params: { |
|||
P00001: 0, |
|||
P00002: 12, |
|||
P00003: 0, |
|||
P00004: 0, |
|||
P00005: 0, |
|||
P00006: 0 |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue