<template>
|
<view class="main_app">
|
<view class="main_wrap">
|
<!-- -->
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>责任部门</text>
|
</view>
|
<view class="value" @click="isShowCompany = true">
|
<text class="mr6"
|
:style="{ color: param.companyName ? '#000000' : '#999999' }">{{ param.companyName ? param.companyName : "请选择" }}</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="openArea">
|
<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" :controls="false" :show-center-play-btn="false"></video> -->
|
<view v-if="item.type == 1" class="video_wrap">
|
<video :src="item.fileurlFull" :initial-time="0.01" :show-center-play-btn="false" :controls="false"
|
class="video" :enable-progress-gesture="false" muted />
|
<image src="@/static/play.png" class="play" mode=""></image>
|
</view>
|
</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="tel" 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="isShowCompany" closeOnClickOverlay :columns="deptList" @confirm="seletedCompany"
|
@close="isShowCompany = false" @cancel="isShowCompany = false"></u-picker>
|
<!-- 区域 -->
|
<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" :formatter="formatter" :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,
|
deptListPost
|
} from '@/api'
|
import dayjs from 'dayjs'
|
export default {
|
data() {
|
return {
|
param: {},
|
submitFileList: [],
|
|
isShowCompany: false,
|
isShowArea: false,
|
isShowType: false,
|
isShowTime: false,
|
showUpload: false,
|
|
deptList: [],
|
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: {
|
formatter(type, value) {
|
if (type === 'year') {
|
return `${value}年`
|
}
|
if (type === 'month') {
|
return `${value}月`
|
}
|
if (type === 'day') {
|
return `${value}日`
|
}
|
if (type === 'hour') {
|
return `${value}时`
|
}
|
if (type === 'minute') {
|
return `${value}分`
|
}
|
return value
|
},
|
onSubmit() {
|
const {
|
param,
|
submitFileList
|
} = this
|
if (!param.companyName) return uni.showToast({
|
title: '请选择责任部门',
|
icon: 'none'
|
})
|
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')
|
}
|
})
|
},
|
seletedCompany(e) {
|
const item = e.value[0]
|
this.$set(this.param, 'companyId', item.id)
|
this.$set(this.param, 'companyName', item.name)
|
this.$set(this.param, 'areaId', '')
|
this.$set(this.param, 'areaName', '')
|
this.$set(this.param, 'checkUserId', '')
|
this.$set(this.param, 'applyCheckUserId', '')
|
this.$set(this.param, 'checkorName', '')
|
DangerConfigType({
|
type: '0',
|
companyId: item.id
|
}).then(res => {
|
this.areaOptions = [res.data]
|
})
|
this.isShowCompany = false
|
},
|
openArea() {
|
if(!this.param.companyId) return this.showToast('请先选择责任部门')
|
this.isShowArea = true
|
},
|
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() {
|
deptListPost({
|
queryHiddenDanger: 1
|
}).then(res => {
|
this.deptList = [res.data]
|
})
|
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: 9,
|
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 {
|
|
.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;
|
}
|
textarea{
|
width: 100%;
|
}
|
.adduser_list_item_ipt1_upload {
|
margin-top: 24rpx;
|
width: 156rpx;
|
height: 156rpx;
|
margin-right: 20rpx;
|
border: 2rpx solid #e5e5e5;
|
background: #f7f7f7;
|
color: #666666;
|
font-size: 22rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
|
&:nth-of-type(4n) {
|
margin-right: 0;
|
}
|
|
.close {
|
position: absolute;
|
right: -20rpx;
|
top: -20rpx;
|
z-index: 9999;
|
}
|
|
.video_wrap {
|
position: relative;
|
border: 1px solid;
|
width: 156rpx;
|
height: 156rpx;
|
border-radius: 4rpx;
|
|
.play {
|
width: 60rpx !important;
|
height: 60rpx !important;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
}
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
|
video {
|
width: 100%;
|
max-height: 156rpx;
|
}
|
}
|
}
|
}
|
|
.upload_wrap {
|
width: 100%;
|
|
.btn {
|
height: 90rpx;
|
line-height: 90rpx;
|
text-align: center;
|
}
|
}
|
|
.footer {
|
width: 100%;
|
padding: 0 30rpx;
|
margin-top: 80rpx;
|
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>
|
