首页 > 其他分享 >页面原型设计03

页面原型设计03

时间：2024-09-29 19:45:16浏览次数：8  
标签：03 name SysManage component 原型 path type menuType 页面

展示一点前端的代码吧

路由
import Vue from 'vue'
import Router from 'vue-router'
import { getLoginUser, removeTokenCookie } from '../assets/js/assist'
import Login from '../pages/login'
import Scene from '../pages/scene'
import Test from '../pages/Test.vue'
import SysManage from '../pages/sysmanage'
import Echarts from '../pages/echarts'
import BDMap from '../pages/bdmap'
Vue.use(Router)

const menuType = {
  header: 'headerMenu',
  left: 'leftMenu'
}

let router = new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/test',
      name: 'Test',
      component: Test
    },
    {
      path: '/scene',
      name: 'Scene',
      component: Scene
    },
    {
      path: '/scene/develop',
      name: 'SceneDevelop',
      component: Scene.SceneDevelop
    },
    {
      path: '/sys',
      name: '',
      component: SysManage,
      type: menuType.header,
      children: [
        { path: 'user', name: '用户管理', component: SysManage.User, type: menuType.left },
        { path: 'role', name: '角色管理', component: SysManage.Role, type: menuType.left },

        { path: 'contract', name: '合同管理', component: SysManage.ContractManagementView, type: menuType.left },
        { path: 'contract/generation', name: '合同生成制令', component: SysManage.ContractGeneration, type: menuType.left },
        { path: 'contract/batch-tracking', name: '合同产品批次追踪', component: SysManage.BatchTracking, type: menuType.left },
        { path: 'contract/data-association', name: '合同数据关联', component: SysManage.DataAssociation, type: menuType.left },

        { path: 'production', name: '生产管理', component: SysManage.ProductionManagementView, type: menuType.left },
        { path: 'production/quantity', name: '确定投产数量', component: SysManage.ProductionQuantity, type: menuType.left },
        { path: 'production/plan-monitoring', name: '生产计划监控', component: SysManage.PlanMonitoring, type: menuType.left },
        { path: 'production/multi-process', name: '多流程生产监控', component: SysManage.MultiProcessMonitoring, type: menuType.left },

        { path: 'mold', name: '模具库管理', component: SysManage.MoldManagementView, type: menuType.left },
        { path: 'mold/data-collection', name: '模具数据采集', component: SysManage.MoldDataCollection, type: menuType.left },
        { path: 'mold/usage-record', name: '模具使用与维护记录', component: SysManage.MoldUsageRecord, type: menuType.left },
        { path: 'mold/inventory', name: '模具库存管理', component: SysManage.MoldInventory, type: menuType.left },

        { path: 'team', name: '班组生产数据管理', component: SysManage.TeamProductionDataView, type: menuType.left },
        { path: 'team/process-collection', name: '工序数据采集', component: SysManage.ProcessCollection, type: menuType.left },
        { path: 'team/hand-over', name: '班组交接管理', component: SysManage.HandOverManagement, type: menuType.left },
        { path: 'team/assessment', name: '班组考核与成本核算', component: SysManage.Assessment, type: menuType.left },

        { path: 'quality', name: '质量管理', component: SysManage.QualityManagementView, type: menuType.left },
        { path: 'quality/inspection-data', name: '质量检验数据采集', component: SysManage.InspectionDataCollection, type: menuType.left },
        { path: 'quality/nonconformance', name: '不合格品管理', component: SysManage.NonconformanceManagement, type: menuType.left },
        { path: 'quality/traceability', name: '质量追溯与分析', component: SysManage.QualityTraceability, type: menuType.left },

        { path: 'equipment', name: '设备管理', component: SysManage.EquipmentManagementView, type: menuType.left },
        { path: 'equipment/maintenance', name: '设备维修与保养记录', component: SysManage.EquipmentMaintenance, type: menuType.left },
        { path: 'equipment/status-monitoring', name: '设备状态监测', component: SysManage.EquipmentStatusMonitoring, type: menuType.left },
        { path: 'equipment/cost-accounting', name: '设备成本核算', component: SysManage.EquipmentCostAccounting, type: menuType.left },

        { path: 'material', name: '物料管理', component: SysManage.MaterialManagementView, type: menuType.left },
        { path: 'material/purchase', name: '物料采购与库存管理', component: SysManage.MaterialPurchase, type: menuType.left },
        { path: 'material/usage-cost', name: '物料领用与成本分摊', component: SysManage.MaterialUsageCost, type: menuType.left },
        { path: 'material/traceability', name: '物料追溯', component: SysManage.MaterialTraceability, type: menuType.left },

        { path: 'outsourcing', name: '外协管理', component: SysManage.OutsourcingManagementView, type: menuType.left },
        { path: 'outsourcing/purchase', name: '外协采购管理', component: SysManage.OutsourcingPurchase, type: menuType.left },
        { path: 'outsourcing/inspection', name: '外协产品检验', component: SysManage.OutsourcingInspection, type: menuType.left },
        { path: 'outsourcing/cost-accounting', name: '外协成本核算', component: SysManage.OutsourcingCostAccounting, type: menuType.left },

        { path: 'report', name: '报表与分析', component: SysManage.ReportManagementView, type: menuType.left },
        { path: 'report/generation', name: '生产报表生成', component: SysManage.ProductionReport, type: menuType.left },
        { path: 'report/cost-analysis', name: '成本分析报表', component: SysManage.CostAnalysisReport, type: menuType.left },
        { path: 'report/performance', name: '效率与绩效分析', component: SysManage.PerformanceAnalysis, type: menuType.left },

        { path: 'system', name: '系统管理', component: SysManage.SystemManagementView, type: menuType.left },
        { path: 'system/user-permissions', name: '用户权限管理', component: SysManage.UserPermissions, type: menuType.left },
        { path: 'system/data-backup', name: '数据备份与恢复', component: SysManage.DataBackup, type: menuType.left },
        { path: 'system/settings', name: '系统设置与维护', component: SysManage.SystemSettings, type: menuType.left }
      ]
    },
    {
      path: '/echarts',
      name: '',
      component: Echarts,
      type: menuType.header,
      children: [
        {path: 'dashboard', name: '仪表盘', component: Echarts.Dashboard, type: menuType.left},
        {path: 'line', name: '折线图', component: Echarts.Line, type: menuType.left},
        {path: 'area', name: '面积图', component: Echarts.Area, type: menuType.left},
        {path: 'bar', name: '柱状图', component: Echarts.Bar, type: menuType.left},
        {path: 'linebar', name: '折线&柱状混图', component: Echarts.LineBar, type: menuType.left},
        {path: 'pie', name: '饼图图', component: Echarts.Pie, type: menuType.left}
      ]
    }
   /*  {
      path: '/bdmap',
      name: '',
      component: BDMap,
      type: menuType.header,
      children: [
        {path: 'heat', name: '热力图', component: BDMap.HeatMap, type: menuType.left},
        {path: 'polygon', name: '区域图', component: BDMap.Polygon, type: menuType.left},
        {path: 'pg-heat', name: '区域热力图', component: BDMap.PGHeat, type: menuType.left}
      ]
    } */
  ]
})

