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.

363 lines
9.3 KiB

<template>
<view class="content">
<u-form :model="form" ref="uForm">
<u-form-item label="巡查项目" label-position="top" prop="name" required>
<u-input v-model="form.name" type="text" :border="true" placeholder="请填写巡查项目"/>
</u-form-item>
<u-form-item label-position="top" label="巡查记录" prop="content">
<u-input v-model="form.content" type='textarea' height='100' :border="true" />
</u-form-item>
<u-form-item label-position="top" label="现场照片">
<u-upload ref="uUpload" multiple :maxCount="10" :action="action" upload-text="选择附件"
:previewFullImage="true" @on-progress="onprogress" @on-success="tosuccess" :file-list="filesList" :form-data="otherData" :show-tips="false" @on-uploaded="function(lists, name) {return toupload(lists, name,'filesList')}"
@on-remove="function(index, lists, name) {return toremove(index, lists, name,'filesList')}">
</u-upload>
</u-form-item>
<u-form-item label-position="top" label="处理方式">
<u-radio-group v-model="normalstatus">
<u-radio
@change="radioChange"
v-for="(item, index) in statuss" :key="index"
:name="item.id"
>
{{item.name}}
</u-radio>
</u-radio-group>
</u-form-item>
<div v-if="normalstatus==2">
<u-form-item label="" label-position="top" prop="nextStatus">
<u-input v-model="nextStatus" type="select" :border="true" @click="nextShow = true" />
<u-select v-model="nextShow" mode="single-column" value-name="id" label-name="name" :list="slist"
@confirm="confirmNext"></u-select>
</u-form-item>
</div>
<div v-if="normalstatus==2 && nextStatusId==2">
<u-form-item label-position="top" label="处理记录" prop="deal_content">
<u-input v-model="form.deal_content" type='textarea' height='100' :border="true" />
</u-form-item>
<u-form-item label-position="top" label="处理后照片">
<u-upload ref="uUpload" multiple :maxCount="10" :action="action" upload-text="选择附件"
:previewFullImage="true" @on-progress="onprogress" @on-success="tosuccess" :file-list="dealFilesList" :form-data="otherData" :show-tips="false" @on-uploaded="function(lists, name) {return toupload(lists, name,'dealFilesList')}"
@on-remove="function(index, lists, name) {return toremove(index, lists, name,'dealFilesList')}">
</u-upload>
</u-form-item>
</div>
<div v-if="normalstatus==2 && nextStatusId==3">
<u-form-item label="位置" label-position="top" required>
<!-- <text>{{form.address}}</text> -->
<u-input v-model="form.address" disabled type='text'/>
<u-button shape="square" slot='right' size="mini" @click="chooseLocation" type="info">重新获取</u-button>
</u-form-item>
</div>
</u-form>
<u-button type="primary" @click="submit"></u-button>
</view>
</template>
<script>
export default {
data() {
return {
otherData: {
token: ""
},
showMap: false,
nextStatus:"可现场处理",
normalstatus:1,
nextStatusId:2,
nextShow:false,
action: "",
infoId:"",
slist:[
{
id:2,
name:"可现场处理"
},
{
id:3,
name:"不可现场处理"
}
],
statuss:[
{
id:1,
name:"无异常"
},
{
id:2,
name:"有异常"
}
],
filesList:[],
dealFilesList:[],
form: {
name:"",
content:"",
status:1,
deal_content:"",
deal_longitude:"",
deal_latitude:"",
address:"",
files_list:"",
deal_files_list:""
},
qqmapsdk:"",
width: 300,
height: 300,
rules: {
name: [{
required: true,
message: '请填写项目名称',
// 可以单个或者同时写两个触发验证方式
trigger: ['blur'],
}]
}
}
},
onLoad(options) {
var that = this;
if(options.id){
this.infoId = options.id;
this.showInfo(this.infoId);
}
this.action = this.util.HOST + "/api/mobile/upload-file";
this.otherData.token = uni.getStorageSync("userInfo_token").access_token;
},
onReady() {
this.$refs.uForm.setRules(this.rules);
let that = this;
uni.getLocation({
type: "gcj02",
geocode:true,
success(res) {
that.form.deal_latitude = res.latitude;
that.form.deal_longitude = res.longitude;
const url = "https://apis.map.qq.com/ws/geocoder/v1/?key=EUQBZ-MJALU-WZFVR-2HFNW-TIK2K-TNBJI&location="+res.latitude+","+res.longitude+"&output=jsonp"
that.$jsonp(
url
).then(re => {
that.form.address = re.result.formatted_addresses.recommend
})
}
})
uni.getSystemInfo({
complete(res) {
that.width = res.screenWidth * .8
that.height = res.screenHeight * .6
}
})
},
methods: {
toremove(index, lists, name,whatfile) {
if(whatfile=="filesList"){
this.filesList.splice(index,1)
// this.form.files_list = list;
}
if(whatfile=="dealFilesList"){
this.dealFilesList.splice(index,1)
// this.form.deal_files_list = list;
}
},
onprogress(res){
uni.showToast({
icon: "none",
title: "上传中",
duration: 2000
})
},
tosuccess(){
uni.showToast({
icon: "none",
title: "上传成功",
duration: 2000
})
},
toupload(lists, name, whatfile) {
var that = this;
let list = [];
if(whatfile=="filesList"){
that.filesList = lists
// this.form.files_list = list;
}
if(whatfile=="dealFilesList"){
that.dealFilesList = lists;
}
},
radioChange(val){
console.log(val)
},
confirmNext(e) {
console.log(e);
var that = this;
that.nextStatusId = e[0].value
that.nextStatus = e[0].label
},
submit() {
let that = this;
if(that.nextStatusId==3){
that.form.status = that.nextStatusId
}else{
that.form.status = that.normalstatus;
that.form.deal_latitude = "";
that.form.deal_longitude = "";
that.form.address = "";
}
let list = [];
let deallist=[];
for(var mod of that.filesList){
if( mod.response){
list.push({
upload_id: mod.response.id
})
}else{
list.push({
upload_id:mod.id
})
}
}
for(var mod of that.dealFilesList){
if( mod.response){
deallist.push({
upload_id: mod.response.id
})
}else{
deallist.push({
upload_id: mod.id
})
}
}
that.form.files_list = list;
that.form.deal_files_list = deallist;
// return;
this.$refs.uForm.validate(valid => {
if (valid) {
console.log('验证通过');
if(that.infoId){
that.util.request({
api: '/api/mobile/daily-inspection/save',
method: "POST",
data: that.form,
utilSuccess: function(res) {
uni.showToast({
icon: "none",
title: "提交成功",
complete() {
that.afterSubmit(res);
},
duration: 2000
})
},
utilFail: function(res) {
that.util.alert(res);
}
});
}else{
that.util.request({
api: '/api/mobile/daily-inspection/store',
method: "POST",
data: that.form,
utilSuccess: function(res) {
uni.showToast({
icon: "none",
title: "提交成功",
complete() {
that.afterSubmit(res);
},
duration: 2000
})
},
utilFail: function(res) {
that.util.alert(res);
}
});
}
} else {
console.log('验证失败');
}
});
},
afterSubmit(res) {
uni.redirectTo({
url: "../dailyList/dailyList"
})
},
showInfo(id){
var that = this;
that.util.request({
api: '/api/mobile/daily-inspection/show',
method: "get",
data: {
id:id
},
utilSuccess: function(result) {
that.form = result;
that.normalstatus = result.status;
if(result.status==3){
that.nextStatusId = 3;
that.normalstatus = 2;
that.nextStatus = "不可现场处理"
}
let _files = [];
let _dealfiles = [];
for (var mod of result.daily_inspection_files) {
let m = Object.assign({}, mod);
m.url = mod.files.url;
m.id = mod.files.id;
m.name = mod.files.original_name;
_files.push(m);
}
for (var mod of result.daily_inspection_deal_files) {
let m = Object.assign({}, mod);
m.url = mod.files.url;
m.id = mod.files.id;
m.name = mod.files.original_name;
_dealfiles.push(m);
}
that.filesList = _files
that.dealFilesList = _dealfiles
// that.form.files_list = _upfiles;
},
utilFail: function(res) {
that.util.alert(res);
}
});
},
chooseLocation(e) { //打开地图选择位置
var that = this;
uni.chooseLocation({
longitude : that.form.deal_longitude,
latitude : that.form.deal_latitude,
success: res => {
that.form.address = res.name;
that.form.deal_longitude = res.longitude;
that.form.deal_latitude = res.latitude;
}
});
},
}
}
</script>
<style>
.content {
padding: 20rpx;
}
.popuptitle {
background: #2979ff;
color: #fff;
padding: 20rpx 30rpx;
}
</style>