|
|
<template>
|
|
|
<view class="page-container">
|
|
|
<view class="header-section">
|
|
|
<text class="header-title">管理中心</text>
|
|
|
<text class="header-subtitle">系统配置与管理</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="search-section">
|
|
|
<view class="search-wrapper">
|
|
|
<view class="search-icon">
|
|
|
<text class="iconfont icon-search"></text>
|
|
|
</view>
|
|
|
<input v-model="menuSearchKeyword" class="search-input" type="text" placeholder="搜索菜单"
|
|
|
placeholder-class="input-placeholder" @input="handleMenuSearch" @confirm="handleMenuSearch" />
|
|
|
<view v-if="menuSearchKeyword" class="clear-btn" @click="clearMenuSearch">
|
|
|
<text class="clear-icon">×</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<scroll-view scroll-y class="content-scroll" :scroll-top="scrollTop" scrollIntoView="top">
|
|
|
<view id="top" class="module-section">
|
|
|
<view class="module-header">
|
|
|
<view class="module-icon" style="background: #1a3a5c;">
|
|
|
<text class="icon-text">⚙️</text>
|
|
|
</view>
|
|
|
<text class="module-title">生产管控</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="submodule-list">
|
|
|
<view class="submodule-group">
|
|
|
<view class="submodule-header">
|
|
|
<text class="submodule-name">生产计划</text>
|
|
|
</view>
|
|
|
<view class="function-grid">
|
|
|
<view class="function-item" @click="handleClick('生产任务')">
|
|
|
<view class="function-icon" style="background: rgba(26, 58, 92, 0.1);">
|
|
|
<text class="icon-inner">📋</text>
|
|
|
</view>
|
|
|
<text class="function-name">生产任务</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('生产计划')">
|
|
|
<view class="function-icon" style="background: rgba(26, 58, 92, 0.1);">
|
|
|
<text class="icon-inner">📊</text>
|
|
|
</view>
|
|
|
<text class="function-name">生产计划</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('生产投料')">
|
|
|
<view class="function-icon" style="background: rgba(26, 58, 92, 0.1);">
|
|
|
<text class="icon-inner">🏭</text>
|
|
|
</view>
|
|
|
<text class="function-name">生产投料</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="divider"></view>
|
|
|
|
|
|
<view class="submodule-group">
|
|
|
<view class="submodule-header">
|
|
|
<text class="submodule-name">仓储管理</text>
|
|
|
</view>
|
|
|
<view class="function-grid">
|
|
|
<view class="function-item" @click="handleClick('仓库信息')">
|
|
|
<view class="function-icon" style="background: rgba(45, 90, 135, 0.1);">
|
|
|
<text class="icon-inner">🏢</text>
|
|
|
</view>
|
|
|
<text class="function-name">仓库信息</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('出入库')">
|
|
|
<view class="function-icon" style="background: rgba(45, 90, 135, 0.1);">
|
|
|
<text class="icon-inner">🚚</text>
|
|
|
</view>
|
|
|
<text class="function-name">出入库</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('库存报表')">
|
|
|
<view class="function-icon" style="background: rgba(45, 90, 135, 0.1);">
|
|
|
<text class="icon-inner">📈</text>
|
|
|
</view>
|
|
|
<text class="function-name">库存报表</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="divider"></view>
|
|
|
|
|
|
<view class="submodule-group">
|
|
|
<view class="submodule-header">
|
|
|
<text class="submodule-name">质量管理</text>
|
|
|
</view>
|
|
|
<view class="function-grid">
|
|
|
<view class="function-item" @click="handleClick('检验类型')">
|
|
|
<view class="function-icon" style="background: rgba(61, 122, 181, 0.1);">
|
|
|
<text class="icon-inner">✓</text>
|
|
|
</view>
|
|
|
<text class="function-name">检验类型</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('检验项库')">
|
|
|
<view class="function-icon" style="background: rgba(61, 122, 181, 0.1);">
|
|
|
<text class="icon-inner">📚</text>
|
|
|
</view>
|
|
|
<text class="function-name">检验项库</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('检验模板')">
|
|
|
<view class="function-icon" style="background: rgba(61, 122, 181, 0.1);">
|
|
|
<text class="icon-inner">📄</text>
|
|
|
</view>
|
|
|
<text class="function-name">检验模板</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('检验记录')">
|
|
|
<view class="function-icon" style="background: rgba(61, 122, 181, 0.1);">
|
|
|
<text class="icon-inner">📝</text>
|
|
|
</view>
|
|
|
<text class="function-name">检验记录</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="module-section">
|
|
|
<view class="module-header">
|
|
|
<view class="module-icon" style="background: #ff8c00;">
|
|
|
<text class="icon-text">🔧</text>
|
|
|
</view>
|
|
|
<text class="module-title">设备运维</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="submodule-list">
|
|
|
<view class="submodule-group">
|
|
|
<view class="submodule-header">
|
|
|
<text class="submodule-name">设备管理</text>
|
|
|
</view>
|
|
|
<view class="function-grid">
|
|
|
<view class="function-item" @click="handleClick('设备分类')">
|
|
|
<view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
|
|
|
<text class="icon-inner">📋</text>
|
|
|
</view>
|
|
|
<text class="function-name">设备分类</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('设备台账')">
|
|
|
<view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
|
|
|
<text class="icon-inner">📊</text>
|
|
|
</view>
|
|
|
<text class="function-name">设备台账</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('设备关键件')">
|
|
|
<view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
|
|
|
<text class="icon-inner">🔩</text>
|
|
|
</view>
|
|
|
<text class="function-name">设备关键件</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="submodule-group">
|
|
|
<view class="submodule-header">
|
|
|
<text class="submodule-name">点检保养</text>
|
|
|
</view>
|
|
|
<view class="function-grid">
|
|
|
<view class="function-item" @click="handleClick('点检项库')">
|
|
|
<view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
|
|
|
<text class="icon-inner">📝</text>
|
|
|
</view>
|
|
|
<text class="function-name">点检项库</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('点检模板')">
|
|
|
<view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
|
|
|
<text class="icon-inner">📄</text>
|
|
|
</view>
|
|
|
<text class="function-name">点检模板</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('点检任务')">
|
|
|
<view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
|
|
|
<text class="icon-inner">✅</text>
|
|
|
</view>
|
|
|
<text class="function-name">点检任务</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('点检记录')">
|
|
|
<view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
|
|
|
<text class="icon-inner">📜</text>
|
|
|
</view>
|
|
|
<text class="function-name">点检记录</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="submodule-group">
|
|
|
<view class="submodule-header">
|
|
|
<text class="submodule-name">维修管理</text>
|
|
|
</view>
|
|
|
<view class="function-grid">
|
|
|
<view class="function-item" @click="handleClick('维修项目')">
|
|
|
<view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
|
|
|
<text class="icon-inner">🔧</text>
|
|
|
</view>
|
|
|
<text class="function-name">维修项目</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('维修单')">
|
|
|
<view class="function-icon" style="background: rgba(255, 140, 0, 0.1);">
|
|
|
<text class="icon-inner">📋</text>
|
|
|
</view>
|
|
|
<text class="function-name">维修单</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="module-section">
|
|
|
<view class="module-header">
|
|
|
<view class="module-icon" style="background: #9c27b0;">
|
|
|
<text class="icon-text">🧱</text>
|
|
|
</view>
|
|
|
<text class="module-title">模具管理</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="submodule-list">
|
|
|
<view class="submodule-group">
|
|
|
<view class="submodule-header">
|
|
|
<text class="submodule-name">模具管理</text>
|
|
|
</view>
|
|
|
<view class="function-grid">
|
|
|
<view class="function-item" @click="handleClick('模具类型')">
|
|
|
<view class="function-icon" style="background: rgba(156, 39, 176, 0.1);">
|
|
|
<text class="icon-inner">📋</text>
|
|
|
</view>
|
|
|
<text class="function-name">模具类型</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('模具台账')">
|
|
|
<view class="function-icon" style="background: rgba(156, 39, 176, 0.1);">
|
|
|
<text class="icon-inner">📊</text>
|
|
|
</view>
|
|
|
<text class="function-name">模具台账</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('模具出库')">
|
|
|
<view class="function-icon" style="background: rgba(156, 39, 176, 0.1);">
|
|
|
<text class="icon-inner">📤</text>
|
|
|
</view>
|
|
|
<text class="function-name">模具出库</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('模具入库')">
|
|
|
<view class="function-icon" style="background: rgba(156, 39, 176, 0.1);">
|
|
|
<text class="icon-inner">📥</text>
|
|
|
</view>
|
|
|
<text class="function-name">模具入库</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('上下模')">
|
|
|
<view class="function-icon" style="background: rgba(156, 39, 176, 0.1);">
|
|
|
<text class="icon-inner">🔄</text>
|
|
|
</view>
|
|
|
<text class="function-name">上下模</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="submodule-group">
|
|
|
<view class="submodule-header">
|
|
|
<text class="submodule-name">点检保养</text>
|
|
|
</view>
|
|
|
<view class="function-grid">
|
|
|
<view class="function-item" @click="handleClick('点检项库')">
|
|
|
<view class="function-icon" style="background: rgba(0, 188, 212, 0.1);">
|
|
|
<text class="icon-inner">📝</text>
|
|
|
</view>
|
|
|
<text class="function-name">点检项库</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('点检模板')">
|
|
|
<view class="function-icon" style="background: rgba(0, 188, 212, 0.1);">
|
|
|
<text class="icon-inner">📄</text>
|
|
|
</view>
|
|
|
<text class="function-name">点检模板</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('点检任务')">
|
|
|
<view class="function-icon" style="background: rgba(0, 188, 212, 0.1);">
|
|
|
<text class="icon-inner">✅</text>
|
|
|
</view>
|
|
|
<text class="function-name">点检任务</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('点检记录')">
|
|
|
<view class="function-icon" style="background: rgba(0, 188, 212, 0.1);">
|
|
|
<text class="icon-inner">📜</text>
|
|
|
</view>
|
|
|
<text class="function-name">点检记录</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="module-section">
|
|
|
<view class="module-header">
|
|
|
<view class="module-icon" style="background: #18bc37;">
|
|
|
<text class="icon-text">📦</text>
|
|
|
</view>
|
|
|
<text class="module-title">基础数据</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="submodule-list">
|
|
|
<view class="submodule-group">
|
|
|
<view class="submodule-header">
|
|
|
<text class="submodule-name">产品管理</text>
|
|
|
</view>
|
|
|
<view class="function-grid">
|
|
|
<view class="function-item" @click="handleClick('产品物料分类')">
|
|
|
<view class="function-icon" style="background: rgba(24, 188, 55, 0.1);">
|
|
|
<text class="icon-inner">🏷️</text>
|
|
|
</view>
|
|
|
<text class="function-name">产品物料分类</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('产品物料信息')">
|
|
|
<view class="function-icon" style="background: rgba(24, 188, 55, 0.1);">
|
|
|
<text class="icon-inner">📋</text>
|
|
|
</view>
|
|
|
<text class="function-name">产品物料信息</text>
|
|
|
</view>
|
|
|
<view class="function-item" @click="handleClick('产品BOM')">
|
|
|
<view class="function-icon" style="background: rgba(24, 188, 55, 0.1);">
|
|
|
<text class="icon-inner">🌳</text>
|
|
|
</view>
|
|
|
<text class="function-name">产品BOM</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<view class="go-top-btn" @click="goTop">
|
|
|
<text class="go-top-icon">↑</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref } from 'vue';
|
|
|
|
|
|
const scrollTop = ref(0);
|
|
|
const menuSearchKeyword = ref('');
|
|
|
|
|
|
function goTop() {
|
|
|
uni.pageScrollTo({
|
|
|
scrollTop: 0,
|
|
|
duration: 300
|
|
|
})
|
|
|
}
|
|
|
|
|
|
function handleMenuSearch() {
|
|
|
if (menuSearchKeyword.value.trim() === '') {
|
|
|
return;
|
|
|
}
|
|
|
uni.showToast({
|
|
|
title: `搜索: ${menuSearchKeyword.value}`,
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function clearMenuSearch() {
|
|
|
menuSearchKeyword.value = '';
|
|
|
}
|
|
|
|
|
|
function handleClick(name) {
|
|
|
const routeMap = {
|
|
|
'仓库信息': '/pages_function/pages/warehouse/index',
|
|
|
'检验类型': '/pages_function/pages/inspection/index',
|
|
|
'检验项库': '/pages_function/pages/inspectionItem/index',
|
|
|
'检验模板': '/pages_function/pages/inspectionTemplate/index',
|
|
|
'产品物料分类': '/pages_function/pages/materialCategory/index',
|
|
|
'产品物料信息': '/pages_function/pages/materialInfo/index',
|
|
|
'产品BOM': '/pages_function/pages/productBom/index',
|
|
|
'设备分类': '/pages_function/pages/equipmentCategory/index',
|
|
|
'设备台账': '/pages_function/pages/equipmentLedger/index',
|
|
|
'设备关键件': '/pages_function/pages/equipmentKeypart/index',
|
|
|
'模具类型': '',
|
|
|
'模具台账': '',
|
|
|
'模具出库': '',
|
|
|
'模具入库': '',
|
|
|
'上下模': '',
|
|
|
'点检项库': '',
|
|
|
'点检模板': '',
|
|
|
'点检任务': '',
|
|
|
'点检记录': '',
|
|
|
'维修项目': '',
|
|
|
'维修单': ''
|
|
|
};
|
|
|
|
|
|
const url = routeMap[name];
|
|
|
if (url) {
|
|
|
uni.navigateTo({ url });
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: `进入${name}`,
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page-container {
|
|
|
min-height: 100vh;
|
|
|
background-color: #f0f2f5;
|
|
|
}
|
|
|
|
|
|
.header-section {
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
padding: 60rpx 40rpx;
|
|
|
padding-top: 80rpx;
|
|
|
|
|
|
.header-title {
|
|
|
display: block;
|
|
|
font-size: 44rpx;
|
|
|
font-weight: bold;
|
|
|
color: #ffffff;
|
|
|
margin-bottom: 12rpx;
|
|
|
}
|
|
|
|
|
|
.header-subtitle {
|
|
|
display: block;
|
|
|
font-size: 26rpx;
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.search-section {
|
|
|
background: #ffffff;
|
|
|
padding: 20rpx 30rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.search-wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
background: #f5f7fa;
|
|
|
border-radius: 48rpx;
|
|
|
padding: 0 24rpx;
|
|
|
}
|
|
|
|
|
|
.search-icon {
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
.iconfont {
|
|
|
font-size: 36rpx;
|
|
|
color: #666666;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.search-input {
|
|
|
flex: 1;
|
|
|
height: 72rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
background: transparent;
|
|
|
}
|
|
|
|
|
|
.input-placeholder {
|
|
|
color: #999999;
|
|
|
}
|
|
|
|
|
|
.clear-btn {
|
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
&:active {
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
|
|
|
.clear-icon {
|
|
|
font-size: 36rpx;
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.content-scroll {
|
|
|
padding: 24rpx;
|
|
|
}
|
|
|
|
|
|
.module-section {
|
|
|
background: #ffffff;
|
|
|
border-radius: 20rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
|
|
|
.module-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 28rpx 24rpx;
|
|
|
background: #fafbfc;
|
|
|
border-bottom: 1rpx solid #e8eaed;
|
|
|
|
|
|
.module-icon {
|
|
|
width: 72rpx;
|
|
|
height: 72rpx;
|
|
|
border-radius: 16rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
.icon-text {
|
|
|
font-size: 36rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.module-title {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
color: #1a3a5c;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.submodule-list {
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
.submodule-group {
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.submodule-header {
|
|
|
margin-bottom: 16rpx;
|
|
|
|
|
|
.submodule-name {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
color: #666666;
|
|
|
padding-left: 16rpx;
|
|
|
border-left: 6rpx solid #1a3a5c;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.divider {
|
|
|
height: 2rpx;
|
|
|
background: #e8eaed;
|
|
|
margin: 24rpx 0;
|
|
|
}
|
|
|
|
|
|
.function-grid {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
|
|
|
.function-item {
|
|
|
width: calc(25% - 15rpx);
|
|
|
background: #f8fafc;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 28rpx 12rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
&:active {
|
|
|
background: #e8f4ff;
|
|
|
transform: scale(0.98);
|
|
|
}
|
|
|
|
|
|
.function-icon {
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
border-radius: 18rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-bottom: 16rpx;
|
|
|
|
|
|
.icon-inner {
|
|
|
font-size: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.function-name {
|
|
|
font-size: 24rpx;
|
|
|
color: #333333;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.go-top-btn {
|
|
|
position: fixed;
|
|
|
bottom: 120rpx;
|
|
|
right: 30rpx;
|
|
|
width: 88rpx;
|
|
|
height: 88rpx;
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
box-shadow: 0 8rpx 24rpx rgba(26, 58, 92, 0.3);
|
|
|
z-index: 999;
|
|
|
|
|
|
&:active {
|
|
|
transform: scale(0.95);
|
|
|
}
|
|
|
|
|
|
.go-top-icon {
|
|
|
font-size: 44rpx;
|
|
|
color: #ffffff;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 自定义 TabBar */
|
|
|
</style>
|