| | |
| | | <!-- 现场情况照片 --> |
| | | <el-form-item label="现场情况照片:" prop="situationPic"> |
| | | <div class="upImg"> |
| | | <div class="img-list"> |
| | | <img :src="item" alt="" v-for="(item,index) in arrive.situationPic" :key="index"> |
| | | <div class="img-list" v-if="arrive.situationPic.length!==0"> |
| | | <div class="img" v-for="(item,index) in arrive.situationPic" :key="index"> |
| | | <img :src="item" alt=""> |
| | | <i class="el-icon-close myicon" @click="handleRemove(index)"></i> |
| | | </div> |
| | | </div> |
| | | <div class="upload" v-if="arrive.situationPic.length<4"> |
| | | <el-upload :file-list="fileList" class="upload-demo" |
| | | action="http://42.193.1.25:8082/sccg/file/medias" multiple :show-file-list="false" |
| | | :limit="4" :on-success="handleSuccess" :headers="getToken()"> |
| | | action="/sccg/file/medias" multiple :show-file-list="false" |
| | | :limit="50" :on-success="handleSuccess" list-type="picture" :headers="getToken()"> |
| | | <i class="el-icon-plus"></i> |
| | | </el-upload> |
| | | </div> |
| | |
| | | } |
| | | } |
| | | const checkSitPic = (rule, value, callback) => { |
| | | if (value) { |
| | | if (value.length !== 0) { |
| | | callback() |
| | | } else { |
| | | callback(); |
| | | callback(new Error('请上传现场情况照片')); |
| | | } |
| | | } |
| | | return { |
| | |
| | | { trigger: 'blur', validator: checkReplay } |
| | | ], |
| | | situationPic: [ |
| | | { trigger: 'change', validator: checkSitPic } |
| | | { trigger: 'blur', validator: checkSitPic } |
| | | ], |
| | | }, |
| | | fileList: [], |
| | | } |
| | | }, |
| | | props:['getArrive'], |
| | | methods: { |
| | | handleSuccess(res, file, filelist) { |
| | | const baseUrl = 'http://140.143.152.226:8410/'; |
| | | console.log(res); |
| | | console.log(this.fileList); |
| | | if (this.arrive.situationPic.length < 4) { |
| | | this.arrive.situationPic.push(baseUrl + res.data.url1) |
| | | } |
| | |
| | | } |
| | | }, |
| | | // 获取arrive对象 |
| | | backData(){ |
| | | backData() { |
| | | const { arrive } = this; |
| | | this.$emit('getArrive',{arrive}); |
| | | this.$emit('getArrive', { arrive }); |
| | | }, |
| | | // 删除图片 |
| | | handleRemove(index) { |
| | | this.arrive.situationPic.splice(index,1); |
| | | } |
| | | }, |
| | | watch: { |
| | | 'arrive.situationPic.length': { |
| | | handler(newLen, oldLen) { |
| | | if (newLen !== 0) { |
| | | this.$refs.arriveForm.validateField('situationPic'); |
| | | } |
| | | }, |
| | | deep: true, |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .arrive-title{ |
| | | .arrive-title { |
| | | line-height: 60px; |
| | | font-weight: 650; |
| | | font-size: 20px; |
| | |
| | | } |
| | | |
| | | .img-list { |
| | | height: 80px; |
| | | height: 60px; |
| | | position: relative; |
| | | |
| | | display: flex; |
| | | img { |
| | | width: 60px; |
| | | height: 60px; |
| | | margin-right: 10px; |
| | | } |
| | | .img{ |
| | | height: 60px; |
| | | position: relative; |
| | | } |
| | | .myicon { |
| | | position: absolute; |
| | | top: 0px; |
| | | right: 0px; |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | } |