【uniapp】实战一人员交接班

前言

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

项目成果展示

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

项目结构解析

在这里插入图片描述

项目结构介绍:
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: '',