<template>
|
<view class="">
|
<u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="100"
|
:labelStyle="{fontSize:'28rpx'}">
|
<view class="content">
|
<!-- <u-form-item label="社区名称" prop="districtName" borderBottom required>
|
<view class="content-name f-28">
|
{{info.districtName}}
|
</view>
|
</u-form-item> -->
|
<u-form-item label="校园名称" prop="campusName" borderBottom required>
|
<u-input v-model="info.campusName" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
|
inputAlign="right"></u-input>
|
</u-form-item>
|
<!-- <u-form-item label="自查时间" prop="checkTime" borderBottom required @click="showSelectDate = true">
|
<u-input v-model="info.checkTime" disabled disabledColor="#ffffff" border="none" placeholder="请选择"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item> -->
|
<u-form-item label="自查人姓名" prop="checkUserName" borderBottom required>
|
<u-input v-model="info.checkUserName" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
|
inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="自查人手机" prop="checkTelephone" borderBottom required>
|
<u-input type="number" v-model="info.checkTelephone" border="none" placeholder="请输入"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="自查位置" prop="location" borderBottom ref="location" required>
|
<view class="address-row flex">
|
<view class="address-content f-28" v-if="info.location">
|
{{info.location}}
|
</view>
|
<view class="address-content f-28 c-99" v-if="!info.location">
|
请选择位置
|
</view>
|
<view class="location-btn c-main f-24" @click="getLocation()">
|
获取地址
|
</view>
|
</view>
|
</u-form-item>
|
</view>
|
|
<view class="content">
|
<u-form-item label="四个一工程" prop="fourOne" labelWidth="300" :borderBottom="false" required
|
labelPosition="top">
|
<view class="mt-30">
|
<u-radio-group v-model="info.fourOne" placement="column">
|
<u-radio :customStyle="{marginBottom: '10px'}" v-for="(item, index) in fourOneList"
|
:key="index" :label="item.name" :name="item.name" labelSize="14" iconSize="20">
|
</u-radio>
|
</u-radio-group>
|
</view>
|
</u-form-item>
|
</view>
|
|
<view class="upload bgc-ff">
|
<view class="f-28 mb-20">四个一工程照片</view>
|
<view class="mt-20">
|
<u-upload :fileList="foImageUrls" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
@afterRead="afterReadImgs($event,'foImageUrls')" @delete="deletePics($event,'foImageUrls')">
|
<view class="upload-item upload-icon flex_base">
|
<u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
|
</view>
|
</u-upload>
|
</view>
|
</view>
|
|
<view class="content">
|
<u-form-item label="消防设施种类" prop="fireFacsType" borderBottom required>
|
<u-input v-model="info.fireFacsType" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
|
inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="消防器材数量" prop="fireFacsNums" :borderBottom="false" required>
|
<u-input type="number" v-model="info.fireFacsNums" border="none" placeholder="请输入"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
</view>
|
|
<view class="upload bgc-ff">
|
<view class="f-28 mb-20">消防器材照片（需拍到灭火器有效期）</view>
|
<view class="mt-20">
|
<u-upload :fileList="fireFacsImageUrls" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
@afterRead="afterReadImgs($event,'fireFacsImageUrls')"
|
@delete="deletePics($event,'fireFacsImageUrls')">
|
<view class="upload-item upload-icon flex_base">
|
<u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
|
</view>
|
</u-upload>
|
</view>
|
</view>
|
|
<view class="content">
|
<u-form-item label="安全通道状态" prop="scStatus" :borderBottom="false" ref="scFlag" required
|
@click="isShowScStatus = true">
|
<u-input v-model="info.scStatus" disabled disabledColor="#fff" border="none" placeholder="请选择"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
</view>
|
|
<view class="upload bgc-ff mb-20">
|
<view class="f-28 mb-20">安全通道图片（需拍到门和指示箭头）</view>
|
<view class="mt-20">
|
<u-upload :fileList="scImageUrls" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
@afterRead="afterReadImgs($event,'scImageUrls')" @delete="deletePics($event,'scImageUrls')">
|
<view class="upload-item upload-icon flex_base">
|
<u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
|
</view>
|
</u-upload>
|
</view>
|
</view>
|
<view class="upload bgc-ff">
|
<view class="f-28 mb-20">校园周边安全巡查照片</view>
|
<view class="mt-20">
|
<u-upload :fileList="patrolImageUrls" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
@afterRead="afterReadImgs($event,'patrolImageUrls')"
|
@delete="deletePics($event,'patrolImageUrls')">
|
<view class="upload-item upload-icon flex_base">
|
<u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
|
</view>
|
</u-upload>
|
</view>
|
</view>
|
|
<view class="content">
|
<u-form-item label="大门是否装备防撞装置" prop="antiCollision" :borderBottom="false" ref="scFlag" required>
|
<u-radio-group v-model="info.antiCollision">
|
<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in statusList" :key="index"
|
:label="item" :name="item">
|
</u-radio>
|
</u-radio-group>
|
</u-form-item>
|
</view>
|
|
<view class="upload bgc-ff mb-20" v-if="info.antiCollision == '有'">
|
<view class="f-28 mb-20">校园防撞装置照片</view>
|
<view class="mt-20">
|
<u-upload :fileList="antiCollisionImageUrls" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
@afterRead="afterReadImgs($event,'antiCollisionImageUrls')"
|
@delete="deletePics($event,'antiCollisionImageUrls')">
|
<view class="upload-item upload-icon flex_base">
|
<u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
|
</view>
|
</u-upload>
|
</view>
|
</view>
|
|
<view class="content">
|
<u-form-item label="专职保安人数" prop="fullSoNums" borderBottom required>
|
<u-input type="number" v-model="info.fullSoNums" border="none" placeholder="请输入"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="兼职保安人数" prop="partSoNums" borderBottom required>
|
<u-input type="number" v-model="info.partSoNums" border="none" placeholder="请输入"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="学校监控总数" prop="monitorNums" borderBottom required>
|
<u-input type="number" v-model="info.monitorNums" border="none" placeholder="请输入"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="监控是否全覆盖" prop="monitorOver" borderBottom required>
|
<u-radio-group v-model="info.monitorOver">
|
<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in statusList" :key="index"
|
:label="item" :name="item">
|
</u-radio>
|
</u-radio-group>
|
</u-form-item>
|
<u-form-item label="高空抛物监控" prop="highAltitudeMonitor" :borderBottom="false" ref="scFlag" required>
|
<u-input v-model="info.highAltitudeMonitor" border="none" placeholder="请输入"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
</view>
|
<view class="upload bgc-ff mb-20">
|
<view class="f-28 mb-20">高空抛物监控（一是监控照片，一是此监控拍摄到的图像）</view>
|
<view class="mt-20">
|
<u-upload :fileList="haImageUrls" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
@afterRead="afterReadImgs($event,'haImageUrls')" @delete="deletePics($event,'haImageUrls')">
|
<view class="upload-item upload-icon flex_base">
|
<u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
|
</view>
|
</u-upload>
|
</view>
|
</view>
|
|
</u-form>
|
<button class="submit-btn" @click="sumitInfo">{{isEdit?"保存":"提交"}}</button>
|
<button class="list-btn" @click="navigatorPage">我上报的事件</button>
|
<u-datetime-picker ref="datetimePicker" :show="showSelectDate" v-model="checkTime" mode="datetime"
|
:formatter="formatter" @confirm="confirmDate" @cancel="showSelectDate = false"></u-datetime-picker>
|
<u-picker :show="isShowScStatus" :columns="scStatus" :defaultIndex="scStatusIndex"
|
@cancel="isShowScStatus = false" @confirm="confirmScStatus"></u-picker>
|
</view>
|
</template>
|
|
<script>
|
import uploadMixin from "@/mixin/uploadMixin";
|
import {
|
saveSchoolReporting,
|
getSchoolReportingDetail,
|
setSchoolReporting
|
} from "@/api/reporting/reporting";
|
|
export default {
|
mixins: [uploadMixin],
|
data() {
|
return {
|
info: {
|
campusName: "",
|
checkUserName: "",
|
checkTelephone: "",
|
checkTime: Number(new Date()),
|
location: '',
|
fourOne: '',
|
fireFacsType: '',
|
fireFacsNums: '',
|
scStatus: '',
|
antiCollision: '',
|
fullSoNums: '',
|
partSoNums: '',
|
monitorNums: '',
|
monitorOver: '',
|
highAltitudeMonitor: '',
|
houseCode: "",
|
checkUserId: "",
|
reportType: 6
|
},
|
rules: {
|
// 'districtName': {
|
// type: 'string',
|
// required: true,
|
// message: '请输入社区名称',
|
// trigger: ['blur', 'change']
|
// },
|
'info.campusName': {
|
type: 'string',
|
required: true,
|
message: '请输入学校名称',
|
trigger: ['blur', 'change']
|
},
|
// 'info.checkTime': {
|
// type: 'string',
|
// required: true,
|
// message: '请选择自查时间',
|
// trigger: ['blur', 'change']
|
// },
|
'info.checkUserName': {
|
type: 'string',
|
required: true,
|
message: '请输入自查人姓名',
|
trigger: ['blur', 'change']
|
},
|
'info.checkTelephone': [{
|
type: 'number',
|
required: true,
|
message: '请输入自查人手机',
|
trigger: ['blur', 'change']
|
},
|
|
{
|
validator: (rule, value, callback) => {
|
return uni.$u.test.mobile(value);
|
},
|
message: '手机号码不正确',
|
trigger: ['change', 'blur']
|
}
|
|
],
|
'info.location': {
|
type: 'string',
|
required: true,
|
message: '请输入自查位置',
|
trigger: ['blur', 'change']
|
},
|
'info.fourOne': {
|
type: 'string',
|
required: false,
|
message: '请选择四个一工程',
|
trigger: ['blur', 'change']
|
},
|
'info.fireFacsType': {
|
type: 'string',
|
required: false,
|
message: '请选择消防器材种类',
|
trigger: ['blur', 'change']
|
},
|
'info.fireFacsNums': {
|
type: 'string',
|
required: true,
|
message: '请选择消防器材数量',
|
trigger: ['blur', 'change']
|
},
|
'info.scStatus': {
|
type: 'string',
|
required: true,
|
message: '请选择安全通道状态',
|
trigger: ['blur', 'change']
|
},
|
'info.antiCollision': {
|
type: 'string',
|
required: true,
|
message: '请选择是否配备防撞装置',
|
trigger: ['blur', 'change']
|
},
|
'info.fullSoNums': {
|
type: 'string',
|
required: true,
|
message: '请输入全职保安数量',
|
trigger: ['blur', 'change']
|
},
|
'info.partSoNums': {
|
type: 'string',
|
required: true,
|
message: '请输入兼职保安数量',
|
trigger: ['blur', 'change']
|
},
|
'info.monitorNums': {
|
type: 'string',
|
required: true,
|
message: '请输入监控总数',
|
trigger: ['blur', 'change']
|
},
|
'info.monitorOver': {
|
type: 'string',
|
required: true,
|
message: '请选择监控是否全覆盖',
|
trigger: ['blur', 'change']
|
},
|
'info.highAltitudeMonitor': {
|
type: 'string',
|
required: true,
|
message: '请输入高空抛物监控',
|
trigger: ['blur', 'change']
|
},
|
},
|
showSelectDate: false,
|
foImageUrls: [], //四个一工程照片
|
fireFacsImageUrls: [], //灭火器图片
|
scImageUrls: [], // 安全通道图片
|
patrolImageUrls: [], //周边巡查照片
|
antiCollisionImageUrls: [], //防撞装置照片
|
haImageUrls: [], //高空抛物监控照片
|
statusList: ["有", "无"],
|
scStatus: [
|
["开启", "关闭"]
|
], //安全通道状态
|
scStatusIndex: [0],
|
isShowScStatus: false,
|
checkTime: Number(new Date()),
|
fourOneList: [{
|
name: "已配备一个安检门",
|
value: 1
|
},
|
{
|
name: "已配备一键报警器",
|
value: 2
|
},
|
{
|
name: "已配备一组存储柜",
|
value: 3
|
},
|
{
|
name: "已配备一间会客室",
|
value: 4
|
},
|
{
|
name: "以上皆未配备",
|
value: 5
|
}
|
],
|
isEdit: false,
|
id: "",
|
status: ""
|
}
|
},
|
onLoad(option) {
|
|
if (option.id) {
|
this.isEdit = true;
|
this.id = option.id;
|
this.getDetail(option.id)
|
} else {
|
let siteInfo = uni.getStorageSync("siteInfo");
|
let userInfo = uni.getStorageSync("userInfo");
|
this.$set(this.info, "houseCode", siteInfo.houseCode);
|
// this.$set(this.info, "districtName", siteInfo.neiName || "");
|
this.$set(this.info, "checkUserName", userInfo.real_name);
|
this.$set(this.info, "checkTelephone", userInfo.phone);
|
this.$set(this.info, "checkUserId", userInfo.user_id);
|
}
|
|
|
},
|
|
onReady() {
|
// 微信小程序需要用此写法
|
this.$refs.datetimePicker.setFormatter(this.formatter)
|
},
|
|
methods: {
|
|
getDetail(id) {
|
getSchoolReportingDetail({
|
taskId: id
|
}).then(res => {
|
if (res.code == 200) {
|
let data = res.data;
|
this.status = data.confirmFlag;
|
for (let i in this.info) {
|
this.info[i] = data[i]
|
}
|
this.foImageUrls = this.$setImageUrl(data.foImageUrls, 2);
|
this.fireFacsImageUrls = this.$setImageUrl(data.fireFacsImageUrls, 2);
|
this.scImageUrls = this.$setImageUrl(data.scImageUrls, 2);
|
this.antiCollisionImageUrls = this.$setImageUrl(data.antiCollisionImageUrls, 2)
|
this.patrolImageUrls = this.$setImageUrl(data.patrolImageUrls, 2)
|
this.haImageUrls = this.$setImageUrl(data.haImageUrls, 2)
|
if (data.scStatus) {
|
this.scStatusIndex = [this.$getIndex(this.scStatus[0], data.scStatus)]
|
}
|
|
if (data.checkTime) {
|
this.checkTime = Number(new Date(data.checkTime));
|
}
|
this.info.id = data.id;
|
this.info.taskId = data.taskId;
|
|
}
|
})
|
},
|
|
|
|
getLocation() {
|
uni.chooseLocation({
|
success: (res) => {
|
this.$set(this.info, "location", res.address);
|
}
|
})
|
},
|
|
formatter(type, value) {
|
if (type === 'year') {
|
return `${value}年`
|
}
|
if (type === 'month') {
|
return `${value}月`
|
}
|
if (type === 'day') {
|
return `${value}日`
|
}
|
return value
|
},
|
|
confirmDate(e) {
|
this.showSelectDate = false;
|
this.info.checkTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
},
|
|
confirmScStatus(e) {
|
this.scStatusIndex = e.indexs;
|
this.info.scStatus = e.value[0];
|
this.isShowScStatus = false;
|
},
|
|
async afterReadImgs(event, key) {
|
this.showLoading()
|
let lists = [].concat(event.file)
|
let fileListLen = this[key].length
|
lists.map((item) => {
|
this[key].push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
})
|
})
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].url)
|
this[key].splice(fileListLen, 1, Object.assign({}, {
|
url: result.data.link,
|
name: result.data.name
|
}))
|
fileListLen++
|
}
|
this.loadingClose()
|
},
|
|
checkImages() {
|
if (this.foImageUrls.length) {
|
this.$set(this.info, "foImageUrls", this.setImages(this.foImageUrls))
|
}
|
if (this.fireFacsImageUrls.length) {
|
this.$set(this.info, "fireFacsImageUrls", this.setImages(this.fireFacsImageUrls))
|
}
|
if (this.patrolImageUrls.length) {
|
this.$set(this.info, "patrolImageUrls", this.setImages(this.patrolImageUrls))
|
}
|
if (this.antiCollisionImageUrls.length) {
|
this.$set(this.info, "antiCollisionImageUrls", this.setImages(this.antiCollisionImageUrls))
|
}
|
if (this.haImageUrls.length) {
|
this.$set(this.info, "haImageUrls", this.setImages(this.haImageUrls))
|
}
|
},
|
|
setImages(key) {
|
let urls = [];
|
for (let i of key) {
|
urls.push(i.name);
|
}
|
return urls.join(",")
|
},
|
|
sumitInfo() {
|
this.$refs.form.validate().then(valid => {
|
this.checkImages()
|
if (this.isEdit) {
|
this.setRequest()
|
} else {
|
this.addRequst()
|
}
|
|
})
|
},
|
|
addRequst() {
|
saveSchoolReporting(this.info).then(res => {
|
uni.showToast({
|
icon: 'success',
|
title: '提交成功',
|
success() {
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 300)
|
}
|
})
|
})
|
},
|
|
setRequest() {
|
this.info.status = 1;
|
this.info.reportType = 6;
|
setSchoolReporting(this.info).then(res => {
|
uni.showToast({
|
icon: 'success',
|
title: '修改成功',
|
})
|
setTimeout(() => {
|
if (this.status == 4) {
|
this.reLoadPrePage()
|
} else {
|
uni.navigateBack();
|
}
|
}, 300)
|
})
|
},
|
|
|
navigatorPage() {
|
this.$u.func.globalNavigator('schoolList', "navTo")
|
},
|
|
//刷新上一页数据后返回
|
reLoadPrePage() {
|
let pages = getCurrentPages();
|
let prePage = pages[pages.length - 2];
|
prePage.$vm.currentPage = 1;
|
prePage.$vm.list = [];
|
prePage.$vm.getList();
|
uni.navigateBack();
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="less">
|
page {
|
background-color: #F5F5F5;
|
}
|
|
.content {
|
margin: 20rpx 30rpx;
|
padding: 0 30rpx;
|
background-color: #fff;
|
}
|
|
.content-name {
|
flex: 1;
|
text-align: right;
|
}
|
|
/deep/.u-radio-group--row {
|
justify-content: flex-end;
|
}
|
|
.site-box {
|
padding: 30rpx;
|
margin: 20rpx 30rpx;
|
border-radius: 4rpx;
|
|
.c-aa {
|
color: #aaa;
|
}
|
|
.address {
|
width: 60%;
|
margin-left: 25rpx;
|
}
|
}
|
|
.upload-item {
|
width: 140rpx;
|
height: 140rpx;
|
border: 1px solid #EEEEEE;
|
}
|
|
.upload {
|
margin: 0 30rpx;
|
padding: 30rpx;
|
|
|
}
|
|
.submit-btn {
|
width: 690rpx;
|
height: 78rpx;
|
line-height: 78rpx;
|
background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
font-size: 32rpx;
|
color: #fff;
|
margin-top: 50rpx;
|
}
|
|
.list-btn {
|
width: 690rpx;
|
height: 78rpx;
|
line-height: 78rpx;
|
background: linear-gradient(163deg, #c7d7dc 0%, #c3cdd8 100%);
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
font-size: 32rpx;
|
color: #fff;
|
margin-top: 50rpx;
|
margin-bottom: 20rpx;
|
}
|
|
.mb-20 {
|
margin-bottom: 20rpx;
|
}
|
|
.mt-30 {
|
margin-top: 30rpx;
|
}
|
|
.address-row {
|
flex: 1;
|
justify-content: flex-end;
|
align-items: center;
|
}
|
|
.address-content {
|
width: calc(100% - 116rpx - 20rpx);
|
margin-right: 20rpx;
|
text-align: right;
|
}
|
|
.location-btn {
|
width: 116rpx;
|
height: 46rpx;
|
line-height: 46rpx;
|
border-radius: 4rpx;
|
border: 1px solid currentColor;
|
padding: 0;
|
background-color: #fff;
|
text-align: center;
|
}
|
</style>
|
