index.jsx 6.23 KB
Newer Older
krysent's avatar
krysent committed
1
import React, { createElement, memo, useRef, useState } from 'react';
krysent's avatar
krysent committed
2 3 4 5 6 7 8 9
import {
  ProForm,
  ProFormDependency,
  ProFormSelect,
  ProFormText,
  ProFormGroup,
  ProFormList,
  ProCard,
krysent's avatar
krysent committed
10 11 12 13 14 15 16 17
} from '@ant-design/pro-components';
import moment, { defaultFormat } from 'moment';
import { doFetch } from '@/utils/doFetch';
import styles from './index.less';
import FormItems from './FormItems';
import { Input, Col } from 'antd';
import { useDebounceFn } from 'ahooks';
import ColumnsTrans from './ColumnsTrans';
krysent's avatar
krysent committed
18 19 20 21 22 23 24 25 26 27 28 29

function upperCase(str) {
  const newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
  return newStr;
}

let FormRender = memo(({ fields = [], colProps, proformRef }) => {
  return (
    <>
      {fields
        .filter((it) => it.hideInForm !== true)
        .map((item, index) => {
krysent's avatar
krysent committed
30
          let key = item?.valueType ? upperCase(item?.valueType) : 'Input';
krysent's avatar
krysent committed
31 32
          let { hideInForm } = item;
          item.formItemProps = item.formItemProps ?? { rules: [] };
krysent's avatar
krysent committed
33
          if (item.valueType == 'split') {
krysent's avatar
krysent committed
34
            return (
krysent's avatar
krysent committed
35
              <div className={styles.title} style={{ borderWidth: index == 0 ? 0 : 1 }}>
krysent's avatar
krysent committed
36 37 38 39
                {item.title}
              </div>
            );
          }
krysent's avatar
krysent committed
40 41 42 43 44 45 46 47 48
          if (item?.valueType == 'nosubmit') {
            return (
              <Col {...(item.colProps ?? { span: 12 })} style={{ marginBottom: 24 }}>
                <label style={{ marginBottom: 8, display: 'block' }}>{item?.title}</label>
                <Input disabled value={item?.initialValue} />
              </Col>
            );
          }

krysent's avatar
krysent committed
49 50 51 52 53 54 55
          if (hideInForm && Object.keys(hideInForm)) {
            return (
              <ProFormDependency name={Object.keys(hideInForm)}>
                {(params) => {
                  let ifs = true;
                  let res = Object.keys(hideInForm).map((its) => {
                    if (Array.isArray(hideInForm[its])) {
krysent's avatar
krysent committed
56
                      return !hideInForm[its].includes(params[its]);
krysent's avatar
krysent committed
57 58
                    } else {
                      let vals = hideInForm[its].reverse; //取反 即不存在当前数组中的
krysent's avatar
krysent committed
59
                      return vals.indexOf(params[its]) != -1;
krysent's avatar
krysent committed
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
                    }
                  });
                  ifs = res.includes(false);
                  if (ifs) {
                    return;
                  } else {
                    return (
                      <>
                        {createElement(FormItems[key], {
                          item: item,
                          colProps: colProps,
                          key: item.dataIndex,
                          formRef: proformRef,
                        })}
                      </>
                    );
                  }
                }}
              </ProFormDependency>
            );
          } else {
            return (
              <>
                {createElement(FormItems[key], {
                  item: item,
                  colProps: colProps,
                  key: item.dataIndex,
                  formRef: proformRef,
                })}
              </>
            );
          }
        })}
    </>
  );
});

krysent's avatar
krysent committed
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
function InitForm(props) {
  let {
    formRef,
    onFinish = (vals) => {
      //console.log(vals);
    },
    formKey,
    params = {},
    detailpath = '',
    defaultFormValue = {},
    detailFormat,
    submitter,
    fields,
    extendField = '',
    colProps = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 },
    onValuesChange = (changedValues, allValues) => {
      //console.log(changedValues, allValues);
    },
    val,
    style = {},
  } = props;

  const { run } = useDebounceFn(onFinish, { wait: 400 });
krysent's avatar
krysent committed
120 121
  let proformRef = useRef();
  proformRef = formRef ?? proformRef;
krysent's avatar
krysent committed
122 123 124
  return fields?.length == 0 ? (
    <ColumnsTrans />
  ) : (
krysent's avatar
krysent committed
125
    <ProForm
krysent's avatar
krysent committed
126
      style={{ overflow: 'hidden', ...style }}
krysent's avatar
krysent committed
127
      formRef={proformRef}
krysent's avatar
krysent committed
128
      onFinish={run}
krysent's avatar
krysent committed
129 130 131 132 133 134 135 136
      formKey={formKey ?? parseInt(Math.random() * 1000000)}
      params={params}
      submitter={submitter ?? true}
      grid={true}
      rowProps={{
        gutter: 12,
      }}
      request={async (params) => {
krysent's avatar
krysent committed
137
        if (detailpath && val != 'add') {
krysent's avatar
krysent committed
138
          let res = await doFetch({ url: detailpath, params });
krysent's avatar
krysent committed
139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189
          if (extendField) {
            let obj = {};
            res?.data?.data[extendField]?.forEach?.((it) => {
              obj[it?.fieldId] = it?.fieldRealValue;
            });

            // console.log({
            //   ...obj,
            //   ...defaultFormValue,
            //   ...(res?.data?.data ?? {}),
            // });

            return {
              ...obj,
              ...defaultFormValue,
              ...(res?.data?.data ?? {}),
              ...relationSupplierList,
            };
          }

          //反填参数 格式化
          const relationSupplierList = res?.data?.data?.relationSupplierList
            ? {
                relationSupplierList: res?.data?.data?.relationSupplierList?.map?.((it, i) => {
                  return {
                    ...it,
                    id: it?.supplierId,
                  };
                }),
              }
            : {};

          const supplierList = res?.data?.data?.supplierList
            ? {
                supplierList: res?.data?.data?.supplierList?.map?.((it, i) => {
                  return {
                    ...it,
                    id: it?.supplierId,
                  };
                }),
              }
            : {};

          let result = res?.data?.data;
          if (result?.nrList) {
            result.nrList = result?.nrList?.map((it) => {
              it.sort = it.sort - 1;
              return it;
            });
          }

krysent's avatar
krysent committed
190 191
          return {
            ...defaultFormValue,
krysent's avatar
krysent committed
192 193 194
            ...(result ?? {}),
            ...relationSupplierList,
            ...supplierList,
krysent's avatar
krysent committed
195 196
          };
        } else {
krysent's avatar
krysent committed
197 198 199
          // console.log({
          //   ...defaultFormValue,
          // });
krysent's avatar
krysent committed
200 201 202 203 204 205 206 207 208 209 210
          return {
            ...defaultFormValue,
          };
        }
      }}
      autoFocusFirstInput
      onValuesChange={(changedValues, allValues) => {
        onValuesChange?.(changedValues, allValues);
      }}
    >
      <FormRender
krysent's avatar
krysent committed
211
        fields={fields?.filter((it) => it.valueType != 'option')}
krysent's avatar
krysent committed
212 213 214 215 216 217 218 219
        colProps={colProps}
        proformRef={proformRef}
      />
    </ProForm>
  );
}

export default InitForm;