feat: 新增产品配置模块

src/pages/webConfig/components/editForm.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Select, Input, Button, Popconfirm, Spin } from 'antd';
+import { modifyProduct } from '@/services/webConfig/api';
+const { Item } = Form;
+const { Option } = Select;
+const EditForm = props => {
+  const { productObj, editCallback, handleDel } = props;
+  const [config, setConfig] = useState(''); // 网站配置信息
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const layout = {
+    layout: 'horizontal',
+    labelCol: { span: 4 },
+    wrapperCol: { span: 15 },
+  };
+  const environmentList = [
+    {
+      value: 'development',
+      label: 'development',
+      key: 'development',
+    },
+    {
+      value: 'production',
+      label: 'production',
+      key: 'production',
+    },
+  ];
+  useEffect(() => {
+    form.setFieldsValue({ ...productObj });
+  }, [productObj]);
+  // 提交选择
+  const submit = value => {};
+  // 提交
+  const finished = value => {
+    let params = {
+      ...value,
+      Id: productObj.Id,
+    };
+    editCallback(params);
+    console.log(value, 'value');
+  };
+  return (
+    <Spin spinning={loading} tip="loading...">
+      <div style={{ minHeight: 'calc(100vh  - 252px)', marginTop: '20px' }}>
+        <Form form={form} name="formEdit" {...layout} onFinish={finished}>
+          <Item
+            label="应用环境："
+            name="Environment"
+            rules={[
+              {
+                required: true,
+                message: '请选择应用环境',
+              },
+            ]}
+          >
+            <Select placeholder="请选择应用环境">
+              {environmentList &&
+                environmentList.map(item => (
+                  <Option value={item.value} key={item.key}>
+                    {item.label}
+                  </Option>
+                ))}
+            </Select>
+          </Item>
+          <Item
+            label="应用名称："
+            name="ProductName"
+            rules={[
+              {
+                required: true,
+                message: '请输入应用名称',
+              },
+            ]}
+          >
+            <Input placeholder="请输入应用名称" allowClear />
+          </Item>
+          <Item
+            label="入口url"
+            name="StartUrl"
+            rules={[
+              {
+                required: true,
+                message: '请输入入口url',
+              },
+            ]}
+          >
+            <Input addonBefore="://" placeholder="请输入入口url" allowClear />
+          </Item>
+          <Item
+            label="默认配置"
+            name="DefaultSetting"
+            rules={[
+              {
+                required: false,
+                message: '请输入默认配置',
+              },
+            ]}
+          >
+            <Input placeholder="请输入默认配置" allowClear />
+          </Item>
+          <div style={{ display: 'flex', marginLeft: '35%' }}>
+            <Item
+              wrapperCol={{ span: 8, offset: 8 }}
+              style={{ marginRight: '30px' }}
+            >
+              <Button type="primary" htmlType="submit">
+                提交
+              </Button>
+            </Item>
+            <Item wrapperCol={{ span: 8, offset: 8 }}>
+              <Popconfirm
+                title="确实删除产品"
+                placement="right"
+                okText="确认"
+                cancelText="取消"
+                onConfirm={handleDel}
+              >
+                <Button type="primary" danger>
+                  删除
+                </Button>
+              </Popconfirm>
+            </Item>
+          </div>
+        </Form>
+      </div>
+    </Spin>
+  );
+};
+export default EditForm;

