新增单据类型页面替换成schema

src/components/NiceForm/linkages/linkEnum.ts

@@ -74,14 +74,15 @@ export const useLinkEnumEffect = (childKey, transformFn?) => {
         const { originData = [] } = state
         setFieldState(target, targetState => {
           if (state.value === undefined) {
-
           } else {
-            const result = originData.find(v => v.id === state.value)[childKey] || []
-            if (state.modified) {
-              targetState.value = undefined
+            if (originData.length > 0) {
+              const result = originData.find(v => v.id === state.value)[childKey] || []
+              if (state.modified) {
+                targetState.value = undefined
+              }
+              targetState.originData = result
+              targetState.props.enum = transformFn ? transformFn(result) : result
             }
-            targetState.originData = result
-            targetState.props.enum = transformFn ? transformFn(result) : result
           }
         })
       })

src/pages/transaction/stockSellStorage/billsType/addBillsType.tsx

-import React, { useState, useEffect, useRef } from 'react';
-import { usePageStatus } from '@/hooks/usePageStatus';
+import React from 'react';
 import { history } from 'umi';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { SaveOutlined } from '@ant-design/icons';
 import { createFormActions } from '@formily/antd';
 import { Button, Card } from 'antd';
 import ReutrnEle from '@/components/ReturnEle';
-import {
-  SchemaForm,
-  SchemaMarkupField as Field,
-  FormMegaLayout,
-} from '@formily/antd';
-import { Input, Select } from '@formily/antd-components';
+import NiceForm from '@/components/NiceForm';
+import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
+import { useInitValue } from '@/formSchema/effects/useInitValue';
 import { PublicApi } from '@/services/api';
