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

868 lines
23 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">可接受风险:{{ kjsAmount }}</text>
<text v-if="gfxAmount > 0">高风险:{{ gfxAmount }}</text>
<text v-if="zfxAmount > 0">中风险:{{ zfxAmount }}</text>
<text v-if="dfxAmount > 0">低风险:{{ dfxAmount }}</text>
<text v-if="tfxAmount > 0">特高风险:{{ 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 monthPlanTitle === '基建月计划' ? infrastructureFormLabel : productionFormLabel"
:key="i"
:label="f.form_label"
:name="f.name"
required
>
<uni-easyinput
v-if="f.items_type === 'ipt'"
:clear="false"
type="text"
v-model="item[f.name]"
: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[0]" mode="'scaleToFill'"></image>
</view>
<view>
<text class="text_1">{{ item.process }}</text>
<text class="text_2">
<text>{{ item.userName }}</text>
<text v-if="index !== 0" style="margin-left: 100rpx">{{ item.auditingResult }}</text>
</text>
</view>
<view>{{ item.time }}</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="item.isShow.includes(state) && item.isRoles.includes(roles)"
>
<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 {
submitPlanApi,
deletePlanApi,
revokePlanApi,
getPlanDetailApi,
getRiskLevelListApi,
getControlLevelListApi,
updateInfPlanContentApi,
getAUditingProcessApi,
getAUditingUserInfoApi,
setMonthPlanApi
} from '../../../api/workPlan/monthPlan'
export default {
data() {
return {
monthDetailsList: [],
monthPlanTitle: '基建月计划',
editDisabled: false,
state: '',
month: '',
proId: '',
activeFormPages: 0,
params: {
id: ''
},
btnList: [
{ title: '修改', id: 1, type: 'compose', isShow: ['1', '3', '2'], isRoles: ['22', '23'] },
{ title: '删除', id: 2, type: 'trash', isShow: ['1', '3', '2'], isRoles: ['22', '23'] },
{
title: '撤回',
id: 3,
type: 'redo-filled',
isShow: ['1', '2', '4', '5', '6', '7', '8', '9'],
isRoles: ['22', '23']
},
{ title: '提交', id: 4, type: 'upload', isShow: ['1', '2', '3'], isRoles: ['22', '23'] }
],
infrastructureFormLabel: [
{ form_label: '作业内容', items_type: 'ipt', name: 'zynr' },
{ form_label: '作业条件(人员、机具、图纸、物资等、气候条件对作业的影响)', items_type: 'ipt', name: 'zytj' },
{ form_label: '风险类别', items_type: 'ipt', name: 'fxlb' },
{ form_label: '管控措施', items_type: 'ipt', name: 'gkcs' },
{
form_label: '风险等级',
items_type: 'sel',
name: 'fxdj',
options: []
},
{
form_label: '管控级别',
items_type: 'sel',
name: 'gkcj',
options: []
},
{
form_label: '是否有危大/易造成人员较大伤亡作业',
items_type: 'sel',
name: 'wdgc',
options: [
{ value: '1', text: '是' },
{ value: '0', text: '否' }
]
},
{
form_label: '方案是否报审',
items_type: 'sel',
name: 'fasp',
options: [
{ value: '1', text: '是' },
{ value: '0', text: '否' }
]
},
{
form_label: '是否有涉网作业',
items_type: 'sel',
name: 'swzy',
options: [
{ value: '1', text: '是' },
{ value: '0', text: '否' }
]
},
{
form_label: '线路/设备停电计划是否上报',
items_type: 'sel',
name: 'sbtd',
options: [
{ value: '1', text: '是' },
{ value: '0', text: '否' }
]
},
{ form_label: '项目负责人/联系电话', items_type: 'ipt', name: 'xmfzr' },
{ form_label: '单位负责人/联系电话', items_type: 'ipt', name: 'dwfzr' },
{ form_label: '计划数量', items_type: 'ipt', name: 'planCount' }
],
productionFormLabel: [
{ form_label: '作业内容', items_type: 'ipt' },
{ form_label: '实施单位', items_type: 'ipt' },
{ form_label: '实施部门', items_type: 'ipt' },
{ form_label: '任务来源', items_type: 'ipt' },
{
form_label: '作业类型',
items_type: 'sel',
options: [
{ value: 0, text: '检修' },
{ value: 1, text: '维护' }
]
},
{ form_label: '计划开始时间', items_type: 'sel' },
{ form_label: '计划结束时间', items_type: 'sel' },
{
form_label: '是否停电',
items_type: 'sel',
options: [
{ value: 1, text: '是' },
{ value: 0, text: '否' }
]
},
{ form_label: '停电设备(作业场所)', items_type: 'ipt' },
{ form_label: '作业监督人/联系电话', items_type: 'ipt' },
{ form_label: '作业负责人/联系电话', items_type: 'ipt' },
{
form_label: '管控级别',
items_type: 'sel',
options: []
},
{
form_label: '风险等级',
items_type: 'sel',
options: [
{ value: 0, text: '可接受风险' },
{ value: 1, text: '低风险' },
{ value: 2, text: '中风险' },
{ value: 2, text: '高风险' },
{ value: 2, text: '特高风险' }
]
},
{
form_label: '管控方式(根据作业内容在作业文件栏中选择"是"、"否"',
items_type: 'sel',
options: [
{ value: 0, text: '过程管控' },
{ value: 1, text: '巡视管控' },
{ value: 2, text: '驻点管控' },
{ value: 2, text: '节点管控' }
]
},
{
form_label: '施工方案',
items_type: 'sel',
options: [
{ value: 1, text: '是' },
{ value: 0, text: '否' }
]
},
{
form_label: '作业指导书',
items_type: 'sel',
options: [
{ value: 0, text: '是' },
{ value: 1, text: '否' }
]
},
{
form_label: '作业表单',
items_type: 'sel',
options: [
{ value: 0, text: '是' },
{ value: 1, text: '否' }
]
},
{
form_label: '工作票',
items_type: 'sel',
options: [
{ value: 0, text: '是' },
{ value: 1, text: '否' }
]
},
{ form_label: '备注', items_type: 'ipt' },
{ form_label: '计划数量', items_type: 'ipt' }
],
kjsAmount: 0,
dfxAmount: 0,
zfxAmount: 0,
gfxAmount: 0,
tfxAmount: 0,
navHeight: 0,
roles: uni.getStorageSync('wkRole'),
processList: [
{
title: '项目部',
process: '发起申请',
userName: '',
time: '',
auditingResult: '',
imgSrcList: ['../../../static/images/workPlan/xmb_dd.png', '../../../static/images/workPlan/xmb_dsh.png']
},
{
title: '项目部',
process: '审核人',
userName: '',
time: '2',
auditingResult: '',
imgSrcList: ['../../../static/images/workPlan/xmb_dd.png', '../../../static/images/workPlan/xmb_dsh.png']
},
{
title: '项目部',
process: '审核人',
userName: '',
time: '',
auditingResult: '未通过',
imgSrcList: ['../../../static/images/workPlan/xmb_dd.png', '../../../static/images/workPlan/xmb_dsh.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 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 getPlanDetailApi(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
})
}
},
showModalFun(type) {
let tipTitle = ''
let API = null
switch (type) {
case 1:
tipTitle = '修改'
API = updateInfPlanContentApi
break
case 2:
tipTitle = '删除'
API = deletePlanApi
break
case 3:
tipTitle = '撤销'
API = revokePlanApi
break
case 4:
tipTitle = '提交'
API = submitPlanApi
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 getAUditingProcessApi(params)
const auditingList = res.obj.splice(1, 3)
console.log('res---审核流程图', auditingList)
// this.processList[0].userName = auditingList[0].upUser
auditingList.forEach((e, index) => {
this.processList[index].userName = e.upUser
this.processList[index].time = e.upTime
this.processList[index].auditingResult = e.state
})
console.log('this.this.processList', this.processList)
}
},
/* 复选框事件 */
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 setMonthPlanApi(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' })
}
}
},
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 view:nth-child(2) {
flex: 1;
padding-left: 26rpx;
display: flex;
flex-direction: column;
.text_1 {
font-size: 28rpx;
color: #7e7e7e;
}
.text_2 {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 16rpx;
font-size: 24rpx;
color: #000;
}
}
.process-item view:last-child {
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;
}
}
}
</style>