YNUtdPlatform/pages/workPlan/dayPlanDetails/pro-index.vue

900 lines
25 KiB
Vue

<template>
<!-- 基建月计划详情 -->
<view style="padding: 15rpx">
<u-navbar
class="u-navbar"
title="详情"
placeholder
@leftClick="leftClick"
leftIconColor="#fff"
bgColor="#00337A"
:titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
/>
<view>
<view class="item-header">
<!-- <text>{{ month }}</text> -->
<text v-if="kjsAmount > 0" style="color: #06bd36">可接受风险:{{ kjsAmount }}</text>
<text v-if="dfxAmount > 0" style="color: #06bd36">低风险:{{ dfxAmount }}</text>
<text v-if="zfxAmount > 0" style="color: #f28b00">中风险:{{ zfxAmount }}</text>
<text v-if="gfxAmount > 0" style="color: #ff4e4b">高风险:{{ gfxAmount }}</text>
<text v-if="tfxAmount > 0" style="color: #ff4e4b">特高风险:{{ tfxAmount }}</text>
</view>
<view>
<scroll-view scroll-x class="header-left">
<text
:class="{ 'active-form-page': activeFormPages === index }"
v-for="(item, index) in monthDetailsList"
:key="index"
@tap="onChangeFormPages(index)"
>
{{ index + 1 }}
</text>
</scroll-view>
</view>
<swiper
circular
:autoplay="false"
:current="activeFormPages"
class="scroll-content"
:style="{ height: navHeight + 'px' }"
@change="onSwiperChangeForms"
>
<swiper-item v-for="(item, index) in monthDetailsList" :key="index" :style="{ height: navHeight + 'px' }">
<scroll-view scroll-y="true" class="scroll-Y" :style="{ height: navHeight + 'px' }">
<uni-forms class="form-container" label-position="top" label-width="200">
<uni-forms-item
v-for="(f, i) in infrastructureFormLabel"
:key="i"
:label="f.form_label"
:name="f.name"
:required="f.required"
>
<u--textarea
v-if="f.items_type === 'area'"
v-model="item[f.name]"
placeholder="请填写"
autoHeight
:disabled="editDisabled"
></u--textarea>
<u--input
v-if="f.items_type === 'ipt'"
:type="f.isType ? f.isType : 'text'"
v-model="item[f.name]"
placeholder="请填写"
:disabled="editDisabled"
/>
<uni-data-select
v-model="item[f.name]"
:localdata="f.options"
:disabled="editDisabled"
:clear="false"
v-if="f.items_type === 'sel'"
></uni-data-select>
</uni-forms-item>
</uni-forms>
<view class="process-container" v-if="roles != '22'">
<h1>流程</h1>
<view v-for="(item, index) in processList" :key="index">
<view class="process-item">
<view>
<!-- 项目部
<text class="type-icon">x</text> -->
<image :src="item.imgSrcList[item.imgSrcIndex]" mode="'scaleToFill'"></image>
</view>
<view class="box-2">
<text class="text_1">{{ item.process }}</text>
<view class="text_2" v-for="(j, k) in item.auditingInfo" :key="k">
<text>{{ j.operateUser }}</text>
<text v-if="index !== 0">{{ j.operateResult }}</text>
<text v-if="index !== 0">{{ j.operateTime }}</text>
</view>
</view>
<view v-if="index == 0" class="box-3">{{ item.auditingInfo[0].operateTime || '' }}</view>
</view>
<view class="line" v-if="index !== 2">
<view class="line-content">
<view></view>
</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
<view class="revoke">
<view @tap="showModalFun(item.id)" v-for="item in btnList" :key="item.id" v-show="isSHowBtn(item)">
<uni-icons :type="item.type" size="20" style="color: #00337a"></uni-icons>
<text style="margin-top: 8rpx">{{ item.title }}</text>
</view>
</view>
<!-- 审核人弹框 -->
<uni-popup ref="popupAuditing" background-color="#fff">
<view class="auditing-content">
<view class="auditing-title">
<view class="title">
<text style="margin-left: 15rpx">请选择计划审核人</text>
</view>
<view class="search">
<view class="search-ipt">
<uni-easyinput :clear="false" type="text" placeholder="请输入关键字" v-model="searchUserName" />
</view>
<view class="search-btn" @tap="onSearchUserInfo">搜索</view>
</view>
</view>
<view class="user-info">
<view class="user-title">
<view style="width: 8%"></view>
<view style="width: 12%">序号</view>
<view style="width: 30%">姓名</view>
<view style="width: 50%">岗位</view>
</view>
<scroll-view :scroll-y="true" style="height: 33vh">
<view class="user-content" v-for="(item, index) in auditingUserList" :key="item.id">
<view style="width: 8%">
<label>
<checkbox
:checked="item.isChecked"
color="#fff"
borderColor="#ccc"
backgroundColor="#fff"
activeBorderColor="#003778"
activeBackgroundColor="#003778"
style="transform: scale(0.7)"
@tap="onCheckBoxChange(item)"
/>
</label>
</view>
<view style="width: 12%">{{ index + 1 }}</view>
<view style="width: 30%">{{ item.name }}</view>
<view style="width: 50%">{{ item.orgName }}</view>
</view>
</scroll-view>
</view>
<view class="user-btn">
<view class="btn-cancel" @tap="onHandlerCancel">取消</view>
<view class="btn-submit" @tap="onHandlerSubmit">确定</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import {
submitPlanProApi,
deletePlanProApi,
revokePlanProApi,
getPlanDetailProApi,
getRiskLevelListApi,
getControlLevelListApi,
updateInfPlanContentProApi,
getAUditingProcessProApi,
getAUditingUserInfoApi,
getWorkTypeProApi,
setMonthPlanApi
} from '../../../api/workPlan/dayPlan'
export default {
data() {
return {
monthDetailsList: [],
monthPlanTitle: '基建月计划',
editDisabled: false,
state: '',
month: '',
proId: '',
activeFormPages: 0,
params: {
id: ''
},
btnList: [
{
title: '修改',
id: 1,
type: 'compose',
isShow: ['1', '3'],
isShow_2: ['5', '2', '8', '3'],
isRoles: ['22', '23']
},
{
title: '删除',
id: 2,
type: 'trash',
isShow: ['1', '3'],
isShow_2: ['5', '2', '8', '3'],
isRoles: ['22', '23']
},
{
title: '撤回',
id: 3,
type: 'redo-filled',
isShow: ['2'],
isShow_2: ['5', '4', '8'],
isRoles: ['22', '23']
},
{
title: '提交',
id: 4,
type: 'upload',
isShow: ['1', '3'],
isShow_2: ['5', '2', '8', '3'],
isRoles: ['22', '23']
}
],
infrastructureFormLabel: [
{ form_label: '作业内容', items_type: 'area', required: true, name: 'zynr' },
{
form_label: '风险等级',
items_type: 'sel',
name: 'fxdj',
required: true,
options: []
},
{ form_label: '作业类型', items_type: 'area', required: true, name: 'zylx' },
{ form_label: '现场负责人', items_type: 'area', required: true, name: 'xcfzr' },
{ form_label: '现场负责人电话', items_type: 'ipt', required: true, name: 'fzrdh' },
{ form_label: '全体人数', items_type: 'ipt', required: true, name: 'qtrs', isType: 'number' },
{ form_label: '公司职工人数', items_type: 'ipt', required: true, name: 'zgs', isType: 'number' },
{ form_label: '分包人员人数', items_type: 'ipt', required: true, name: 'fbrys', isType: 'number' },
{ form_label: '交通用车', items_type: 'ipt', required: true, name: 'jtcls' },
{ form_label: '特种作业车辆', items_type: 'ipt', required: true, name: 'tscls' },
{ form_label: '投入监控设备数(台)', items_type: 'ipt', required: true, name: 'jks', isType: 'number' },
{ form_label: 'SIP编号', items_type: 'ipt', required: true, name: 'sipnum' },
{ form_label: '责任管控人', items_type: 'ipt', required: true, name: 'sipfzr' },
{ form_label: '风险类别', items_type: 'ipt', required: true, name: 'fxlb' },
{
form_label: '风险管控层级',
items_type: 'sel',
name: 'gkcj',
required: true,
options: []
},
{ form_label: '管控人/联系方式', items_type: 'area', required: true, name: 'gkr' },
{ form_label: '安全管控人', items_type: 'area', required: true, name: 'aqr' }
],
kjsAmount: 0,
dfxAmount: 0,
zfxAmount: 0,
gfxAmount: 0,
tfxAmount: 0,
navHeight: 0,
roles: uni.getStorageSync('wkRole'),
processList: [
{
process: '发起申请',
userName: '',
time: '',
auditingResult: '',
imgSrcIndex: 0,
auditingInfo: [{ operateTime: '', operateUser: '', operateResult: '' }],
imgSrcList: ['../../../static/images/workPlan/xmb_dd.png', ' ', '../../../static/images/workPlan/xmb_tg.png']
},
{
process: '审核人',
userName: '',
time: '2',
auditingResult: '',
imgSrcIndex: 0,
auditingInfo: [],
imgSrcList: [
'../../../static/images/workPlan/fgs_dsh.png',
'../../../static/images/workPlan/fgs_wtg.png',
'../../../static/images/workPlan/fgs_tg.png',
'../../../static/images/workPlan/fgs_dd.png'
]
},
{
process: '审核人',
userName: '',
time: '',
imgSrcIndex: 0,
auditingResult: '未通过',
auditingInfo: [],
imgSrcList: [
'../../../static/images/workPlan/zgs_dsh.png',
'../../../static/images/workPlan/zgs_wtg.png',
'../../../static/images/workPlan/zgs_tg.png',
'../../../static/images/workPlan/zgs_dd.png'
]
}
],
searchUserName: '',
auditingUserList: []
}
},
methods: {
leftClick() {
uni.navigateBack()
},
async getRiskLevelListData() {
const res = await getRiskLevelListApi()
try {
this.infrastructureFormLabel.forEach(e => {
if (e.form_label === '风险等级') {
e.options = res.map(e => {
return {
value: e.id,
text: e.name
}
})
throw new Error()
}
})
} catch (error) {}
},
/* 获取作业类型和管控方式 */
async getWorkTypeAndControlMode() {
const result_1 = await getWorkTypeProApi()
// const result_2 = await getControlModeProApi()
try {
this.productionFormLabel.forEach(e => {
if (e.form_label === '作业类型') {
e.options = result_1.map(e => {
return {
value: e.id,
text: e.name
}
})
}
})
} catch (error) {}
// console.log('result_1', result_1, 'result_2', result_2)
},
async getControlLevelListData() {
const res = await getControlLevelListApi()
// console.log('管控层级', res)
try {
this.infrastructureFormLabel.forEach(e => {
if (e.form_label === '风险管控层级') {
e.options = res.map(e => {
return {
value: e.id,
text: e.name
}
})
throw new Error()
}
})
} catch (error) {}
},
/* 获取详情 */
async getPlanDetailData() {
const res = await getPlanDetailProApi(this.params)
console.log('详情数据res', res)
this.monthDetailsList = res.obj
if (this.monthDetailsList.length > 0) {
this.kjsAmount = 0
this.dfxAmount = 0
this.zfxAmount = 0
this.gfxAmount = 0
this.tfxAmount = 0
// this.monthDetailsList.forEach(e => {
// this.kjsAmount = this.kjsAmount + e.kjsfx * 1
// this.dfxAmount = this.dfxAmount + e.dfx * 1
// this.zfxAmount = this.zfxAmount + e.zfx * 1
// this.gfxAmount = this.gfxAmount + e.gfx * 1
// this.tfxAmount = this.tfxAmount + e.tgfx * 1
// })
this.kjsAmount = this.monthDetailsList[0].kjsfx * 1
this.dfxAmount = this.monthDetailsList[0].dfx * 1
this.zfxAmount = this.monthDetailsList[0].zfx * 1
this.gfxAmount = this.monthDetailsList[0].gfx * 1
this.tfxAmount = this.monthDetailsList[0].tgfx * 1
}
},
showModalFun(type) {
let tipTitle = ''
let API = null
switch (type) {
case 1:
tipTitle = '修改'
API = updateInfPlanContentProApi
break
case 2:
tipTitle = '删除'
API = deletePlanProApi
break
case 3:
tipTitle = '撤销'
API = revokePlanProApi
break
case 4:
tipTitle = '提交'
API = submitPlanProApi
break
}
uni.showModal({
title: '提示',
content: `确定要${tipTitle}吗?`,
showCancel: true,
cancelText: '取消',
confirmText: '确定',
confirmColor: '#00337a',
cancelColor: '#00337a',
success: async res => {
if (res.confirm) {
const params = {
id: JSON.stringify(this.monthDetailsList)
}
if (type === 4 && this.roles != '22') {
this.getAUditingUserInfoData()
this.$refs.popupAuditing.open('center')
} else {
const result = await API(type === 1 ? params : this.params)
if (result.res == 1) {
uni.showToast({ title: `${tipTitle}成功!`, icon: 'none' })
setTimeout(() => {
uni.navigateBack({
delta: 1,
success() {
uni.$emit('update')
}
})
}, 500)
} else {
uni.showToast({ title: `${tipTitle}失败!`, icon: 'none' })
}
}
}
}
})
},
onChangeFormPages(index) {
this.activeFormPages = index
},
onSwiperChangeForms(e) {
this.activeFormPages = e.detail.current
},
/* 获取详细审核流程 */
async getAUditingProcessData() {
if (this.roles != '22') {
const params = {
id: this.proId
}
console.log('paramsparams参数', params)
const res = await getAUditingProcessProApi(params)
console.log('res审核流程', res)
res.obj.forEach(e => {
if (e.type == 2) {
this.processList[0].auditingInfo[0].operateTime = e.upTime ? e.upTime : null
this.processList[0].auditingInfo[0].operateUser = e.upUser
this.processList[0].auditingInfo[0].operateResult = e.state
}
if (e.type == 3) {
this.processList[1].auditingInfo.push({
operateTime: e.upTime,
operateUser: e.upUser,
operateResult: e.state
})
}
if (e.type == 4) {
this.processList[2].auditingInfo.push({
operateTime: e.upTime,
operateUser: e.upUser,
operateResult: e.state
})
}
})
this.processList.forEach((e, index) => {
console.log('e.auditingInfo', e.auditingInfo, 'e.auditingInfo')
if (index === 0) {
if (e.auditingInfo[e.auditingInfo.length - 1].operateTime) {
e.imgSrcIndex = 2
} else {
e.imgSrcIndex = 0
}
}
if (index === 1) {
if (e.auditingInfo[e.auditingInfo.length - 1].operateResult == '待审核') {
e.imgSrcIndex = 0
}
if (e.auditingInfo[e.auditingInfo.length - 1].operateResult == '未通过') {
e.imgSrcIndex = 1
}
if (e.auditingInfo[e.auditingInfo.length - 1].operateResult == '通过') {
e.imgSrcIndex = 2
}
if (e.auditingInfo[e.auditingInfo.length - 1].operateResult == null) {
e.imgSrcIndex = 3
}
}
if (index === 2) {
if (e.auditingInfo[e.auditingInfo.length - 1].operateResult == '待审核') {
e.imgSrcIndex = 0
}
if (e.auditingInfo[e.auditingInfo.length - 1].operateResult == '未通过') {
e.imgSrcIndex = 1
}
if (e.auditingInfo[e.auditingInfo.length - 1].operateResult == '通过') {
e.imgSrcIndex = 2
}
if (e.auditingInfo[e.auditingInfo.length - 1].operateResult == null) {
e.imgSrcIndex = 3
}
}
})
// this.processList.forEach(e => {
// if (e.auditingInfo.length > 1) {
// e.auditingInfo = e.auditingInfo.splice(-1, 1)
// }
// })
}
},
/* 复选框事件 */
onCheckBoxChange(item) {
console.log(item, '*****')
item.isChecked = !item.isChecked
},
/* 获取审核人接口 */
async getAUditingUserInfoData() {
const res = await getAUditingUserInfoApi({ name: this.searchUserName })
this.auditingUserList = res.map(e => {
this.$set(e, 'isChecked', false)
return e
})
console.log('this.auditingUserList已处理', this.auditingUserList)
},
/* 搜索审核人员 */
onSearchUserInfo() {
console.log(this.searchUserName, '99999999')
this.getAUditingUserInfoData()
},
/* 取消 */
onHandlerCancel() {
this.$refs.popupAuditing.close()
this.searchUserName = ''
},
/* 确定 */
async onHandlerSubmit() {
const ids = this.auditingUserList.map(e => {
if (e.isChecked) return e.id
})
let idsStr = ids.filter(e => e != null).join(',')
const params = {
id: this.proId,
user: idsStr
// state: '2'
}
console.log('saveParams保存参数', params)
const result = await submitPlanProApi(params)
console.log(result, 'results上报人提交结果')
if (result.res == 1) {
uni.showToast({ title: `提交成功!`, icon: 'none' })
setTimeout(() => {
uni.navigateBack({
delta: 1,
success() {
uni.$emit('update')
}
})
}, 500)
} else {
uni.showToast({ title: `提交失败!`, icon: 'none' })
}
},
isSHowBtn(item) {
// return true
let isShowBtn = false
if (this.roles == 22) {
isShowBtn = item.isShow.includes(this.state)
}
if (this.roles == 23) {
isShowBtn = item.isShow_2.includes(this.state)
}
return isShowBtn
}
},
onLoad(options) {
console.log('状态', options.state, options)
this.state = options.state
this.month = options.month
this.proId = options.id
console.log('options.state', options.state, options.month)
Promise.all([this.getRiskLevelListData(), this.getControlLevelListData(), this.getWorkTypeAndControlMode()]).then(
res => {
this.params.id = options.id
this.getPlanDetailData()
}
)
this.getAUditingProcessData()
},
onReady() {
let that = this
uni.getSystemInfo({
//调用uni-app接口获取屏幕高度
success(res) {
//成功回调函数
that._data.pH = res.windowHeight
let titleH = uni.createSelectorQuery().select('.scroll-content')
let bottom = uni.createSelectorQuery().select('.revoke')
bottom
.boundingClientRect(res => {
const bottomHeight = res.height
titleH
.boundingClientRect(data => {
let pH = that._data.pH
that._data.navHeight = pH - data.top - bottomHeight - 56
})
.exec()
})
.exec()
}
})
}
}
</script>
<style lang="scss" scoped>
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10rpx 0;
font-size: 22rpx;
border-bottom: 1px solid #ccc;
}
::v-deep .uni-input-input:disabled {
-webkit-text-fill-color: #333;
}
.revoke {
width: 100%;
padding: 12px 0;
position: fixed;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
view {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.header-left {
width: 100%;
display: flex;
justify-content: space-between;
white-space: nowrap;
text {
width: 16.66%;
padding: 12rpx 0;
text-align: center;
display: inline-block;
color: #ccc;
}
}
.active-form-page {
border-bottom: 1px solid #003778;
color: #003778 !important;
}
.process-container {
padding: 20rpx;
background-color: #fff;
border-top: 2px solid #ccc;
h1 {
margin-bottom: 20rpx;
font-size: 40rpx;
letter-spacing: 2px;
}
.process-item {
display: flex;
justify-content: space-between;
}
.process-item view:first-child {
position: relative;
width: 20%;
height: 80rpx;
color: #fff;
// background-color: #00337a;
border-radius: 12rpx;
image {
width: 100%;
height: 80rpx;
}
.type-icon {
// box-sizing: border-box;
position: absolute;
bottom: 0;
right: 0;
height: 35rpx;
width: 35rpx;
border-radius: 50%;
text-align: center;
line-height: 35rpx;
transform: translate(25%, 25%);
border: 3px solid #fff;
background-color: green;
}
}
.process-item .box-2 {
flex: 1;
padding-left: 26rpx;
display: flex;
flex-direction: column;
.text_1 {
font-size: 28rpx;
color: #7e7e7e;
}
.text_2 {
width: 100%;
display: flex;
// display: block;
justify-content: space-between;
align-items: center;
margin-top: 16rpx;
font-size: 24rpx;
color: #000;
}
}
.process-item .box-3 {
width: 30%;
font-size: 22rpx;
color: #333;
}
.line {
margin: 28rpx 0;
.line-content {
width: 20%;
view {
margin: 0 auto;
height: 60rpx;
width: 2px;
background-color: #00337a;
}
}
}
}
.auditing-content {
width: 95vw;
height: 60vh;
background-color: #eee;
.auditing-title {
width: 100%;
padding-bottom: 4rpx;
margin-bottom: 16rpx;
background-color: #fff;
.title {
width: 93%;
margin: 20rpx auto;
padding: 13rpx 0;
border: 1px solid #ccc;
font-size: 26rpx;
color: #333;
border-radius: 5rpx;
box-sizing: border-box;
}
.search {
width: 93%;
margin: 20rpx auto;
display: flex;
justify-content: space-between;
align-items: center;
.search-ipt {
width: 65%;
}
.search-btn {
width: 25%;
height: 60rpx;
text-align: center;
line-height: 60rpx;
color: #fff;
border-radius: 12rpx;
background-color: #003778;
}
}
}
.user-info {
width: 93%;
margin: 0 auto;
box-sizing: content-box;
background-color: #fff;
.user-title,
.user-content {
display: flex;
align-items: center;
margin-bottom: 8rpx;
view {
text-align: center;
}
}
.user-content {
padding: 15rpx 0;
border-bottom: 1px solid #ccc;
}
}
.user-btn {
width: 93%;
margin: 0 auto;
padding-top: 28rpx;
display: flex;
justify-content: space-around;
view {
width: 40%;
height: 82rpx;
text-align: center;
line-height: 82rpx;
border-radius: 12rpx;
}
.btn-cancel {
background-color: #ccc !important;
color: #000;
}
.btn-submit {
color: #fff;
background-color: #003778 !important;
}
}
}
::v-deep .uni-forms-item__label {
font-weight: bold;
color: #000;
font-size: 26rpx;
}
</style>