/**
 * 不做登录校验的路由集合
 * @type {[*]}
 */
const unLoginCheckRoutes = ['/noauth', '/test', '/console']

router.beforeEach(function (to, from, next) {
  // 是否要做登录及权限校验
  let loginCheck = false
  unLoginCheckRoutes.forEach(r => {
    if (to.path === '/' || (r !== '/' && to.path.startsWith(r))) {
      loginCheck = false
    }
  })
  if (loginCheck) {
    let user = getLoginUser()
    if (user === null) {
      removeTokenCookie()
      next('/')
    }
  } else {
    let _route = {}
    router.options.routes.forEach(r => {
      if (r.path === to.path) _route = r
    })
    if (_route === {} || _route.children === undefined || _route.children.length === 0) {
      next()
    } else {
      let _firstR = _route.children[0]
      next(to.path + '/' + _firstR.path)
    }
  }
})
export default router
import SysManage from './SysManage.vue'
import User from './user/User.vue'
import Role from './role/Role.vue'

// 合同管理
import ContractManagementView from './contract/ContractManagementView.vue';
import ContractGeneration from './contract/ContractGeneration.vue';
import BatchTracking from './contract/BatchTracking.vue';
import DataAssociation from './contract/DataAssociation.vue';

// 生产管理
import ProductionManagementView from './production/ProductionManagementView.vue';
import ProductionQuantity from './production/ProductionQuantity.vue';
import PlanMonitoring from './production/PlanMonitoring.vue';
import MultiProcessMonitoring from './production/MultiProcessMonitoring.vue';

