fix: 重构web配置网站配置模块

src/components/Upload/index.less

@@ -11,23 +11,25 @@
 .avatarUploader {
   display: inline-block;
   text-align: left;
-  .ant-upload-list-item-thumbnail>img{
+  .ant-upload-list-item-thumbnail > img {
     background: #aaa;
-    background-image: linear-gradient(white 0px, transparent 0), linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0), linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
+    background-image: linear-gradient(white 0px, transparent 0),
+      linear-gradient(hsla(0, 0%, 100%, 0.3) 1px, transparent 0),
+      linear-gradient(90deg, hsla(0, 0%, 100%, 0.3) 1px, transparent 0);
     background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
   }
 }
 .modal {
-  .ant-tabs-content{
+  .ant-tabs-content {
     // height: 100%;
-      .ant-tabs-tabpane{
-        padding-left: 0 !important;
-      }
+    .ant-tabs-tabpane {
+      padding-left: 0 !important;
+    }
   }
-  .ant-tabs-content-holder{
+  .ant-tabs-content-holder {
     // padding: 5px 0;
   }
-  .ant-modal-body{
+  .ant-modal-body {
     padding-top: 0;
     padding-bottom: 0;
   }
@@ -41,16 +43,18 @@
   cursor: pointer;
   border-bottom: 1px solid #2f54eb;
 }
-.search{
+.search {
   width: 50%;
   margin: 10px 20px;
 }
-.hide{
+.hide {
   display: none !important;
 }
-.svgBg{
+.svgBg {
   background: #aaa;
-  background-image: linear-gradient(white 0px, transparent 0), linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0), linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
+  background-image: linear-gradient(white 0px, transparent 0),
+    linear-gradient(hsla(0, 0%, 100%, 0.3) 1px, transparent 0),
+    linear-gradient(90deg, hsla(0, 0%, 100%, 0.3) 1px, transparent 0);
   background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
 }
 
@@ -59,11 +63,11 @@
   flex-wrap: wrap;
   max-height: calc(100% - 10px);
   overflow: auto;
-  .ant-collapse-content-box{
+  .ant-collapse-content-box {
     display: flex;
     flex-wrap: wrap;
   }
-  .ant-collapse{
+  .ant-collapse {
     width: 100%;
   }
   .imgItem {
@@ -78,18 +82,19 @@
     // overflow: hidden;
     cursor: pointer;
     display: flex;
-    >div{
+    > div {
       flex: 1;
       display: flex;
       max-height: 78px;
+      background-color: rgba(204, 204, 204, 0.5);
     }
-    >span{
+    > span {
       text-align: center;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    &:hover>span{
+    &:hover > span {
       color: #2f54eb;
     }
 
@@ -99,12 +104,12 @@
       object-fit: contain;
       max-height: 100%;
     }
-    .svgGray{
+    .svgGray {
       // background-color: rgba(238,238,238,1);
-      background-color:#2881a1;
+      background-color: #2881a1;
     }
     &:hover,
-    &>.seleted {
+    & > .seleted {
       .iconBtn {
         visibility: visible;
       }

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

-/*
- * @Description:
- * @Author: leizhe
- * @Date: 2022-01-13 10:47:32
- * @LastEditTime: 2022-04-01 19:16:22
- * @LastEditors: leizhe
- */
-import React from 'react';
-import { Drawer, notification, Button, Space } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { getLoginPage, getMapCofigs, getWebThemes, getProductList } from '@/services/webConfig/api';
+import {
+  Drawer,
+  notification,
+  Button,
+  Space,
+  Form,
+  Input,
+  Select,
+  Checkbox,
+  Radio,
+  Tooltip,
+} from 'antd';
+import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import WebConfigForm from './webConfigForm';
-import { postEditWebConfig } from '@/services/webConfig/api';
+import Upload from '@/components/Upload';
+import styles from './siteConfigDrawer.less';
+const { Option } = Select;
 
 export default props => {
   const { visible, onClose, config, hasIntegerate, isEdit, onOk, submitting, productList } = props;
+  const [form] = Form.useForm();
+  const [loginPages, setLoginPages] = useState([]);
+  useEffect(() => {
+    onGetLoginPages();
+  }, []);
 
+  useEffect(() => {
+    if (visible) {
+      if (isEdit) {
+        // 获取表单回显
+        console.log(config, 'config');
+        form.setFieldsValue(config);
+      } else {
+        form.setFieldsValue({ messageMarking: 'All', messageVoice: true });
+      }
+    } else {
+      form.resetFields();
+    }
+  }, [visible]);
+  const onGetLoginPages = () => {
+    if (loginPages.length === 0) {
+      getLoginPage().then(res => {
+        setLoginPages(res.data);
+        setLoginPages(res.data);
+      });
+    }
+  };
+
+  const onsubmit = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        onOk({
+          ...validate,
+          mode: 'single',
+          menu: 'banner-left',
+          mdi: 'MDI',
+          loginTemplate: 'Default.html',
+        });
+      }
+    });
+  };
   return (
     <Drawer
       title={isEdit ? '查看/编辑网站配置' : '新增网站'}
-      width={620}
-      closable
+      width={500}
       onClose={onClose}
       visible={visible}
-      maskClosable
       destroyOnClose
+      footer={
+        <Space>
+          <Button onClick={onClose}>取消</Button>
+          <Button onClick={onsubmit} type="primary">
+            确定
+          </Button>
+        </Space>
+      }
     >
-      <WebConfigForm
-        hasIntegerate={hasIntegerate}
-        productList={productList}
-        isEdit={isEdit}
-        config={config}
-        onCancel={onClose}
-        submitting={submitting}
-        onOk={values => {
-          console.log(values, 'values');
-          if (!values.homePage && values.hideMap) {
-            notification.error({
-              message: '在按需加载地图的模式下，请配置主页路径',
-              duration: '3',
-            });
-            return;
-          }
-          console.log(values.alarmWays, typeof values.alarmWays);
-          if (values.alarmWays) {
-            values.alarmWays =
-              typeof values.alarmWays === 'string'
-                ? values.alarmWays
-                : values.alarmWays.join(',') || '';
+      <Form
+        form={form}
+        labelCol={{ span: 5 }}
+        wrapperCol={{ span: 18 }}
+        initialValues={{ remember: true }}
+      >
+        <Form.Item
+          label="标题"
+          name="title"
+          rules={[
+            {
+              required: true,
+              message: '标题为必填项',
+            },
+          ]}
+        >
+          <Input placeholder="请输入标题" autoComplete="off" />
+        </Form.Item>
+        <Form.Item label="副标题" name="subtitle">
+          <Input placeholder="请输入副标题" autoComplete="off" />
+        </Form.Item>
+        <Form.Item
+          label="系统icon"
+          name="shortcutIcon"
+          style={{ height: '112px' }}
+          rules={[
+            {
+              required: true,
+              message: '请选择菜单图标',
+            },
+          ]}
+        >
+          <Upload picType="icon" />
+        </Form.Item>
+        <Form.Item
+          label="登录logo"
+          name="logo"
+          style={{ height: '112px' }}
+          rules={[
+            {
+              required: true,
+              message: '请选择图标icon',
+            },
+          ]}
+        >
+          <Upload picType="logo" />
+        </Form.Item>
+        <Form.Item
+          label="标题logo"
+          name="bannerLogo"
+          style={{ height: '112px' }}
+          rules={[
+            {
+              required: true,
+              message: '请选择标题logo',
+            },
+          ]}
+        >
+          <Upload picType="logo" />
+        </Form.Item>
+        <Form.Item
+          label="虚拟目录"
+          name="client"
+          rules={[
+            {
+              required: true,
+              message: '虚拟目录不能为空',
+            },
+          ]}
+        >
+          <Input autoComplete="off" disabled={isEdit} />
+        </Form.Item>
+        <Form.Item label="产品类型" name="productType">
+          <Select placeholder="请选择主页产品类型">
+            {productList.map(item => (
+              <Option value={item.PackageName} key={item.PackageName}>
+                {`${item.ProductName}（${item.PackageName}）`}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item label="主页Url" name="homePage">
+          <Input placeholder="请输入主页路径" autoComplete="off" />
+        </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>
+        <Form.Item label="二维码地址" name="qrcode">
+          <Input placeholder="请输入二维码地址" autoComplete="off" />
+        </Form.Item>
+        <Form.Item
+          label={
+            <div className={styles.formData_label}>
+              <Tooltip
+                title={
+                  <span>
+                    多人(默认)：标记自己的消息，不影响他人接收
+                    <br />
+                    单人：标记已读，消息不再提醒其他人，主要解决报警过多，通知范围过大的情况
+                  </span>
+                }
+                overlayStyle={{ maxWidth: 350 }}
+              >
+                <InfoCircleOutlined style={{ color: '#40a9ff', padding: '2px 2px 0 0' }} />
+              </Tooltip>
+              <span>消息标记</span>
+            </div>
           }
-          // eslint-disable-next-line no-unused-expressions
-          onOk && onOk(values);
-        }}
-      />
+          name="messageMarking"
+        >
+          <Radio.Group>
+            <Radio value="All">多人</Radio>
+            <Radio value="One">单人</Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label="语音播报" name="messageVoice">
+          <Radio.Group>
+            <Radio value={true}>开</Radio>
+            <Radio value={false}>关</Radio>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
     </Drawer>
   );
 };

src/pages/productCenter/webConfig/menuconfig/AddForm.jsx

@@ -60,7 +60,7 @@ const AddForm = props => {
                 productList.length > 0 &&
                 productList.map(item => (
                   <Option value={item.PackageName} key={item.PackageName}>
-                    {item.ProductName}
+                    {`${item.ProductName}（${item.PackageName}）`}
                   </Option>
                 ))}
             </Select>

src/pages/productCenter/webConfig/menuconfig/ImportOrExport.jsx

@@ -2,10 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Modal, Upload, Button, Form, Input, message, Popconfirm } from 'antd';
 
 import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
-import {
-  UpLoadWebModuleTree,
-  DownLoadWebModuleTree,
-} from '@/services/webConfig/api';
+import { UpLoadWebModuleTree, DownLoadWebModuleTree } from '@/services/webConfig/api';
 
 const ImportOrExport = props => {
   const { visible, onFinish, onCancel, nodeObj, subSystemValue } = props;
@@ -72,18 +69,9 @@ const ImportOrExport = props => {
         footer={null}
       >
         <div style={{ paddingBottom: '15px' }}>
-          <Form
-            name="form"
-            labelCol={{ span: 4 }}
-            wrapperCol={{ span: 20 }}
-            form={form}
-          >
+          <Form name="form" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} form={form}>
             <Form.Item label="本地导出">
-              <Button
-                type="primary"
-                onClick={hadelExport}
-                icon={<DownloadOutlined />}
-              >
+              <Button type="primary" onClick={hadelExport} icon={<DownloadOutlined />}>
                 导出菜单配置
               </Button>
             </Form.Item>
@@ -92,11 +80,7 @@ const ImportOrExport = props => {
                 <Form.Item name="fileName" style={{ marginBottom: '0' }}>
                   <Input disabled />
                 </Form.Item>
-                <Upload
-                  beforeUpload={beforeUpload}
-                  showUploadList={false}
-                  accept=".json"
-                >
+                <Upload beforeUpload={beforeUpload} showUploadList={false} accept=".json">
                   <Button
                     type="primary"
                     style={{ marginLeft: '10px' }}

src/pages/productCenter/webConfig/menuconfig/editForm.jsx

@@ -295,7 +295,7 @@ const EditForm = props => {
                 productList.length > 0 &&
                 productList.map(item => (
                   <Option value={item.PackageName} key={item.PackageName}>
-                    {item.ProductName || ''}
+                    {`${item.ProductName}（${item.PackageName}）`}
                   </Option>
                 ))}
             </Select>