表单组件字体大小计算逻辑调整

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {isEmptyObject} from '../../utils/BaseUtils.js';
+import { isEmptyObject } from '../../utils/BaseUtils.js';
 import '../../assets/Form/index.less';
 
 export default class Form extends React.Component {
@@ -30,7 +30,7 @@ export default class Form extends React.Component {
         prefixCls: 'rc-form',
         cls: '',
         style: {},
-        header: function() {return {text: '', style:{}}},
+        header: function () { return { text: '', style: {} } },
         columns: 1
     }
 
@@ -67,31 +67,33 @@ export default class Form extends React.Component {
         let columnsData = this.getItemColumns();
         const contentEl = <tbody style={{ fontSize: fontSize }} className={`${prefixCls}-content`} key="form_content">
             {
-                columnsData.map((tr, i) => {return(
-                    <tr className={`${prefixCls}-tr`} key={`content_item_tr_${i}`}>
-                        {
-                            tr.map((td, i) => {
-                                let c = [];
-                                let colSpan = td.colSpan.replace('%','');
-                                td.field.width = td.field.width || (100 - (td.value.width || 50) );
-                                td.value.width = td.value.width || (100 - td.field.width);
-                                let allWidth = td.field.width + td.value.width;
-                                let colSpan1 = colSpan * td.field.width / allWidth  + '%';
-                                let colSpan2 = colSpan * td.value.width / allWidth  + '%';
-                                let field = td.render ? ((td.render(td.field.text, td.value.text)) ? td.render(td.field.text, td.value.text).field.text : '' ) : (typeof td.field === 'object' ? td.field.text : td.field);
-                                let value = td.render ? ((td.render(td.field.text, td.value.text)) ? td.render(td.field.text, td.value.text).value.text : '' ) : (typeof td.value === 'object' ? td.value.text : td.value);
-                                let currentFieldStyle = td.render ? ((td.render(td.field.text, td.value.text)) ? td.render(td.field.text, td.value.text).field.style : {} ) : (typeof td.field === 'object' ? (isEmptyObject(td.field.style) ? fieldStyle : td.field.style) : fieldStyle);
-                                let currentValueStyle = td.render ? ((td.render(td.field.text, td.value.text)) ? td.render(td.field.text, td.value.text).value.style : {} ) : (typeof td.value === 'object' ? (isEmptyObject(td.value.style) ? valueStyle : td.value.style) : valueStyle);
-                                
-                                return [
-                                    <td colSpan={colSpan1} className={`${prefixCls}-item-field`} style={currentFieldStyle} > {field}</td>,
-                                    <td colSpan={colSpan2} className={`${prefixCls}-item-value`} style={currentValueStyle} > {value}</td>
-                                ];
-                            })
-                        }
-
-                    </tr>
-                )})
+                columnsData.map((tr, i) => {
+                    return (
+                        <tr className={`${prefixCls}-tr`} key={`content_item_tr_${i}`}>
+                            {
+                                tr.map((td, i) => {
+                                    let c = [];
+                                    let colSpan = td.colSpan.replace('%', '');
+                                    td.field.width = td.field.width || (100 - (td.value.width || 50));
+                                    td.value.width = td.value.width || (100 - td.field.width);
+                                    let allWidth = td.field.width + td.value.width;
+                                    let colSpan1 = colSpan * td.field.width / allWidth + '%';
+                                    let colSpan2 = colSpan * td.value.width / allWidth + '%';
+                                    let field = td.render ? ((td.render(td.field.text, td.value.text)) ? td.render(td.field.text, td.value.text).field.text : '') : (typeof td.field === 'object' ? td.field.text : td.field);
+                                    let value = td.render ? ((td.render(td.field.text, td.value.text)) ? td.render(td.field.text, td.value.text).value.text : '') : (typeof td.value === 'object' ? td.value.text : td.value);
+                                    let currentFieldStyle = td.render ? ((td.render(td.field.text, td.value.text)) ? td.render(td.field.text, td.value.text).field.style : {}) : (typeof td.field === 'object' ? (isEmptyObject(td.field.style) ? fieldStyle : td.field.style) : fieldStyle);
+                                    let currentValueStyle = td.render ? ((td.render(td.field.text, td.value.text)) ? td.render(td.field.text, td.value.text).value.style : {}) : (typeof td.value === 'object' ? (isEmptyObject(td.value.style) ? valueStyle : td.value.style) : valueStyle);
+
+                                    return [
+                                        <td colSpan={colSpan1} className={`${prefixCls}-item-field`} style={currentFieldStyle} > {field}</td>,
+                                        <td colSpan={colSpan2} className={`${prefixCls}-item-value`} style={currentValueStyle} > {value}</td>
+                                    ];
+                                })
+                            }
+
+                        </tr>
+                    )
+                })
             }
         </tbody>;
         return contentEl;
@@ -116,12 +118,12 @@ export default class Form extends React.Component {
                 i++;
             }
             let allWidth = 0;
-            arr.map((a)=>{
-                a.width = a.width || 100/arr.length;
+            arr.map((a) => {
+                a.width = a.width || 100 / arr.length;
                 allWidth += a.width;
             });
             arr.map((a, x) => {
-                a.colSpan = `${100 * a.width/allWidth}%`;
+                a.colSpan = `${100 * a.width / allWidth}%`;
             });
             columnsData.push(arr);
         }
@@ -129,16 +131,20 @@ export default class Form extends React.Component {
     }
 
     autoSize() {
+        const { fontSize } = this.state;
         let node = this.refs.body;
         let thead = node.getElementsByTagName('thead')[0] || { offsetHeight: 0 };
         let tbody = node.getElementsByTagName('tbody')[0];
-        // if (tbody.offsetHeight + thead.offsetHeight <= (node.offsetHeight + 5)) {
-        //     return;
-        // }
         let trs = tbody.getElementsByTagName('tr');
-        let rowHeight = (node.offsetHeight - thead.offsetHeight) / trs.length;
+        /**
+         * 字体大小计算规则：
+         * 1.先计算行高：可用高度 / (行数 * (1 + 0.7))
+         * 2.再计算字体大小：(行高 * 0.6 + 容器默认字体大小) / 2
+         */ 
+        let rowHeight = (node.offsetHeight - thead.offsetHeight) / (trs.length * (1 + 0.7));
         for (let i = 0; i < trs.length; i++) {
-            trs[i].style.fontSize = `${rowHeight * .6}px`
+            let s = ((rowHeight * .6) + fontSize) / 2;
+            trs[i].style.fontSize = `${s}px`
         };
     }