AddOrModifyDrawer.tsx 5.24 KB
import { RESPONSE_CODE } from '@/constants/enum';
import {
  postOrderErpOrderStagesUpload,
  postProcureReturnBillAddOrModify,
  postServiceConstStores,
} from '@/services';
import { enumToSelect } from '@/utils';
import {
  DrawerForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormUploadDragger,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import { RcFile } from 'antd/es/upload';
export default ({ data, type, reloadTable }) => {
  const [form] = Form.useForm();
  const onfinish = async (values) => {
    const res = await postProcureReturnBillAddOrModify({
      data: values,
    });
    if (res.result === RESPONSE_CODE.SUCCESS) {
      message.success('新增成功');
      reloadTable();
      return true;
    }
    // 不返回不会关闭弹框
  };
  const optType = {
    add: {
      readOnly: false,
      title: '新增采购退货单',
      button: (
        <Button size={'small'} type="primary">
          新增
        </Button>
      ),
      onFinish: onfinish,
    },
    modify: {
      readOnly: false,
      title: '修改采购退货单',
      button: (
        <Button size={'small'} type="link">
          编辑
        </Button>
      ),
      onFinish: onfinish,
    },
    detail: {
      readOnly: true,
      title: '查看采购退货单',
      button: (
        <Button size={'small'} type="link">
          查看
        </Button>
      ),
      onFinish: () => {},
    },
  };
  return (
    <DrawerForm
      title={optType[type].title}
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      form={form}
      trigger={optType[type].button}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={optType[type].onFinish}
    >
      <ProFormText
        name="consignee"
        label="收货人"
        placeholder="请输入收货人"
        readonly={optType[type].readOnly}
        initialValue={data?.consignee}
        rules={[
          {
            required: true,
            message: '请输入收货人',
          },
        ]}
      />
      <ProFormText
        name="phoneNumber"
        label="联系电话"
        placeholder="请输入联系电话"
        initialValue={data?.phoneNumber}
        readonly={optType[type].readOnly}
        rules={[
          {
            required: true,
            message: '请输入联系电话',
          },
        ]}
      />
      <ProFormText
        name="address"
        label="收货地址"
        placeholder="请输入收货地址"
        initialValue={data?.address}
        readonly={optType[type].readOnly}
        rules={[
          {
            required: true,
            message: '请输入联系电话',
          },
        ]}
      />
      <ProFormTextArea
        name="productDetail"
        label="产品明细"
        placeholder="请输入产品明细"
        initialValue={data?.productDetail}
        readonly={optType[type].readOnly}
        rules={[
          {
            required: true,
            message: '请输入联系电话',
          },
        ]}
      ></ProFormTextArea>
      <ProFormSelect
        name="sendStoreCode"
        readonly={optType[type].readOnly}
        fieldProps={{
          labelInValue: false,
        }}
        initialValue={data ? data?.sendStoreCode + '' : null}
        label="发货仓库"
        request={async () => {
          const res = await postServiceConstStores();
          return enumToSelect(res.data);
        }}
        rules={[
          {
            required: true,
            message: '请输入联系电话',
          },
        ]}
      ></ProFormSelect>
      <ProFormTextArea
        name="notes"
        label="备注"
        initialValue={data?.notes}
        readonly={optType[type].readOnly}
        placeholder="请输入备注"
      ></ProFormTextArea>
      <ProFormUploadDragger
        label="附件"
        name="attachmentsFile"
        action="upload.do"
        hidden={optType[type].readOnly}
        onChange={(info) => {
          const uploadFile = async ({ fileList: newFileList }) => {
            if (newFileList.length > 0) {
              const formData = new FormData();
              formData.append('file', newFileList[0].originFileObj as RcFile);
              const res = await postOrderErpOrderStagesUpload({
                data: formData,
                headers: {
                  'Content-Type':
                    'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
                },
              });
              const url = res.data;
              console.log('attachments' + JSON.stringify(url));
              form.setFieldValue('attachments', url);
            } else {
              form.setFieldValue('attachments', null);
            }
          };
          uploadFile(info);
        }}
        max={1}
      />
      <a hidden={!optType[type].readOnly} href={data?.attachments} download>
        下载附件
      </a>
      <ProFormText
        initialValue={data?.attachments}
        name="attachments"
        hidden
      ></ProFormText>
      <ProFormText initialValue={data?.id} name="id" hidden></ProFormText>
    </DrawerForm>
  );
};