Ecology9 ecode WeaTableEdit 基础示例

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/14b2647ea40742828bdffb8345cab39a_index
 * 单独访问：/spa/custom/static/index.html#/main/cs/app/14b2647ea40742828bdffb8345cab39a_index
 */
const { WeaBrowser, WeaFormItem, WeaRangePicker, WeaSelect, WeaTableEdit} = ecCom
const { Button, message } = antd

class Index extends React.Component {

	constructor(props) {
		super(props)
		this.state = {
			datas: [],	// 人员列表数据
			khqj: []	// 考核期间
		}
		
		// 人员列表列信息
		// 注：com 中必须写 key，需与 dataIndex 相同，否则更新表格数据会有问题
		this.columns = [
			{title: '序号', dataIndex: 'seq', com: [{type: 'custom', key: 'seq', render: (text) => (<div>{text}</div>)}]}, 
			{title: '部门名称', dataIndex: 'deptname', com: [{type: 'custom', key: 'deptname', render: (text) => (<div>{text}</div>)}]}, 
			{title: '姓名', dataIndex: 'lastname', com: [{type: 'custom', key: 'lastname', render: (text) => (<div>{text}</div>)}]}, 
			{title: '工号', dataIndex: 'workcode', com: [{type: 'custom', key: 'workcode', render: (text) => (<div>{text}</div>)}]}, 
			{title: '操作', dataIndex: 'custom', com: [{type: 'custom', key: 'custom',
				render: (text, record, index) => (
					<Button type="primary" onClick={() => {this.clickEvent_delRow(text, record, index)}}>删除</Button>)}
			]}
		]
		
		this.browserParams = {isSingle: false}	// 被考核人浏览框
		
		this.options_nd = [	// 年度选项
			{key: "2020", selected: true, showname: "2020"}
		]
		
		this.options_sjzq = [	// 时间周期选项
			{key: "S", showname: "季度"}, 
			{key: "M", showname: "月度"}
		]
	}
	
	callback_empInfos(resp) {	// 处理服务器返回来的数据
		for (i = 0; i < resp.length; i++) {
			resp[i]['seq'] = i + 1
		}
		
		// 更新人员列表
		this.setState({
			datas: resp
		})
	}
	
	clickEvent_create() {	// 单件事件_创建季度/月度绩效考核
		const nd = $('#nd').val()
		const sjzq = $('#sjzq').val()
		if (!this.common_checkInput(nd, '请选择年度！')) return
		if (!this.common_checkInput(sjzq, '请选择时间周期！')) return
		if (!this.common_checkInput(this.state.khqj, '请选择考核期间！')) return
		if (!this.common_checkInput(this.state.khqj[0], '请选择考核期间！')) return
		if (!this.common_checkInput(this.state.khqj[1], '请选择考核期间！')) return
		if (!this.common_checkInput(this.state.datas, '请选择被考核对象！')) return
		
		// TODO 做自己想做的事情
		console.log(nd, sjzq, this.state.khqj, this.state.datas)
	}
	
	clickEvent_delRow(text, record, index) {	// 单击事件_在列表行中点删除
		console.log(text, record, index)
		const {datas} = this.state
		datas.splice(index, 1)
		this.setState({datas: datas})
	}
	
	changeEvent_khqj(khqj) {	// 更新受控组件_考核期间
		this.setState({khqj: khqj})
	}
	
	changeEvent_bkhdx(ids, names, datas) {	// 更新事件_被考核人
		// 此处需要修改为从服务器获取数据
		const resp = [
			{workcode: "M001234", deptid: "897", id: "4318", lastname: "吕布", deptname: "IT与信息安全部"},
			{workcode: "M001234", deptid: "897", id: "4318", lastname: "赵云", deptname: "IT与信息安全部"},
			{workcode: "M001234", deptid: "897", id: "4318", lastname: "典韦", deptname: "IT与信息安全部"},
			{workcode: "M001234", deptid: "897", id: "4318", lastname: "关羽", deptname: "IT与信息安全部"},
		]
		
		this.callback_empInfos(resp)
	}
	
	changeEvent_table(datas) {	// 更新事件_人员列表
		this.setState({ datas })
	}
	
	common_checkInput(val, msg) {	// 公共逻辑_检查输入
		if (val === undefined || val + '' === '') {
			message.info(msg)
			return false
		}
		
		const jsonStr = JSON.stringify(val)
		if (['{}', '[]'].indexOf(jsonStr) >= 0) {
			message.info(msg)
			return false
		}
		return true
	}
	
	render() {
		return (
			<div style={{width: '100%'}}>
				<div style={{height: '56px', paddingLeft: '5px', paddingRight: '5px', paddingTop: '5px', paddingBottom: '5px'}}>
					<WeaFormItem label="年度" ratio1to2="true" style={{width: '50%', float: 'left'}}>
						<WeaSelect fieldName="nd" options={this.options_nd} style={{width: '70px'}}/>
					</WeaFormItem>
					<WeaFormItem label="时间周期" ratio1to2="true" style={{width: '50%', float: 'left'}}>
						<WeaSelect fieldName="sjzq" options={this.options_sjzq} style={{width: '70px'}}/>
					</WeaFormItem>
					<WeaFormItem label="考核期间" ratio1to2="true" style={{width: '50%', float: 'left'}}>
						<WeaRangePicker fieldName="khqj" style={{width: '220px'}} onChange={this.changeEvent_khqj.bind(this)}></WeaRangePicker>
					</WeaFormItem>
					<WeaFormItem label="被考核对象" ratio1to2="true" style={{width: '50%', float: 'left'}}>
						<WeaBrowser fieldName="bkhdx" type={17} {...this.browserParams} title="多人力资源" style={{width: '100%'}}
							onChange={this.changeEvent_bkhdx.bind(this)} />
					</WeaFormItem>
				</div>
				<div style={{textAlign: 'left'}}>
					<WeaTableEdit
						showTitle={false}
						columns={this.columns}
						datas={this.state.datas}
						onChange={this.changeEvent_table.bind(this)}
					/>
				</div>
				<div style={{textAlign: 'center', marginTop: '10px'}}>
					<Button type="primary" onClick={this.clickEvent_create.bind(this)}>创建季度/月度绩效考核</Button>
				</div>
			</div>
		)
	}
}

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