wms-pda/src/views/main.vue

<template>
  <div class="pda-container">
    <!-- 头部栏 -->
    <div class="header-bar">
      <div class="warehouse-selector" @click="toggleWarehouseDropdown">
        <span class="warehouse-text">{{ selectedWarehouseName || '选择仓库' }}</span>
        <i class="el-icon-arrow-down" :class="{ 'rotate': showWarehouseDropdown }"></i>
        <div class="warehouse-dropdown" v-show="showWarehouseDropdown">
          <div class="dropdown-item loading" v-if="warehouseLoading">
            <i class="el-icon-loading"></i>
            加载中...
          </div>
          <div
            v-else
            v-for="item in warehouseList"
            :key="item.warehouseid"
            class="dropdown-item"
            :class="{ 'active': selectedWarehouse === item.warehouseid }"
            @click.stop="selectWarehouse(item)">
            {{ item.warehousename }}
          </div>
          <div class="dropdown-item empty" v-if="!warehouseLoading && warehouseList.length === 0">
            暂无可用仓库
          </div>
        </div>
      </div>
      <div class="logout-button" @click="logoutHandle()">
        <i class="el-icon-close"></i>
        <span>退出</span>
      </div>
    </div>

    <!-- 功能区域 -->
    <div class="content-area">
      <!-- 收货入库 -->
      <div class="section">
        <div class="section-header">
          <span class="bullet">•</span>
          <span class="section-title">收货入库</span>
        </div>
        <div class="button-grid">
          <div class="menu-item" @click="navigateWithWarehouseCheck('porecv')">
            <div class="menu-icon purchase">
              <van-icon name="shopping-cart-o" size="24" />
            </div>
            <div class="menu-text">采购入库</div>
          </div>
          <div class="menu-item disabled" @click="handleDisabledFeature('productionInboundProduction')">
            <div class="menu-icon production-inbound">
              <van-icon name="cart" size="24" />
            </div>
            <div class="menu-text">生产入库</div>
          </div>
          <div class="menu-item disabled" @click="handleDisabledFeature('productionreturn')">
            <div class="menu-icon production-return">
              <van-icon name="revoke" size="24" />
            </div>
            <div class="menu-text">生产退料</div>
          </div>
          <div class="menu-item disabled" @click="handleDisabledFeature('salereturn')">
            <div class="menu-icon sales-return">
              <van-icon name="revoke" size="24" />
            </div>
            <div class="menu-text">销售退货</div>
          </div>
        </div>
      </div>

      <!-- 拣货出库 -->
      <div class="section">
        <div class="section-header">
          <span class="bullet">•</span>
          <span class="section-title">拣货出库</span>
        </div>
        <div class="button-grid">
          <div class="menu-item" @click="navigateWithWarehouseCheck('inventory-move')">
            <div class="menu-icon inventory-move">
              <van-icon name="exchange" size="24" />
            </div>
            <div class="menu-text">移库</div>
          </div>
          <div class="menu-item" @click="navigateWithWarehouseCheck('otherinout')">
            <div class="menu-icon other">
              <van-icon name="exchange" size="24" />
            </div>
            <div class="menu-text">其他出入库</div>
          </div>
          <div class="menu-item" @click="navigateWithWarehouseCheck('productionissue')">
            <div class="menu-icon production-issue">
              <van-icon name="send-gift-o" size="24" />
            </div>
            <div class="menu-text">生产领料</div>
          </div>
          <div class="menu-item" @click="navigateWithWarehouseCheck('mrissue')">
            <div class="menu-icon mr">
              <van-icon name="orders-o" size="24" />
            </div>
            <div class="menu-text">MR发料</div>
          </div>
          <div class="menu-item" @click="navigateWithWarehouseCheck('outsource')">
            <div class="menu-icon outsourcing">
              <van-icon name="logistics" size="24" />
            </div>
            <div class="menu-text">委外发料</div>
          </div>
          <div class="menu-item disabled" @click="handleDisabledFeature('saleshipping')">
            <div class="menu-icon sales-delivery">
              <van-icon name="logistics" size="24" />
            </div>
            <div class="menu-text">销售出库</div>
          </div>
          <div class="menu-item disabled" @click="handleDisabledFeature('transportation')">
            <div class="menu-icon transport">
              <van-icon name="guide-o" size="24" />
            </div>
            <div class="menu-text">运输任务</div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="section-header">
          <span class="bullet">•</span>
          <span class="section-title">立库操作</span>
        </div>
        <div class="button-grid">
          <div class="menu-item" @click="navigateWithWarehouseCheck('callOut')">
            <div class="menu-icon purchase">
              <van-icon name="shopping-cart-o" size="24" />
            </div>
            <div class="menu-text">Call料</div>
          </div>
          <div class="menu-item" @click="navigateWithWarehouseCheck('palletPacking')">
            <div class="menu-icon purchase">
              <van-icon name="shopping-cart-o" size="24" />
            </div>
            <div class="menu-text">组盘入库</div>
          </div>
          <div class="menu-item" @click="navigateWithWarehouseCheck('palletAssembly')">
            <div class="menu-icon purchase">
              <van-icon name="shopping-cart-o" size="24" />
            </div>
            <div class="menu-text">直接组盘</div>
          </div>
        </div>
      </div>
      <!-- 库内管理 -->
      <div class="section">
        <div class="section-header">
          <span class="bullet">•</span>
          <span class="section-title">库内管理</span>
        </div>
        <div class="button-grid">
