<template>
|
<GlobalWindow
|
title="新增隐患随手拍"
|
width="600px"
|
:visible.sync="isShowModal"
|
:confirm-working="isWorking"
|
@close="close"
|
@confirm="confirm"
|
>
|
<el-form :model="param" ref="paramRef" :rules="rules">
|
<el-form-item label="提报人" prop="realname">
|
<div>{{ userInfo.realname }}</div>
|
</el-form-item>
|
<el-form-item label="联系电话" prop="mobile">
|
{{ userInfo.mobile }}
|
</el-form-item>
|
<el-form-item label="检查类型" prop="checkTypeId">
|
<el-select v-model="param.checkTypeId" placeholder="请选择">
|
<el-option
|
v-for="item in checkTypeList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="提报时间" prop="submitTime">
|
<el-date-picker
|
v-model="param.submitTime"
|
format="yyyy-MM-dd HH:mm"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
type="datetime"
|
default-time="08:00:00"
|
/>
|
</el-form-item>
|
<el-form-item label="责任部门" prop="companyId">
|
<el-select @change="getAddrList" clearable filterable v-model="param.companyId">
|
<el-option v-for="op in department" :key="op.id" :label="op.name" :value="op.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="隐患区域" prop="areaId">
|
<el-select v-model="param.areaId" @change="changeArea" placeholder="请选择">
|
<el-option
|
v-for="item in addrList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="处理人" prop="checkUserId">
|
<el-select v-model="param.checkUserId" filterable placeholder="请选择">
|
<el-option
|
v-for="item in memberList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="隐患类型" prop="cateId">
|
<el-select v-model="param.cateId" placeholder="请选择">
|
<el-option
|
v-for="item in typeList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="现场情况">
|
<div class="file_list">
|
<el-upload
|
class="avatar-uploader"
|
:data="uploadData"
|
:auto-upload="true"
|
:action="uploadImgUrl"
|
:show-file-list="false"
|
:on-success="uploadAvatarSuccess"
|
:on-error="uploadError"
|
:before-upload="beforeUpload"
|
>
|
<div class="upload_wrap">
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
<div>图片/视频</div>
|
</div>
|
</el-upload>
|
<div v-for="(item, i) in fileList" :key="i" class="item">
|
<i @click="handleDelImg(i)" class="el-icon-error close"></i>
|
<el-image
|
:src="item.fileurlFull"
|
:preview-src-list="[item.fileurlFull]"
|
v-if="item.type == 0"
|
class="img"
|
></el-image>
|
<video
|
:src="item.fileurlFull"
|
controls
|
v-if="item.type == 1"
|
class="img"
|
></video>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="情况说明" prop="content">
|
<el-input
|
type="textarea"
|
:rows="4"
|
v-model="param.content"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import UploadFaceImg from '@/components/common/UploadFaceImg'
|
import dayjs from 'dayjs'
|
import { allList, memberList } from '@/api/business/hiddenDangerParam'
|
import { create } from '@/api/business/hiddenDanger'
|
import { Loading } from 'element-ui'
|
import { companyGetListPost } from '@/api/business/company'
|
export default {
|
extends: BaseOpera,
|
components: {
|
GlobalWindow
|
},
|
data () {
|
return {
|
isShowModal: false,
|
loadingInstance: false,
|
param: {
|
checkTypeId: null
|
},
|
userInfo: this.$store.state.userInfo,
|
uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch',
|
typeList: [],
|
checkTypeList: [],
|
addrList: [],
|
memberList: [],
|
fileList: [],
|
|
uploadData: {
|
folder: 'HIDDEN_DANGER_FILE'
|
},
|
department: [],
|
rules: {
|
// starttime: [{ required: true, message: '请选择日期', trigger: 'change' }],
|
areaId: [{ required: true, message: '请选择', trigger: 'change' }],
|
cateId: [{ required: true, message: '请选择', trigger: 'change' }],
|
checkUserId: [{ required: true, message: '请选择', trigger: 'change' }],
|
checkTypeId: [{ required: true, message: '请选择', trigger: 'change' }],
|
companyId: [{ required: true, message: '请选择', trigger: 'change' }],
|
faceImgUrl: [{ required: true, message: '请上传', trigger: 'change' }],
|
|
content: [{ required: true, message: '请输入', trigger: 'blur' }]
|
}
|
}
|
},
|
created () {
|
this.$set(this.param, 'submitTime', dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
this.initData()
|
},
|
methods: {
|
|
initData () {
|
allList({ type: 1 }).then(res => { // 类型
|
this.typeList = res || []
|
})
|
allList({ type: 2}).then(res => { // 检查类型
|
this.checkTypeList = res || []
|
if(this.checkTypeList.length>0){
|
this.param.checkTypeId = res[0].id
|
}
|
})
|
// memberList({}).then(res => {
|
// this.memberList = res || []
|
// })
|
this.getfindCompanyTreePage()
|
},
|
getfindCompanyTreePage() {
|
companyGetListPost({queryHiddenDanger: 1})
|
.then(res => {
|
if (res && res.length > 0) {
|
this.department = res
|
}
|
})
|
},
|
getAddrList() {
|
const { companyId } = this.param
|
this.$set(this.param, 'areaId', '')
|
this.$set(this.param, 'checkUserId', '')
|
this.addrList = []
|
if(companyId){
|
allList({ type: 0,companyId }).then(res => { // 位置
|
this.addrList = res || []
|
})
|
}
|
},
|
changeArea (e) {
|
const item = this.addrList.find(i => i.id === e)
|
const arr = []
|
const memberIds = item.memberIds.split(',')
|
const memberNames = item.memberNames.split(',')
|
if (memberIds && memberIds.length === 1) {
|
this.$set(this.param, 'checkUserId', memberIds[0])
|
} else {
|
this.$set(this.param, 'checkUserId', '')
|
}
|
memberIds.forEach((mem, i) => {
|
arr.push({
|
id: memberIds[i],
|
name: memberNames[i]
|
})
|
})
|
this.memberList = arr
|
},
|
beforeUpload (file) {
|
if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'image/jpeg','image/jpg', 'image/png', 'image/gif'].indexOf(file.type) == -1) {
|
this.$message.error('请上传正确的视频/图片格式')
|
return false
|
}
|
this.loadingInstance = Loading.service({
|
lock: true,
|
text: 'Loading',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
},
|
uploadError() {
|
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
|
if(this.loadingInstance){
|
this.loadingInstance.close()
|
}
|
})
|
},
|
uploadAvatarSuccess (file) {
|
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
|
if(this.loadingInstance){
|
this.loadingInstance.close()
|
}
|
})
|
console.log('file', file)
|
const item = file.data[0]
|
if (['.mp4', '.avi', '.flv', '.wmv'].some(char => item.imgaddr.includes(char))) {
|
this.fileList.push({
|
type: 1,
|
fileurl: item.imgaddr,
|
fileurlFull: item.url
|
})
|
} else {
|
this.fileList.push({
|
type: 0,
|
fileurl: item.imgaddr,
|
fileurlFull: item.url
|
})
|
}
|
console.log('file', this.fileList)
|
// this.$set(this.param, 'faceImg', file.imgurl)
|
// this.$set(this.param, 'faceImgUrl', file.imgurlfull)
|
},
|
handleDelImg (i) {
|
this.fileList.splice(i, 1)
|
},
|
close(){
|
this.isShowModal = false
|
this.$emit('close')
|
},
|
// 同步信息
|
confirm () {
|
this.$refs.paramRef.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
// 调用新建接口
|
this.isWorking = true
|
create({
|
...this.param,
|
applyCheckUserId: this.param.checkUserId,
|
submitFileList: this.fileList,
|
memberId: this.userInfo.memberId
|
})
|
.then(() => {
|
this.visible = false
|
this.$tip.apiSuccess('提交成功')
|
this.$emit('success')
|
this.$emit('close')
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
$image-width: 90px;
|
.avatar-uploader {
|
width: $image-width !important;
|
height: $image-width;
|
margin-bottom: 30px;
|
.upload_wrap {
|
width: 90px;
|
height: 90px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
color: #999999;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409eff;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
text-align: center;
|
}
|
}
|
.file_list {
|
display: flex;
|
flex-wrap: wrap;
|
.item {
|
width: 92px;
|
max-height: 92px;
|
margin-left: 10px;
|
position: relative;
|
border: 1px dashed #d9d9d9;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.close{
|
font-size: 20px;
|
position: absolute;
|
right: -10px;
|
top: -10px;
|
z-index: 111;
|
color: red;
|
cursor: pointer;
|
}
|
.img {
|
width: 92px;
|
max-height: 92px;
|
}
|
}
|
}
|
</style>
|
