index.js 7.12 KB
Newer Older
Maofei94's avatar
Maofei94 committed
1
import React, { useState, useEffect, useMemo } from 'react';
Maofei94's avatar
Maofei94 committed
2 3 4 5 6 7 8 9 10 11
import {
  Card,
  Tabs,
  Button,
  Popconfirm,
  notification,
  Spin,
  Modal,
  Drawer,
} from 'antd';
Maofei94's avatar
Maofei94 committed
12
import ProCard from '@ant-design/pro-card';
13
import PageContainer from '@/components/BasePageContainer';
张烨's avatar
张烨 committed
14 15
import SevenParams from './menuconfig/SevenParams';
import VersionPublish from './menuconfig/VersionPublish';
Maofei94's avatar
Maofei94 committed
16 17
import {
  getMiniAppModuleTree,
Maofei94's avatar
Maofei94 committed
18
  deleteWebsite,
Maofei94's avatar
Maofei94 committed
19
  deleteMiniMenu,
Maofei94's avatar
Maofei94 committed
20
} from '@/services/mobileConfig/api';
Maofei94's avatar
Maofei94 committed
21
import { ExclamationCircleOutlined } from '@ant-design/icons';
Maofei94's avatar
Maofei94 committed
22
import SiteConfig from './SiteConfig';
Maofei94's avatar
Maofei94 committed
23 24
import MiniMenu from './menuconfig/miniMenu';
import AddConfig from './addConfig';
Maofei94's avatar
Maofei94 committed
25
import { appConnector } from '@/containers/App/store';
Maofei94's avatar
Maofei94 committed
26 27
const { TabPane } = Tabs;
const MobileConfigPage = props => {
Maofei94's avatar
Maofei94 committed
28
  const { userMode } = props;
Maofei94's avatar
Maofei94 committed
29
  const [activeKey, setActiveKey] = useState('0'); // tabs活动页
Maofei94's avatar
Maofei94 committed
30 31
  const [miniTitle, setMiniTitle] = useState(''); // 应用名称
  const [flag, setFlag] = useState(1); // 刷新标志
Maofei94's avatar
Maofei94 committed
32 33 34
  const [showConfig, setShowConfig] = useState(true);
  const [loading, setLoading] = useState(false);
  const [subType, setSubType] = useState('');
Maofei94's avatar
Maofei94 committed
35 36 37 38
  const [parentKey, setParentKey] = useState('');
  const [singleList, setSingleList] = useState([]);
  const [clientName, setClientName] = useState(''); // client
  const [addVisible, setAddVisible] = useState(false);
Maofei94's avatar
Maofei94 committed
39
  useEffect(() => {
Maofei94's avatar
Maofei94 committed
40
    setLoading(true);
Maofei94's avatar
Maofei94 committed
41
    getMiniAppModuleTree({
Maofei94's avatar
Maofei94 committed
42
      userMode: userMode || 'super',
Maofei94's avatar
Maofei94 committed
43
    }).then(res => {
Maofei94's avatar
Maofei94 committed
44
      setLoading(false);
Maofei94's avatar
Maofei94 committed
45 46
      if (res.code === 0) {
        const { data } = res;
Maofei94's avatar
Maofei94 committed
47 48
        let array =
          (data[0].children.length > 0 && [...data[0].children]) || [];
Maofei94's avatar
Maofei94 committed
49 50 51 52 53 54 55 56 57 58 59
        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
60 61 62 63 64 65 66 67 68 69 70
        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
71
        console.log(arr);
Maofei94's avatar
Maofei94 committed
72 73
      } else {
        setShowConfig(false);
Maofei94's avatar
Maofei94 committed
74
      }
Maofei94's avatar
Maofei94 committed
75 76
      console.log(res);
    });
77
  }, [flag]);
Maofei94's avatar
Maofei94 committed
78

Maofei94's avatar
Maofei94 committed
79 80 81 82
  // 修改选中的tab
  const handleChange = key => {
    setActiveKey(key);
  };
Maofei94's avatar
Maofei94 committed
83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
  // 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);
    setActiveKey('0');
    setClientName(obj.subSystemValue);
    setMiniTitle(obj.text);
  };
Maofei94's avatar
Maofei94 committed
118
  const submitCallback = val => {
Maofei94's avatar
Maofei94 committed
119
    setFlag(flag + 1);
Maofei94's avatar
Maofei94 committed
120
    setMiniTitle(val);
Maofei94's avatar
Maofei94 committed
121 122
    setSubType('');
  };
Maofei94's avatar
Maofei94 committed
123 124 125
  const addCallback = val => {
    console.log(val);
    setSubType('');
Maofei94's avatar
Maofei94 committed
126
    setAddVisible(false);
Maofei94's avatar
Maofei94 committed
127 128
    setMiniTitle(val);

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

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

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