index.jsx 7.43 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';
7
import { getMiniAppModuleTree, deleteWebsite, deleteMiniMenu } from '@/services/mobileConfig/api';
Maofei94's avatar
Maofei94 committed
8
import { ExclamationCircleOutlined } from '@ant-design/icons';
Maofei94's avatar
Maofei94 committed
9
import SiteConfig from './SiteConfig';
Maofei94's avatar
Maofei94 committed
10 11
import MiniMenu from './menuconfig/miniMenu';
import AddConfig from './addConfig';
Maofei94's avatar
Maofei94 committed
12
import { appConnector } from '@/containers/App/store';
13 14

import styles from './index.less';
Maofei94's avatar
Maofei94 committed
15 16
const { TabPane } = Tabs;
const MobileConfigPage = props => {
Maofei94's avatar
Maofei94 committed
17
  const { userMode } = props;
18
  const [activeKey, setActiveKey] = useState('1'); // tabs活动页
Maofei94's avatar
Maofei94 committed
19 20
  const [miniTitle, setMiniTitle] = useState(''); // 应用名称
  const [flag, setFlag] = useState(1); // 刷新标志
Maofei94's avatar
Maofei94 committed
21 22 23
  const [showConfig, setShowConfig] = useState(true);
  const [loading, setLoading] = useState(false);
  const [subType, setSubType] = useState('');
Maofei94's avatar
Maofei94 committed
24 25 26 27
  const [parentKey, setParentKey] = useState('');
  const [singleList, setSingleList] = useState([]);
  const [clientName, setClientName] = useState(''); // client
  const [addVisible, setAddVisible] = useState(false);
Maofei94's avatar
Maofei94 committed
28
  useEffect(() => {
Maofei94's avatar
Maofei94 committed
29
    setLoading(true);
Maofei94's avatar
Maofei94 committed
30
    getMiniAppModuleTree({
Maofei94's avatar
Maofei94 committed
31
      userMode: userMode || 'super',
Maofei94's avatar
Maofei94 committed
32
    }).then(res => {
Maofei94's avatar
Maofei94 committed
33
      setLoading(false);
Maofei94's avatar
Maofei94 committed
34 35
      if (res.code === 0) {
        const { data } = res;
36
        let array = (data[0].children.length > 0 && [...data[0].children]) || [];
Maofei94's avatar
Maofei94 committed
37 38 39 40 41 42 43 44 45 46 47
        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
48 49 50 51 52 53 54 55 56 57 58
        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
59
        console.log(arr);
Maofei94's avatar
Maofei94 committed
60 61
      } else {
        setShowConfig(false);
Maofei94's avatar
Maofei94 committed
62
      }
Maofei94's avatar
Maofei94 committed
63 64
      console.log(res);
    });
65
  }, [flag]);
Maofei94's avatar
Maofei94 committed
66

Maofei94's avatar
Maofei94 committed
67 68 69 70
  // 修改选中的tab
  const handleChange = key => {
    setActiveKey(key);
  };
Maofei94's avatar
Maofei94 committed
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
  // 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 />,
          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);
102
    setActiveKey('1');
Maofei94's avatar
Maofei94 committed
103 104 105
    setClientName(obj.subSystemValue);
    setMiniTitle(obj.text);
  };
Maofei94's avatar
Maofei94 committed
106
  const submitCallback = val => {
Maofei94's avatar
Maofei94 committed
107
    setFlag(flag + 1);
Maofei94's avatar
Maofei94 committed
108
    setMiniTitle(val);
Maofei94's avatar
Maofei94 committed
109 110
    setSubType('');
  };
Maofei94's avatar
Maofei94 committed
111 112 113
  const addCallback = val => {
    console.log(val);
    setSubType('');
Maofei94's avatar
Maofei94 committed
114
    setAddVisible(false);
Maofei94's avatar
Maofei94 committed
115 116
    setMiniTitle(val);

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

Maofei94's avatar
Maofei94 committed
166
  const ContentTab = () => (
167
    <Card style={{ height: '100%' }}>
Maofei94's avatar
Maofei94 committed
168 169 170 171 172 173 174 175 176 177 178 179 180
      {/* <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
181 182 183
            <TabPane tab={tabArr[2].title} key={tabArr[2].key}>
              {activeKey === tabArr[2].key && tabArr[2].component}
            </TabPane>
Maofei94's avatar
Maofei94 committed
184
          )} */}
185
        {/* {showConfig && subType !== 'add' && (
Maofei94's avatar
Maofei94 committed
186 187 188
          <TabPane tab={tabArr[3].title} key={tabArr[3].key}>
            {activeKey === tabArr[3].key && tabArr[3].component}
          </TabPane>
189
        )} */}
Maofei94's avatar
Maofei94 committed
190 191
      </Tabs>
      {/* </Spin> */}
192
    </Card>
Maofei94's avatar
Maofei94 committed
193 194 195 196 197 198
  );
  const cts = (tabPaneItem, id) => (
    <TabPane key={tabPaneItem.id} tab={tabPaneItem.text}>
      <>{parentKey === tabPaneItem.id && ContentTab()}</>
    </TabPane>
  );
Maofei94's avatar
Maofei94 committed
199 200
  const tabArr = [
    {
201 202
      title: '菜单管理',
      key: '1',
203
      component: <MiniMenu clientName={clientName} userMode={userMode} parentKey={parentKey} />,
Maofei94's avatar
Maofei94 committed
204 205
    },
    {
206 207
      title: '应用配置',
      key: '0',
Maofei94's avatar
Maofei94 committed
208
      component: (
209 210 211 212 213
        <SiteConfig
          miniTitle={miniTitle}
          submitCallback={submitCallback}
          subType={subType}
          addCallback={addCallback}
Maofei94's avatar
Maofei94 committed
214 215
          clientName={clientName}
          parentKey={parentKey}
皮倩雯's avatar
皮倩雯 committed
216
          singleList={singleList}
Maofei94's avatar
Maofei94 committed
217 218 219 220 221 222 223 224
        />
      ),
    },
    {
      title: '七参数配置',
      key: '2',
      component: <SevenParams />,
    },
225 226 227 228 229
    // {
    //   title: '版本包配置',
    //   key: '3',
    //   component: <VersionPublish clientName={clientName} />,
    // },
Maofei94's avatar
Maofei94 committed
230
  ];
Maofei94's avatar
Maofei94 committed
231 232
  return (
    <PageContainer>
233 234 235 236 237 238 239 240 241 242 243 244
      <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
245 246 247
      <Drawer
        title="新增应用"
        destroyOnClose
248
        width={450}
Maofei94's avatar
Maofei94 committed
249 250 251 252 253
        onClose={() => {
          setAddVisible(false);
        }}
        visible={addVisible}
      >
皮倩雯's avatar
皮倩雯 committed
254
        <AddConfig
皮倩雯's avatar
皮倩雯 committed
255
          visible={addVisible}
皮倩雯's avatar
皮倩雯 committed
256 257 258 259
          addCallback={addCallback}
          submitCallback={submitCallback}
          singleList={singleList}
        />
Maofei94's avatar
Maofei94 committed
260
      </Drawer>
Maofei94's avatar
Maofei94 committed
261 262 263
    </PageContainer>
  );
};
264

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