integrated_traffic_uniapp/pages/application/key-project-management/hidden-management/detail-list.vue

445 lines
13 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view>
<cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
<block slot="backText">返回</block>
<block slot="content">隐患管理</block>
</cu-custom>
<view class="top-fixed">
<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
<view class="flex text-center">
<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''"
v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
{{tabNav[index]}}
</view>
</view>
</scroll-view>
<view class="line"></view>
</view>
<scroll-view class="dy-scroll" @scrolltolower="scrolltolower" scroll-y
:style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
<view v-if="list.length>0">
<view class="dy-list">
<!-- @click="$noMultipleClicks(goToDetail,item.HIDDEN_ID)" -->
<view v-for="(item,index) of list" :key="index" :data-id="item.INSPECTION_ID"
class="dy-list-item p20">
<view class="dy-title-flex align-center">
<text>{{item.OUTSOURCED_NAME ? item.OUTSOURCED_NAME: item.AIOUTSOURCED_NAME}}</text>
</view>
<view class="dy-subtitle-flex">
<text>
隐患来源:{{ sourceState[item.SOURCE] }}
</text>
</view>
<view class="dy-subtitle-flex">
<text>隐患描述:{{ item.HIDDENDESCR }}</text>
</view>
<view class="dy-subtitle-flex">
<text>隐患发现人:{{ item.CREATOR_NAME || item.CREATOR_NAMES }}</text>
</view>
<view class="dy-subtitle-flex">
<text>隐患发现时间:{{item.CREATTIME}}</text>
</view>
<view class="dy-subtitle-flex">
<text>隐患整改人:{{item.RECTIFICATIONOR_NAME}}</text>
<text>整改时间:{{item.RECTIFICATIONTIME}}</text>
</view>
<view class="dy-subtitle-flex">
<text>隐患验收人:{{item.CREATOR_NAME}}</text>
<text>验收时间:{{item.CHECKTIME}}</text>
</view>
<view class="dy-subtitle-flex">
<text>隐患状态:{{state[item.STATE]}}</text>
<text>是否处罚:{{ item.ISPUNISH && (item.ISPUNISH === "1" ? "是" : "否") }}</text>
</view>
<view class="dy-subtitle-flex" style="height: 34upx;">
<text></text>
<text>
<button class="cu-btn bg-blue margin-tb-sm sm"
v-if="item.CREATOR == loginUserId || (TabCur + 1) == '2'"
@click="$noMultipleClicks(goToDetail,item.HIDDEN_ID)">
{{(TabCur + 1) == '1' ? '验收' : '查看'}}
</button>
<button style="margin-left: 20upx;"
v-if="item.ISPUNISH !== '2'
&& !item.KEYPROJECTPUNISH_ID
&& item.PUNISH_THE_PERSON.includes(loginUserId)
"
class="cu-btn bg-red margin-tb-sm sm"
@click.stop="fnModalShow(item)">
处罚
</button>
<!-- && item.CREATOR == loginUserId" -->
</text>
</view>
</view>
</view>
</view>
<view v-else-if="dataFlag=='noData'" class="dy-null">
<view class="dy-null-img">
<image :src="background[dataFlag].url" mode=""></image>
</view>
<view class="dy-null-title">
{{background[dataFlag].msg}}
</view>
</view>
<view class="cu-tabbar-height"></view>
</scroll-view>
<view :class="['cu-modal',{'show':modalShow}]" v-if="modalShow">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">处罚</view>
<view class="action" @tap="modalShow = false">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="wui-form-list">
<view class="cu-form-group">
<view class="title">是否进行罚款:</view>
<radio-group @change="changeRadioGroup($event)">
<label class="radio"><radio value="1" :checked="punishForm.ISPUNISH === '1'" :disabled="TabCur == 2" />是</label>
<label class="radio"><radio value="2" :checked="punishForm.ISPUNISH === '2'" :disabled="TabCur == 2" />否</label>
</radio-group>
</view>
<view v-if="punishForm.ISPUNISH==1">
<view class="cu-form-group">
<view class="title">处罚原因</view>
<input v-model="punishForm.REASON" placeholder="请输入处罚原因"></input>
</view>
<view class="cu-form-group">
<view class="title">处罚金额</view>
<input v-model="punishForm.AMOUT" placeholder="请输入处罚金额"></input>
</view>
<view class="cu-form-group">
<view class="title">被处罚单位</view>
<input v-model="punishForm.RECTIFICATIONDEPT_NAME" placeholder="请输入被处罚单位"></input>
</view>
<view class="cu-form-group">
<view class="title">被处罚人</view>
<input v-model="punishForm.RECTIFICATIONOR_NAME" placeholder="请输入被处罚人"></input>
</view>
<view class="cu-form-group">
<view class="title">下发处罚时间</view>
<ruiDatePicker fields="minute" :value="punishForm.DATE || '请选择'" @change="changeStartDate">
</ruiDatePicker>
</view>
</view>
</view>
<view class="cu-bar bg-white justify-between">
<view class="action" style="flex-basis: 100%">
<button class="cu-btn" style="flex-basis: 50%" @click="modalShow = false">关闭</button>
<button class="cu-btn line-green text-green" style="flex-basis: 50%"
@click="fnSubmit"></button>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
basePath,
corpinfoId,
loginSession,
formatDate,
loginUser,
loginUserId
} from '@/common/tool.js';
import tkiTree from "@/components/select-tree/select-tree.vue"
import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue'
export default {
components: {
tkiTree,
ruiDatePicker,
},
data() {
return {
showRight: false,
dataFlag: 'noData',
sTop: 0,
totalHeight: 0,
list: [], //返回数据
page: 1, //分页参数--页数
rows: 10, //分页参数--每页数据条数
totalCount: 0, //分页参数--初始化页数
isEnd: false, //防止多次刷新
totalPage: 0, //分页参数--分页数量
NameLikes: '',
OUTSOURCED_ID: '',
PUNISH_THE_PERSON: '',
noClick: true,
sourceState: {
1: "AI报警",
2: "AI报警(企业端)",
4: "安全环保检查(监管端)",
5: "安全环保检查(企业端)",
},
state: {
1: "未整改",
2: "已整改",
4: "已验收",
},
TabCur: 0,
scrollLeft: 0,
tabNav: ['待验收隐患', '已验收隐患'],
modalShow: false,
punishForm: {
HIDDEN_ID: '',
ISPUNISH: '',
RECTIFICATIONDEPT_NAME: '',
RECTIFICATIONOR_NAME: '',
REASON: '',
AMOUT: '',
DATE: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
},
punishRules: {
'REASON': '请填写处罚原因',
'AMOUT': '请填写处罚金额',
'DATE': '请选择下发处罚时间',
},
loginUserId: loginUserId
}
},
onReady() {
let that = this;
let CustomBar = this.CustomBar;
uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
success(res) { //成功回调函数
let titleH = uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名class/id
titleH.boundingClientRect(data => {
that._data.sTop = data.height //计算高度:元素高度=窗口高度-元素距离顶部的距离data.top
that.totalHeight = data.height + CustomBar
}).exec()
}
})
},
onLoad(e) { //页面第一次加载时触发,从跳转页面返回时不能触发,可以传递参
this.OUTSOURCED_ID = e.OUTSOURCED_ID
this.PUNISH_THE_PERSON = e.PUNISH_THE_PERSON
},
onShow() {
//页面显示或从后台跳回小程序时显示此页面时触发,从跳转页面返回时触发,不能传递参数
var _this = this;
_this.background = require('@/common/background.json');
_this.showCount = 10;
_this.currentPage = 1;
_this.list = [];
_this.isEnd = false;
_this.getData();
loginSession();
},
methods: {
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
this.getQuery();
},
//跳转事件
goToDetail(e) {
uni.navigateTo({
url: '/pages/application/key-project-management/hidden-management/detail?HIDDEN_ID=' + e +
'&OUTSOURCED_ID=' + this.OUTSOURCED_ID + '&TabCur=' + (this.TabCur + 1)
});
},
getQuery() { //搜索按钮事件
var _this = this;
_this.showCount = 10;
_this.currentPage = 1;
_this.list = [];
_this.isEnd = false;
_this.getData();
},
// 滑动到底方法
scrolltolower() {
var _this = this;
_this.showCount = 10;
_this.currentPage = _this.currentPage + 1;
_this.isEnd = false;
if (_this.totalPage >= _this.currentPage) {
_this.getData(); //开始分页查询
}
},
getData() {
var _this = this;
if (_this.isEnd) {
return
} else {
this.isEnd = true;
}
uni.showLoading({
title: "加载中..."
}); //加载中动画
uni.request({
url: basePath + '/app/keyprojectcheck/listHidden?showCount=' + _this.showCount +
'&currentPage=' + _this.currentPage,
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
KEYWORDS: _this.NameLikes, //关键字模糊查询
CORPINFO_ID: corpinfoId,
OUTSOURCED_ID: this.OUTSOURCED_ID,
CREATOR: loginUserId,
ISCHECK: Number(this.TabCur) + 1
},
success: (res) => {
uni.hideLoading(); //结束加载中动画
if (res.data != null) {
_this.totalPage = res.data.page.totalPage;
if (_this.list.length == 0) {
_this.list = res.data.varList;
} else {
if (res.data.varList != null) {
_this.list2 = res.data.varList;
_this.list = _this.list.concat(_this.list2);
}
}
}
}
})
},
fnModalShow(item) {
this.punishForm.HIDDEN_ID = item.HIDDEN_ID
this.punishForm.RECTIFICATIONDEPT_NAME = item.RECTIFICATIONDEPT_NAME
this.punishForm.RECTIFICATIONOR_NAME = item.RECTIFICATIONOR_NAME
this.modalShow = true
},
changeStartDate(e) {
this.punishForm.DATE = e
this.$forceUpdate(); //强制刷新
},
fnSubmit() {
var _this = this
console.log(this.punishForm)
//如果处罚,添加罚单
if (this.punishForm.ISPUNISH === "1") {
for (const key in this.punishRules) {
if (!this.punishForm[key]) {
uni.showToast({
title: this.punishRules[key],
icon: 'none'
})
return
}
}
uni.request({
url: basePath + '/app/keyprojectpunish/add',
method: 'POST',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
...this.punishForm,
CORPINFO_ID: corpinfoId,
CREATOR: loginUserId,
OPERATOR: loginUserId,
},
success: (res) => {
if ("success" == res.data.result) {
_this.editHiddenIspunish(1)
} else {
uni.showToast({
title: res.data.msaesge,
duration: 2000
});
}
}
});
}else {
_this.editHiddenIspunish(2)
}
},
editHiddenIspunish(Ispunish){
// 如果不处罚 修改隐患
uni.request({
url: basePath + '/app/keyprojectcheck/editHiddenIspunish',
method: 'POST',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
...this.punishForm,
ISPUNISH:Ispunish
},
success: (res) => {
this.modalShow = false
this.getQuery()
}
});
},
changeRadioGroup(e){
if(this.TabCur == 2) return
this.punishForm.ISPUNISH = e.detail.value
},
}
}
</script>
<style>
.dy-card {
background-color: #fff;
border-radius: 10upx;
margin: 30upx
}
.dy-card-title {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eee;
min-height: 80upx;
line-height: 80upx;
padding: 0 30upx;
}
.dy-card-content {
padding: 0upx 30upx 30upx;
}
.dy-card-content-item {
margin-top: 20upx;
}
.dy-card-content-item .title {
display: flex;
align-items: center;
}
.dy-card-content-item .title .l {
width: 10upx;
height: 30upx;
border-radius: 20upx;
background-color: #666;
margin-right: 10upx;
}
.dy-card-content-item .content {
background-color: #F1F1F1;
padding: 10upx 14upx;
margin-top: 14upx;
line-height: 1.6;
}
.dy-card-content-item .name text {
background-color: #F1F1F1;
padding: 10upx 14upx;
margin-top: 14upx;
line-height: 1.6;
display: inline-block;
}
.dy-card-foot {
border-top: 1px solid #eee;
padding: 30upx;
}
.cu-modal {
z-index: 0;
}
</style>