ai-admin/src/components/DictManager/addDict.js

import React, {
  useState, useEffect, useContext
} from 'react';
import { Form, Input, Select, Button, Switch, TreeSelect, message, Space } from 'antd';
import apiObj from '@api/index';
import utils from '@utils/index'
import DictContext from './Dict-context';
import { useSelector } from 'react-redux'
import Item from 'antd/lib/list/Item';
const { post, api } = apiObj;
const { TextArea } = Input;

function AddDict(props) {
  
  const [form] = Form.useForm();
  const { type, formData} = useContext(DictContext);
  const staticInfo = useSelector(state => {
    return state.staticInfo;
  });
  const initialValues = formData;

  const onFinish = values => {
	  values.status ? values.status=1:values.status=0
    let params = values
    if (type == 3) {
	  params.id=initialValues.id
      editDict(params)
    } else {
      addDict(params)
    }

  };
  function addDict(param) {
    post(api.addDict, param).then((res) => {
      if (res.data.code === 200) {
        props.DictChange()
        message.success(res.data.message);
      } else {
        message.error(res.data.message);
      }
    })
  }
  function editDict(param) {
    post(api.updateDict, param).then((res) => {
      if (res.data.code === 200) {
        props.DictChange()
        message.success(res.data.message);
      } else {
        message.error(res.data.message);
      }
    })
  }
  function cancel() {
  	props.cancel()
  }
  
  function onValuesChange() {
  	props.isChange(form.isFieldsTouched())
  }

  return (
    <>
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        form={form}
        name="register"
        onFinish={onFinish}
        initialValues={initialValues}
		onValuesChange={onValuesChange}
      >

        <Form.Item
          name="groupType"
          label="代码类别"
          rules={[
            {
              required: true,
              message: '请输入代码类别',
            },
          ]}
        >
          {type == 3 ?
		    <Input  autoComplete='off'/>
            :
            <Input placeholder="请输入代码类别" autoComplete='off'/>
          }

        </Form.Item>
        <Form.Item
          name="val"
          label="字典编码"
          rules={[
            {
              required: true,
              message: '请输入字典编码',
            },
          ]}
        >
          {type == 3 ?
            <Input  autoComplete='off'/>
            :
            <Input placeholder="请输入字典编码" autoComplete='off'/>
          }

        </Form.Item>
        <Form.Item
          name="name"
          label="代码名称"
          rules={[{ required: true, message: '请输入代码名称', whitespace: true }]}
        >
          {type == 3 ?
            <Input  autoComplete='off'/>
            :
            <Input placeholder="请输入代码名称" autoComplete='off'/>
          }

        </Form.Item>
        <Form.Item
          name="remark"
          label="字典说明"
		  rules={[
		    {
		      required: true,
		      message: '请输入字典说明',
		    }, 
			{
		      max: 50,
		      message: '密码不能大于50个字符',
		    },
			]}
        >
          {type == 3 ?
            <TextArea rows={4} />
            :
          	<TextArea placeholder="50个字以内" rows={4} />
          }

        </Form.Item>
        <Form.Item
          name="status"
		  valuePropName={initialValues.status=="禁用"?"":"checked"}
          label="当前状态"
          rules={[{ required: true, message: '请选择状态' }]}
        >
		<Switch/>
        </Form.Item>
        
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space size="middle">
              <Button htmlType="button" onClick={e => cancel()}>
                取消
            </Button>
              <Button type="primary" htmlType="submit">
                保存
            </Button>
            </Space>
          </Form.Item>

      </Form>
    </>
  );
}

export default AddDict;