dictAdd.js

import React from 'react'
import './dict.less'
import { Form, Button, Input, Select, message, Tree, Radio, Row, Col, 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'
import { reduce } from 'zrender/lib/core/util';

const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = Tree.TreeNode;

class DictAdd extends React.Component {
  state = {
    form:{
      status: 1,
      name: '',
      type: 1,
      version: null,
      code: '',
      value: '',
      pid: '',
      remark: '',
      id: '',
    },
    childDicts: false, //判断如果有子级，需要加载数据
    routerParams: '新增字典',

    dictTree: [],
    isLoad: true,
    isLoadTree: false, // 为true 的情况下 并且 isLoad为false 的情况下 加载树
    disabled: true,
    checkedKeys: [],
    checked: {
      key: '',
      val: ''
    },
    spinStatus: false, // 是否显示加载中

  };

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

    // 获取路由信息
    this.getRouterParams()

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

  // 根据路由判断进来的是修改还是新增
  getRouterParams = () => {
    const params = this.props.match.params
    if (!params || !params.params) {
      message.warn('请重新选择，或者刷新页面')
      this.props.history.push({
        pathname: '/home/system/dict',
      });
      return
    }

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

  // 如果是修改 那么就要获取修改某条数据的信息并填充表单
  getDictByid= () => {
    let _this = this
    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) {
            //let data = Object.assign({}, res, {version: '' + res.version})
            resolve(this.setState({form: res}));
            if (res.type ===1) {
              this.setState({isLoad: true, spinStatus: false})
            } else {
              this.setState({isLoad: false, spinStatus: false})
            }
          }
        })
      }
    })
  }

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

  // 获取非跟节点下的树形结构
  getDictLevel () {
    this.setState({ loading: true })
    axios.ajax({
     url: API_DICT_MANAGE.getDict,
     data: {
       pageSize: 99999999999,
       pageNum: 1
     }
    }).then(res => {
     if (res.records && res.records.length > 0) {
      this.setState({ dictTree: res.records, loading: false })
     } else {
      this.setState({ dictTree: [], loading: false });
     }

    })
  }

  // 保存操作
  handleOperator = (e) => {
    e && e.preventDefault();
    let formData = this.props.form.getFieldsValue();
    const { params } = this.props.match.params
    const { userInfo } = this.state
    var pid = ''
    if (params && params === 'addOpt' && formData.type === 2 ) {
      if (this.state.checkedKeys.length > 0){
        pid = this.state.checkedKeys[0]
      }else {
        message.warn('请选择所属上级字典!')
        return false
      }
    }

    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
        // 这个地方需要控制一下，如果是修改进来表单需要隐藏上级字典以及字典树
        var obj = {};
        if(params && params === 'updOpt'){
          obj = this.state.form.type === 1 ? {type:1, id:this.state.form.id,} : {type:2, id:this.state.form.id, pid: Number(this.state.form.pid)}
        } else {
          obj = formData.type === 1 ? {} : {pid: Number(pid)}
        }
        let data = Utils.trim(Object.assign({}, formData, obj))
        axios.optAjax({
          url: url,
          data: {
            ...data
          }
        }).then(res => {
          if(res && res.code && res.code !== 0){
            this.setState({
              spinStatus: false,
            })
            return
          }
          message.success('操作成功')
          this.props.history.push('/home/system/dictManage/dict')
        })
      }
    });
  };

  // 树选择事件
  onSelect = (checkedKeys, e) => {
    this.setState({
      checkedKeys,
      checked: {
        key: checkedKeys[0],
        val: e.node.props.name
      }
    });
  }

  // 渲染字典树结构
  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.childDicts && item.childDicts.length > 0) {
        return <TreeNode icon={<Radio ref={item.name} checked={this.state.checkedKeys == item.id} value={item.id} />} title={item.name} key={item.id} name={item.name}>
          {this.renderTreeNodes(item.childDicts)}
        </TreeNode>
      } else {
        return <TreeNode icon={<Radio ref={item.name} checked={this.state.checkedKeys == item.id} value={item.id} />} title={item.name} key={item.id} name={item.name}>
        </TreeNode>
      }

      return <TreeNode {...item} />;
    });
  }

  render () {
    let _this = this;
    const { getFieldDecorator } = this.props.form;
    const state = this.state;

    const formItemLayout = {
      labelCol: {
        md: { span: 12 },
        lg: { span: 6 },
      },
      wrapperCol: {
        md: { span: 24 },
        lg: { span: 18 },
      },
    }


    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">
              {
                this.state.disabled ?
                <Row gutter={24}>
                  <Col span="8">
                    <FormItem label="上级字典"  { ...formItemLayout}>
                      {
                        getFieldDecorator( 'type' , {
                          initialValue: state.form.type,
                          onChange:  this.nodeChange,

                          rules: [
                            {required: true, message:'上级字典为必选'}],
                        })(
                          <Select>
                            <Option value={1}>根节点</Option>
                            <Option value={2}>非根节点</Option>
                          </Select>
                        )
                      }
                    </FormItem>
                </Col>
              </Row>
                : ''
              }
              <div>
              <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,
                        validateFirst: true,
                        rules: [
                          {required: true, message: '请输入字典代码'},
                          {pattern: Utils.getFormRules('version').regular, message: '字典代码必须是字母和数字,最长为16位字符'},
                          {max: 16, message: '字典代码必须是字母和数字,最长为16位字符'},
                        ],
                      })(
                        <Input disabled = {!this.state.disabled} placeholder="字典代码"/>
                      )
                    }
                  </FormItem>
                </Col>
              </Row>

              </div>
             {
              this.state.isLoad ?
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="字典版本"  { ...formItemLayout}>
                    {
                      getFieldDecorator('version', {
                        initialValue: state.form.version,
                        validateFirst: true,
                        rules: [
                          {required: true, message: '请输入字典版本'},
                          { max: 10,message: '请根据提示输入字典版本,最长为10位字符'},
                          {pattern: Utils.getFormRules('version').regular, message: '请根据提示输入字典版本,最长为10位字符'}
                        ],
                      })(
                        <Input placeholder="格式(v1.1.1/1.1.1)"/>
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="状&emsp;&emsp;态" value={state.form.status} { ...formItemLayout}>
                    {
                      getFieldDecorator('status', {
                        initialValue: state.form.status,
                        rules: [{
                          required: true, message: '状态不能为空',
                        }],
                      })(
                        <Select >
                          <Option value={1}>正常</Option>
                          <Option value={2}>禁用</Option>
                        </Select>
                      )
                    }
                  </FormItem>
                </Col>
              </Row>
              :
              <Row gutter={24}>
                <Col span="8">
                  <FormItem label="&nbsp;&nbsp;&nbsp;&emsp;字典值" { ...formItemLayout}>
                    {
                      getFieldDecorator('value', {
                        initialValue: state.form.value,
                        rules: [
                          {max: 16, message: '字典值最长为16位字符'},
                        ],
                      })(
                        <Input placeholder="字典值"/>
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="&nbsp;&nbsp;&nbsp;字典描述"  { ...formItemLayout}>
                    {
                      getFieldDecorator('remark', {
                        initialValue: state.form.remark,
                        rules: [
                          {max: 512, message: '字典描述最长为512位字符'},
                        ],
                      })(
                        <Input placeholder="字典描述" />
                      )
                    }
                  </FormItem>
                </Col>
              </Row>
             }
            </Form>
          </div>

          {
            !this.state.isLoad && this.state.isLoadTree ?
            <div>
              <UserManageBar title="字典树" />
              <div className="dictDetail">
                <div className="dictSubtitle">
                  <i className="anticon anticon-book"></i>
                  &nbsp;选择所属上级字典
                </div>
                {
                  this.state.dictTree.length > 0 ?
                  <Tree
                    showIcon
                    defaultExpandAll
                    className="orgTree"
                    onSelect={(checkedKeys, e) => { this.onSelect(checkedKeys, e) }}
                  >
                    {this.renderTreeNodes(this.state.dictTree)}
                  </Tree>
                  :
                  <div className ="noData" >NO Data</div>
                }

              </div>
            </div>
            : ''
          }

          <div className="submitBtn" >
            <Button type="primary"  disabled = {this.state.spinStatus} onClick={this.handleOperator} >保存</Button>
            <NavLink to='/home/system/dictManage/dict' ><Button>  返回 </Button></NavLink>
          </div>

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

export default Form.create()(DictAdd);