写的一些小玩意

记录一下自己写的一些工具类的代码

1. 读取excel表格内容转换为markdown文档

• 需要安装依赖，主要是用到了一个node-xlsx的npm包

npm install node-xlsx --save

• 主要代码部分
• excelToMarkdown.js

const XLSX = require('xlsx');
const fs = require('fs');

// 读取 Excel 文件
const workbook = XLSX.readFile('input.xlsx');
const worksheet = workbook.Sheets[workbook.SheetNames[0]];

// 将表格数据转换为对象数组
const data = XLSX.utils.sheet_to_json(worksheet, { header: ['title', 'content'] });

// 生成 Markdown 文件内容
let markdownContent = '';
data.forEach(row => {
  markdownContent += `### ${row.title}\n\n${row.content}\n\n---\n`;
});

// 保存为 Markdown 文件
fs.writeFile('output.md', markdownContent, 'utf8', function (err) {
  if (err) {
    console.log('保存文件失败：', err);
  } else {
    console.log('已成功保存为 output.md 文件');
  }
});

2. 普通数组转树状结构数组

// 查找子部门的函数
export function listToTree(list, id) {
  const result = []
  // 遍历部门
  list.forEach(item => {
    // 如果一个部门的pid（父级部门id）对于等于部门的id
    // 那么这个部门就是id部门的子部门
    if (item.pid === id) {
      // 查找二级部门
      item.children = listToTree(list, item.id)
      result.push(item)
    }
  })
  return result
}

3. 利用递归组件实现手搓Tree组件

• /scr/views/TreeComponent.vue

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      {{item.name}};
      <TreeComponent v-if="item.children" :data="item.children"/>
    </li>
  </ul>
</template>

<script setup lang="ts">
const props = defineProps({
  data:{
    type:Array,
    default() {
      return[]
    }
  }
})
</script>

• /src/views/Tree.vue

<template>
  <div>
    <TreeComponent :data="data" />
  </div>
</template>

<script setup lang="ts">
import TreeComponent from "@/views/TreeComponent.vue";
import { ref } from "vue";

const data = ref([{
  name: '一级 1',
  children: [{
    name: '二级 1-1',
    children: [{
      name: '三级 1-1-1',
      children: [{
        name: '四级 1-1-1-1'
      }]
    }]
  }]
}, {
  name: '一级 2',
  children: [{
    name: '二级 2-1',
    children: [{
      name: '三级 2-1-1'
    }]
  }, {
    name: '二级 2-2',
    children: [{
      name: '三级 2-2-1'
    }]
  }]
}, {
  name: '一级 3',
  children: [{
    name: '二级 3-1',
    children: [{
      name: '三级 3-1-1'
    }]
  }, {
    name: '二级 3-2',
    children: [{
      name: '三级 3-2-1'
    }]
  }]
}])


</script>

<style scoped></style>

• /src/views/App.vue

<template>
  <div>
	<TreeComponent :data="data"/>
  </div>
</template>

<script setup lang="ts">
import TreeComponent from "@/views/TreeComponent.vue";
import {ref} from "vue";

const data = ref([{
  name: '一级 1',
  children: [{
    name: '二级 1-1',
    children: [{
      name: '三级 1-1-1',
      children:[{
        name:'四级 1-1-1-1'
      }]
    }]
  }]
}, {
  name: '一级 2',
  children: [{
    name: '二级 2-1',
    children: [{
      name: '三级 2-1-1'
    }]
  }, {
    name: '二级 2-2',
    children: [{
      name: '三级 2-2-1'
    }]
  }]
}, {
  name: '一级 3',
  children: [{
    name: '二级 3-1',
    children: [{
      name: '三级 3-1-1'
    }]
  }, {
    name: '二级 3-2',
    children: [{
      name: '三级 3-2-1'
    }]
  }]
}])


</script>

<style scoped>

</style>

4. 递归实现数组去重

function recursiveUnique(array) {
    if (array.length <= 1) {
        return array;
    } else {
        const firstItem = array[0];
        const restArray = array.slice(1);
        const uniqueRestArray = recursiveUnique(restArray);
        if (!uniqueRestArray.includes(firstItem)) {
            return [firstItem].concat(uniqueRestArray);
        } else {
            return uniqueRestArray;
        }
    }
}

const array = [1, 2, 3, 3, 4, 4, 5, 6, 6, 6];
const uniqueArray = recursiveUnique(array);
console.log(uniqueArray); // [1, 2, 3, 4, 5, 6]

5. 封装Element Plus通用表格组件

• /src/PageList.vue

<script setup lang="ts">
import { ref } from "vue"
const { tableData, total, PageSizes } = defineProps({
    tableData: {
        type: Array
    },
    total: {
        type: Number
    },
    PageSizes: {
        type: Array,
        default: () => {
            return [10, 20, 50]
        }
    },
    tableColumn: {
        type: Array
    },
    buttonlist: {
        type: Array
    }
})

const emit = defineEmits(['changePage'])
const pageParams = ref({
    page: 1,
    pageSize: PageSizes[0]
})


const SizeChage = (val: number) => {
    pageParams.value.pageSize = val

    emit('getPage', pageParams.value)
}

const CurrentChange = (val: number) => {
    pageParams.value.page = val
    emit('getPage', pageParams.value)
}

// 拆分数组
function splitStr(str: any) {
    return str.split(',')
}

function tableHandler(emitname: any, scope: object) {
    emit(emitname, scope)
}
</script>

<template>
    <el-table :data="tableData" style="width: 100%">
        <slot>
            <el-table-column v-for="item in tableColumn" :key="splitStr(item)[0]" :prop="splitStr(item)[0]"
                :label="splitStr(item)[1]" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button v-for="item in  buttonlist " :type="item.type" @click="tableHandler(item.emit, scope)">{{
                        item.text }}</el-button>
                </template>
            </el-table-column>
        </slot>
    </el-table>
    <el-pagination layout="sizes, prev, pager, next" :total="total" :page-size="pageParams.pageSize"
        :page-sizes="PageSizes" @size-change="SizeChage" @current-change="CurrentChange" />
</template>

<style scoped></style>

• src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import PageList from './components/PageList.vue';
import axios from 'axios';

const page = 1; // 当前页数
const limit = 10; // 每页显示的数据条数
const tableData = ref([])
const total = ref(100)

// 给子组件传递的列表信息
const tableColumn = [
  "name,姓名",
  "gender,性别",
  "mobile,手机号码",
  "county,地址",
]
// 给子组件传递的按钮信息
const buttonlist = [
  {
    text: '新增',
    emit: 'add',
    type: 'text'
  },
  {
    text: '编辑',
    emit: 'edit',
    type: 'text'
  },
  {
    text: '删除',
    emit: 'del',
    type: 'text'
  }
]

async function getLiist(val: object) {
  const { page: _page, pageSize: _limit } = val
  const res = await axios.get('http://localhost:3001/userinfo', {
    params: {
      _page,
      _limit,
      _size: true
    },
  });
  // 表格数据
  tableData.value = res.data
  // 总条数
  total.value = Number(res.headers['x-total-count'])
}

getLiist({ page: 1, _limit: 10 })

const getPage = (val: any) => {
  getLiist(val)

}

function add(scope: any) {
  console.log(scope.row);

}
</script>

<template>
  <PageList :tableColumn="tableColumn" :buttonlist="buttonlist" :total="200" :tableData="tableData" @getPage="getPage"
    @add="add">
  </PageList>
</template>

<style scoped></style>