// 模具库管理
import MoldManagementView from './mold/MoldManagementView.vue';
import MoldDataCollection from './mold/MoldDataCollection.vue';
import MoldUsageRecord from './mold/MoldUsageRecord.vue';
import MoldInventory from './mold/MoldInventory.vue';

// 班组生产数据管理
import TeamProductionDataView from './team/TeamProductionDataView.vue';
import ProcessCollection from './team/ProcessCollection.vue';
import HandOverManagement from './team/HandOverManagement.vue';
import Assessment from './team/Assessment.vue';

// 质量管理
import QualityManagementView from './quality/QualityManagementView.vue';
import InspectionDataCollection from './quality/InspectionDataCollection.vue';
import NonconformanceManagement from './quality/NonconformanceManagement.vue';
import QualityTraceability from './quality/QualityTraceability.vue';

// 设备管理
import EquipmentManagementView from './equipment/EquipmentManagementView.vue';
import EquipmentMaintenance from './equipment/EquipmentMaintenance.vue';
import EquipmentStatusMonitoring from './equipment/EquipmentStatusMonitoring.vue';
import EquipmentCostAccounting from './equipment/EquipmentCostAccounting.vue';

// 物料管理
import MaterialManagementView from './material/MaterialManagementView.vue';
import MaterialPurchase from './material/MaterialPurchase.vue';
import MaterialUsageCost from './material/MaterialUsageCost.vue';
import MaterialTraceability from './material/MaterialTraceability.vue';

// 外协管理
import OutsourcingManagementView from './outsourcing/OutsourcingManagementView.vue';
import OutsourcingPurchase from './outsourcing/OutsourcingPurchase.vue';
import OutsourcingInspection from './outsourcing/OutsourcingInspection.vue';
import OutsourcingCostAccounting from './outsourcing/OutsourcingCostAccounting.vue';

// 报表与分析
import ReportManagementView from './report/ReportManagementView.vue';
import ProductionReport from './report/ProductionReport.vue';
import CostAnalysisReport from './report/CostAnalysisReport.vue';
import PerformanceAnalysis from './report/PerformanceAnalysis.vue';

// 系统管理
import SystemManagementView from './system/SystemManagementView.vue';
import UserPermissions from './system/UserPermissions.vue';
import DataBackup from './system/DataBackup.vue';
import SystemSettings from './system/SystemSettings.vue';

SysManage.User = User;
SysManage.Role = Role;

// 合同管理
SysManage.ContractManagementView = ContractManagementView;
SysManage.ContractGeneration = ContractGeneration;
SysManage.BatchTracking = BatchTracking;
SysManage.DataAssociation = DataAssociation;

// 生产管理
SysManage.ProductionManagementView = ProductionManagementView;
SysManage.ProductionQuantity = ProductionQuantity;
SysManage.PlanMonitoring = PlanMonitoring;
SysManage.MultiProcessMonitoring = MultiProcessMonitoring;

