otherConfigForm.jsx 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import React from 'react'
  2. import { Form, Input, Cascader } from 'antd'
  3. import { connect } from 'dva'
  4. import './otherConfigForm.less'
  5. const FormItem = Form.Item
  6. const InputTextArea = Input.TextArea
  7. const OtherConfigForm = ({ chart, chartDesigner, dispatch, formItemLayout }) => {
  8. let getGroup = () => {
  9. const { group } = chartDesigner;
  10. const { groupList } = chart;
  11. let g1 = groupList.filter(g => g.code+'' === group+'')[0];
  12. if(!g1) {
  13. return ['nogroup']
  14. }
  15. if(g1.pcode === '-1') {
  16. return [g1.code]
  17. }else {
  18. let g2 = groupList.filter(g => g.code+'' === g1.pcode+'')[0];
  19. return [g2.code, g1.code]
  20. }
  21. }
  22. return (
  23. <Form className='form-otherconfig'>
  24. <FormItem label='所属分组' {...formItemLayout}>
  25. <Cascader
  26. value={getGroup()}
  27. allowClear={true}
  28. changeOnSelect={true}
  29. expandTrigger='hover'
  30. placeholder='未分组'
  31. options={[{pcode: '-1', code: 'nogroup', label: '未分组'}].concat(chart.groupList).filter(g => g.pcode === '-1').map((p, i)=>{
  32. return {
  33. key: p.code,
  34. value: p.code,
  35. label: p.label,
  36. children: chart.groupList.filter(g => g.pcode === p.code).map(c => {
  37. return {
  38. key: c.code,
  39. value: c.code,
  40. label: c.label
  41. }
  42. })
  43. }
  44. })}
  45. onChange={(value, items) => {
  46. let v = value[1] !== undefined ? value[1] : value[0];
  47. dispatch({ type: 'chartDesigner/setField', name: 'group', value: v });
  48. }}
  49. >
  50. </Cascader>
  51. </FormItem>
  52. <FormItem label='备注' {...formItemLayout}>
  53. <InputTextArea
  54. className='inputarea-description'
  55. value={chartDesigner.description}
  56. autosize={{ minRows: 2, maxRows: 6 }}
  57. onChange={(e) => {
  58. dispatch({ type: 'chartDesigner/setField', name: 'description', value: e.target.value });
  59. }}
  60. />
  61. </FormItem>
  62. </Form>
  63. );
  64. }
  65. function mapStateToProps({ present: {chart, chartDesigner}}) {
  66. return { chart, chartDesigner };
  67. }
  68. export default connect(mapStateToProps)(OtherConfigForm);