src/pages/webConfig/components/productForm.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Select, Input, Button, notification, Spin } from 'antd';
+import { modifyProduct } from '@/services/webConfig/api';
+const { Item } = Form;
+const { Option } = Select;
+const AddForm = props => {
+  const { addCallback } = props;
+  const [config, setConfig] = useState(''); // 网站配置信息
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const layout = {
+    layout: 'horizontal',
+    labelCol: { span: 5 },
+    wrapperCol: { span: 16 },
+  };
+  const environmentList = [
+    {
+      value: 'development',
+      label: 'development',
+      key: 'development',
+    },
+    {
+      value: 'production',
+      label: 'production',
+      key: 'production',
+    },
+  ];
+  // 提交选择
+  const submit = value => {};
+  // 提交
+  const finished = value => {
+    setLoading(true);
+    modifyProduct({ ...value, Id: 0 })
+      .then(res => {
+        if (res.code === 0) {
+          notification.success({
+            message: '提示',
+            duration: 3,
+            description: '新增成功',
+          });
+          addCallback();
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.msg || '新增成功',
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      })
+      .finally(item => {
+        setLoading(false);
+      });
+  };
+  return (
+    <Spin spinning={loading} tip="loading...">
+      <div style={{ minHeight: 'calc(100vh  - 252px)', marginTop: '20px' }}>
+        <Form form={form} name="formAdd" {...layout} onFinish={finished}>
+          <Item
+            label="应用环境："
+            name="Environment"
+            rules={[
+              {
+                required: true,
+                message: '请选择应用环境',
+              },
+            ]}
+          >
+            <Select placeholder="请选择应用环境">
+              {environmentList &&
+                environmentList.map(item => (
+                  <Option value={item.value} key={item.key}>
+                    {item.label}
+                  </Option>
+                ))}
+            </Select>
+          </Item>
+          <Item
+            label="应用名称："
+            name="ProductName"
+            rules={[
+              {
+                required: true,
+                message: '请输入应用名称',
+              },
+            ]}
+          >
+            <Input placeholder="请输入应用名称" allowClear />
+          </Item>
+          <Item
+            label="入口url"
+            name="StartUrl"
+            rules={[
+              {
+                required: true,
+                message: '请输入入口url',
+              },
+            ]}
+          >
+            <Input addonBefore="://" placeholder="请输入入口url" allowClear />
+          </Item>
+          <Item
+            label="默认配置"
+            name="DefaultSetting"
+            rules={[
+              {
+                required: false,
+                message: '请输入默认配置',
+              },
+            ]}
+          >
+            <Input placeholder="请输入默认配置" allowClear />
+          </Item>
+          <Item wrapperCol={{ span: 7, offset: 7 }}>
+            <Button type="primary" htmlType="submit">
+              提交
+            </Button>
+          </Item>
+        </Form>
+      </div>
+    </Spin>
+  );
+};
+export default AddForm;

src/pages/webConfig/index.js

@@ -17,6 +17,7 @@ import SiteConfig from './components/siteConfigDrawer';
 import { appConnector } from '@/containers/App/store';
 import { defaultWebConfigObj, webMode } from './utils';
 import MenuConfig from './menuconfig/MenuConfig';
+import ProductConfig from './productConfig';
 const { TabPane } = Tabs;
 
 const WebConfigPage = props => {
@@ -24,7 +25,7 @@ const WebConfigPage = props => {
   const [configVisible, setConfigVisible] = useState(false);
   const [loading, setLoading] = useState(false);
   const [webs, setWebs] = useState([]);
-  const [curWeb, setCurWeb] = useState(null); // 当前展示的web
+  const [curWeb, setCurWeb] = useState('99'); // 当前展示的web
   const [configObj, setConfigObj] = useState({}); // 获取当前的web的配置
   const [toEdit, setToEdit] = useState(null); // 编辑展示用的配置
   const [isEdit, setIsEdit] = useState(true);
@@ -265,6 +266,9 @@ const WebConfigPage = props => {
       <div className={styles.webConfigContainer}>
         <Spin spinning={loading || submitting}>
           <Tabs type="editable-card" onEdit={onEdit} onChange={handleTabChange}>
+            <TabPane key={99} tab="产品配置" closable={false}>
+              <ProductConfig />
+            </TabPane>
             {webs.map(renderTabPane)}
           </Tabs>
           <SiteConfig

src/pages/webConfig/productConfig.jsx

-import React, { useState } from 'react';
-import { Card, List } from 'antd';
-
+import React, { useState, useEffect } from 'react';
+import { Card, List, Drawer, Button, Empty, Spin, notification } from 'antd';
+import {
+  modifyProduct,
+  getProductList,
+  delProductList,
+} from '@/services/webConfig/api';
+import classnames from 'classnames';
+import AddForm from './components/productForm';
+import EditForm from './components/editForm';
+import styles from './productConfig.less';
 const ProductConfig = props => {
-  const a = 'q';
+  const [addVisible, setAddVisible] = useState(false);
+  const [productList, setProductList] = useState([]);
+  const [productObj, setProductObt] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [flag, setFlag] = useState(1);
+  useEffect(() => {
+    setLoading(true);
+    getProductList()
+      .then(res => {
+        const { code, data } = res;
+        if (code === 0) {
+          if (!productObj && data.length > 0) {
+            setProductObt(data[0]);
+          }
+          setProductList(data);
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [flag]);
+  // 展示新增抽屉
+  const handleAdd = () => {
+    setAddVisible(true);
+  };
+  // 删除
+  const handleDel = () => {
+    setLoading(true);
+    delProductList({
+      ids: productObj.Id,
+    })
+      .then(res => {
+        setLoading(false);
+        if (res.code === 0) {
+          notification.success({
+            message: '提示',
+            description: '删除成功',
+            duration: 3,
+          });
+          setProductObt('');
+          setFlag(flag + 1);
+        } else {
+          notification.error({
+            message: '提示',
+            description: res.msg || '删除失败',
+            duration: 10,
+          });
+        }
+      })
+      .catch(err => {
+        setLoading(false);
+        console.error(err);
+      });
+  };
+  // 新增提交回调
+  const addCallback = val => {
+    setAddVisible(false);
+    setFlag(flag + 1);
+  };
+  // 编辑的回调
+  const editCallback = val => {
+    setLoading(true);
+    modifyProduct(val)
+      .then(res => {
+        setLoading(false);
+        if (res.code === 0) {
+          notification.success({
+            message: '提示',
+            description: '编辑成功',
+            duration: 3,
+          });
+          setFlag(flag + 1);
+        } else {
+          notification.error({
+            message: '提示',
+            description: res.msg || '编辑失败',
+            duration: 10,
+          });
+        }
+      })
+      .catch(err => {
+        setLoading(false);
+        console.log(err);
+      });
+  };
+  const renderListItem = arr =>
+    arr.map(item => (
+      <List.Item
+        key={item.Id}
+        className={classnames({
+          [styles.listItem]: true,
+          [styles.selected]: item.Id === productObj.Id,
+        })}
+        onClick={() => setProductObt(item)}
+      >
+        {item.ProductName}
+      </List.Item>
+    ));
   return (
-    <div>
-      <Card>
-        <List>a</List>
-        <List>a</List>
-        <List>a</List>
-        <List>a</List>
-        <List>a</List>
-      </Card>
-    </div>
+    <Spin spinning={loading} tip="loading...">
+      <div className={styles.box}>
+        <Card className={classnames(`${styles.leftList}`)}>
+          <div className={styles.listTop}>
+            产品选择：
+            <Button type="primary" onClick={handleAdd}>
+              新增
+            </Button>
+            {/* <Button type="primary" danger onClick={handleDel}>
+              删除
+            </Button> */}
+          </div>
+          {}
+          <List>{renderListItem(productList)}</List>
+        </Card>
+        <Card className={styles.rightForm}>
+          {productList && productList.length > 0 && productObj ? (
+            <EditForm
+              productObj={productObj}
+              editCallback={editCallback}
+              handleDel={handleDel}
+            />
+          ) : (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description="当前未选中产品类型"
+            />
+          )}
+          <Drawer
+            title="新增产品"
+            destroyOnClose
+            maskClosable={false}
+            width={600}
+            onClose={() => {
+              setAddVisible(false);
+            }}
+            visible={addVisible}
+          >
+            <AddForm addCallback={addCallback} />
+          </Drawer>
+        </Card>
+      </div>
+    </Spin>
   );
 };
-
 export default ProductConfig;

src/pages/webConfig/productConfig.less

+
+.box{
+  width: 100%;
+  display: flex;
+  height: calc(100vh - 132px);
+}
+.leftList{
+  width: 330px;
+}
+.rightForm{
+  width: 100%;
+}
+.listTop{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: -20px;
+  padding: 10px 0;
+  border-bottom: 1px solid #ccc;
+}
+.listItem{
+  height: 35px !important;
+  padding-left: 5px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.listItem:hover{
+  background-color:  #f8f8f8  ;
+}
+.selected{
+  font-weight: bold;
+  background-color: #bae7ff!important;
+}
\ No newline at end of file

src/services/webConfig/api.js

@@ -111,3 +111,15 @@ export const getConfigContent = name =>
 // 菜单拖拽
 export const dragMenu = params =>
   get(`${CITY_SERVICE}/OMS.svc/P_DragMenu`, params);
+
+// 获取产品列表
+export const getProductList = params =>
+  post(`${PUBLISH_SERVICE}/UserCenter/ProductList`, params);
+
+// 新增或修改产品列表 Id为0时新增，Id大于0时修改
+export const modifyProduct = params =>
+  post(`${PUBLISH_SERVICE}/UserCenter/ModifyProduct`, params);
+
+// 删除产品列表
+export const delProductList = params =>
+  get(`${PUBLISH_SERVICE}/UserCenter/DelProductList`, params);