form-driver 0.2.4 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-driver",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "An efficient framework for creating forms.",
   "license": "MIT",
   "authors": [
@@ -14,7 +14,7 @@
     "b": "npm run clean && npm run build",
     "i": "yarn",
     "ri": "rm -rf node_modules && npm run i",
-    "pub": "git pull && git add . && git commit -m 'update' & npm run b && npm version patch && npm publish && git push",
+    "pub": "npm run b && git pull && git add . && git commit -m 'update' && npm version patch && npm publish && git push",
     "patch": "npm version patch && npm publish && git push",
     "submodule": "git submodule update --init",
     "ut-pull": "cd ./demo/src/ut_autoTest/ut_case && git pull",
@@ -56,6 +56,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
     "@babel/runtime": "^7.9.2",
+    "ali-oss": "^6.17.1",
     "lodash": "^4.17.20",
     "antd": "4.18.7",
     "antd-mobile": "^2.3.4",

package/src/framework/Init.tsx

@@ -51,7 +51,10 @@ import { AKvSet } from '../ui/editor/basic/AKvSet';
 import { ACascadePicker } from '../ui/editor/basic/ACascadePicker';
 import { MCascadeType } from '../types/MCascadeType';
 import editorMap from './editorMap';
+import OssUpload from "../plugins/ossUpload/index";
 
+// 在 m3 中注册oss上传插件
+assembly.addType(OssUpload);
 
 let init = false;
 /**

package/src/plugins/ossUpload/OssUpload.jsx

@@ -0,0 +1,276 @@
+import React from "react";
+import OSS from 'ali-oss';
+import { Upload, Row, Col, Button, Tooltip, Modal, List, Progress, Divider, message } from 'antd';
+import { CloseOutlined, CaretRightOutlined } from '@ant-design/icons';
+import { Ajax, Viewer } from "../../index";
+import './index.less';
+
+
+class OssUpload extends Viewer {
+  constructor(p) {
+    super(p);
+    this.state = {
+      isBeforeUploadExecuted: false,
+      fileListStatus: [],
+      ossOption: {},
+      attachmentVisible: false,
+      loading: false,
+      keyPath: '',
+      resList: (super.getValue() || []).map((item, index) => {
+        if (!item.uid) item.uid = index
+        return item
+      })
+    }
+    this.options = Object.assign({
+      changeHandle: () => { },
+      resFormat: res => res,
+      srcFormat: src => src,
+      multipartUploadConf: {
+        parallel: 3,
+        partSize: 1024 * 1024 * 2,
+        timeout: 30000,
+      }
+    }, p.schema.props)
+  }
+
+  changeFileList = (list) => {
+    console.log('changeFileList', list)
+    this.setState({
+      resList: list
+    })
+    super.changeValue(list)
+  }
+
+  componentDidMount() {
+    const { oss_upload_token } = this.options
+    if (oss_upload_token) {
+      const createOss = () => {
+        if (oss_upload_token) {
+          // 该接口需要返回 OSS 的实例化配置信息
+          Ajax.get(oss_upload_token.url, oss_upload_token.params).then(({ data }) => {
+            console.log('oss_upload_token', data)
+            this.setState({ keyPath: data.keyPath })
+            this._client = new OSS({
+              ...data,
+              stsToken: data.securityToken
+            })
+          })
+        }
+      };
+      createOss();
+      // 保持 oss 连接
+      this._timer = window.setInterval(createOss, 55 * 60 * 1000);
+    }
+  }
+
+  cancleUpload = () => {
+    if (this._client) this._client.cancel();
+    this.setState({ loading: false });
+  }
+
+  componentWillUnmount() {
+    window.clearInterval(this._timer);
+    // 关闭页面的时候取消上传
+    this.cancleUpload();
+    this._client = null
+  }
+
+  onRemove = (file) => {
+    const list = this.state.resList?.filter(i => file.uid !== i.uid)
+    this.changeFileList(list)
+  }
+
+  // 自动断点续传
+  upload = (name, file, config) => {
+    const { multipartUploadConf } = this.options
+    const { fileListStatus, resList } = this.state
+    return this._client.multipartUpload(name, file, config)
+      .then(res => {
+        console.log('this._client.multipartUpload: result:', res)
+        // 单个上传成功, 记录了到结果
+        this.changeFileList([...resList, {
+          uid: file.uid,
+          name: file.name,
+          keyPath: res.name
+        }]);
+      })
+      .catch(async e => {
+        if (e && e.name && e.name === 'cancel') {
+          return
+        } else {
+          const current = fileListStatus.find(item => item.file.uid === file.uid)
+          if (current.count <= 100) {
+            this.setState({
+              fileListStatus: fileListStatus.map(item => {
+                if (item.file.uid === file.uid) {
+                  item.count = item.count + 1;
+                }
+                return item
+              })
+            })
+            // 自动续传
+            this.upload(name, file, {
+              progress: (p, checkpoint) => this.progress(p, checkpoint, file),
+              checkpoint: current.checkpoint,
+              ...multipartUploadConf
+            })
+          } else {
+            this.setState({
+              fileListStatus: fileListStatus.map(item => {
+                if (item.file.uid === file.uid) {
+                  item.breakName = name;
+                  item.breakFile = file;
+                  item.status = 'exception';
+                }
+                return item
+              })
+            })
+          }
+        }
+      });
+  }
+
+  // 进度条
+  progress = (p, checkpoint, file) => {
+    const { fileListStatus } = this.state
+    this.setState({
+      fileListStatus: fileListStatus.map(item => {
+        if (item.file.uid === file.uid) {
+          item.percent = Math.floor(p * 100)
+          item.checkpoint = checkpoint
+        }
+        return item
+      })
+    })
+    return function (done) {
+      done();
+    };
+  }
+
+  element() {
+    const { multiple = false, accept = '', multipartUploadConf, maxSize, maxAmount } = this.options
+    const { loading, fileListStatus, keyPath, attachmentVisible, resList } = this.state
+
+    // 上传配置
+    const uploadProps = {
+      multiple,
+      accept,
+      onRemove: this.onRemove,
+      customRequest: async ({ file }) => {
+        // 一个个上传的
+        console.log('customRequest->fileList：', file)
+        this.setState({ loading: true });
+        await this.upload(`${keyPath}/${file.name}`, file, {
+          progress: (p, checkpoint) => this.progress(p, checkpoint, file),
+          ...multipartUploadConf
+        })
+        this.setState({ loading: false });
+      },
+      beforeUpload: (file, fileList) => {
+        // 这里可以拿到上传的所有文件
+        console.log('beforeUpload->fileList：', file, fileList)
+        if (fileList.length >= maxAmount) {
+          message.error(`已达到文件数量上限(${maxAmount}个)，请删除后上传`);
+          return false
+        }
+        if (file.size > maxSize * 1024 * 1024) {
+          message.error(`文件大小超过${maxSize}MB，请压缩后上传`);
+          return false
+        }
+        this.setState({
+          fileList,
+          fileListStatus: fileList.map(item => ({ file: item, count: 1, percent: 0 })),
+          attachmentVisible: true,
+        })
+      }
+    };
+
+    return (
+      <div>
+        <Upload disabled={loading} {...uploadProps} fileList={resList}>
+          <Button disabled={loading} loading={loading}>点击上传</Button>
+        </Upload>
+        {/* 上传弹窗 */}
+        <div
+          className={'m3-plugin-ossupload-progress-modal'}
+          style={{ visibility: attachmentVisible ? 'visible' : 'hidden', zIndex: 999 }}
+        >
+          <Row>
+            <Col span={20}>附件上传</Col>
+            <Col span={4} className={'cancel-icon'}>
+              <CloseOutlined onClick={() => {
+                if (this._client && loading) {
+                  Modal.confirm({
+                    content: '有文件正在上传中，关闭此窗口将中断文件上传！',
+                    onText: '关闭',
+                    maskClosable: false,
+                    onOk: () => {
+                      this.cancleUpload()
+                      this.setState({
+                        fileList: [],
+                        fileListStatus: [],
+                        attachmentVisible: false
+                      })
+                    }
+                  })
+                } else {
+                  this.setState({
+                    fileList: [],
+                    fileListStatus: [],
+                    attachmentVisible: false
+                  })
+                }
+              }} />
+            </Col>
+          </Row>
+          <Divider className={'divider'} />
+          <div className={'progress-list'}>{
+            fileListStatus && fileListStatus.length > 0 ?
+              <List
+                dataSource={fileListStatus}
+                renderItem={item => {
+                  return <div className={'upload-progress-box'}>
+                    <div style={{ width: '110px' }}>
+                      <Tooltip title={item.file.name}>
+                        <span className={'file-name'}>{item.file.name}</span>
+                      </Tooltip>
+                    </div>
+                    <div style={{ width: '230px', paddingLeft: '20px' }}>
+                      <Progress
+                        percent={item?.percent}
+                        status={item?.status || ''}
+                      />
+                    </div>
+                    <span
+                      style={{
+                        width: '5px',
+                        visibility: item.status === 'exception' ? 'visible' : 'hidden',
+                        pointerEvents: item.status === 'exception' ? 'auto' : 'none',
+                      }}
+                      className='link-text'
+                      onClick={() => {
+                        if (item?.status === 'exception') {
+                          item.status = ''
+                          this.upload(item.breakName, item.breakFile, {
+                            progress: (p, checkpoint) => this.progress(p, checkpoint, item.file),
+                            checkpoint: item.checkpoint,
+                            ...multipartUploadConf
+                          })
+                        }
+                      }}
+                    >
+                      {
+                        attachmentVisible && item.status === 'exception' && item.percent < 100 ? <CaretRightOutlined style={{ color: 'black', marginTop: '5px' }} /> : ' '
+                      }
+                    </span>
+                  </div>
+                }}
+              /> : <div className={'none'}>暂无数据</div>
+          }</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default OssUpload

