fix: 'web配置登录模板参数管理'

src/pages/productCenter/webConfig/components/ParmarModal.jsx

+import React, { useEffect } from 'react';
+import { Modal, Form, Button, Input, Space } from 'antd';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+
+const ParmarModal = props => {
+  const { pageUrl, visible, handleCancel, parmarCallBack } = props;
+  const [form] = Form.useForm();
+  useEffect(() => {
+    if (visible) {
+      // 给url通过字符串分割成表单需要的数据形式
+      let parma = pageUrl
+        .split('|')[1]
+        ?.split('&')
+        ?.map(item => ({ key: item.split('=')[0], value: item.split('=')[1] }));
+      form.setFieldsValue({ parmars: parma });
+    } else {
+      // 关闭弹窗清除表单数据
+      form.resetFields();
+    }
+  }, [visible]);
+  // 保存
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let parma = form
+          .getFieldValue('parmars')
+          ?.map(item => `${item.key}=${item.value}`)
+          .join('&');
+        console.log(parma, 'parma');
+        if (parma) {
+          parmarCallBack(`${pageUrl.split('|')[0]}|${parma}`);
+        } else {
+          parmarCallBack(`${pageUrl.split('|')[0]}`);
+        }
+      }
+    });
+  };
+  return (
+    <div>
+      <Modal
+        title="参数配置"
+        visible={visible}
+        onOk={onFinish}
+        onCancel={handleCancel}
+        maskClosable={false}
+        destroyOnClose
+        centered
+      >
+        <div style={{ maxHeight: '400px', overflowY: 'scroll', marginBottom: '10px' }}>
+          <Form name="form" form={form} labelCol={{ span: 7 }}>
+            <Form.List name="parmars">
+              {(fields, { add, remove }) => (
+                <>
+                  {fields.map(({ key, name, fieldKey, ...restField }) => (
+                    <Space
+                      key={key}
+                      style={{ display: 'flex', marginBottom: 8, justifyContent: 'center' }}
+                      align="baseline"
+                    >
+                      <Form.Item
+                        {...restField}
+                        name={[name, 'key']}
+                        fieldKey={[fieldKey, 'key']}
+                        validateTrigger={['onChange', 'onBlur']}
+                        rules={[
+                          { required: true, message: '请填写参数名' },
+                          {
+                            validator: () => {
+                              // 验证参数名不能重复
+                              const allKey = form
+                                .getFieldsValue()
+                                .parmars.map(item => (item ? item.key : ''));
+                              const repeatKey = new Set(allKey);
+                              if (repeatKey.size !== allKey.length) {
+                                return Promise.reject(new Error('参数名重复'));
+                              }
+                              return Promise.resolve();
+                            },
+                          },
+                        ]}
+                      >
+                        <Input placeholder="请填写参数名" />
+                      </Form.Item>
+                      <Form.Item
+                        {...restField}
+                        name={[name, 'value']}
+                        fieldKey={[fieldKey, 'value']}
+                        rules={[{ required: true, message: '请填写参数' }]}
+                      >
+                        <Input placeholder="请填写参数" />
+                      </Form.Item>
+                      <MinusCircleOutlined
+                        onClick={() => remove(name)}
+                        style={{ marginLeft: '10px', fontSize: '20px' }}
+                      />
+                    </Space>
+                  ))}
+                  <Form.Item>
+                    <Button
+                      style={{ width: '375px', marginLeft: '30px' }}
+                      type="dashed"
+                      onClick={() => add()}
+                      block
+                      icon={<PlusOutlined />}
+                    >
+                      添加参数
+                    </Button>
+                  </Form.Item>
+                </>
+              )}
+            </Form.List>
+          </Form>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default ParmarModal;

src/pages/productCenter/webConfig/components/siteConfigDrawer.js

@@ -22,6 +22,7 @@ import WebConfigForm from './webConfigForm';
 import ColorLinear from './ColorLinear';
 import Upload from '@/components/Upload';
 import styles from './siteConfigDrawer.less';
+import ParmarModal from './ParmarModal';
 const { Option } = Select;
 const plainOptions = ['搜索', '消息', '反馈'];
 const defaultCheckedList = ['搜索', '消息', '反馈'];
@@ -54,6 +55,8 @@ export default props => {
   const [color, setColor] = useState('');
   const CheckboxGroup = Checkbox.Group;
   const [showAdvanced, setShowAdvanced] = useState(false); // 是否显示高级设置
+  const [showParmarModal, setShowParmarModal] = useState(false);
+
   useEffect(() => {
     onGetLoginPages();
     console.log(isEdit);
@@ -173,10 +176,20 @@ export default props => {
     setColor(value);
     form.setFieldsValue({ headerPrimaryColor: value });
   };
+
+  const addParama = () => {
+    console.log(form.getFieldValue('loginTemplate'));
+    if (!form.getFieldValue('loginTemplate')) {
+      notification.error({ message: '提示', duration: 3, description: '请先选择登录模板' });
+      return;
+    }
+    setShowParmarModal(true);
+  };
+
   return (
     <Drawer
       title={isEdit ? '查看/编辑网站配置' : '新增网站'}
-      width={500}
+      width={600}
       onClose={onClose}
       visible={visible}
       destroyOnClose
@@ -192,7 +205,7 @@ export default props => {
       <Form
         form={form}
         labelCol={{ span: 5 }}
-        wrapperCol={{ span: 18 }}
+        wrapperCol={{ span: 19 }}
         initialValues={{ remember: true }}
       >
         <Form.Item
@@ -261,15 +274,24 @@ export default props => {
         >
           <Input autoComplete="off" disabled={isEdit} />
         </Form.Item>
-        <Form.Item label="登录模板" name="loginTemplate">
-          <Select placeholder="请选择登录模板">
-            {loginPages.map(item => (
-              <Option value={item.value} key={item.value}>
-                {item.value}
-              </Option>
-            ))}
-          </Select>
-        </Form.Item>
+        <Row>
+          <Col span={20}>
+            <Form.Item label="登录模板" name="loginTemplate" labelCol={{ span: 6 }}>
+              <Select placeholder="请选择登录模板">
+                {loginPages.map(item => (
+                  <Option value={item.value} key={item.value}>
+                    {item.value}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item>
+              <Button onClick={addParama}>参数管理</Button>
+            </Form.Item>
+          </Col>
+        </Row>
         <Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
           主页配置
         </Divider>
@@ -438,6 +460,15 @@ export default props => {
         onSubumit={colorChange}
         handleCancel={() => setDisplayColorPicker(false)}
       />
+      <ParmarModal
+        pageUrl={form.getFieldValue('loginTemplate')}
+        handleCancel={() => setShowParmarModal(false)}
+        visible={showParmarModal}
+        parmarCallBack={url => {
+          form.setFieldsValue({ loginTemplate: url });
+          setShowParmarModal(false);
+        }}
+      />
     </Drawer>
   );
 };