当前位置： 首页 > article >正文

【uniapp】实战一人员交接班

article 2024/12/22 20:34:48

前言

最近公司在搞一个功能，实现现场交接班的人知道需要作业前，需要提前检查、准备的工作，然后这个活安排到了我这，临时抱佛脚，赶制了一个粗略的成品。

项目成果展示

首页：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

项目结构解析

在这里插入图片描述

项目结构介绍:
1、pages/：存放应用的页面文件，包含页面的 Vue 文件、JS 文件、配置文件等。
2、static/：存放静态资源（如图片、字体等）的文件夹。
3、manifest.json：应用的全局配置文件，用于配置应用的基本信息和平台特定设置。比如打包时，需要生成的 appid、应用名称啥的就在这个文件配置
4、 src/：用于存放源代码，包括组件、工具类、API、状态管理等。
5、node_modules/：存放项目依赖的第三方模块。
6、package.json：定义项目依赖和配置的文件。

APP.VUE:在这文件添加的样式和界面布局 是设置为全局vue界面的样式
pages.json:给所有的page页面添加路由，可以理解为界面的目录；

我的项目没有加啥依赖包，所以部分文件结构没有。
以下是pages.json文件
在这里插入图片描述

开发思路

我刚开发这个项目的时候，完全是瞎搞，一开始就是从业务界面开始着手。但是现在看来，刚开始接触uniapp开发的小白的话，
1、弄清楚整个项目结构、每个文件的作用、项目是怎么去运行的等等基础的知识需要具备。
2、脑海里大概有一个功能啊、界面啥的雏形；
3、界面开发：首页（index.vue）、子页，最后配置
你的界面路由（pages.json），再到(manifest.json)p配置项目基本信息

开发中的一些问题

1、我一直说先理解项目结构的原因就是，我在这踩坑了。我在给项目界面添加路由时，就是原本应该写在index.vue界面中的代码写在了 APP.VUE界面中，除了界面有些杂乱外，其中一个影响就是直接导致功能中的一些交换失效。排查了很久，只知道是哪个APP.VUE添加了新代码后导致的失效，但是具体原因不清楚，百度给的回答是：线程堵塞啥的，但是直接把路由那一块代码删掉，交互依然失效，后面尝试了一下是应该添加在index.vue。那么我为啥一开始不写在INDEX.VUE文件中呢，因为没看到这个文件，很离谱，只注意到了APP.VUE和index.html这俩文件，发现index.html修改了界面但是没生效，所以就加在了app.vue中。
2、就是注意uniapp的语法，一些地方用 ：赋值，一些用=赋值，用错了就报错。

源代码

index.vue代码：

<template>
	<div id="app">
		<!-- 使用按钮触发页面跳转 -->
		<button @click="goToPage('pages/DataRecord/DataRecord')">交接信息录入</button>
		<button @click="goToPage('pages/DataRecord/QueryRecordData')">交接信息查询</button>

		<router-view></router-view>
	</div>
</template>

<script>
	export default {
   
		data() {
   
			return {
   
				title: 'Hello'
			}
		},
		onLoad() {
   
			/* uni.showToast({
				title: '标题',
				duration: 2000
			}); */
		},
		methods: {
   
			goToPage(page) {
   
				uni.navigateTo({
   
					url:'/'+page,
				});

			}
		}
	}
</script>

