You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
321 lines
8.7 KiB
321 lines
8.7 KiB
<!-- 报事上报 -->
|
|
<template>
|
|
<scroll-view class="content" scroll-y="true">
|
|
<image src="/static/img/bsorbxBac.png" class="contentImg"></image>
|
|
<view class="xjTitle">填写信息</view>
|
|
<view class="xjTips">请您填写相关问题</view>
|
|
<view class="conItem">
|
|
<u-form labelPosition="left">
|
|
|
|
<u-form-item labelAlign="right" labelWidth="100px" label="乐业社区" prop="sex" borderBottom
|
|
@click="lysqShow = true" ref="item1">
|
|
<u--input v-model="form.apartmentName" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
|
|
<u-form-item labelAlign="right" labelWidth="100px" label="巡检问题类型" borderBottom
|
|
@click="wtlxShow = true" ref="item1">
|
|
<u--input v-model="form.questionName" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
|
|
<u-form-item labelAlign="right" labelWidth="100px" label="标题内容" borderBottom ref="item1">
|
|
<u--textarea v-model="form.title" placeholder="请输入内容" count maxlength="500"></u--textarea>
|
|
</u-form-item>
|
|
|
|
<u-form-item labelAlign="right" labelWidth="100px" label="问题描述" borderBottom ref="item1">
|
|
<u--textarea v-model="form.content" placeholder="请输入内容" count maxlength="500"></u--textarea>
|
|
</u-form-item>
|
|
<u-form-item labelAlign="right" labelWidth="120px" label="上传图片/视频" borderBottom ref="item1">
|
|
<u-upload
|
|
v-model="fileList"
|
|
:max-count="10"
|
|
:multiple="true"
|
|
:preview-full-image="true"
|
|
:deletable="true"
|
|
:show-upload-list="true"
|
|
:file-list="fileList"
|
|
accept="image"
|
|
@after-read="afterRead"
|
|
@delete="onDelete"
|
|
>
|
|
<view class="custom-upload-btn">
|
|
<view class="icon-box">
|
|
<image class="camera-icon" src="/static/img/camera-icon.png" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<view class="upload-tips">点击上传</view>
|
|
</view>
|
|
</u-upload>
|
|
</u-form-item>
|
|
|
|
|
|
</u-form>
|
|
</view>
|
|
|
|
<view class="conItem" style="margin-top: 40rpx;">
|
|
<u--form labelPosition="left">
|
|
<u-form-item labelAlign="right" labelWidth="100px" label="巡检人姓名" borderBottom ref="item1">
|
|
<u--input v-model="form.inspector" border="none"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelAlign="right" labelWidth="100px" label="巡检人电话" borderBottom ref="item1">
|
|
<u--input v-model="form.inspectorPhone" border="none"></u--input>
|
|
</u-form-item>
|
|
</u--form>
|
|
</view>
|
|
|
|
<view class="btn" @click="handleBtn">提交</view>
|
|
|
|
<u-action-sheet :show="lysqShow" :actions="deptOptions" title="请选择乐业社区" @close="lysqShow = false" @select="handleTreeSelect">
|
|
</u-action-sheet>
|
|
<u-action-sheet :show="wtlxShow" :actions="questionTypeList" title="请选择问题类型" @close="wtlxShow = false" @select="handleQuestionSelect">
|
|
</u-action-sheet>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
queryDeptDropdownList,
|
|
} from "@/common/rec";
|
|
import { getdeptList,addInspection,uploadFile } from '@/common/api.js';
|
|
import { getDicts } from "@/common/system/dict/data";
|
|
import { baseUrl } from "@/utils/config";
|
|
export default {
|
|
data () {
|
|
return {
|
|
uploadUlr: baseUrl + '/common/upload',
|
|
wtlxShow: false,
|
|
lysqShow: false,
|
|
deptOptions: [],
|
|
questionTypeList: [],
|
|
form: {
|
|
apartmentId: '',
|
|
apartmentName:'',
|
|
questionType: '',
|
|
questionName: '',
|
|
title: '',
|
|
content: '',
|
|
inspector: '',
|
|
inspectorPhone: '',
|
|
inspectionTime: '',
|
|
imageList: []
|
|
},
|
|
rules:{
|
|
sex:[
|
|
{ required: true, message: '请输入', trigger: 'blur' }
|
|
]
|
|
},
|
|
radio: '',
|
|
switchVal: false,
|
|
fileList: [],
|
|
}
|
|
},
|
|
onLoad () {
|
|
this.getTree()
|
|
this.getDictType()
|
|
},
|
|
methods: {
|
|
afterRead(event) {
|
|
let files = Array.isArray(event) ? event.file : [event.file]
|
|
this.fileList = this.fileList.concat(files)
|
|
// console.log(this.fileList);
|
|
this.fileList.forEach( item => {
|
|
this.uploadFile(item[0])
|
|
});
|
|
},
|
|
onDelete(event) {
|
|
this.fileList.splice(event.index, 1)
|
|
this.form.imageList.splice(event.index, 1)
|
|
},
|
|
getDictType(){
|
|
getDicts('inspection_question_type').then((res) => {
|
|
this.questionTypeList = res.data.map(item=>{
|
|
item.name = item.dictLabel
|
|
return item
|
|
})
|
|
});
|
|
},
|
|
getTree(){
|
|
getdeptList().then(async (res) => {
|
|
this.deptOptions = this.handleTree(
|
|
res.data,
|
|
"deptId",
|
|
"parentId",
|
|
"children",
|
|
2
|
|
);
|
|
// console.log(this.deptOptions[0].children);
|
|
// console.log(this.deptOptions[0].children.map(item=> item.deptName));
|
|
this.deptOptions = await this.getListByParentId("1", '156');
|
|
console.log(this.deptOptions);
|
|
|
|
});
|
|
},
|
|
// 三级联动通用接口
|
|
async getListByParentId(type, id) {
|
|
return new Promise((resolve, reject) => {
|
|
queryDeptDropdownList({ type, id }).then((res) => {
|
|
resolve(res.data);
|
|
});
|
|
});
|
|
},
|
|
|
|
uploadFile(file){
|
|
let that = this
|
|
console.log('uploadFile',file);
|
|
uni.uploadFile({
|
|
url: this.uploadUlr,
|
|
filePath: file.url,
|
|
name: 'file', //对应后台接口参数名
|
|
method: 'post',
|
|
header: {
|
|
"Authorization": uni.getStorageSync('token')
|
|
},
|
|
formData: {
|
|
//要上传的文件
|
|
file: file
|
|
},
|
|
success(res) {
|
|
let data = JSON.parse(res.data)
|
|
console.log(data);
|
|
if (data.url) {
|
|
that.form.imageList.push({
|
|
url:data.url,
|
|
name: '',
|
|
format: file.type
|
|
})
|
|
}
|
|
},
|
|
fail(res) {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '图片上传失败!'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleBtn () {
|
|
// console.log(this.form);
|
|
let parmas = JSON.parse(JSON.stringify(this.form))
|
|
delete parmas.apartmentName
|
|
delete parmas.questionName
|
|
addInspection(parmas).then(res=>{
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '提交成功!'
|
|
})
|
|
})
|
|
},
|
|
handleTreeSelect (e) {
|
|
this.form.apartmentName = e.name
|
|
this.form.apartmentId = e.id
|
|
},
|
|
handleQuestionSelect(e){
|
|
this.form.questionName = e.dictLabel
|
|
this.form.questionType = e.dictValue
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
padding-bottom: 50rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.contentImg {
|
|
position: absolute;
|
|
left: 0rpx;
|
|
top: 0rpx;
|
|
width: 100%;
|
|
height: 280rpx;
|
|
z-index: -1;
|
|
}
|
|
|
|
.xjTitle {
|
|
width: 100%;
|
|
color: rgba(16, 16, 16, 1);
|
|
font-size: 38rpx;
|
|
font-weight: bold;
|
|
margin-left: 30rpx;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.xjTips {
|
|
width: 100%;
|
|
color: rgba(102, 102, 102, 1);
|
|
font-size: 26rpx;
|
|
margin-left: 30rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.conItem {
|
|
width: calc(100% - 40rpx);
|
|
border-radius: 10rpx;
|
|
margin-left: 20rpx;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
|
margin-top: 20rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.btn {
|
|
width: 414rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
border-radius: 600rpx;
|
|
background: linear-gradient(86.25deg, rgba(13, 198, 198, 1) 3.03%, rgba(19, 194, 194, 1) 3.03%, rgba(70, 219, 213, 1) 96.43%);
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 34rpx;
|
|
text-align: center;
|
|
margin: auto;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.custom-upload-btn {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
background: #fafafa;
|
|
border: 2rpx solid #f0f0f0;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 20rpx 16rpx 0 0;
|
|
}
|
|
.icon-box{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background: #ceeced;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.camera-icon{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
.upload-tips {
|
|
color: #bbb;
|
|
font-size: 24rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
.u-upload__wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
}
|
|
.u-upload__preview {
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
margin-right: 16rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
</style>
|
|
|