【看板展示】【form、table标题定义/table行定义/打包调整...】

kanban-client/README.md

@@ -50,6 +50,14 @@ columns[i].rowStyle---------------指定列数据列样式
 * table排序添加，刷新比较相应比较排序之后的data
 * form、gri定义的style不再去掉空格（支持样式定义如：border: 1px solie white）
 * form局部style默认不再返回{}，而是undefined（不再覆盖全局样式）
+* form、table数据空检验（允许data为空）
+* 修改form、table的标题设置解析
+##### 20170927
+* 打包文件结构调整，去除版本控制
+* form增加render属性
+##### 20170928
+* table行定义很小时字体会显得很大，调整为最大不超过屏幕适配大小（行数定义过大仍然会使字体变得很小以显示出定义的行数）
+* 
 #### 运行
 * 本地运行
 ```

kanban-client/app/component/Table.jsx

@@ -85,18 +85,20 @@ class TableModel extends React.Component {
 
 	// 调整行
 	adaptiveRowSize() {
+		const { fontSize, pageSize } = this.newProps;
 		let node = this.refs.body;
 		let title = node.getElementsByClassName('rc-table-title')[0] || { offsetHeight: 0 };
 		let thead = node.getElementsByClassName('rc-table-thead')[0];
 		this.cHeight = node.offsetHeight - title.offsetHeight - 4;
-		thead.style.fontSize = `${this.rowHeight * .6}px`;
-		thead.style.height = `${this.cHeight / (this.rowCount + 1)}px`;
+		let trHeight = (this.cHeight) / (this.rowCount + 1);
+		thead.style.fontSize = pageSize ? `${fontSize/.6 > trHeight ? trHeight * .6 : fontSize}px` : `${trHeight * .6}px`;
 		let count = this.state.data.length;
 		if (count == 0) { return; }
 		let trs = node.getElementsByClassName('fade-enter');
 		for (let i = 0; i < trs.length; i++) {
-			trs[i].style.height = `${this.cHeight / (this.rowCount + 1)}px`;
-			trs[i].style.fontSize = `${this.rowHeight * .6}px`;
+			let trHeight = (this.cHeight - thead.offsetHeight) / (this.rowCount);
+			trs[i].style.height = `${trHeight}px` ;
+			trs[i].style.fontSize = pageSize ? `${fontSize/.6 > trHeight ? trHeight * .6 : fontSize}px` : `${trHeight * .6}px`;
 		}
 	}
 
@@ -177,7 +179,7 @@ class TableModel extends React.Component {
 
 	changeData() {
 		this.setState({
-			data: this.dataArr[this.dataIndex]
+			data: this.dataArr[this.dataIndex] || []
 		}, () => {
 			this.onShow();
 			this.dataIndex++;
@@ -231,9 +233,9 @@ class TableModel extends React.Component {
 
 	getTitle() {
 		const { title } = this.newProps;
-		return function (state) {
+		// return function (state) {
 			return title;
-		}
+		// }
 	}
 
 	render() {

kanban-client/app/component/converter.js

@@ -30,15 +30,15 @@ function converter(data) {
 
 function titleConfig(title) {
     return {
-        title: title,
+        title: replaceSpecTag(title),
         fontSize: getFontSize()
     }
 }
 
 function formConfig(model) {
-    let { type, header, config, layout } = model;
-    let { fontSize, fieldstyle, valuestyle, columns, data } = config;
-    data = data.map((d) => {
+    let { type, config, layout } = model;
+    let { fontSize, header, fieldStyle, valueStyle, columns, data } = config;
+    data = data ? data.map((d) => {
         d.field = {
             text: d.field.text,
             style: parseStyleStr(d.field.style)
@@ -47,15 +47,16 @@ function formConfig(model) {
             text: d.value.text,
             style: parseStyleStr(d.value.style)
         };
+        d.render = renderFunction(d.render);
         return d;
-    });
+    }) : [];
     let c = {
         type: 'form',
         config: {
             fontSize: fontSize || getFontSize(),
-            header: header,
-            fieldStyle: parseStyleStr(fieldstyle),
-            valueStyle: parseStyleStr(valuestyle),
+            header: renderFunction(header),
+            fieldStyle: parseStyleStr(fieldStyle),
+            valueStyle: parseStyleStr(valueStyle),
             columns,
             data
         },
@@ -73,17 +74,20 @@ function tableConfig(model) {
             fontSize: fontSize || getFontSize(),
             pageSize: pagesize,
             refreshInterval: interval,
-            title: title,
+            title: renderFunction(title),
             render: renderFunction(render),
-            columns: columns.map((v, i) => {
+            columns: columns ? columns.map((v, i) => {
                 v.key = i;
                 v.render = renderFunction(v.render);
+                v.rowStyle = parseStyleStr(v.rowstyle);
                 return v;
-            }),
-            data: data.map((v, i) => {
-                v.key = i;
+            }) : [],
+            data: data ? data.map((v, i) => {
+                if(v){
+                    v.key = i;
+                }
                 return v;
-            }),
+            }) : [],
             headerRowsStyle: parseStyleStr(headerrowsstyle),
             rowsStyle: parseStyleStr(rowsstyle),
         },
@@ -94,7 +98,6 @@ function tableConfig(model) {
 function barConfig(model) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series } = config;
-
     let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(','));
     return {
         type: 'charts',
@@ -263,7 +266,8 @@ function pieConfig(model) {
 }
 
 function renderFunction(funcStr) {
-    let func = function (_v, _r, _i) { return { children: _v, props: {} } };
+    // let func = function (_v, _r, _i) { return { children: _v, props: {} } };
+    let func = undefined;
     try {
         func = (new Function("return " + funcStr))();
     } catch (ex) {
@@ -425,6 +429,23 @@ function parseStyleStr(str) {
     return obj
 }
 
+function replaceSpecTag(str) {
+    if (str) {
+        if (typeof (str) === 'string') {
+            return str.replace(/&/g, '&')
+                .replace(/&lt;/g, '<')
+                .replace(/&gt;/g, '>')
+                .replace(/&apos;/g, '\'')
+                .replace(/&quot;/g, '"')
+                .replace(/&nbsp;/g, ' ');
+        } else {
+            return str;
+        }
+    } else {
+        return str;
+    }
+}
+
 function getScreenSize() {
     let root = document.getElementById('root');
     let height = root.offsetHeight;

kanban-client/app/component/factory.dev.js

@@ -5,7 +5,7 @@ import MessageBox from '../src/MsgBox/MessageBox.jsx';
 import { converter } from './converter.js';
 import URL from '../constants/url.dev.json';
 
-import tempdata from '../data/tempdata.json';
+import tempdata from '../data/testtable.json';
 
 class Factory extends React.Component {
 

kanban-client/app/data/testform.json

@@ -6,31 +6,29 @@
                     {
                         "layout": {
                             "w": 100,
-                            "h": 30,
+                            "h": 100,
                             "y": 0,
                             "x": 0
                         },
                         "config": {
-                            "fieldstyle": "color:red;border: 1px solid white;fontSize:20px",
-                            "valuestyle": "marginRight: 30px",
                             "data": [
                                 {
                                     "field": { "text": "公", "style": {"color": "red"}},
+                                    "value": { "text": "1000", "style": {"color": "red"}},
                                     "width": 100,
-                                    "value": { "text": "告", "style": {"color": "red"}}
+                                    "render": "function(f, v){var nv = v.text>900?'hah':v.text; return { field: f,value: {text: nv,style:v.style} }}"
                                 },
                                 {
-                                    "field": "字段2",
-                                    "value": 3
+                                    "field": { "text": "公", "style": {"color": "red"}},
+                                    "value": { "text": "告", "style": {"color": "red"}}
                                 },
                                 {
-                                    "field": "字段3",
-                                    "value": 5
+                                    "field": { "text": "公", "style": {"color": "red"}},
+                                    "value": { "text": "告", "style": {"color": "red"}}
                                 },
                                 {
-                                    "field": "字段4",
-                                    "width": 100,
-                                    "value": 3
+                                    "field": { "text": "公", "style": {"color": "red"}},
+                                    "value": { "text": "告", "style": {"color": "red"}}
                                 }
                             ],
                             "columns": 4

kanban-client/app/data/testtable.json

@@ -6,6 +6,7 @@
                     {
                         "type": "table",
                         "config": {
+                            "pagesize": 5,
                             "columns": [
                                 {
                                     "title": "时段",
@@ -151,14 +152,14 @@
                                     "desc": "1"
                                 }
                             ],
-                            "title": "123",
-                            "render": "function(value, record, index){return{children:value,props:{style:{color: 'blue'}}}}"
+                            "title": "function(){return {text: 'textAlign: left, height: 60, color: blue, fontSize: 16px', style: {textAlign: 'left', height: 60, color: 'blue', fontSize: '16px'}}}",
+                            "render": "function(value, record, index){return{children:value,props:{style:{color: 'white'}}}}"
                         },
                         "layout": {
                             "x": 0,
                             "y": 0,
-                            "w": 80,
-                            "h": 40
+                            "w": 100,
+                            "h": 50
                         }
                     }
                 ]

kanban-client/app/main.dev.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import Factory from './component/factory.dev.js';
 import DateFormatter from './utils/DateTimeUtils.js';
 
-var code = '547491E8D11';
+var code = '5685569BF11';
 
 ReactDOM.render(
     <Factory code={[code]} />,

kanban-client/app/src/Form/Form.jsx

@@ -15,7 +15,7 @@ export default class Form extends React.Component {
         prefixCls: PropTypes.string,
         cls: PropTypes.string,
         style: PropTypes.object,
-        header: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        header: PropTypes.func,
         columns: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     }
 
@@ -30,7 +30,7 @@ export default class Form extends React.Component {
         prefixCls: 'rc-form',
         cls: '',
         style: {},
-        header: '',
+        header: function() {return {text: '', style:{}}},
         columns: 1
     }
 
@@ -45,10 +45,15 @@ export default class Form extends React.Component {
 
     getHeader() {
         const { fontSize, header, prefixCls, columns } = this.state;
-        if (header) {
-            const headerEl = <thead style={{fontSize: fontSize}} className={`${prefixCls}-header`} key="form_header">
+        if (!header) {
+            return;
+        }
+        let helObj = header();
+        Object.assign(helObj.style, { fontSize: fontSize });
+        if (helObj) {
+            const headerEl = <thead style={helObj.style} className={`${prefixCls}-header`} key="form_header">
                 <tr>
-                    <td className={`${prefixCls}-header-content`} colSpan={'100%'}>{header}</td>
+                    <td className={`${prefixCls}-header-content`} colSpan={'100%'}>{helObj.text}</td>
                 </tr>
             </thead>;
             return headerEl;
@@ -59,7 +64,7 @@ export default class Form extends React.Component {
         const { fontSize, prefixCls, fieldCls, fieldStyle, valueCls, valueStyle } = this.state;
         const { columns } = this.state;
         let columnsData = this.getItemColumns();
-        const contentEl = <tbody style={{fontSize: fontSize}} className={`${prefixCls}-content`} key="form_content">
+        const contentEl = <tbody style={{ fontSize: fontSize }} className={`${prefixCls}-content`} key="form_content">
             {
                 columnsData.map((tr, i) => (
                     <tr className={`${prefixCls}-tr`} key={`content_item_tr_${i}`}>
@@ -101,7 +106,7 @@ export default class Form extends React.Component {
                     break inner;
                 }
             }
-            if(arr.length == 0) {
+            if (arr.length == 0) {
                 i++;
             }
             arr.map((a, x) => {
@@ -114,14 +119,14 @@ export default class Form extends React.Component {
 
     autoSize() {
         let node = this.refs.body;
-        let thead = node.getElementsByTagName('thead')[0];
+        let thead = node.getElementsByTagName('thead')[0] || { offsetHeight: 0 };
         let tbody = node.getElementsByTagName('tbody')[0];
-        if(tbody.offsetHeight + thead.offsetHeight <= (node.offsetHeight + 5)) {
+        if (tbody.offsetHeight + thead.offsetHeight <= (node.offsetHeight + 5)) {
             return;
         }
         let trs = tbody.getElementsByTagName('tr');
         let rowHeight = (node.offsetHeight - thead.offsetHeight) / trs.length;
-        for(let i = 0; i < trs.length; i++) {
+        for (let i = 0; i < trs.length; i++) {
             trs[i].style.fontSize = `${rowHeight * .6}px`
         };
     }
@@ -131,7 +136,7 @@ export default class Form extends React.Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        this.setState(nextProps,this.autoSize);
+        this.setState(nextProps, this.autoSize);
     }
 
     componentDidUpdate(prevProps) {

kanban-client/app/src/Form/FormItem.jsx

@@ -5,15 +5,14 @@ export default class FormItem extends React.Component {
 
   constructor(props) {
       super(props);
-
       this.state = {
           colSpan: props.colSpan,
-          field: typeof props.field === 'object' ? props.field.text : props.field,
+          field: props.render ? props.render(props.field, props.value).field.text : (typeof props.field === 'object' ? props.field.text : props.field),
           fieldCls: (typeof props.field === 'object' ? (props.field.cls ? props.field.cls : props.fieldCls) : props.fieldCls),
-          fieldStyle: (typeof props.field === 'object' ? (props.field.style ? props.field.style : props.fieldStyle) : props.fieldStyle),
-          value: typeof props.value === 'object' ? props.value.text : props.value,
+          fieldStyle: props.render ? props.render(props.field, props.value).field.style : (typeof props.field === 'object' ? (props.field.style ? props.field.style : props.fieldStyle) : props.fieldStyle),
+          value: props.render ? props.render(props.field, props.value).value.text : (typeof props.value === 'object' ? props.value.text : props.value),
           valueCls: (typeof props.value === 'object' ? (props.value.cls ? props.value.cls : props.valueCls) : props.valueCls),
-          valueStyle: (typeof props.value === 'object' ? (props.value.style ? props.value.style : props.valueStyle) : props.valueStyle),
+          valueStyle: props.render ? props.render(props.field, props.value).value.style : (typeof props.value === 'object' ? (props.value.style ? props.value.style : props.valueStyle) : props.valueStyle),
       };
   }
 
@@ -21,12 +20,12 @@ export default class FormItem extends React.Component {
       this.newProps = nextProps;
       this.setState({
           colSpan: nextProps.colSpan,
-          field: typeof nextProps.field === 'object' ? nextProps.field.text : nextProps.field,
+          field: nextProps.render ? nextProps.render(nextProps.field, nextProps.value).field.text : (typeof nextProps.field === 'object' ? nextProps.field.text : nextProps.field),
           fieldCls: (typeof nextProps.field === 'object' ? (nextProps.field.cls ? nextProps.field.cls : nextProps.fieldCls) : nextProps.fieldCls),
-          fieldStyle: (typeof nextProps.field === 'object' ? (nextProps.field.style ? nextProps.field.style : nextProps.fieldStyle) : nextProps.fieldStyle),
-          value: typeof nextProps.value === 'object' ? nextProps.value.text : nextProps.value,
+          fieldStyle: nextProps.render ? nextProps.render(nextProps.field, nextProps.value).field.style : (typeof nextProps.field === 'object' ? (nextProps.field.style ? nextProps.field.style : nextProps.fieldStyle) : nextProps.fieldStyle),
+          value: nextProps.render ? nextProps.render(nextProps.field, nextProps.value).value.text : (typeof nextProps.value === 'object' ? nextProps.value.text : nextProps.value),
           valueCls: (typeof nextProps.value === 'object' ? (nextProps.value.cls ? nextProps.value.cls : nextProps.valueCls) : nextProps.valueCls),
-          valueStyle: (typeof nextProps.value === 'object' ? (nextProps.value.style ? nextProps.value.style : nextProps.valueStyle) : nextProps.valueStyle),
+          valueStyle: nextProps.render ? nextProps.render(nextProps.field, nextProps.value).value.style : (typeof nextProps.value === 'object' ? (nextProps.value.style ? nextProps.value.style : nextProps.valueStyle) : nextProps.valueStyle),
 
       });
   }

kanban-client/app/src/Table/Table.jsx

@@ -53,12 +53,12 @@ export default class Table extends React.Component {
     rowKey: 'key',
     rowClassName: () => '',
     expandedRowClassName: () => '',
-    onExpand() {},
-    onExpandedRowsChange() {},
-    onRowClick() {},
-    onRowDoubleClick() {},
-    onRowMouseEnter() {},
-    onRowMouseLeave() {},
+    onExpand() { },
+    onExpandedRowsChange() { },
+    onRowClick() { },
+    onRowDoubleClick() { },
+    onRowMouseEnter() { },
+    onRowMouseLeave() { },
     prefixCls: 'rc-table',
     bodyStyle: {},
     style: {},
@@ -469,7 +469,7 @@ export default class Table extends React.Component {
         (fixed ? bodyStyle : headStyle).paddingBottom = '0px';
       }
     }
-    
+
     const renderTable = (hasHead = true, hasBody = true) => {
       const tableStyle = {};
       if (!fixed && scroll.x) {
@@ -559,26 +559,26 @@ export default class Table extends React.Component {
 
   getTitle() {
     const { title, prefixCls } = this.props;
-    if(!title) {
-      return ;
+    if (!title) {
+      return;
     }
-    let tel = title(this.props.state);
-    if(tel) {
-      const titleEl = <div className={`${prefixCls}-title`} key="title">
-          {tel}
-</div>;
-      return  titleEl;
+    let telObj = title(this.props.state);
+    if (telObj) {
+      const titleEl = <div className={`${prefixCls}-title`} style={telObj.style} key="title">
+        {telObj.text}
+      </div>;
+      return titleEl;
     }
   }
 
   getFooter() {
-  const { footer, prefixCls } = this.props;
-    let fel = typeof(footer) == 'function' ? footer(this.props.state) : footer;
-    if(fel) {
+    const { footer, prefixCls } = this.props;
+    let fel = typeof (footer) == 'function' ? footer(this.props.state) : footer;
+    if (fel) {
       const footerEl = <div className={`${prefixCls}-footer`} key="footer">
-          {fel}
-    </div>;
-      return  footerEl;
+        {fel}
+      </div>;
+      return footerEl;
     }
   }
 
@@ -651,8 +651,8 @@ export default class Table extends React.Component {
     }
     const { prefixCls } = this.props;
     const headRows = this.refs.headTable ?
-            this.refs.headTable.querySelectorAll('thead') :
-            this.refs.bodyTable.querySelectorAll('thead');
+      this.refs.headTable.querySelectorAll('thead') :
+      this.refs.bodyTable.querySelectorAll('thead');
     const bodyRows = this.refs.bodyTable.querySelectorAll(`.${prefixCls}-row`) || [];
     const fixedColumnsHeadRowsHeight = [].map.call(
       headRows, row => row.getBoundingClientRect().height || 'auto'
@@ -661,7 +661,7 @@ export default class Table extends React.Component {
       bodyRows, row => row.getBoundingClientRect().height || 'auto'
     );
     if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
-        shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
+      shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
       return;
     }
     this.setState({
@@ -772,13 +772,13 @@ export default class Table extends React.Component {
         <div className={`${prefixCls}-content`}>
           {scrollTable}
           {this.columnManager.isAnyColumnsLeftFixed() &&
-          <div className={`${prefixCls}-fixed-left`}>
-            {this.getLeftFixedTable()}
-          </div>}
+            <div className={`${prefixCls}-fixed-left`}>
+              {this.getLeftFixedTable()}
+            </div>}
           {this.columnManager.isAnyColumnsRightFixed() &&
-          <div className={`${prefixCls}-fixed-right`}>
-            {this.getRightFixedTable()}
-          </div>}
+            <div className={`${prefixCls}-fixed-right`}>
+              {this.getRightFixedTable()}
+            </div>}
         </div>
       </div>
     );

kanban-client/app/src/Title/Title.jsx

@@ -43,8 +43,7 @@ export default class Title extends React.Component {
 
     let className = prefixCls;
 
-    const title = this.getTitle();
-
+    let title = this.getTitle();
     return (
       <div className={className} style={{fontSize: fontSize}} key={prefixCls} dangerouslySetInnerHTML={{ __html: title }}>
       </div>

kanban-client/webpack.config.js

@@ -5,7 +5,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
     entry: {
-        'static/js/boardshow/src/main': './app/main.js',
+        'static/js/boardshow/main': './app/main.js',
         vendor: ['react', 'react-dom', 'echarts-for-react']
     },
     output: {
@@ -68,14 +68,14 @@ module.exports = {
         // 样式分离打包
         new ExtractTextPlugin({
             filename: (getPath) => {
-                return getPath('static/css/boardshow/[name].css').replace('/static/js/boardshow/src/', '/');
+                return getPath('static/css/boardshow/[name].css').replace('/static/js/boardshow/', '/');
             },
             allChunks: true
         }),
         // 公共模块打包
         new webpack.optimize.CommonsChunkPlugin({ 
-            names: ['vendor', 'manifest'],
-            filename: 'static/js/boardshow/src/[name].js'
+            names: ['vendor'],
+            filename: 'static/lib/boardshow/[name].js'
         }),
         // 生成入口html
         new HtmlWebpackPlugin({                        //根据模板插入css/js等生成最终HTML
@@ -83,7 +83,7 @@ module.exports = {
             filename:'./boardshow.html',    //生成的html存放路径，相对于 path
             template:'./app/index.html',    //html模板路径
             inject:true,    //允许插件修改哪些内容，包括head与body
-            hash:true,    //为静态资源生成hash值
+            hash:false,    //为静态资源生成hash值
             minify:{    //压缩HTML文件
                 removeComments:true,    //移除HTML中的注释
                 collapseWhitespace:false    //删除空白符与换行符