优化：🔥 深度优化后端 CRUD 公共组件，并抽取前端下载功能到 CRUD 公共组件

1. 后端抽取导出功能到 CRUD 公共组件
2. 查询列表及导出接口支持排序参数
3. 深度优化 BaseServiceImpl 中的 CRUD 公共实现
4. 前端抽取公共下载组件
5. 优化部分细节并修复部分错误

continew-admin-ui/src/components/crud/index.ts

@@ -0,0 +1,66 @@
+import axios from 'axios';
+import qs from 'query-string';
+import { Notification } from '@arco-design/web-vue';
+import dayjs from 'dayjs';
+
+/**
+ * 下载
+ *
+ * @param url URL
+ * @param params 查询条件
+ * @param fileName 文件名
+ */
+export default function download(
+  url: string,
+  params: any,
+  fileName: string | undefined
+) {
+  return axios
+    .get(url, {
+      params,
+      paramsSerializer: (obj) => {
+        return qs.stringify(obj);
+      },
+      responseType: 'blob',
+    })
+    .then(async (res) => {
+      // 获取文件名
+      if (!fileName) {
+        const contentDisposition = res.headers['content-disposition'];
+        const pattern = new RegExp('filename=([^;]+\\.[^\\.;]+);*');
+        const result = pattern.exec(contentDisposition) || '';
+        // 对名字进行解码
+        fileName = window.decodeURI(result[1]);
+      } else {
+        fileName = `${fileName}_${dayjs().format('YYYYMMDDHHmmss')}`;
+      }
+
+      // 创建下载的链接
+      const blob = new Blob([res.data], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
+      });
+      const downloadElement = document.createElement('a');
+      const href = window.URL.createObjectURL(blob);
+      downloadElement.style.display = 'none';
+      downloadElement.href = href;
+      // 下载后文件名
+      downloadElement.download = fileName;
+      document.body.appendChild(downloadElement);
+      // 点击下载
+      downloadElement.click();
+      // 下载完成，移除元素
+      document.body.removeChild(downloadElement);
+      // 释放掉 blob 对象
+      window.URL.revokeObjectURL(href);
+    })
+    .catch((error) => {
+      console.error(error);
+      Notification.warning({
+        title: '警告',
+        content:
+          "如果您正在访问演示环境，点击导出会报错。这是由于演示环境开启了 Mock.js，而 Mock.js 会将 responseType 设置为 ''，这不仅会导致关键判断出错，也会导致导出的文件无法打开。",
+        duration: 10000,
+        closable: true,
+      });
+    });
+}

continew-admin-ui/src/components/index.ts

@@ -13,6 +13,7 @@ import Chart from './chart/index.vue';
 import Breadcrumb from './breadcrumb/index.vue';
 import DateRangePicker from './date-range-picker/index.vue';
 import RightToolbar from './right-toolbar/index.vue';
+import download from './crud';
 
 // Manually introduce ECharts modules to reduce packing size
 
@@ -31,6 +32,10 @@ use([
 
 export default {
   install(Vue: App) {
+    // 全局方法挂载
+    Vue.config.globalProperties.download = download;
+
+    // 全局组件挂载
     Vue.component('Chart', Chart);
     Vue.component('Breadcrumb', Breadcrumb);
     Vue.component('DateRangePicker', DateRangePicker);