前言
最近公司在搞一个功能，实现现场交接班的人知道需要作业前，需要提前检查、准备的工作，然后这个活安排到了我这，临时抱佛脚，赶制了一个粗略的成品。
项目成果展示
首页：
项目结构解析
项目结构介绍:
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: '',