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