feat: crud 导出csv支持自定义文件名

docs/zh-CN/components/crud.md

@@ -1881,7 +1881,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
 }
 ```
 
-### 通过 api 导出 CSV
+#### 通过 api 导出 CSV
 
 > 1.4.0 及以上版本
 
@@ -1932,6 +1932,61 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
 }
 ```
 
+#### 自定义导出 CSV 的文件名
+
+> 1.4.0 及以上版本
+
+`export-csv` 可以单独配置 `api` 实现导出全量功能，这个 api 的返回结果和 CRUD 类似
+
+```schema: scope="body"
+{
+    "type": "crud",
+    "syncLocation": false,
+    "api": "/api/mock2/sample",
+    "data": {
+        "name": "123"
+    },
+    "headerToolbar": [
+        {
+            "type": "export-csv",
+            "label": "自定义导出 CSV",
+            "api": "/api/mock2/sample",
+            "filename": "自定义文件名${name}"
+        }
+    ],
+    "columns": [
+        {
+            "name": "id",
+            "label": "ID"
+        },
+        {
+            "name": "engine",
+            "label": "Rendering engine"
+        },
+        {
+            "name": "browser",
+            "label": "Browser"
+        },
+        {
+            "name": "platform",
+            "label": "Platform(s)"
+        },
+        {
+            "name": "version",
+            "label": "Engine version"
+        },
+        {
+            "name": "grade",
+            "label": "CSS grade",
+            "type": "mapping",
+            "map": {
+                "*": "<span class=\"label label-info\">${grade}</span>"
+            }
+        }
+    ]
+}
+```
+
 ### 导出 Excel
 
 在`headerToolbar`或者`footerToolbar`数组中添加`export-excel`字符串，可以实现点击下载 Excel 的功能，和导出 CSV 一样只包括当前分页的数据，但它们有明显区别：

packages/amis-core/src/store/crud.ts

@@ -1,4 +1,5 @@
 import {saveAs} from 'file-saver';
+import {filter} from 'amis-core';
 import {types, flow, getEnv, isAlive, Instance} from 'mobx-state-tree';
 import {IRendererStore} from './index';
 import {ServiceStore} from './service';
@@ -585,9 +586,17 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
     };
 
     const exportAsCSV = async (
-      options: {loadDataOnce?: boolean; api?: Api; data?: any} = {}
+      options: {
+        loadDataOnce?: boolean;
+        api?: Api;
+        data?: any;
+        filename?: string;
+      } = {}
     ) => {
       let items = options.loadDataOnce ? self.data.itemsRaw : self.data.items;
+      const filename = options.filename
+        ? filter(options.filename, options.data, '| raw')
+        : 'data';
 
       if (options.api) {
         const env = getEnv(self);
@@ -626,7 +635,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
               type: 'text/plain;charset=utf-8'
             }
           );
-          saveAs(blob, 'data.csv');
+          saveAs(blob, `${filename}.csv`);
         }
       });
     };

packages/amis/src/renderers/CRUD.tsx

@@ -2044,6 +2044,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   renderExportCSV(toolbar: Schema) {
     const {store, classPrefix: ns, translate: __, loadDataOnce} = this.props;
     const api = (toolbar as Schema).api;
+    const filename = toolbar.filename;
 
     return (
       <Button
@@ -2052,6 +2053,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
           store.exportAsCSV({
             loadDataOnce,
             api,
+            filename,
             data: store.filterData /* 因为filter区域可能设置了过滤字段值，所以query信息也要写入数据域 */
           })
         }