dictChildAdd.js

import React from 'react'
import './dict.less'
import { Form, Button, Input, Select, message, Col, Row, Spin } from 'antd'
import { NavLink } from 'react-router-dom'
import UserManageBar from '@components/Common/WhiteBar/index'
import axios from '@src/axios/index'
import Utils from '@src/utils/utils'

import {API_DICT_MANAGE} from '@src/Api'

const FormItem = Form.Item;

class DictChildAdd extends React.Component {

  state = {
    form:{
      pid: '',
      name: '',
      type: 2,
      code: '',
      value: '',
      remark: '',
    },
    id: this.props.match.params.id,
    loadName: 'self', //用这个变量来判断加载什么数据，如果是新增，那么就是这个字典下面的child 如果是修改是加载自己
    levelOpt: [],
    editStatus: false, //true 隐藏 false 显示
    disabled: false,
    spinStatus: false, // 是否显示加载中
  };

  componentWillMount() {
    document.getElementById('root').scrollIntoView(true);//为ture返回顶部，false为底部
  }
  componentDidMount() {
    // 获取路由信息
    this.getRouterParams()

    // 获取非跟节点下的树形结构
    this.getDictChild()
  }

  // 根据路由判断进来的是修改还是新增
  getRouterParams = () => {
    const params = this.props.match.params

    if (!params || !params.params) {
      message.warn('请重新选择，或者刷新页面')
      this.props.history.go(-1);
      return
    }

    if (params.params === 'addOpt') {
      this.setState({
        routerParams: '新增下级字典',
        disabled: false,
      })
    } else if (params.params === 'updOpt') {
      this.setState({
        routerParams: '修改字典',
        disabled: true,
        spinStatus: true,
      })
    }

  }

  // 如果是新增的话，需要加载这个字典的下一级子级
  getDictChild () {
    const params = this.props.match.params
    axios.ajax({
      url: API_DICT_MANAGE.getDictChild,
      data: {
        id: this.state.id,
        pageSize: 99999999,
        pageNum: 1
      }
    }).then(res => {
      if (res && res.length > 0) {
        let data = res[0]
        if (params.params === 'updOpt'){
          this.setState({
            levelOpt:[{id:data.pid, name: data.pname}],
            form: data,
            name: data.name,
            code: data.code ,
            spinStatus: false
          })
          if(data.childDicts) {
            if (data.childDicts.length > 0 ) this.setState({editStatus: true})
          }
          return
        }

        this.setState({
          levelOpt:[{id: data.id, name: data.name}],
          form: { pid: data.id},
          name: data.name,
          code: data.code,

        })

      } else {
        this.setState({ levelOpt: [], spinStatus: false});
      }
    })
  }

  getDictSelf () {
    axios.ajax({
      url: API_DICT_MANAGE.getDictChild,
      data: {
        id: this.state.id,
        pageSize: 99999999,
        pageNum: 1
      }
    }).then(res => {
      if(res && res.length > 0) {

        this.setState({
          levelOpt:[{id: res[0].id, name: res[0].name}],
          form: {pid:res[0].id},
          name: res[0].name,
          code: res[0].code
        })
      }
    })
  }

  // 返回
  handleBack = ()=> {
    this.props.history.go(-1)
  }

  // 如果是修改 那么就要获取修改某条数据的信息并填充表单
  getDictByid= () => {
    return new Promise((resolve, reject) => {
      const { params } = this.props.match
      if (params.sid) {
        axios.ajax({
          url: API_DICT_MANAGE.getDictById,
          data: {
            id: params.sid
          }
        }).then(res => {
          if (res && Object.keys(res).length > 0) {
            resolve(this.setState({
              form: res
            }));
            if (res.type ===1) {
              this.setState({isLoad: true})
            } else {
              this.setState({isLoad: false})
            }
          }
        })
      }
    })
  }

