feat: 工具函数

1 year ago · ad832ad408
parent f8ac82f728
commit ad832ad408
6 changed files with 258 additions and 82 deletions
--- a/index.html
+++ b/index.html
@ -1,87 +1,99 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="renderer" content="webkit" />
-    <meta
-      name="viewport"
-      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
-    />
-    <title>pure-admin-thin</title>
-    <link rel="icon" href="/favicon.ico" />
-    <script>
-      window.process = {};
-    </script>
-  </head>
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            http-equiv="X-UA-Compatible"
+            content="IE=edge,chrome=1"
+        />
+        <meta
+            name="renderer"
+            content="webkit"
+        />
+        <meta
+            name="viewport"
+            content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+        />
+        <title>vue3-mgt-template</title>
+        <link
+            rel="icon"
+            href="/favicon.ico"
+        />
+        <script>
+            window.process = {};
+        </script>
+    </head>

-  <body>
-    <div id="app">
-      <style>
-        html,
-        body,
-        #app {
-          position: relative;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 100%;
-          height: 100%;
-          overflow: hidden;
-        }
+    <body>
+        <div id="app">
+            <style>
+                html,
+                body,
+                #app {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    overflow: hidden;
+                }

-        .loader,
-        .loader::before,
-        .loader::after {
-          width: 2.5em;
-          height: 2.5em;
-          border-radius: 50%;
-          animation: load-animation 1.8s infinite ease-in-out;
-          animation-fill-mode: both;
-        }
+                .loader,
+                .loader::before,
+                .loader::after {
+                    width: 2.5em;
+                    height: 2.5em;
+                    border-radius: 50%;
+                    animation: load-animation 1.8s infinite ease-in-out;
+                    animation-fill-mode: both;
+                }

-        .loader {
-          position: relative;
-          top: 0;
-          margin: 80px auto;
-          font-size: 10px;
-          color: #406eeb;
-          text-indent: -9999em;
-          transform: translateZ(0);
-          transform: translate(-50%, 0);
-          animation-delay: -0.16s;
-        }
+                .loader {
+                    position: relative;
+                    top: 0;
+                    margin: 80px auto;
+                    font-size: 10px;
+                    color: #406eeb;
+                    text-indent: -9999em;
+                    transform: translateZ(0);
+                    transform: translate(-50%, 0);
+                    animation-delay: -0.16s;
+                }

-        .loader::before,
-        .loader::after {
-          position: absolute;
-          top: 0;
-          content: "";
-        }
+                .loader::before,
+                .loader::after {
+                    position: absolute;
+                    top: 0;
+                    content: '';
+                }

-        .loader::before {
-          left: -3.5em;
-          animation-delay: -0.32s;
-        }
+                .loader::before {
+                    left: -3.5em;
+                    animation-delay: -0.32s;
+                }

-        .loader::after {
-          left: 3.5em;
-        }
+                .loader::after {
+                    left: 3.5em;
+                }

-        @keyframes load-animation {
-          0%,
-          80%,
-          100% {
-            box-shadow: 0 2.5em 0 -1.3em;
-          }
+                @keyframes load-animation {
+                    0%,
+                    80%,
+                    100% {
+                        box-shadow: 0 2.5em 0 -1.3em;
+                    }

-          40% {
-            box-shadow: 0 2.5em 0 0;
-          }
-        }
-      </style>
-      <div class="loader"></div>
-    </div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+                    40% {
+                        box-shadow: 0 2.5em 0 0;
+                    }
+                }
+            </style>
+            <div class="loader"></div>
+        </div>
+        <script
+            type="module"
+            src="/src/main.ts"
+        ></script>
+    </body>
 </html>
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@ -9,6 +9,10 @@ const titleArr = [
        key: 'tools',
        title: '工具方法',
    },
+    {
+        key: 'importOrExportExcel',
+        title: '导入导出excel',
+    },
 ];

 // @/views/demo/**/*.vue
--- a/src/utils/tools.ts
+++ b/src/utils/tools.ts
@ -15,6 +15,19 @@ export const url = {
                .join('&')
        );
    },
+    /**
+     * 获取url参数对象
+     * @param url {string} 完整url，默认当前页面url
+     * @returns {Record<string, any>} { x: 1, y: 2, z: 3 }
+     */
+    getUrlToParams: (url: string = window.location.href): Record<string, any> => {
+        const urlParams = new URLSearchParams(url.split('?')[1]);
+        const params = {};
+        for (const [key, value] of urlParams.entries()) {
+            params[key] = value;
+        }
+        return params;
+    },
 };

 /** route路由相关工具 */
