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> |