主要功能实现
- 完成发生时间选择功能，用户可以通过日期选择器选择事件发生的时间。
- 实现事件类型选择功能，用户可以通过下拉选择框选择事件的类型。
- 添加子养殖场编号输入框，用户可以输入与事件相关的子养殖场编号。
- 完成事件描述输入功能，用户可以通过文本输入框描述事件的详细情况。
- 增加上传图片功能，用户可以选择并上传相关图片。
- 增加上传视频功能，用户可以选择并上传相关视频。
- 实现处理结果输入功能，用户可以通过文本输入框记录事件的处理结果。
- 添加是否已解决选择功能，用户可以通过单选按钮选择事件是否已经解决。
大概有两个样子的版本，一个是用内置组件完成的，另一个是用uni-ui扩展组件完成的，都在下面
未加样式版本
稍微加了点样式的样子
这是简陋的代码
<template>
<view class="mainCSS">
<view class="column">1. 发生时间</view>
<picker class="input" mode="date" :end="endDate" @change="bindDateChange">
<view>{{date}}</view>
</picker>
<view class="column">2. 事件类型</view>
<picker class="input" :range="kind" :value="kindIndex" @change="bingKindChange">
<view>{{kind[kindIndex]}}</view>
</picker>
<view class="column">3. 子养殖场编号</view>
<input class="input" placeholder="二号区③" @confirm="bindFarmCode"/>
<view class="column">4. 事件描述</view>
<textarea class="input" @confirm="bindTextDetail" placeholder="请输入"></textarea>
<view class="column">5. 上传图片</view>
<view v-for="(imageName, index) in imageNames" :key="index">
<text>{{imageName}}</text>
</view>
<button type="primary" size="mini" @click="loadImage">选择图片</button>
<view class="column">6. 上传视频</view>
<view v-for="(videoName, index) in videoNames" :key="index">
<text>{{videoName}}</text>
</view>
<button type="primary" size="mini" @click="loadVideo">选择视频</button>
<view class="column">7. 处理结果</view>
<textarea class="input" placeholder="是如何处理的？" @confirm="bindResult"></textarea>
<view class="column">8. 是否已经解决了</view>
<radio-group @change="bindDoneChange">
<label>
<radio value="false" checked="checked">未解决</radio>
<radio value="true">已解决</radio>
</label>
</radio-group>
<button class="column" type="primary">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
date: this.getDate(),
kind: ['养殖物异常', '设备异常', '偷盗', '野生动物', '灾害', '其他异常'],
kindIndex: 0,
farmCode:"",
detail: {},
imageNames: [],
videoNames: [],
result:"",
done:false
}
},
computed: {
endDate() {
return this.getDate();
}
},
methods: {
getDate() {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
bindDateChange: function(e) {
this.date = e.detail.value;
},
bingKindChange: function(e) {
this.kindIndex = e.detail.value;
},
bindFarmCode:function(e){
this.farmCode=e.detail.value;
},
bindTextDetail: function(e) {
this.detail = e.detail.value;
},
bindResult:function(e){
this.result=e.detail.value;
},
bindDoneChange: function(e) {
this.done = e.detail.value;
},
loadImage() {
uni.chooseImage({
success: (response) => {
for (let file of response.tempFiles) {
let imageName = file.name.substring(file.name.lastIndexOf('/') + 1);
this.imageNames.push(imageName);
}
}
})
},
loadVideo() {
uni.chooseVideo({
success: (response) => {
let videoName = response.tempFile.name;
videoName = videoName.substring(videoName.lastIndexOf('/') + 1);
this.videoNames.push(videoName);
}
})
}
}
}
</script>
<style>
.mainCSS {
margin: 30rpx;
}
.input{
margin: 15rpx;
border: 1rpx solid #cbd5de;
width: 100%;
}
.column{
margin: 30rpx;
font-weight: bold;
}
</style>然后是用了uni-ui扩展组件大改了一下样式
主要就是样式通过uni-ui组件完成
<template>
<view class="mainCSS">
<view class="column">1. 发生时间</view>
<uni-datetime-picker type="date" :end="endDate" @change="bindDateChange"></uni-datetime-picker>
<view class="column">2. 事件类型</view>
<uni-data-select placeholder="请选择事件类型" :localdata="kind" :value="kindValue" @change="bindKindChange"></uni-data-select>
<view class="column">3. 子养殖场编号</view>
<uni-easyinput placeholder="二号区③" @confirm="bindFarmCode"></uni-easyinput>
<view class="column">4. 事件描述</view>
<uni-easyinput type="textarea" autoHeight placeholder="请描述紧急事件的具体情况" @confirm="bindTextDetail"></uni-easyinput>
<view class="column">5. 上传图片</view>
<uni-file-picker title="最多选择九张图片"></uni-file-picker>
<view class="column">6. 上传视频</view>
<uni-file-picker file-mediatype="video"></uni-file-picker>
<view class="column">7. 处理结果</view>
<uni-easyinput type="textarea" autoHeight placeholder="请描述事件是如何处理的" @confirm="bindResult"></uni-easyinput>
<view class="column">8. 是否已经解决了</view>
<radio-group @change="bindDoneChange">
<label>
<radio value="false" checked="checked">未解决</radio>
<radio value="true">已解决</radio>
</label>
</radio-group>
<button class="column" type="primary" @click="submit">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
date: this.getDate(),
kindValue: 0,
kind: [{
value: 0,
text: '养殖物异常'
},
{
value: 1,
text: '设备异常'
},
{
value: 2,
text: '偷盗'
},
{
value: 3,
text: '野生动物'
},
{
value: 4,
text: '灾害'
},
{
value: 5,
text: '其他异常'
}
],
farmCode: "",
detail: {},
result: "",
done: false
}
},
computed: {
endDate() {
return this.getDate();
}
},
methods: {
getDate() {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
bindDateChange: function(e) {
this.date = e.detail.value;
},
bindKindChange: function(e) {
this.kindValue = e;
},
bindFarmCode: function(e) {
this.farmCode = e.detail.value;
},
bindTextDetail: function(e) {
this.detail = e.detail.value;
},
bindResult: function(e) {
this.result = e.detail.value;
},
bindDoneChange: function(e) {
this.done = e.detail.value;
},
submit(){
uni.showModal({
content:"紧急事件登记提交成功",
title:"提示",
showCancel:false,
success: (response) => {
if(response.confirm){
uni.switchTab({
url:'/pages/WorkOrder/WorkOrder'
})
}
}
})
}
}
}
</script>
<style lang="scss">
.mainCSS {
padding: 25rpx;
background-color: white;
}
.column {
margin-top: 30rpx;
margin-bottom: 15rpx;
font-weight: bold;
font-size: 30rpx;
}
button {
border-radius: 30rpx;
}
</style>后面加上了和后端对接的请求发送，以及修复了一些bug的改版代码，后端也是我写的对接起来十分轻松
<template>
<view class="mainCSS">
<view class="column">1. 发生时间</view>
<uni-datetime-picker type="date" :end="endDate" @change="bindDateChange"></uni-datetime-picker>
<view class="column">2. 事件类型</view>
<uni-data-select placeholder="请选择事件类型" :localdata="kind" :value="kindValue"
@change="bindKindChange"></uni-data-select>
<view class="column">3. 子养殖场编号</view>
<uni-easyinput placeholder="二号区③" @input="bindFarmCode"></uni-easyinput>
<view class="column">4. 事件描述</view>
<uni-easyinput type="textarea" autoHeight placeholder="请描述紧急事件的具体情况" @input="bindTextDetail"></uni-easyinput>
<view class="column">5. 上传图片</view>
<uni-file-picker title="最多选择九张图片" ref="files" @select="bindSelect" @delete="bindDelete"></uni-file-picker>
<view class="column">6. 上传视频</view>
<uni-file-picker file-mediatype="video" @select="bindVideoSelect" @delete="bindVideoDelete"
limit="1"></uni-file-picker>
<view class="column">7. 处理结果</view>
<uni-easyinput type="textarea" autoHeight placeholder="请描述事件是如何处理的" @input="bindResult"></uni-easyinput>
<view class="column">8. 是否已经解决了</view>
<uni-data-checkbox :value="doneValue" :localdata="done" @change="bindDoneChange"></uni-data-checkbox>
<button class="column" type="primary" @click="submit">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
date: '',
kindValue: 0,
kind: [{
value: 0,
text: '养殖物异常'
},
{
value: 1,
text: '设备异常'
},
{
value: 2,
text: '偷盗'
},
{
value: 3,
text: '野生动物'
},
{
value: 4,
text: '灾害'
},
{
value: 5,
text: '其他异常'
}
],
farmCode: "未填写",
detail: '未填写',
images: '',
imagesPaths: [],
video: '',
videoPath: '',
result: "未填写",
doneValue: 0,
done: [{
text: '未解决',
value: 0
}, {
text: '已解决',
value: 1
}]
}
},
computed: {
endDate() {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
},
methods: {
bindDateChange: function(e) {
this.date = e;
},
bindKindChange: function(e) {
this.kindValue = e;
},
bindFarmCode: function(e) {
this.farmCode = e;
},
bindTextDetail: function(e) {
this.detail = e;
},
bindResult: function(e) {
this.result = e;
},
bindDoneChange: function(e) {
this.doneValue = e.detail.value;
},
submit() {
if (this.imagesPaths.length != 0) {
var uploadTask = uni.uploadFile({
url: 'http://192.168.6.128:8080', // 上传图片的接口地址
files: this.imagesPaths,
success: (response) => {
this.images = response.data;
},
fail: (response) => {
console.log(response)
}
})
uploadTask.onProgressUpdate((response) => {
// console.log(response.progress)
})
}
if (this.videoPath != '') {
var uploadTask = uni.uploadFile({
url: 'http://192.168.6.128:8080', // 上传视频的接口地址
filePath: this.videoPath,
name: 'file',
success: (response) => {
this.video = response.data;
},
fail: (response) => {
console.log(response)
}
})
uploadTask.onProgressUpdate((response) => {
// console.log(response.progress)
})
}
this.sendRequstToServer();
},
bindSelect(e) {
for (let file of e.tempFiles) {
this.imagesPaths.push({
uri: file.path
})
}
},
bindDelete(e) {
this.imagesPaths.splice(this.imagesPaths.indexOf({
uri: e.tempFilePath
}), 1)
},
bindVideoSelect(e) {
this.videoPath = e.tempFilePaths[0] // 限制一个视频
},
bindVideoDelete(e) {
this.videoPath = ''
},
sendRequstToServer() {
uni.request({
url: 'http://192.168.6.128:8080', // 紧急事件登记的接口地址
method: 'POST',
data: {
date: this.date,
kind: this.kind[this.kindValue].text,
farmCode: this.farmCode,
detail: this.detail,
images: this.images,
video: this.video,
result: this.result,
done: this.doneValue==1
},
header: {
'content-type': 'application/json' // 自定义请求头信息
},
success: (response) => {
if (response.statusCode == 200) {
uni.showToast({
title: '提交成功'
});
setTimeout(() => {
uni.switchTab({
url: '/pages/WorkOrder/WorkOrder',
})
}, 2000)
} else {
console.log('提交失败：', response);
uni.showToast({
title: '提交失败',
icon: 'error'
})
}
},
fail: (response) => {
console.log('请求后端失败：', response);
uni.showToast({
title: '提交失败',
icon: 'error'
})
}
})
}
}
}
</script>
<style lang="scss">
.mainCSS {
padding: 25rpx;
background-color: white;
}
.column {
margin-top: 30rpx;
margin-bottom: 15rpx;
font-weight: bold;
font-size: 30rpx;
}
button {
border-radius: 30rpx;
}
</style>