Ecology9 ecode WeaTableEditable 表头合并列

register.js

ecodeSDK.rewriteRouteQueue.push({
  fn: (params) => {
    const {Com, Route, nextState} = params;
    const cpParams = {
      path: 'main/cs/app', // 路由地址，不可变更
      appId: '${appId}',
      name: 'index', // 具体页面应用模块名称
      node: 'app', // 渲染的路由节点，这里渲染的是 app 这个节点
      Route,
      nextState
    }
    
    if (ecodeSDK.checkPath(cpParams)) { // 判断地址是否是要注入的地址
      // 异步加载应用 ${cpParams.appId} 下的模块 ${cpParams.name}
      return ecodeSDK.getAsyncCom({
        appId: cpParams.appId,
        name: cpParams.name,	// 模块名称
        props: params,	// 参数
        isPage: true,	// 是否是路由页面
        noCss: true	// 是否禁止单独加载css，通常为了减少css数量，css默认前置加载
      });
    }
      
    return null; // 这里一定要返回空，不然会干扰到其它新页面
  },
  order: 10,
  desc: '	绩效管理-发起季度月度绩效考核流程'
})

index.js

/**
 * 门户主页访问：/wui/index.html#/main/cs/app/16475371341a417986aeadf1d4d92fe2_index
 * 单独访问：/spa/custom/static/index.html#/main/cs/app/16475371341a417986aeadf1d4d92fe2_index
 */
const { WeaInputNumber, WeaReqTop, WeaTableEditable} = ecCom
const { Button, message } = antd

class Index extends React.Component {