<!--          <div class="menu-item disabled" @click="handleDisabledFeature('attributechange')">
            <div class="menu-icon attribute">
              <van-icon name="setting-o" size="24" />
            </div>
            <div class="menu-text">属性变动</div>
          </div>-->
          <div class="menu-item disabled" @click="handleDisabledFeature('stocktaking')">
            <div class="menu-icon inventory">
              <van-icon name="records" size="24" />
            </div>
            <div class="menu-text">盘点</div>
          </div>
          <div class="menu-item disabled" @click="handleDisabledFeature('handlingunit')">
            <div class="menu-icon hu">
              <van-icon name="cluster-o" size="24" />
            </div>
            <div class="menu-text">HU管理</div>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
import { getUserAuthorizedWarehouses } from "@/api/warehouse.js"

export default {
  data() {
    return {
      username: localStorage.getItem('userName'),
      warehouseList: [],
      selectedWarehouse: localStorage.getItem('selectedWarehouse') || '',
      selectedWarehouseName: '',
      warehouseLoading: false,
      showWarehouseDropdown: false
    }
  },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight
      },
      set(val) {
        this.$store.commit('common/updateDocumentClientHeight', val)
      }
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold
      }
    },
    userId: {
      get() {
        return this.$store.state.user.id
      },
      set(val) {
        this.$store.commit('user/updateId', val)
      }
    },
    userName: {
      get() {
        return this.$store.state.user.name
      },
      set(val) {
        this.$store.commit('user/updateName', val)
      }
    },
    site: {
      get() {
        return this.$store.state.user.site
      },
      set(val) {
        this.$store.commit('user/updateSite', val)
      }
    },
    languageDefault: {
      get() {
        return this.$store.state.user.languageDefault
      },
      set(val) {
        this.$store.commit('user/updateLanguageDefault', val)
      }
    },
    userDisplay: {
      get() {
        return this.$store.state.user.userDisplay
      },
      set(val) {
        this.$store.commit('user/updateUserDisplay', val)
      }
    },
  },
  mounted() {
    // 点击外部关闭下拉框
    document.addEventListener('click', this.handleDocumentClick)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleDocumentClick)
  },
  created() {
    this.getUserInfo()
    this.getWarehouseList();
  },
  methods: {
    // 处理禁用功能点击
    handleDisabledFeature(featureName) {
      this.$message({
        type: 'warning',
        message: `开发中，敬请期待...`,
        duration: 8000 // 停留 5 秒
      });
    },
    // 处理点击事件
    handleDocumentClick(event) {
      // 检查点击是否在仓库选择器内部
      const warehouseSelector = this.$el.querySelector('.warehouse-selector');
      if (warehouseSelector && !warehouseSelector.contains(event.target)) {
        this.showWarehouseDropdown = false;
      }
    },
    // 获取仓库列表
    getWarehouseList() {
      const currentSite = localStorage.getItem('site');
      if (!currentSite) {
        this.$message.error('请先选择工厂');
        this.$router.push({ name: 'login' });
        return;
      }

      this.warehouseLoading = true;
      getUserAuthorizedWarehouses({ site: currentSite }).then(({data}) => {
        this.warehouseLoading = false;
        if (data && data.code === 0) {
          this.warehouseList = data.data || [];
          // 如果只有一个仓库，自动选中
          if (this.warehouseList.length === 1) {
            this.selectWarehouse(this.warehouseList[0]);
          }
          // 如果之前有选择的仓库，检查是否还在列表中并设置名称
          else if (this.selectedWarehouse) {
            const warehouse = this.warehouseList.find(w => w.warehouseid === this.selectedWarehouse);
            if (warehouse) {
              this.selectedWarehouseName = warehouse.warehousename;
            } else {
              this.selectedWarehouse = '';
              this.selectedWarehouseName = '';
              localStorage.removeItem('selectedWarehouse');
            }
          }
        } else {
          this.$message.error(data.msg || '获取仓库列表失败');
        }
      }).catch(error => {
        this.warehouseLoading = false;
        console.error('获取仓库列表失败:', error);
        this.$message.error('获取仓库列表失败');
      })
    },
    // 切换下拉框显示
    toggleWarehouseDropdown(event) {
      event.stopPropagation(); // 阻止事件冒泡
      this.showWarehouseDropdown = !this.showWarehouseDropdown;
    },
    // 关闭下拉框
    closeWarehouseDropdown() {
      this.showWarehouseDropdown = false;
    },
    // 选择仓库
    selectWarehouse(warehouse) {
      this.selectedWarehouse = warehouse.warehouseid;
      this.selectedWarehouseName = warehouse.warehousename;
      localStorage.setItem('selectedWarehouse', warehouse.warehouseid);
      this.showWarehouseDropdown = false;
      this.$message.success(`已切换到仓库：${warehouse.warehousename}`);
    },
    // 检查是否已选择仓库
    checkWarehouseSelection() {
      if (!this.selectedWarehouse) {
        this.$message.warning('请先选择仓库');
        return false;
      }
      return true;
    },
    // 带仓库检查的路由跳转
    navigateWithWarehouseCheck(routeName) {
      if (this.checkWarehouseSelection()) {
        this.$router.push(routeName);
      }
    },
    // 退出
    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) {
            this.$router.push({name: 'login'})
          }
        })
      }).catch(() => {
      })
    }, // 获取当前管理员信息
    getUserInfo() {
      this.$http({
        url: this.$http.adornUrl('/sys/user/info'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.loading = false
          this.userId = data.user.userId
          this.userName = data.user.username
          this.site = data.user.site
          this.languageDefault = data.user.languageDefault
          this.site = data.user.site
          this.userDisplay = data.user.userDisplay
        }
      })
    },
  },
}
</script>

