AddForm.jsx 5.63 KB
Newer Older
Maofei94's avatar
Maofei94 committed
1
import React, { useState, useEffect } from 'react';
Maofei94's avatar
Maofei94 committed
2 3 4
import { Form, Input, Button, Row, Col } from 'antd';
import styles from './addForm.less';
import PicturesWall from '@/components/Upload/index';
Maofei94's avatar
Maofei94 committed
5 6
import CheckList from './checkBox';
import checkStyles from './checkBox';
Maofei94's avatar
Maofei94 committed
7 8 9

const { Item } = Form;
const AddForm = props => {
Maofei94's avatar
Maofei94 committed
10 11 12 13
  const {
    submitCallback,
    nodeType,
    nodeObj,
14
    keepType,
Maofei94's avatar
Maofei94 committed
15 16 17 18 19
    addType,
    submitLoading,
    valueCallback,
    addList,
  } = props;
Maofei94's avatar
Maofei94 committed
20
  const [form] = Form.useForm();
Maofei94's avatar
Maofei94 committed
21
  const [otherForm] = Form.useForm();
Maofei94's avatar
Maofei94 committed
22
  console.log(nodeObj, 'nodeObj');
Maofei94's avatar
Maofei94 committed
23
  const layout = {
Maofei94's avatar
Maofei94 committed
24 25 26 27 28 29 30
    layout: 'horizontal',
    labelCol: { span: 4, offset: 1 },
    wrapperCol: { span: 16 },
  };
  const submit = () => {
    if (addType === 1 || addType === 2) {
      let obj = form.getFieldsValue();
31
      submitCallback(obj, nodeObj, keepType);
Maofei94's avatar
Maofei94 committed
32 33 34
    }
    if (addType === 3 || addType === 4) {
      let obj = otherForm.getFieldsValue();
35
      submitCallback(obj, nodeObj, keepType);
Maofei94's avatar
Maofei94 committed
36
    }
Maofei94's avatar
Maofei94 committed
37
  };
Maofei94's avatar
Maofei94 committed
38 39 40
  const finish = () => {
    submit();
  };
Maofei94's avatar
Maofei94 committed
41
  useEffect(() => {}, [nodeObj, addType]);
Maofei94's avatar
Maofei94 committed
42
  return (
Maofei94's avatar
Maofei94 committed
43 44
    <div>
      {(addType === 1 || addType === 2) && (
Maofei94's avatar
Maofei94 committed
45 46 47 48 49 50 51 52
        <Form
          form={form}
          name="groupform"
          {...layout}
          className={styles.formStyle}
          onFinish={finish}
        >
          <Item
Maofei94's avatar
Maofei94 committed
53
            label="菜单组名称"
Maofei94's avatar
Maofei94 committed
54 55 56 57
            name="menuName"
            rules={[
              {
                required: true,
Maofei94's avatar
Maofei94 committed
58
                message: '请输入菜单组名称',
Maofei94's avatar
Maofei94 committed
59 60 61
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
62
            <Input placeholder="请输入菜单组名称" />
Maofei94's avatar
Maofei94 committed
63
          </Item>
Maofei94's avatar
Maofei94 committed
64 65
          <Item label="菜单组别名" name="shortName">
            <Input placeholder="请输入菜单组别名" />
Maofei94's avatar
Maofei94 committed
66 67
          </Item>
          {addType === 1 && (
Maofei94's avatar
Maofei94 committed
68 69 70 71 72 73 74 75 76 77
            <Item
              label="在线图标"
              name="imageUrl"
              rules={[
                {
                  required: true,
                  message: '请选择在线图标',
                },
              ]}
            >
Maofei94's avatar
Maofei94 committed
78
              <PicturesWall picType="androidMenu" />
Maofei94's avatar
Maofei94 committed
79 80 81
            </Item>
          )}
          {addType === 1 && (
Maofei94's avatar
Maofei94 committed
82 83 84 85 86 87 88 89 90 91
            <Item
              label="离线图标"
              name="offlineImgUrl"
              rules={[
                {
                  required: true,
                  message: '请选择离线图标',
                },
              ]}
            >
Maofei94's avatar
Maofei94 committed
92
              <PicturesWall picType="androidMenu" />
Maofei94's avatar
Maofei94 committed
93 94 95 96
            </Item>
          )}

          {addType === 2 && (
Maofei94's avatar
Maofei94 committed
97
            <Item
Maofei94's avatar
Maofei94 committed
98
              label="菜单组图标"
Maofei94's avatar
Maofei94 committed
99 100 101 102
              name="imageUrl"
              rules={[
                {
                  required: true,
Maofei94's avatar
Maofei94 committed
103
                  message: '请选择菜单组图标',
Maofei94's avatar
Maofei94 committed
104 105 106
                },
              ]}
            >
Maofei94's avatar
Maofei94 committed
107
              <PicturesWall picType="androidMenu" />
Maofei94's avatar
Maofei94 committed
108 109 110 111 112 113
            </Item>
          )}
          <Item label="功能参数" name="funParam">
            <Input />
          </Item>
          <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
Maofei94's avatar
Maofei94 committed
114
            <Button type="primary" htmlType="submit" loading={submitLoading}>
Maofei94's avatar
Maofei94 committed
115 116 117 118 119 120 121
              提交
            </Button>
          </Item>
        </Form>
      )}

      {(addType === 3 || addType === 4) && (
Maofei94's avatar
Maofei94 committed
122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
        <Form
          form={otherForm}
          name="menuform"
          {...layout}
          onFinish={finish}
          className={styles.formStyle}
        >
          <Item
            label="菜单名称"
            name="menuName"
            rules={[
              {
                required: true,
                message: '请输入菜单名称',
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
139 140 141 142 143 144
            <Input />
          </Item>
          <Item label="菜单别名" name="shortName">
            <Input />
          </Item>
          {addType === 3 && (
Maofei94's avatar
Maofei94 committed
145 146 147 148 149 150 151 152 153 154
            <Item
              label="在线图标"
              name="imageUrl"
              rules={[
                {
                  required: true,
                  message: '请选择在线图标',
                },
              ]}
            >
Maofei94's avatar
Maofei94 committed
155
              <PicturesWall picType="androidMenu" />
Maofei94's avatar
Maofei94 committed
156 157 158
            </Item>
          )}
          {addType === 3 && (
Maofei94's avatar
Maofei94 committed
159 160 161 162 163 164 165 166 167 168
            <Item
              label="离线图标"
              name="offlineImgUrl"
              rules={[
                {
                  required: true,
                  message: '请选择离线图标',
                },
              ]}
            >
Maofei94's avatar
Maofei94 committed
169
              <PicturesWall picType="androidMenu" />
Maofei94's avatar
Maofei94 committed
170 171 172
            </Item>
          )}
          {addType === 4 && (
Maofei94's avatar
Maofei94 committed
173 174 175 176 177 178 179 180 181 182
            <Item
              label="菜单图标"
              name="imageUrl"
              rules={[
                {
                  required: true,
                  message: '请选择菜单图标',
                },
              ]}
            >
Maofei94's avatar
Maofei94 committed
183
              <PicturesWall picType="androidMenu" />
Maofei94's avatar
Maofei94 committed
184 185
            </Item>
          )}
Maofei94's avatar
Maofei94 committed
186 187 188 189 190 191 192 193 194 195
          <Item
            label="功能路径"
            name="pageUrl"
            rules={[
              {
                required: true,
                message: '请输入功能路径',
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
196 197 198 199 200
            <Input />
          </Item>
          <Item label="功能参数" name="funParam">
            <Input />
          </Item>
Maofei94's avatar
Maofei94 committed
201 202 203 204 205
          {/* <CheckList
            nodeType={addType}
            valueCallback={valueCallback}
            addList={addList}
          /> */}
Maofei94's avatar
Maofei94 committed
206
          <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
Maofei94's avatar
Maofei94 committed
207
            <Button type="primary" htmlType="submit" loading={submitLoading}>
Maofei94's avatar
Maofei94 committed
208 209 210 211 212 213
              提交
            </Button>
          </Item>
        </Form>
      )}
    </div>
Maofei94's avatar
Maofei94 committed
214 215 216
  );
};
export default AddForm;