员工信息统计表
}\r\n footer={currentData => 合计: 共{data.length}条数据
}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo21;\r\n","desc":" 可自定义页头和页脚。"},{"example":\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Demo22;\r\n","desc":" 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。","scss_code":".demo22{\r\n .opt-btns{\r\n margin-bottom: 8px;\r\n }\r\n}"},{"example":\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\nexport default Demo35;\r\n","desc":" 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。"},{"example":总计: {_sum}
}\r\n />\r\n \r\n
\r\n \r\n ) : (\r\n value || \" \"\r\n );\r\n }\r\n}\r\n\r\nconst SELECT_SOURCE = [\"男\", \"女\"];\r\n\r\nclass SelectEditCell extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n value: props.value\r\n };\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (!nextProps.editable) {\r\n this.setState({ value: nextProps.value });\r\n }\r\n }\r\n\r\n handleSelect = value => {\r\n this.setState({ value });\r\n this.props.onChange && this.props.onChange(value);\r\n };\r\n\r\n render() {\r\n const { editable } = this.props;\r\n const { value } = this.state;\r\n let cls = \"editable-cell-input-wrapper\";\r\n return editable ? (\r\n \r\n {\"请输入\" + colName}
}\r\n >\r\n \r\n
\r\n ) : (\r\n value || \" \"\r\n );\r\n }\r\n}\r\n\r\nconst option = {\r\n title: \"树\",\r\n searchable: true,\r\n multiple: false,\r\n param: {\r\n refCode: \"neworganizition_tree\"\r\n },\r\n checkStrictly: true,\r\n disabled: false,\r\n nodeDisplay: record => {\r\n return record.refname;\r\n },\r\n displayField: record => {\r\n return record.refname;\r\n }, //显示内容的键\r\n valueField: \"refpk\", //真实 value 的键\r\n refModelUrl: {\r\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\r\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\r\n },\r\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\r\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\r\n lazyModal: false,\r\n strictMode: true,\r\n lang: \"zh_CN\",\r\n treeData: [\r\n {\r\n code: \"org1\",\r\n children: [\r\n {\r\n code: \"bj\",\r\n entityType: \"mainEntity\",\r\n name: \"北京总部-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"bj\",\r\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n isLeaf: \"true\",\r\n refname: \"北京总部-简\"\r\n },\r\n {\r\n code: \"xd\",\r\n entityType: \"mainEntity\",\r\n name: \"新道-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"xd\",\r\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n isLeaf: \"true\",\r\n refname: \"新道-简\"\r\n },\r\n {\r\n code: \"yy3\",\r\n entityType: \"mainEntity\",\r\n name: \"test3\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy3\",\r\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n isLeaf: \"true\",\r\n refname: \"test3\"\r\n },\r\n {\r\n code: \"yy1\",\r\n entityType: \"mainEntity\",\r\n name: \"test1\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy1\",\r\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n isLeaf: \"true\",\r\n refname: \"test1\"\r\n },\r\n {\r\n code: \"dept2\",\r\n children: [\r\n {\r\n code: \"cs\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"测试部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"cs\",\r\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n isLeaf: \"true\",\r\n refname: \"测试部-简\"\r\n },\r\n {\r\n code: \"qd\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"前端部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"qd\",\r\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n isLeaf: \"true\",\r\n refname: \"前端部-简\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"生产处\",\r\n refcode: \"dept2\",\r\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refname: \"生产处\"\r\n },\r\n {\r\n code: \"dept1\",\r\n children: [\r\n {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n {\r\n code: \"dept1_1\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务一科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_1\",\r\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n isLeaf: \"true\",\r\n refname: \"财务一科\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务处\",\r\n refcode: \"dept1\",\r\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refname: \"财务处\"\r\n }\r\n ],\r\n entityType: \"mainEntity\",\r\n name: \"用友集团\",\r\n refcode: \"org1\",\r\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refname: \"用友集团\"\r\n }\r\n ]\r\n};\r\n\r\nconst RefEditCell = Form.createForm()(\r\n class RefComponentWarpper extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n value: props.value\r\n };\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (!nextProps.editable) {\r\n this.setState({ value: nextProps.value });\r\n }\r\n }\r\n\r\n handleSelect = values => {\r\n this.setState({ value: values[0] });\r\n this.props.onChange && this.props.onChange(values[0]);\r\n };\r\n\r\n render() {\r\n const { getFieldProps, getFieldError } = this.props.form;\r\n const { editable, required } = this.props;\r\n const { value } = this.state;\r\n let cls = \"editable-cell-input-wrapper\";\r\n if (required) cls += \" required\";\r\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\r\n return editable ? (\r\n \r\n \r\n
\r\n \r\n \r\n {\"请输入\" + this.props.colName}\r\n
\r\n }\r\n >\r\n \r\n \r\n 取消\r\n \r\n \r\n
\r\n ) : (\r\n \r\n \r\n \r\n
\r\n );\r\n };\r\n\r\n render() {\r\n const { dataSource } = this.state;\r\n const columns = this.columns;\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Demo0501;\r\n","desc":" 可以对行进行编辑的表格","scss_code":".demo0501 .u-table {\r\n .u-row-hover {\r\n .opt-btns,.cancel-btns {\r\n button {\r\n margin: 0;\r\n &:first-child {\r\n margin-right: 8px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .u-table-row {\r\n td {\r\n padding: 5px 8px;\r\n\r\n input {\r\n font-size: 12px;\r\n padding-left: 5px;\r\n }\r\n }\r\n\r\n .u-form-control,\r\n .u-select-selection {\r\n height: 30px;\r\n }\r\n }\r\n\r\n .editable-cell-text-wrapper {\r\n box-sizing: border-box;\r\n line-height: 20px;\r\n border-radius: 3px;\r\n }\r\n\r\n .required {\r\n margin-left: 10px;\r\n position: relative;\r\n\r\n &::before {\r\n content: \" \";\r\n border: 1px solid #F44336;\r\n width: 0;\r\n height: 12px;\r\n position: absolute;\r\n top: 9px;\r\n left: -8px;\r\n }\r\n\r\n span.u-input-group {\r\n display: block\r\n }\r\n }\r\n .verify-cell {\r\n padding-right: 25px !important;\r\n }\r\n\r\n .required-icon {\r\n position: absolute;\r\n top: 2px;\r\n color: #F44336;\r\n font-size: 20px;\r\n }\r\n\r\n .ref-input-wrap {\r\n width: 160px !important;\r\n }\r\n}\r\n\r\n.u-editable-table-tp {\r\n .tp-content {\r\n color: #F44336;\r\n }\r\n}"},{"example":\r\n {editable ? (\r\n
\r\n ) : (\r\n this.editWarp = el} className=\"editable-cell-input-wrapper\">\r\n \r\n {\"请输入\" + this.props.colName}\r\n
\r\n }\r\n >\r\n \r\n {value || \" \"}\r\n
\r\n )}\r\n \r\n );\r\n }\r\n}\r\n\r\nconst SELECT_SOURCE = [\"男\", \"女\"];\r\n\r\nclass SelectEditCell extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n value: this.props.value,\r\n editable: false\r\n };\r\n }\r\n\r\n handleSelect = value => {\r\n this.setState({ value });\r\n };\r\n\r\n commitChange = () => {\r\n this.setState({ editable: false });\r\n if (this.props.onChange) {\r\n this.props.onChange(this.state.value);\r\n }\r\n };\r\n\r\n edit = () => {\r\n this.setState({ editable: true });\r\n };\r\n\r\n render() {\r\n const { value, editable } = this.state;\r\n return (\r\n \r\n {editable ? (\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst option = {\r\n title: \"树\",\r\n searchable: true,\r\n multiple: false,\r\n param: {\r\n refCode: \"neworganizition_tree\"\r\n },\r\n checkStrictly: true,\r\n disabled: false,\r\n nodeDisplay: record => {\r\n return record.refname;\r\n },\r\n displayField: record => {\r\n return record.refname;\r\n }, //显示内容的键\r\n valueField: \"refpk\", //真实 value 的键\r\n refModelUrl: {\r\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\r\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\r\n },\r\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\r\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\r\n lazyModal: false,\r\n strictMode: true,\r\n lang: \"zh_CN\",\r\n treeData: [\r\n {\r\n code: \"org1\",\r\n children: [\r\n {\r\n code: \"bj\",\r\n entityType: \"mainEntity\",\r\n name: \"北京总部-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"bj\",\r\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n isLeaf: \"true\",\r\n refname: \"北京总部-简\"\r\n },\r\n {\r\n code: \"xd\",\r\n entityType: \"mainEntity\",\r\n name: \"新道-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"xd\",\r\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n isLeaf: \"true\",\r\n refname: \"新道-简\"\r\n },\r\n {\r\n code: \"yy3\",\r\n entityType: \"mainEntity\",\r\n name: \"test3\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy3\",\r\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n isLeaf: \"true\",\r\n refname: \"test3\"\r\n },\r\n {\r\n code: \"yy1\",\r\n entityType: \"mainEntity\",\r\n name: \"test1\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy1\",\r\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n isLeaf: \"true\",\r\n refname: \"test1\"\r\n },\r\n {\r\n code: \"dept2\",\r\n children: [\r\n {\r\n code: \"cs\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"测试部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"cs\",\r\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n isLeaf: \"true\",\r\n refname: \"测试部-简\"\r\n },\r\n {\r\n code: \"qd\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"前端部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"qd\",\r\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n isLeaf: \"true\",\r\n refname: \"前端部-简\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"生产处\",\r\n refcode: \"dept2\",\r\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refname: \"生产处\"\r\n },\r\n {\r\n code: \"dept1\",\r\n children: [\r\n {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n {\r\n code: \"dept1_1\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务一科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_1\",\r\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n isLeaf: \"true\",\r\n refname: \"财务一科\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务处\",\r\n refcode: \"dept1\",\r\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refname: \"财务处\"\r\n }\r\n ],\r\n entityType: \"mainEntity\",\r\n name: \"用友集团\",\r\n refcode: \"org1\",\r\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refname: \"用友集团\"\r\n }\r\n ]\r\n};\r\n\r\nconst RefEditCell = Form.createForm()(\r\n class RefComponentWarpper extends Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.state = {\r\n value: this.props.value.d,\r\n editable: false\r\n };\r\n this.refWarp = React.createRef();\r\n }\r\n\r\n edit = () => {\r\n this.setState({ editable: true }, () => this.refWarp.focus());\r\n };\r\n\r\n handleSelect = values => {\r\n this.setState({ value: values[0] });\r\n };\r\n\r\n commitChange = () => {\r\n this.setState({ editable: false });\r\n if (this.props.onChange) {\r\n this.props.onChange(this.state.value);\r\n }\r\n };\r\n\r\n onRefBlur = e => {\r\n // 消除点击子组件，父组件先失焦再聚焦的事件触发过程带来的副作用\r\n const __REF_CONTENT__ = document.querySelector(\"div.ref-core-modal\");\r\n if (!__REF_CONTENT__ && e.target === this.refWarp) {\r\n this.commitChange();\r\n }\r\n };\r\n\r\n render() {\r\n const { getFieldProps, getFieldError } = this.props.form;\r\n const { value, editable } = this.state;\r\n return editable ? (\r\n \r\n \r\n {SELECT_SOURCE.map((item, index) => (\r\n \r\n ))}\r\n \r\n
\r\n ) : (\r\n \r\n {value || \" \"}\r\n
\r\n )}\r\n \r\n {value.name || \" \"}\r\n
\r\n );\r\n }\r\n }\r\n);\r\n\r\nconst dataSource = [\r\n {\r\n a: \"ASVAL_201903280005\",\r\n b: \"小张\",\r\n c: \"男\",\r\n d: {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n key: \"1\"\r\n },\r\n {\r\n a: \"ASVAL_201903200004\",\r\n b: \"小明\",\r\n c: \"男\",\r\n d: {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n key: \"2\"\r\n },\r\n {\r\n a: \"ASVAL_201903120002\",\r\n b: \"小红\",\r\n c: \"女\",\r\n d: {\r\n code: \"dept1_1\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务一科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_1\",\r\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n isLeaf: \"true\",\r\n refname: \"财务一科\"\r\n },\r\n key: \"3\"\r\n }\r\n];\r\n\r\nclass Demo0502 extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.columns = [\r\n {\r\n title: \"员工编号\",\r\n dataIndex: \"a\",\r\n key: \"a\"\r\n },\r\n {\r\n title: \"名字\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n render: (text, record, index) => (\r\n \r\n