// 模具库管理
SysManage.MoldManagementView = MoldManagementView;
SysManage.MoldDataCollection = MoldDataCollection;
SysManage.MoldUsageRecord = MoldUsageRecord;
SysManage.MoldInventory = MoldInventory;

// 班组生产数据管理
SysManage.TeamProductionDataView = TeamProductionDataView;
SysManage.ProcessCollection = ProcessCollection;
SysManage.HandOverManagement = HandOverManagement;
SysManage.Assessment = Assessment;

// 质量管理
SysManage.QualityManagementView = QualityManagementView;
SysManage.InspectionDataCollection = InspectionDataCollection;
SysManage.NonconformanceManagement = NonconformanceManagement;
SysManage.QualityTraceability = QualityTraceability;

// 设备管理
SysManage.EquipmentManagementView = EquipmentManagementView;
SysManage.EquipmentMaintenance = EquipmentMaintenance;
SysManage.EquipmentStatusMonitoring = EquipmentStatusMonitoring;
SysManage.EquipmentCostAccounting = EquipmentCostAccounting;

// 物料管理
SysManage.MaterialManagementView = MaterialManagementView;
SysManage.MaterialPurchase = MaterialPurchase;
SysManage.MaterialUsageCost = MaterialUsageCost;
SysManage.MaterialTraceability = MaterialTraceability;

// 外协管理
SysManage.OutsourcingManagementView = OutsourcingManagementView;
SysManage.OutsourcingPurchase = OutsourcingPurchase;
SysManage.OutsourcingInspection = OutsourcingInspection;
SysManage.OutsourcingCostAccounting = OutsourcingCostAccounting;

// 报表与分析
SysManage.ReportManagementView = ReportManagementView;
SysManage.ProductionReport = ProductionReport;
SysManage.CostAnalysisReport = CostAnalysisReport;
SysManage.PerformanceAnalysis = PerformanceAnalysis;

// 系统管理
SysManage.SystemManagementView = SystemManagementView;
SysManage.UserPermissions = UserPermissions;
SysManage.DataBackup = DataBackup;
SysManage.SystemSettings = SystemSettings;

export default SysManage
<template>
  <c-layout>
    <c-menu>
      <c-menu-item path="/sys/user" icon="address-book" name="用户管理"/>
      <c-menu-item path="/sys/role" icon="address-book" name="角色管理"/>
      <c-menu-item path="/sys/contract" icon="file" name="合同管理">
  <c-menu-item path="/sys/contract/generation" icon="file" name="合同生成制令"/>
  <c-menu-item path="/sys/contract/batch-tracking" icon="file" name="合同产品批次追踪"/>
  <c-menu-item path="/sys/contract/data-association" icon="file" name="合同数据关联"/>
</c-menu-item>

<c-menu-item path="/sys/production" icon="cogs" name="生产管理">
  <c-menu-item path="/sys/production/quantity" icon="cogs" name="确定投产数量"/>
  <c-menu-item path="/sys/production/plan-monitoring" icon="cogs" name="生产计划监控"/>
  <c-menu-item path="/sys/production/multi-process" icon="cogs" name="多流程生产监控"/>
</c-menu-item>

<c-menu-item path="/sys/mold" icon="tool" name="模具库管理">
  <c-menu-item path="/sys/mold/data-collection" icon="tool" name="模具数据采集"/>
  <c-menu-item path="/sys/mold/usage-record" icon="tool" name="模具使用与维护记录"/>
  <c-menu-item path="/sys/mold/inventory" icon="tool" name="模具库存管理"/>
</c-menu-item>

<c-menu-item path="/sys/team" icon="group" name="班组生产数据管理">
  <c-menu-item path="/sys/team/process-collection" icon="group" name="工序数据采集"/>
  <c-menu-item path="/sys/team/hand-over" icon="group" name="班组交接管理"/>
  <c-menu-item path="/sys/team/assessment" icon="group" name="班组考核与成本核算"/>
