feat: webconfig page

src/components/BaseForm/index.js

 import React, { useEffect } from 'react';
-import { Form, Button, Select, Input } from 'antd';
+import { Form, Button, Select, Input, Radio } from 'antd';
+import Upload from '@/components/Upload';
 import { useForm } from 'antd/lib/form/Form';
 
 export const renderButtonGroup = props => {
   const { buttons, wrapper = false } = props;
-  const bts = buttons.map((bt, index) => {
+  const bts = buttons.map(bt => {
     const { text, ...rest } = bt;
     return (
-      <Button {...rest} key={index}>
+      <Button {...rest} key={text}>
         {text}
       </Button>
     );
   });
   if (wrapper) {
-    const { Comp, props: wrapperProps } = wrapper;
-    return <Comp {...wrapperProps}>{bts}</Comp>;
+    return wrapper(bts);
   }
   return bts;
 };
 
-export const BaseFormItem = itemOption => {
-  const { formType, ...rest } = itemOption;
+export const ITEM_TYPE = {
+  INPUT: 'INPUT',
+  SELECT: 'SELECT',
+  IMGSHOP: 'IMGSHOP',
+  SINGLE_RADIO: 'SINGLE_RADIO',
+};
+
+const BaseFormItem = itemOption => {
+  const { formType, options = [], ...rest } = itemOption;
   switch (formType) {
-    case 'input':
+    case ITEM_TYPE.INPUT:
       // eslint-disable-next-line no-undef
       return <Input allowClear {...rest} />;
-    case 'select':
-      // eslint-disable-next-line no-undef
-      return <Select {...rest} />;
+    case ITEM_TYPE.SELECT:
+      return (
+        <Select {...rest}>
+          {options.map(o => (
+            <Select.Option {...o} />
+          ))}
+        </Select>
+      );
+    case ITEM_TYPE.IMGSHOP:
+      return <Upload {...rest} />;
+    case ITEM_TYPE.SINGLE_RADIO:
+      // eslint-disable-next-line no-case-declarations
+      return (
+        <Radio.Group {...rest}>
+          {options.map(o => (
+            <Radio {...o} />
+          ))}
+        </Radio.Group>
+      );
     default:
       return null;
   }
@@ -43,9 +66,10 @@ const BaseForm = props => {
   const {
     items,
     buttons = [],
-    buttonGroupProps = {},
+    buttonsWraper,
     getForm, // 用来获取表单实例
     formProps,
+    children,
   } = props;
 
   const [form] = useForm();
@@ -83,8 +107,9 @@ const BaseForm = props => {
         })}
       {renderButtonGroup({
         buttons,
-        wrapper: { Comp: Form.Item, props: buttonGroupProps },
+        wrapper: buttonsWraper || (bts => <Form.Item>{bts}</Form.Item>),
       })}
+      {children}
     </Form>
   );
 };

src/components/Upload/index.tsx

@@ -129,10 +129,10 @@ class PicturesWall extends React.Component<PicturesWallType> {
 
   componentDidMount() {
     get(`/visible/bed/get?tid=${unParams(location.search)!.tid}`).then(res => {
-      res &&
-        this.setState({
-          imgBed: res,
-        });
+      // res &&
+      //   this.setState({
+      //     imgBed: res,
+      //   });
     });
   }
 

src/pages/webConfig/components/siteConfigDrawer.js

 import React from 'react';
-import { Button, Drawer } from 'antd';
+import { Button, Col, Drawer, Row } from 'antd';
 import styles from './siteConfigDrawer.less';
-import BaseForm from '@/components/BaseForm';
+import BaseForm, { ITEM_TYPE } from '@/components/BaseForm';
 
 let form = null;
 
 const defaultKeyMap = {
   title: {
     label: '标题',
-    formType: 'input',
+    formType: ITEM_TYPE.INPUT,
     allowClear: true,
     placeholder: '请输入标题',
     rules: [
@@ -20,12 +20,12 @@ const defaultKeyMap = {
   },
   subtitle: {
     label: '副标题',
-    formType: 'input',
+    formType: ITEM_TYPE.INPUT,
     allowClear: true,
   },
   shortcutIcon: {
     label: '图标icon',
-    formType: 'image',
+    formType: ITEM_TYPE.IMGSHOP,
     rules: [
       {
         required: true,
@@ -35,7 +35,7 @@ const defaultKeyMap = {
   },
   logo: {
     label: '登录logo',
-    formType: 'image',
+    formType: ITEM_TYPE.IMGSHOP,
     rules: [
       {
         required: true,
@@ -45,7 +45,7 @@ const defaultKeyMap = {
   },
   bannerlogo: {
     label: '标题logo',
-    formType: 'image',
+    formType: ITEM_TYPE.IMGSHOP,
     rules: [
       {
         required: true,
@@ -55,7 +55,7 @@ const defaultKeyMap = {
   },
   client: {
     label: '虚拟目录',
-    formType: 'input',
+    formType: ITEM_TYPE.INPUT,
     allowClear: true,
     size: 'small',
     rules: [
@@ -67,13 +67,24 @@ const defaultKeyMap = {
   },
   homePage: {
     label: '主页',
-    formType: 'input',
+    formType: ITEM_TYPE.INPUT,
     allowClear: true,
   },
   loginTemplate: {
     label: '登录模板',
-    formType: 'select',
+    formType: ITEM_TYPE.SELECT,
     placeholder: '请选择登录模板',
+    options: [
+      {
+        value: 'a',
+        children: 'default.html',
+      },
+      {
+        value: 'b',
+        children: 'dark.html',
+      },
+    ],
+    showSearch: true,
     filterOption: (input, option) =>
       option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
     rules: [
@@ -85,7 +96,17 @@ const defaultKeyMap = {
   },
   theme: {
     label: '系统皮肤',
-    formType: 'singleRadio',
+    formType: ITEM_TYPE.SINGLE_RADIO,
+    options: [
+      {
+        value: 'a',
+        children: 'a',
+      },
+      {
+        value: 'b',
+        children: 'b',
+      },
+    ],
     rules: [
       {
         required: true,
@@ -93,12 +114,12 @@ const defaultKeyMap = {
       },
     ],
   },
-  style: '系统风格',
-  menu: '菜单类型',
-  mode: '功能标签',
-  qrcode: '二维码地址',
-  mapPlan: '地图方案',
-  waterMark: '地图水印',
+  // style: '系统风格',
+  // menu: '菜单类型',
+  // mode: '功能标签',
+  // qrcode: '二维码地址',
+  // mapPlan: '地图方案',
+  // waterMark: '地图水印',
 };
 
 export default props => {
@@ -107,26 +128,48 @@ export default props => {
   const getForm = f => {
     form = f;
   };
-  const adaptConfig = conf => {};
+
   const formConfig = {
     getForm,
-    items: [
+    items: Object.keys(defaultKeyMap).map(k => ({
+      ...defaultKeyMap[k],
+      dataIndex: k,
+    })),
+    buttons: [
+      {
+        text: '取消',
+        type: 'cancel',
+        onClick: () => {
+          // eslint-disable-next-line no-unused-expressions
+          onClose && onClose();
+        },
+      },
       {
-        label: '标题',
-        dataIndex: 'title',
-        initialValue: '',
-        rules: [],
+        text: '确定',
+        htmlType: 'submit',
+        type: 'primary',
+        style: {
+          marginLeft: '10px',
+        },
       },
     ],
+    buttonsWraper: bts => (
+      <Row>
+        <Col span={24} style={{ textAlign: 'right' }}>
+          {bts}
+        </Col>
+      </Row>
+    ),
   };
   return (
     <div className={styles.siteConfigContainer}>
       <Drawer
-        title="Multi-level drawer"
+        title="添加网站"
         width={520}
         closable
         onClose={onClose}
         visible={visible}
+        maskClosable={false}
       >
         <BaseForm {...formConfig} />
       </Drawer>

src/pages/webConfig/index.js

@@ -43,7 +43,9 @@ const WebConfigPage = props => {
     }
   };
 
-  const onDrawerClose = form => {};
+  const onDrawerClose = form => {
+    setConfigVisible(false);
+  };
 
   return (
     <PageContainer loading={loading}>