MaterialDetails.jsx

import React, { useState, useEffect } from 'react';
import { Form, Card, Button, Row, Col, Input, Select, Space, Upload ,Divider,Table} from 'antd';
import TableEdit from '@/components/Table/TableEdit';
import { PlusOutlined, MinusCircleOutlined ,UploadOutlined} from '@ant-design/icons';
import { history } from 'umi';
import Approval from '@/components/Customized/Approval';
import classNames from 'classnames';
import utilsStyles from '@/utils/utils.less';
import styles from './index.less';

const { TextArea } = Input;
const { Option } = Select;

const MaterialDetails = () => {

  const [form] = Form.useForm();
  const [tableData, setTableData] = useState([]);
  const [approvalData, setApprovalData] = useState([]);

  useEffect(() => {
    setApprovalData(tempApprovalData);
    setTableData(tempTableData);
  }, []);
  // const getListItems = (payload = {}) => {
  //   dispatchHandle(dispatch, 'control/device_service_type_post', payload);
  // }
  const handleSubmit = e => {
    e.preventDefault();
    form.validateFields().then(() => {
    }).catch(() => {
    });
  };
  const data=[]
  const columns = [

    { title: '序号', dataIndex: 'id' },
    { title: '物料编号', dataIndex: 'a' },
    { title: '品名', dataIndex: 'b' },
    { title: '规格/型号', dataIndex: 'c' },
    { title: '品牌', dataIndex: 'd' },
    { title: '产地', dataIndex: 'e' },
    { title: '单位', dataIndex: 'f' },
    { title: '单价（元）', dataIndex: 'g' },
    { title: '供应商', dataIndex: 'h' },
    { title: '供应商代码', dataIndex: 'i' },
    { title: '入库数量', dataIndex: 'j', editable: true },
    { title: '备注', dataIndex: 'k' },
    {
      title: '操作', dataIndex: 'm',
      render: () => (
        <>
          <a>打印条码</a>
        </>
      )
    },
  ];

  const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 }
  };

  return (
    <div>
      <Card>
        <Form form={form} onFinish={handleSubmit}>
          <h4 className={classNames(utilsStyles.comTitleBar)}> 基本信息</h4>
          <Row gutter={10} className={classNames(utilsStyles.gutterBox)}>
            <Col span={6}>
              <Form.Item
                name='pp'
                className={classNames(utilsStyles.antFormItem)}
                label='物料编码'
                {...formItemLayout}
                rules={[{ required: true, message: `请输入物料编码` }]}
              >
                <Input placeholder='请输入物料编码' readOnly />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name='bb'
                className={classNames(utilsStyles.antFormItem)}
                label='品名'
                {...formItemLayout}
                rules={[{ required: true, message: `请输入品名` }]}
              >
                <Input placeholder='请输入品名' readOnly />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item
                name='aa'
                className={classNames(utilsStyles.antFormItem)}
                label='类型'
                {...formItemLayout}
                rules={[{ required: true, message: `请选择类型` }]}
              >
                <Select style={{ width: '100%' }} placeholder="请选择" mode allowClear>
                  <Option value='1'>1</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item
                name='cc'
                className={classNames(utilsStyles.antFormItem)}
                label='规格'
                {...formItemLayout}
                rules={[{ required: true, message: `请输入规格` }]}
              >
                <Input placeholder='请输入规格' readOnly />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item
                name='ee'
                className={classNames(utilsStyles.antLightFormItem)}
                label='单位'
                {...formItemLayout}
                rules={[{ required: true, message: `请选择单位` }]}
              >
                <Select style={{ width: '100%' }} placeholder="个" allowClear mode>
                  <Option value='1'>1</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.List className={styles.formList} name="users">
                {(fields, { add, remove }) => (
                  <>
                    {fields.map(field => (
                      <Space key={field.key} >
                        <Form.Item
                          {...field}
                          name={[field.name, 'e']}
                        >
                          <Select allowClear >
                            <Option value='1'>1</Option>
                          </Select>
                        </Form.Item>
                        <Form.Item
                          {...field}
                          name={[field.name, 'u']}
                        >
                          <Input />
                        </Form.Item>
                        <Form.Item
                          {...field}
                          name={[field.name, 'v']}
                        >
                          <Input />
                        </Form.Item>
                        <Form.Item
                          {...field}
                          name={[field.name, 'n']}
                        >
                          <Input />
                        </Form.Item>
                        <Form.Item
                          {...field}
                          name={[field.name, 'm']}
                        >
                          <Input />
                        </Form.Item>
                        <MinusCircleOutlined onClick={() => remove(field.name)} />
                      </Space>
                    ))}
                    <Form.Item>
                      <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                        添加供应商
                      </Button>
                    </Form.Item>
                  </>
                )}
              </Form.List>
            </Col>
            <Col span={24}>
              <Form.Item label='备注' style={{ marginLeft: '40px' }}>
                <TextArea showCount maxLength={50} rows={3} readOnly />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name='qq'
                label='物料图片'
                rules={[{ required: true, message: `请选择物料图片` }]}
              >
                <Upload
                  listType="picture-card"
                >
                  <>
                    <PlusOutlined />
                    <div style={{ marginTop: 8 }}>上传</div>
                  </>
                </Upload>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
      <Card >
        <div style={{ marginBottom: 0 }}>
          <span>| 文件信息</span>
          <Divider style={{ marginTop: '5px' }} />
        </div>
        <Upload >
          <Button icon={<UploadOutlined />}>上传文件</Button>
        </Upload>
        <p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p>
        <div style={{ marginTop: '20px' }}>
          <span>| 变更记录</span>
          <Divider style={{ marginTop: '5px' }} />
          <Table
        rowKey={(record) => record.id}
        dataSource={data}
        columns={columns}
        className="custom-table-setting"
        bordered
      />
        </div>
      </Card>
      <Card>
        <div style={{ marginBottom: 0 }}>
          <span>| 审核</span>
          <Divider style={{ marginTop: '5px' }} />
        </div>
        <Approval data={approvalData} updateData={setApprovalData} />
      </Card>
    </div>
  )
}

export default MaterialDetails;