	constructor(props) {
		super(props)
		this.state = {
			datas: [{
				id: 1, seq: 1, gh: 'M005111', xm: '张三', zj: 'M5-A', zxbm: 'IT部',
				gw: '运维工程师', bsqclr: '李四', rzrq: '2020-09-17'
			}]	// 人员列表数据
		}
		
		// 人员列表列信息
		// 注：com 中必须写 key，需与 dataIndex 相同，否则更新表格数据会有问题
		this.columns = [
			{
				title: '序号', dataIndex: 'seq', rowSpan: 2,
				com: [{type: 'INPUT', key: 'seq', viewAttr: 1}]
			}, 
			{
				title: '工号', dataIndex: 'gh', rowSpan: 2, 
				com: [{type: 'INPUT', key: 'gh', viewAttr: 1}]
			}, 
			{
				title: '姓名', dataIndex: 'xm', rowSpan: 2, 
				com: [{type: 'INPUT', key: 'xm', viewAttr: 1}]
			}, 
			{
				title: '职级', dataIndex: 'zj', rowSpan: 2, 
				com: [{type: 'INPUT', key: 'zj', viewAttr: 1}]
			}, 
			{
				title: '最小部门', dataIndex: 'zxbm', rowSpan: 2, 
				com: [{type: 'INPUT', key: 'zxbm', viewAttr: 1}]
			}, 
			{
				title: '岗位', dataIndex: 'gw', rowSpan: 2, 
				com: [{type: 'INPUT', key: 'gw', viewAttr: 1}]
			}, 
			{
				title: '授权处理人', dataIndex: 'bsqclr', rowSpan: 2, 
				com: [{type: 'INPUT', key: 'bsqclr', viewAttr: 1}]
			}, 
			{
				title: '入职日期', dataIndex: 'rzrq', rowSpan: 2, 
				com: [{type: 'INPUT', key: 'rzrq', viewAttr: 1}]
			},
			{
				title: <div style={{textAlign: 'center'}}>工作业绩</div>,
				dataIndex: '', rowSpan: 1,
				children: [
					{
						title: <div style={{textAlign: 'center'}}>任务完成情况<br/>40%</div>, 
						dataIndex: 'rwwcqk', key: 'rwwcqk',
						render: (text, record, index, onEdit) => (
							<WeaInputNumber value={this.state.datas[index]['rwwcqk']}
								onChange={value => {
									this.state.datas[index]['rwwcqk'] = value
									this.setState({datas: this.state.datas})
								}}
							/>
						)
					},
					{
						title: <div style={{textAlign: 'center'}}>工作质量<br/>20%</div>, 
						dataIndex: 'gzzl', key: 'gzzl',
						render: (text, record, index, onEdit) => (
							<WeaInputNumber value={this.state.datas[index]['gzzl']}
								onChange={value => {
									this.state.datas[index]['gzzl'] = value
									this.setState({datas: this.state.datas})
								}}
							/>
						)
					},
					{
						title: <div style={{textAlign: 'center'}}>工作效率<br/>10%</div>, 
						dataIndex: 'gzxl', key: 'gzxl',
						render: (text, record, index, onEdit) => (
							<WeaInputNumber value={this.state.datas[index]['gzxl']}
								onChange={value => {
									this.state.datas[index]['gzxl'] = value
									this.setState({datas: this.state.datas})
								}}
							/>
						)
					}
				],
				com: [{type: 'INPUT'}]
			},
			{
				title: <div style={{textAlign: 'center'}}>工作能力</div>,
				dataIndex: '', rowSpan: 1,
				children: [
					{
						title: <div style={{textAlign: 'center'}}>岗位胜任力<br/>15%</div>, 
						dataIndex: 'gwsrnl', key: 'gwsrnl',
						render: (text, record, index, onEdit) => (
							<WeaInputNumber value={this.state.datas[index]['gwsrnl']}
								onChange={value => {
									this.state.datas[index]['gwsrnl'] = value
									this.setState({datas: this.state.datas})
								}}
							/>
						)
					}
				],
				com: [{type: 'INPUT'}]
			},
			{
				title: <div style={{textAlign: 'center'}}>工作态度</div>,
				dataIndex: '', rowSpan: 1,
				children: [
					{
						title: <div style={{textAlign: 'center'}}>责任心<br/>5%</div>, 
						dataIndex: 'zrx', key: 'zrx',
						render: (text, record, index, onEdit) => (
							<WeaInputNumber value={this.state.datas[index]['zrx']}
								onChange={value => {
									this.state.datas[index]['zrx'] = value
									this.setState({datas: this.state.datas})
								}}
							/>
						)
					},
					{
						title: <div style={{textAlign: 'center'}}>团队合作<br/>5%</div>, 
						dataIndex: 'tdhz', key: 'tdhz',
						render: (text, record, index, onEdit) => (
							<WeaInputNumber value={this.state.datas[index]['tdhz']}
								onChange={value => {
									this.state.datas[index]['tdhz'] = value
									this.setState({datas: this.state.datas})
								}}
							/>
						)
					},
					{
						title: <div style={{textAlign: 'center'}}>服从性、纪律性<br/>5%</div>, 
						dataIndex: 'fcxjlx', key: 'fcxjlx',
						render: (text, record, index, onEdit) => (
							<WeaInputNumber value={this.state.datas[index]['fcxjlx']}
								onChange={value => {
									this.state.datas[index]['fcxjlx'] = value
									this.setState({datas: this.state.datas})
								}}
							/>
						)
					}
				],
				com: [{type: 'INPUT'}]
			},
			{
				title: '奖惩加减分', dataIndex: 'jcjjf', rowSpan: 2, 
				com: [{type: 'INPUTNUMBER', key: 'jcjjf'}]
			}, 
			{
				title: '合计', dataIndex: 'hj', rowSpan: 2, 
				com: [{type: 'INPUTNUMBER', key: 'hj', viewAttr: 1}]
			}, 
			{
				title: '绩效等级', dataIndex: 'jxdj', rowSpan: 2, 
				com: [{type: 'INPUT', key: 'jxdj', viewAttr: 1}]
			}, 
			{
				title: '评价', dataIndex: 'pj', rowSpan: 2, 
				com: [{type: 'INPUT', key: 'pj'}]
			}
		]
	}
	
	clickEvent_submit() {
		console.log('datas', this.state.datas)
	}
	
	render() {		
		return (
			<div style={{width: '100%'}}>
				<WeaReqTop
					title=<span style={{fontSize: '18px'}}>绩效考核得分</span>
					icon=<i className="icon-portal-workflow" />
					iconBgcolor="lightblue"
					loading={false}
					buttons={[<Button type="primary" onClick={this.clickEvent_submit.bind(this)}>提交</Button>]}
					buttonSpace={10}
					showDropIcon={true}
				/>
				<WeaTableEditable
					ref = {el => {this.table = el}}
					showTitle={false}
					columns={this.columns}
					datas={this.state.datas}
				/>
			</div>
		)
	}
}

ecodeSDK.setCom('${appId}', 'index', Index)