luckySheet测试

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='./public/plugins/css/pluginsCss.css' />
-	<link rel='stylesheet' href='./plugins/plugins.css' />
+	<link rel='stylesheet' href='./public/plugins/plugins.css' />
-	<link rel='stylesheet' href='./css/luckysheet.css' />
+	<link rel='stylesheet' href='./public/css/luckysheet.css' />
-	<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
+	<link rel='stylesheet' href='./public/assets/iconfont/iconfont.css' />
-	<script src="./plugins/js/plugin.js"></script>
+	<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>

src/components/luckysheet/index.vue

@@ -23,7 +23,7 @@ onMounted(() => {
 const init = () => {
   var options = {
     container: 'luckysheet', //luckysheet为容器id
-    title: config.title, // 表头名
+    title: config.title, // 表头名config.title
     lang: 'zh', // 设定表格语言国际化设置，允许设置表格的语言，支持中文("zh")和英文("en")
     allowCopy: config.allowCopy, // 是否允许拷贝
     showtoolbar: config.showtoolbar, // 是否显示工具栏

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>

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