257 lines
15 KiB
HTML
257 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>报工 - 工单管理系统</title>
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- 自定义样式 -->
|
|
<link rel="stylesheet" href="css/custom.css">
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<!-- 应用容器 -->
|
|
<div id="app" class="min-h-screen flex flex-col">
|
|
<!-- 顶部导航栏 -->
|
|
<header id="header-nav" class="px-4 py-3 flex items-center justify-between" style="background-color: var(--primary-color)">
|
|
<!-- 返回按钮 -->
|
|
<button id="back-btn" class="p-2 rounded-lg transition-colors hover-primary-bg">
|
|
<svg class="w-6 h-6 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: white;">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- 标题 -->
|
|
<h1 class="text-lg font-semibold text-gray-800" style="color: white;">标准报工页面</h1>
|
|
|
|
<!-- 占位元素保持居中 -->
|
|
<div class="w-10"></div>
|
|
</header>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<main class="flex-1 px-4 py-6">
|
|
<!-- 工单选择区域 -->
|
|
<div id="work-order-selector" class="bg-white rounded-lg shadow-sm p-4 mb-6 cursor-pointer hover:shadow-md transition-shadow">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-3">
|
|
<!-- 工单图标占位符 -->
|
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background-color: var(--primary-light)">
|
|
<svg class="w-5 h-5" style="color: var(--primary-color)" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
|
|
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 001 1h6a1 1 0 001-1V3a2 2 0 012 2v6.5a1.5 1.5 0 01-1.5 1.5h-7A1.5 1.5 0 014 11.5V5z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- 工单文字 -->
|
|
<div>
|
|
<span class="text-gray-800 font-medium">工单</span>
|
|
<span id="selected-work-order-text" class="text-gray-500 ml-2">请选择</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<!-- 扫码按钮 -->
|
|
<button id="scan-btn" class="p-2 border-2 rounded-lg transition-colors border-primary hover-primary-light-bg">
|
|
<svg class="w-5 h-5" style="color: var(--primary-color)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h2M4 4h5v5H4V4zm11 0h5v5h-5V4zM4 15h5v5H4v-5z"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- 下拉箭头 -->
|
|
<svg id="dropdown-arrow" class="w-5 h-5 text-gray-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工单下拉菜单 -->
|
|
<div id="work-order-dropdown" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
|
|
<div class="bg-white rounded-t-lg mt-auto min-h-[70vh] flex flex-col">
|
|
<!-- 下拉菜单头部 -->
|
|
<div class="flex items-center justify-between p-4 border-b">
|
|
<h2 class="text-lg font-semibold text-gray-800">工单编号</h2>
|
|
<button id="close-dropdown" class="p-2 hover:bg-gray-100 rounded-lg">
|
|
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 搜索框 -->
|
|
<div class="p-4 border-b">
|
|
<div class="relative">
|
|
<input id="search-input" type="text" placeholder="搜索工单编号"
|
|
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent focus-primary-ring">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工单列表 -->
|
|
<div id="work-order-list" class="flex-1 overflow-y-auto">
|
|
<!-- 工单列表项将通过JavaScript动态生成 -->
|
|
</div>
|
|
|
|
<!-- 底部操作区 -->
|
|
<div class="p-4 border-t bg-gray-50 flex items-center justify-between">
|
|
<div class="flex items-center space-x-4">
|
|
<label class="flex items-center space-x-2 cursor-pointer">
|
|
<input id="select-all" type="checkbox" class="rounded border-gray-300 checkbox-primary">
|
|
<span class="text-sm text-gray-600">全选</span>
|
|
</label>
|
|
<span id="selected-count" class="text-sm text-gray-600">已选择0个</span>
|
|
</div>
|
|
<button id="confirm-selection" class="btn-primary text-white px-6 py-2 rounded-lg transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
|
|
确定
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 空状态区域 -->
|
|
<div id="empty-state" class="text-center py-12">
|
|
<!-- 插图占位符 -->
|
|
<div class="w-48 h-48 mx-auto mb-6 bg-gray-100 rounded-lg flex items-center justify-center">
|
|
<svg class="w-24 h-24 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm8 2a1 1 0 100 2h2a1 1 0 100-2H11z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
<p class="text-gray-500 text-lg">先选择工单</p>
|
|
</div>
|
|
|
|
<!-- 物料信息区域 -->
|
|
<div id="material-info" class="hidden">
|
|
<!-- 工单信息卡片 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
|
|
<div class="flex items-center justify-between mb-3" style="display: none;">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background-color: var(--primary-light)">
|
|
<svg class="w-5 h-5" style="color: var(--primary-color)" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
|
|
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 001 1h6a1 1 0 001-1V3a2 2 0 012 2v6.5a1.5 1.5 0 01-1.5 1.5h-7A1.5 1.5 0 014 11.5V5z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-800 font-medium">工单</span>
|
|
<span id="selected-work-order-id" class="text-gray-800 font-semibold ml-2"></span>
|
|
</div>
|
|
</div>
|
|
<button class="p-2 border-2 rounded-lg transition-colors border-primary hover-primary-light-bg">
|
|
<svg class="w-5 h-5" style="color: var(--primary-color)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h2M4 4h5v5H4V4zm11 0h5v5h-5V4zM4 15h5v5H4v-5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 物料信息 -->
|
|
<div class="space-y-2">
|
|
<h3 id="material-name" class="text-lg font-semibold text-gray-800"></h3>
|
|
<p id="material-code" class="text-gray-600"></p>
|
|
|
|
<!-- 状态标签 -->
|
|
<div class="flex space-x-2 mt-3">
|
|
<span class="px-3 py-1 rounded-full text-sm font-medium" style="background-color: var(--primary-light); color: var(--primary-dark)">
|
|
合格 <span id="qualified-count">0</span>
|
|
</span>
|
|
<span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-medium">
|
|
不良 <span id="defective-count">0</span>
|
|
</span>
|
|
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">
|
|
待产 <span id="pending-count">0</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 报工表单区域 -->
|
|
<div id="report-form" class="hidden">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">报工</h2>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-4 space-y-4">
|
|
<!-- 数量输入 -->
|
|
<div class="flex items-center justify-between">
|
|
<label class="text-gray-700 font-medium">
|
|
数量 <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="flex items-center space-x-2">
|
|
<input id="quantity" type="number" value="1" min="0"
|
|
class="w-20 px-3 py-2 border border-gray-300 rounded-lg text-right focus:ring-2 focus:border-transparent focus-primary-ring">
|
|
<span class="text-gray-500"> 个</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 辅助数量输入 -->
|
|
<div class="flex items-center justify-between" style="display: none;">
|
|
<label class="text-gray-700 font-medium">
|
|
辅助数量 <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="flex items-center space-x-2">
|
|
<input id="auxiliary-quantity" type="number" value="1" min="0"
|
|
class="w-20 px-3 py-2 border border-gray-300 rounded-lg text-right focus:ring-2 focus:border-transparent focus-primary-ring">
|
|
<span id="auxName" class="text-gray-500">公斤</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工时输入 -->
|
|
<div class="flex items-center justify-between">
|
|
<label class="text-gray-700 font-medium">
|
|
工时
|
|
</label>
|
|
<div class="flex items-center space-x-2">
|
|
<input id="working-hours" type="number" value="1" min="0"
|
|
class="w-20 px-3 py-2 border border-gray-300 rounded-lg text-right focus:ring-2 focus:border-transparent focus-primary-ring">
|
|
<span class="text-gray-500">小时</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 报工开始时间 -->
|
|
<div class="flex items-center justify-between">
|
|
<label class="text-gray-700 font-medium">
|
|
报工开始时间
|
|
</label>
|
|
<div class="flex items-center space-x-2">
|
|
<input id="report-start-time" type="datetime-local" value="1" min="0"
|
|
class="w-50 px-3 py-2 border border-gray-300 rounded-lg text-right focus:ring-2 focus:border-transparent focus-primary-ring">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 报工结束时间 -->
|
|
<div class="flex items-center justify-between">
|
|
<label class="text-gray-700 font-medium">
|
|
报工结束时间
|
|
</label>
|
|
<div class="flex items-center space-x-2">
|
|
<input id="report-end-time" type="datetime-local" value="1" min="0"
|
|
class="w-50 px-3 py-2 border border-gray-300 rounded-lg text-right focus:ring-2 focus:border-transparent focus-primary-ring">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 备注输入 -->
|
|
<div class="flex items-center justify-between">
|
|
<label class="text-gray-700 font-medium">
|
|
备注
|
|
</label>
|
|
<div class="flex items-center space-x-2">
|
|
<input id="remark" type="text" value="" placeholder="请输入备注"
|
|
class="w-60 px-3 py-2 border border-gray-300 rounded-lg text-right focus:ring-2 focus:border-transparent focus-primary-ring">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 提交按钮 -->
|
|
<div id="submit-section" class="hidden p-4">
|
|
<button id="submit-btn" class="w-full btn-primary text-white py-3 rounded-lg font-semibold transition-colors">
|
|
提交
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript文件 -->
|
|
<script src="js/common.js"></script>
|
|
<script src="services/core.js"></script>
|
|
<script src="services/business.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html> |