package/src/plugins/ossUpload/OssUploadType.tsx

@@ -0,0 +1,27 @@
+import { Assembly, Validator,EmtpyType, MType, MFieldSchemaAnonymity } from "../../index";
+import _ from "lodash";
+
+const { validateRequired, validateStringMinMax, generateRegexValidate } = Validator
+
+const OssUploadType: MType = _.assign({}, EmtpyType, {
+  validators: [validateRequired, generateRegexValidate(/[^\s]|(^$)/, "不能全都填空格"), validateStringMinMax],
+
+  createDefaultValue: (assembly:Assembly, s:MFieldSchemaAnonymity):any =>{
+    return s.defaultValue ?? "";
+  },
+
+  toReadable: (assembly:Assembly, s:MFieldSchemaAnonymity, vs:any):string => {
+    if(_.isNil(vs)){
+      return assembly.theme.READABLE_BLANK;
+    }
+
+    if(!_.isString(vs)){
+      return assembly.theme.READABLE_INVALID;
+    }
+
+    return vs;
+  },
+
+});
+
+export default OssUploadType

package/src/plugins/ossUpload/OssUploadViewer.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { BaseViewer } from "../../index";
+
+class OssUploadViewer extends BaseViewer {
+  [x: string]: any;
+  element() {
+    const arr = this.getValue() || []
+    return <div>
+      {
+        arr.map(i => {
+          return <div key={i.uid}><a target='_blank' href={i.url}>{i.name}</a></div>
+        })
+      }
+    </div>
+  }
+}
+
+export default OssUploadViewer

