qa-prevention-gwj-first-app/pages/application/high-risk-work/electricity/archive-management/list.vue

589 lines
19 KiB
Vue
Raw Permalink 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">
<block slot="backText">返回</block>
<block slot="content">归档管理</block>
</cu-custom>
<view class="select-fixed top-fixed">
<view class="cu-bar search bg-white">
<picker @change="statusChange" :value="sindex" :range="statusList" range-key="name">
<view class="saixuan">
<text>筛选</text>
<text class="cuIcon-triangledownfill"></text>
</view>
</picker>
<view class="search-form radius" style="margin-left: 0;">
<text class="cuIcon-search"></text>
<input @input="InputBlur" placeholder="请输入关键字(作业编号、用电原因)" confirm-type="search"></input>
</view>
<view class="action">
<button class="cu-btn bg-green shadow-blur radius" @click="getQuery"></button>
</view>
</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">
<view v-for="(item,index) of list" :key="index" :data-id="item.ELECTRICITY_ID" @click="$noMultipleClicks(goToDetail,item.ELECTRICITY_ID)" class="dy-list-item p20">
<view class="dy-title-flex align-center">
<text>编号:{{item.CHECK_NO}}</text>
<text>用电单位:{{item.ELECTRICITY_UNIT}}</text>
</view>
<view class="dy-subtitle-flex">
<text>用电原因:{{item.WORK_CONTENT}}</text>
</view>
<view class="dy-subtitle-flex">
<text>作业单位人员:{{item.WORK_USER_NAME}}</text>
</view>
<view class="dy-subtitle-flex">
<text>运行保障部确认人:{{item.ASSURE_USER_NAME}}</text>
</view>
<view class="dy-subtitle-flex">
<text>审批人:{{item.APPROVE_USER_NAME}}</text>
</view>
<view class="dy-subtitle-flex">
<text>作业时间:{{item.WORK_START_DATE}} 至 {{item.WORK_END_DATE}}</text>
</view>
<view class="dy-subtitle-flex" style="height: 34upx;">
<text>
审核状态:{{translate(item.APPLY_STATUS)}}
</text>
<text style="position: absolute;right:20upx;bottom:-8upx">
<button class="cu-btn margin-tb-sm sm" @click="$noMultipleClicks(goToDetail,item.ELECTRICITY_ID)">
查看
</button>
<button v-if="(item.CHECK_STATUS === '0' || item.CHECK_STATUS ==='3') && item.ASSURE_USER_ID === loginUser.USER_ID" class="cu-btn bg-blue margin-tb-sm sm" style="margin-left: 20upx" @click.stop="acceptanceApplication(item.ELECTRICITY_ID)">
验收申请
</button>
<button v-if="item.CHECK_STATUS === '1'" style="margin-left: 20upx" class="cu-btn bg-blue margin-tb-sm sm" @click.stop="acceptanceInformationdetail(item.ELECTRICITY_ID,item)">
验收信息
</button>
</text>
</view>
<view v-if="item.APPLY_STATUS === '3' || item.APPLY_STATUS === '4'" class="dy-subtitle-flex">
<text>
验收状态:{{ !validStr(item.CHECK_STATUS) ? '待申请' : item.CHECK_STATUS === '1' ? '已验收' : item.CHECK_STATUS === '2' ? '待验收' : '验收被打回' }}
</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':acceptanceApplicationModal}]">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">验收申请</view>
<view class="action" @tap="acceptanceApplicationModal = false">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view>
<view class="wrapper">
<view class="handCenter">
<view class="form">
<view class="wui-form-list">
<view class="cu-form-group">
<view class="title">验收部门:</view>
<view class="picker-tree-box">
<view class="picker-tree" @tap="showZgTree('tkiTree')">
{{ acceptanceApplicationForm.ACCEPT_DEPARTMENT_NAME || '请选择' }}
</view>
</view>
<tki-tree ref="tkiTree" v-if="tkiTreeShow" :selectParent=true :range="treeNode" rangeKey="name" @confirm="zgtreeConfirm($event,'acceptorList')"
@cancel="zgtreeCancel"></tki-tree>
</view>
<view class="cu-form-group" v-if="acceptanceApplicationForm.ACCEPT_DEPARTMENT_NAME">
<view class="title">验收人:</view>
<picker @change="acceptorChange" :value="acceptanceApplicationForm.ACCEPT_USER_INDEX"
:range="acceptorList" range-key="NAME">
<view class="picker">
{{ acceptanceApplicationForm.ACCEPT_USER_NAME || '请选择' }}
</view>
</picker>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-bar bg-white justify-end">
<view class="action">
<button class="cu-btn bg-blue margin-left" @click="acceptanceApplicationModal = false">取消</button>
<button class="cu-btn bg-green margin-left" @click="$noMultipleClicks(confirmAcceptanceApplicationForm)">提交</button>
</view>
</view>
</view>
</view>
<view :class="['cu-modal',{'show':acceptanceInformationModal}]">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">验收信息</view>
<view class="action" @tap="acceptanceInformationModal = false">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view>
<view class="wrapper">
<view class="handCenter">
<view class="form">
<view class="wui-form-list">
<view class="cu-form-group">
<view class="title">验收部门:</view>
{{ acceptanceInformationForm.ACCEPT_DEPARTMENT_NAME }}
</view>
<view class="cu-form-group">
<view class="title">验收人:</view>
{{ acceptanceInformationForm.ACCEPT_USER_NAME }}
</view>
<view class="cu-form-group">
<view class="title">验收结果:</view>
{{ acceptanceInformationForm.ACCEPT_RESULT_NAME }}
</view>
<view class="cu-form-group">
<view class="title">验收时间:</view>
{{ acceptanceInformationForm.ACCEPT_TIME }}
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-bar bg-white justify-end">
<view class="action">
<button class="cu-btn bg-green margin-left" @click="acceptanceInformationModal = false"></button>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
basePath,corpinfoId,loginSession,loginUser,loginUserId,formatDate
} from '@/common/tool.js';
import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue';
import tkiTree from "@/components/select-tree/select-tree.vue"
export default {
components: {
ruiDatePicker,tkiTree,
},
data() {
return {
loginUser,
showRight: false,
dataFlag:'noData',
sTop:0,
totalHeight:0,
list:[],//返回数据
page:1,//分页参数--页数
rows:10,//分页参数--每页数据条数
totalCount:0,//分页参数--初始化页数
isEnd:false,//防止多次刷新
totalPage:0,//分页参数--分页数量
NameLikes : '',
noClick:true,
statusList:[
{ id: '', name: '请选择' },
{ id: '0', name: '待申请' },
{ id: '2', name: '待验收' },
{ id: '1', name: '已验收' },
{ id: '3', name: '验收打回' }
],
sindex:-1,
STATUS:'',
tkiTreeShow: false,
acceptorList: [],
treeNode: [],
todayDate: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
id:'',
acceptanceApplicationModal:false,
acceptanceInformationModal:false,
acceptanceInformationForm: {
ACCEPT_DEPARTMENT_NAME: '',
ACCEPT_USER_NAME: '',
ACCEPTANCE_RESULTS: '',
ACCEPTANCE_TIME: '',
REMARK: '',
},
acceptanceApplicationForm:{
ACCEPTOR_NAME: '',
ACCEPTOR_ID: '',
ACCEPT_TIME: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
ACCEPT_DEPARTMENT_NAME: '',
ACCEPT_DEPARTMENT_ID: '',
ACCEPT_USER_NAME: '',
ACCEPT_USER_ID: '',
ACCEPT_USER_INDEX: '',
},
modalTitle: '',
}
},
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){
console.log(e)
if (this.validStr(e.NameLikes)) {
this.NameLikes = e.NameLikes;
}
},
onShow() {
//页面显示或从后台跳回小程序时显示此页面时触发,从跳转页面返回时触发,不能传递参数
var _this = this;
_this.background = require('@/common/background.json');
_this.showCount = -1;
_this.currentPage = 1;
_this.list = [];
_this.isEnd = false;
_this.getData();
// _this.getDept();
loginSession();
_this.getDept();
},
methods: {
//跳转事件
goToDetail(e) {
uni.navigateTo({
url: '/pages/application/high-risk-work/electricity/archive-management/detail?ELECTRICITY_ID='+e
});
},
getQuery(){ //搜索按钮事件
var _this = this;
_this.showCount = -1;
_this.currentPage = 1;
_this.list = [];
_this.isEnd = false;
_this.getData();
},
statusChange(e){
this.sindex = e.detail.value;
this.STATUS=this.statusList[this.sindex].id;
this.getQuery();
},
InputBlur(e){
this.NameLikes = e.detail.value
console.log(this.NameLikes)
},
// 滑动到底方法
scrolltolower(){
var _this = this;
_this.showCount = -1;
_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/electricity/list?showCount='+_this.showCount+'&currentPage='+_this.currentPage ,
method: 'POST',
dataType: 'json',
header: {
'Content-type':'application/x-www-form-urlencoded'
},
data: {
CORPINFO_ID:corpinfoId,
// ASSURE_USER_ID:loginUserId,
DEPARTMENT_ID:loginUser.DEPARTMENT_ID,
WORK_USER: corpinfoId === loginUser.DEPARTMENT_ID ? '' : loginUserId,
APPLY_STATUS:'5',
CHECK_STATUS: this.STATUS,
tm:new Date().getTime(),
KEYWORDS : this.NameLikes, //关键字模糊查询
},
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);
}
}
}
}
})
},
getDept() {
var _this = this;
uni.request({
url: basePath + '/app/sys/listTree', //部门下拉接口
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
CORPINFO_ID: corpinfoId,
},
success: (res) => {
if ("success" == res.data.result) {
_this.treeNode = eval(res.data.zTreeNodes);
} else {
uni.showToast({
title: res.data.message,
duration: 2000
});
}
}
});
},
acceptanceInformationdetail(id){
uni.showLoading({
title: "加载中..."
});
uni.request({
url: basePath + "/app/electricity/goEdit",
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
ELECTRICITY_ID: id,
},
success: (res) => {
uni.hideLoading();
this.acceptanceInformationForm = res.data.pd
this.acceptanceInformationModal = true;
},
fail: (err) => {
uni.hideLoading();
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
})
},
showZgTree(ref) {
this.tkiTreeShow = true;
this.$nextTick(()=>{
this.$refs[ref]._show();
})
},
zgtreeConfirm(e, list) {
if (list === "acceptorList") {
this.$set(this.acceptanceApplicationForm,'ACCEPT_DEPARTMENT_ID',e[0].id)
this.$set(this.acceptanceApplicationForm,'ACCEPT_DEPARTMENT_NAME',e[0].name)
this.$set(this.acceptanceApplicationForm,'ACCEPT_USER_INDEX','')
this.$set(this.acceptanceApplicationForm,'ACCEPT_USER_ID','')
this.$set(this.acceptanceApplicationForm,'ACCEPT_USER_NAME','')
}
this.tkiTreeShow = false;
this.getUserList(list, e[0].id);
},
acceptorChange(e) {
this.acceptanceApplicationForm.ACCEPT_USER_INDEX = e.detail.value;
this.acceptanceApplicationForm.ACCEPT_USER_ID = this.acceptorList[e.detail.value].USER_ID;
this.acceptanceApplicationForm.ACCEPT_USER_NAME = this.acceptorList[e.detail.value].NAME;
},
zgtreeCancel(e) {
this.isUps = false;
this.tkiTreeShow = false;
},
getUserList(list, DEPARTMENT_ID) {
//发送 post 请求
var _this = this;
uni.request({
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
url: basePath + '/app/sys/listUser',
data: {
DEPARTMENT_ID, NOMAIN:'1',
tm: new Date().getTime()
},
success: function (res) {
if ("success" == res.data.result) {
_this[list] = res.data.userList;
} else {
uni.showToast({
title: res.data.message,
duration: 2000
});
}
}
})
},
acceptanceApplication(id){
this.acceptanceApplicationModal = true;
this.id = id;
this.modalTitle = '验收申请';
this.acceptanceApplicationForm = {
ACCEPTOR_ID: loginUser.USER_ID,
ACCEPTOR_NAME: loginUser.NAME,
ACCEPT_TIME: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
}
},
acceptanceInformation(id,item){
this.acceptanceApplicationModal = true;
this.id = id;
this.modalTitle = '验收详情';
this.acceptanceApplicationForm = {
ACCEPTOR_ID: loginUser.USER_ID,
ACCEPTOR_NAME: loginUser.NAME,
ACCEPT_TIME: item.ACCEPT_TIME,
}
},
changeAcceptanceTime(e) {
this.acceptanceApplicationForm.ACCEPT_TIME = e
},
confirmAcceptanceApplicationForm(){
if(!this.acceptanceApplicationForm.ACCEPT_TIME){
uni.showToast({
title: '请选择验收时间',
icon: 'none',
duration: 2000
})
return;
}
uni.showLoading({
title: "加载中..."
});
uni.request({
url: basePath + "/app/electricity/editStatus",
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
...this.acceptanceApplicationForm,
ELECTRICITY_ID: this.id,
APPLY_STATUS : '4',
CHECK_STATUS : '2', /*验收已提交*/
OPERATOR:loginUser.USER_ID,
ACTION_USER:loginUser.NAME
},
success: (res) => {
uni.hideLoading();
this.acceptanceApplicationModal = false
uni.showToast({
icon: 'none',
title: '验收成功',
duration: 2000
});
this.getQuery();
},
fail: (err) => {
uni.hideLoading();
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
})
},
translate(id) {
if (id === '3' || id === '4') {
return '已归档'
}
for (var i = 0; i < this.statusList.length; i++) {
if (this.statusList[i].id == id) return this.statusList[i].name
}
return ''
}
}
}
</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>