@ecoding/components.antd 0.3.2 → 0.3.4

package/lib/core/date.picker/index.d.ts

@@ -1,10 +1,13 @@
 import React from "react";
+import dayjs from "dayjs";
 import { RangePickerProps } from "antd/es/date-picker";
 declare type IProps = RangePickerProps & {
     value?: string | number;
     disabledDate?: (current: any) => RangePickerProps['disabledDate'];
     onChange?: any;
     showTime?: boolean;
+    startOf?: dayjs.OpUnitType | undefined;
+    endOf?: dayjs.OpUnitType | undefined;
     className?: string;
     style?: React.CSSProperties;
     disabled?: boolean;

package/lib/core/date.picker/index.js

@@ -10,11 +10,18 @@ const Picker = (props) => {
     const change = (v) => {
         let value;
         setDates(v);
+        let dayjsV = dayjs(v);
+        if (!props.showTime && props.endOf) {
+            dayjsV = dayjsV.endOf(props.endOf);
+        }
+        if (!props.showTime && props.startOf) {
+            dayjsV = dayjsV.startOf(props.startOf);
+        }
         if (props.format) {
-            value = dayjs(v).format(props.format || "YYYY-MM-DD HH:mm:ss");
+            value = dayjsV.format(props.format || "YYYY-MM-DD HH:mm:ss");
         }
         else {
-            value = dayjs(v).valueOf();
+            value = dayjsV.valueOf();
         }
         props.onChange && props.onChange(value);
     };
@@ -36,5 +43,7 @@ const Picker = (props) => {
     }, [props.value]);
     return (React.createElement(DatePicker, { value: date, className: props.className || undefined, style: Object.assign({}, { width: "100%" }, props.style) || undefined, showTime: props.showTime ? { defaultValue: dayjs("00:00:00", "HH:mm:ss") } : undefined, disabledDate: props.disabledDate || undefined, disabled: props.disabled || undefined, onChange: change }));
 };
-Picker.defaultProps = {};
+Picker.defaultProps = {
+    endOf: "D"
+};
 export default Picker;

package/lib/core/form.label.attachment/index.d.ts

