<template>
|
<view class="check_add_index">
|
<u-form
|
ref="form"
|
:model="formCheck"
|
:rules="rulesCkeck"
|
labelWidth="auto"
|
labelPosition="left">
|
<view style="overflow: auto;width: 100%;background-color: #FFFFFF;" class="upload_items items_tyle">
|
<u-form-item label="问题照片">
|
<u-upload
|
:fileList="formCheck.imageList"
|
@afterRead="afterRead"
|
@delete="deleteImage"
|
name="66"
|
:previewFullImage="true"
|
:maxCount="6"
|
width="150"
|
height="150">
|
<image src="https://pipe.thhy-tj.com/group1/M00/00/02/bx5d1GSihuWAA-kBAAAICqDtUn8566.png" mode="widthFix" style="width:64px;height: 100px;display: flex;justify-content: center;"></image>
|
<view style="text-align: center;font-size: 16px;color: #666666;">上传照片</view>
|
</u-upload>
|
</u-form-item>
|
</view>
|
<u-form-item
|
label="隐患地点"
|
prop="dangerLocation"
|
borderBottom>
|
<u-input
|
v-model="formCheck.dangerLocation"
|
placeholder="请输入隐患地点"
|
border="none">
|
</u-input>
|
</u-form-item>
|
<view class="items_tyle">
|
<u-form-item
|
label="隐患标题"
|
prop="title"
|
borderBottom>
|
<u--textarea v-model="formCheck.title" placeholder="请输入隐患标题" height="100"></u--textarea>
|
</u-form-item>
|
</view>
|
</u-form>
|
<view class="submit_bnt">
|
<u-button type="primary" color="#1976FF" text="提交" @click="submitInsertForm()"></u-button>
|
</view>
|
<u-picker
|
:show="showUser"
|
:columns="userColumns"
|
keyName="realName"
|
@cancel="showUser = false"
|
@confirm="selectCompany">
|
</u-picker>
|
</view>
|
</template>
|
|
<script>
|
import { throttle } from '../../plugins/public.js';
|
import { basrUrl } from '@/api/http';
|
export default{
|
data(){
|
return{
|
showUser: false,//整改人弹框显隐
|
formCheck:{
|
imageList:[],//上传图片
|
userId:'',//整改人
|
},
|
rulesCkeck: {
|
dangerLocation: [{
|
required: true,
|
message: '请输入隐患地点',
|
trigger: 'blur'
|
}],
|
title: [{
|
required: true,
|
message: '请输入隐患标题',
|
trigger: 'blur'
|
}],
|
}
|
}
|
},
|
onLoad(option) {
|
},
|
methods:{
|
//提交按钮
|
submitInsertForm: throttle(function() {
|
this.$refs.form.validate().then((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formCheck);
|
params.imgEntities = this.formCheck.imageList.map(item=>{
|
return {
|
imgPath:item.data,
|
}
|
});
|
delete params.userId
|
delete params.imageList;
|
this.$api.reboSystem.addHiddenInfo(params).then((res) => {
|
if(res.success) {
|
uni.$u.toast("提交成功！");
|
uni.redirectTo({
|
url: './hiddenReport'
|
});
|
} else {
|
uni.$u.toast(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 读取图片后
|
afterRead(event) {
|
this.formCheck.imageList.push({
|
status: 'loading',
|
message: '上传中',
|
})
|
uni.uploadFile({
|
url: `${basrUrl}/file/file/upload`,
|
fileType: event.file.type,
|
filePath: event.file.url,
|
name: 'file',
|
success: (res) => {
|
const data = JSON.parse(res.data);
|
console.log(data,event,'名字')
|
this.$set(this.formCheck.imageList, this.formCheck.imageList.length - 1, {
|
id: this.formCheck.imageList.length + 1,
|
status: 'success',
|
message: '',
|
data: data.data,
|
url: `https://pipe.thhy-tj.com/${data.data}`
|
})
|
},
|
fail: (error) => {
|
uni.$u.toast('上传失败！');
|
}
|
})
|
},
|
// 删除图片
|
deleteImage(event) {
|
this.$nextTick(() => {
|
this.formCheck.imageList.splice(event.index, 1);
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.check_add_index{
|
background-color: #F6F6F6;
|
padding: 0 15px;
|
position: relative;
|
height: 100vh;
|
overflow: hidden;
|
}
|
.submit_bnt {
|
position: absolute;
|
bottom: 5%;
|
width: calc(100% - 30px);
|
}
|
|
|
::v-deep .u-input__content__field-wrapper__field {
|
text-align: right !important;
|
}
|
::v-deep .u-form-item{
|
margin: 15px 0;
|
padding: 0 10px;
|
background-color: #FFFFFF;
|
line-height: 40px;
|
border-radius: 4px;
|
}
|
::v-deep .u-upload{
|
flex: none !important;
|
justify-content: center;
|
align-items: center;
|
}
|
::v-deep .u-textarea{
|
background-color: #EFEFEF !important;
|
color: #999999 !important;
|
}
|
|
</style>
|
<style scoped>
|
.items_tyle /deep/.u-form-item__body{
|
flex-direction: column !important;
|
}
|
.upload_items /deep/.u-upload__wrap{
|
flex-wrap: nowrap;
|
align-items: center;
|
}
|
</style>
|
