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

969 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 productionFormLabel"
:key="i"
:label="f.form_label"
:name="f.name"
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-datetime-picker
v-if="f.items_type === 'date'"
type="datetime"
:clear-icon="false"
v-model="item[f.name]"
/>
</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,
getAUditingUserInfoApi,
setMonthPlanProApi,
getAUditingProcessProApi
} from '../../../api/workPlan/monthPlan'
export default {
data() {
return {
monthDetailsList: [],
proId: '',
editDisabled: false,
state: '',
month: '',
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']
}
],
productionFormLabel: [
{ form_label: '作业内容', items_type: 'area', name: 'zynr', required: true },
{ form_label: '实施单位', items_type: 'area', name: 'ssdw', required: true },
{ form_label: '实施部门', items_type: 'area', name: 'ssbm', required: true },
{ form_label: '任务来源', items_type: 'area', name: 'rwly', required: true },
{
form_label: '作业类型',
items_type: 'sel',
name: 'zylx',
required: true,
options: []
},
{ form_label: '计划开始时间', items_type: 'date', name: 'kssj', required: true },
{ form_label: '计划结束时间', items_type: 'date', name: 'jssj', required: true },
{
form_label: '是否停电',
items_type: 'sel',
name: 'sftd',
required: true,
options: [
{ value: '1', text: '是' },
{ value: '0', text: '否' }
]
},
{ form_label: '停电设备(作业场所)', items_type: 'ipt', name: 'tdsb', required: true },
{ form_label: '作业监督人/联系电话', items_type: 'ipt', name: 'zyjdr', required: true },
{ form_label: '作业负责人/联系电话', items_type: 'ipt', name: 'zyfzr', required: true },
{
form_label: '管控级别',
items_type: 'sel',
name: 'gkcj',
required: true,
options: []
},
{
form_label: '风险等级',
items_type: 'sel',
name: 'fxdj',
required: true,
options: []
},
{
form_label: '管控方式(根据作业内容在作业文件栏中选择"是"、"否"',
items_type: 'sel',
name: 'gkfs',
required: true,
options: []
},
{
form_label: '施工方案',
items_type: 'sel',
name: 'sgfa',
required: true,
options: [
{ value: '1', text: '是' },
{ value: '0', text: '否' }
]
},
{
form_label: '作业指导书',
items_type: 'sel',
name: 'zyzds',
required: true,
options: [
{ value: '1', text: '是' },
{ value: '0', text: '否' }
]
},
{
form_label: '作业表单',
items_type: 'sel',
name: 'zybd',
required: true,
options: [
{ value: '1', text: '是' },
{ value: '0', text: '否' }
]
},
{
form_label: '工作票',
items_type: 'sel',
name: 'gzp',
required: true,
options: [
{ value: '1', text: '是' },
{ value: '0', text: '否' }
]
},
{ form_label: '备注', items_type: 'ipt', name: 'bz', required: false },
{ form_label: '计划数量', items_type: 'ipt', isType: 'number', name: 'planCount', required: true }
],
kjsAmount: 0,
dfxAmount: 0,
zfxAmount: 0,
gfxAmount: 0,
tfxAmount: 0,
navHeight: 0,
roles: uni.getStorageSync('wkRole'),
searchUserName: '',
auditingUserList: [{ operateTime: '', operateUser: '', operateResult: '' }],
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'
]
}
]
}
},
methods: {
leftClick() {
uni.navigateBack()
},
async getRiskLevelListData() {
const res = await getRiskLevelListApi()
try {
this.productionFormLabel.forEach(e => {
if (e.form_label === '风险等级') {
e.options = res.map(e => {
return {
value: e.id,
text: e.name
}
})
throw new Error()
}
})
} catch (error) {}
},
async getControlLevelListData() {
const res = await getControlLevelListApi()
// console.log('管控层级', res)
try {
this.productionFormLabel.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
},
/* 复选框事件 */
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: JSON.stringify(this.monthDetailsList),
// user: idsStr,
// state: '2'
// }
// console.log('saveParams保存参数', params)
// const result = await setMonthPlanProApi(params)
// 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' })
// }
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 setMonthPlanProApi(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' })
}
},
/* 获取详细审核流程 */
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[0].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)
// }
// })
}
},
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) {
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()]).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 - 48
})
.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>