<template>
|
<view class="home_index">
|
<view class="home_content">
|
<u-navbar
|
title="整改详情"
|
bgColor="transparent"
|
leftIconColor="#fff"
|
titleStyle="text-align:left;width:100%;color:#fff;margin-left:40px;"
|
:autoBack="true">
|
</u-navbar>
|
<view class="home_top_bg"></view>
|
<!-- <view class="notice_header">
|
<u-image class="notice_header_icon" src="@/static/time_header.png" width="88rpx" height="88rpx"></u-image>
|
<view class="notice_header_time">整改截止时间：<span>2022-10-09 10:00</span></view>
|
</view> -->
|
<view class="notice_main" v-if="stateBtn === '1'">
|
<view class="notice_main_headers">{{noticeDetails.inspectName}}</view>
|
<view class="notice_main_matter">
|
<view class="notice_matter_items">
|
<view class="notice_matter_titles">问题内容：</view>
|
<view class="notice_matter_datas">{{noticeDetails.inspectContent}}</view>
|
</view>
|
<view style="height:450px;overflow: auto;">
|
<view class="notice_matter_phone" v-for="(item,index) in ArrNotice" :key="index">
|
<!-- <u-image :src="`https://szpipe.thhy-tj.com/${item.imgPath}`" ></u-image> -->
|
<u-album :urls="[`https://szpipe.thhy-tj.com/${item.imgPath}`]"></u-album>
|
</view>
|
</view>
|
<view class="items_tyle" style="margin:10px 0">
|
<view style="color: #333333;font-size: 17px;margin-bottom:10px;">整改内容：</view>
|
<u--textarea v-model="inspectContent" placeholder="请输入整改内容" height="100"></u--textarea>
|
</view>
|
<view class="notice_matter_items">
|
<view class="notice_matter_titles">上传整改后照片：</view>
|
</view>
|
<view class="notice_matter_uoplod">
|
<u-upload
|
:fileList="imageList"
|
@afterRead="afterRead"
|
@delete="deleteImage"
|
name="6"
|
:maxCount="1"
|
width="150"
|
height="150">
|
<image src="@/static/upload_image.png" mode="widthFix" style="width: 64px!important;height:100px!important;display: flex;justify-content: center;"></image>
|
<view style="text-align: center;font-size: 16px;color: #666666;">上传照片</view>
|
</u-upload>
|
</view>
|
</view>
|
</view>
|
<view class="notice_footer_btn" v-if="stateBtn === '1'">
|
<u-button type="primary" text="提交" color="#1976FF" @click="submintBtn"></u-button>
|
</view>
|
<view class="notice_details" v-else>
|
<view class="notice_main_headers">{{noticeDetails.inspectName}}</view>
|
<view class="notice_main_matter">
|
<view class="notice_matter_items">
|
<view class="notice_matter_titles">问题内容：</view>
|
<view class="notice_matter_datas">{{noticeDetails.inspectContent}}</view>
|
</view>
|
<view style="height:450px;overflow: auto;">
|
<view class="notice_matter_phone" v-for="(item,index) in ArrNotice" :key="index">
|
<!-- <u-image :src="`https://szpipe.thhy-tj.com/${item.imgPath}`" @click="clickImgs"></u-image> -->
|
<u-album :urls="[`https://szpipe.thhy-tj.com/${item.imgPath}`]"></u-album>
|
</view>
|
</view>
|
<view class="notice_matter_items" style="margin-top:10px">
|
<view class="notice_matter_titles">整改结果：</view>
|
<view class="notice_matter_datas">{{noticeDetails.inspectContent}}</view>
|
</view>
|
<view style="overflow: auto;height:100%">
|
<view class="notice_matter_phone" v-for="(item,index) in overArrNotice" :key="index">
|
<!-- <u-image :src="`https://szpipe.thhy-tj.com/${item.imgPath}`" ></u-image> -->
|
<u-album :urls="[`https://szpipe.thhy-tj.com/${item.imgPath}`]"></u-album>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {basrUrl} from '@/api/http.js'
|
import { throttle } from '../../plugins/public.js';
|
export default {
|
data(){
|
return{
|
stateBtn:null,//1:待整改 2：已整改
|
imageList:[],//上传的图片
|
noticeDetails:null,//整改详情
|
secureInspectId:null,//id
|
overArrNotice:[],//整改结果图片
|
ArrNotice:[],//未整改图片
|
inspectContent:"",//整改内容
|
}
|
},
|
onLoad(option) {
|
this.stateBtn = option.isState
|
this.secureInspectId = option.secureInspectId
|
this.getDetailsInfo(option.secureInspectId)
|
},
|
methods:{
|
//点击图片
|
clickImgs(val){
|
console.log(val)
|
},
|
//提交按钮
|
submintBtn: throttle(function() {
|
if(this.imageList.length!==0 &&this.inspectContent!==""){
|
const params ={
|
secureInspectId:this.secureInspectId,
|
feedbackContent:this.inspectContent,
|
isType:2
|
}
|
params.files = this.imageList.map(item=>{
|
return item.data
|
});
|
this.$api.labourSystem.submitNoticeBtn(params).then((res) => {
|
if(res.success) {
|
uni.$u.toast("提交成功！");
|
uni.redirectTo({
|
url: './noticeIndex'
|
});
|
} else {
|
uni.$u.toast(res.statusMsg);
|
}
|
})
|
}else{
|
uni.$u.toast('请输入所有项');
|
return false
|
}
|
}, 3000),
|
//获取信息详情
|
getDetailsInfo(val){
|
this.$api.reboSystem.detailsCheckSafe({secureInspectId:val}).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.noticeDetails = res.data
|
this.overArrNotice = res.data.tsecureInspectPaths.filter(item=>item.isType ===2)
|
this.ArrNotice = res.data.tsecureInspectPaths.filter(item=>item.isType ===1)
|
}else{
|
uni.$u.toast(res.statusMsg);
|
}
|
})
|
},
|
// 读取图片后
|
afterRead(event) {
|
this.imageList.push({
|
status: 'loading',
|
message: '上传中',
|
})
|
uni.uploadFile({
|
url: `${basrUrl}/file/file/upload`,
|
fileType: 'image',
|
filePath: event.file.url,
|
name: 'file',
|
success: (res) => {
|
const data = JSON.parse(res.data);
|
this.$set(this.imageList, this.imageList.length - 1, {
|
id: this.imageList.length + 1,
|
status: 'success',
|
message: '',
|
data: data.data,
|
url: `https://szpipe.thhy-tj.com/${data.data}`
|
})
|
},
|
fail: (error) => {
|
uni.$u.toast('上传失败！');
|
}
|
})
|
},
|
// 删除图片
|
deleteImage(event) {
|
this.$nextTick(() => {
|
this.imageList.splice(event.index, 1);
|
})
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.home_index{
|
background-color: #F6F6F6;
|
width: 100%;
|
height: 100vh;
|
overflow: hidden;
|
position: relative;
|
.home_content{
|
// position: relative;
|
height: 100%;
|
.home_top_bg{
|
background: url('https://s1.ax1x.com/2022/09/14/vvBuYq.png') no-repeat;
|
background-size: 100% 100%;
|
height: 40vh;
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
}
|
.notice_header{
|
height: 148px;
|
margin: 0px 15px;
|
position: absolute;
|
top: 50px;
|
right: 0;
|
left: 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
|
.notice_header_icon{
|
width: 100%;
|
height: 100%;
|
}
|
.notice_header_time{
|
margin-top: 15px;
|
font-size: 16px;
|
color: #FFFFFF;
|
}
|
}
|
.notice_details{
|
height:100%;
|
// overflow: auto;
|
position: absolute;
|
top: 110px;
|
left: 0px;
|
right: 0px;
|
margin: 0 15px;
|
border-radius: 6px;
|
padding:15px ;
|
background-color: #FFFFFF;
|
|
.notice_main_headers{
|
color:#1977FF;
|
font-size: 17px;
|
}
|
.notice_main_matter{
|
height: 95%;
|
margin-top: 15px;
|
display: flex;
|
flex-direction: column;
|
.notice_matter_items{
|
display: flex;
|
flex-direction:row;
|
|
.notice_matter_titles{
|
flex: none;
|
color: #333333;
|
font-size: 17px;
|
margin-left: 10px;
|
position: relative;
|
&::before{
|
content: "";
|
width: 3px;
|
height: 18px;
|
background-color: #1977FF;
|
position: absolute;
|
top: 3px;
|
left: -10px;
|
}
|
}
|
.notice_matter_datas{
|
color: #AEAEAE;
|
font-size: 17px;
|
}
|
}
|
.notice_matter_phone{
|
margin-top: 10px;
|
margin-bottom: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
}
|
}
|
.notice_main{
|
height:calc(100% - 174px);
|
position: absolute;
|
top: 110px;
|
left: 0px;
|
right: 0px;
|
margin: 0 15px;
|
border-radius: 6px;
|
padding:15px ;
|
// overflow: auto;
|
background-color: #FFFFFF;
|
|
.notice_main_headers{
|
color:#1977FF;
|
font-size: 17px;
|
}
|
.notice_main_matter{
|
height: calc(100% - 30px);
|
// overflow: auto;
|
margin-top: 15px;
|
display: flex;
|
flex-direction: column;
|
.notice_matter_items{
|
display: flex;
|
flex-direction:row;
|
|
.notice_matter_titles{
|
color: #333333;
|
font-size: 17px;
|
margin-left: 10px;
|
position: relative;
|
&::before{
|
content: "";
|
width: 3px;
|
height: 18px;
|
background-color: #1977FF;
|
position: absolute;
|
top: 3px;
|
left: -10px;
|
}
|
}
|
.notice_matter_datas{
|
color: #AEAEAE;
|
font-size: 17px;
|
}
|
}
|
.notice_matter_phone{
|
margin-top: 10px;
|
margin-bottom: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.notice_matter_uoplod{
|
margin-top: 15px;
|
// height: 18vh;
|
padding: 15px 0px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px dashed #D8D8D8;
|
}
|
}
|
}
|
.notice_footer_btn{
|
display: flex;
|
align-items: center;
|
height: 40px;
|
position: absolute;
|
bottom: -5px;
|
left: 0px;
|
right: 0px;
|
margin: 0 15px;
|
}
|
}
|
}
|
|
::v-deep .u-upload{
|
flex: none !important;;
|
}
|
::v-deep image{
|
width: 320px!important;
|
height: 240px!important;
|
}
|
</style>
|
<style scoped>
|
.items_tyle /deep/.u-form-item__body{
|
flex-direction: column !important;
|
}
|
.notice_matter_uoplod /deep/ image{
|
width: 64px!important;
|
height: 64px!important;
|
}
|
</style>
|
