You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
897 lines
24 KiB
897 lines
24 KiB
<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 style="font-size: 18px">{{username}}</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" @click="navigateWithWarehouseCheck('productionInboundProduction')">
|
|
<div class="menu-icon production-inbound">
|
|
<van-icon name="cart" size="24" />
|
|
</div>
|
|
<div class="menu-text">生产入库</div>
|
|
</div>
|
|
<div class="menu-item" @click="navigateWithWarehouseCheck('productionreturn')">
|
|
<div class="menu-icon production-return">
|
|
<van-icon name="revoke" size="24" />
|
|
</div>
|
|
<div class="menu-text">生产退料</div>
|
|
</div>
|
|
<div class="menu-item" @click="navigateWithWarehouseCheck('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" @click="navigateWithWarehouseCheck('customerissue')">
|
|
<!-- <div class="menu-item disabled" @click="handleDisabledFeature('customerissue')"> -->
|
|
<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('callOutToStation')">
|
|
<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('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('palletSorting')">
|
|
<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('palletSearch')">
|
|
<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('palletChangeStation')">
|
|
<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('emptyPalletAssembly')">
|
|
<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('cancelWcsPallet')">
|
|
<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('palletMerge')">
|
|
<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" @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('palletAssembly')">
|
|
<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('palletManualMove')">
|
|
<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('wmsCancelReserve')">
|
|
<div class="menu-icon inventory">
|
|
<van-icon name="orders-o" size="24" />
|
|
</div>
|
|
<div class="menu-text">WMS取消预留</div>
|
|
</div>
|
|
<div class="menu-item" @click="navigateWithWarehouseCheck('palletSortingNoAgv')">
|
|
<div class="menu-icon purchase">
|
|
<van-icon name="shopping-cart-o" size="24" />
|
|
</div>
|
|
<div class="menu-text">无AGV分拣组盘</div>
|
|
</div>
|
|
<div class="menu-item" @click="navigateWithWarehouseCheck('callOutForHetuo')">
|
|
<div class="menu-icon purchase">
|
|
<van-icon name="shopping-cart-o" size="24" />
|
|
</div>
|
|
<div class="menu-text">Call栈板手工合托</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" @click="navigateWithWarehouseCheck('labelQuery')">
|
|
<div class="menu-icon inventory">
|
|
<van-icon name="orders-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 localStorage.getItem('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: 38px;
|
|
height: 38px;
|
|
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.customer-issue {
|
|
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>
|