486 lines
11 KiB
Vue
486 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<page-meta :page-font-size="$store.state.vuex_fontsize+'px'" :root-font-size="$store.state.vuex_fontsize+'px'"></page-meta>
|
|||
|
|
<view>
|
|||
|
|
<view class="title-box" v-if="detail!='' && isOther==false">{{detail.children[classIndex].name}}</view>
|
|||
|
|
<view class="title-box" v-else>其他情况</view>
|
|||
|
|
<view class="content-box" v-if="detail!=''">
|
|||
|
|
<view class="content-name">
|
|||
|
|
{{(1+parseInt(classIndex2))+'. '+detail.children[classIndex].children[classIndex2].name}}
|
|||
|
|
</view>
|
|||
|
|
<view class="content-content">
|
|||
|
|
{{detail.children[classIndex].children[classIndex2].content}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="problem-top-box">
|
|||
|
|
<view class="problem-title" style="margin-left: 15px;">发现问题</view>
|
|||
|
|
<!-- <view class="jc-one-btns">
|
|||
|
|
<u-icon class="jc-one-icon" size="18" name="checkmark-circle" color="rgb(96, 98, 102)"
|
|||
|
|
@click="noProblem"></u-icon>
|
|||
|
|
<u-icon class="jc-one-icon" size="18" name="warning-fill" color="#F56C6C"
|
|||
|
|
style="margin-left:100%">
|
|||
|
|
</u-icon>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="problem-box" v-for="(itemForm,index) in form" :key="index">
|
|||
|
|
|
|||
|
|
<view class="problem-form-box">
|
|||
|
|
<view class="delDiv">
|
|||
|
|
<u-icon v-if="index!=0" name="minus-circle" color="#F56C6C" size="22" class="delBtn"
|
|||
|
|
@click="delProblem(index)"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<u--form labelPosition="left" :model="form[index]" :ref="'uForm'+index" :rules="rules">
|
|||
|
|
<u-form-item label="现场情况" prop="remark" borderBottom labelWidth="70">
|
|||
|
|
<u--input v-model="form[index].remark" border="none"></u--input>
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item v-if="isShow()" label="责任人" prop="responsiblePerson" borderBottom labelWidth="70">
|
|||
|
|
<u--input v-model="form[index].responsiblePerson" border="none"></u--input>
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label="照片" prop="photo" :ref="'upLoad'+index" labelWidth="70">
|
|||
|
|
<u-upload :fileList="form[index].img" @afterRead="afterRead(index,$event)"
|
|||
|
|
@delete="deletePic(index,$event)" multiple :maxCount="9">
|
|||
|
|
</u-upload>
|
|||
|
|
</u-form-item>
|
|||
|
|
</u--form>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="problem-add-box" @click="addProblem">+ 添加问题</view>
|
|||
|
|
<view style="display:flex;">
|
|||
|
|
<u-button type="primary" text="确定"
|
|||
|
|
style="margin: 30px auto; width: 30%;background-color:#00b27b;border-color:#00b27b;"
|
|||
|
|
@click="submiProblem"></u-button>
|
|||
|
|
<u-button type="default" plain text="取消" style="margin: 30px auto; width: 30%;" @click="noProblem">
|
|||
|
|
</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
baseUrl
|
|||
|
|
} from '../../config.js'
|
|||
|
|
import {
|
|||
|
|
getToken
|
|||
|
|
} from '@/utils/auth'
|
|||
|
|
import {
|
|||
|
|
gethandbookInfo
|
|||
|
|
} from '@/api/handbook.js'
|
|||
|
|
import auth from "@/plugins/auth.js"
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
id: "", // 页面id
|
|||
|
|
tid: "", // 子记录id
|
|||
|
|
address: "", // 地图页面的地址
|
|||
|
|
otherUser: "", // 同行人
|
|||
|
|
projectName: "", // 工程名称
|
|||
|
|
form: [],
|
|||
|
|
rules: {
|
|||
|
|
'remark': {
|
|||
|
|
type: 'string',
|
|||
|
|
required: true,
|
|||
|
|
message: '请填写现场情况',
|
|||
|
|
trigger: ['blur', 'change']
|
|||
|
|
},
|
|||
|
|
'responsiblePerson': {
|
|||
|
|
type: 'string',
|
|||
|
|
required: true,
|
|||
|
|
message: '请填写责任人',
|
|||
|
|
trigger: ['blur', 'change']
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
formTem: {
|
|||
|
|
indexId: "",
|
|||
|
|
type: '1',
|
|||
|
|
responsiblePerson: "",
|
|||
|
|
remark: "",
|
|||
|
|
img: [],
|
|||
|
|
},
|
|||
|
|
fileList1: [],
|
|||
|
|
detail: "",
|
|||
|
|
classIndex: "",
|
|||
|
|
classIndex2: "",
|
|||
|
|
key: "",
|
|||
|
|
isOther: false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// onBackPress(options) {
|
|||
|
|
// if (options.from === 'navigateBack') {
|
|||
|
|
// uni.showModal({
|
|||
|
|
// title: '提示',
|
|||
|
|
// content: '确定要退出吗？',
|
|||
|
|
// success: function(res) {
|
|||
|
|
// if (res.confirm) {
|
|||
|
|
// // 用户点击了确定，正常进行返回行为
|
|||
|
|
// return true;
|
|||
|
|
// } else if (res.cancel) {
|
|||
|
|
// // 用户点击了取消，不执行返回行为
|
|||
|
|
// return false;
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
// // 如果不是 navigateBack 触发的返回，比如导航栏的返回按钮或者系统返回按钮，则不会阻止默认行为
|
|||
|
|
// return false;
|
|||
|
|
// },
|
|||
|
|
onLoad(option) {
|
|||
|
|
if (option.isOther == 1) {
|
|||
|
|
this.isOther = true;
|
|||
|
|
this.otherInit();
|
|||
|
|
} else {
|
|||
|
|
this.id = option.id;
|
|||
|
|
this.classIndex = option.classIndex;
|
|||
|
|
this.classIndex2 = option.classIndex2;
|
|||
|
|
this.gethandbookInfo(this.id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
isShow() {
|
|||
|
|
console.log(auth.hasPermi('system:config:showResponsiblePerson'));
|
|||
|
|
return auth.hasPermi('system:config:showResponsiblePerson');
|
|||
|
|
},
|
|||
|
|
beforeRouteLeave(to, from, next) {
|
|||
|
|
// 在这里编写你离开当前页面前需要执行的操作
|
|||
|
|
// 例如：提示用户是否确认离开
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '您确定要离开此页面吗？',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
// 用户点击确定，通过next()方法继续路由跳转
|
|||
|
|
next();
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
// 用户点击取消，不执行路由跳转
|
|||
|
|
// 不调用next()方法，即不进行路由跳转
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
gethandbookInfo(id) {
|
|||
|
|
this.key = this.classIndex + '_' + this.classIndex2;
|
|||
|
|
|
|||
|
|
gethandbookInfo(id).then(res => {
|
|||
|
|
console.log(this.$store.getters.problemList, this.key);
|
|||
|
|
this.detail = res.data;
|
|||
|
|
|
|||
|
|
this.formTem.indexId = this.detail.children[this.classIndex].children[this.classIndex2].id;
|
|||
|
|
|
|||
|
|
if (this.$store.getters.problemList.hasOwnProperty(this.key)) {
|
|||
|
|
if (this.$store.getters.problemList[this.key].length > 0) {
|
|||
|
|
this.form = this.$store.getters.problemList[this.key];
|
|||
|
|
} else {
|
|||
|
|
this.form = [];
|
|||
|
|
this.form.push({
|
|||
|
|
...this.formTem
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
this.form = [];
|
|||
|
|
this.form.push({
|
|||
|
|
...this.formTem
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
otherInit() {
|
|||
|
|
this.key = 'other';
|
|||
|
|
this.formTem.indexId = '1';
|
|||
|
|
if (this.$store.getters.problemList.hasOwnProperty(this.key)) {
|
|||
|
|
this.form = this.$store.getters.problemList[this.key];
|
|||
|
|
} else {
|
|||
|
|
this.form = [];
|
|||
|
|
this.form.push({
|
|||
|
|
...this.formTem
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
addProblem() {
|
|||
|
|
this.formTem.img = [];
|
|||
|
|
this.form.push({
|
|||
|
|
...this.formTem
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
delProblem(index) {
|
|||
|
|
this.form.splice(index, 1);
|
|||
|
|
},
|
|||
|
|
noProblem(index) {
|
|||
|
|
let flag = 0;
|
|||
|
|
this.form.forEach(item => {
|
|||
|
|
if (item.remark != "" && item.remark != null) {
|
|||
|
|
uni.$u.toast('现场情况不能为空')
|
|||
|
|
flag = 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (flag == 1) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '是否清除问题？',
|
|||
|
|
success: (res)=> {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
this.$store.commit('SET_PL', {
|
|||
|
|
key: this.key,
|
|||
|
|
value: []
|
|||
|
|
})
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1
|
|||
|
|
})
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
this.$store.commit('SET_PL', {
|
|||
|
|
key: this.key,
|
|||
|
|
value: []
|
|||
|
|
})
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
submiProblem() {
|
|||
|
|
let flag = 0;
|
|||
|
|
this.form.forEach(item => {
|
|||
|
|
if (item.remark == "" || item.remark == null) {
|
|||
|
|
uni.$u.toast('现场情况不能为空')
|
|||
|
|
flag = 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (flag == 1) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$store.commit('SET_PL', {
|
|||
|
|
key: this.key,
|
|||
|
|
value: this.form
|
|||
|
|
})
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// console.log(this.$refs['uForm'+0]);
|
|||
|
|
// for(let i=0; i<this.form.length;i++){
|
|||
|
|
// this.$refs['uForm'+i].validate().then(res => {
|
|||
|
|
// uni.$u.toast('校验通过')
|
|||
|
|
// }).catch(errors => {
|
|||
|
|
// uni.$u.toast('校验失败')
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
|
|||
|
|
// console.log(this.form);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 删除图片
|
|||
|
|
deletePic(index, event) {
|
|||
|
|
this.form[index].img.splice(event.index, 1)
|
|||
|
|
},
|
|||
|
|
// 新增图片
|
|||
|
|
async afterRead(index, event) {
|
|||
|
|
console.log(index, event);
|
|||
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|||
|
|
let lists = [].concat(event.file)
|
|||
|
|
let fileListLen = this.form[index].img.length
|
|||
|
|
lists.map((item) => {
|
|||
|
|
this.form[index].img.push({
|
|||
|
|
...item,
|
|||
|
|
status: 'uploading',
|
|||
|
|
message: '上传中'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
for (let i = 0; i < lists.length; i++) {
|
|||
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|||
|
|
|
|||
|
|
console.log("result>>", result);
|
|||
|
|
|
|||
|
|
|
|||
|
|
let item = this.form[index].img[fileListLen]
|
|||
|
|
this.form[index].img.splice(fileListLen, 1, Object.assign(item, {
|
|||
|
|
status: 'success',
|
|||
|
|
message: '',
|
|||
|
|
url: result
|
|||
|
|
}))
|
|||
|
|
fileListLen++
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
uploadFilePromise(url) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
let a = uni.uploadFile({
|
|||
|
|
url: baseUrl + '/common/upload', // 仅为示例，非真实的接口地址
|
|||
|
|
filePath: url,
|
|||
|
|
name: 'file',
|
|||
|
|
header: {
|
|||
|
|
Authorization: 'Bearer ' + getToken()
|
|||
|
|
},
|
|||
|
|
formData: {
|
|||
|
|
user: 'test'
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.data) {
|
|||
|
|
let imgUrl = JSON.parse(res.data).fileName;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
resolve(imgUrl)
|
|||
|
|
}, 1000)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.title-box {
|
|||
|
|
margin: 10px;
|
|||
|
|
min-height: 38px;
|
|||
|
|
overflow: auto;
|
|||
|
|
display: flex;
|
|||
|
|
font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-style: normal;
|
|||
|
|
font-size: 19px;
|
|||
|
|
padding: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-box {
|
|||
|
|
margin: 10px;
|
|||
|
|
border-width: 1px;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-color: rgb(242, 242, 242);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
box-shadow: rgba(102, 102, 102, 0.35) 0px 0px 5px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
padding: 5px;
|
|||
|
|
|
|||
|
|
.content-name {
|
|||
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-style: normal;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #000000;
|
|||
|
|
text-align: left;
|
|||
|
|
line-height: 28px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-content {
|
|||
|
|
background: inherit;
|
|||
|
|
background-color: rgba(255, 255, 255, 1);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-width: 1px;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-color: rgba(228, 228, 228, 1);
|
|||
|
|
box-shadow: none;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #000000;
|
|||
|
|
text-align: left;
|
|||
|
|
line-height: 20px;
|
|||
|
|
padding: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.problem-top-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.problem-title {
|
|||
|
|
font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-style: normal;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: rgb(217, 0, 27);
|
|||
|
|
text-align: left;
|
|||
|
|
line-height: 28px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.jc-one-btns {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: 50%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.problem-box {
|
|||
|
|
margin: 10px;
|
|||
|
|
border-width: 1px;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-color: rgb(242, 242, 242);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
box-shadow: rgba(102, 102, 102, 0.35) 0px 0px 5px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
padding: 5px;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.problem-form-box {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.problem-add-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #c1c1c1;
|
|||
|
|
font-family: 'Arial Normal', 'Arial', sans-serif;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-style: normal;
|
|||
|
|
font-size: 13px;
|
|||
|
|
letter-spacing: normal;
|
|||
|
|
margin: 10px;
|
|||
|
|
border-width: 1px;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-color: #ffffff;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
box-shadow: #ffffff 0px 0px 5px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delDiv {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: end;
|
|||
|
|
|
|||
|
|
.delBtn {
|
|||
|
|
margin-top: 8px;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
::v-deep .u-button__text{
|
|||
|
|
font-size:14px !important;
|
|||
|
|
}
|
|||
|
|
</style>
|