feffery_antd_components 0.1.7 → 0.1.8

package/src/lib/components/AntdDraggerUpload.react.js

@@ -30,6 +30,7 @@ const AntdDraggerUpload = (props) => {
         multiple,
         directory,
         failedTooltipInfo,
+        listUploadTaskRecord,
         loading_state,
         setProps
     } = props;
@@ -37,7 +38,6 @@ const AntdDraggerUpload = (props) => {
     uploadId = uploadId || uuid;
 
     const [fileList, updateFileList] = useState([]);
-    const [lastFileError, updateLastFileError] = useState(false);
 
     let uploadProps = {
         name: 'file',
@@ -55,86 +55,159 @@ const AntdDraggerUpload = (props) => {
                 if (fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) === -1) {
                     message.error(`上传失败，${file.name} 文件格式不符合要求！`);
                 }
-                updateLastFileError(!sizeCheck || fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) === -1)
+
                 return sizeCheck && fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) !== -1;
             }
 
-            updateLastFileError(!sizeCheck)
             return sizeCheck;
         },
         onChange(info) {
 
-            if (info.file.status === 'done') {
+            // 计算最近一次任务的子任务数量
+            let lastTaskCount
+            if (info.file.status === 'removed') {
+                lastTaskCount = 0
+            } else {
+                lastTaskCount = info.fileList.length - listUploadTaskRecord.length;
+            }
 
-                // 检查是否为多文件上传模式
-                if (multiple || directory) {
-                    // 检查上传列表中是否全部文件都已完成上传
-                    if (info.fileList.every(file => file.status === 'done')) {
-                        console.log(info.fileList)
-                        // 更新任务记录
-                        setProps({
-                            lastUploadTaskRecord: info.fileList.map(
-                                (file) => {
-                                    return {
-                                        fileName: file.name,
-                                        fileSize: file.size,
-                                        completeTimestamp: new Date().getTime(),
-                                        taskStatus: 'success',
-                                        taskId: uploadId
-                                    }
+            // 当上传模式为multiple或directory时
+            if (multiple || directory) {
+                // 若当前事件为removed
+                if (info.file.status === 'removed') {
+
+                    // 更新任务记录
+                    setProps({
+                        listUploadTaskRecord: info.fileList.map(
+                            (file) => {
+                                return {
+                                    fileName: file.name,
+                                    fileSize: file.size,
+                                    completeTimestamp: new Date().getTime(),
+                                    taskStatus: file.status === 'done' ? 'success' : 'failed',
+                                    taskId: uploadId
                                 }
-                            )
-                        })
-                    }
+                            }
+                        )
+                    })
                 } else {
+                    // 其他常规事件
+                    // 判断此次任务所有文件是否已上传结束（done或error）
+                    if (info.fileList.slice(-lastTaskCount).every(file => file.status !== 'uploading')) {
+
+                        if (info.fileList.slice(-lastTaskCount).every(file => !file.status)) {
+
+                        } else {
+                            if (lastTaskCount > 0) {
+
+                                // 更新任务记录
+                                setProps({
+                                    lastUploadTaskRecord: info.fileList.slice(-lastTaskCount).map(
+                                        (file) => {
+                                            return {
+                                                fileName: file.name,
+                                                fileSize: file.size,
+                                                completeTimestamp: new Date().getTime(),
+                                                taskStatus: file.status === 'done' ? 'success' : 'failed',
+                                                taskId: uploadId
+                                            }
+                                        }
+                                    ),
+                                    listUploadTaskRecord: info.fileList.map(
+                                        (file) => {
+                                            return {
+                                                fileName: file.name,
+                                                fileSize: file.size,
+                                                completeTimestamp: new Date().getTime(),
+                                                taskStatus: file.status === 'done' ? 'success' : 'failed',
+                                                taskId: uploadId
+                                            }
+                                        }
+                                    )
+                                })
+                            }
+                        }
+
+                    }
+
+                }
+
+            } else {
+                // 单文件上传模式
+                // 若当前事件为removed
+                if (info.file.status === 'removed') {
+
                     // 更新任务记录
+                    setProps({
+                        listUploadTaskRecord: info.fileList.map(
+                            (file) => {
+                                return {
+                                    fileName: file.name,
+                                    fileSize: file.size,
+                                    completeTimestamp: new Date().getTime(),
+                                    taskStatus: file.status === 'done' ? 'success' : 'failed',
+                                    taskId: uploadId
+                                }
+                            }
+                        )
+                    })
+                } else if (info.file.status === 'done' || info.file.status === 'error' || !info.file.status) {
                     setProps({
                         lastUploadTaskRecord: {
                             fileName: info.file.name,
                             fileSize: info.file.size,
                             completeTimestamp: new Date().getTime(),
-                            taskStatus: 'success',
+                            taskStatus: info.file.status === 'done' ? 'success' : 'failed',
                             taskId: uploadId
-                        }
+                        },
+                        listUploadTaskRecord: info.fileList.map(
+                            (file) => {
+                                return {
+                                    fileName: file.name,
+                                    fileSize: file.size,
+                                    completeTimestamp: new Date().getTime(),
+                                    taskStatus: file.status === 'done' ? 'success' : 'failed',
+                                    taskId: uploadId
+                                }
+                            }
+                        )
                     })
                 }
+            }
+
+            if (info.file.status === 'done') {
                 message.success(`${info.file.name} 上传成功！`);
             } else if (info.file.status === 'error') {
-
-                // 更新任务记录
-                setProps({
-                    lastUploadTaskRecord: {
-                        fileName: info.file.name,
-                        fileSize: info.file.size,
-                        completeTimestamp: new Date().getTime(),
-                        taskStatus: 'failed'
-                    }
-                })
                 message.error(`${info.file.name} 上传失败！`);
             }
 
-            if (lastFileError && info.fileList.length !== 0) {
-                info.fileList[info.fileList.length - 1].status = 'error'
 
-                updateLastFileError(false)
+            // 获取当前上传文件列表
+            let _fileList = [...info.fileList];
+
+            // 是否限制上传记录列表最大数量
+            if (fileListMaxLength) {
+                _fileList = _fileList.slice(-fileListMaxLength);
             }
 
-            info.fileList = info.fileList.map(
-                item => {
-                    if (item.status === 'error') {
-                        item.response = failedTooltipInfo ? failedTooltipInfo : '上传失败'
-                    }
-                    return item
-                }
-            )
+            if (lastTaskCount !== 0) {
+                _fileList = _fileList.slice(0, _fileList.length - lastTaskCount)
+                    .concat(
+                        _fileList.slice(-lastTaskCount).map(
+                            item => {
+                                if (item.status === 'error' || !item.status) {
 
-            // 基于fileListMaxLength参数设置，对fileList状态进行更新
-            if (fileListMaxLength) {
-                updateFileList(info.fileList.slice(-fileListMaxLength))
-            } else {
-                updateFileList(info.fileList)
+                                    item.status = 'error'
+                                    item.response = failedTooltipInfo ? failedTooltipInfo : '上传失败'
+                                }
+                                return item
+                            }
+                        )
+                    )
             }
-        },
+
+            updateFileList(_fileList)
+        }
     };
 
     // 添加accept参数
@@ -151,6 +224,7 @@ const AntdDraggerUpload = (props) => {
                 style={style}>
                 <Dragger
                     fileList={fileList}
+                    showUploadList={showUploadList}
                     multiple={multiple}
                     directory={directory}
                     data-dash-is-loading={
@@ -218,23 +292,88 @@ AntdDraggerUpload.propTypes = {
     showUploadList: PropTypes.bool,
 
     // 用于在每次文件上传动作完成后，记录相关的信息
-    lastUploadTaskRecord: PropTypes.exact({
-        // 记录文件名称
-        fileName: PropTypes.string,
+    lastUploadTaskRecord: PropTypes.oneOfType([
+        // 单文件
+        PropTypes.exact({
+            // 记录文件名称
+            fileName: PropTypes.string,
 
-        // 记录文件大小
-        fileSize: PropTypes.number,
+            // 记录文件大小
+            fileSize: PropTypes.number,
 
-        // 记录完成时间戳信息
-        completeTimestamp: PropTypes.number,
+            // 记录完成时间戳信息
+            completeTimestamp: PropTypes.number,
 
-        // 记录此次上传任务的状态信息，'success'表示成功，'failed'表示失败
-        taskStatus: PropTypes.string,
+            // 记录此次上传任务的状态信息，'success'表示成功，'failed'表示失败
+            taskStatus: PropTypes.string,
 
-        // 记录本次任务的id信息，若最近一次任务状态为'failed'，则不会携带此信息
-        taskId: PropTypes.string
+            // 记录本次任务的id信息，若最近一次任务状态为'failed'，则不会携带此信息
+            taskId: PropTypes.string
 
-    }),
+        }),
+        // 文件夹或多文件上传
+        PropTypes.arrayOf(
+            PropTypes.exact({
+                // 记录文件名称
+                fileName: PropTypes.string,
+
+                // 记录文件大小
+                fileSize: PropTypes.number,
+
+                // 记录完成时间戳信息
+                completeTimestamp: PropTypes.number,
+
+                // 记录此次上传任务的状态信息，'success'表示成功，'failed'表示失败
+                taskStatus: PropTypes.string,
+
+                // 记录本次任务的id信息，若最近一次任务状态为'failed'，则不会携带此信息
+                taskId: PropTypes.string
+
+            })
+        )
+    ]),
+
+    // 用于在每次的上传任务完成后，更新当前文件列表中全部文件的上传信息
+    listUploadTaskRecord: PropTypes.oneOfType([
+        // 单文件
+        PropTypes.exact({
+            // 记录文件名称
+            fileName: PropTypes.string,
+
+            // 记录文件大小
+            fileSize: PropTypes.number,
+
+            // 记录完成时间戳信息
+            completeTimestamp: PropTypes.number,
+
+            // 记录此次上传任务的状态信息，'success'表示成功，'failed'表示失败
+            taskStatus: PropTypes.string,
+
+            // 记录本次任务的id信息，若最近一次任务状态为'failed'，则不会携带此信息
+            taskId: PropTypes.string
+
+        }),
+        // 文件夹或多文件上传
+        PropTypes.arrayOf(
+            PropTypes.exact({
+                // 记录文件名称
+                fileName: PropTypes.string,
+
+                // 记录文件大小
+                fileSize: PropTypes.number,
+
+                // 记录完成时间戳信息
+                completeTimestamp: PropTypes.number,
+
+                // 记录此次上传任务的状态信息，'success'表示成功，'failed'表示失败
+                taskStatus: PropTypes.string,
+
+                // 记录本次任务的id信息，若最近一次任务状态为'failed'，则不会携带此信息
+                taskId: PropTypes.string
+
+            })
+        )
+    ]),
 
     loading_state: PropTypes.shape({
         /**
@@ -262,7 +401,8 @@ AntdDraggerUpload.propTypes = {
 AntdDraggerUpload.defaultProps = {
     fileListMaxLength: null,
     fileMaxSize: 500,
-    lastUploadTaskRecord: {},
+    lastUploadTaskRecord: null,
+    listUploadTaskRecord: [],
     locale: 'zh-cn'
 }
 

package/src/lib/components/AntdTable.react.js

@@ -319,6 +319,8 @@ export default class AntdTable extends Component {
             nClicksButton,
             summaryRowContents,
             summaryRowFixed,
+            customFormatFuncs,
+            conditionalStyleFuncs,
             loading_state
         } = this.props;
 
@@ -348,10 +350,11 @@ export default class AntdTable extends Component {
         for (let i in columns) {
 
             columns[i] = {
-                ...{ align: 'center' },
+                align: 'center',
                 ...columns[i],
                 ...{
-                    onCell: columns[i]?.conditionStyle ? eval(columns[i].conditionStyle) : columns[i]?.onCell
+                    onCell: conditionalStyleFuncs[columns[i].dataIndex] ?
+                        eval(conditionalStyleFuncs[columns[i].dataIndex]) : undefined
                 }
             }
         }
@@ -399,7 +402,9 @@ export default class AntdTable extends Component {
                                 ...columns[i],
                                 filters: filterOptions[columns[i].dataIndex].filterCustomItems
                                     .map(value => ({ text: value.toString(), value: value })),
-                                onFilter: (value, record) => record[columns[i].dataIndex] === value
+                                onFilter: (value, record) => record[columns[i].dataIndex] === value,
+                                filterMultiple: filterOptions[columns[i].dataIndex]?.filterMultiple,
+                                filterSearch: filterOptions[columns[i].dataIndex]?.filterSearch
                             }
                         } else {
                             columns[i] = {
@@ -407,7 +412,9 @@ export default class AntdTable extends Component {
                                 filters: Array.from(new Set(data.map(item => item[columns[i].dataIndex]))).map(
                                     value => ({ text: value.toString(), value: value })
                                 ).sort(compareNumeric),
-                                onFilter: (value, record) => record[columns[i].dataIndex] === value
+                                onFilter: (value, record) => record[columns[i].dataIndex] === value,
+                                filterMultiple: filterOptions[columns[i].dataIndex]?.filterMultiple,
+                                filterSearch: filterOptions[columns[i].dataIndex]?.filterSearch
                             }
                         }
                     }
@@ -496,7 +503,7 @@ export default class AntdTable extends Component {
                                 }
 
                             },
-                            multiple: sortOptions.sortDataIndexes.length - i,
+                            multiple: sortOptions['multiple'] === 'auto' ? 1 : sortOptions.sortDataIndexes.length - i,
                         }
                     } else { // 若非组合排序模式
                         columns[j]['sorter'] = (a, b) => {
@@ -753,6 +760,24 @@ export default class AntdTable extends Component {
             }
         }
 
+        // 配置字段渲染模式为custom-format的相关参数
+        for (let i = 0; i < columns.length; i++) {
+            // 当前字段具有renderOptions参数时且renderOptions参数是字典时
+            if (columns[i]['renderOptions']) {
+                if (columns[i]['renderOptions'].hasOwnProperty('renderType')) {
+                    // 当renderOptions参数的renderType值设置为custom-format时
+                    if (columns[i]['renderOptions']['renderType'] == 'custom-format') {
+                        // 若customFormatFuncs对应当前字段的属性值存在
+                        if (customFormatFuncs[columns[i]['dataIndex']]) {
+                            columns[i]['render'] = content => (
+                                eval(customFormatFuncs[columns[i]['dataIndex']])(content)
+                            )
+                        }
+                    }
+                }
+            }
+        }
+
         // 配置字段渲染模式对应迷你图模式的情况
         for (let i = 0; i < columns.length; i++) {
             // 当前字段具有renderOptions参数时且renderOptions参数是字典时
@@ -976,7 +1001,7 @@ AntdTable.propTypes = {
                 renderType: PropTypes.oneOf([
                     'link', 'ellipsis', 'mini-line', 'mini-bar', 'mini-progress',
                     'mini-ring-progress', 'mini-area', 'tags', 'button', 'copyable',
-                    'status-badge', 'image'
+                    'status-badge', 'image', 'custom-format'
                 ]),
 
                 // 当renderType='link'时，此参数会将传入的字符串作为渲染link的显示文字内容
@@ -1007,9 +1032,6 @@ AntdTable.propTypes = {
             // 自定义列像素宽度
             width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-            // 用于传入js函数字符串
-            conditionStyle: PropTypes.string,
-
             // 防止状态更新报错占位用，无实际意义
             ellipsis: PropTypes.any,
 
@@ -1098,10 +1120,10 @@ AntdTable.propTypes = {
     data: PropTypes.arrayOf(
         PropTypes.objectOf(
             PropTypes.oneOfType([
-                // 常规模式、ellipsis模式、copyable模式
+                // 常规模式、ellipsis模式、copyable模式、custom-format模式
                 PropTypes.string,
 
-                // 常规模式、ellipsis模式、mini-prorgess模式、mini-ring-progress模式、copyable模式
+                // 常规模式、ellipsis模式、mini-prorgess模式、mini-ring-progress模式、copyable模式、custom-format模式
                 // 其中mini-prorgess模式、mini-ring-progress模式输入值需在0~1之间
                 PropTypes.number,
 
@@ -1205,13 +1227,36 @@ AntdTable.propTypes = {
         // 定义要参与排序的字段对应的dataIndex，多字段组合排序情况下顺序即为优先级，从高往低
         sortDataIndexes: PropTypes.arrayOf(PropTypes.string),
 
-        // 设置是否进行多列组合排序
-        multiple: PropTypes.bool
+        // 设置是否进行多列组合排序，当设置为'auto'时会开启自动组合排序模式，此时组合排序的字段优先级由用户点击排序的字段顺序所动态决定
+        multiple: PropTypes.oneOfType([
+            PropTypes.bool,
+            PropTypes.oneOf(['auto'])
+        ])
 
     }),
 
     // 定义筛选参数
-    filterOptions: PropTypes.object,
+    filterOptions: PropTypes.objectOf(
+        PropTypes.exact({
+            // 设置筛选模式，可选的有'checkbox'、'keyword'，默认为'checkbox'
+            filterMode: PropTypes.oneOf(['checkbox', 'keyword']),
+
+            // 'checkbox'模式下可用，用于自定义待筛选项
+            filterCustomItems: PropTypes.oneOfType([
+                PropTypes.arrayOf([
+                    PropTypes.string,
+                    PropTypes.number
+                ]),
+                PropTypes.any
+            ]),
+
+            // 'checkbox'模式下可用，用于设置是否允许多选，默认为true
+            filterMultiple: PropTypes.bool,
+
+            // 'checkbox'模式下可用，用于设置是否开启搜索框，默认为false
+            filterSearch: PropTypes.bool
+        })
+    ),
 
     // 翻页相关参数，设置为false时不展示和进行分页
     pagination: PropTypes.oneOfType([
@@ -1326,6 +1371,17 @@ AntdTable.propTypes = {
     // 设置总结栏是否启用fixed功能，默认为false
     summaryRowFixed: PropTypes.bool,
 
+    // 针对custom-format自定义格式化对应的字段，设置针对对应列每个值从原始数值到格式化结果的js函数字符串
+    // 键名为对应字段的dataIndex
+    customFormatFuncs: PropTypes.objectOf(
+        PropTypes.string
+    ),
+
+    // 以对应字段的dataIndex为键，传入js函数字符串，用于自定义逻辑改变每个单元格的style样式
+    conditionalStyleFuncs: PropTypes.objectOf(
+        PropTypes.string
+    ),
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not
@@ -1364,5 +1420,6 @@ AntdTable.defaultProps = {
     mode: 'client-side',
     nClicksButton: 0,
     size: 'default',
-    locale: 'zh-cn'
+    locale: 'zh-cn',
+    conditionalStyleFuncs: {}
 }