VersionPublish.jsx 7.01 KB
Newer Older
张烨's avatar
张烨 committed
1 2
import React, { useEffect, useState, useRef } from 'react';
import { Switch, Button, Message, Spin, Modal } from 'antd';
3
// import axios from 'axios';
张烨's avatar
张烨 committed
4 5

import BaseForm from '@/components/BaseForm/index';
6
import { getApkNameAndDate, SaveMobileApk } from '@/services/appConfig/api';
Maofei94's avatar
Maofei94 committed
7
import { getMobileFiles } from '@/services/mobileConfig/api';
张烨's avatar
张烨 committed
8

张烨's avatar
张烨 committed
9
import styles from './otherConfig.less';
张烨's avatar
张烨 committed
10

11 12 13 14
// const JSON_BASE = `${
//   location.origin
// }/cityinterface/rest/services/filedownload.svc/download/BufFile/Mobile/APK/`;

Maofei94's avatar
Maofei94 committed
15 16 17
export default props => {
  console.log(props);
  const { clientName } = props;
张烨's avatar
张烨 committed
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
  const items = [
    {
      label: '更新描述',
      dataIndex: 'describe',
      rules: [
        {
          required: true,
          message: '请输入apk的更新描述',
        },
      ],
      formType: 'INPUT',
    },
    {
      label: '强制更新',
      dataIndex: 'forceUpdate',
      initialValue: 1,
      rules: [
        {
          required: true,
          message: '请选择是否强制更新',
        },
      ],
      options: [
        {
          children: '是',
          value: 1,
        },
        {
          children: '否',
          value: 0,
        },
      ],
      formType: 'SINGLE_RADIO',
    },
  ];
53

张烨's avatar
张烨 committed
54
  const formEntity = useRef(null);
55
  const fileEntity = useRef(null);
Maofei94's avatar
Maofei94 committed
56
  const [loading, setLoading] = useState(false); // 显示请求的loading
张烨's avatar
张烨 committed
57 58
  const [showModal, setShowModal] = useState(false); // 显示更新的modal
  const [fileData, setFileData] = useState({}); // 获取到的包名和更新时间
59 60 61
  const [file, setFile] = useState({}); // 上传的文件
  const [fileSuccess, setFileSuccess] = useState(false); // 本地文件是否成功
  const [progress, setProgress] = useState(false); // 是否正在保存
Maofei94's avatar
Maofei94 committed
62
  const [upFlag, setUpFlag] = useState(1);
63 64 65 66 67 68 69 70 71 72 73 74

  // const uploadProps = {
  //   name: 'file',
  //   action: `${window.location.origin}${PUBLISH_SERVICE}/FileCenter/UploadSingleFile`,
  //   headers: {
  //     Authorization: 'Bearer ' + localStorage.getItem('token') || '',
  //   },
  //   onChange(info) {
  //     console.log(info)
  //     setFile(info.file);
  //   },
  // };
张烨's avatar
张烨 committed
75 76 77 78 79 80

  const submitForm = () => {
    console.log(formEntity);
    const { validateFields } = formEntity.current;
    validateFields()
      .then(values => {
81 82 83 84 85
        const { describe, forceUpdate } = values;
        const formData = new FormData();
        formData.set('description', describe);
        formData.set('isRefresh', !!forceUpdate);
        formData.set('file', file);
Maofei94's avatar
Maofei94 committed
86
        formData.set('client', clientName);
87 88 89 90
        setProgress(true);
        SaveMobileApk(formData).then(res => {
          console.log(res);
          setProgress(false);
Maofei94's avatar
Maofei94 committed
91
          if (Number(res.code) === 0) {
92
            Message.success('更新成功');
Maofei94's avatar
Maofei94 committed
93
            setUpFlag(upFlag + 1);
94 95 96
            setShowModal(false);
            init();
          } else {
Maofei94's avatar
Maofei94 committed
97
            // Message.error(res.msg);
98 99
          }
        });
张烨's avatar
张烨 committed
100 101 102 103 104 105 106 107 108 109 110
      })
      .catch(res => {
        const { errorFields, values } = res;
        console.log(errorFields, values);
      });
  };

  const handleGetForm = form => {
    formEntity.current = form;
  };

111 112 113 114 115 116 117 118 119 120 121
  const handleFileChange = e => {
    console.log(e.target.files);
    setFile(e.target.files[0]);
    setFileSuccess(true);
  };

  const handleUpload = () => {
    fileEntity.current.click();
  };

  const init = () => {
Maofei94's avatar
Maofei94 committed
122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
    // getApkNameAndDate({})
    //   .then(res => {
    //     const message = res.ResultMessage || '';
    //     const [fileName = '', updateTime] = message.split(',');
    //     setFileData({
    //       fileName,
    //       updateTime,
    //     });
    //     setLoading(false);
    //     // const index = fileName.lastIndexOf('.');
    //     // axios
    //     //   .get(`${JSON_BASE}${fileName.slice(0, index)}.json`, {})
    //     //   .then(res => {
    //     //     console.log(res);
    //     //   });
    //   })
    //   .catch(err => {
    //     Message.error(err);
    //     setLoading(false);
    //   });
142 143 144 145
  };

  useEffect(() => {
    init();
张烨's avatar
张烨 committed
146
  }, []);
Maofei94's avatar
Maofei94 committed
147
  useEffect(() => {
Maofei94's avatar
Maofei94 committed
148
    const hurl = window.location.origin;
Maofei94's avatar
Maofei94 committed
149 150 151
    getMobileFiles({ client: clientName }).then(res => {
      if (res.code === 0) {
        const { data } = res;
152
        let fileName = data.apkPath.split('\\')[data.apkPath.split('\\').length - 1] || '';
Maofei94's avatar
Maofei94 committed
153
        let apkUrl = `${hurl}/${data.apkPath.replace(/\\/g, '/')}` || '';
Maofei94's avatar
Maofei94 committed
154 155 156
        setFileData({
          ...data,
          fileName,
Maofei94's avatar
Maofei94 committed
157
          apkUrl,
Maofei94's avatar
Maofei94 committed
158 159 160 161
        });
      }
    });
  }, [upFlag]);
张烨's avatar
张烨 committed
162 163 164 165 166
  return (
    <div className={loading ? styles.loadingContainer : styles.VersionPublish}>
      {loading ? (
        <Spin />
      ) : (
167
        <>
Maofei94's avatar
Maofei94 committed
168
          <div className={styles.apkbox}>
张烨's avatar
张烨 committed
169
            <p className={styles.title}>apk版本管理:</p>
170 171
            <div className={styles.row}>
              <div className={styles.label}>当前包名:</div>
172
              <div className="value">{fileData.fileName || '未找到对应的包名'}</div>
张烨's avatar
张烨 committed
173
            </div>
174 175 176
            <div className={styles.row}>
              <div className={styles.label}>更新时间:</div>
              <div className="value">{fileData.updateTime}</div>
张烨's avatar
张烨 committed
177
            </div>
178 179 180
            <div className={styles.row}>
              <div className={styles.label}>下载地址:</div>
              <div className="value">
Maofei94's avatar
Maofei94 committed
181 182
                <a href={fileData.apkUrl} target="_blank">
                  {fileData.apkUrl}
183 184
                </a>
              </div>
张烨's avatar
张烨 committed
185
            </div>
186 187
            <div className={styles.row}>
              <div className={styles.label}>更新描述:</div>
Maofei94's avatar
Maofei94 committed
188
              <div className="value">{fileData.description}</div>
189 190 191 192
            </div>
            <div className={styles.row}>
              <div className={styles.label}>强制更新:</div>
              <div className="value">
Maofei94's avatar
Maofei94 committed
193
                <Switch checked={fileData.isRefresh} disabled />
194
              </div>
张烨's avatar
张烨 committed
195
            </div>
张烨's avatar
张烨 committed
196
            <Button
Maofei94's avatar
Maofei94 committed
197
              style={{ marginLeft: '115px', marginTop: '20px' }}
张烨's avatar
张烨 committed
198 199 200
              type="primary"
              onClick={() => setShowModal(true)}
            >
201 202
              更新
            </Button>
张烨's avatar
张烨 committed
203
          </div>
204
        </>
张烨's avatar
张烨 committed
205 206 207 208 209
      )}
      {showModal && (
        <Modal
          visible={showModal}
          closable={false}
Maofei94's avatar
Maofei94 committed
210
          maskClosable={false}
张烨's avatar
张烨 committed
211 212
          onCancel={() => setShowModal(false)}
          onOk={submitForm}
Maofei94's avatar
Maofei94 committed
213
          confirmLoading={progress}
张烨's avatar
张烨 committed
214
        >
Maofei94's avatar
Maofei94 committed
215 216 217
          <Spin spinning={progress} tip="loading...">
            <BaseForm items={items} getForm={handleGetForm} />
            <div className={styles.row}>
218
              <div className={`${styles.label2} ${styles.required}`}>apk文件:</div>
Maofei94's avatar
Maofei94 committed
219 220 221 222 223 224 225 226 227 228 229
              <input
                ref={f => {
                  fileEntity.current = f;
                }}
                className={styles['file-item']}
                type="file"
                onChange={handleFileChange}
              />
              <Button type="primary" onClick={handleUpload}>
                {fileSuccess ? '上传成功' : '开始上传'}
              </Button>
230
            </div>
Maofei94's avatar
Maofei94 committed
231
          </Spin>
张烨's avatar
张烨 committed
232 233 234 235 236
        </Modal>
      )}
    </div>
  );
};