【Vue】【uni-app】实现发起工单页面

news2024/12/26 20:55:36

修改了上次的导航栏为二级导航

<template>
	<view class="leftNav">
		<div class="logo">
			显鹅易见
		</div>
		<uni-collapse class="item" accordion="true">
			<uni-collapse-item title="养殖场总部">
				<a href="#/pages/HeadQuarter/HeadQuarter">养殖场总部</a>
			</uni-collapse-item>
			<uni-collapse-item title="养殖场">
				<a href="#/pages/Farm/Farm">养殖场</a>
			</uni-collapse-item>
			<uni-collapse-item title="出入栏管理">
				<a href="#/pages/FarmManagement/ShowInOutCount">出入栏管理</a>
			</uni-collapse-item>
			<uni-collapse-item title="工单管理">
				<a>周期工单</a>
				<a href="#/pages/WorkOrderManagement/WorkOrderManagement">工单列表</a>
				<a href="#/pages/WorkOrderManagement/InitiateWorkOrder">发起工单</a>
			</uni-collapse-item>
			<uni-collapse-item title="管理面板">
				<a href="#/pages/manage/manage">管理面板</a>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

实现了发起工单页面

<template>
	<navgation />
	<view class="right">
		<h2 class="section">发起工单</h2>
		<view class="section">
			<text>负责人员ID: </text>
			<view class="block">
				<uni-easyinput placeholder="请输入ID" @change="inputPersonID"></uni-easyinput>
			</view>
			<text>工单类型: </text>
			<view class="block">
				<uni-data-select v-model="kind" :localdata="kinds"></uni-data-select>
			</view>
		</view>
		<view class="section">
			<text>派发日期: </text>
			<view class="block">
				<uni-datetime-picker v-model="dispatchDate"></uni-datetime-picker>
			</view>
		</view>
		<view class="section">
			<text>指定完成日期: </text>
			<view class="block">
				<uni-datetime-picker v-model="taskDate"></uni-datetime-picker>
			</view>
		</view>
		<view class="section">
			<text>关联养殖场ID: </text>
			<view class="block">
				<uni-easyinput placeholder="请输入ID" @change="inputAssociateID"></uni-easyinput>
			</view>
		</view>
		<view class="section">
			<text>工单标题: </text>
			<view class="block">
				<uni-easyinput placeholder="请输入标题" @change="inputTitle"></uni-easyinput>
			</view>
		</view>
		<view class="section">
			<text>工单内容: </text>
			<view style="width: 35%;">
				<uni-easyinput placeholder="请输入内容" type="textarea" @change="inputContent"></uni-easyinput>
			</view>
		</view>
		<view class="section">
			<button type="primary" size="mini" @click="initiate">发起工单</button>
		</view>
	</view>
</template>

