实现 TaskReport 工具

分类：general ｜ 标签：报工、质检、生产、车间 车间任务报工与质检工具，支持报工记录、质量检验与基础设置，单机版数据本地存储

2.1 功能说明

车间任务报工与质检工具，支持报工记录、质量检验与基础设置，单机版数据本地存储

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• selectScene()
• goHome()
• goBack()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import { API_CONFIG } from './services/config'
import SceneHome from './components/SceneHome.vue'
import ReportWork from './components/ReportWork.vue'
import QualityCheck from './components/QualityCheck.vue'
import Dispatch from './components/Dispatch.vue'
import Settings from './components/Settings.vue'

const router = useRouter()
const currentScene = ref('') // '' = 首页场景选择

const modeText = computed(() => (API_CONFIG.mode === 'remote' ? '后端服务器' : '单机（本地）'))
const modeTagType = computed(() => (API_CONFIG.mode === 'remote' ? 'success' : 'info'))

function selectScene(key) {
  currentScene.value = key
}
function goHome() {
  currentScene.value = ''
}
function goBack() {
  router.back()
}

2.3 效果截图

暂未生成该工具的效果截图。

工具访问地址：https://www.i91tools.com/tools/task-report