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

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) => {
          let key = item?.valueType ? upperCase(item?.valueType) : 'Input';
          let { hideInForm } = item;
          item.formItemProps = item.formItemProps ?? { rules: [] };
          if (item.valueType == 'split') {
            return (
左玲玲's avatar
左玲玲 committed
36
              <div key={index} className={styles.title} style={{ borderWidth: index == 0 ? 0 : 1 }}>
wuhao's avatar
wuhao committed
37 38 39 40
                {item.title}
              </div>
            );
          }
wuhao's avatar
wuhao committed
41 42
          if (item?.valueType == 'nosubmit') {
            return (
左玲玲's avatar
左玲玲 committed
43
              <Col key={index} {...(item.colProps ?? { span: 12 })} style={{ marginBottom: 24 }}>
wuhao's avatar
wuhao committed
44 45 46 47 48 49
                <label style={{ marginBottom: 8, display: 'block' }}>{item?.title}</label>
                <Input disabled value={item?.initialValue} />
              </Col>
            );
          }

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

wuhao's avatar
wuhao committed
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
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);
    },
wuhao's avatar
wuhao committed
108
    val,
wuhao's avatar
wuhao committed
109
    style = {},
wuhao's avatar
wuhao committed
110 111
  } = props;

左玲玲's avatar
左玲玲 committed
112
  // const { run } = useDebounceFn(onFinish, { wait: 400 });
wuhao's avatar
wuhao committed
113 114
  let proformRef = useRef();
  proformRef = formRef ?? proformRef;
左玲玲's avatar
左玲玲 committed
115 116 117

  function formartData(item, val) {
    let formartValue = val;
左玲玲's avatar
左玲玲 committed
118
    if (item?.valueType == 'uploadBtn' || item?.valueType == "uploadImage" || item?.valueType == "uploadDragger") {
左玲玲's avatar
左玲玲 committed
119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
      let stepval = val?.filter(it => {
        if (!it?.response) {
          return it;
        } else {
          if (it?.response?.code == "0000") {
            return it;
          }
        }
      }) ?? [];
      formartValue = stepval.map((it) => {
        if (it.response) {
          if (it.response.code != "0000") {
            return undefined;
          }
          return it?.response?.data?.dataList[0] ?? undefined;
        } else {
          return it ? it : undefined;
        }
      });
    }
    return formartValue;
  }


TZW's avatar
TZW committed
143 144 145
  return fields?.length == 0 ? (
    <ColumnsTrans />
  ) : (
wuhao's avatar
wuhao committed
146
    <ProForm
wuhao's avatar
wuhao committed
147
      style={{ overflow: 'hidden', ...style }}
wuhao's avatar
wuhao committed
148
      formRef={proformRef}
左玲玲's avatar
左玲玲 committed
149 150 151 152 153 154 155
      onFinish={async (values) => {
        let newAllvalues = {};
        for (let i in values) {
          newAllvalues[i] = formartData(fields?.find(it => it.key == i), values[i]);
        }
        await onFinish(newAllvalues);
      }}
wuhao's avatar
wuhao committed
156 157 158 159 160 161 162 163
      formKey={formKey ?? parseInt(Math.random() * 1000000)}
      params={params}
      submitter={submitter ?? true}
      grid={true}
      rowProps={{
        gutter: 12,
      }}
      request={async (params) => {
wuhao's avatar
wuhao committed
164
        if (detailpath && val != 'add') {
wuhao's avatar
wuhao committed
165
          let res = await doFetch({ url: detailpath, params });
TZW's avatar
TZW committed
166 167
          if (extendField) {
            let obj = {};
wuhao's avatar
wuhao committed
168
            res?.data?.data[extendField]?.forEach?.((it) => {
TZW's avatar
TZW committed
169
              obj[it?.fieldId] = it?.fieldRealValue;
TZW's avatar
TZW committed
170
            });
wuhao's avatar
wuhao committed
171

TZW's avatar
TZW committed
172 173 174 175 176
            // console.log({
            //   ...obj,
            //   ...defaultFormValue,
            //   ...(res?.data?.data ?? {}),
            // });
wuhao's avatar
wuhao committed
177

TZW's avatar
TZW committed
178 179 180
            return {
              ...obj,
              ...defaultFormValue,
wuhao's avatar
wuhao committed
181
              ...(res?.data?.data ?? {}),
wuhao's avatar
wuhao committed
182
              ...relationSupplierList,
TZW's avatar
TZW committed
183 184
            };
          }
wuhao's avatar
wuhao committed
185 186 187 188

          //反填参数 格式化
          const relationSupplierList = res?.data?.data?.relationSupplierList
            ? {
左玲玲's avatar
左玲玲 committed
189 190 191 192 193 194 195
              relationSupplierList: res?.data?.data?.relationSupplierList?.map?.((it, i) => {
                return {
                  ...it,
                  id: it?.supplierId,
                };
              }),
            }
wuhao's avatar
wuhao committed
196
            : {};
wuhao's avatar
wuhao committed
197

TZW's avatar
TZW committed
198 199
          const supplierList = res?.data?.data?.supplierList
            ? {
左玲玲's avatar
左玲玲 committed
200 201 202 203 204 205 206
              supplierList: res?.data?.data?.supplierList?.map?.((it, i) => {
                return {
                  ...it,
                  id: it?.supplierId,
                };
              }),
            }
TZW's avatar
TZW committed
207 208
            : {};

wuhao's avatar
wuhao committed
209 210 211 212 213 214 215
          let result = res?.data?.data;
          if (result?.nrList) {
            result.nrList = result?.nrList?.map((it) => {
              it.sort = it.sort - 1;
              return it;
            });
          }
wuhao's avatar
wuhao committed
216 217
          return {
            ...defaultFormValue,
wuhao's avatar
wuhao committed
218
            ...(result ?? {}),
wuhao's avatar
wuhao committed
219
            ...relationSupplierList,
TZW's avatar
TZW committed
220
            ...supplierList,
wuhao's avatar
wuhao committed
221 222
          };
        } else {
TZW's avatar
TZW committed
223 224 225
          // console.log({
          //   ...defaultFormValue,
          // });
wuhao's avatar
wuhao committed
226 227 228 229 230 231
          return {
            ...defaultFormValue,
          };
        }
      }}
      autoFocusFirstInput
TZW's avatar
TZW committed
232 233 234
      onValuesChange={(changedValues, allValues) => {
        onValuesChange?.(changedValues, allValues);
      }}
wuhao's avatar
wuhao committed
235 236
    >
      <FormRender
TZW's avatar
TZW committed
237
        fields={fields?.filter((it) => it.valueType != 'option')}
wuhao's avatar
wuhao committed
238 239 240 241 242 243 244 245
        colProps={colProps}
        proformRef={proformRef}
      />
    </ProForm>
  );
}

export default InitForm;