AddForm.jsx 4.88 KB
Newer Older
张烨's avatar
张烨 committed
1
import React from 'react';
2
import { Form, Input, Button, Select, Radio } from 'antd';
张烨's avatar
张烨 committed
3 4
import styles from './addForm.less';
import PicturesWall from '@/components/Upload/index';
张烨's avatar
张烨 committed
5
import EditeConfigWrapper from './editConfigFileWrapper';
张烨's avatar
张烨 committed
6 7

const { Item } = Form;
Maofei94's avatar
Maofei94 committed
8
const { Option } = Select;
张烨's avatar
张烨 committed
9
const AddForm = props => {
10
  const { submitCallback, nodeObj, addType, submitLoading, configFiles, productList } = props;
张烨's avatar
张烨 committed
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
  const [form] = Form.useForm();
  const [otherForm] = Form.useForm();
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 4, offset: 1 },
    wrapperCol: { span: 16 },
  };
  const submit = () => {
    if (addType === 1) {
      let obj = form.getFieldsValue();
      submitCallback(obj, nodeObj);
    }
    if (addType === 2) {
      // 分组
      let obj = otherForm.getFieldsValue();
      submitCallback(obj, nodeObj);
    }
  };
  const finish = () => {
    submit();
  };
  return (
    <div>
      {addType === 1 && (
        <Form
          form={form}
          name="groupform"
          {...layout}
          className={styles.formStyle}
          onFinish={finish}
        >
          <Item
            label="菜单名称"
            name="menuName"
            rules={[
              {
                required: true,
Maofei94's avatar
Maofei94 committed
48
                message: '请输入菜单名称',
张烨's avatar
张烨 committed
49 50 51
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
52
            <Input placeholder="请输入菜单名称" />
张烨's avatar
张烨 committed
53 54
          </Item>
          <Item label="菜单别名" name="shortName">
Maofei94's avatar
Maofei94 committed
55
            <Input placeholder="请输入菜单别名" />
张烨's avatar
张烨 committed
56
          </Item>
Maofei94's avatar
Maofei94 committed
57
          <Item label="产品类型:" name="product">
Maofei94's avatar
Maofei94 committed
58
            <Select placeholder="请选择产品类型" allowClear>
Maofei94's avatar
Maofei94 committed
59
              {productList &&
Maofei94's avatar
Maofei94 committed
60
                productList.length > 0 &&
Maofei94's avatar
Maofei94 committed
61
                productList.map(item => (
Maofei94's avatar
Maofei94 committed
62
                  <Option value={item.PackageName} key={item.PackageName}>
63
                    {`${item.ProductName}(${item.PackageName})`}
Maofei94's avatar
Maofei94 committed
64 65 66 67
                  </Option>
                ))}
            </Select>
          </Item>
张烨's avatar
张烨 committed
68 69 70 71 72 73
          <Item
            label="菜单图标"
            name="imageUrl"
            rules={[
              {
                required: true,
Maofei94's avatar
Maofei94 committed
74
                message: '请选择菜单图标',
张烨's avatar
张烨 committed
75 76 77
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
78
            <PicturesWall picType="menuNew" />
张烨's avatar
张烨 committed
79
          </Item>
80 81 82
          <Item label="菜单隐藏" name="hideInMenu" initialValue={false}>
            <Radio.Group>
              <Radio value={false}></Radio>
83
              <Radio value></Radio>
84 85
            </Radio.Group>
          </Item>
Maofei94's avatar
Maofei94 committed
86 87 88 89 90 91
          <Item
            label="功能路径"
            name="pageUrl"
            rules={[
              {
                required: true,
92
                // pattern: /^[^\s]*$/,
Maofei94's avatar
Maofei94 committed
93 94 95 96 97
                message: '请输入功能路径',
              },
            ]}
          >
            <Input placeholder="请输入功能路径" />
张烨's avatar
张烨 committed
98
          </Item>
张烨's avatar
张烨 committed
99 100 101 102 103 104
          <Item label="配置文件" name="config">
            <EditeConfigWrapper>
              <Select
                allowClear
                showSearch
                filterOption={(input, option) =>
105
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
张烨's avatar
张烨 committed
106 107 108 109 110 111 112 113 114 115
                }
              >
                {configFiles.map(c => (
                  <Select.Option key={c.text} value={c.value}>
                    {c.text}
                  </Select.Option>
                ))}
              </Select>
            </EditeConfigWrapper>
          </Item>
张烨's avatar
张烨 committed
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
          <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
            <Button type="primary" htmlType="submit" loading={submitLoading}>
              提交
            </Button>
          </Item>
        </Form>
      )}

      {addType === 2 && (
        <Form
          form={otherForm}
          name="menuform"
          {...layout}
          onFinish={finish}
          className={styles.formStyle}
        >
          <Item
Maofei94's avatar
Maofei94 committed
133
            label="菜单组名称"
张烨's avatar
张烨 committed
134 135 136 137
            name="menuName"
            rules={[
              {
                required: true,
Maofei94's avatar
Maofei94 committed
138
                message: '请输入菜单组名称',
张烨's avatar
张烨 committed
139 140 141
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
142
            <Input placeholder="请输入菜单组名称" />
张烨's avatar
张烨 committed
143
          </Item>
Maofei94's avatar
Maofei94 committed
144 145
          <Item label="菜单组别名" name="shortName">
            <Input placeholder="请输入菜单组别名" />
张烨's avatar
张烨 committed
146 147
          </Item>
          <Item
Maofei94's avatar
Maofei94 committed
148
            label="菜单组图标"
张烨's avatar
张烨 committed
149 150 151 152
            name="imageUrl"
            rules={[
              {
                required: true,
Maofei94's avatar
Maofei94 committed
153
                message: '请选择菜单组图标',
张烨's avatar
张烨 committed
154 155 156
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
157
            <PicturesWall picType="menuNew" />
张烨's avatar
张烨 committed
158 159 160 161 162 163 164 165 166 167 168 169
          </Item>
          <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
            <Button type="primary" htmlType="submit" loading={submitLoading}>
              提交
            </Button>
          </Item>
        </Form>
      )}
    </div>
  );
};
export default AddForm;