主页面

src/views/homePage/beta/index.vue

@@ -1,3 +1,38 @@
 <template>
-  <router-view />
-</template>
+	<ContentContainer class="homepage-beta-wrapper">
+		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+			<el-tab-pane label="预测版本列表" name="first">
+				预测版本列表
+			</el-tab-pane>
+			<el-tab-pane label="正式订单" name="second">正式订单</el-tab-pane>
+			<el-tab-pane label="产品需求" name="third">产品需求</el-tab-pane>
+		</el-tabs>
+	</ContentContainer>
+</template>
+<script>
+// import Customer from './customer'
+// import Beta from './beta'
+// import Formal from './formal'
+export default {
+  components:{
+    // Customer,
+		// Beta,
+		// Formal
+  },
+	data() {
+		return {
+			activeName: 'first',
+		}
+	},
+	methods: {
+		handleClick(tab, event) {
+			console.log(tab, event)
+		},
+	},
+}
+</script>
+<style lang="less" scoped>
+.homepage-beta-wrapperr {
+	height: 100%;
+}
+</style>

src/views/homePage/customer/index.vue

@@ -1,3 +1,89 @@
 <template>
-  <router-view />
-</template>
+	<div class="customer-tree-wrapper">
+		<el-input placeholder="检索条件：客户" v-model="filterText"> </el-input>
+		<el-tree
+			class="customer-filter-tree"
+			:data="data"
+			:props="defaultProps"
+			accordion
+			:highlight-current="true"
+			:check-on-click-node="true"
+			@node-click="handleNodeClick"
+			:filter-node-method="filterNode"
+			ref="tree"
+		>
+		</el-tree>
+	</div>
+</template>
+
+<script>
+  export default {
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val)
+      },
+    },
+    methods: {
+      filterNode(value, data) {
+        if (!value) return true
+        return data.label.indexOf(value) !== -1
+      },
+			handleNodeClick(data,node) {
+				if (!node.data.children) { // 点击的是最低级别的子节点
+					console.log(data)
+				}
+			}
+    },
+    data() {
+      return {
+        filterText: '',
+        data: [
+          {
+            id: 1,
+            label: '瑞玛工业',
+            children: [
+              {
+                id: 2,
+                label: '客户集团',
+                children: [
+                  {
+                    id: 3,
+                    label: '客户A',
+                  },
+                  {
+                    id: 4,
+                    label: '客户B',
+                  },
+									{
+                    id: 5,
+                    label: '客户C',
+                  },
+									{
+                    id: 6,
+                    label: '客户D',
+                  },
+                ],
+              },
+            ],
+          }
+        ],
+        defaultProps: {
+          children: 'children',
+          label: 'label',
+        },
+      }
+    },
+  }
+</script>
+
+<style lang="less">
+.customer-tree-wrapper {
+	padding: 20px;
+	height: calc(100% - 50px);
+	.customer-filter-tree {
+		height: calc(100% - 50px);
+		overflow-y: auto;
+		margin-top: 10px;
+	}
+}
+</style>

src/views/homePage/formal/index.vue

@@ -1,3 +1,36 @@
 <template>
-  <router-view />
-</template>
+	<ContentContainer class="homepage-formal-wrapper">
+		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+			<el-tab-pane label="多版本比较" name="first">多版本比较</el-tab-pane>
+			<el-tab-pane label="偏差分析" name="second">偏差分析</el-tab-pane>
+			<el-tab-pane label="客户零件清单" name="third">客户零件清单</el-tab-pane>
+		</el-tabs>
+	</ContentContainer>
+</template>
+<script>
+// import Customer from './customer'
+// import Beta from './beta'
+// import Formal from './formal'
+export default {
+  components:{
+    // Customer,
+		// Beta,
+		// Formal
+  },
+	data() {
+		return {
+			activeName: 'first',
+		}
+	},
+	methods: {
+		handleClick(tab, event) {
+			console.log(tab, event)
+		},
+	},
+}
+</script>
+<style lang="less" scoped>
+.homepage-formal-wrapper {
+	height: 100%;
+}
+</style>