Procházet zdrojové kódy

【看板客户端】【table模板title定义】

zhuth před 8 roky
rodič
revize
9ff9f5f498

+ 24 - 12
kanban-client/app/component/Tabel.jsx

@@ -128,7 +128,7 @@ class TableModel extends React.Component {
 		}
 		// 根据render方法名获得对应方法实体
 		for (let i = 0; i < cols.length; i++) {
-            let col = cols[i];
+			let col = cols[i];
 			let renderFunction = typeof (col.render) == 'string' ? renders[col.render] :
 				(typeof (col.render) == 'function' ? col.render :
 					this.props.render || function (_v, _r, _i) { return { children: _v, props: {} } });
@@ -298,7 +298,7 @@ class TableModel extends React.Component {
 
 	// 滚动展示时自适应屏幕大小
 	adaptiveScreenSize() {
-        return;
+		return;
 		let titleEle = document.getElementsByClassName("rc-table-title")[0];
 		let headerEle = document.getElementsByClassName("rc-table-thead")[0];
 		let screenHeight = window.innerHeight;
@@ -319,7 +319,7 @@ class TableModel extends React.Component {
 
 	// 调整行高
 	adaptiveRowSize() {
-        return;
+		return;
 		let headerEle = document.getElementsByClassName("rc-table-thead")[0];
 		let titleEle = document.getElementsByClassName("rc-table-title")[0];
 		let screenHeight = window.innerHeight;
@@ -336,17 +336,17 @@ class TableModel extends React.Component {
 			}
 		} else {
 			for (let i = 0; i < tds.length; i++) {
-                if(this.props.fetch) {
-				    tds[i].style.height = `${bodyHeight / this.state.data.length}px`;
-                }
+				if (this.props.fetch) {
+					tds[i].style.height = `${bodyHeight / this.state.data.length}px`;
+				}
 			}
 		}
 	}
 	componentWillMount() {
-        let beforeRenderFunction = this.props.beforeRender;
-        if(beforeRenderFunction) {
-		    beforeRenderFunction(this);
-        }
+		let beforeRenderFunction = this.props.beforeRender;
+		if (beforeRenderFunction) {
+			beforeRenderFunction(this);
+		}
 	}
 	componentDidMount() {
 		this.onShow();
@@ -396,7 +396,7 @@ class TableModel extends React.Component {
 			columns: nextProps.columns,
 			data: nextProps.data
 		});
-  	}
+	}
 	getBodyWrapper(body) {
 		return (
 			<Animate transitionName="fade" component="tbody" className={body.props.className}
@@ -408,6 +408,18 @@ class TableModel extends React.Component {
 		);
 	}
 
+	getTitle() {
+		const { title } = this.props;
+		if (renders[title]) {
+			return renders[title];
+		} else {
+			let me = this;
+			return function(state) {
+				return title;
+			}
+		}
+	}
+
 	render() {
 		return (
 			<div>
@@ -433,7 +445,7 @@ class TableModel extends React.Component {
 					onRowMouseEnter={this.props.onRowMouseEnter || function () { }}
 					onRowMouseLeave={this.props.onRowMouseLeave || function () { }}
 					showHeader={this.props.showHeader || true}
-					title={this.props.title}
+					title={this.getTitle()}
 					footer={this.props.footer}
 					emptyText={this.props.emptyText || 'No Data'}
 					columns={this.columns || []}

+ 4 - 0
kanban-client/assets/FixedBox/index.css

@@ -0,0 +1,4 @@
+.rc-fixedbox {
+  position: relative;
+  overflow: hidden;
+}

+ 5 - 0
kanban-client/assets/Table/index.css

@@ -13,3 +13,8 @@
   font-size: 1rem;
   font-weight: normal;
 }
+.rc-table-title {
+  text-align: center;
+  font-weight: bold;
+  font-size: large;
+}

+ 6 - 0
kanban-client/assets/Table/index.less

@@ -17,4 +17,10 @@
 .@{prefixCls}-header-item {
     font-size: 1rem;
     font-weight: normal;
+}
+
+.@{prefixCls}-title {
+    text-align: center;
+    font-weight: bold;
+    font-size: large;
 }

+ 4 - 2
kanban-client/src/FixedBox/FixedBox.jsx

@@ -62,11 +62,13 @@ export default class Form extends React.Component {
     getContent() {
         const {config} = this.state;
         let {render, cls, style} = config;
+        let className = ' ' + cls;
+
         let tel;
         if (renders[render]) {
-          tel = <div className={cls} style={style}>{renders[render]()}</div>;
+          tel = <div className={className} style={style}>{renders[render]()}</div>;
         }else {
-          tel = <div className={cls} style={style}>{render}</div>;
+          tel = <div className={className} style={style}>{render}</div>;
         }
         return tel;
     }