MES开发第七天

今天进行前端代码的编写（使用vue）

 1 <template>
 2   <el-row class="tac">
 3     <el-col :span="4">
 4       <el-menu
 5         default-active="2"
 6         class="el-menu-vertical-demo"
 7         @open="handleOpen"
 8         @close="handleClose">
 9         <el-submenu index="1">
10           <template slot="title">
11             <i class="el-icon-location"></i>
12             <span>MES管理系统</span>
13           </template>
14           <el-menu-item-group>
15             <el-menu-item index="1-1" @click="showContent('batches')">生产计划总览</el-menu-item>
16             <el-menu-item index="1-6" @click="showContent('moldin')">生产任务的查看</el-menu-item>
17             <el-submenu index="1-2">
18               <template slot="title">仓库管理</template>
19               <el-menu-item index="1-2-1" @click="showContent('material')">仓库库存查询</el-menu-item>
20               <el-menu-item index="1-2-2" @click="showContent('outbound')">员工物料出库</el-menu-item>
21             </el-submenu>
22             <el-menu-item index="1-3" @click="showContent('salary')">员工工资查看</el-menu-item>
23             <el-menu-item index="1-4" @click="showContent('machine')">机器使用记录</el-menu-item>
24             
25             <el-menu-item index="1-4" @click="showContent('cost')">生产成本查看</el-menu-item>
26             <el-menu-item index="1-5" @click="showContent('employee')">工序交接信息管理</el-menu-item>
27             <el-menu-item index="1-7" @click="showContent('qcode')">二维码模拟展示</el-menu-item>
28             <!-- <el-menu-item index="1-6" @click="showContent('salary')">员工个人报工</el-menu-item> -->
29           </el-menu-item-group>
30         </el-submenu>
31       </el-menu>
32     </el-col>
33     <el-col :span="20">
34       <div class="welcome-area">
35         <div v-if="currentContent === ''">
36           <h1>欢迎使用 MES 管理系统</h1>
37           <p>请从左侧菜单选择操作。</p>
38         </div>
39         <div v-else>
40           <component :is="currentContent"></component>
41         </div>
42       </div>
43     </el-col>
44   </el-row>
45 </template>
46 <style>
47   .welcome-area {
48       padding: 20px; /* 添加一些内边距 */
49       text-align: center; /* 使文本居中 */
50   }
51   </style>
52 
53 <script>
54 import Batches from '../components/Batches'; // 导入不同的内容组件
55 import Outbound from '../components/Outbound';
56 import Material from '../components/Material';
57 import Cost from '../components/Cost';
58 import Employee from '../components/Employee';
59 import Salary from '../components/Salary';
60 import Moldin from '../components/Moldin'
61 import Machine from '../components/Machine'
62 import Qcode from '../components/Qcode'
63 export default {
64     data () {
65         return {
66             currentContent: ''
67         }
68     },
69     methods: {
70       handleOpen(key, keyPath) {
71         console.log(key, keyPath);
72       },
73       handleClose(key, keyPath) {
74         console.log(key, keyPath);
75       },
76       showContent(content) {
77         this.currentContent = content;
78       },
79     },
80     components: {
81       batches:Batches,
82       outbound: Outbound,
83       material: Material,
84       cost: Cost,
85       employee: Employee,
86       salary: Salary,
87       moldin:Moldin,
88       machine:Machine,
89       qcode:Qcode
90     }
91 }
92 </script>

界面的初步展示

 

 

posted @ 2024-09-30 11:56  连师傅只会helloword  阅读(10)  评论(0)    收藏  举报