PartShopModal.tsx 4.58 KB
import React, { useEffect, useState } from 'react';
import { Modal, Button, Form, Select, InputNumber, message, Input, MessageArgsProps } from 'antd';
import { useStore } from '../index';
import ChoosePart from './ChoosePart';
import { savePartStockApi, savePartPriceApi } from '../api';

const { Item } = Form;
const { Option } = Select;

const apiObj: { [key: number]: any } = {
  1: savePartPriceApi,
  0: savePartStockApi
};
export default function PartShopModal() {
  const { visible, setVisible, shops, setLoading, item = {}, setItem, isprice, setIsprice, isadd, setIsadd, fw } = useStore();
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = useState(false);

  useEffect(() => {
    if (visible) {
      form.setFieldsValue({...item, part: {...item}});
    } else {
      setIsadd(false);
      setIsprice(false);
      setItem({});
      form.resetFields();
    }
  }, [visible]);

  const handleSubmit = () => {
    form.validateFields().then(values => {
      const params = {
        ...item,
        partId: values.part.partId,
        costPrice: values.costPrice,
        stock: values.stock || 0,
        lockStock: values.lockStock || 0,
        shopId: values.shopId,
        user: values.user,
        fixRemark: values.fixRemark,
        type: isadd ? 1 : isprice ? 3 : 2
      };
      setConfirmLoading(true);
      apiObj[Number(isprice)](params).then((res: { success: any; result: {} | null | undefined; }) => {
        if (res.success) {
          message.success(res.result);
          setVisible(false);
          setLoading(true);
          setConfirmLoading(false);
        } else {
          setConfirmLoading(false);
          message.error(res.result);
        }
      }).catch((error: { message: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | MessageArgsProps | null | undefined; }) => {
        setConfirmLoading(false);
        message.error(error.message);
      });
    });
  };

  const validatorLockStock = (rule: any, value: number) => {
    if (value > form.getFieldsValue(['stock']).stock) {
      return Promise.reject(new Error('锁定库存不能超过总库存数量!'));
    } else return Promise.resolve();
  };

  return (
    <Modal
      title={`${item.id ? "修改" : "新增"}服务站配件${isprice ? "价格" : ""}`}
      destroyOnClose
      visible={visible}
      maskClosable={false}
      onCancel={() => setVisible(false)}
      footer={[
        <Button key="1" type="default" loading={confirmLoading} onClick={() => setVisible(false)}>取消</Button>,
        <Button key="2" type="primary" loading={confirmLoading} onClick={() => handleSubmit()}>确定</Button>
      ]}
    >
      <Form
        form={form}
        labelCol={{
          xs: { span: 24 },
          sm: { span: 6 }
        }}
        wrapperCol={{
          xs: { span: 24 },
          sm: { span: 18 }
        }}
      >
        <Item label="服务站" name="shopId" rules={[{ required: true, message: "请选择服务站" }]}>
          <Select placeholder="请选择服务站" disabled={!!item.id} allowClear showSearch optionFilterProp="children">
            {shops.map((item: PmsStoragePartShop.Option) => <Option key={item.id} value={item.id || 0}>{item.name || ""}</Option>)}
          </Select>
        </Item>
        <Item label="配件名称(编码)" name="part" rules={[{ required: true, message: "请选择配件" }]}>
          <ChoosePart disabled={!!item.id} />
        </Item>
        <Item label="加权成本价(元)" name="costPrice" rules={[{ required: true, message: "请输入加权成本价" }]}>
          <InputNumber style={{ width: "100%" }} min={0} step={0.1} placeholder="加权成本价(元)" disabled={!(isadd || isprice)} />
        </Item>
        <Item label="总库存数量" name="stock">
          <InputNumber style={{ width: "100%" }} min={0} step={1} placeholder="总库存数量" disabled={isprice || isadd} defaultValue={0} />
        </Item>
        <Item label="锁定库存" name="lockStock" rules={[{ validator: validatorLockStock }]}>
          <InputNumber style={{ width: "100%" }} min={0} step={1} placeholder="锁定库存" disabled defaultValue={0} />
        </Item>
        {!!fw && !isprice && !isadd && (
        <Item label="修改人" name="user" rules={[{ required: true, message: "请输入修改人" }]}>
          <Input style={{ width: "100%" }} />
        </Item>
      )}
        {!!fw && !isprice && !isadd && (
        <Item label="修改原因" name="fixRemark" rules={[{ required: true, message: "请输入修改原因" }]}>
          <Input style={{ width: "100%" }} />
        </Item>
      )}
      </Form>
    </Modal>
  );
}