feat: 抽离 单据页面 组件

src/pages/transaction/stockSellStorage/bills/components/BillsFormPage/effects/index.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-08-04 14:42:57
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-08-04 17:59:35
+ * @Description: 
+ */
+import { FormPath, FormEffectHooks } from '@formily/antd';
+import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
+import { PublicApi } from '@/services/api';
+import { useBusinessEffects } from './useBusinessEffects';
+
+const { 
+  onFieldMount$, 
+} = FormEffectHooks;
+
+// 获取单据类型
+const fetchInvoicesType = (): Promise<any[]> => {
+  return new Promise((resolve, reject) => {
+    PublicApi.getProductInvoicesTypeAll().then(res => {
+      if (res.code === 1000) {
+        resolve(res.data);
+      }
+      reject();
+    }).catch(() => {
+      reject();
+    });
+  }); 
+};
+
+// 获取仓库
+const fetchInventory = (): Promise<any[]> => {
+  return new Promise((resolve, reject) => {
+    PublicApi.getProductWarehouseAll().then(res => {
+      if (res.code === 1000) {
+        resolve(res.data);
+      }
+      reject();
+    }).catch(() => {
+      reject();
+    });
+  }); 
+};
+
+export const createEffects = (context, actions) => {
+  const { setFieldState } = actions;
+
+  useBusinessEffects(context, actions);
+
+  useAsyncSelect('billType', fetchInvoicesType, ['name', 'id']); 
+  useAsyncSelect('inventoryId', fetchInventory, ['name', 'id']); 
+};
\ No newline at end of file

src/pages/transaction/stockSellStorage/bills/components/BillsFormPage/effects/useBusinessEffects.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-08-04 14:43:14
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-08-04 18:00:12
+ * @Description: 
+ */
+import { FormEffectHooks, FormPath, IFormActions } from '@formily/antd';
+import { useLinkageUtils } from '@/utils/formEffectUtils';
+
+const { 
+  onFieldInputChange$, 
+  onFieldValueChange$, 
+} = FormEffectHooks;
+
+export const useBusinessEffects = (context, actions: IFormActions) => {
+  const { getFieldValue, setFieldState, setFieldValue, getFieldState } = actions;
+
+  const linkage = useLinkageUtils();
+
+
+  // 对应仓库改变
+  onFieldInputChange$('inventoryId').subscribe(fieldState => {
+    const current = fieldState.originAsyncData.find(item => item.id === fieldState.value);
+    if (current) {
+      linkage.value('inventoryRole', current.principal);
+    }
+  });
+}
\ No newline at end of file

