From 37446a46b11fcf43b3d117301f521968701d1164 Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期五, 19 八月 2022 16:40:46 +0800 Subject: [PATCH] Default Changelist --- src/views/specialWorkSystem/workApplyManage/myJobApply/index.vue | 753 ++++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 599 insertions(+), 154 deletions(-) diff --git a/src/views/specialWorkSystem/workApplyManage/myJobApply/index.vue b/src/views/specialWorkSystem/workApplyManage/myJobApply/index.vue index 390f236..7a1a175 100644 --- a/src/views/specialWorkSystem/workApplyManage/myJobApply/index.vue +++ b/src/views/specialWorkSystem/workApplyManage/myJobApply/index.vue @@ -1,7 +1,7 @@ <template> <div class="home-container"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> - <el-tab-pane label="申请中" name="Applying"> + <el-tab-pane label="申请中" name="1"> <div style="height: 100%"> <el-row class="homeCard"> <el-col :span="8"> @@ -16,11 +16,11 @@ <div class="main-card"> <el-row class="cardTop"> <el-col :span="12" class="mainCardBtn"> - <el-button type="primary" :icon="Plus" size="default">申请</el-button> + <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" :icon="Refresh" size="default"/> + <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()"/> </el-row> <el-table ref="multipleTableRef" @@ -28,71 +28,121 @@ style="width: 100%" height="calc(100% - 100px)" :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 property="workPermitNo" label="作业申请单号" width="180"/> + <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="申请状态" width="180"> <template #default="scope"> - <el-tag type="success">{{ scope.row.status }}</el-tag> + <el-tag type="success">{{ scope.row.statusDesc}}</el-tag> </template> </el-table-column> <el-table-column fixed="right" label="操作" align="center" width="250"> <template #default="scope"> <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> - <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button> + <el-button link type="success" size="small" :icon="Finished" @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="currentPage" - v-model:page-size="pageSize" - :page-sizes="[10, 15]" - small=false - background - layout="total, sizes, prev, pager, next, jumper" - :total="100" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> + <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]" small="false" 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="作业票查看"> + <el-dialog v-model="dialogDetails" title="作业申请详情"> <el-form :model="details" label-width="120px"> - <el-form-item label="作业证等级"> + <el-form-item label="作业申请单号"> <el-input - v-model="details.level" - readonly - /> - </el-form-item> - <el-form-item label="申请日期"> - <el-input - v-model="details.applyDate" + v-model="details.workPermitNo" readonly /> </el-form-item> <el-form-item label="申请人"> <el-input - v-model="details.name" + v-model="details.applyUname" readonly /> </el-form-item> - <el-form-item label="申请部门"> + <el-form-item label="部门名称"> <el-input - v-model="details.department" + v-model="details.depName" readonly /> </el-form-item> - <el-form-item label="状态"> + <el-form-item label="作业人"> <el-input - v-model="details.status" + v-model="details.operators" + readonly + type="textarea" + /> + </el-form-item> + <el-form-item label="作业类型"> + <el-input + v-model="details.workTypeDesc" + readonly + /> + </el-form-item> + <el-form-item label="作业等级"> + <el-input + v-model="details.workLevelDesc" + readonly + /> + </el-form-item> + <el-form-item label="作业内容"> + <el-input + v-model="details.workContent" + readonly + type="textarea" + /> + </el-form-item> + <el-form-item label="作业地址"> + <el-input + v-model="details.workLocation" + readonly + type="textarea" + /> + </el-form-item> + <el-form-item label="作业方式"> + <el-input + v-model="details.workDetail.hotMethod" + readonly + type="textarea" + /> + </el-form-item> + <el-form-item label="关联其他作业"> + <el-input + v-model="details.workDetail.otherSpecialWork" + readonly + type="textarea" + /> + </el-form-item> + <el-form-item label="期望开始时间"> + <el-input + v-model="details.expStartTime" + readonly + /> + </el-form-item> + <el-form-item label="期望结束时间"> + <el-input + v-model="details.expEndTime" + readonly + /> + </el-form-item> + <el-form-item label="申请时间"> + <el-input + v-model="details.applyTime" + readonly + /> + </el-form-item> + <el-form-item label="当前状态"> + <el-input + v-model="details.statusDesc" readonly /> </el-form-item> @@ -101,17 +151,59 @@ </el-form-item> </el-form> </el-dialog> + <el-dialog v-model="dialogStatus" title="作业申请进度"> + <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 @close="indexClear"> - <span>您确定要删除该条记录吗?</span> + <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" v-throttle>确认</el-button> - </span> + <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="passed"> + <el-tab-pane label="已通过" name="2"> <div style="height: 100%"> <el-row class="homeCard"> <el-col :span="8"> @@ -124,14 +216,6 @@ </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">申请</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" size="default" :icon="Refresh" />--> -<!-- </el-row>--> <el-table ref="multipleTableRef" :data="passedData" @@ -153,17 +237,7 @@ </el-table-column> </el-table> <div class="pageBtn"> - <el-pagination - v-model:currentPage="currentPage" - v-model:page-size="pageSize" - :page-sizes="[10, 15]" - small=false - background - layout="total, sizes, prev, pager, next, jumper" - :total="100" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> + <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> @@ -173,110 +247,284 @@ </div> </template> -<script lang="ts" setup> - import { toRefs, reactive, defineComponent, ref } from 'vue'; +<script lang="ts"> + import { toRefs, reactive, defineComponent, ref, onMounted } from 'vue'; import { storeToRefs } from 'pinia'; import { initBackEndControlRoutes } from '/@/router/backEnd'; - import {useUserInfo} from "/@/stores/userInfo"; + import { useUserInfo } from '/@/stores/userInfo'; import { Session } from '/@/utils/storage'; - import { Plus, Delete, Refresh } from '@element-plus/icons-vue' - import { ElTable } from 'element-plus' + import { useRouter } from 'vue-router'; + import { Edit, View, Plus, Delete, Refresh, Search, Finished } from '@element-plus/icons-vue'; + import { ElTable } from 'element-plus'; + import { FormInstance, FormRules, ElMessage } from 'element-plus'; + import { workApplyApi } from '/@/api/specialWorkSystem/workApply'; import type { TabsPaneContext } from 'element-plus' - let global: any = { - homeChartOne: null, - homeChartTwo: null, - homeCharThree: null, - dispose: [null, '', undefined], - }; + // 定义接口来定义对象的类型 interface stateType { - homeOne: Array <type> + applyData: Array<string>; + workTimeList: Array<string>; + multipleSelection: Array<any>; + deleteArr: Array<any>; + approveInfo: Object; + dialogDetails: boolean; + dialogStatus: boolean; + deleteDialog: boolean; + pageIndex1: number; + pageSize1: number; + chosenIndex: null | number; + deleteId: null | number; + searchWord: string; + totalSize1: number; + activeName:string; + addRecord: {}; + details: {}; + statusInfo:{} } - interface type { - } - interface User { - num: string - level: string - applyDate: string - name: string - department: string - status: string - } - const userInfo = useUserInfo() - const { userInfos } = storeToRefs(userInfo); - const activeName = ref('Applying') - const handleClick = (tab: TabsPaneContext, event: Event) => { - console.log(tab, event) - } - const multipleTableRef = ref<InstanceType<typeof ElTable>>() - const multipleSelection = ref<User[]>([]) - const handleSelectionChange = (val: User[]) => { - multipleSelection.value = val - } - const currentPage = ref(1) - const pageSize = ref(10) - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`) - } - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`) - } - const applyData = reactive([ - { - level: '等级一', - applyDate: '2022-07-27 14:19:33', - name: '张三', - department: '部门一', - status: '审核中' + export default defineComponent({ + name: 'myApply', + components: {}, + setup() { + const userInfo = useUserInfo(); + const { userInfos } = storeToRefs(userInfo); + const router = useRouter(); + const state = reactive<stateType>({ + pageIndex1: 1, + pageSize1: 10, + totalSize1: 0, + activeName: '1', + chosenIndex: null, + searchWord: '', + applyData: [], + workTimeList: [], + multipleSelection: [], + approveInfo: { + approvalSteps:[], + operators: [] + }, + dialogDetails: false, + dialogStatus: false, + deleteDialog: false, + addRecord: {}, + details: {}, + statusInfo:{}, + deleteId: null, + deleteArr: [] + }); + interface User { + name: string; + list: []; + info: string; + } - }, - { - level: '等级一', - applyDate: '2022-07-27 14:19:33', - name: '张三', - department: '部门一', - status: '审核中' + // 刷新 + const reLoadData = async () => { + getListByPage(); + }; - }, - { - level: '等级一', - applyDate: '2022-07-27 14:19:33', - name: '张三', - department: '部门一', - status: '审核中' + // 填写表单 + const toApply =()=>{ + router.push({ + path: 'workTicket', + }); + } + const handleClick = (tab: TabsPaneContext, event: Event) => { + console.log(tab, event) + } + + // 分页获取工作时间组列表 + const getListByPage = async () => { + const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { name: state.searchWord } }; + let res = await workApplyApi().getApplyListtPage(data); + if (res.data.code === '200') { + state.applyData = JSON.parse(JSON.stringify(res.data.data)) + state.applyData = state.applyData.map((item) => { + if (item.operators == null || item.operators == []){ + item.operators = []; + } else { + item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname); + } + return item; + }); + state.totalSize1 = res.data.total + console.log('0212121') + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 表格数据格式化 + const 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 < state.workTimeList.length; t++) { + if (row.list[i] == state.workTimeList[t].id) { + nameList.push(state.workTimeList[t].name); + } + } + } + return nameList.join(); + } + }; + + // 关键词查询记录 + const searchRecord = async () => { + if (state.searchWord == '') { + ElMessage({ + type: 'warning', + message: '请输入查询关键词' + }); + } else { + getListByPage(); + } + }; + + const clearSearch = async () => { + state.searchWord = ''; + getListByPage(); + }; + + // 查看进度 + const viewStatus = (row)=>{ + getStatus({ workApplyId: row.workApplyId }); + state.dialogStatus = true + }; + + // 查询进度方法 + const getStatus = async (data: any) => { + let res = await workApplyApi().getStatus(data); + if (res.data.code === '200') { + state.approveInfo = JSON.parse(JSON.stringify(res.data.data)) + state.approveInfo.operators = Array.from(state.approveInfo.operators, ({ operatorUname }) => operatorUname); + console.log(state.approveInfo,'steps') + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + const deleteRecordBtn = (row) => { + state.deleteId = row.workApplyId; + state.deleteDialog = true; + }; + + // 取消申请方法 + const deleteRecord = async (data: any) => { + let res = await workApplyApi().cancelApply(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage(); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + const conFirmDelete = () => { + deleteRecord({ workApplyId: state.deleteId }); + state.deleteDialog = false; + }; + + const handleSizeChange1 = (val: number) => { + state.pageSize1 = val; + getListByPage(); + }; + const handleCurrentChange1 = (val: number) => { + state.pageIndex1 = val; + getListByPage(); + }; + + // 查看记录 + const viewRecord = (row) => { + state.details = JSON.parse(JSON.stringify(row)); + state.details.workDetail.otherSpecialWork = state.details.workDetail.otherSpecialWork.split(',') + if(state.details.workDetail.otherSpecialWork == null || state.details.workDetail.otherSpecialWork == []){state.details.workDetail.otherSpecialWork = []} + else{ + state.details.workDetail.otherSpecialWork.map(item =>{ + console.log(item,'item') + if(item == '1'){ + item = '动火作业' + return item + } else if(item == '2'){ + item = '受限空间作业' + return item + } else if(item == '3'){ + item = '吊装作业' + return item + } else if(item == '4'){ + item = '动土作业' + return item + } else if(item == '5'){ + item = '断路作业' + return item + } else if(item == '6'){ + item = '高处作业' + return item + } else if(item == '7'){ + item = '临时用电作业' + return item + } else { + item = '盲板抽堵作业' + return item + } + }) + } + console.log(state.details.workDetail.otherSpecialWork,'666666') + state.dialogDetails = true; + }; + + + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId', value); + userInfos.value.projectId = value; + await initBackEndControlRoutes(); + }; + + // 页面载入时执行方法 + onMounted(() => { + getListByPage(); + }); + + return { + View, + Edit, + Delete, + Refresh, + Plus, + Finished, + reLoadData, + toApply, + handleClick, + toNames, + searchRecord, + clearSearch, + viewRecord, + viewStatus, + deleteRecordBtn, + conFirmDelete, + getListByPage, + handleSizeChange1, + handleCurrentChange1, + ...toRefs(state) + }; } - ]) - const chosenIndex = ref(-1) - const passedData: User[] = [] - const dialogDetails = ref(false) - const details = ref({}) - const deleteDialog = ref(false) - - // 查看记录 - const viewRecord = (row) =>{ - details.value = JSON.parse(JSON.stringify(row)) - dialogDetails.value = true - } - - // 删除记录 - const deleteRecord = (index) =>{ - chosenIndex.value = index - deleteDialog.value = true - } - - // 弹窗确认删除记录 - const conFirmDelete = ()=> { - applyData.splice(chosenIndex.value,1) - deleteDialog.value = false - } - // 折线图 - const renderMenu = async (value: string) => { - Session.set('projectId',value) - userInfos.value.projectId = value - await initBackEndControlRoutes(); - }; + }); </script> <style scoped lang="scss"> @@ -334,6 +582,200 @@ 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; + } + &>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: 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: center; + span{ + width: 45%; + &:first-of-type{ + width: 30%; + } + } + } + } + &: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; @@ -358,5 +800,8 @@ } } } + .el-card{ + border: 0; + } } </style> -- Gitblit v1.9.2