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,15 +1,24 @@
-<!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
+            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" />
+        <title>vue3-mgt-template</title>
+        <link
+            rel="icon"
+            href="/favicon.ico"
+        />
        <script>
            window.process = {};
        </script>
@ -56,7 +65,7 @@
                .loader::after {
                    position: absolute;
                    top: 0;
-          content: "";
+                    content: '';
                }

                .loader::before {
@ -82,6 +91,9 @@
            </style>
            <div class="loader"></div>
        </div>
-    <script type="module" src="/src/main.ts"></script>
+        <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>