From 7fc3a4b74f754e516410e508c4a406a990a4e1f1 Mon Sep 17 00:00:00 2001
From: "han\\hanst" <songtao.han@xujiesoft.com>
Date: Wed, 21 May 2025 15:15:38 +0800
Subject: [PATCH] init

---
 src/assets/scss/global.scss        |  11 +-
 src/router/index.js                |   4 +
 src/views/common/login.vue         |  10 +-
 src/views/main.vue                 |  60 ++++-----
 src/views/modules/recv/po-recv.vue | 188 +++++++++++++++++++++++++++++
 src/views/modules/recv/recv.vue    |   7 +-
 6 files changed, 241 insertions(+), 39 deletions(-)
 create mode 100644 src/views/modules/recv/po-recv.vue

diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss
index 6589429..9fc000b 100644
--- a/src/assets/scss/global.scss
+++ b/src/assets/scss/global.scss
@@ -461,4 +461,13 @@ a:hover{
       #0052a3
   ) !important;
 }
-
+.status-bar {
+  background: #2196F3;
+  color: white;
+  padding: 8px 12px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  flex-shrink: 0;
+  margin-bottom: 2px;
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2a508a0..a7a7fb6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,10 @@ const _import = require('./import-' + process.env.NODE_ENV)
 const globalRoutes = [
   { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
   { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } },
+  {path: "/porecv",name: "porecv",
+    component: resolve => require(["@/views/modules/recv/po-recv.vue"], resolve),
+    meta: { transition: 'instant' ,preload: true,keepAlive: true}
+  },
   {path: "/recv",name: "recv",
     component: resolve => require(["@/views/modules/recv/recv.vue"], resolve),
     meta: { transition: 'instant' ,preload: true,keepAlive: true}
diff --git a/src/views/common/login.vue b/src/views/common/login.vue
index a6a5b79..60158fa 100644
--- a/src/views/common/login.vue
+++ b/src/views/common/login.vue
@@ -3,8 +3,9 @@
   <div class="pda-login">
     <div class="login-card">
       <div class="logo-area">
-        <svg class="logo-icon" viewBox="0 0 24 24">
-          <path d="M12 2L1 12h3v9h16v-9h3L12 2zm0 4.5l5.5 5.5H14v5h-4v-5H6.5L12 6.5z"/>
+        <svg viewBox="0 0 48 48">
+          <path fill="#2196F3" d="M24 6L6 24l18 18 18-18z"/>
+          <path fill="#1976D2" d="M24 6v36l18-18z"/>
         </svg>
         <h1>仓储PDA系统</h1>
       </div>
@@ -199,6 +200,11 @@ export default {
   text-align: center;
   margin-bottom: 2rem;
 }
+.logo-area svg {
+  width: 64px;
+  height: 64px;
+  filter: drop-shadow(0 2px 4px rgba(33, 150, 243, 0.3));
+}
 
 .logo-icon {
   width: 60px;
diff --git a/src/views/main.vue b/src/views/main.vue
index 7577565..3259c5b 100644
--- a/src/views/main.vue
+++ b/src/views/main.vue
@@ -40,11 +40,20 @@ export default {
       batteryLevel: 78,
       activeIndex: null,
       buttons: [
-        { icon: '📦', label: '入库', color: '#4CAF50', action: 'stockIn',to:'recv' },
-        { icon: '🚚', label: '出库', color: '#2196F3', action: 'stockOut',to:'recv' },
-        { icon: '🔍', label: '查询', color: '#FF9800', action: 'search' ,to:'recv' },
-        { icon: '📊', label: '盘点', color: '#9C27B0', action: 'inventory' ,to:'recv' },
-        { icon: '🔄', label: '调拨', color: '#607D8B', action: 'transfer' ,to:'recv' },
+        { icon: '📦', label: '采购入库', color: '#4CAF50', action: 'stockIn',to:'porecv' },
+        { icon: '🏷️', label: '载具管理', color: '#0097A7', action: 'stockOut',to:'recv' },
+        { icon: '📦', label: '生产订单发料', color: '#8BC34A', action: 'stockIn',to:'porecv' },
+        { icon: '📥', label: '生产订单入库', color: '#2196F3', action: 'stockIn',to:'porecv' },
+        { icon: '📤', label: '委外PO发料', color: '#8BC34A', action: 'stockIn',to:'porecv' },
+        { icon: '🚚', label: '销售订单发货', color: '#2196F3', action: 'stockOut',to:'recv' },
+        { icon: '↔️', label: '其他出入库', color: '#607D8B', action: 'stockIn',to:'porecv' },
+        { icon: '🚚', label: 'Material Requisition发料', color: '#2196F3', action: 'stockIn',to:'porecv' },
+        { icon: '📋', label: '盘点', color: '#2196F3', action: 'inventory' ,to:'recv' },
+        { icon: '↩️', label: '销售退货', color: '#FF9800', action: 'transfer' ,to:'recv' },
+        { icon: '🚚', label: '运输任务', color: '#3F51B5', action: 'label' ,to:'recv' },
+
+
+        /*{ icon: '🔄', label: '调拨', color: '#607D8B', action: 'transfer' ,to:'recv' },
         { icon: '📌', label: '标签', color: '#795548', action: 'label' ,to:'recv' },
         { icon: '📷', label: '扫码', color: '#3F51B5', action: 'scan' ,to:'recv' },
         { icon: '📁', label: '同步', color: '#00BCD4', action: 'sync' ,to:'recv' },
@@ -58,7 +67,7 @@ export default {
         { icon: '📁', label: '同步', color: '#00BCD4', action: 'sync' ,to:'recv' },
         { icon: '⚙️', label: '设置', color: '#9E9E9E', action: 'settings' ,to:'recv' },
         { icon: '👥', label: '团队', color: '#CDDC39', action: 'team' ,to:'recv' },
-        { icon: '📈', label: '统计', color: '#FF5722', action: 'stats',to:'recv'  },
+        { icon: '📈', label: '统计', color: '#FF5722', action: 'stats',to:'recv'  },*/
      /*   { icon: '❌', label: '退出', color: '#f1b2b2', action: 'help' ,to:'recv' }*/
       ]
     }
@@ -97,22 +106,15 @@ export default {
     },
     // 退出
     logoutHandle() {
-      this.$confirm('确定进行[退出]操作?', '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$http({
-          url: this.$http.adornUrl('/sys/logout'),
-          method: 'post',
-          data: this.$http.adornData()
-        }).then(({data}) => {
-          if (data && data.code === 0) {
-            //clearLoginInfo()
-            this.$router.push({name: 'login'})
-          }
-        })
-      }).catch(() => {
+      this.$http({
+        url: this.$http.adornUrl('/sys/logout'),
+        method: 'post',
+        data: this.$http.adornData()
+      }).then(({data}) => {
+        if (data && data.code === 0) {
+          //clearLoginInfo()
+          this.$router.push({name: 'login'})
+        }
       })
     },
   }
@@ -135,16 +137,6 @@ export default {
   overflow: hidden;
 }
 
-.status-bar {
-  background: #2c3e50;
-  color: white;
-  padding: 8px 12px;
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
 .button-scroll-container {
   flex: 1;
   overflow-y: auto;
@@ -155,7 +147,7 @@ export default {
 .button-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--button-size), 1fr));
-  gap: 16px;
+  gap: 14px;
   padding-bottom: 20px;
 }
 
@@ -208,7 +200,7 @@ export default {
     font-size: 30px;
   }
   .button-label {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 </style>
diff --git a/src/views/modules/recv/po-recv.vue b/src/views/modules/recv/po-recv.vue
new file mode 100644
index 0000000..343d5e7
--- /dev/null
+++ b/src/views/modules/recv/po-recv.vue
@@ -0,0 +1,188 @@
+
+<template>
+  <div class="pda-container">
+    <!-- 状态栏 -->
+    <div class="status-bar">
+      <div class="time">{{ currentTime }}</div>
+      <div class="network" style="color: #fff" @click="$router.push({path: '/'})">🏠首页</div>
+    </div>
+
+    <!-- 可滚动按钮区 -->
+    <div class="button-scroll-container">
+      <div class="button-grid">
+        <button
+          v-for="(btn, index) in buttons"
+          :key="index"
+          class="pda-button"
+          :style="{
+            'background': btn.color,
+            'transform': activeIndex === index ? 'scale(0.95)' : 'none'
+          }"
+          @touchstart.passive="setActive(index)"
+          @touchend.passive="clearActive()"
+          @touchcancel.passive="clearActive()">
+          <router-link class="pda-button" :style="{
+            'background': ';#4CAF50',}" :to="btn.to">
+            <span class="button-icon">{{ btn.icon }}</span>
+            <span class="button-label">{{ btn.label }}</span>
+          </router-link>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentTime: new Date().toTimeString().substr(0, 5),
+      batteryLevel: 78,
+      activeIndex: null,
+      buttons: [
+        { icon: '📦', label: '采购订单接收', color: '#FF9800', action: 'stockIn',to:'recv' },
+        { icon: '📄', label: '登记检验结果', color: '#2196F3', action: 'stockOut',to:'recv' },
+        { icon: '✅', label: '检验合格入库', color: '#4CAF50', action: 'search' ,to:'recv' },
+      ]
+    }
+  },
+  mounted() {
+    this.updateTime();
+    window.addEventListener('resize', this.adjustLayout);
+    this.$nextTick(this.adjustLayout);
+  },
+  beforeDestroy() {
+    clearInterval(this.timeInterval);
+    window.removeEventListener('resize', this.adjustLayout);
+  },
+  methods: {
+    updateTime() {
+      this.timeInterval = setInterval(() => {
+        this.currentTime = new Date().toTimeString().substr(0, 5);
+      }, 60000);
+    },
+    adjustLayout() {
+      const container = document.querySelector('.button-grid');
+      if (container) {
+        const width = container.clientWidth;
+        const columns = Math.max(3, Math.floor(width / 120));
+        document.documentElement.style.setProperty('--columns', columns);
+      }
+    },
+    handleClick(action) {
+      console.log('执行操作:', action);
+    },
+    setActive(index) {
+      this.activeIndex = index;
+    },
+    clearActive() {
+      this.activeIndex = null;
+    },
+    // 退出
+    logoutHandle() {
+      this.$confirm('确定进行[退出]操作?', '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl('/sys/logout'),
+          method: 'post',
+          data: this.$http.adornData()
+        }).then(({data}) => {
+          if (data && data.code === 0) {
+            //clearLoginInfo()
+            this.$router.push({name: 'login'})
+          }
+        })
+      }).catch(() => {
+      })
+    },
+  }
+}
+</script>
+
+<style>
+:root {
+  --columns: 4;
+  --button-size: calc(100vw / var(--columns) - 20px);
+}
+
+.pda-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+  font-family: 'Arial', sans-serif;
+  overflow: hidden;
+}
+
+
+.button-scroll-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.button-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--button-size), 1fr));
+  gap: 14px;
+  padding-bottom: 20px;
+}
+
+.pda-button {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  border: none;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  transition: transform 0.1s ease;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+}
+
+.button-icon {
+  font-size: 28px;
+  margin-bottom: 6px;
+}
+
+.button-label {
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.button-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: #ff4757;
+  color: white;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+@media (max-width: 480px) {
+  .button-icon {
+    font-size: 30px;
+  }
+  .button-label {
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/modules/recv/recv.vue b/src/views/modules/recv/recv.vue
index d835f89..8ab8624 100644
--- a/src/views/modules/recv/recv.vue
+++ b/src/views/modules/recv/recv.vue
@@ -1,11 +1,14 @@
 <template>
   <div class="pda-receipt">
-    <el-button class="submit-btn" @click="toShouye()" style="margin-bottom: 5px">首页</el-button>
+    <div class="status-bar">
+      <div class="time">{{ new Date().toTimeString().substr(0, 5) }}</div>
+      <div class="network" style="color: #fff" @click="$router.push({path: '/'})">🏠首页</div>
+    </div>
     <!-- 扫描输入区 -->
     <div class="scan-box">
       <input
         v-model="scanCode"
-        placeholder="扫描条码"
+        placeholder="扫描PO条码或输入PO号"
         @keyup.enter="addItem"
         ref="scanCodeRef"
       />