webConfigForm.js 3.09 KB
Newer Older
张烨's avatar
张烨 committed
1
import BaseForm from '@/components/BaseForm';
张烨's avatar
张烨 committed
2
import React, { useEffect, useState } from 'react';
3
import { getLoginPage, getMapCofigs, getWebThemes, getProductList } from '@/services/webConfig/api';
张烨's avatar
张烨 committed
4
import { Row, Col } from 'antd';
张烨's avatar
张烨 committed
5
import { getDefaultGetWebconfig, singleStyleData, webMode } from '../utils';
张烨's avatar
张烨 committed
6 7

const WebConfigForm = props => {
张烨's avatar
张烨 committed
8 9 10 11 12 13 14 15
  const {
    hasIntegerate,
    config,
    onCancel,
    onSubmit,
    onOk,
    isEdit,
    submitting,
16
    productList,
张烨's avatar
张烨 committed
17
  } = props;
张烨's avatar
张烨 committed
18 19 20
  const [webThemes, setWebThemes] = useState([]);
  const [mapConfigs, setMapConfigs] = useState([]);
  const [loginPages, setLoginPages] = useState([]);
Maofei94's avatar
Maofei94 committed
21
  const [products, setProducts] = useState([]);
张烨's avatar
张烨 committed
22 23 24 25 26 27
  const [form, setForm] = useState(null);

  const getForm = f => {
    setForm(f);
  };

张烨's avatar
张烨 committed
28
  useEffect(() => {
29
    console.log(submitting);
张烨's avatar
张烨 committed
30 31 32 33 34
    if (form) {
      form.setFieldsValue(config);
    }
  }, [config]);

张烨's avatar
张烨 committed
35 36 37 38 39 40 41 42
  const onGetThemes = () => {
    if (webThemes.length === 0) {
      getWebThemes().then(res => setWebThemes(res));
    }
  };

  const onGetLoginPages = () => {
    if (loginPages.length === 0) {
43
      getLoginPage().then(res => setLoginPages(res.data));
张烨's avatar
张烨 committed
44 45 46 47 48 49 50 51
    }
  };

  const onGetMapConfig = () => {
    if (mapConfigs.length === 0) {
      getMapCofigs().then(res => setMapConfigs(res));
    }
  };
Maofei94's avatar
Maofei94 committed
52 53 54 55
  const onGetProduct = () => {
    if (products.length === 0) {
      getProductList().then(res => {
        if (res.code === 0) {
56
          setProducts(res.data.UserProducts);
Maofei94's avatar
Maofei94 committed
57 58 59 60
        }
      });
    }
  };
张烨's avatar
张烨 committed
61 62 63

  const itemsMap = getDefaultGetWebconfig({
    initialValues: config,
张烨's avatar
张烨 committed
64
    submitting,
张烨's avatar
张烨 committed
65 66 67 68 69 70 71
    hasIntegerate,
    webThemes,
    onGetThemes,
    loginPages,
    mapConfigs,
    onGetLoginPages,
    onGetMapConfig,
Maofei94's avatar
Maofei94 committed
72 73
    products,
    onGetProduct,
张烨's avatar
张烨 committed
74
    isEdit,
75
    productList,
张烨's avatar
张烨 committed
76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
  });

  const formConfig = {
    getForm,
    items: Object.keys(itemsMap).map(k => ({
      ...itemsMap[k],
      dataIndex: k,
    })),
    buttons: [
      {
        text: '取消',
        type: 'cancel',
        size: 'middle',
        onClick: () => {
          // eslint-disable-next-line no-unused-expressions
          onCancel && onCancel();
        },
      },
      {
        text: '确定',
        htmlType: 'submit',
        type: 'primary',
        size: 'middle',
张烨's avatar
张烨 committed
99
        loading: submitting,
张烨's avatar
张烨 committed
100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
        style: {
          marginLeft: '10px',
        },
      },
    ],
    buttonsWraper: bts => (
      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          {bts}
        </Col>
      </Row>
    ),
  };

  return (
    <BaseForm
      {...formConfig}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      onValuesChange={v => {
张烨's avatar
张烨 committed
120
        if (form && v.mode === webMode.single) {
张烨's avatar
张烨 committed
121 122 123
          const sty = form.getFieldValue('style');
          if (!singleStyleData[sty]) {
            form.setFieldsValue([{ name: 'style', value: 'platform' }]);
张烨's avatar
张烨 committed
124 125 126 127 128 129 130 131 132 133 134 135 136 137
          }
        }
      }}
      onFinish={values => {
        // eslint-disable-next-line no-unused-expressions
        onSubmit && onSubmit(values);
        // eslint-disable-next-line no-unused-expressions
        onOk && onOk(values);
      }}
    />
  );
};

export default WebConfigForm;