管理系统进行重构 公共部分搭建(第一块)

效果

比赛小组任务 当前是重构效果 每个子项目的数据需要发送请求需要后台所以数据部分还需等待

使用的插件

重构

• el ui组件库 所有样式
• pinia管理数据

// 引入el
import ElementPlus from 'element-plus'
// 引入样式
import 'element-plus/dist/index.css'
import { createPinia  } from 'pinia'

原项目 vue2

• echarts数据图
• el ui组件库
• js-cookie 一个用于处理浏览器 cookie 的简单、轻量级 JavaScript API

import * as echarts from 'echarts';
import Cookies from 'js-cookie'
import Element from 'element-ui'

主要层级

重构文件夹

• FixedAside菜单的部分:确定选定的子项目
• headerMain 头部功能栏 和数据展示部分
• data 数据子组件 对应每一个子项目

App.vue根组件

<template>
  <el-container class="layout-container-demo">
    <!-- 左侧菜单栏 -->
    <FixedAside></FixedAside>
    <!-- 中心部分包含头部和中心数据部分 -->
    <HeaderMain></HeaderMain>
  </el-container>
</template>

<script setup>
import FixedAside from './components/FixedAside.vue';
import HeaderMain from './components/HeaderMain.vue';
### 菜单数据和api

</script>

数据部分

完整路径 与子项目名称 el Container布局对应的index api与数据项目的命名和路径 由于是选定项目开发 具体分级不可能一直等待后台发送 所以提前约定

1. ChinaAllName:完整任务路径
2. ChinaPartialName:主要任务名
3. index:el Container布局对应的index确定分布
4. EnglishName:由于数据子组件部分过多采用路径的写法动态加载组件和对应api