</c-menu-item>

<c-menu-item path="/sys/quality" icon="check" name="质量管理">
  <c-menu-item path="/sys/quality/inspection-data" icon="check" name="质量检验数据采集"/>
  <c-menu-item path="/sys/quality/nonconformance" icon="check" name="不合格品管理"/>
  <c-menu-item path="/sys/quality/traceability" icon="check" name="质量追溯与分析"/>
</c-menu-item>

<c-menu-item path="/sys/equipment" icon="wrench" name="设备管理">
  <c-menu-item path="/sys/equipment/maintenance" icon="wrench" name="设备维修与保养记录"/>
  <c-menu-item path="/sys/equipment/status-monitoring" icon="wrench" name="设备状态监测"/>
  <c-menu-item path="/sys/equipment/cost-accounting" icon="wrench" name="设备成本核算"/>
</c-menu-item>

<c-menu-item path="/sys/material" icon="archive" name="物料管理">
  <c-menu-item path="/sys/material/purchase" icon="archive" name="物料采购与库存管理"/>
  <c-menu-item path="/sys/material/usage-cost" icon="archive" name="物料领用与成本分摊"/>
  <c-menu-item path="/sys/material/traceability" icon="archive" name="物料追溯"/>
</c-menu-item>

<c-menu-item path="/sys/outsourcing" icon="external-link" name="外协管理">
  <c-menu-item path="/sys/outsourcing/purchase" icon="external-link" name="外协采购管理"/>
  <c-menu-item path="/sys/outsourcing/inspection" icon="external-link" name="外协产品检验"/>
  <c-menu-item path="/sys/outsourcing/cost-accounting" icon="external-link" name="外协成本核算"/>
</c-menu-item>

<c-menu-item path="/sys/report" icon="file-text" name="报表与分析">
  <c-menu-item path="/sys/report/generation" icon="file-text" name="生产报表生成"/>
  <c-menu-item path="/sys/report/cost-analysis" icon="file-text" name="成本分析报表"/>
  <c-menu-item path="/sys/report/performance" icon="file-text" name="效率与绩效分析"/>
</c-menu-item>

<c-menu-item path="/sys/system" icon="cogs" name="系统管理">
  <c-menu-item path="/sys/system/user-permissions" icon="cogs" name="用户权限管理"/>
  <c-menu-item path="/sys/system/data-backup" icon="cogs" name="数据备份与恢复"/>
  <c-menu-item path="/sys/system/settings" icon="cogs" name="系统设置与维护"/>
</c-menu-item>


    </c-menu>
  </c-layout>
</template>

<script>

</script>

<style>

</style>
<template>
  <div class="tracking-container">

    <h2 class="title">合同产品批次追踪</h2>

    <div class="input-group">
      <input
        type="text"
        v-model="batchNumber"
        placeholder="请输入批次号"
        class="batch-input"
      />
      <button @click="trackBatch" class="track-button">追踪</button>
    </div>

    <div v-if="trackingInfo" class="tracking-info">
      <h3>追踪信息:</h3>
      <p>{{ trackingInfo }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      batchNumber: '',
      trackingInfo: ''
    };
  },
  methods: {
    trackBatch() {
      // 模拟追踪逻辑
      this.trackingInfo = `批次号 ${this.batchNumber} 的状态为：在生产中。`;
    }
  }
}
</script>

<style scoped>
.tracking-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title {
  margin-bottom: 20px;
  font-size: 24px;
}

.input-group {
  display: flex;
  margin-bottom: 20px;
}

.batch-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

.track-button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.track-button:hover {
  background-color: #0056b3;
}

.tracking-info {
  margin-top: 20px;
  padding: 10px;
  background-color: #e9f5ff;
  border-left: 4px solid #007bff;
}
</style>

 