package/src/plugins/ossUpload/index.less

@@ -0,0 +1,53 @@
+.m3-plugin-ossupload-progress-modal {
+    display: block;
+    position: fixed;
+    right: 30px;
+    bottom: 30px;
+    width: 400px;
+    padding: 14px 24px 24px 24px;
+    border-radius: 5px;
+    background-color: #fff;
+    box-shadow: 2px 2px 24px 2px rgba(0, 0, 0, 0.1);
+
+    .cancel-icon {
+        text-align: right;
+    }
+
+    .divider {
+        width: calc(100% + 48px);
+        margin: 4px -24px 12px -24px
+    }
+
+    .link-text {
+        color: #1890ff;
+        cursor: pointer;
+        transition: color 0.3s;
+        pointer-events: auto;
+      }
+      
+    .progress-list {
+        min-height: 30px;
+        max-height: 400px;
+        overflow-y: scroll;
+
+        .upload-progress-box {
+            display: flex;
+
+            .file-name {
+                cursor: default;
+                width: 110px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                display: inline-block;
+            }
+        }
+
+        .none {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            line-height: 30px;
+        }
+    }
+}

package/src/plugins/ossUpload/index.ts

@@ -0,0 +1,10 @@
+import OssUpload from './OssUpload.jsx';
+import OssUploadType from './OssUploadType';
+import OssUploadViewer from './OssUploadViewer';
+
+export default {
+  name: 'ossupload',
+  type: OssUploadType,
+  editor: OssUpload,
+  readable: OssUploadViewer
+}

package/types/plugins/ossUpload/OssUploadType.d.ts

@@ -0,0 +1,3 @@
+import { MType } from "../../index";
+declare const OssUploadType: MType;
+export default OssUploadType;

package/types/plugins/ossUpload/OssUploadViewer.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseViewer } from "../../index";
+declare class OssUploadViewer extends BaseViewer {
+    [x: string]: any;
+    element(): JSX.Element;
+}
+export default OssUploadViewer;

package/types/plugins/ossUpload/index.d.ts

@@ -0,0 +1,8 @@
+import OssUploadViewer from './OssUploadViewer';
+declare const _default: {
+    name: string;
+    type: import("../../index.js").MType;
+    editor: any;
+    readable: typeof OssUploadViewer;
+};
+export default _default;