<template>
|
<div class="home-container">
|
<!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">-->
|
<!-- <el-tab-pane label="申请中" name="1">-->
|
<div style="height: 100%">
|
<el-row class="homeCard">
|
<span>作业类型：</span>
|
<el-col :span="10">
|
<div class="grid-content topInfo">
|
<el-select v-model="searchWord">
|
<el-option
|
v-for="item in workType"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
<el-button type="primary" @click="searchRecord">查询</el-button>
|
<el-button plain @click="clearSearch">重置</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
<div class="homeCard">
|
<div class="main-card">
|
<el-row class="cardTop">
|
<el-col :span="24" class="mainCardBtn">
|
<!-- <el-button type="primary" size="default" @click="toApply()">申请</el-button>-->
|
<!-- <el-button type="danger" :icon="Delete" size="default">删除</el-button>-->
|
<!-- <el-button type="success" size="default">设置分类</el-button>-->
|
</el-col>
|
</el-row>
|
<el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
|
<el-table-column property="workPermitNo" label="作业申请单号" width="180" />
|
<el-table-column property="applyUname" label="申请人" />
|
<el-table-column property="operatorCompanys" label="施工单位" />
|
<el-table-column property="operatorUnames" label="作业人" />
|
<el-table-column property="workTypeDesc" label="作业类型" />
|
<el-table-column property="workLevelDesc" label="作业等级" />
|
<el-table-column property="applyTime" label="申请时间" width="180" />
|
<el-table-column label="申请状态" align="center" width="180">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.status==2?'success':(scope.row.status==8||scope.row.status==9)?'warning':'danger'">{{ scope.row.statusDesc }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" align="center" width="250">
|
<template slot-scope="scope">
|
<el-button link type="text" @click="viewRecord(scope.row)">查看</el-button>
|
<el-button link type="text" @click="viewStatus(scope.row)">进度</el-button>
|
<el-button link type="text" @click="downLoadRecord(scope.row)">导出作业票</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pageBtn">
|
<el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog :visible.sync="dialogDetails" title="作业申请详情" center>
|
<fire v-if="dialogType == 1" :details = details></fire>
|
<space v-if="dialogType == 2" :details = details></space>
|
<hoist v-if="dialogType == 3" :details = details></hoist>
|
<ground v-if="dialogType == 4" :details = details></ground>
|
<broken v-if="dialogType == 5" :details = details></broken>
|
<height v-if="dialogType == 6" :details = details></height>
|
<power v-if="dialogType == 7" :details = details></power>
|
<plate v-if="dialogType == 8" :details = details></plate>
|
<template #footer>
|
<div class="dialog-footer" align="right">
|
<el-button type="primary" @click="dialogDetails = false"
|
>确认</el-button
|
>
|
</div>
|
</template>
|
</el-dialog>
|
<el-dialog :visible.sync="dialogStatus" title="作业申请进度" width="60%">
|
<el-form style="margin-bottom: 40px">
|
<el-form-item label="作业人" v-if="approveInfo.operatorUnames">
|
<el-input v-model="approveInfo.operatorUnames" readonly type="textarea" />
|
</el-form-item>
|
<el-form-item label="作业人" v-else>
|
<el-input placeholder="无" readonly type="textarea" />
|
</el-form-item>
|
</el-form>
|
<div style="display: flex; flex-direction: column-reverse">
|
<div v-for="(item, index) in approveInfo.approvalSteps" class="stepItem">
|
<div class="stepNum">{{ item.stepSerial }}</div>
|
<div class="stepCard">
|
<el-card class="box-card" shadow="always">
|
<div class="text">
|
审批结果：<span>{{ item.approvalResultDesc }}</span>
|
</div>
|
<div class="text">
|
审批层级：<span>{{ item.typeDesc }}</span>
|
</div>
|
<div class="text" v-if="item.auditTypeDesc">
|
审批类型：<span>{{ item.auditTypeDesc }}</span>
|
</div>
|
<div class="text" v-show="item.startApprovalTime != null">
|
开始时间：<span>{{ item.startApprovalTime }}</span>
|
</div>
|
<div class="approveUnit">
|
<div class="item-tit"><span>审批人</span><span>审批状态</span></div>
|
<div class="item-cont" v-for="i in item.stepUnits">
|
<span>{{ i.approvalUname }}</span
|
><span>{{ i.resultDesc }}</span>
|
</div>
|
</div>
|
<div class="approveItem" v-if="item.stepItems && item.stepItems.length>0">
|
<div class="item-tit">
|
<span>审批项目</span>
|
<!-- <span>类型</span>-->
|
<div>措施标准</div>
|
</div>
|
<div class="item-cont" v-for="i in item.stepItems">
|
<span>{{ i.itemName }}</span>
|
<!-- <span>{{ i.typeDesc }}</span>-->
|
<div v-if="i.measure">
|
<div>
|
<span>作业类型：</span><span>{{ i.measure.workTypeDesc }}</span>
|
</div>
|
<div>
|
<span>措施内容：</span><span>{{ i.measure.context }}</span>
|
</div>
|
</div>
|
<div v-if="i.stand">
|
<div>
|
<span>标题名称：</span><span>{{ i.stand.title }}</span>
|
</div>
|
<div>
|
<span>标准内容：</span><span>{{ i.stand.typeDesc }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="text" v-show="item.expFinishApprovalTime != null">
|
期望结束时间：<span>{{ item.expFinishApprovalTime }}</span>
|
</div>
|
<div class="text" v-show="item.finishApprovalTime != null">
|
结束时间：<span>{{ item.finishApprovalTime }}</span>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
<el-dialog :visible.sync="deleteDialog" title="提示" width="30%" center>
|
<span>您确定要取消该条申请吗？</span>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="deleteDialog = false" size="default">取消</el-button>
|
<el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<!-- </el-tab-pane>-->
|
<!-- <el-tab-pane label="已通过" name="2">-->
|
<!-- <div style="height: 100%">-->
|
<!-- <el-row class="homeCard">-->
|
<!-- <el-col :span="8">-->
|
<!-- <div class="grid-content topInfo">-->
|
<!-- <el-input v-model="searchWord" placeholder="作业证名称"></el-input>-->
|
<!-- <el-button type="primary">查询</el-button>-->
|
<!-- <el-button plain>重置</el-button>-->
|
<!-- </div>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <div class="homeCard">-->
|
<!-- <div class="main-card">-->
|
<!-- <el-table ref="multipleTableRef" :data="passedData" style="width: 100%" height="calc(100% - 48px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange">-->
|
<!-- <el-table-column type="selection" width="55" />-->
|
<!-- <el-table-column type="index" label="编号" width="200" />-->
|
<!-- <el-table-column property="level" label="作业证等级" width="180" sortable />-->
|
<!-- <el-table-column property="applyDate" label="申请日期" sortable />-->
|
<!-- <el-table-column property="name" label="申请人" width="180" />-->
|
<!-- <el-table-column property="department" label="申请部门" width="180" />-->
|
<!-- <el-table-column label="申请状态" width="180">-->
|
<!-- <template slot-scope="scope">-->
|
<!-- <el-tag type="success">{{ scope.row.status }}</el-tag>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- </el-table>-->
|
<!-- <div class="pageBtn">-->
|
<!-- <el-pagination v-model:currentPage="pageIndex2" v-model:page-size="pageSize2" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize2" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </el-tab-pane>-->
|
<!-- </el-tabs>-->
|
</div>
|
</template>
|
|
<script>
|
import fire from './components/fireLog'
|
import space from './components/spaceLog'
|
import hoist from './components/hoistLog'
|
import broken from './components/groundLog'
|
import ground from './components/brokenLog'
|
import height from './components/heightLog'
|
import power from './components/powerLog'
|
import plate from './components/plateLog'
|
import {workApplyApi} from "../../../../api/workApply";
|
import axios from "axios";
|
import Cookies from "js-cookie";
|
export default{
|
name: 'myApply',
|
components: {
|
fire,
|
space,
|
hoist,
|
ground,
|
broken,
|
height,
|
power,
|
plate
|
},
|
data(){
|
return{
|
pageIndex1: 1,
|
pageSize1: 10,
|
totalSize1: 0,
|
dialogType: null,
|
activeName: '1',
|
departmentList: [],
|
departmentRecursionList: [],
|
chosenIndex: null,
|
searchWord: '',
|
applyData: [],
|
workTimeList: [],
|
multipleSelection: [],
|
approveInfo: {
|
approvalSteps: [],
|
operators: []
|
},
|
dialogDetails: false,
|
dialogStatus: false,
|
deleteDialog: false,
|
addRecord: {},
|
details: {},
|
statusInfo: {},
|
deleteId: null,
|
deleteArr: [],
|
workType: [
|
{ id: 1, name: '动火作业' },
|
{ id: 2, name: '受限空间作业' },
|
{ id: 3, name: '吊装作业' },
|
{ id: 4, name: '动土作业' },
|
{ id: 5, name: '断路作业' },
|
{ id: 6, name: '高处作业' },
|
{ id: 7, name: '临时用电作业' },
|
{ id: 8, name: '盲板抽堵作业' }
|
]
|
}
|
},
|
created(){
|
this.getListByPage()
|
},
|
methods:{
|
async getListByPage() {
|
const data = { pageSize: this.pageSize1, pageIndex: this.pageIndex1, searchParams: { workType: this.searchWord } };
|
let res = await workApplyApi().getAllApplyPage(data);
|
if (res.data.code === '200') {
|
this.applyData = JSON.parse(JSON.stringify(res.data.data));
|
this.applyData = this.applyData.map((item) => {
|
if (item.operators == null || item.operators == []) {
|
item.operators = [];
|
} else {
|
item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
|
}
|
return item;
|
});
|
this.totalSize1 = res.data.total;
|
} else {
|
this.$message({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
},
|
|
toNames(row, column, cellValue, index) {
|
if (row.list == []) {
|
return [];
|
} else {
|
const nameList = [];
|
for (let i = 0; i < row.list.length; i++) {
|
for (let t = 0; t < this.workTimeList.length; t++) {
|
if (row.list[i] == this.workTimeList[t].id) {
|
nameList.push(this.workTimeList[t].name);
|
}
|
}
|
}
|
return nameList.join();
|
}
|
},
|
|
reLoadData() {
|
this.getListByPage();
|
},
|
|
// 导出方法
|
downLoadRecord(row) {
|
if(row.status == 7){
|
axios.post(process.env.BASE_API + `/work/apply/printing`,{applyWorkId: row.workApplyId},{headers:{'Content-Type': 'application/json','Authorization': `${Cookies.get('token')}`},responseType: 'blob'}).then(res=>{
|
if (res) {
|
const link = document.createElement('a')
|
let blob = new Blob([res.data],{type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})
|
link.style.display = "none";
|
link.href = URL.createObjectURL(blob); // 创建URL
|
link.setAttribute("download", row.workTypeDesc + row.workPermitNo + "作业证.docx");
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
} else {
|
this.$message({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
}else{
|
this.$message({
|
type: 'warning',
|
message: '该作业申请未完成审批流程，不可导出'
|
});
|
}
|
},
|
|
// 填写表单
|
toApply() {
|
this.$router.push({
|
path: 'workApply'
|
});
|
},
|
|
handleClick(tab, event) {
|
console.log(tab, event);
|
},
|
|
recursion(value) {
|
for (let i of value) {
|
if (i.children.length !== 0) {
|
this.departmentRecursionList.push(i);
|
this.recursion(i.children);
|
} else {
|
this.departmentRecursionList.push(i);
|
}
|
}
|
},
|
|
searchRecord() {
|
if (this.searchWord == '') {
|
this.$message({
|
type: 'warning',
|
message: '请输入查询关键词'
|
});
|
} else {
|
this.getListByPage();
|
}
|
},
|
|
clearSearch() {
|
this.searchWord = '';
|
this.getListByPage();
|
},
|
|
viewStatus(row) {
|
this.getStatus({ workApplyId: row.workApplyId });
|
},
|
|
async getStatus (data) {
|
let res = await workApplyApi().getAllStatus(data);
|
if (res.data.code === '200') {
|
this.approveInfo = JSON.parse(JSON.stringify(res.data.data));
|
console.log(this.approveInfo,'this.approveInfo')
|
// this.approveInfo.operators = this.approveInfo.operators.map(item => {
|
// return item.operatorUname
|
// }).join('、')
|
this.dialogStatus = true;
|
} else {
|
this.$message({
|
type: 'warning',
|
message: res.data.message
|
});
|
}
|
},
|
|
conFirmDelete() {
|
this.deleteRecord({ workApplyId: this.deleteId });
|
this.deleteDialog = false;
|
},
|
|
viewRecord(row) {
|
this.dialogType = row.workType
|
this.details = JSON.parse(JSON.stringify(row));
|
this.details.operators = this.details.operators.join('、')
|
// if(this.details.workDetail.otherSpecialWork == '' || !this.details.workDetail.otherSpecialWork){
|
// this.details.workDetail.otherSpecialWork = ''
|
// }
|
// else {
|
// const a = this.details.workDetail.otherSpecialWork
|
// this.details.workDetail.otherSpecialWork = a.split(',').map((item) => {
|
// return this.workType.find((i) => i.id === Number(item)).name;
|
// }).join('、');
|
// }
|
if(this.details.workDetail.involvedDepIds == '' || !this.details.workDetail.involvedDepIds){
|
this.details.workDetail.involvedDepIds = ''
|
}
|
else {
|
const a = this.details.workDetail.involvedDepIds
|
this.details.workDetail.involvedDepIds = a.split(',').map((item) => {
|
return this.departmentRecursionList.find((i) => i.depId === Number(item)).depName;
|
}).join('、');
|
}
|
if(this.details.workDetail.gbPath){
|
this.details.workDetail.gbPath = this.details.workDetail.gbPath.split(',')
|
}
|
if(this.details.workDetail.bcPath){
|
this.details.workDetail.bcPath = this.details.workDetail.bcPath.split(',')
|
}
|
if(this.details.workDetail.bpLocationMapPath){
|
this.details.workDetail.bpLocationMapPath = this.details.workDetail.bpLocationMapPath.split(',')
|
}
|
this.dialogDetails = true;
|
},
|
|
handleSizeChange1(val) {
|
this.pageSize1 = val;
|
this.getListByPage();
|
},
|
|
|
handleCurrentChange1(val) {
|
this.pageIndex1 = val;
|
this.getListByPage();
|
}
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
.home-container {
|
height: calc(100vh - 144px);
|
box-sizing: border-box;
|
overflow: hidden;
|
.demo-tabs {
|
width: 100%;
|
height: 100%;
|
|
//&::v-deep(.el-tabs__content) {
|
// height: calc(100% - 60px);
|
//}
|
|
.el-tab-pane {
|
height: 100%;
|
}
|
}
|
.homeCard {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
background: #fff;
|
border-radius: 4px;
|
|
.main-card {
|
width: 100%;
|
height: 100%;
|
.cardTop {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
.mainCardBtn {
|
margin: 0;
|
}
|
}
|
.pageBtn {
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: right;
|
|
.demo-pagination-block + .demo-pagination-block {
|
margin-top: 10px;
|
}
|
.demo-pagination-block .demonstration {
|
margin-bottom: 16px;
|
}
|
}
|
}
|
&:last-of-type {
|
height: calc(100% - 100px);
|
}
|
}
|
.stepItem {
|
display: flex;
|
align-items: flex-start;
|
margin-top: 30px;
|
margin-left: 30px;
|
padding-bottom: 30px;
|
padding-left: 40px;
|
border-left: 1px solid #a0cfff;
|
position: relative;
|
&:first-of-type {
|
margin-top: 30px;
|
}
|
&:first-of-type {
|
margin-bottom: 0;
|
border-left: none;
|
}
|
.stepNum {
|
position: absolute;
|
width: 40px;
|
height: 40px;
|
border-radius: 20px;
|
box-sizing: border-box;
|
font-size: 18px;
|
color: #333;
|
border: 1px solid #a0cfff;
|
line-height: 38px;
|
text-align: center;
|
left: -20px;
|
top: -30px;
|
background: #d9ecff;
|
}
|
.stepCard {
|
width: 100%;
|
margin-top: -30px;
|
|
.box-card {
|
width: 100%;
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
span {
|
font-weight: bold;
|
margin-left: 10px;
|
}
|
}
|
|
.text {
|
width: 100%;
|
font-size: 14px;
|
margin-bottom: 10px;
|
padding-left: 10px;
|
|
span {
|
font-weight: bolder;
|
color: #409eff;
|
}
|
|
&:last-of-type {
|
margin-bottom: 0;
|
}
|
}
|
.approveUnit {
|
width: 100%;
|
font-size: 14px;
|
margin-bottom: 20px;
|
padding: 10px 15px;
|
border: 1px solid #fff;
|
background: #ecf8ff;
|
border-radius: 6px;
|
.item-tit {
|
width: 100%;
|
display: flex;
|
color: #409eff;
|
align-items: flex-start;
|
justify-content: space-between;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #a0cfff;
|
|
& > span {
|
flex: 1;
|
&:last-of-type{
|
text-align: center;
|
}
|
}
|
& > div {
|
flex: 1;
|
text-align: center;
|
}
|
}
|
.item-cont {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10px 0;
|
border-bottom: 1px solid #c6e2ff;
|
|
& > span {
|
flex: 1;
|
&:last-of-type{
|
text-align: center;
|
}
|
}
|
& > div {
|
flex: 1;
|
text-align: center;
|
|
& > div {
|
text-align: left;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
span {
|
width: 45%;
|
&:first-of-type {
|
width: 30%;
|
}
|
}
|
}
|
}
|
&:last-of-type {
|
border-bottom: 0;
|
}
|
}
|
}
|
.approveItem {
|
width: 100%;
|
font-size: 14px;
|
margin-bottom: 20px;
|
padding: 10px 15px;
|
background: #ecf8ff;
|
border: 1px solid #fff;
|
border-radius: 6px;
|
.item-tit {
|
width: 100%;
|
display: flex;
|
color: #409eff;
|
align-items: flex-start;
|
justify-content: space-between;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #a0cfff;
|
|
& > span {
|
flex: 1;
|
}
|
& > div {
|
flex: 2;
|
text-align: center;
|
}
|
}
|
.item-cont {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10px 0;
|
border-bottom: 1px solid #c6e2ff;
|
|
& > span {
|
flex: 1;
|
}
|
& > div {
|
flex: 2;
|
text-align: center;
|
|
& > div {
|
text-align: left;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: flex-start;
|
margin-bottom: 10px;
|
span {
|
width: 50%;
|
&:first-of-type {
|
width: 25%;
|
}
|
}
|
}
|
}
|
&:last-of-type {
|
border-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
&:hover .card-header {
|
color: #0098f5;
|
}
|
&:hover .stepNum {
|
border: 2px solid #0098f5;
|
color: #0098f5;
|
}
|
}
|
.el-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
.grid-content {
|
align-items: center;
|
min-height: 36px;
|
}
|
|
.topInfo {
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
font-weight: bold;
|
|
& > div {
|
white-space: nowrap;
|
margin-right: 20px;
|
}
|
}
|
}
|
.el-card {
|
border: 0;
|
}
|
}
|
</style>
|