标签：03,name,SysManage,component,原型,path,type,menuType,页面
From： https://www.cnblogs.com/aixin52129211/p/18440643

相关文章

  • 【Web APIs day 03 事件流、事件委托、其他事件：优化多个事件绑定和实现常见网页交互】
    WebAPIs-第3天目标：学习事件流，事件委托，其他事件等知识，优化多个事件绑定和实现常见网页交互事件流移除事件监听其他事件元素尺寸与位置综合案例事件流为什么要学习事件流？可以帮我们解决一些疑惑，比如点击子盒子会会弹出2次的问题事件流指的是事件完整执行过程中的......
  • [USACO03Open] Lost Cows（二分加树状数组）
    #include<bits/stdc++.h>usingnamespacestd;#definexfirst#defineysecondtypedefpair<int,int>PII;typedeflonglongll;typedefunsignedlonglongull;typedefunsignedintuint;typedefvector<string>VS;typedefvector<int>......
  • nginx:limit_req导致nginx 503 Service Temporarily Unavailable
    一，客户端浏览器报错:nginx503ServiceTemporarilyUnavailable问题的原因:http下:limit_req_zone$binary_remote_addrzone=peripreq:20mrate=10r/s;此server下:limit_reqzone=peripreqburst=10nodelay; 此页面上有多个同域名下的css/js/图片/字体文件的连接,所......
  • FNCE30003 International Finance
    FNCE30003InternationalFinanceGroupAssignment2024Semester 2Details:1.Thisassignmentconstitutes 15%of yourfinal grade.2.Thisassignmentincludestwo files:●   thispdf assignmentinstructionfile,and●  theExcel filecontaining......
  • Apache伪静态出现页面无法正常访问处理
    默认规则：apache RewriteRule^(.*)$index.php/$1[QSA,PT,L]这条规则适用于Apache采用模块化运行方式的情况。当请求URL不是目录或文件时，将所有请求重写为index.php/$1。备用规则：apache RewriteRule^(.*)$index.php[E=PATH_INFO:$1,QSA,PT,L]这条......
  • PBOOTCMS网站访问页面提示：您访问的页面不存在，请核对后重试!如何改成自动404跳转页面
    如果你希望在PbootCMS中将“页面不存在”的错误提示修改为1秒后自动跳转到另一个页面，可以通过修改error.html文件来实现这一功能。以下是详细的步骤和示例代码。步骤1：定位文件打开项目文件夹：打开你的PbootCMS项目文件夹。导航到文件路径：导航至/core/template/error.htm......
  • PbootCMS自定义前台404错误页面
    以下是一个简单的404错误页面示例代码：<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>......
  • pbootcms模板如何输出当前页面的完整url地址
    在PBootCMS中，如果您需要在模板的某个位置调用当前页面的完整URL，可以使用 {pboot:httpurl} 和 {content:link} 标签来实现。这样可以方便地获取当前页面的完整URL并用于需要的地方。示例代码假设您需要在模板的某个位置调用当前页面的完整URL，可以使用以下代码：<!--......
  • PBootCMS如何修改页面中的提示语句？
    在PBootCMS中，你可以通过模板标签 {pboot:position} 来自定义页面中的面包屑提示文字。具体来说，你可以修改首页文本以及其他相关参数。以下是详细的步骤和示例：修改面包屑提示文字示例代码{pboot:positionindextext='Home'}或者{pboot:positionindextext='"Págin......
  • 代码随想录算法训练营Day03-链表 | LC203移除链表元素、LC707设计链表、LC206反转链表
    目录前言LeetCode203.移除链表元素思路完整代码LeetCode707.设计链表思路完整代码LeetCode206.反转链表思路完整代码今日总结前言拖延症犯了，哈哈，拖了一天LeetCode203.移除链表元素给你一个链表的头节点head和一个整数val，请你删除链表中所有满足Node.val......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99