const allTaskName = reactive([
        // 系统管理
        { ChinaAllName: '系统管理/用户管理', ChinaPartialName: '用户管理', index: '1-1', EnglishName: 'SystemManagement/UserManagement' },
        { ChinaAllName: '系统管理/角色管理', ChinaPartialName: '角色管理', index: '1-2', EnglishName: 'SystemManagement/RoleManagement' },
        { ChinaAllName: '系统管理/菜单管理', ChinaPartialName: '菜单管理', index: '1-3', EnglishName: 'SystemManagement/MenuManagement' },
        { ChinaAllName: '系统管理/部门管理', ChinaPartialName: '部门管理', index: '1-4', EnglishName: 'SystemManagement/DepartmentManagement' },
        { ChinaAllName: '系统管理/字典管理', ChinaPartialName: '字典管理', index: '1-5', EnglishName: 'SystemManagement/DictionaryManagement' },
        { ChinaAllName: '系统管理/参数管理', ChinaPartialName: '参数管理', index: '1-6', EnglishName: 'SystemManagement/ParameterManagement' },
        { ChinaAllName: '系统管理/日志管理', ChinaPartialName: '日志管理', index: '1-7', EnglishName: 'SystemManagement/LogManagement' },
        { ChinaAllName: '系统管理/日志管理/操作日志', ChinaPartialName: '操作日志', index: '1-7-1', EnglishName: 'SystemManagement/LogManagement/OperationLog' },
        { ChinaAllName: '系统管理/日志管理/登录日志', ChinaPartialName: '登录日志', index: '1-7-2', EnglishName: 'SystemManagement/LogManagement/LoginLog' },
        // 系统监控
        { ChinaAllName: '系统监控/在线用户', ChinaPartialName: '在线用户', index: '2-1', EnglishName: 'SystemMonitoring/OnlineUsers' },
        { ChinaAllName: '系统监控/定时任务', ChinaPartialName: '定时任务', index: '2-2', EnglishName: 'SystemMonitoring/ScheduledTasks' },
        { ChinaAllName: '系统监控/数据监控', ChinaPartialName: '数据监控', index: '2-3', EnglishName: 'SystemMonitoring/DataMonitoring' },
        { ChinaAllName: '系统监控/缓存监控', ChinaPartialName: '缓存监控', index: '2-4', EnglishName: 'SystemMonitoring/CacheMonitoring' },
        // 系统工具
        { ChinaAllName: '系统工具/表单构建', ChinaPartialName: '表单构建', index: '3-1', EnglishName: 'SystemTools/FormBuilder' },
        { ChinaAllName: '系统工具/通用查询', ChinaPartialName: '通用查询', index: '3-2', EnglishName: 'SystemTools/GeneralQuery' },
        { ChinaAllName: '系统工具/代码生成', ChinaPartialName: '代码生成', index: '3-3', EnglishName: 'SystemTools/CodeGeneration' },
        { ChinaAllName: '系统工具/接口文档', ChinaPartialName: '接口文档', index: '3-4', EnglishName: 'SystemTools/InterfaceDocumentation' },
        // 我的任务
        { ChinaAllName: '我的任务/供应商审核', ChinaPartialName: '供应商审核', index: '4-1', EnglishName: 'MyTasks/SupplierReview' },
        { ChinaAllName: '我的任务/入库申请审核', ChinaPartialName: '入库申请审核', index: '4-2', EnglishName: 'MyTasks/InboundApplicationReview' },
        { ChinaAllName: '我的任务/出库申请审核', ChinaPartialName: '出库申请审核', index: '4-3', EnglishName: 'MyTasks/OutboundApplicationReview' },
        { ChinaAllName: '我的任务/补货申请审核', ChinaPartialName: '补货申请审核', index: '4-4', EnglishName: 'MyTasks/ReplenishmentApplicationReview' },
        { ChinaAllName: '我的任务/采购计划审核', ChinaPartialName: '采购计划审核', index: '4-5', EnglishName: 'MyTasks/PurchasePlanReview' },

        { ChinaAllName: '我的任务/采购申请审核', ChinaPartialName: '采购申请审核', index: '4-6', EnglishName: 'MyTasks/PurchaseApplicationReview' },
        { ChinaAllName: '我的任务/采购合同审核', ChinaPartialName: '采购合同审核', index: '4-7', EnglishName: 'MyTasks/PurchaseContractReview' },
        { ChinaAllName: '我的任务/承运申请审核', ChinaPartialName: '承运申请审核', index: '4-8', EnglishName: 'MyTasks/CarriageApplicationReview' },
        { ChinaAllName: '我的任务/销售订单审核', ChinaPartialName: '销售订单审核', index: '4-9', EnglishName: 'MyTasks/SalesOrderReview' },
        { ChinaAllName: '我的任务/销售合同审核', ChinaPartialName: '销售合同审核', index: '4-10', EnglishName: 'MyTasks/SalesContractReview' },
        { ChinaAllName: '我的任务/生产计划审核', ChinaPartialName: '生产计划审核', index: '4-11', EnglishName: 'MyTasks/ProductionPlanReview' },
        { ChinaAllName: '我的任务/领料申请审核', ChinaPartialName: '领料申请审核', index: '4-12', EnglishName: 'MyTasks/MaterialRequisitionReview' },
        // 智能仓储WMS
        { ChinaAllName: '智能仓储WMS/物料分类', ChinaPartialName: '物料分类', index: '5-1', EnglishName: 'SmartWarehouseWMS/MaterialClassification' },
        { ChinaAllName: '智能仓储WMS/物料档案', ChinaPartialName: '物料档案', index: '5-2', EnglishName: 'SmartWarehouseWMS/MaterialFile' },
        { ChinaAllName: '智能仓储WMS/仓库信息', ChinaPartialName: '仓库信息', index: '5-3', EnglishName: 'SmartWarehouseWMS/WarehouseInformation' },
        { ChinaAllName: '智能仓储WMS/物料库存', ChinaPartialName: '物料库存', index: '5-4', EnglishName: 'SmartWarehouseWMS/MaterialInventory' },
        { ChinaAllName: '智能仓储WMS/入库申请', ChinaPartialName: '入库申请', index: '5-5', EnglishName: 'SmartWarehouseWMS/InboundApplication' },
        { ChinaAllName: '智能仓储WMS/出库申请', ChinaPartialName: '出库申请', index: '5-6', EnglishName: 'SmartWarehouseWMS/OutboundApplication' },
        { ChinaAllName: '智能仓储WMS/补货申请', ChinaPartialName: '补货申请', index: '5-7', EnglishName: 'SmartWarehouseWMS/ReplenishmentApplication' },
        { ChinaAllName: '智能仓储WMS/移库信息', ChinaPartialName: '移库信息', index: '5-8', EnglishName: 'SmartWarehouseWMS/TransferInformation' },
        { ChinaAllName: '智能仓储WMS/盘点信息', ChinaPartialName: '盘点信息', index: '5-9', EnglishName: 'SmartWarehouseWMS/InventoryCheckInformation' },
        { ChinaAllName: '智能仓储WMS/运输管理', ChinaPartialName: '运输管理', index: '5-10', EnglishName: 'SmartWarehouseWMS/TransportationManagement' },
        { ChinaAllName: '智能仓储WMS/运输管理/承运申请', ChinaPartialName: '承运申请', index: '5-10-1', EnglishName: 'SmartWarehouseWMS/TransportationManagement/CarriageApplication' },
        { ChinaAllName: '智能仓储WMS/运输管理/车辆调度', ChinaPartialName: '车辆调度', index: '5-10-2', EnglishName: 'SmartWarehouseWMS/TransportationManagement/VehicleScheduling' },
        { ChinaAllName: '智能仓储WMS/运输管理/配送管理', ChinaPartialName: '配送管理', index: '5-10-3', EnglishName: 'SmartWarehouseWMS/TransportationManagement/DeliveryManagement' },
        { ChinaAllName: '智能仓储WMS/报表管理', ChinaPartialName: '报表管理', index: '5-11', EnglishName: 'SmartWarehouseWMS/ReportManagement' },
        { ChinaAllName: '智能仓储WMS/报表管理/库存明细', ChinaPartialName: '库存明细', index: '5-11-1', EnglishName: 'SmartWarehouseWMS/ReportManagement/InventoryDetails' },
        { ChinaAllName: '智能仓储WMS/报表管理/入库明细', ChinaPartialName: '入库明细', index: '5-11-2', EnglishName: 'SmartWarehouseWMS/ReportManagement/InboundDetails' },
        { ChinaAllName: '智能仓储WMS/报表管理/出库明细', ChinaPartialName: '出库明细', index: '5-11-3', EnglishName: 'SmartWarehouseWMS/ReportManagement/OutboundDetails' },
        { ChinaAllName: '智能仓储WMS/基础数据', ChinaPartialName: '基础数据', index: '5-12', EnglishName: 'SmartWarehouseWMS/BasicData' },
        { ChinaAllName: '智能仓储WMS/基础数据/货主管理', ChinaPartialName: '货主管理', index: '5-12-1', EnglishName: 'SmartWarehouseWMS/BasicData/CargoOwnerManagement' },
        // 供应链SCM
        { ChinaAllName: '供应链SCM/采购管理', ChinaPartialName: '采购管理', index: '6-1', EnglishName: 'SupplyChainSCM/PurchaseManagement' },
        { ChinaAllName: '供应链SCM/采购管理/供应商', ChinaPartialName: '供应商', index: '6-1-1', EnglishName: 'SupplyChainSCM/PurchaseManagement/Supplier' },
        { ChinaAllName: '供应链SCM/采购管理/采购计划', ChinaPartialName: '采购计划', index: '6-1-2', EnglishName: 'SupplyChainSCM/PurchaseManagement/PurchasePlan' },
        { ChinaAllName: '供应链SCM/采购管理/采购申请', ChinaPartialName: '采购申请', index: '6-1-3', EnglishName: 'SupplyChainSCM/PurchaseManagement/PurchaseApplication' },
        { ChinaAllName: '供应链SCM/采购管理/采购合同', ChinaPartialName: '采购合同', index: '6-1-4', EnglishName: 'SupplyChainSCM/PurchaseManagement/PurchaseContract' },
        { ChinaAllName: '供应链SCM/采购管理/采购到货', ChinaPartialName: '采购到货', index: '6-1-5', EnglishName: 'SupplyChainSCM/PurchaseManagement/PurchaseArrival' },
        { ChinaAllName: '供应链SCM/采购管理/采购退货', ChinaPartialName: '采购退货', index: '6-1-6', EnglishName: 'SupplyChainSCM/PurchaseManagement/PurchaseReturn' },
        { ChinaAllName: '供应链SCM/销售管理', ChinaPartialName: '销售管理', index: '6-2', EnglishName: 'SupplyChainSCM/SalesManagement' },
        { ChinaAllName: '供应链SCM/销售管理/销售计划', ChinaPartialName: '销售计划', index: '6-2-1', EnglishName: 'SupplyChainSCM/SalesManagement/SalesPlan' },
        { ChinaAllName: '供应链SCM/销售管理/销售订单', ChinaPartialName: '销售订单', index: '6-2-2', EnglishName: 'SupplyChainSCM/SalesManagement/SalesOrder' },
        { ChinaAllName: '供应链SCM/销售管理/销售合同', ChinaPartialName: '销售合同', index: '6-2-3', EnglishName: 'SupplyChainSCM/SalesManagement/SalesContract' },
        { ChinaAllName: '供应链SCM/销售管理/销售发货', ChinaPartialName: '销售发货', index: '6-2-4', EnglishName: 'SupplyChainSCM/SalesManagement/SalesDelivery' },
        { ChinaAllName: '供应链SCM/销售管理/销售退货', ChinaPartialName: '销售退货', index: '6-2-5', EnglishName: 'SupplyChainSCM/SalesManagement/SalesReturn' },
        { ChinaAllName: '供应链SCM/采购报表', ChinaPartialName: '采购报表', index: '6-3', EnglishName: 'SupplyChainSCM/PurchaseReport' },
        { ChinaAllName: '供应链SCM/采购报表/产品统计', ChinaPartialName: '产品统计', index: '6-3-1', EnglishName: 'SupplyChainSCM/PurchaseReport/ProductStatistics' },
        { ChinaAllName: '供应链SCM/采购报表/采购入库', ChinaPartialName: '采购入库', index: '6-3-2', EnglishName: 'SupplyChainSCM/PurchaseReport/PurchaseInbound' },
        { ChinaAllName: '供应链SCM/采购报表/退货统计', ChinaPartialName: '退货统计', index: '6-3-3', EnglishName: 'SupplyChainSCM/PurchaseReport/ReturnStatistics' },
        { ChinaAllName: '供应链SCM/销售报表', ChinaPartialName: '销售报表', index: '6-4', EnglishName: 'SupplyChainSCM/SalesReport' },
        { ChinaAllName: '供应链SCM/销售报表/订单统计', ChinaPartialName: '订单统计', index: '6-4-1', EnglishName: 'SupplyChainSCM/SalesReport/OrderStatistics' },
        { ChinaAllName: '供应链SCM/销售报表/发退货物', ChinaPartialName: '发退货物', index: '6-4-2', EnglishName: 'SupplyChainSCM/SalesReport/GoodsDeliveryAndReturn' },
        { ChinaAllName: '供应链SCM/销售报表/销售台账', ChinaPartialName: '销售台账', index: '6-4-3', EnglishName: 'SupplyChainSCM/SalesReport/SalesLedger' },
        { ChinaAllName: '供应链SCM/财务管理', ChinaPartialName: '财务管理', index: '6-5', EnglishName: 'SupplyChainSCM/FinancialManagement' },
        { ChinaAllName: '供应链SCM/财务管理/收支统计', ChinaPartialName: '收支统计', index: '6-5-1', EnglishName: 'SupplyChainSCM/FinancialManagement/IncomeAndExpenseStatistics' },
        { ChinaAllName: '供应链SCM/财务管理/供应商品', ChinaPartialName: '供应商品', index: '6-5-2', EnglishName: 'SupplyChainSCM/FinancialManagement/SupplierGoods' },
        { ChinaAllName: '供应链SCM/财务管理/客户对账', ChinaPartialName: '客户对账', index: '6-5-3', EnglishName: 'SupplyChainSCM/FinancialManagement/CustomerReconciliation' },
        { ChinaAllName: '供应链SCM/统计分析', ChinaPartialName: '统计分析', index: '6-6', EnglishName: 'SupplyChainSCM/StatisticalAnalysis' },
        { ChinaAllName: '供应链SCM/统计分析/订单收入', ChinaPartialName: '订单收入', index: '6-6-1', EnglishName: 'SupplyChainSCM/StatisticalAnalysis/OrderIncome' },
        { ChinaAllName: '供应链SCM/统计分析/采购付款', ChinaPartialName: '采购付款', index: '6-6-2', EnglishName: 'SupplyChainSCM/StatisticalAnalysis/PurchasePayment' },
        { ChinaAllName: '供应链SCM/统计分析/销售发货', ChinaPartialName: '销售发货', index: '6-6-3', EnglishName: 'SupplyChainSCM/StatisticalAnalysis/SalesDelivery' },
        { ChinaAllName: '供应链SCM/统计分析/采购入库', ChinaPartialName: '采购入库', index: '6-6-4', EnglishName: 'SupplyChainSCM/StatisticalAnalysis/PurchaseInbound' },
        { ChinaAllName: '供应链SCM/统计分析/销售记账', ChinaPartialName: '销售记账', index: '6-6-5', EnglishName: 'SupplyChainSCM/StatisticalAnalysis/SalesAccounting' },
        // 智能双碳
         // 标注添加
        { ChinaAllName: '智能双碳/双碳配置', ChinaPartialName: '双碳配置', index: '7-1', EnglishName: 'IntelligentDualCarbon/DualCarbonConfiguration' },
        { ChinaAllName: '智能双碳/双碳配置/计划比例', ChinaPartialName: '计划比例', index: '7-1-1', EnglishName: 'IntelligentDualCarbon/DualCarbonConfiguration/PlanRatio' },
        { ChinaAllName: '智能双碳/双碳配置/固定碳值', ChinaPartialName: '固定碳值', index: '7-1-2', EnglishName: 'IntelligentDualCarbon/DualCarbonConfiguration/FixedCarbonValue' },
        { ChinaAllName: '智能双碳/双碳配置/变化碳值', ChinaPartialName: '变化碳值', index: '7-1-3', EnglishName: 'IntelligentDualCarbon/DualCarbonConfiguration/VariableCarbonValue' },
        { ChinaAllName: '智能双碳/能效警告', ChinaPartialName: '能效警告', index: '7-2', EnglishName: 'IntelligentDualCarbon/EnergyEfficiencyWarning' },
        { ChinaAllName: '智能双碳/双碳管理', ChinaPartialName: '双碳管理', index: '7-3', EnglishName: 'IntelligentDualCarbon/DualCarbonManagement' },
        { ChinaAllName: '智能双碳/双碳管理/能耗数据采集', ChinaPartialName: '能耗数据采集', index: '7-3-1', EnglishName: 'IntelligentDualCarbon/DualCarbonManagement/EnergyConsumptionDataCollection' },
        { ChinaAllName: '智能双碳/双碳管理/月度碳排放总览', ChinaPartialName: '月度碳排放总览', index: '7-3-2', EnglishName: 'IntelligentDualCarbon/DualCarbonManagement/MonthlyCarbonEmissionOverview' },
        { ChinaAllName: '智能双碳/双碳管理/年度碳排放总览', ChinaPartialName: '年度碳排放总览', index: '7-3-3', EnglishName: 'IntelligentDualCarbon/DualCarbonManagement/AnnualCarbonEmissionOverview' },
        { ChinaAllName: '智能双碳/双碳管理/能耗分析', ChinaPartialName: '能耗分析', index: '7-3-4', EnglishName: 'IntelligentDualCarbon/DualCarbonManagement/EnergyConsumptionAnalysis' },
        { ChinaAllName: '智能双碳/双碳管理/分时能耗计量', ChinaPartialName: '分时能耗计量', index: '7-3-5', EnglishName: 'IntelligentDualCarbon/DualCarbonManagement/TimeOfUseEnergyMeasurement' },
        // 招投标(采购管理)
        { ChinaAllName: '招投标(采购管理)/招投标', ChinaPartialName: '招投标', index: '8-1', EnglishName: 'Biddings/Bidding' },
        { ChinaAllName: '招投标(采购管理)/违规投诉', ChinaPartialName: '违规投诉', index: '8-2', EnglishName: 'Biddings/ViolationComplaint' },
        { ChinaAllName: '招投标(采购管理)/投标企业信息', ChinaPartialName: '投标企业信息', index: '8-3', EnglishName: 'Biddings/BiddingEnterpriseInformation' },
        { ChinaAllName: '招投标(采购管理)/平台动态', ChinaPartialName: '平台动态', index: '8-4', EnglishName: 'Biddings/PlatformNews' },
        { ChinaAllName: '招投标(采购管理)/政策法规', ChinaPartialName: '政策法规', index: '8-5', EnglishName: 'Biddings/PoliciesAndRegulations' },
        { ChinaAllName: '招投标(采购管理)/企业投标', ChinaPartialName: '企业投标', index: '8-6', EnglishName: 'Biddings/EnterpriseBidding' }
    ])