<script>
	import navigation from '../../components/navgation/navgation.vue';
	export default {
		data() {
			return {
				kind: '',
				kinds: [{
					text: '周期工单',
					value: 0
				}, {
					text: '临时工单',
					value: 1
				}, {
					text: '紧急工单',
					value: 2
				}],
				personID: "",
				associateID: "",
				dispatchDate: '',
				taskDate: '',
				title: "",
				content: ""
			};
		},
		methods: {
			inputID(e) {
				this.ID = e;
			},
			inputPersonID(e) {
				this.personID = e;
			},
			inputAssociateID(e) {
				this.associateID = e;
			},
			inputTitle(e) {
				this.title = e;
			},
			inputContent(e) {
				this.content = e;
			},
			initiate() {
				uni.showModal({
					title: '提示',
					content: '是否确定发起工单',
					success: (res)=>{
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			sendRequst() {
				uni.request({
					url: 'http://192.168.6.128:8080', // 接口地址
					method: 'POST',
					data: {
						kinds: this.kinds[this.kind].text,
						personID: this.personID,
						associateID: this.associateID,
						dispatchDate: this.dispatchDate,
						taskDate: this.taskDate,
						title: this.title,
						content: this.content
					},
					header: {
						'content-type': 'application/json' // 自定义请求头信息
					},
					success: (response) => {
						if (response.statusCode == 200) {
							uni.showToast({
								title: '提交成功'
							});
						} else {
							console.log('提交失败:', response);
							uni.showToast({
								title: '提交失败',
								icon: 'error'
							})
						}
					},
					fail: (response) => {
						console.log('请求后端失败:', response);
						uni.showToast({
							title: '提交失败',
							icon: 'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.right {
		margin-top: 40rpx;
		margin-left: 440rpx;
	}

	.section {
		display: flex;
		align-items: center;
		column-gap: 20rpx;
		margin: 20rpx;
	}

	.block {
		width: 20%;
		border-radius: 10rpx;
		margin-right: 20%;
	}

	button {

		border-radius: 20rpx;
	}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1265699.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

记一次域控迁移并升级

域环境&#xff1a; 域控级别&#xff1a;windows server2008R2 主域控&#xff1a;win server 2008R2 辅域控&#xff1a;win server 2016 需求&#xff1a;新购一台win server 2022&#xff0c;需要将主域控迁移到新服务器中&#xff0c;并升级域控级别为最新 检查域控 …

如何应对雨天飞行的挑战?无人机机库防护能力解析

一、 背景介绍 无人机机库是无人机停放和起降场所&#xff0c;类似传统飞机的 hangar&#xff08;飞机库&#xff09;。它是一个专门用于存储、维护和保护无人机的设施。无人机机库的存在有助于提高无人机的安全性&#xff0c;同时也为无人机提供了一个有序的管理场所。 雨天…

Django RestFramework

安装restframework pip install djangorestframework pip install markdown # Markdown support for the browsable API. pip install django-filter # Filtering support安装其他模块 pip install pillowpip install django-cors-headers建模和迁移数据 drf包含四个…

局域网协议:ICMP (Internet Control Message Protocol,互联网控制消息协议)

ICMP&#xff08;Internet Control Message Protocol&#xff0c;互联网控制消息协议&#xff09;是用于在IP网络中传递控制消息的协议。它通常被用于网络设备之间交换状态信息和错误报告&#xff0c;以及执行网络诊断和故障排除。 文章目录 ICMP主要功能ICMP的工作原理ICMP消…

Spring Boot 3 + Spring Security 6 最新版本修改 Json 登录后 RememberMe 功能问题失效的解决方案

当 Spring Boot 版本更新到 3 之后&#xff0c;最低要求的 JDK 版本变为 17&#xff0c;相应的 最新版本的 Spring Security 的配置也发生了变化&#xff0c;一下主要讲解一些新的 Spring Security 的配置方法 1. 配置由继承WebSeucrityConfigurerAdapter变成只需添加一个Secur…

查看当前目录下文件数量

查看当前目录下文件数量 查看文件夹数量查看文件数查看所有文件&#xff08;包括子文件&#xff09;数量查看所有目录&#xff08;包括子目录&#xff09;数量查看图片数量 查看文件夹数量 ls -l | grep ^d | wc -l查看文件数 不包含文件夹 ls -l | grep ^- | wc -l查看所有…

Vue 定义只读数据 readonly 与 shallowReadonly

readonly 让一个响应式数据变为 **深层次的只读数据**。 shallowReadonly 让一个响应式数据变为 **浅层次的只读数据**&#xff0c;只读第一层。 isReadonly 判断一个数据是不是只读数据。 应用场景&#xff1a;不希望数据被修改时使用。 readonly深层次只读&#xff1a; …

Matplotlib直方图的创建_Python数据分析与可视化

Matplotlib直方图的创建 概念区分绘制直方图 概念区分 什么是直方图&#xff1f; 直方图&#xff08;Histogram&#xff09;又称质量分布图&#xff0c;是统计报告图的一种&#xff0c;由一系列高度不等的纵向条纹或线段表示数据分布的情况&#xff0c;一般用横轴表示数据所属…

16.spirng源码解析-registerBeanPostProcessors

注册拦截bean创建的bean处理器 此部分实质上是在BeanDefinitions中寻找BeanPostProcessor&#xff0c;之后调用BeanFactory.addBeanPostProcessor方法保存在一个List中&#xff0c;注意添加时仍然有优先级的概念&#xff0c;优先级高的在前面。

ESP-Mesh-Lite 用户指南

ESP-MESH-LITE 本指南提供有关 Mesh-Lite 协议的介绍。 概述 ESP-MESH-LITE 是一套建立在 Wi-Fi 协议之上的网络协议。ESP-MESH-LITE 允许分布在大范围区域内&#xff08;室内和室外&#xff09;的大量设备&#xff08;下文称节点&#xff09;在同一个 WLAN&#xff08;无线…

聚观早报 |红魔9 Pro开卖;真我GT5 Pro定档

【聚观365】11月29日消息 红魔9 Pro开卖 真我GT5 Pro定档 一加12镜头细节公布 Redmi K70 Pro将搭载夜枭算法 苹果Vision Pro头显下月量产 红魔9 Pro开卖 红魔电竞旗舰最新力作——红魔9 Pro系列正式发布。作为一款全能电竞旗舰&#xff0c;该机搭载了第三代骁龙8移动平台…

如何恢复已删除的照片 ?适用于 Windows 的Android 数据恢复软件值得尝试

“我丢失了 Android 手机上的照片&#xff0c;有人告诉我使用恢复程序来找回所有手机数据。我使用的是 Windows 10 和华为 手机&#xff0c;对于 Windows最有效的 Android 数据恢复是什么&#xff1f;” Android 恢复程序用于检索丢失或删除的文件&#xff0c;如照片、联系人、…

pytorch读取tiny-imagenet-200的验证集(val)

ori_train torchvision.datasets.ImageFolder(root args.datadir /tiny-imagenet-200/train/, transformtransform)#可以获取class_idx的映射class_idx ori_train.class_to_idx val_annotations.txt中存储着每个图片对应的类别 获取验证集的标签 test_target []#读取val_…

uniapp微信小程序中阻止事件冒泡

开发场景&#xff1a;列表中展示地块的数据信息&#xff0c;用户可以点击列表进入地块的详情界面&#xff0c;也可以点击列表中的星星按钮进行收藏 遇到的问题&#xff1a;每次点击星星的时候&#xff0c;都会触发父级的点击事件&#xff0c;从而进入到详情界面 原本的代码&am…

红队攻防之hash登录RDP

没什么好害怕&#xff0c;孩子放心去飞吧&#xff0c;在你的身后有个等你的家 Restricted Admin Mode 受限管理模式是一项 Windows 功能&#xff0c;可防止将 RDP 用户的凭据存储在建立 RDP 连接的计算机的内存中。 这是用来防止用户&#xff08;管理员&#xff09;在 RDP 进…

VT-VSPA1-1X比例压力阀控制板

替代力士乐同型号,可以完全互换使用&#xff1b;适用于力士乐系列所有无电位置反馈的直动式和先导式比例压力阀的控制&#xff1b;外置欧板式连接&#xff0c;VT-VSPA1-1X型放大器配套支架型号&#xff1a;VT-3002-1X/32D或VT-3002-2X/32D&#xff1b; VT-VSPA2-1-1X/T1、VT-V…

面试必须要知道的MySQL知识--索引

10 索引 10.1 数据页存储结构 10.1.1 数据页的各个部分 在讲索引之前&#xff0c;让我们看看一个单独的数据页是什么样子的 去除掉一些我们不太需要那么关注的部分后&#xff0c;简化如下&#xff1a; 也就是说平时我们在一个表里插入的一行一行的数据会存储在数据页里&#…

DDR-MIG 学习记录

MIG调试总结&#xff1a; 对vivado软件中用于控制DDR2 / DDR3 的 控制器MIG(Memory Interface Generator)IP核进行了仿真测试&#xff0c;以学习如何用IP核来控制FPGA板载SDRAM的读写。我们只需要学会MIG的接口控制就可以。 ①配置IP核 Xilinx 的 DDR 控制器的名称简写为 MIG&…

解密Long型数据传递:Spring Boot后台如何避免精度丢失问题

前端和后端之间的数据传递至关重要。然而&#xff0c;当涉及到Long类型数据时&#xff0c;可能会出现精度丢失问题&#xff0c;这会影响数据的准确性。本文将为你介绍两种解决方案&#xff0c;帮助你确保Long类型数据在前端和后端之间的精确传递。 精度丢失测试 访问:http://l…

深度学习可解释性Python库

本文整理了10个常用于可解释AI的Python库&#xff0c;方便我们更好的理解AI模型的决策。 原文阅读 什么是XAI&#xff1f; XAI&#xff08;Explainable AI&#xff09;的目标是为模型的行为和决策提供合理的解释&#xff0c;这有助于增加信任、提供问责制和模型决策的透明度…