index.jsx 7.99 KB
Newer Older
Maofei94's avatar
Maofei94 committed
1
import React, { useState, useEffect, useMemo } from 'react';
2
import { Card, Tabs, Button, Popconfirm, notification, Spin, Modal, Drawer } from 'antd';
Maofei94's avatar
Maofei94 committed
3
import ProCard from '@ant-design/pro-card';
4
import PageContainer from '@/components/BasePageContainer';
张烨's avatar
张烨 committed
5 6
import SevenParams from './menuconfig/SevenParams';
import VersionPublish from './menuconfig/VersionPublish';
田翔's avatar
田翔 committed
7
import WorkDesign from './menuconfig/WorkDesign';
8
import { getMiniAppModuleTree, deleteWebsite, deleteMiniMenu } from '@/services/mobileConfig/api';
Maofei94's avatar
Maofei94 committed
9
import { ExclamationCircleOutlined } from '@ant-design/icons';
Maofei94's avatar
Maofei94 committed
10
import SiteConfig from './SiteConfig';
Maofei94's avatar
Maofei94 committed
11 12
import MiniMenu from './menuconfig/miniMenu';
import AddConfig from './addConfig';
Maofei94's avatar
Maofei94 committed
13
import { appConnector } from '@/containers/App/store';
14 15

