添加form宽度的控制，包括item的宽度和field-value的宽度

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

@@ -43,11 +43,13 @@ function formConfig(model) {
     data = data.map((d) => {
         d.field = {
             text: d.field.text,
-            style: parseStyleStr(d.field.style)
+            style: parseStyleStr(d.field.style),
+            width: d.field.width
         };
         d.value = {
             text: d.value.text,
-            style: parseStyleStr(d.value.style)
+            style: parseStyleStr(d.value.style),
+            width: d.value.width
         };
         d.render = renderFunction(d.render);
         return d;

kanban-client/app/component/converter.js

@@ -42,11 +42,13 @@ function formConfig(model) {
     data = data.map((d) => {
         d.field = {
             text: d.field.text,
-            style: parseStyleStr(d.field.style)
+            style: parseStyleStr(d.field.style),
+            width: d.field.width
         };
         d.value = {
             text: d.value.text,
-            style: parseStyleStr(d.value.style)
+            style: parseStyleStr(d.value.style),
+            width: d.value.width
         };
         d.render = renderFunction(d.render);
         return d;

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

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

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

@@ -72,15 +72,20 @@ export default class Form extends React.Component {
                         {
                             tr.map((td, i) => {
                                 let c = [];
-                                let colSpan = td.colSpan.replace('%','')/2 + '%';
+                                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={colSpan} className={`${prefixCls}-item-field`} style={currentFieldStyle} > {field}</td>,
-                                    <td colSpan={colSpan} className={`${prefixCls}-item-value`} style={currentValueStyle} > {value}</td>
+                                    <td colSpan={colSpan1} className={`${prefixCls}-item-field`} style={currentFieldStyle} > {field}</td>,
+                                    <td colSpan={colSpan2} className={`${prefixCls}-item-value`} style={currentValueStyle} > {value}</td>
                                 ];
                             })
                         }
@@ -99,19 +104,24 @@ export default class Form extends React.Component {
         for (let i = 0; i < data.length;) {
             let arr = [];
             inner:
-            for (let j = 0; j < (columns < 0 ? 1 : columns) && i < data.length; j++) {
-                let w1 = data[i].width || 0;
+            for (let j = 0; j < columns && i < data.length; j++) {
+                let fill = data[i].fill || false;
                 arr.push(data[i]);
                 i++;
-                if (w1 >= 100) {
+                if (fill) {
                     break inner;
                 }
             }
             if (arr.length == 0) {
                 i++;
             }
+            let allWidth = 0;
+            arr.map((a)=>{
+                a.width = a.width || 100/arr.length;
+                allWidth += a.width;
+            });
             arr.map((a, x) => {
-                a.colSpan = `${100 / arr.length}%`
+                a.colSpan = `${100 * a.width/allWidth}%`;
             });
             columnsData.push(arr);
         }

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

@@ -72,15 +72,20 @@ export default class Form extends React.Component {
                         {
                             tr.map((td, i) => {
                                 let c = [];
-                                let colSpan = td.colSpan.replace('%','')/2 + '%';
+                                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={colSpan} className={`${prefixCls}-item-field`} style={currentFieldStyle} > {field}</td>,
-                                    <td colSpan={colSpan} className={`${prefixCls}-item-value`} style={currentValueStyle} > {value}</td>
+                                    <td colSpan={colSpan1} className={`${prefixCls}-item-field`} style={currentFieldStyle} > {field}</td>,
+                                    <td colSpan={colSpan2} className={`${prefixCls}-item-value`} style={currentValueStyle} > {value}</td>
                                 ];
                             })
                         }
@@ -99,19 +104,24 @@ export default class Form extends React.Component {
         for (let i = 0; i < data.length;) {
             let arr = [];
             inner:
-            for (let j = 0; j < (columns < 0 ? 1 : columns) && i < data.length; j++) {
-                let w1 = data[i].width || 0;
+            for (let j = 0; j < columns && i < data.length; j++) {
+                let fill = data[i].fill || false;
                 arr.push(data[i]);
                 i++;
-                if (w1 >= 100) {
+                if (fill) {
                     break inner;
                 }
             }
             if (arr.length == 0) {
                 i++;
             }
+            let allWidth = 0;
+            arr.map((a)=>{
+                a.width = a.width || 100/arr.length;
+                allWidth += a.width;
+            });
             arr.map((a, x) => {
-                a.colSpan = `${100 / arr.length}%`
+                a.colSpan = `${100 * a.width/allWidth}%`;
             });
             columnsData.push(arr);
         }