通用样式

通过:root设定菜单栏的长度 头部功能栏和数据部分的宽度为100vw- 设定的长度

body{
  padding: 0;
  margin: 0;
}
#app {
  height: 100vh;
  width: 100vw;

}
:root {
  /* 菜单栏 */
  --aside-width: 200px; /* 定义 .el-aside 的宽度变量 */
}



/* 菜单子选项样式 */
.layout-container-demo .el-menu-item,
.layout-container-demo .el-sub-menu__title {
  color: rgb(221, 226, 247); /* 设置菜单项和子菜单标题字体颜色为白色 */
  background-color: rgba(32, 46, 59);
}
/* 菜单子选项悬停样式 */
.layout-container-demo  .el-menu-item:hover,
.layout-container-demo  .el-sub-menu__title:hover {
  background-color: rgb(24, 33, 43); /* 设置菜单项和子菜单标题悬停背景颜色 */
  color: #409EFF; /* 设置菜单项和子菜单标题悬停字体颜色 */
}

/* 有子选项的最大菜单标题样式 */
.layout-container-demo .el-sub-menu__title {
  color: rgb(221, 226, 247) ;
  background-color: #314253 ;
}
.layout-container-demo  .el-sub-menu__title:hover {
  background-color: rgb(59, 79, 99) ;
}
/* 子选项作为菜单的样式  菜单里有菜单   通过ul(.el-menu.el-menu--inline) li实现的 li里面有div(.el-sub-menu__title )就是里菜单样式  2+2+2+2>上面的2+2 类权重是(0,0,1,0)*/
.layout-container-demo .el-menu.el-menu--inline .el-sub-menu__title {
  color: rgb(221, 226, 247) ;
  background-color: rgba(32, 46, 59);
}
.layout-container-demo .el-menu.el-menu--inline .el-sub-menu__title:hover {
  background-color: rgb(24, 33, 43);
}
/* 菜单子选项组标题样式 不需要*/
.layout-container-demo .el-menu-item-group__title{
  display: none;
}

