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

Maofei94's avatar
Maofei94 committed
65 66 67 68
  // 修改选中的tab
  const handleChange = key => {
    setActiveKey(key);
  };
Maofei94's avatar
Maofei94 committed
69 70 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
  // 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);
100
    setActiveKey('1');
Maofei94's avatar
Maofei94 committed
101 102 103
    setClientName(obj.subSystemValue);
    setMiniTitle(obj.text);
  };
Maofei94's avatar
Maofei94 committed
104
  const submitCallback = val => {
Maofei94's avatar
Maofei94 committed
105
    setFlag(flag + 1);
Maofei94's avatar
Maofei94 committed
106
    setMiniTitle(val);
Maofei94's avatar
Maofei94 committed
107 108
    setSubType('');
  };
Maofei94's avatar
Maofei94 committed
109 110 111
  const addCallback = val => {
    console.log(val);
    setSubType('');
Maofei94's avatar
Maofei94 committed
112
    setAddVisible(false);
Maofei94's avatar
Maofei94 committed
113 114
    setMiniTitle(val);

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

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

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