361 lines
8.3 KiB
Vue
361 lines
8.3 KiB
Vue
<template>
|
|
<view class="rectificationReply">
|
|
<view class="fixedheader">
|
|
<headers :themeType="true" :showBack="true">
|
|
<view class="headerName">
|
|
整改回复
|
|
</view>
|
|
</headers>
|
|
</view>
|
|
<scroll-view class="smallHeight" :style="{ 'padding-top': (statusBarHeight + 45) * 1.5 + 'rpx' }" scroll-y>
|
|
<view class="reply-form">
|
|
<view class="b-bottom">
|
|
<view class="form-item flex">
|
|
<view class="form-lable"><text>整改人</text></view>
|
|
<view class="form-text">
|
|
<text>{{userName}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="b-bottom">
|
|
<view class="form-item flex f-column a-start">
|
|
<view class="form-lable"><text>整改内容</text></view>
|
|
<view class="form-textarea">
|
|
<textarea @blur="bindTextAreaBlur"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item flex f-column a-start">
|
|
<view class="form-lable"><text>图片</text></view>
|
|
<view class="uni-form-input imgBox_wrap">
|
|
<view class="addImgBox" @click="uploadImg" v-if="replyForm.imgFileList.length<5">
|
|
<image src="/static/safeMange/upload_image.png" class="icon-add" color="#F56C6C"></image>
|
|
</view>
|
|
<view class="imgBox" v-show="replyForm.imgFileList.length>0" v-for="(item,index) in replyForm.imgFileList" :key="index">
|
|
<image :src="url_config+'image/'+item.url" class="img"
|
|
@click="previewImage(url_config+'image/'+item.url)"></image>
|
|
<view @click="deleteImg(item,1)" class="deleteImg">
|
|
<image src="/static/safeMange/close_icon.png" color="#F56C6C"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="submit-btn" @click="submitForm">提交</view>
|
|
<canversCom v-if="openImg" @imgUrl="imgUrl" :imgList="imgList"></canversCom>
|
|
<levitatedsphere :x="100" :y="80"></levitatedsphere>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
|
|
import canversCom from "@/pages/videoManage/component/canversCom.vue"
|
|
import headers from '../../../components/headers/headers.vue'
|
|
export default{
|
|
data(){
|
|
return{
|
|
imgList: {},
|
|
openImg: false,
|
|
statusBarHeight: 0,
|
|
replyForm:{
|
|
imgFileList:[],
|
|
content: ""
|
|
},
|
|
userId: "",
|
|
userName: "",
|
|
base64Image: '',
|
|
}
|
|
},
|
|
components:{
|
|
headers,
|
|
canversCom
|
|
},
|
|
onShow(){
|
|
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
|
|
this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
|
|
this.userName = JSON.parse(uni.getStorageSync('userInfo')).realName
|
|
},
|
|
methods:{
|
|
imgUrl(val) {
|
|
this.openImg = false
|
|
this.imgUpload(val)
|
|
this.openImg = true
|
|
},
|
|
//图片上传请求的接口
|
|
imgUpload(baseImg) {
|
|
let that = this
|
|
let arr = []
|
|
that.base64Image = baseImg
|
|
let parmars = {
|
|
base64Image: that.base64Image
|
|
}
|
|
|
|
this.sendRequest({
|
|
url: 'xmgl/upload/uploadBase64',
|
|
method: 'post',
|
|
header: {
|
|
'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
|
|
},
|
|
data: parmars,
|
|
success: (res) => {
|
|
that.replyForm.imgFileList[that.replyForm.imgFileList.length - 1].url = res.data.imageUrl
|
|
}
|
|
})
|
|
},
|
|
bindTextAreaBlur(e){
|
|
this.replyForm.content = e.detail.value
|
|
},
|
|
//上传附件
|
|
uploadImg() {
|
|
var that = this
|
|
uni.chooseImage({
|
|
count: 5 - that.replyForm.imgFileList.length,
|
|
success(res) {
|
|
const tempFilePaths = res.tempFilePaths;
|
|
uni.uploadFile({
|
|
url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
|
|
filePath: tempFilePaths[0],
|
|
name: 'files',
|
|
success: (uploadFileRes) => {
|
|
let data = {
|
|
name: JSON.parse(uploadFileRes.data).data[0].filename,
|
|
url: JSON.parse(uploadFileRes.data).data[0].imageUrl
|
|
};
|
|
that.replyForm.imgFileList.push(data)
|
|
uni.getImageInfo({
|
|
src: tempFilePaths[0],
|
|
success: (resInfo) => {
|
|
console.log('传过去啦 resInfo', resInfo)
|
|
that.imgList = {
|
|
imgUrl: tempFilePaths[0],
|
|
imgWidth: resInfo.width,
|
|
imgHeight: resInfo.height,
|
|
// team:'班组人员',
|
|
// name: '张三'
|
|
}
|
|
that.openImg = true
|
|
}
|
|
})
|
|
that.openImg = false
|
|
}
|
|
});
|
|
}
|
|
})
|
|
},
|
|
//删除附件
|
|
deleteImg(val, type) {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定删除该附件吗?',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
if (type == 1) {
|
|
let fileArr = JSON.parse(JSON.stringify(that.replyForm.imgFileList));
|
|
fileArr.forEach((item, index) => {
|
|
if (item.url == val.url) {
|
|
fileArr.splice(index, 1)
|
|
}
|
|
})
|
|
that.replyForm.imgFileList = fileArr;
|
|
} else if (type == 2) {
|
|
let fileArr = JSON.parse(JSON.stringify(that.videoFileList));
|
|
fileArr.forEach((item, index) => {
|
|
if (item.url == val.url) {
|
|
fileArr.splice(index, 1)
|
|
}
|
|
})
|
|
that.videoFileList = fileArr;
|
|
}
|
|
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
//预览图片
|
|
previewImage(url) {
|
|
uni.previewImage({
|
|
urls: [url]
|
|
})
|
|
},
|
|
|
|
submitForm(){
|
|
let data = {
|
|
createUser: this.userId,
|
|
fileUrl: "",
|
|
inspectId: "",
|
|
additionalRemarks: this.replyForm.content,
|
|
status: 2,
|
|
type: 1
|
|
}
|
|
let arr = []
|
|
this.replyForm.imgFileList.forEach(item=>{
|
|
arr.push(item.url)
|
|
})
|
|
data.fileUrl = arr.join(",")
|
|
if(uni.getStorageSync('detailData')){
|
|
data.inspectId = uni.getStorageSync('detailData').id
|
|
}
|
|
console.log(this.replyForm, uni.getStorageSync('detailData'), data)
|
|
let _this = this
|
|
this.sendRequest({
|
|
url: 'xmgl/hiddenDangerRectifyRecord/add',
|
|
method: 'post',
|
|
data: data,
|
|
success: (res) => {
|
|
if(res.code == 200){
|
|
uni.showToast({
|
|
title:'保存成功'
|
|
})
|
|
// _this.restForm()
|
|
uni.redirectTo({
|
|
url: './addExamine?type=5'
|
|
});
|
|
}
|
|
console.log(res.result)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.rectificationReply{
|
|
height: 100%;
|
|
.fixedheader{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
.smallHeight{
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background: #F6F6F6;
|
|
}
|
|
.reply-form{
|
|
background: #fff;
|
|
padding-bottom: 20rpx;
|
|
.b-bottom{
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
}
|
|
.form-item{
|
|
padding: 36rpx 32rpx;
|
|
line-height: 36rpx;
|
|
.form-lable{
|
|
color: #F56C6C;
|
|
white-space: nowrap;
|
|
:deep(span){
|
|
color: #000;
|
|
}
|
|
}
|
|
.form-text{
|
|
color: #9899A2;
|
|
}
|
|
.form-textarea{
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
box-sizing: border-box;
|
|
height: 160rpx;
|
|
border: 1px dashed #EAEAEA;
|
|
border-radius: 10rpx;
|
|
overflow: auto;
|
|
:deep(uni-textarea){
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 28rpx;
|
|
background: #FAFAFA;
|
|
padding: 20rpx 32rpx;
|
|
box-sizing: border-box;
|
|
.uni-textarea-compute{
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.flex{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.f-column{
|
|
flex-direction: column;
|
|
}
|
|
.a-start{
|
|
align-items: flex-start;
|
|
}
|
|
.imgBox_wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 18rpx;
|
|
width: 75%;
|
|
}
|
|
|
|
.imgBox {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
display: inline-flex;
|
|
position: relative;
|
|
margin-right: 30rpx;
|
|
margin-bottom: 16rpx;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.deleteImg {
|
|
position: absolute;
|
|
right: -12rpx;
|
|
top: -18rpx;
|
|
uni-image{
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.addImgBox {
|
|
border: 1px solid rgba(42, 43, 91, 0.1);
|
|
background-color: #f6f5f8;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
margin-right: 12rpx;
|
|
uni-image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.submit-btn{
|
|
width: 100%;
|
|
height: 96rpx;
|
|
background: #409EFF;
|
|
color: #fff;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
text-align: center;
|
|
line-height: 96rpx;
|
|
}
|
|
}
|
|
</style>
|