.layout-container-demo {
  height: 100vh;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: #fbfbfb;
  padding: 0;
  height: 110px;
}
.layout-container-demo .el-aside {
  color: #ffffff; /* 设置 aside 区域字体颜色为白色 */
  background-color: #314253;
  padding-top: 60px; /* 根据标题高度调整 */
  width: var(--aside-width);
}
.layout-container-demo .el-scrollbar {
  background-color: #314253; /* 设置滚动条背景颜色 */
}
.layout-container-demo .el-menu {
  background-color: #314253; /* 设置菜单背景颜色 */
  border-right: none;
}
.layout-container-demo .el-container .is-vertical{
  height: 100vh;
  width: calc(100vw - var(--aside-width));
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

pinia

getTask

定义并修改当前任务和任务历史并设置查询任务 allTaskName部分过多已说明

• currentlyTask:当前任务
• recordsTas:所有任务记录
• setCurrentlyTask:修改当前任务和任务记录
• delectRecordsItem:根据索引删除任务记录
• searchTasks:查询allTaskName数据

   //当前任务
    const currentlyTask=ref({
        ChinaAllName:'',
        ChinaPartialName:'',
        index:'',
        EnglishName:''
    });
    const recordsTask=reactive([])
      // 更新当前点击对象的方法
    const setCurrentlyTask = (task) => {
        // 当前任务时最新的
        currentlyTask.value = {...task};
        // 将当前点击对象添加到记录列表中由于是历史记录所以可以重复
        recordsTask.push(task);
        console.log(currentlyTask,recordsTask);
    };
    const delectRecordsItem=(index)=>{
        recordsTask.splice(index,1)
    }
    // 查询任务  
    const searchTasks=(name)=>{
        // 没有查询条件时
        if(!name){
            return []
        }
        // 将输入的关键词按空格分割成数组
        const keywords = name.trim().split(/\s+/);
        // 创建正则表达式数组  可以根据名称查询(无须顺序)
        // const regexList = keywords.map(keyword => new RegExp(keyword, 'i'));
        // 创建正则表达式数组，添加 ^ 符号确保从字符串开头匹配(需要顺序对上)
        const regexList = keywords.map(keyword => new RegExp(`^${keyword}`, 'i'));
        return allTaskName.filter(item => {
            // 检查 ChinaAllName 或 ChinaPartialName 是否包含所有关键词
            return regexList.every(regex => 
                regex.test(item.ChinaAllName)
            );
        });
    }

当前是菜单栏的状态 未来有全屏 用户 都会放在这

    // 菜单栏是否展开
    const isMenuOpen=ref(true)
    const modifyMenuOpen=()=>{
        isMenuOpen.value=!isMenuOpen.value;
        console.log(isMenuOpen.value);
        
    }
    return {modifyMenuOpen,isMenuOpen}

左部菜单栏

css部分除基础样式外就是写了菜单栏的隐藏显示过渡动画

html

剩余菜单按当前规律 使用el Container布局完成数据的展示并添加点击事件

           <el-sub-menu index="1">
              <template #title>
                <el-icon><message /></el-icon>系统管理
              </template>
              <el-menu-item-group>
                <el-menu-item 
                  v-for="item in getTaskStore.allTaskName.slice(0,6)" 
                  :key="item.index" 
                  :index="item.index" 
                  :class="{ 'blueColor': getTaskStore.currentlyTask.index === item.index }"
                  @click="handleMenuItemClick({ item })">
                  {{item.ChinaPartialName}}
                </el-menu-item>
                <el-sub-menu index="1-7">
                  <template #title>日志管理</template>
                  <!-- 由于使用循环添加的子项目 点击任意一个时会给所有加上el-menu-item is-active  使用：class查看当前循环的index是否等于正点击的index是就添加 没有就不添加 -->
                  <el-menu-item v-for="item in getTaskStore.allTaskName.slice(7,9)" :key="item.index" index="item.index" :class="{ 'blueColor': getTaskStore.currentlyTask.index === item.index }" @click="handleMenuItemClick({ item })">{{item.ChinaPartialName}}</el-menu-item>
                </el-sub-menu>
              </el-menu-item-group>
            </el-sub-menu>

script setup

当前组件主要是确定当前任务并将值交给对应的pinia实现多组件数据的交换

  import { ref, reactive } from 'vue'
  import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
  import {useGetTaskStore} from '../stores/getTask'
  import {useMenuStore} from '../stores/headerFunction'
  const getheaderfun=useMenuStore()
  // 获取 引入的Pinia store 实例
  const getTaskStore = useGetTaskStore()
  // 处理菜单项点击事件
  const handleMenuItemClick = (task) => {
    // console.log(task.item);
    getTaskStore.setCurrentlyTask(task.item);
  }

头部功能栏

显示效果

• 菜单栏的显示
• 当前任务
• 搜索功能
• 放大
• 用户中心(等待)
• 任务历史

<template>
    <el-container>
      <el-header>
        <div class="toolbar">
          <div class="palette">
            <div class="leftpalette">
              <!-- 打开菜单或关闭菜单 -->
              <div class="Indentation" style="margin-right: 20px;" @click="menuOpen()"><el-icon><Operation /></el-icon></div>
              <!--当前任务栏-->
              <div class="Superba">数据中心
                <Transition name="slide-right" mode="out-in">
                  <span :key="getTaskStore.currentlyTask.ChinaAllName">&nbsp;/{{getTaskStore.currentlyTask.ChinaAllName}}</span>
                </Transition>
              </div>
            </div>
            <div class="paletteUSer">
              <div class="search" >
                <el-icon style="color:rgba(94, 99, 101,1.0); font-size: 24px;"><Search /></el-icon>
              </div>
              <div>
                <!-- 查询任务(菜单) -->
                <el-input-tag v-model="searchTASK" placeholder="Please input" aria-label="Please click the Enter key after input" @input="getSearchTasks"/>
                <div v-if="searchResults.length" class="search-dropdown">
                  <div v-for="(result, index) in searchResults" :key="index" @click="selectTask(result)">
                    {{ result.ChinaAllName }}
                  </div>
                </div>
              </div>
              <div>
                <el-icon style="color:rgba(94, 99, 101,1.0); font-size: 24px;"><Rank /></el-icon>
              </div>
              <div class="user">
                <el-icon style="color:aliceblue; font-size: 26px;"><Avatar /></el-icon>
              </div>
            </div>
          </div>
          <!-- 所有任务栏 -->
            <div class="Superbas">
              <button v-for="(item,index) in allTaskNames" :key="index" @click="deleteTask(index)" :class="{'bluebackground':index==allTaskNames.length-1}">{{ item }}<el-icon><Close /></el-icon></button>
            </div>
        </div>

      </el-header>
      <SelectMain></SelectMain>

    </el-container>
</template>

script setup

获取pinia的getTask中的历史任务并将其使用计算属性(实现数据更新后重新获取)的方式渲染, 同样获取pinia的getTask的当前任务中的完整路径加任务名 获取查询名并通过getTask的查询所有数据来过滤出相应的任务路径 需要顺序对应使用正则匹配

import { ref,reactive,computed} from 'vue';
import { Close,Avatar,Search,Operation,Rank } from '@element-plus/icons-vue';
import SelectMain from './SelectMain.vue';
import {useGetTaskStore} from '../stores/getTask'
import {useMenuStore} from '../stores/headerFunction'
const getheaderfun=useMenuStore()
const getTaskStore=useGetTaskStore()

// 查询的任务
const searchTASK=ref([])
// 搜索结果
const searchResults = ref([])

// 使用计算属性获取任务历史的name并根据/划分获取后一个
const allTaskNames = computed(() => {
  return getTaskStore.recordsTask.map(task => {
    // 根据符号划分数组
    // console.log(task.ChinaAllName);
    
    const parts = task.ChinaAllName.split('/');
    // 根据/划分后是否有两个有就选第二个
    return parts.length > 1 ? parts[parts.length-1] : task.ChinaAllName;
  });
});

// 根据查询后的数据选择任务
const selectTask=function(task){
  console.log(task);
  getTaskStore.setCurrentlyTask(task);
}

// 删除历史部分任务根据索引
const deleteTask=function(index){
  getTaskStore.delectRecordsItem(index)
}
// 转换菜单状态
const menuOpen=function(){
  getheaderfun.modifyMenuOpen()
}
// 查询任务事件
const getSearchTasks=function(value){
  console.log('输入内容已更新:', getTaskStore.searchTasks(value));
  searchResults.value = getTaskStore.searchTasks(value);
}

数据组件

由于数据组件需要的太多所以使用一个父组件并通过动态加载的方式确定子组件 初步效果

html

<component :is="currentComponent" v-if="currentComponent"></component>

动态实现部分

使用计算属性(数据更新)获取当前任务 并通过封装异步加载组件的方式使用 使用监听对应计算属性调用封装的函数提供路径名 也就是EnglishName并设置初始监听一次不然就需要在生命周期内调用

import { ref,reactive,onMounted,computed,shallowRef,watch} from 'vue';
import {useGetTaskStore} from '../stores/getTask'
const getTaskAndStore=useGetTaskStore()
// 创建一个 ref 对象，用于存储请求返回的数据
// const data = ref(null);
// shallowRef 仅追踪 .value 的引用变更，而不关心 .value 内部数据的变化
const currentComponent = shallowRef(null);

// 异步加载组件
const loadComponent = async (name) => {
  // 使用动态导入语法
  const AsyncComponent = await import(/* @vite-ignore */ `./data/${name}.vue`);
  currentComponent.value = AsyncComponent.default;
};
const componentName=computed(()=>{
  const { EnglishName } = getTaskAndStore.currentlyTask;
  if(!EnglishName) return " "
  return EnglishName
})
// 使用 watch 监听 componentName 的变化
watch(componentName, (newName) => {
  loadComponent(newName);
}, { immediate: true }); // immediate: true 表示在 watch 创建时立即执行一次回调

onMounted(()=>{
  // 这里根据EnglishName发请求给子组件
})

数据请求

也是通过监听当前任务的变化来确定api获取数据后附带在子组件 这也就是与后端提前商量的好处

子组件配置

拿其中一个来说 由于几十个子组件可能有部分的展示形式相同 我们可以设置数据展示形式的组件并在app中全部使用就不用引入了直接使用 数据部分通过获取父组件的数据来确定

<template>
  <div>
    <h1>入库申请</h1>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
/* 组件样式 */
</style>

后续重构任务

等待后端的api初步达成 同时开始写重复使用的数据形式组件 后续方便直接使用 完善动画效果并熟练掌握当前代码以缩短复现时间