<template>
<view :class="isUps == true ? 'prevent' : ''">
<cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
<block slot="backText">返回</block>
<block slot="content">有限空间信息</block>
<!-- <block slot="right" v-if="loginUserId==pd.INFORMANT && msg =='edit'"><!– 详情页面显示编辑按钮 –>-->
<!-- <view @click="$noMultipleClicks(goToEdit)">编辑</view>-->
<!-- </block>-->
</cu-custom>
<scroll-view scroll-y="false" >
<view class="form">
<!-- <view class="cu-form-textarea">
<view class="cu-form-title text-hui">检查内容</view>
<view class="f24 text-black">
{{pd.CHECK_CONTENT}}
</view>
</view> -->
<view class="de-card-list de-list">
<!-- <view class="de-title">
<text class="text-semi">隐患验收</text>
</view> -->
<view class="cu-form-textarea bb-default" style="border-top: 1upx solid #eee;" >
<view class="cu-form-title">有限空间编号</view>
<textarea maxlength="-1" :disabled="forbidEdit" v-model="pd.NUMBER" placeholder="按照（冀安监管（2016）217文件规定进行编制）"></textarea>
</view>
<view class="cu-form-group ">
<view class="title">有限空间名称</view>
<input name="input" :disabled="forbidEdit" v-model="pd.NAME" placeholder="请输入有限空间名称"></input>
</view>
<view class="cu-form-group ">
<view class="title">有限空间类型</view>
<picker @change="finiteSpaceChange" :disabled="forbidEdit" :value="findex" :range="finiteSpaceList" range-key="NAME">
<view class="picker">
{{pd.LIMITSPACETYPENAME?pd.LIMITSPACETYPENAME:'请选择'}}
</view>
</picker>
</view>
<view class="cu-form-group ">
<view class="title">位置及范围</view>
<input name="input" :disabled="forbidEdit" v-model="pd.POSITIONSCOPE" placeholder="请输入位置及范围"></input>
</view>
<view class="cu-form-group ">
<view class="title">主要危险及有害因素</view>
<input name="input" :disabled="forbidEdit" v-model="pd.PRIMARYHAZARD" placeholder="请输入主要危险及有害因素"></input>
</view>
<view class="cu-form-group ">
<view class="title">风险等级</view>
<picker @change="riskGradeChange" :disabled="forbidEdit" :value="rindex" :range="riskGradeList" range-key="NAME">
<view class="picker">
{{pd.RISKGRADENAME?pd.RISKGRADENAME:'请选择'}}
</view>
</picker>
</view>
<view class="cu-form-group ">
<view class="title">本有限空间最多作业人数</view>
<input name="input" :disabled="forbidEdit" type="number" @blur="isPosInt()" v-model="pd.MAXPERSON" placeholder="请输入本有限空间最多作业人数"></input>
</view>
<view class="cu-form-group ">
<view class="title text-hui">是否有应急指导书</view>
<radio-group class="selected" @change="radioType" :disabled="forbidEdit">
<view class="group mr20">
<radio class='radio' :disabled="forbidEdit" value="1" :checked="HASINSTRUCTOR==1"></radio>
<text>是</text>
</view>
<view class="group">
<radio class='radio' :disabled="forbidEdit" value="0" :checked="HASINSTRUCTOR==0"></radio>
<text>否</text>
</view>
<!--<button class="cu-btn bg-blue" style="width: 60px" @click="downloadAppendix(pd.INSTRUCTION_FILE)">
下载
</button>-->
</radio-group>
</view>
<view v-if="HASINSTRUCTOR==1 && !forbidEdit" class="cu-bar bg-white margin-top">
<view class="action asterisk">
应急指导照片
</view>
<!-- <view class="action">-->
<!-- {{imgList.length}}/4-->
<!-- </view>-->
</view>
<view v-if="HASINSTRUCTOR==1 && !forbidEdit" class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" data-type="0"
:data-url="imgList[index].filePath">
<image :src="imgList[index].filePath" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" data-type="0" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage(0)" v-if="imgList.length<1">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<!-- <view v-if="INSTRUCTION_FILE.length !== 0 && HASINSTRUCTOR==1" class="de-sub-content">-->
<!-- <scroll-view scroll-x class="bg-white nav" scroll-with-animation>-->
<!-- <view class="cu-item" v-bind:key="index">-->
<!-- <view class="imgs">-->
<!-- <image :src="'https://qgqy.qhdsafety.com/file/'+INSTRUCTION_FILE" :data-index="index" @click="ViewShowImage" mode=""></image>-->
<!-- </view>-->
<!-- </view>-->
<!-- </scroll-view>-->
<!-- </view>-->
<view class="cu-form-textarea bb-default" style="border-top: 1upx solid #eee;" >
<view class="cu-form-title">备注</view>
<textarea maxlength="-1" :disabled="forbidEdit" v-model="pd.DESCR" placeholder="请输入备注"></textarea>
</view>
<view class="cu-form-group ">
<view class="title">填报人</view>
<picker @change="informantChange" :disabled="forbidEdit" :value="uindex" :range="userList" range-key="USERNAME">
<view class="picker">
{{pd.INFORMANTNAME?pd.INFORMANTNAME:'请选择'}}
</view>
</picker>
</view>
<view class="cu-form-group ">
<view class="title">主要负责人</view>
<picker @change="principalChange" :disabled="forbidEdit" :value="pindex" :range="userList" range-key="USERNAME">
<view class="picker">
{{pd.PRINCIPALNAME?pd.PRINCIPALNAME:'请选择'}}
</view>
</picker>
</view>
<view class="cu-form-group ">
<view class="title">填报时间</view>
<picker mode="date" :disabled="forbidEdit" :value="pd.COMPILETIME" @change="changeDate">
<view class="picker">
{{pd.COMPILETIME?pd.COMPILETIME:'请选择'}}
</view>
</picker>
</view>
</view>
</view>
<view class="padding flex flex-direction">
<button v-if="!forbidEdit" class="cu-btn bg-blue margin-tb-sm lg" @click="$noMultipleClicks(goSubmit)">提交</button>
</view>
</scroll-view>
</view>
</template>
<script>
import {
basePath,corpinfoId,deptId,loginUser,formatDate,loginSession,baseImgPath
} from '@/common/tool.js';
import tkiTree from "@/components/select-tree/select-tree.vue"
import gcoord from '@/common/gcoord.js'
export default {
components: {
tkiTree
},
data() {
return {
isUps:false,
msg:'add',
riskId:'',
itemId:'',
index:'',
noClick:true,
pd:[],// 数据
finiteSpaceList:[], //有限空间类型
riskGradeList:[], // 风险等级
findex:-1,
rindex:-1,
HASINSTRUCTOR:1, // 是否有应急指导书
userList:[],//用户列表
imgList: [],
INSTRUCTION_FILE: [],
uindex:-1,
pindex:-1,
todayDate:'',
forbidEdit:true,// 禁止修改
baseImgPath:baseImgPath,
loginUserId:''
}
},
onLoad(event){
this.todayDate = formatDate(new Date(), 'yyyy-MM-dd');
this.pd.LIMITSPACE_ID = event.LIMITSPACE_ID;
if(this.pd.LIMITSPACE_ID){
this.msg="edit";
this.getData();
this.forbidEdit = Boolean(event.forbidEdit)
}else {
// 初始化填报时间
this.pd.COMPILETIME = this.todayDate;
// 初始化填报人
this.pd.INFORMANT = loginUser.USER_ID;
this.pd.INFORMANTNAME = loginUser.NAME;
this.forbidEdit = false;
}
this.loginUserId = loginUser.USER_ID;
this.getDict();
this.getUserList();
loginSession();
},
methods: {
getData() {
var _this = this;
uni.showLoading({
title: '请稍候'
})
uni.request({
url: basePath + '/app/limitspace/goEdit',
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
LIMITSPACE_ID: _this.pd.LIMITSPACE_ID,
},
success: (res) => {
if ("success" == res.data.result) {
uni.hideLoading();
_this.pd = res.data.pd; //参数map
_this.HASINSTRUCTOR=_this.pd.HASINSTRUCTOR;
_this.imgList.push({filePath:baseImgPath +res.data.pd.INSTRUCTION_FILE})
// _this.INSTRUCTION_FILE = res.data.pd.INSTRUCTION_FILE
} else if ("exception" == data.result) {
uni.showToast({
title: '错误',
duration: 2000
});
}
}
});
},
//获取数据字典数据
getDict: function () {
var _this = this;
uni.request({
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
url: basePath + '/dictionaries/getLevels?tm=' + new Date().getTime(),
data: {DICTIONARIES_ID: 'dad23a464729485ba364994942db83cc'},
dataType: 'json',
success: function (res) {
_this.finiteSpaceList = res.data.list;
}
});
uni.request({
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
url: basePath + '/dictionaries/getLevels?tm=' + new Date().getTime(),
data: {DICTIONARIES_ID: 'a178357ce6ce4d6a9ac95def6aca3a14'},
dataType: 'json',
success: function (res) {
_this.riskGradeList = res.data.list;
}
});
},
// 获取用户列表
getUserList(){
var _this = this;
uni.request({
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
url: basePath + '/app/user/listUserByCorp?tm=' + new Date().getTime(),
data: {CORPINFO_ID: corpinfoId},
dataType: 'json',
success: function (res) {
_this.userList = res.data.userList;
}
});
},
//图片上传
ChooseImage(e) {
var _this = this;
var ss = 4 - this.imgList.length;
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['camera', 'album'], //从相册选择
success: (res) => {
for(let i=0; i<res.tempFilePaths.length; i++){
if (e == 0) {
let img = {};
img.id = '';
img.filePath = res.tempFilePaths[i];
this.imgList.push(img)
console.log(this.imgList)
} else {
let img = {};
img.id = '';
img.filePath = res.tempFilePaths[i];
this.imgList1.push(img)
}
}
}
});
},
downloadAppendix(DISPOSAL_FILE) {
plus.runtime.openURL(this.baseImgPath + DISPOSAL_FILE, function (res) {
console.log(res);
});
},
ViewImage(e) {
if(e.currentTarget.dataset.type==0) {
let files =[];
for(var i=0;i<this.imgList.length;i++){
files.push(this.imgList[i].filePath)
}
uni.previewImage({
urls: files,
current: e.currentTarget.dataset.url
});
}
},
DelImg(e) {
var _this = this;
let i = e.currentTarget.dataset.index
uni.showModal({
title: '图片',
content: '确定要删除这张图片吗？',
cancelColor: "#000000",
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
if (e.currentTarget.dataset.type == 0) {
if (_this.imgList[i].id) {
uni.showLoading({
title: '处理中'
})
uni.request({
url: basePath + '/app/imgfiles/delete',
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
IMGFILES_ID: _this.imgList[i].id,
},
success: (res) => {
uni.hideLoading();
uni.showToast({
icon: 'none',
title: '删除成功',
duration: 1500
});
_this.imgList.splice(i, 1)
},
fail: (err) => {
uni.hideLoading();
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
})
} else {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
} else {
if (_this.imgList1[i].id) {
uni.showLoading({
title: '处理中'
})
uni.request({
url: basePath + '/app/limitspace/delete',
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
LIMITSPACE_ID: _this.imgList[i].id,
},
success: (res) => {
uni.hideLoading();
uni.showToast({
icon: 'none',
title: '删除成功',
duration: 1500
});
_this.imgList1.splice(i, 1)
},
fail: (err) => {
uni.hideLoading();
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
})
} else {
this.imgList1.splice(e.currentTarget.dataset.index, 1)
}
}
}
}
})
},
finiteSpaceChange(e) {
this.findex = e.detail.value;
this.pd.LIMITSPACETYPE=this.finiteSpaceList[this.findex].BIANMA;
this.pd.LIMITSPACETYPENAME=this.finiteSpaceList[this.findex].NAME;
this.$forceUpdate();//强制刷新
},
riskGradeChange(e) {
this.rindex = e.detail.value;
this.pd.RISKGRADE=this.riskGradeList[this.rindex].BIANMA;
this.pd.RISKGRADENAME=this.riskGradeList[this.rindex].NAME;
this.$forceUpdate();//强制刷新
},
informantChange(e){
this.uindex = e.detail.value;
this.pd.INFORMANT=this.userList[this.uindex].USER_ID;
this.pd.INFORMANTNAME=this.userList[this.uindex].USERNAME;
this.$forceUpdate();//强制刷新
},
principalChange(e){
this.pindex = e.detail.value;
this.pd.PRINCIPAL=this.userList[this.pindex].USER_ID;
this.pd.PRINCIPALNAME=this.userList[this.pindex].USERNAME;
this.$forceUpdate();//强制刷新
},
isPosInt(){
if(!/^[1-9]\d*$/.test(this.pd.MAXPERSON)){
uni.showToast({
icon: 'none',
title: '请输入正整数',
duration: 1500
});
}
},
changeDate(e) {
this.pd.COMPILETIME = e.detail.value
this.$forceUpdate();//强制刷新
},
goSubmit() {
var _this = this;
uni.showLoading({
title: '请稍候'
})
if (!_this.pd.NUMBER) {
uni.showToast({
icon: 'none',
title: '请填有限空间编号',
duration: 1500
});
return;
}
if (!_this.pd.NAME) {
uni.showToast({
icon: 'none',
title: '请填有限空间名称',
duration: 1500
});
return;
}
if (!_this.pd.LIMITSPACETYPE) {
uni.showToast({
icon: 'none',
title: '请选择有限空间类型',
duration: 1500
});
return;
}
if (!_this.pd.POSITIONSCOPE) {
uni.showToast({
icon: 'none',
title: '请填位置及范围',
duration: 1500
});
return;
}
if (!_this.pd.PRIMARYHAZARD) {
uni.showToast({
icon: 'none',
title: '请填主要危险及有害因素',
duration: 1500
});
return;
}
if (!_this.pd.RISKGRADE) {
uni.showToast({
icon: 'none',
title: '请选择风险等级',
duration: 1500
});
return;
}
if (!_this.pd.MAXPERSON) {
uni.showToast({
icon: 'none',
title: '请填本有限空间最多作业人数',
duration: 1500
});
return;
} else if(!/^[1-9]\d*$/.test(this.pd.MAXPERSON)){
uni.showToast({
icon: 'none',
title: '请输入正整数',
duration: 1500
});
}
if (!_this.HASINSTRUCTOR) {
uni.showToast({
icon: 'none',
title: '请选择是否有应急指导书',
duration: 1500
});
return;
}
if (!_this.pd.DESCR) {
uni.showToast({
icon: 'none',
title: '请填备注',
duration: 1500
});
return;
}
if (!_this.pd.INFORMANT) {
uni.showToast({
icon: 'none',
title: '请选择填报人',
duration: 1500
});
return;
}
if (!_this.pd.PRINCIPAL) {
uni.showToast({
icon: 'none',
title: '请选择主要负责人',
duration: 1500
});
return;
}
if (!_this.pd.COMPILETIME) {
uni.showToast({
icon: 'none',
title: '请选择填报时间',
duration: 1500
});
return;
}
console.log(_this.imgList[0].filePath)
uni.uploadFile({
url: basePath+'/app/limitspace/'+_this.msg,
// method: 'POST',
// dataType: 'json',
// header: {
// 'Content-type':'application/x-www-form-urlencoded'
// },
filePath: _this.imgList[0].filePath,
name: 'FFILE',
formData: {
LIMITSPACE_ID:this.pd.LIMITSPACE_ID,
NUMBER:this.pd.NUMBER,
NAME:this.pd.NAME,
LIMITSPACETYPE:this.pd.LIMITSPACETYPE,
POSITIONSCOPE:this.pd.POSITIONSCOPE,
PRIMARYHAZARD:this.pd.PRIMARYHAZARD,
RISKGRADE:this.pd.RISKGRADE,
MAXPERSON:this.pd.MAXPERSON,
HASINSTRUCTOR:this.HASINSTRUCTOR,
DESCR:this.pd.DESCR,
INFORMANT:this.pd.INFORMANT,
PRINCIPAL:this.pd.PRINCIPAL,
COMPILETIME:this.pd.COMPILETIME,
CORPINFO_ID:corpinfoId,
USER:loginUser.USER_ID,
},
success: (res) => {
uni.hideLoading();
if ("success" == JSON.parse(res.data).result) {
console.log("成功")
uni.showToast({
icon: 'none',
title: '提交成功',
duration: 1500
});
setTimeout(function(){
var pages = getCurrentPages(); // 获取当前页面栈
var prePage = pages[pages.length - 2]; // 上二级页面
prePage.$vm.initflag = true; // A 页面 init方法 为true
uni.navigateBack({delta: 1});
uni.hideLoading();
},1500);
}else{
uni.showToast({
icon:'none',
title: '系统错误',
duration: 2000
});
}
}
});
},
radioType(e){
this.HASINSTRUCTOR = e.detail.value
},
goToEdit(){
this.forbidEdit = false;
}
}
}
</script>
<style>
.prevent {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
}
.cu-form-title{
padding: 20upx 0;
}
.cu-form-textarea{
background-color: #ffffff;
padding: 1upx 30upx 20upx;
min-height: 100upx;
}
.cu-form-textarea textarea {
height: 4.6em;
width: 100%;
line-height: 1.2em;
flex: 1;
font-size: 28upx;
padding: 0;
}
.selected{
display: flex;
align-items: center;
height: 100upx;
}
.selected .radio{
transform:scale(0.8);
margin-right: 10upx;
}
.group{
display: flex;
align-items: center;
}
.cu-form-group .title{
font-size: 28upx;
color: #666;
}
.cu-bar .action:first-child {
font-size: 28upx;
}
</style>