@@ -8,6 +8,7 @@ interface IProps {
     value?: IRes | IRes[];
     empty?: React.ReactNode;
     i18n?: any;
+    batchDownload?: string | (() => void);
     format?: {
         [props: string]: any;
     };

package/lib/core/form.label.attachment/index.js

@@ -3,8 +3,10 @@ import { isSomething } from '@ecoding/helper.is';
 import { LinkOutlined, CloudDownloadOutlined, EyeOutlined } from '@ant-design/icons';
 import { Typography, Popover, Tag, Checkbox, Space } from 'antd';
 import { jsonFormatNewKey } from "@ecoding/helper.json";
-const InfosRender = ({ infos, i18n, format }) => {
+import http from "../../helpers/http";
+const InfosRender = ({ infos, i18n, format, batchDownload }) => {
     const [checkedList, setCheckedList] = useState([]);
+    const r = http.getRequest();
     const style = {
         display: 'flex',
         justifyContent: 'space-between',
@@ -12,21 +14,40 @@ const InfosRender = ({ infos, i18n, format }) => {
     };
     const checkAll = infos.length === checkedList.length;
     const indeterminate = checkedList.length > 0 && checkedList.length < infos.length;
-    function downloadFile(url) {
-        //下载文件
-        let a = document.createElement("a");
-        a.setAttribute("href", url);
-        a.setAttribute("download", "");
-        a.setAttribute("target", "_blank");
-        const evt = new MouseEvent("click", {
-            bubbles: true,
-            cancelable: true,
-            view: window,
+    const downloadFile = (url, name) => {
+        r.get(url, {}, {
+            responseType: 'blob',
+            original: true
+        }).then((res) => {
+            /**
+             * blob下载思路
+             * 1） 使用ajax发起请求，指定接收类型为blob（responseType: 'blob'）
+             * 2）读取请求返回的头部信息里的content-disposition，返回的文件名就在这里面（或者自定义文件名，可跳过此步骤）
+             * 3）使用URL.createObjectURL将请求的blob数据转为可下载的url地址
+             * 4）使用a标签下载
+             *
+             */
+            let blob = res.data;
+            // 从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
+            // let patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
+            // let contentDisposition = decodeURI(res.headers['content-disposition'])
+            // let result = patt.exec(contentDisposition)
+            // let fileName = result[1]
+            //将请求的blob数据转为可下载的url地址
+            let url = URL.createObjectURL(blob);
+            // 创建一个下载标签<a>
+            const aLink = document.createElement('a');
+            aLink.href = url;
+            // 2.直接使用自定义文件名,设置下载文件名称
+            aLink.setAttribute('download', name || "");
+            document.body.appendChild(aLink);
+            // 模拟点击下载
+            aLink.click();
+            // 移除改下载标签
+            document.body.removeChild(aLink);
+            window.URL.revokeObjectURL(url);
         });
-        // let clickEvent = document.createEvent("MouseEvents");
-        // clickEvent.initEvent("click", true, true);
-        a.dispatchEvent(evt);
-    }
+    };
     const checkChange = (keys) => {
         setCheckedList(keys);
     };
@@ -39,8 +60,20 @@ const InfosRender = ({ infos, i18n, format }) => {
         }
     };
     const downLoadAll = () => {
+        if (typeof batchDownload === "string") {
+            downloadFile(batchDownload);
+            return;
+        }
+        if (typeof batchDownload === "function") {
+            batchDownload();
+            return;
+        }
+        const temp = [];
         checkedList.forEach(key => {
-            downloadFile(key);
+            temp.push(infos.find(info => info.url === key));
+        });
+        temp.forEach(info => {
+            downloadFile(info.url, info.name);
         });
     };
     return (React.createElement("ul", { style: { width: 300, overflow: "hidden" } },
@@ -56,7 +89,7 @@ const InfosRender = ({ infos, i18n, format }) => {
                         React.createElement(LinkOutlined, null),
                         " ",
                         info.name)),
-                    React.createElement(Typography.Link, { download: info.name, title: info.name, href: info.url, target: "_blank" },
+                    React.createElement(Typography.Link, { download: info.name, title: info.name, onClick: () => downloadFile(info.url, info.name) },
                         React.createElement(CloudDownloadOutlined, null))),
                 info.time || info.user ? (React.createElement("div", { style: style },
                     React.createElement(Typography.Text, { type: "secondary", style: { fontSize: 12 } }, info.time),
@@ -67,12 +100,12 @@ const InfosRender = ({ infos, i18n, format }) => {
                 React.createElement(Checkbox, { indeterminate: indeterminate, onChange: onCheckAllChange, checked: checkAll }, i18n ? i18n.$t('global.checkbox.all', '全选') : '全选'),
                 React.createElement(Typography.Link, { disabled: checkedList.length === 0, onClick: () => downLoadAll() }, i18n ? i18n.$t('global.batch.download', '批量下载') : '批量下载')))) : null));
 };
-const C = ({ value, empty, render, i18n, format }) => {
+const C = ({ value, empty, render, i18n, batchDownload, format }) => {
     if (!isSomething(value) || (Array.isArray(value) && value.length === 0)) {
         return React.createElement(React.Fragment, null, empty || '-');
     }
     if (Array.isArray(value)) {
-        return (React.createElement(Popover, { destroyTooltipOnHide: true, placement: "right", trigger: "hover", title: "Uploaded", content: render ? render(value) : React.createElement(InfosRender, { format: format, i18n: i18n, infos: value }) },
+        return (React.createElement(Popover, { destroyTooltipOnHide: true, placement: "right", trigger: "hover", title: "Uploaded", content: render ? render(value) : React.createElement(InfosRender, { batchDownload: batchDownload, format: format, i18n: i18n, infos: value }) },
             React.createElement(Tag, { icon: React.createElement(EyeOutlined, null), color: "processing" }, i18n ? i18n.$t('global.attachment', '附件') : '附件')));
     }
     if (typeof value === 'string') {

package/lib/core/range-picker/index.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import dayjs from "dayjs";
 import type { Dayjs } from "dayjs";
 declare type RangeValue = [Dayjs | null, Dayjs | null] | null;
 interface IProps {
@@ -10,6 +11,8 @@ interface IProps {
     style?: React.CSSProperties;
     disabled?: boolean;
     format?: string;
+    startOf?: dayjs.OpUnitType | undefined;
+    endOf?: dayjs.OpUnitType | undefined;
 }
 declare const Picker: React.FC<IProps>;
 export default Picker;

package/lib/core/range-picker/index.js

@@ -19,11 +19,19 @@ const Picker = (props) => {
         }
         let value;
         setDates(v);
+        let dayjsStart = dayjs(v[0]);
+        let dayjsEnd = dayjs(v[1]);
+        if (!props.showTime && props.startOf) {
+            dayjsStart = dayjsStart.startOf(props.startOf);
+        }
+        if (!props.showTime && props.endOf) {
+            dayjsEnd = dayjsEnd.endOf(props.endOf);
+        }
         if (props.format) { // "YYYY-MM-DD HH:mm:ss"
-            value = [dayjs(v[0]).format(props.format), dayjs(v[1]).format(props.format)];
+            value = [dayjsStart.format(props.format), dayjsEnd.format(props.format)];
         }
         else {
-            value = [dayjs(v[0]).valueOf(), dayjs(v[1]).valueOf()];
+            value = [dayjsStart.valueOf(), dayjsEnd.valueOf()];
         }
         props.onChange && props.onChange(value);
     };
@@ -55,6 +63,8 @@ const Picker = (props) => {
         } : undefined, onCalendarChange: (val) => setDates(val), disabledDate: props.rangeDay ? disabledDate : undefined, disabled: props.disabled || undefined, onChange: change }));
 };
 Picker.defaultProps = {
-    rangeDay: undefined
+    rangeDay: undefined,
+    startOf: "D",
+    endOf: "D"
 };
 export default Picker;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.3.2",
+    "version": "0.3.4",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -43,5 +43,5 @@
         "antd": "^5.8.4",
         "axios": "^1.1.2"
     },
-    "gitHead": "df2c86e4f36ca6c46366bcece0d4097e9bff4da2"
+    "gitHead": "c705fec6ca36ac140554d015ea65727f6b510abd"
 }