<style>
.pda-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  font-family: 'Arial', sans-serif;
}

/* 头部栏 */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #17B3A3;
  color: white;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

/* 仓库选择器样式 */
.warehouse-selector {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0;
  user-select: none;
}

.warehouse-text {
  color: white;
  font-size: 16px;
  font-weight: 500;
  margin-right: 8px;
}

.warehouse-selector .el-icon-arrow-down {
  color: white;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.warehouse-selector .el-icon-arrow-down.rotate {
  transform: rotate(180deg);
}

/* 下拉框样式 */
.warehouse-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 120px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.dropdown-item {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

.dropdown-item.active {
  //background: #17B3A3;
  color: #17B3A3;
}

.dropdown-item.loading {
  text-align: center;
  color: #666;
  cursor: default;
}

.dropdown-item.loading:hover {
  background: white;
}

.dropdown-item.loading i {
  margin-right: 6px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.dropdown-item.empty {
  text-align: center;
  color: #999;
  cursor: default;
}

.dropdown-item.empty:hover {
  background: white;
}

.logout-button {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 400;
  transition: all 0.3s ease;
  min-width: 55px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.logout-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.logout-button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.logout-button:hover::before {
  left: 100%;
}

.logout-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.logout-button i {
  margin-right: 6px;
  font-size: 14px;
  flex-shrink: 0;
}

.logout-button span {
  white-space: nowrap;
}

/* 内容区域 */
.content-area {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

/* 功能区域 */
.section {
  margin-bottom: 15px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 9px;
  padding: 6px 0;
  border-bottom: 1.5px solid #17B3A3;
}

.bullet {
  color: #17B3A3;
  font-size: 16px;
  margin-right: 8px;
  font-weight: bold;
}

.section-title {
  color: #17B3A3;
  font-size: 15px;
  font-weight: bold;
}

/* 按钮网格 */
.button-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px;
}

/* 菜单项 */
.menu-item {
  background: white;
  border-radius: 12px;
  padding: 12px 6px 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.menu-item:active {
  transform: scale(0.95);
}

.menu-item.disabled {
  opacity: 0.6;
  position: relative;
}

.menu-item.disabled::after {
  content: '开发中';
  position: absolute;
  top: 6px;
  right: 6px;
  background: #ff9500;
  color: white;
  font-size: 8px;
  padding: 2px 4px;
  border-radius: 6px;
  font-weight: bold;
  z-index: 1;
}

.menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  color: white;
  flex-shrink: 0;
}

.menu-icon.purchase {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.production-return {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.production-inbound {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.sales-return {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.purchase-return {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.production-issue {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.mr {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.outsourcing {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.sales-delivery {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.transport {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.attribute {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.inventory {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.other {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.hu {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-icon.inventory-move {
  background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}

.menu-text {
  font-size: 11px;
  color: #333;
  font-weight: bold;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 响应式设计 */
@media screen and (max-width: 480px) {
  .header-bar {
    padding: 8px 12px;
  }

  .warehouse-text {
    font-size: 14px;
  }

  .logout-button {
    padding: 5px 10px;
    font-size: 12px;
    min-width: 50px;
    border-radius: 14px;
  }

  .logout-button i {
    margin-right: 4px;
    font-size: 12px;
  }

  .warehouse-dropdown {
    min-width: 120px;
  }

  .content-area {
    padding: 8px;
  }

  .section-header {
    padding: 2px 10px;
  }

  .section-title {
    font-size: 13px;
  }

  .button-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .menu-item {
    padding: 8px 4px 6px;
    min-height: 70px;
  }

  .menu-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 6px;
  }

  .menu-text {
    font-size: 10px;
    line-height: 1.1;
    margin-top: 2px;
  }

  .menu-item.disabled::after {
    top: 4px;
    right: 4px;
    font-size: 7px;
    padding: 1px 3px;
    border-radius: 4px;
  }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
  .button-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .menu-item {
    padding: 10px 5px 8px;
    min-height: 75px;
  }

  .menu-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 7px;
  }

  .menu-text {
    font-size: 10.5px;
  }
}

@media screen and (min-width: 768px) {
  .button-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>