@ -28,6 +41,44 @@ export const route = {
    },
    getTitleFromPathStr: (arr: any, path: string): string => {
        const item = arr.find(({ key }) => path.includes(key));
-        return item ? item.title : null; // 如果找到，返回 title；否则返回 null
+        return item ? item.title : path; // 如果找到，返回 title；否则返回 null
+    },
+};
+
+/** 数组相关工具 */
+export const array = {
+    /**
+     * 判断两个数组是否相等，只递归一层，如果有嵌套数组或对象，则只判断第一层，并且永远不相等
+     * 支持忽略指定字段
+     * [{ a:1, b:2 }, { c:3, d:4 }] 比较 [{ a:1, b:2 }, { c:3, d:4 }] 结果为 true
+     * [{ a:1, b:2 }, { c:3, d:4 }] 比较 [{ a:1, b:2 }, { c:3, d:5 }] 结果为 false
+     * [{ a:1, b: { b1: 1 }}, { c:3, d:4 }] 比较 [{ a:1, b: { b1: 1 }}, { c:3, d:4 }] 结果为false,因为b是对象，只比较第一层
+     * @param arr1
+     * @param arr2
+     * @param ignoreFields ['a', 'b']
+     * @returns boolean
+     */
+    arraysAreEqual: (arr1: any[], arr2: any[], ignoreFields: Array<string> = []): boolean => {
+        if (arr1.length !== arr2.length) {
+            return false;
+        }
+        return arr1.every((item, index) => {
+            const item2 = arr2[index];
+            if (typeof item === 'object' && typeof item2 === 'object') {
+                return Object.keys(item)
+                    .filter((key) => ignoreFields.indexOf(key) === -1)
+                    .every((key) => item[key] === item2[key]);
+            } else {
+                return item === item2;
+            }
+        });
    },
 };
+
+export const generateUUID = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16) | 0,
+            v = c == 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+};
--- a/src/views/demo/importOrExportExcel/index.vue
+++ b/src/views/demo/importOrExportExcel/index.vue
@ -0,0 +1,53 @@
+<template>
+    <el-card header="导入导出excel">
+        <el-upload
+            action="/excel/upload"
+            :headers="headers"
+            method="post"
+        >
+            <el-button type="primary">上传excel</el-button>
+        </el-upload>
+        <el-button
+            type="primary"
+            @click="downloadExcel"
+            >下载excel</el-button
+        >
+    </el-card>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+import Cookies from 'js-cookie';
+import axios from 'axios';
+
+defineOptions({
+    name: 'DemoImportOrExportExcel',
+});
+
+const headers = ref({
+    Authorization: Cookies.get('Authorization') || '',
+});
+
+const downloadExcel = () => {
+    axios({
+        url: '/excel/download',
+        method: 'get',
+        // 重要，设置responseType为blob
+        responseType: 'blob',
+        headers: headers.value,
+    }).then((response) => {
+        const name = response.headers['content-disposition'].split(';')[1].split('=')[1];
+        // 重要，类型要设置为'application/vnd.ms-excel;charset=utf-8'
+        let blob = new Blob([response.data], { type: 'application/vnd.ms-excel;charset=utf-8' });
+        let link = document.createElement('a');
+        link.style.display = 'none';
+        link.href = URL.createObjectURL(blob);
+        link.setAttribute('download', name);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    });
+};
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/views/demo/tools/index.vue
+++ b/src/views/demo/tools/index.vue
@ -1,15 +1,73 @@
 <template>
-    <el-card> 基础模版 </el-card>
+    <el-card> 打开源代码结合控制台查看 </el-card>
 </template>

 <script setup lang="jsx">
 import { ref } from 'vue';
+import { url, generateUUID, array } from '@/utils/tools';

 defineOptions({
    name: 'DemoTools',
 });

-const page = ref({});
+// url相关工具函数
+const objToUrlParma = url.objToUrlParma({ x: 1, y: 2, z: 3, test: 'test' }, ['y']);
+console.log('将对象转为链接上的参数', objToUrlParma);
+//?x=1&z=3&test=test
+
+const getUrlToParams = url.getUrlToParams(
+    'https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9333493271659511895%22%7D&n_type=-1&p_from=-1'
+);
+console.log('将链接上的参数转为对象', getUrlToParams);
+// {
+//     "context": "{\"nid\":\"news_9333493271659511895\"}",   //请注意，这里不会递归处理
+//     "n_type": "-1",
+//     "p_from": "-1"
+// }
+
+console.log('生成随机uuid', generateUUID());
+
+console.group('两个array比较是否相等，只比较值，不比较顺序，不比较引用');
+console.log(array.arraysAreEqual([1, 2, 3], [3, 2, 1]));
+console.log(array.arraysAreEqual([1, 2, 3], [1, 2, 3]));
+console.log(
+    array.arraysAreEqual(
+        [
+            { a: 1, b: 2 },
+            { c: 3, d: 4 },
+        ],
+        [
+            { a: 1, b: 2 },
+            { c: 3, d: 4 },
+        ]
+    )
+);
+console.log(
+    array.arraysAreEqual(
+        [
+            { a: 1, b: 2 },
+            { c: 3, d: 4 },
+        ],
+        [
+            { a: 1, b: 2 },
+            { c: 3, d: 5 },
+        ]
+    )
+);
+console.log(
+    array.arraysAreEqual(
+        [
+            { a: 1, b: { b1: 1 } },
+            { c: 3, d: 4 },
+        ],
+        [
+            { a: 1, b: { b1: 1 } },
+            { c: 3, d: 4 },
+        ]
+    )
+);
+console.log(array.arraysAreEqual([{ a: 1, b: 2, time: '09:00' }], [{ a: 1, b: 2, time: '10:00' }], ['time']));
+console.groupEnd();
 </script>

 <style lang="scss" scoped></style>
--- a/src/views/template/base/index.vue
+++ b/src/views/template/base/index.vue
@ -8,8 +8,6 @@ import { ref } from 'vue';
 defineOptions({
    name: 'TemplateBase',
 });
-
-const page = ref({});
 </script>

 <style lang="scss" scoped></style>