效果
菜单数据搭建
主要接口与菜单对应
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' }
])
动态导入
<component :is="currentComponent" v-if="currentComponent" :data="data"></component>
setup写法
- data发送请求后的数据
- currentComponent动态导入的组件
- loadComponent 动态加载组件的方式根据EmglishName
- fetchData 动态组件对应的接口数据 同时监听componentName的变化componentName是由计算属性得出的所以是响应式的 而getTaskAndStore.currentlyTask是当前的菜单项 变化时再发送新的请求和确定动态组件,要先发送请求再加载动态组件 不然动态组件确定了但数据还没传送过去
// 创建一个 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
})
// 封装 fetch 请求函数
const fetchData = async (englishName) => {
const baseUrl = 'api';
const url = `${baseUrl}/${englishName}`;
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`访问不到: ${response.status}`);
}
data.value = await response.json();
console.log(data.value);
} catch (error) {
console.error('请求出错', error);
}
};
// 使用 watch 监听 componentName 的变化
watch(componentName, async (newName) => {
// 由于是异步的不能先跳转组件再请求数据 这样子组件就获取不到数据了 由于获取数据也是异步的
await fetchData(newName);
await loadComponent(newName);
}); // immediate: true 表示在 watch 创建时立即执行一次回调
数据子组件
每个页面对应的数据处理 每个都不同这是其中一个
const props = defineProps({
data: {
type: Object,
default: () => []
}
});
console.log(props.data);
// 对应的中文字段名
const chineseFieldNames = {
dictId:'字典编号',
dictName:'字典名称',
dictType:'字典类型',
status:'状态',
remark:'备注',
createTime:'创建时间'
}
const searchText=['字典名称','字典类型','状态','创建时间']
// 创建 props.data 的响应式本地副本
const localData = reactive({ ...props.data });
localData.chineseFieldNames = chineseFieldNames;
localData.searchText = searchText;
数据显示部分
由于每个组件几乎都有图表所以我们再加一个图表组件,这是数据组件里面的引入图表组件
<componentTable :data="localData"></componentTable>
图表组件里的数据搭建
<div class="table-search">
<div class="searchText" v-for="(item,idnex) in props.data.searchText" :key="item">
<span>{{item}}</span><el-input v-model="input" style="width: 240px" placeholder="Please input" />
</div>
<div class="searchResetButton">
<el-button type="primary" @click="handleSearch"><el-icon><Search /></el-icon>搜索</el-button>
<el-button @click="handleReset"><el-icon><RefreshLeft /></el-icon>重置</el-button>
</div>
</div>
<div class="table-el-button">
<el-button type="primary" plain style="width: 100px; "><el-icon><Plus /></el-icon> 新增</el-button>
</div>
<div class="el-table">
<!-- 添加 show-header 属性并设置为 false 以隐藏表头 -->
<el-table :data="props.data.records" style="width: 95%;" stripe >
<el-table-column :prop="englishKey[index]" v-for="(key,index) in chineseKey" width="160" m-width="100" :label="key" :key="key" :class="{ 'fixed': index === 0 }"/>
<el-table-column fixed="right" label="Operations" min-width="100" class-name="operations-column">
<template #default>
<el-button link type="primary" size="small" @click="handleClick">修改</el-button>
<el-button link type="primary" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
查询数据和图表数据从父数据组件导入
- props导入的数据
- englishKey 英文键名
- chineseKey 中文键名
const props = defineProps({
data: {
type: Object,
default: () => []
}
});
// 英文表格数据键名
const englishKey=computed(()=>{
return Object.keys(props.data.chineseFieldNames)
})
// 中文表格数据键名
const chineseKey=computed(()=>{
return Object.values(props.data.chineseFieldNames)
})
// 搜索框输入的值
const searchInputs=reactive({})
// 监听搜索框输入的值变化 监听对象没有oldValue
watch(()=>props.data.searchText,(newSearchValue)=>{
newSearchText.forEach((item) => {
if (!searchInputs[item]) {
searchInputs[item] = '';
}
}, { immediate: true });
})
const handleClick = () => {
console.log('click');
};
添加接口
有后台的情况下在对应的数据中间组件进行修改就可以完成添加接口并显示
// 对应的中文字段名
const chineseFieldNames = {
dictId:'字典编号',
dictName:'字典名称',
dictType:'字典类型',
status:'状态',
remark:'备注',
createTime:'创建时间'
}
const searchText=['字典名称','字典类型','状态','创建时间']
// 创建 props.data 的响应式本地副本
const localData = reactive({ ...props.data });
localData.chineseFieldNames = chineseFieldNames;
localData.searchText = searchText;
部分总结
中心数据部分会发确定对应的数据组件可以把数据组件当成中间件做数据修改,然后再将处理好的数据给表格表单 就可以了