import styles from './index.less';
Maofei94's avatar
Maofei94 committed
16 17
const { TabPane } = Tabs;
const MobileConfigPage = props => {
Maofei94's avatar
Maofei94 committed
18
  const { userMode } = props;
19
  const [activeKey, setActiveKey] = useState('1'); // tabs活动页
Maofei94's avatar
Maofei94 committed
20 21
  const [miniTitle, setMiniTitle] = useState(''); // 应用名称
  const [flag, setFlag] = useState(1); // 刷新标志
Maofei94's avatar
Maofei94 committed
22 23 24
  const [showConfig, setShowConfig] = useState(true);
  const [loading, setLoading] = useState(false);
  const [subType, setSubType] = useState('');
Maofei94's avatar
Maofei94 committed
25 26 27 28
  const [parentKey, setParentKey] = useState('');
  const [singleList, setSingleList] = useState([]);
  const [clientName, setClientName] = useState(''); // client
  const [addVisible, setAddVisible] = useState(false);
Maofei94's avatar
Maofei94 committed
29
  useEffect(() => {
Maofei94's avatar
Maofei94 committed
30
    setLoading(true);
Maofei94's avatar
Maofei94 committed
31
    getMiniAppModuleTree({
Maofei94's avatar
Maofei94 committed
32
      userMode: userMode || 'super',
Maofei94's avatar
Maofei94 committed
33
    }).then(res => {
Maofei94's avatar
Maofei94 committed
34
      setLoading(false);
Maofei94's avatar
Maofei94 committed
35 36
      if (res.code === 0) {
        const { data } = res;
37
        let array = (data[0].children.length > 0 && [...data[0].children]) || [];
Maofei94's avatar
Maofei94 committed
38 39 40 41 42 43 44 45 46 47 48
        let arr = [];
        array.map(item => {
          arr.push({
            ...item,
            subSystemValue: item.id.split('single')[1],
          });
          console.log(item.id.split('single')[1]);

          return item;
        });
        setSingleList(arr);
Maofei94's avatar
Maofei94 committed
49 50 51 52 53 54 55 56 57 58 59
        if (miniTitle) {
          let obj = arr.find(item => item.text === miniTitle);
          setParentKey(obj.id);
          setMiniTitle(obj.text);
          setClientName(obj.subSystemValue);
        } else {
          setParentKey(arr[0].id);
          setMiniTitle(arr[0].text);
          setClientName(arr[0].subSystemValue);
        }

Maofei94's avatar
Maofei94 committed
60
        console.log(arr);
Maofei94's avatar
Maofei94 committed
61 62
      } else {
        setShowConfig(false);
Maofei94's avatar
Maofei94 committed
63
      }
Maofei94's avatar
Maofei94 committed
64 65
      console.log(res);
    });
66
  }, [flag]);
Maofei94's avatar
Maofei94 committed
67

Maofei94's avatar
Maofei94 committed
68 69 70 71
  // 修改选中的tab
  const handleChange = key => {
    setActiveKey(key);
  };
Maofei94's avatar
Maofei94 committed
72 73 74 75 76 77 78 79 80 81 82 83 84 85
  // tab新增编辑的回调
  const handleEdit = (key, action) => {
    console.log(key, 'key', action);

    switch (action) {
      case 'add': {
        setAddVisible(true);
        break;
      }
      case 'remove': {
        let val = key.split('single')[1] || '';
        Modal.confirm({
          title: '确认删除应用?',
          icon: <ExclamationCircleOutlined />,
86 87 88 89 90 91
          content: (
            <span>
              删除应用 <span style={{ fontWeight: 800, color: '#1890ff' }}>{key}</span>{' '}
              后,将一并删除所属角色与菜单,确认删除?
            </span>
          ),
Maofei94's avatar
Maofei94 committed
92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
          okText: '确认',
          cancelText: '取消',
          onOk: closeModal => {
            delMini(val, closeModal);
          },
        });
        break;
      }
      default:
        break;
    }
  };
  const handleParChange = key => {
    console.log(key);
    let obj = singleList.find(item => item.id === key);
    console.log(obj);
    setParentKey(key);
109
    setActiveKey('1');
Maofei94's avatar
Maofei94 committed
110 111 112
    setClientName(obj.subSystemValue);
    setMiniTitle(obj.text);
  };
Maofei94's avatar
Maofei94 committed
113
  const submitCallback = val => {
Maofei94's avatar
Maofei94 committed
114
    setFlag(flag + 1);
Maofei94's avatar
Maofei94 committed
115
    setMiniTitle(val);
Maofei94's avatar
Maofei94 committed
116 117
    setSubType('');
  };
Maofei94's avatar
Maofei94 committed
118 119 120
  const addCallback = val => {
    console.log(val);
    setSubType('');
Maofei94's avatar
Maofei94 committed
121
    setAddVisible(false);
Maofei94's avatar
Maofei94 committed
122 123
    setMiniTitle(val);

Maofei94's avatar
Maofei94 committed
124 125
    setFlag(flag + 1);
    // setMiniTitle(val);
Maofei94's avatar
Maofei94 committed
126
  };
张烨's avatar
张烨 committed
127
  // 删除
Maofei94's avatar
Maofei94 committed
128
  const delMini = (val, closeModal) => {
129 130
    console.log(clientName);
    console.log(val);
Maofei94's avatar
Maofei94 committed
131
    setLoading(true);
Maofei94's avatar
Maofei94 committed
132 133
    closeModal();
    console.log(val);
Maofei94's avatar
Maofei94 committed
134
    deleteWebsite({
Maofei94's avatar
Maofei94 committed
135
      client: val,
Maofei94's avatar
Maofei94 committed
136 137
      _version: 9999,
      _dc: Date.now(),
Maofei94's avatar
Maofei94 committed
138 139 140
    })
      .then(res => {
        setLoading(false);
141
        if (res.code === 0) {
142 143 144
          if (clientName === val) {
            setMiniTitle(singleList[0].text);
          }
Maofei94's avatar
Maofei94 committed
145 146 147 148 149 150
          setTimeout(() => {
            setFlag(flag + 1);
          }, 500);
          setTimeout(() => {
            deleteMiniMenu({ visible: val });
          }, 1500);
Maofei94's avatar
Maofei94 committed
151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166
          notification.success({
            message: '提示',
            duration: 3,
            description: '删除成功',
          });
        } else {
          notification.success({
            message: '提示',
            duration: 3,
            description: res.message || '删除失败',
          });
        }
      })
      .catch(() => {
        setLoading(false);
      });
Maofei94's avatar
Maofei94 committed
167
  };
Maofei94's avatar
Maofei94 committed
168 169 170 171 172
  const addMini = () => {
    setShowConfig(true);
    setSubType('add');
  };

Maofei94's avatar
Maofei94 committed
173
  const ContentTab = () => (
174
    <Card style={{ height: '100%' }}>
Maofei94's avatar
Maofei94 committed
175 176 177 178 179 180 181 182 183 184 185 186 187
      {/* <Spin tip="loading..." spinning={loading}> */}
      <Tabs activeKey={activeKey} type="card" onChange={handleChange}>
        {showConfig && (
          <TabPane tab={tabArr[0].title} key={tabArr[0].key}>
            {activeKey === tabArr[0].key && tabArr[0].component}
          </TabPane>
        )}
        {showConfig && subType !== 'add' && (
          <TabPane tab={tabArr[1].title} key={tabArr[1].key}>
            {activeKey === tabArr[1].key && tabArr[1].component}
          </TabPane>
        )}
        {/* {showConfig && subType !== 'add' && (
Maofei94's avatar
Maofei94 committed
188 189 190
            <TabPane tab={tabArr[2].title} key={tabArr[2].key}>
              {activeKey === tabArr[2].key && tabArr[2].component}
            </TabPane>
Maofei94's avatar
Maofei94 committed
191
          )} */}
192
        {/* {showConfig && subType !== 'add' && (
Maofei94's avatar
Maofei94 committed
193 194 195
          <TabPane tab={tabArr[3].title} key={tabArr[3].key}>
            {activeKey === tabArr[3].key && tabArr[3].component}
          </TabPane>
196
        )} */}
田翔's avatar
田翔 committed
197 198 199 200 201
        {showConfig && subType !== 'add' && (
          <TabPane tab={tabArr[4].title} key={tabArr[4].key}>
            {activeKey === tabArr[4].key && tabArr[4].component}
          </TabPane>
        )}
Maofei94's avatar
Maofei94 committed
202 203
      </Tabs>
      {/* </Spin> */}
204
    </Card>
Maofei94's avatar
Maofei94 committed
205 206 207 208 209 210
  );
  const cts = (tabPaneItem, id) => (
    <TabPane key={tabPaneItem.id} tab={tabPaneItem.text}>
      <>{parentKey === tabPaneItem.id && ContentTab()}</>
    </TabPane>
  );
Maofei94's avatar
Maofei94 committed
211 212
  const tabArr = [
    {
213 214
      title: '菜单管理',
      key: '1',
215
      component: <MiniMenu clientName={clientName} userMode={userMode} parentKey={parentKey} />,
Maofei94's avatar
Maofei94 committed
216 217
    },
    {
218 219
      title: '应用配置',
      key: '0',
Maofei94's avatar
Maofei94 committed
220
      component: (
221 222 223 224 225
        <SiteConfig
          miniTitle={miniTitle}
          submitCallback={submitCallback}
          subType={subType}
          addCallback={addCallback}
Maofei94's avatar
Maofei94 committed
226 227
          clientName={clientName}
          parentKey={parentKey}
皮倩雯's avatar
皮倩雯 committed
228
          singleList={singleList}
Maofei94's avatar
Maofei94 committed
229 230 231 232 233 234 235 236
        />
      ),
    },
    {
      title: '七参数配置',
      key: '2',
      component: <SevenParams />,
    },
田翔's avatar
田翔 committed
237 238 239 240 241 242 243 244 245 246
    {
      title: '版本包配置',
      key: '3',
      component: <VersionPublish clientName={clientName} />,
    },
    {
      title: '工作台搭建',
      key: '4',
      component: <WorkDesign />,
    },
Maofei94's avatar
Maofei94 committed
247
  ];
Maofei94's avatar
Maofei94 committed
248 249
  return (
    <PageContainer>
250 251 252 253 254 255 256 257 258 259 260 261
      <div className={styles.mobileContainer}>
        <Spin spinning={loading} tip="loading...">
          <Tabs
            activeKey={parentKey}
            onChange={handleParChange}
            type="editable-card"
            onEdit={handleEdit}
          >
            {singleList.map(item => cts(item, parentKey))}
          </Tabs>
        </Spin>
      </div>
Maofei94's avatar
Maofei94 committed
262 263 264
      <Drawer
        title="新增应用"
        destroyOnClose
265
        width={450}
Maofei94's avatar
Maofei94 committed
266 267 268 269 270
        onClose={() => {
          setAddVisible(false);
        }}
        visible={addVisible}
      >
皮倩雯's avatar
皮倩雯 committed
271
        <AddConfig
皮倩雯's avatar
皮倩雯 committed
272
          visible={addVisible}
皮倩雯's avatar
皮倩雯 committed
273 274 275 276
          addCallback={addCallback}
          submitCallback={submitCallback}
          singleList={singleList}
        />
Maofei94's avatar
Maofei94 committed
277
      </Drawer>
Maofei94's avatar
Maofei94 committed
278 279 280
    </PageContainer>
  );
};
281

Maofei94's avatar
Maofei94 committed
282
export default appConnector(MobileConfigPage);