+import { billsTypeDetailSchema } from './schema';
 
 const addSchemaAction = createFormActions();
 
 const AddWarehouse: React.FC<{}> = props => {
-  const ref = useRef<any>({});
   const { pageStatus, preview, id } = usePageStatus();
-  const [formValue, setFormValue] = useState<any>({});
-
-  useEffect(() => {
-    if (pageStatus != 0) {
-      PublicApi.getWarehouseInvoicesTypeDetails({
-        id: id,
-      }).then(res => {
-        setFormValue(res.data);
-      });
-    }
-  }, []);
+  const initValue = useInitValue(PublicApi.getWarehouseInvoicesTypeDetails);
 
   const handleSubmit = value => {
     if (pageStatus === 0) {
@@ -72,47 +58,15 @@ const AddWarehouse: React.FC<{}> = props => {
       }
     >
       <Card>
-        <SchemaForm
-          value={formValue}
-          editable={preview != '1'}
+        <NiceForm
+          previewPlaceholder="loading..."
+          editable={pageStatus !== PageStatus.PREVIEW}
+          effects={$ => {}}
+          initialValues={initValue}
+          onSubmit={handleSubmit}
           actions={addSchemaAction}
-          components={{ Input, Select }}
-          onSubmit={value => handleSubmit(value)}
-        >
-          <FormMegaLayout labelCol={4} labelAlign="left" wrapperCol={12}>
-            <Field
-              name="number"
-              title="单据类型编号"
-              x-component="Input"
-              x-component-props={{
-                placeholder: '最长10个字符',
-                maxLength: 5,
-              }}
-              required
-            />
-            <Field
-              name="name"
-              title="单据类型名称"
-              x-component="Input"
-              x-component-props={{
-                placeholder: '最长20个字符，10个汉字',
-                maxLength: 10,
-              }}
-              required
-            />
-            <Field
-              name="direction"
-              title="仓库负责人"
-              enum={[
-                { label: '入库', value: 1 },
-                { label: '出库', value: 2 },
-              ]}
-              x-component="Select"
-              x-component-props={{ placeholder: '请选择' }}
-              required
-            />
-          </FormMegaLayout>
-        </SchemaForm>
+          schema={billsTypeDetailSchema}
+        />
       </Card>
     </PageHeaderWrapper>
   );

src/pages/transaction/stockSellStorage/billsType/schema/index.tsx

+import { ISchema } from '@formily/antd';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+
+export const billsTypeSchema: ISchema = {
+  type: 'object',
+  properties: {},
+};
+
+export const billsTypeDetailSchema: ISchema = {
+  type: 'object',
+  properties: {
+    MEGA_LAYOUT: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      'x-component-props': {
+        labelCol: 4,
+        wrapperCol: 12,
+        labelAlign: 'left',
+      },
+      properties: {
+        number: {
+          type: 'string',
+          title: '单据类型编号',
+          'x-component-props': {
+            placeholder: '最长10个字符',
+            maxLength: 5,
+          },
+          required: true,
+        },
+        name: {
+          type: 'string',
+          title: '单据类型名称',
+          'x-component-props': {
+            placeholder: '最长20个字符，10个汉字',
+            maxLength: 10,
+          },
+          required: true,
+        },
+        direction: {
+          type: 'string',
+          title: '仓库负责人',
+          enum: [
+            { label: '入库', value: 1 },
+            { label: '出库', value: 2 },
+          ],
+          'x-component-props': {
+            placeholder: '请选择',
+          },
+          required: true,
+        },
+      },
+    },
+  },
+};

src/pages/transaction/stockSellStorage/warehouse/addWarehouse copy.tsx

-import React, { useState, useEffect, useRef } from 'react';
-import { usePageStatus } from '@/hooks/usePageStatus';
-import { history } from 'umi';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { SaveOutlined } from '@ant-design/icons';
-import { createFormActions, FormEffectHooks } from '@formily/antd';
-import { Button, Card } from 'antd';
-import ReutrnEle from '@/components/ReturnEle';
-import {
-  SchemaForm,
-  SchemaMarkupField as Field,
-  FormMegaLayout,
-} from '@formily/antd';
-import { Input, Select } from '@formily/antd-components';
-import { PublicApi } from '@/services/api';
-import { useLinkageUtils } from '@/utils/formEffectUtils';
-import {useLinkEnumEffect} from '@/components/NiceForm/linkages/linkEnum'
-const addSchemaAction = createFormActions();
-
-const { onFormMount$ } = FormEffectHooks;
-
-const AddWarehouse: React.FC<{}> = (props: any) => {
-  const ref = useRef({});
-  const { pageStatus, preview, id } = usePageStatus();
-  const [provinceList, setProvinceList] = useState([]);
-  const [cityList, setCityList] = useState([]);
-  const [areaList, setAreaList] = useState([]);
-  const [telCodeList, setTelCodeList] = useState<any>([]);
-  const [formValue, setFormValue] = useState<any>({});
-
-  useEffect(() => {
-    let formValues;
-    // 获取详情
-    if (pageStatus != 0) {
-      PublicApi.getWarehouseWarehouseDetails({
-        id: usePageStatus().id,
-      }).then(res => {
-        formValues = res.data;
-        setFormValue(res.data);
-      });
-    }
-    // 获取省市区
-    // PublicApi.getManageAreaAll().then(res => {
-    //   let provinceOptions = [];
-    //   for (let item of res.data) {
-    //     provinceOptions.push({
-    //       label: item.name,
-    //       value: item.id,
-    //       areaResponses: item.areaResponses,
-    //     });
-    //   }
-    //   setProvinceList(provinceOptions);
-    //   if (pageStatus != 0) {
-    //     getSubAddressList('province', provinceOptions, formValues.provinceId);
-    //     getSubAddressList('city', cityList, formValues.cityId);
-    //   }
-    // });
-    // 获取手机code
-    PublicApi.getManageGetTelCode().then(res => {
-      setTelCodeList(res.data);
-    });
-  }, []);
-
-  const getAddressList = (type, id?) => {
-    let options = [];
-    if (type === 'province') {
-      provinceList.find(target => {
-        if (target.value === id) {
-          for (let item of target.areaResponses) {
-            options.push({ label: item.name, value: item.id });
-          }
-          setCityList(options);
-        }
-      });
-    } else {
-      cityList.find(target => {
-        if (target.value === id) {
-          for (let item of target.areaResponses) {
-            options.push({ label: item.name, value: item.id });
-          }
-          setAreaList(options);
-        }
-      });
-    }
-  };
-
-  const getSubAddressList = (type, list, id) => {
-    let options = [];
-    list.find(target => {
-      if (target.value === id) {
-        for (let item of target.areaResponses) {
-          options.push({ label: item.name, value: item.id });
-        }
-        if (type === 'province') return setCityList(options);
-        if (type === 'city') return setAreaList(options);
-      }
-    });
-  };
-
-  const handleSubmit = value => {
-    if (pageStatus === 0)
-      return PublicApi.postWarehouseWarehouseAdd({ ...value }).then(res => {
-        if (res.code === 1000) return history.goBack();
-      });
-    else
-      return PublicApi.postWarehouseWarehouseUpdate({
-        id: id,
-        ...value,
-      }).then(res => {
-        if (res.code === 1000) return history.goBack();
-      });
-  };
-  return (
-    <PageHeaderWrapper
-      onBack={() => history.goBack()}
-      backIcon={<ReutrnEle description="返回" />}
-      title={
-        pageStatus === 0
-          ? '新建仓库'
-          : pageStatus === 1
-          ? '编辑仓库'
-          : '查看仓库'
-      }
-      extra={
-        preview != '1'
-          ? [
-              <Button
-                key="1"
-                type="primary"
-                icon={<SaveOutlined />}
-                onClick={() => addSchemaAction.submit()}
-              >
-                保存
-              </Button>,
-            ]
-          : []
-      }
-    >
-      <Card>
-        <SchemaForm
-          value={formValue}
-          editable={preview != '1'}
-          actions={addSchemaAction}
-          effects={($, { setFieldState }) => {
-            $('onFormMount').subscribe(state => {
-              PublicApi.getManageAreaAll().then(res => {
-                const { data } = res
-                setFieldState('provinceId', targetState => {
-                  targetState.originData = data
-                  targetState.props.enum = data.map(v => ({
-                    label: v.name,
-                    value: v.id
-                  }))
-                })
-              })
-            });
-            useLinkEnumEffect('areaResponses', result => result.map(v => ({
-              label: v.name,
-              value: v.id
-            })))
-            // $('onFieldValueChange', 'provinceId').subscribe(state => {
-
-            //   const origin = areaData.current.find(v => v.id === state.value)?.areaResponses
-            //   console.log(origin)
-            //   useLinkageUtils().enum('cityId', origin)
-            // })
-          }}
-          components={{ Input, Select, Textarea: Input.TextArea }}
-          onSubmit={value => handleSubmit(value)}
-        >
-          <FormMegaLayout labelCol={4} labelAlign="left" wrapperCol={12}>
-            <Field name="name" title="仓库名称" x-component="Input" required />
-            <FormMegaLayout label="仓库地址" wrapperCol={24} required>
-              <FormMegaLayout grid full autoRow columns={3}>
-                <Field
-                  name="provinceId"
-                  enum={provinceList}
-                  x-component="Select"
-                  x-component-props={{
-                    placeholder: '- 省 -',
-                    onChange: val => getAddressList('province', val),
-                  }}
-                  required
-                />
-                <Field
-                  name="cityId"
-                  enum={cityList}
-                  x-component="Select"
-                  x-component-props={{
-                    placeholder: '- 市 -',
-                    onChange: val => getAddressList('city', val),
-                  }}
-                  required
-                />
-                <Field
-                  name="areaId"
-                  enum={areaList}
-                  x-component="Select"
-                  x-component-props={{
-                    placeholder: '- 县/区 -',
-                  }}
-                  required
-                />
-              </FormMegaLayout>
-              <Field
-                name="address"
-                x-component="Textarea"
-                x-component-props={{
-                  placeholder: '请输入详细地址（最长50个字符，25个汉字）',
-                  rules: [{ message: '请输入详细地址' }],
-                }}
-                required
-              />
-            </FormMegaLayout>
-            <Field name="principal" title="仓库负责人" x-component="Input" />
-            <FormMegaLayout label="联系电话" grid full wrapperCol={24}>
-              <Field
-                name="telCode"
-                enum={telCodeList}
-                x-component="Select"
-                x-component-props={{ placeholder: '请选择' }}
-              />
-              <Field
-                x-mega-props={{ span: 3 }}
-                name="tel"
-                x-component="Input"
-                x-component-props={{
-                  placeholder: '请输入你的手机号码',
-                  maxLength: 11,
-                }}
-              />
-            </FormMegaLayout>
-          </FormMegaLayout>
-        </SchemaForm>
-      </Card>
-    </PageHeaderWrapper>
-  );
-};
-
-export default AddWarehouse;

src/pages/transaction/stockSellStorage/warehouse/addWarehouse.tsx

-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import { history } from 'umi';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { SaveOutlined } from '@ant-design/icons';
@@ -71,14 +71,16 @@ const AddWarehouse: React.FC<{}> = (props: any) => {
           effects={($, { setFieldState }) => {
             $('onFormMount').subscribe(state => {
               PublicApi.getManageAreaAll().then(res => {
-                const { data } = res;
-                setFieldState('provinceId', targetState => {
-                  targetState.originData = data;
-                  targetState.props.enum = data.map(v => ({
-                    label: v.name,
-                    value: v.id,
-                  }));
-                });
+                if (res.code === 1000) {
+                  const { data } = res;
+                  setFieldState('provinceId', targetState => {
+                    targetState.originData = data;
+                    targetState.props.enum = data.map(v => ({
+                      label: v.name,
+                      value: v.id,
+                    }));
+                  });
+                }
               });
             });
             useLinkEnumEffect('areaResponses', result =>