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.
261 lines
7.0 KiB
261 lines
7.0 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.apartmentId" 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.questionType" 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="actions1" title="请选择问题类型" @close="wtlxShow = false" @select="sexSelect">
|
|
</u-action-sheet>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
queryDeptDropdownList,
|
|
} from "@/common/rec";
|
|
import { getdeptList,addInspection } from '@/common/api.js';
|
|
export default {
|
|
data () {
|
|
return {
|
|
wtlxShow: false,
|
|
lysqShow: false,
|
|
deptOptions: [],
|
|
actions1: [
|
|
{ name: '问题1', },
|
|
{ name: '问题2', },
|
|
],
|
|
form: {
|
|
apartmentId: '',
|
|
questionType: '',
|
|
title: '',
|
|
content: '',
|
|
inspector: '',
|
|
inspectorPhone: '',
|
|
inspectionTime: '',
|
|
imageList: []
|
|
},
|
|
rules:{
|
|
sex:[
|
|
{ required: true, message: '请输入', trigger: 'blur' }
|
|
]
|
|
},
|
|
radio: '',
|
|
switchVal: false,
|
|
fileList: [],
|
|
}
|
|
},
|
|
onLoad () {
|
|
this.getTree()
|
|
},
|
|
methods: {
|
|
afterRead(event) {
|
|
let files = Array.isArray(event) ? event : [event]
|
|
this.fileList = this.fileList.concat(files)
|
|
},
|
|
onDelete(event) {
|
|
this.fileList.splice(event.index, 1)
|
|
},
|
|
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);
|
|
});
|
|
});
|
|
},
|
|
handleBtn () {
|
|
addInspection().then(res=>{
|
|
console.log(res);
|
|
})
|
|
},
|
|
handleTreeSelect (e) {
|
|
console.log(e);
|
|
|
|
// this.model1.userInfo.sex = e.name
|
|
// this.$refs.uForm.validateField('userInfo.sex')
|
|
},
|
|
}
|
|
}
|
|
</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>
|
|
|