src/pages/transaction/stockSellStorage/bills/components/BillsFormPage/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-08-04 11:33:33
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-08-04 17:55:28
+ * @Description: 单据表单组件，提供基础的表单内容，单据明细相关由外部传入控制
+ */
+import React, { useEffect, useState } from 'react';
+import { Button, Spin } from 'antd';
+import { createFormActions, FormEffectHooks, ISchemaFormActions, ISchemaFormAsyncActions } from '@formily/antd';
+import { Radio, ArrayTable } from '@formily/antd-components';
+import {
+  DOC_TYPE_PURCHASE_RECEIPT,
+  DOC_TYPE_SALES_INVOICE,
+  DOC_TYPE_PROCESS_RECEIPT,
+  DOC_TYPE_PROCESS_INVOICE,
+  DOC_TYPE_RETURN_INVOICE,
+  DOC_TYPE_RETURN_RECEIPT,
+  DOC_TYPE_EXCHANGE_RETURN_INVOICE,
+  DOC_TYPE_EXCHANGE_RETURN_RECEIPT,
+  DOC_TYPE_EXCHANGE_INVOICE,
+  DOC_TYPE_EXCHANGE_RECEIPT,
+} from '@/constants/commodity';
+import AnchorPage from '@/layouts/AnchorPage';
+import NiceForm from '@/components/NiceForm';
+import createSchema, { BillDetailSchemaType, BILL_DETAIL_KEY } from './schema';
+import { createEffects } from './effects';
+import EllipsisText from '../EllipsisText';
+
+const TITLE_MAP = {
+  [DOC_TYPE_PURCHASE_RECEIPT]: '采购入库单',
+  [DOC_TYPE_SALES_INVOICE]: '销售发货单',
+  [DOC_TYPE_PROCESS_RECEIPT]: '加工入库单',
+  [DOC_TYPE_PROCESS_INVOICE]: '加工发货单',
+  [DOC_TYPE_RETURN_INVOICE]: '退货发货单',
+  [DOC_TYPE_RETURN_RECEIPT]: '退货入库单',
+  [DOC_TYPE_EXCHANGE_RETURN_INVOICE]: '换货退货发货单',
+  [DOC_TYPE_EXCHANGE_RETURN_RECEIPT]: '换货退货入货单',
+  [DOC_TYPE_EXCHANGE_INVOICE]: '换货发货单',
+  [DOC_TYPE_EXCHANGE_RECEIPT]: '换货入库单',
+};
+
+const formActions = createFormActions();
+const {
+  onFieldValueChange$,
+  onFieldInputChange$,
+  onFormInputChange$,
+} = FormEffectHooks;
+
+export type RelatedInfoType = {
+  /**
+   * 关联单据编号
+   */
+  relatedNo: string,
+  /**
+   * 会员名称
+   */
+  memberName: string,
+  /**
+   * 收货地址 或 发货地址
+   */
+  address: string,
+  /**
+   * 物流方式名称
+   */
+  logisticsTypeName: string,
+}
+
+interface IProps {
+  /**
+   * 单据类型
+   */
+  billType: number,
+  /**
+   * 是否可编辑的
+   */
+  editable?: boolean,
+  /**
+   * 获取对应单据详情
+   */
+  fetchRelatedInfo: () => Promise<RelatedInfoType>,
+}
+
+const BillsFormPage: React.FC<IProps> = (props: IProps) => {
+  const {
+    billType,
+    editable = true,
+    fetchRelatedInfo,
+  } = props;
+  const [relatedLoading, setRelatedLoading] = useState(false);
+  const [unsaved, setUnsaved] = useState(false);
+
+  const getRelatedInfo = () => {
+    if (fetchRelatedInfo) {
+      setRelatedLoading(true);
+      fetchRelatedInfo().then((res) => {
+        console.log('res', res)
+      }).finally(() => {
+        setRelatedLoading(false);
+      });
+    }
+  };
+
+  useEffect(() => {
+    getRelatedInfo();
+  }, []);
+
+  const anchorsArr = [
+    {
+      key: 'basicInfo',
+      name: '基本信息',
+    },
+    {
+      key: 'billDetail',
+      name: '单据明细',
+    },
+  ];
+
+  const handleSubmit = (values: any) => {
+
+  };
+
+  return (
+    <Spin spinning={relatedLoading}>
+      <AnchorPage
+        title={TITLE_MAP[1]}
+        anchors={anchorsArr}
+        extra={(
+          <Button type="primary">保存</Button>
+        )}
+      >
+        <NiceForm
+          previewPlaceholder=" "
+          onSubmit={handleSubmit}
+          actions={formActions}
+          initialValues={{}}
+          components={{
+            RadioGroup: Radio.Group, 
+            ArrayTable,
+            Text: EllipsisText,
+          }}
+          effects={($, actions) => {
+
+            createEffects($, actions);
+
+            onFormInputChange$().subscribe(() => {
+              if (!unsaved) {
+                setUnsaved(true);
+              }
+            });
+          }}
+          schema={createSchema(billType)}
+          editable={!!editable}
+        />
+      </AnchorPage>
+    </Spin>
+  );
+};
+
+export default BillsFormPage;