Browse Source

luckySheet测试

develop
18512435990 12 months ago
parent
commit
8951cced78
  1. 12
      index.html
  2. BIN
      src/assets/icons/png/edit.png
  3. 2
      src/components/luckysheet/index.vue
  4. 79
      src/views/model/viewdesgin/desgin.vue
  5. 179
      src/views/model/viewdesgin/h.js
  6. 0
      src/views/model/viewdesgin/index.vue

12
index.html

@ -7,13 +7,13 @@
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico">
<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<link rel='stylesheet' href='./public/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./public/plugins/plugins.css' />
<link rel='stylesheet' href='./public/css/luckysheet.css' />
<link rel='stylesheet' href='./public/assets/iconfont/iconfont.css' />
<script src="./public/plugins/js/plugin.js"></script>
<!-- rollup luckysheet.js -->
<script src="./luckysheet.umd.js"></script>
<script src="./public/luckysheet.umd.js"></script>
<title>联美运营系统</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style>

BIN
src/assets/icons/png/edit.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

2
src/components/luckysheet/index.vue

@ -23,7 +23,7 @@ onMounted(() => {
const init = () => {
var options = {
container: 'luckysheet', //luckysheetid
title: config.title, //
title: config.title, // config.title
lang: 'zh', // ("zh")("en")
allowCopy: config.allowCopy, //
showtoolbar: config.showtoolbar, //

79
src/views/model/viewdesgin/desgin.vue

@ -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>

179
src/views/model/viewdesgin/h.js

@ -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
}
}
}

0
src/views/model/viewdesgin/index.vue

Loading…
Cancel
Save