<template>
|
<view class="main_app">
|
<view class="main_wrap">
|
<!-- -->
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>隐患区域</text>
|
</view>
|
<view class="value" @click="isShowArea = true">
|
<text
|
class="mr6"
|
:style="{ color: param.areaName ? '#000000' : '#999999' }"
|
>{{ param.areaName ? param.areaName : "请选择" }}</text
|
>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>接收人</text>
|
</view>
|
<view class="value" @click="selMember">
|
<text
|
class="mr6"
|
:style="{ color: param.checkorName ? '#000000' : '#999999' }"
|
>{{ param.checkorName ? param.checkorName : "请选择" }}</text
|
>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="empty"></view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>隐患类型</text>
|
</view>
|
<view class="value" @click="isShowType = true">
|
<text
|
class="mr6"
|
:style="{ color: param.categoryName ? '#000000' : '#999999' }"
|
>{{ param.categoryName ? param.categoryName : "请选择" }}</text
|
>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="upload_line">
|
<view class="name">现场情况</view>
|
<view class="wrap">
|
<view
|
class="adduser_list_item_ipt1_upload"
|
@click="showUpload = true"
|
>
|
<u-icon name="plus" color="rgb(153, 153, 153)" size="20"></u-icon>
|
<view class="mt6">图片/视频</view>
|
</view>
|
<view
|
class="adduser_list_item_ipt1_upload"
|
v-for="(item, i) in submitFileList"
|
:key="i"
|
>
|
<u-icon
|
class="close"
|
size="20"
|
name="close-circle-fill"
|
color="red"
|
@click="fileDel(i)"
|
></u-icon>
|
<image
|
v-if="item.type == 0"
|
:src="item.fileurlFull"
|
mode="widthFix"
|
></image
|
><video v-if="item.type == 1" :src="item.fileurlFull"></video
|
></view>
|
</view>
|
</view>
|
<view class="empty"></view>
|
<view class="upload_line" style="padding: 15px 0 0">
|
<view class="name" style="margin-bottom: 10rpx">
|
<text style="color: #e42d2d">*</text>
|
<text>情况说明</text>
|
</view>
|
<view class="value">
|
<textarea
|
placeholder="请详细描述现场情况，不少于10个字"
|
minlength="10"
|
v-model="param.content"
|
placeholder-style="color: #999999;"
|
/>
|
</view>
|
</view>
|
<view class="empty"></view>
|
<view class="line">
|
<view class="label">
|
<text></text>
|
<text>提报人</text>
|
</view>
|
<view class="value"
|
><input
|
type="text"
|
disabled
|
placeholder="请输入提报人"
|
v-model="param.memberName"
|
placeholder-style="color: #999999;"
|
/></view>
|
</view>
|
<view class="line">
|
<view class="label">
|
<text></text>
|
<text>联系电话</text>
|
</view>
|
<view class="value"
|
><input
|
type="text"
|
disabled
|
placeholder="请输入联系电话"
|
v-model="param.memberPhone"
|
placeholder-style="color: #999999;"
|
/></view>
|
</view>
|
<view class="line">
|
<view class="label">
|
<text></text>
|
<text>提报时间</text>
|
</view>
|
<view class="value" @click="isShowTime = true">
|
<text
|
class="mr6"
|
:style="{ color: param.submitTime ? '#000000' : '#999999' }"
|
>{{ param.submitTime ? param.submitTime : "请选择" }}</text
|
>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
|
<view class="footer"
|
><view class="footer_btn" @click="onSubmit">提交</view></view
|
>
|
</view>
|
<!-- -->
|
<!-- 区域 -->
|
<u-picker
|
keyName="name"
|
:show="isShowArea"
|
closeOnClickOverlay
|
:columns="areaOptions"
|
@confirm="seletedArea"
|
@close="isShowArea = false"
|
@cancel="isShowArea = false"
|
></u-picker>
|
<u-picker
|
keyName="name"
|
:show="isShowType"
|
closeOnClickOverlay
|
:columns="areaType"
|
@confirm="seletedType"
|
@close="isShowType = false"
|
@cancel="isShowType = false"
|
></u-picker>
|
<!-- -->
|
<u-datetime-picker
|
:show="isShowTime"
|
:minDate="new Date().getTime()"
|
mode="datetime"
|
closeOnClickOverlay
|
@cancel="isShowTime = false"
|
@close="isShowTime = false"
|
@confirm="seletedDate"
|
></u-datetime-picker>
|
<!-- -->
|
<u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>
|
<view class="upload_wrap">
|
<view class="btn" @click="uploadImage">选择图片</view>
|
<view class="btn" @click="uploadVideo">选择视频</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import {
|
uploadUrl,
|
DangerCreate,
|
DangerConfigType
|
} from '@/api'
|
import dayjs from 'dayjs'
|
export default {
|
data() {
|
return {
|
param: {},
|
submitFileList: [],
|
|
isShowArea: false,
|
isShowType: false,
|
isShowTime: false,
|
showUpload: false,
|
|
areaOptions: [],
|
areaType: [],
|
}
|
},
|
onLoad(option) {
|
this.initConfig()
|
const userInfo = uni.getStorageSync('userInfo') || {}
|
this.$set(this.param, 'memberName', userInfo.realname)
|
this.$set(this.param, 'memberPhone', userInfo.mobile)
|
this.$set(this.param, 'memberId', userInfo.id)
|
this.$set(this.param, 'submitTime', dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
},
|
mounted() {
|
this.$eventBus.$on('snapshotSel', (option) => {
|
this.$set(this.param, 'checkUserId', option.id)
|
this.$set(this.param, 'applyCheckUserId', option.id)
|
this.$set(this.param, 'checkorName', option.name)
|
})
|
},
|
methods: {
|
onSubmit() {
|
const { param, submitFileList } = this
|
if (!param.areaName) return uni.showToast({
|
title: '请选择隐患区域',
|
icon: 'none'
|
})
|
if (!param.applyCheckUserId) return uni.showToast({
|
title: '请选择接收人',
|
icon: 'none'
|
})
|
if (!param.categoryName) return uni.showToast({
|
title: '请选择隐患类型',
|
icon: 'none'
|
})
|
if (!param.content) return uni.showToast({
|
title: '请输入情况说明',
|
icon: 'none'
|
})
|
if (param.content.length < 10) return uni.showToast({
|
title: '情况说明不得小于10个字',
|
icon: 'none'
|
})
|
|
DangerCreate({
|
...param,
|
submitFileList
|
}).then(res => {
|
if (res.code === 200) {
|
this.$jump('/pages/staff/snapshotResult')
|
}
|
})
|
},
|
seletedArea(e) {
|
const item = e.value[0]
|
this.$set(this.param, 'areaId', item.id)
|
this.$set(this.param, 'areaName', item.name)
|
console.log(item)
|
if (item.memberIds && item.memberIds.indexOf(',') === -1) {
|
this.$set(this.param, 'checkUserId', item.memberIds)
|
this.$set(this.param, 'applyCheckUserId', item.memberIds)
|
this.$set(this.param, 'checkorName', item.memberNames)
|
} else {
|
this.$set(this.param, 'checkUserId', '')
|
this.$set(this.param, 'applyCheckUserId', '')
|
this.$set(this.param, 'checkorName', '')
|
}
|
this.isShowArea = false
|
},
|
seletedType(e) {
|
const item = e.value[0]
|
this.$set(this.param, 'cateId', item.id)
|
this.$set(this.param, 'categoryName', item.name)
|
console.log(item)
|
this.isShowType = false
|
},
|
seletedSafety(e) {
|
|
},
|
seletedDate(e) {
|
this.$set(this.param, 'submitTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'))
|
this.isShowTime = false
|
},
|
initConfig() {
|
DangerConfigType({ type: '1' }).then(res => {
|
this.areaType = [res.data]
|
})
|
DangerConfigType({ type: '0' }).then(res => {
|
this.areaOptions = [res.data]
|
})
|
},
|
selMember() {
|
if (!this.param.areaId) return uni.showToast({
|
title: '请先选择隐患区域',
|
icon: 'none'
|
})
|
uni.navigateTo({
|
url: '/pages/staff/memberSel?areaId=' + this.param.areaId
|
})
|
},
|
fileDel(i) {
|
this.submitFileList.splice(i, 1)
|
},
|
uploadImage() {
|
this.showUpload = false
|
let token = uni.getStorageSync('token') || ''
|
uni.chooseImage({
|
count: 4,
|
success: (chooseImageRes) => {
|
uni.showLoading({ title: '上传中', mask: true })
|
const tempFilePaths = chooseImageRes.tempFilePaths
|
let imgs = tempFilePaths.map((value, index) => {
|
return {
|
name: 'file',
|
uri: value
|
}
|
})
|
uni.uploadFile({
|
url: `${uploadUrl}`,
|
files: imgs,
|
name: 'file',
|
formData: {
|
folder: 'HIDDEN_DANGER_FILE'
|
},
|
header: {
|
Dm_user_token: token
|
},
|
success: (uploadFileRes) => {
|
let res = JSON.parse(uploadFileRes.data)
|
console.log('res', res.data)
|
if (res.data && res.data.length > 0) {
|
res.data.forEach(i => {
|
i.type = 0
|
i.fileurl = i.imgaddr
|
i.fileurlFull = i.url
|
this.submitFileList.push(i)
|
})
|
}
|
},
|
fail(err) {
|
console.log('err', err)
|
},
|
complete() {
|
uni.hideLoading()
|
// if (i === chooseImageRes.tempFilePaths.length - 1) {
|
// uni.hideLoading()
|
// }
|
}
|
})
|
// }
|
}
|
})
|
},
|
uploadVideo() {
|
this.showUpload = false
|
let that = this
|
let token = uni.getStorageSync('token') || ''
|
uni.chooseVideo({
|
success: (chooseImageRes) => {
|
uni.showLoading({ title: '上传中', mask: true })
|
uni.uploadFile({
|
url: `${uploadUrl}`,
|
filePath: chooseImageRes.tempFilePath,
|
header: {
|
Dm_user_token: token
|
},
|
name: 'file',
|
formData: {
|
folder: 'HIDDEN_DANGER_FILE'
|
},
|
success: (uploadFileRes) => {
|
let res = JSON.parse(uploadFileRes.data)
|
if (res.data && res.data.length > 0) {
|
res.data.forEach(i => {
|
i.type = 1
|
i.fileurl = i.imgaddr
|
i.fileurlFull = i.url
|
this.submitFileList.push(i)
|
})
|
}
|
},
|
complete() {
|
uni.hideLoading()
|
}
|
})
|
}
|
})
|
},
|
|
getUser() { }
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.main_wrap {
|
padding-bottom: 200rpx;
|
.line {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1rpx solid #e5e5e5;
|
padding: 30rpx 0;
|
.label {
|
font-size: 30rpx;
|
font-weight: 400;
|
text {
|
&:nth-child(1) {
|
color: #e42d2d;
|
margin-right: 4rpx;
|
}
|
}
|
}
|
.value {
|
flex: 1;
|
height: 100%;
|
margin-left: 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
input {
|
width: 100%;
|
height: 100%;
|
text-align: right;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
.upload_line {
|
padding: 30rpx 0;
|
.wrap {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.adduser_list_item_ipt1_upload {
|
margin-top: 24rpx;
|
width: 120rpx;
|
height: 120rpx;
|
margin-right: 24rpx;
|
border: 2rpx solid #e5e5e5;
|
background: #f7f7f7;
|
color: #666666;
|
font-size: 22rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
.close {
|
position: absolute;
|
right: -20rpx;
|
top: -20rpx;
|
z-index: 9999;
|
}
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
video {
|
width: 100%;
|
max-height: 120rpx;
|
}
|
}
|
}
|
}
|
.upload_wrap {
|
width: 100%;
|
.btn {
|
height: 90rpx;
|
line-height: 90rpx;
|
text-align: center;
|
}
|
}
|
.footer {
|
width: 100%;
|
padding: 0 30rpx;
|
padding-bottom: env(safe-area-inset-bottom);
|
box-sizing: border-box;
|
position: fixed;
|
left: 0;
|
bottom: 68rpx;
|
|
.footer_btn {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: $uni-color-primary;
|
border-radius: 44rpx;
|
font-size: 32rpx;
|
color: #ffffff;
|
}
|
}
|
.empty {
|
width: 750rpx;
|
height: 20rpx;
|
background-color: #f7f7f7;
|
margin: 0 -30rpx;
|
}
|
</style>
|
