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

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

<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.hqwc.cn/news/228389.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多线程(补充知识)

STL库&#xff0c;智能指针和线程安全 STL中的容器是否是线程安全的? 不是. 原因是, STL 的设计初衷是将性能挖掘到极致, 而一旦涉及到加锁保证线程安全,会对性能造成巨大的影响. 而且对于不同的容器, 加锁方式的不同, 性能可能也不同(例如hash表的锁表和锁桶). 因此 STL 默认…

基于LNMP快速搭建WordPress平台

目录 1 LNMP简介 2 WordPress简介 3 安装MySQL环境 3.1 安装MySQL 3.1.1 下载wget工具 3.1.2 下载MySQL官方yum源安装包 3.1.3 安装MySQL官方yum源 3.1.4 mysql安装 3.2 启动MySQL 3.3 获取默认密码 3.4 登录MySQL ​ 3.5 修改密码 3.6 创建WordPress数据库并授权 3.6.1 创…

医疗影像数据集—CT、X光、骨折、阿尔茨海默病MRI、肺部、肿瘤疾病等图像数据集

最近收集了一大波关于CT、X光等医疗方面的数据集包含骨折、阿尔茨海默病MRI、肺部疾病等类型的医疗影像数据&#xff0c;废话不多说&#xff0c;给大家逐一介绍&#xff01;&#xff01; 1、彩色预处理阿尔茨海默病MRI(磁共振成像)图像数据集 彩色预处理阿尔茨海默病MRI(磁共…

【沐风老师】3DMAX拼图建模工具MaxPuzzle2D插件使用方法详解

MaxPuzzle2D拼图建模工具使用帮助 MaxPuzzle2D拼图建模工具&#xff0c;拼图建模“彩虹系列”插件&#xff0c;是一款用MAXScript脚本语言开发的3dMax拼图建模小工具&#xff0c;可以创建2D或3D的拼图图形阵列。这让需要拼图建模的设计师大大节省了时间。 MaxPuzzle2D工具界面&…

电荷泵升压/降压电路

一、升压\降压电路原理分析 1、升压电路 电荷泵升压电路 VoutVa5V 5V_PLUS0V时&#xff0c;Va给C2充电&#xff0c;C2上节点电压比C2下节点电压高Va&#xff1b; 5V_PLUS5V时&#xff0c;C2电压不能突变&#xff0c;C2上节点电压依然比C2下节点电压高Va&#xff0c;但C2下节点…

C++单调向量(栈):好子数组的最大分数

作者推荐 利用广度优先或模拟解决米诺骨牌 题目 给你一个整数数组 nums &#xff08;下标从 0 开始&#xff09;和一个整数 k 。 一个子数组 (i, j) 的 分数 定义为 min(nums[i], nums[i1], …, nums[j]) * (j - i 1) 。一个 好 子数组的两个端点下标需要满足 i < k <…

STM32之模数转换器ADC

目录 1、ADC介绍 1.什么是ADC&#xff1f; ADC的全称是Analog-to-Digital Converter&#xff0c;指模拟/数字转换器 2.ADC的性能指标 3.ADC特性 12位分辨率 4.ADC通道 5.ADC转换顺序 6.ADC触发方式 7.ADC转化时间 8.ADC转化模式 9.模拟看门狗 实验&#xff1a;使用ADC读…

SpringSecurity+JWT实现权限控制以及安全认证

一.简介 Spring Security 是 Spring家族中的一个安全管理框架。相比与另外一个安全框架Shiro&#xff0c;它提供了更丰富的功能&#xff0c;社区资源也比Shiro丰富。 认证&#xff1a;验证当前访问系统的是不是本系统的用户&#xff0c;并且要确认具体是哪个用户​ 授权&…

Cesium 添加一个立方体实体。

Cesium 添加一个立方体实体 初始化地球 viewer new Cesium.Viewer(content, {terrainProvider: Cesium.createWorldTerrain({requestVertexNormals: true,requestWaterMask: true})})添加一个立方体 const redBox viewer.entities.add({name: 一个红色的正方形,position: …

【08】Python运算符

文章目录 1.算术运算符2.赋值运算符3.条件运算符4.逻辑运算符5.比较运算符6.运算符的优先级本期博客中,我们将学习python中常用的运算符的用法。              1.算术运算符 1.加法运算符(+): a = 10 b = 5 c = a + b print(c

unity Toggle,初始时默认不选中,若选中则不可取消选中。不写码实现其效果

实现效果&#xff1a; 初始默认时&#xff1a; 选中时&#xff1a; 零代码实现&#xff1a; 步骤1 步骤2 步骤3

【专题】支持向量机(Support Vector Machines,SVM)

​​​​​ ​​ 支持向量机&#xff08;Support Vector Machines&#xff0c;SVM&#xff09;是一种强大的监督学习模型&#xff0c;常用于分类、回归和异常值检测任务。它的核心思想是通过构建一个最大间隔超平面来有效地分隔不同类别的数据点。 在SVM中&#xff0c;数据点…