<style>
	.content {
   
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

.title {
   
  background-color: lightblue;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
 
}
	.logo {
   
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
   
		display: flex;
		justify-content: center;
	}

	.title {
   
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

交接信息录入界面：

<template>
	<view class="container">
		
		
		<view class="form-group-no">
			<text class="label">*工号：</text>
			<input type="text" v-model="employeeId" placeholder="请输入工号" class="input"
				@confirm="NoSerach($event)" @iconClick="xmIconClick" maxlength="9" />
		</view>

<!-- 日期 -->
    <view class="form-group-no">
    <text class="label">*日期:</text>
    <picker mode="date" :start="startDate" :end="endDate" @change="onDateChange">
           <view class="picker">
             <text>{
   {
    selectedDate }}</text>
           </view>
         </picker>
	   </view>
	   
	   <!-- 班次 -->
	  <view class="form-group-no">
	<text class="label">*班次:</text>
	 <picker mode="selector" :range="shifts" @change="onShiftChange">
	        <view class="picker">
	          <text>{
   {
    selectedShift }}</text>
	        </view>
	      </picker>
	     </view> 

		<view class="form-group">
			<text class="label">姓名：</text>
			<input type="text" v-model="employeeName" readonly placeholder="自动带出" class="input"  disabled />
		</view>

		<view class="form-group">
			<text class="label">角色：</text>
			<input type="text" v-model="role" readonly placeholder="自动带出"  class="input" disabled />
		</view>
		<view class="form-group">
			<text class="label">线体：</text>
			<input type="text" v-model="lineCode" readonly placeholder="自动带出" class="input" disabled />
		</view>
		<view class="form-group">
			<text class="label">机台：</text>
			<input type="text" v-model="equipmentCode" readonly placeholder="自动带出" class="input" disabled />
		</view>
		<view class="form-group">
			<text class="label">工序：</text>
			<input type="text" v-model="specCode" readonly placeholder="自动带出" class="input" disabled />
		</view>

		<checkbox-group @change="onCheckboxChange">
		<text class="label">*选择 问题类型（可多选）：</text>
		  <view v-for="(item, index) in data" :key="index" class="checkbox-item">
			<!-- Checkbox列 -->
			<checkbox :value="item" /> 
			<!-- 问题类型列 -->
			<text>{
   {
    item.MainProblem +" : "}}</text>
			<!-- 问题描述列 -->
			<text>{
   {
    item.SubProblem }}</text>
		  </view>
		</checkbox-group>
	
		<view class="form-group">
			<text class="label">备注：</text>
			<input type="text" v-model="remark" placeholder="请输入备注信息" class="input" />
		</view>

		<view class="form-group">
			<text class="label">交接人工号：</text>
			<input type="text" v-model="operatorId" @confirm="verifyNo($event)" placeholder="请输入交接人工号" class="input" />
		</view>

		<view class="form-group">
			<text class="label">交接人姓名：</text>
			<input type="text" v-model="operatorName" readonly placeholder="自动带出" class="input" @confirm="verfiyNo" />
		</view>

		<button @click="submitForm" class="submit-btn">确认提交</button>
	</view>
</template>

<script>
	uni.showToast({
   
		title:'asdasdasd'
	});
	export default {
   
		name:'DataRecord',
		data() {
   
			return {
   
				checkstatus:null,
				 data: [],//{MainProblem:'',SubProblem:''}
				employeeId: '', // 工号
				employeeName: '', // 姓名
				role: '', // 角色
				lineCode: '', // 产线
				equipmentCode: '', // 设备机台
				specCode: '',

http://www.kler.cn/a/444327.html

相关文章：

  • 【活动邀请·深圳】深圳COC社区 深圳 AWS UG 2024 re:Invent re:Cap
  • lambda初探（一）
  • JavaScript 中常见内置对象的知识点及示例总结
  • 知网研学 | 知网文献（CAJ+PDF）批量下载
  • CLION中运行远程的GUI程序
  • AI的进阶之路：从机器学习到深度学习的演变（二）
  • 【go语言】reflect包与类型推断
  • 电视机通用遥控技术标准正式公布
  • 开源 AI 智能名片小程序源码在个人 IP 打造中的应用与价值
  • 从 Promise 到 Axios：轻松解锁异步编程
  • WSL Ubuntu
  • Iris简单实现Go web服务器
  • springboot449教学资源共享平台(论文+源码)_kaic
  • OpenCV圆形标定板检测算法findGrid原理详解
  • docker设置容器自动启动
  • ＜论文＞如何构建一个更鲁棒的Bert？
  • 源码编译构建LAMP
  • 跟着AI 学AI开发二，本地部署自己的Chat GPT
  • 【设计模式】观察者模式深度讲解
  • 记一MySQL连接速度慢的问题
  • Docker 学习
  • electron打包linux环境
  • 【操作系统】每日 3 题（六十八）
  • Marp 教程：如何在 VSCode 中引入自定义样式和主题
  • 量子芯片在新医疗领域的应用研究展望
  • # Oracle 深入学习 Part 11: Managing Tables（管理表)