集成开发

klp-ui/src/views/micro/pages/split/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="split-container">
+    <div class="split-sidebar">
+      <el-menu :default-active="activeMenu" class="sidebar-menu" @select="handleMenuSelect">
+        <!-- 纵剪分条集成页按需求只保留五个核心业务板块 -->
+        <el-menu-item index="inventory">
+          <i class="el-icon-box"></i>
+          <span slot="title">库存</span>
+        </el-menu-item>
+        <el-menu-item index="processing">
+          <i class="el-icon-s-operation"></i>
+          <span slot="title">WIP</span>
+        </el-menu-item>
+        <el-menu-item index="report">
+          <i class="el-icon-document"></i>
+          <span slot="title">报表</span>
+        </el-menu-item>
+        <el-menu-item index="shipping">
+          <i class="el-icon-truck"></i>
+          <span slot="title">发货</span>
+        </el-menu-item>
+        <el-menu-item index="quality">
+          <i class="el-icon-warning-outline"></i>
+          <span slot="title">品质</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <div class="split-content">
+      <component :is="currentComponent" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Inventory from './components/Inventory.vue'
+import Processing from './components/Processing.vue'
+import Report from './components/Report.vue'
+import Shipping from './components/Shipping.vue'
+import Quality from './components/Quality.vue'
+
+export default {
+  name: 'SplitSystem',
+  components: {
+    Inventory,
+    Processing,
+    Report,
+    Shipping,
+    Quality,
+  },
+  data() {
+    return {
+      // 默认先展示库存板块，与其他集成入口保持一致。
+      activeMenu: 'inventory',
+    }
+  },
+  computed: {
+    currentComponent() {
+      const componentMap = {
+        inventory: 'Inventory',
+        processing: 'Processing',
+        report: 'Report',
+        shipping: 'Shipping',
+        quality: 'Quality',
+      }
+      return componentMap[this.activeMenu]
+    },
+  },
+  methods: {
+    handleMenuSelect(index) {
+      this.activeMenu = index
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding: 0 !important;
+}
+
+.split-container {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 84px);
+  background-color: #f5f7fa;
+}
+
+.split-sidebar {
+  width: 100px;
+  background-color: #fff;
+  border-right: 1px solid #e4e7ed;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
+
+  .sidebar-menu {
+    border: none;
+    background-color: transparent;
+    flex: 1;
+    overflow-y: auto;
+    border-right: none;
+
+    ::v-deep .el-menu-item {
+      color: #606266;
+      padding: 0 20px;
+      font-size: 14px;
+
+      &:hover {
+        background-color: #ecf5ff;
+        color: #409eff;
+      }
+
+      &.is-active {
+        background-color: #ecf5ff;
+        color: #409eff;
+        border-right: 3px solid #409eff;
+      }
+
+      i {
+        font-size: 18px;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.split-content {
+  flex: 1;
+  overflow: hidden;
+}
+</style>