From 91ccfa3ebdc7a68b6f632c3e59757ec03b15ac1f Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期五, 02 九月 2022 15:15:01 +0800 Subject: [PATCH] lct --- src/views/specialWorkManage/workTicket/myApproval/index.vue | 691 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 686 insertions(+), 5 deletions(-) diff --git a/src/views/specialWorkManage/workTicket/myApproval/index.vue b/src/views/specialWorkManage/workTicket/myApproval/index.vue index 34cd1a0..2c3510c 100644 --- a/src/views/specialWorkManage/workTicket/myApproval/index.vue +++ b/src/views/specialWorkManage/workTicket/myApproval/index.vue @@ -1,13 +1,694 @@ <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="12" class="mainCardBtn"> +<!-- <el-button type="primary" :icon="Plus" 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-button type="primary" @click="reLoadData()" />--> + </el-row> + <el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }"> + <el-table-column property="applyUname" label="申请人" /> + <el-table-column property="depName" label="部门名称" /> + <el-table-column property="operators" 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 type="text" @click="viewRecord(scope.row)">查看</el-button> + <el-button type="text" @click="viewStatus(scope.row)">进度</el-button> +<!-- <el-button link type="warning" size="small" :icon="Delete" @click="deleteRecordBtn(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 v-model="dialogDetails" title="作业审批详情" center> + <fire v-if="dialogType == 1" :details = details></fire> + <space v-else-if="dialogType == 2" :details = details></space> + <hoist v-else-if="dialogType == 3" :details = details></hoist> + <ground v-else-if="dialogType == 4" :details = details></ground> + <broken v-else-if="dialogType == 5" :details = details></broken> + <height v-else-if="dialogType == 6" :details = details></height> + <power v-else-if="dialogType == 7" :details = details></power> + <plate v-else :details = details></plate> + <template #footer> + <span class="dialog-footer"> + <el-button type="primary" @click="dialogDetails = false" + >确认</el-button + > + </span> + </template> + </el-dialog> + <el-dialog v-model="dialogStatus" title="作业审批进度" center width="60%"> + <el-form v-if="approveInfo.operators.length > 0" style="margin-bottom: 40px"> + <el-form-item label="申请作业人"> + <el-input v-model="approveInfo.operators" 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-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"> + <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 !== null"> + <div> + <span>作业类型:</span><span>{{ i.measure.workTypeDesc }}</span> + </div> + <div> + <span>措施内容:</span><span>{{ i.measure.context }}</span> + </div> + </div> + <div v-if="i.stand !== null"> + <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 v-model="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> -export default { - name: "index" -} +import fire from './components/fireLog' +import space from './components/spaceLog' +import hoist from './components/hoistLog' +import ground from './components/groundLog' +import broken from './components/brokenLog' +import height from './components/heightLog' +import power from './components/powerLog' +import plate from './components/plateLog' +import {getDepartmentList} from "../../../../api/departmentManage"; +import {workApprovalApi} from "../../../../api/workApproval"; + +export default{ + name: 'myApproval', + 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: '盲板抽堵作业' } + ], + } + }, + methods:{ + async getListByPage() { + const data = { pageSize: this.pageSize1, pageIndex: this.pageIndex1, searchParams: { workType: this.searchWord } }; + let res = await workApprovalApi().getApprovalListPage(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 + }); + } + }, + + reLoadData() { + this.getListByPage(); + }, + + toApply() { + this.$router.push({ + path: 'workApply' + }); + }, + + handleClick(tab, event) { + console.log(tab, event); + }, + + async getAllDepartment() { + let res = await getDepartmentList({pageSize:1000,pageIndex:1}) + if(res.data.code === '200'){ + this.departmentList = res.data.result.result + this.recursion(this.departmentList); + }else{ + this.$message({ + message:res.data.message, + type:'warning' + }) + } + }, + + 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 }); + this.dialogStatus = true; + }, + + async getStatus(data) { + let res = await workApprovalApi().getApprovalStatus(data); + if (res.data.code === '200') { + this.approveInfo = JSON.parse(JSON.stringify(res.data.data)); + this.approveInfo.operators = Array.from(this.approveInfo.operators, ({ operatorUname }) => operatorUname); + } else { + this.$message({ + type: 'warning', + message: res.data.msg + }); + } + }, + + deleteRecordBtn(row) { + this.deleteId = row.workApplyId; + this.deleteDialog = true; + }, + + async deleteRecord(data) { + let res = await workApprovalApi().postAbord(data); + if (res.data.code === '200') { + this.$message({ + type: 'success', + message: res.data.msg + }); + this.getListByPage(); + } else { + this.$message({ + type: 'warning', + message: res.data.msg + }); + } + }, + + conFirmDelete() { + this.deleteRecord({ workApplyId: this.deleteId }); + this.deleteDialog = false; + }, + + handleSizeChange1(val) { + this.pageSize1 = val; + this.getListByPage(); + }, + + handleCurrentChange1(val) { + this.pageIndex1 = val; + this.getListByPage(); + }, + + // 查看记录 + viewRecord(row) { + this.dialogType = row.workType + this.details = JSON.parse(JSON.stringify(row)); + // getApprovalData(this.details.workApplyId) + 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('、'); + } + this.dialogDetails = true; + }, + + }, + +}; </script> -<style scoped> +<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> -- Gitblit v1.9.2