  // 节点选择 根据isLoad来加载不同的表单 true 显示 跟节点的
  nodeChange = ()=> {
    const data = this.props.form.getFieldsValue();
    if (data.type === 1) {
      this.setState({isLoad: false});
    } else {
      this.setState({isLoad: true});
    }
  };

  // 保存操作
  handleOperator = (e) => {
    e && e.preventDefault();
    let formData = this.props.form.getFieldsValue();
    const { params } = this.props.match.params

    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({
          spinStatus: true,
        })

        let url = params && params === 'addOpt' ? API_DICT_MANAGE.addDict : API_DICT_MANAGE.editDict

        // 这个地方需要控制一下，如果是修改进来表单需要隐藏上级字典以及字典树
        let  obj =  params && params === 'updOpt' ? { id:this.state.id } : {}

        let data = Utils.trim(Object.assign({}, formData, obj))

        axios.optAjax({
          url: url,
          data: {
            ...data,
            type: 2
          }
        }).then(res => {
          if(res && res.code && res.code !== 0){
            this.setState({
              spinStatus: false,
            })
            return
          }
          message.success('操作成功')
          this.props.history.go(-1)

        })

      }
    });
  };


  render () {
    const { getFieldDecorator } = this.props.form;
    const state = this.state;
    const levelData = Utils.getOptionList(this.state.levelOpt)
    const formItemLayout = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 6 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 18 },
      },
    }

    const formItemLayout2 = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 3 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 21 },
      },
    }

    return (
      <div className='dictBg'>
        <Spin tip="加载中..." spinning = {this.state.spinStatus}>
        <div className="roleAdd">
          <div className="nav">
            <NavLink to='/home/system/dictManage/dict' > 字典管理 </NavLink> >  <span>{this.state.routerParams}</span>
          </div>

          <UserManageBar title="基本信息" />

          <div className="dictDetail">
            <Form  layout="horizontal" className = "publicForm">
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="上级字典"  { ...formItemLayout}>
                    {
                      getFieldDecorator( 'pid' , {
                        initialValue: state.form.pid,
                        onChange:  this.nodeChange,
                        rules: [{
                          required: true, message: '上级字典为必选',
                        }],
                      })(
                        <Select disabled >
                          {levelData}
                        </Select>
                      )
                    }
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="字典名称"  { ...formItemLayout}>
                    {
                      getFieldDecorator('name', {
                        initialValue: state.form.name,
                        rules: [
                          {required: true, message: '请输入字典名称'},
                          {max: 16, whitespace: true, message: '字典名称最长为16位字符'},
                      ],
                      })(
                        <Input placeholder="字典名称" />
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="字典代码"  { ...formItemLayout}>
                    {
                      getFieldDecorator('code', {
                        initialValue: state.form.code,
                        rules: [
                          {required: true, message: '请输入字典代码'},
                          {pattern: Utils.getFormRules('version').regular, message: '字典代码必须是字母和数字,最长为16位字符'},
                          {max: 16, message: '字典代码必须是字母和数字,最长为16位字符'},
                        ],
                      })(
                        <Input placeholder="字典代码" disabled ={this.state.disabled} />
                      )
                    }
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="字 &nbsp;典 &nbsp;值" { ...formItemLayout}>
                    {
                      getFieldDecorator('value', {
                        initialValue: state.form.value,
                        rules: [
                          {max: 16, message: '字典值最长为16位字符'},
                        ],
                      })(
                        <Input placeholder="字典值" disabled ={state.editStatus} />
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="16">
                  <FormItem label="字典描述"  { ...formItemLayout2}>
                    {
                      getFieldDecorator('remark', {
                        initialValue: state.form.remark,
                        rules: [
                          {max: 512, message: '字典描述最长为512位字符'},
                        ],
                      })(
                        <Input placeholder="字典描述" />
                      )
                    }
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>

          <div className="submitBtn" >
            <Button type="primary"  onClick={this.handleOperator} >保存</Button>
            <Button onClick={this.handleBack} >返回</Button>
          </div>

        </div>
        </Spin>
      </div>
    )
  }
}

export default Form.create()(DictChildAdd);