canrd-main / canrd-erp-front · Files

// import { PlusOutlined } from '@ant-design/icons';

import InvoiceModal from '@/pages/Invoice/components/InvoiceModal';

import {

  postServiceConstGetPayeeEnum,

  postServiceConstInvoiceType,
  postServiceConstInvoicingType,

  postServiceConstListInvoiceDetailNames,

  postServiceInvoiceApplyInvoice,

  postServiceInvoiceQueryCompanyInfo,

} from '@/services';
import { enumToSelect } from '@/utils';

import {
  DrawerForm,

  ProCard,
  ProFormDigit,

  ProFormGroup,

  ProFormList,
  ProFormMoney,

  ProFormSelect,
  ProFormText,

  ProFormTextArea,

} from '@ant-design/pro-components';

import { Button, Divider, Form } from 'antd';

import { useEffect } from 'react';

export default ({ dataList, setVisible, onClose }) => {

  // let subOrderIds = dataList?.map((item) => {
  //   return item.id;
  // });
  const [form] = Form.useForm();

  useEffect(() => {}, []);

  return (

    <DrawerForm
      open
      title="合并开票"

      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,

        minWidth: 500,

      }}
      form={form}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}

      submitter={{
        render: (props, defaultDoms) => {
          return [
            <InvoiceModal
              key={'invoicePreview'}
              button={<Button type="primary"> 发票预览 </Button>}
              getRecord={form.getFieldsValue}
            />,
            ...defaultDoms,
          ];
        },
      }}

      submitTimeout={2000}
      onFinish={async (values) => {

        postServiceInvoiceApplyInvoice({
          data: {
            ...values,
            subOrderIds: dataList.map((item) => {
              return item.id;
            }),
          },
        });

        onClose();

      }}
      onOpenChange={(val) => {
        return !val && setVisible();

      }}
    >

      <ProFormList

        name="subOrderIdObjs"

        readonly={true}

        label="开票订单"

        initialValue={dataList.map((item) => {
          return {
            value: item.id,
          };
        })}

        deleteIconProps={false}

      >

        <ProFormGroup key="group">

          <ProFormText readonly={true} name="value" label="" />

        </ProFormGroup>

      </ProFormList>

      <ProFormSelect
        key="key"
        label="购方名称"
        width="lg"
        showSearch
        name="partyAName"
        placeholder="请搜索购方"
        rules={[{ required: true, message: '购方名称必填' }]}
        onChange={(_, option) => {
          form.setFieldValue('partyATaxid', option.taxId);
        }}
        fieldProps={{
          optionItemRender(item) {
            if (item.type === 'add') {

              return <>{item.name}</>;

            }
            return (
              <>

                {item.name}

                <Divider type="vertical" />

                {item.taxId}

              </>
            );
          },
        }}
        debounceTime={1000}
        request={async (value) => {
          const keywords = value.keyWords;
          const res = await postServiceInvoiceQueryCompanyInfo({

            data: {
              nameLike: keywords,
              taxIdIsNotNull: true,
            },

          });
          let options = res?.data?.map((company) => {
            return {
              ...company,
              label: company.name,
              value: company.name + '|' + company.taxId,
              key: company.id,
            };
          });

          //第一个商品默认为要新增的商品
          if (keywords.trim() !== '') {
            options.unshift({
              name: keywords,
              type: 'add',
              label: keywords,
              value: keywords,
              key: keywords,
            });
          }
          return options;
        }}
      />

      <ProFormText
        width="md"

        name="partyATaxid"

        label="购方税号"
        placeholder="请输入名称"
      />
      <ProFormText
        width="md"

        name="partyAOpenBank"

        label="开户银行"
        placeholder="请输入名称"
      />
      <ProFormText
        width="md"

        name="partyABankAccount"

        label="开户行账号"
        placeholder="请输入名称"
      />
      <ProFormMoney
        label="开票金额"

        name="price"

        locale="zh-CN"
        rules={[{ required: true, message: '请填写开票金额!' }]}

        initialValue={dataList.reduce((accumulator, currentValue) => {
          return accumulator + currentValue.subOrderPayment;
        }, 0)}

      />
      <ProFormSelect

        name="invoicingType"

        label="开具类型"

        request={async () => {
          let invoicingTypeRet = await postServiceConstInvoicingType();
          let options = enumToSelect(invoicingTypeRet.data);
          return options;
        }}

        placeholder="请选择开具类型"
        rules={[{ required: true, message: '请选择开具类型!' }]}

      />
      <ProFormSelect

        name="type"

        label="开票类型"

        placeholder="请选择开票类型"
        rules={[{ required: true, message: '请选择开票类型!' }]}

        request={async () => {
          let invoiceTypeRet = await postServiceConstInvoiceType();
          let options = enumToSelect(invoiceTypeRet.data);
          return options;
        }}

      />
      <ProFormSelect

        name="partyB"

        label="开票收款单位"

        request={async () => {
          const res = await postServiceConstGetPayeeEnum();
          let options = res?.data?.map((payee: any) => {
            return {
              ...payee,
              label: payee.payeeName,
              value: payee.name,
            };
          });
          return options;
        }}
        onChange={(_, option) => {
          if (option) {
            form.setFieldsValue({
              partyBName: option.payeeName,
              partyBTaxid: option.taxId,
            });
          }
        }}

        placeholder="请选择收款单位"
        rules={[{ required: true, message: '请选择收款单位!' }]}

      />

      <ProFormText
        name="partyBName"
        label="开票收款单位名称"
        hidden
        rules={[{ required: true, message: '请选择收款单位!' }]}
      />
      <ProFormText
        name="partyBTaxid"
        label="开票收款单位税号"
        hidden
        rules={[{ required: true, message: '请选择收款单位!' }]}
      />

      <ProFormSelect

        name="isUrgent"

        label="是否加急"
        valueEnum={{

          true: '是',
          false: '否',

        }}

        placeholder="请选择是否加急"
        rules={[{ required: true, message: '请选择是否加急!' }]}

      />

      <ProFormList
        name="invoiceDetails"
        label="开票明细"

        initialValue={dataList.map((item) => {
          return {

            subOrderId: item.id,

            /*projectName: item.productName,*/

            specification: item.parameters,
            unit: item.unit,
            quantity: item.quantity,
            price: item.productPrice,
            totalPrice: item.totalPayment,
          };
        })}

        rules={[
          {
            required: true,
            validator: async (_, value) => {
              console.log(value);
              if (value && value.length > 0) {
                return;
              }
              throw new Error('至少要有一项！');
            },
          },
        ]}

        itemRender={(doms, listMeta) => {
          console.log(listMeta);
          return (
            <ProCard
              bordered
              extra={doms.action}
              title={'明细' + (listMeta.index + 1)}
              style={{
                marginBlockEnd: 8,
              }}
            >

              <ProFormText
                key={'subOrderId' + listMeta.index}
                name="subOrderId"
                label="子订单id"
                hidden
              />

              <ProFormSelect
                key={'projectName' + listMeta.index}
                width="md"

                showSearch

                name="projectName"

                rules={[{ required: true, message: '请输入开票项目名称!' }]}

                request={async (value) => {
                  const keywords = value.keyWords;
                  const res = await postServiceConstListInvoiceDetailNames({
                    data: {
                      nameLike: keywords,
                    },
                  });
                  let options = res?.data?.map((c: any) => {
                    return {
                      ...c,

                      label:
                        '*' +
                        c.productAndServiceCatagoryAbbreviation +
                        '*' +
                        c.name,

                      value:
                        '*' +
                        c.productAndServiceCatagoryAbbreviation +
                        '*' +
                        c?.name,
                      key: c.id,
                    };
                  });
                  return options;
                }}
                fieldProps={{
                  filterOption() {
                    return true;
                  },
                }}
                onChange={(_, option) => {
                  let index = listMeta.index;
                  let copyList = form.getFieldValue('invoiceDetails');
                  let currentData = copyList[index];
                  currentData.projectName =
                    '*' +
                    option.productAndServiceCatagoryAbbreviation +
                    '*' +
                    option.name;
                  currentData.specification = option.specification;
                  currentData.unit = option.unit;
                  form.setFieldValue('invoiceDetails', copyList);
                }}
                debounceTime={1000}
                label="项目名称"
                placeholder="请输入名称"
              />
              <ProFormText
                key={'specification' + listMeta.index}
                name="specification"
                label="规格型号"

                rules={[
                  {
                    message: '规格型号不能超过20个字符!',
                    max: 20,
                  },
                  {
                    message: '规格型号不能为空!',
                    required: true,
                  },
                ]}

                placeholder="请输入名称"
              />
              <ProFormText
                key={'unit' + listMeta.index}
                name="unit"
                label="单位"
                placeholder="请输入名称"
              />
              <ProFormDigit
                key={'quantity' + listMeta.index}
                label="数量"
                name="quantity"
                min={0}
              />
              <ProFormDigit
                key={'price' + listMeta.index}
                label="单价"
                name="price"
                min={0}
              />
              <ProFormMoney
                key={'totalPrice' + listMeta.index}
                label="金额"
                name="totalPrice"
                locale="zh-CN"
              />
            </ProCard>
          );
        }}
      ></ProFormList>

      <ProFormTextArea
        name="applyInvoicingNotes"
        label="备注"
        placeholder="请输入名称"
      />

    </DrawerForm>
  );
};