From d8215ff56e7bf39b43c52d7f27de5e7e427e67cf Mon Sep 17 00:00:00 2001 From: zhaojiale <631455805@qq.com> Date: 星期三, 10 八月 2022 10:55:23 +0800 Subject: [PATCH] 事故管理修改 --- src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue | 531 ++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 347 insertions(+), 184 deletions(-) diff --git a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue index eb03853..bba7134 100644 --- a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue +++ b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue @@ -3,287 +3,441 @@ <el-card shadow="hover"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tab-pane label="待评价" name="first"> - <div class="button_Line"> + <div class="button_Line mb15"> <div class="button_Left"> - <el-button size="default" type="danger" plain disabled> - <el-icon> - <Delete /> - </el-icon>删除 - </el-button> + <!--<el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">--> + <!--<el-icon>--> + <!--<Delete />--> + <!--</el-icon>删除--> + <!--</el-button>--> </div> - <div class="button_Right"> - <el-button @click="upButton"> - <el-icon> - <Upload /> - </el-icon> - </el-button> - <el-button> - <el-icon> - <Download /> - </el-icon> - </el-button> - <el-button> - <el-icon> - <Refresh /> - </el-icon> - </el-button> - </div> +<!-- <div class="button_Right">--> +<!-- <el-button @click="upButton">--> +<!-- <el-icon>--> +<!-- <Upload />--> +<!-- </el-icon>--> +<!-- </el-button>--> +<!-- <el-button>--> +<!-- <el-icon>--> +<!-- <Download />--> +<!-- </el-icon>--> +<!-- </el-button>--> +<!-- <el-button>--> +<!-- <el-icon>--> +<!-- <Refresh />--> +<!-- </el-icon>--> +<!-- </el-button>--> +<!-- </div>--> </div> <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" + @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" /> - <el-table-column prop="teamName" label="演练名称" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="teamLevel" label="演练地点" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="teamDescription" label="演练方式" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="phone" label="演练级别" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="attachments" label="计划演练日期" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="attachments" label="演练记录日期" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="drillName" label="演练名称" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="drillAddress" label="演练地点" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="drillWay" label="演练方式" show-overflow-tooltip sortable> + <template #default="scope"> + <div v-if="scope.row.drillWay=='0'">综合</div> + <div v-if="scope.row.drillWay=='1'">桌面</div> + <div v-if="scope.row.drillWay=='2'">专项</div> + </template> + </el-table-column> + <el-table-column prop="drillLevel" label="演练级别" show-overflow-tooltip sortable> + <template #default="scope"> + <div v-if="scope.row.drillLevel=='1'">公司级</div> + <div v-if="scope.row.drillLevel=='2'">分厂级</div> + <div v-if="scope.row.drillLevel=='3'">车间级</div> + </template> + </el-table-column> + <el-table-column prop="drillPlanDate" label="计划演练日期" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="drillRecordDate" label="演练记录日期" show-overflow-tooltip sortable></el-table-column> +<!-- <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column>--> <el-table-column label="操作" width="260" align="center" fixed="right"> <template #default="scope"> - <el-button size="small" text disabled> + <!--<el-button size="small" text disabled>--> + <!--<el-icon style="margin-right: 5px;">--> + <!--<EditPen />--> + <!--</el-icon>评价--> + <!--</el-button>--> +<!-- <el-button size="small" text type="primary" @click="onFlowChart(scope.row.id)">--> +<!-- 审批进度--> +<!-- </el-button>--> + <!--<el-button size="small" text type="primary" @click="onApprovalProgress('详情',scope.row.id)">--> + <!--<el-icon style="margin-right: 5px;">--> + <!--<EditPen />--> + <!--</el-icon>查看评价--> + <!--</el-button>--> + + <el-button size="small" text type="primary" @click="onApprovalProgress('评价',scope.row.id)"> <el-icon style="margin-right: 5px;"> <EditPen /> </el-icon>评价 </el-button> - <el-button size="small" text type="primary" @click="onFlowChart(scope.row)"> - 审批进度 - </el-button> - <el-button size="small" text type="primary" @click="onApprovalProgress(scope.row)"> - <el-icon style="margin-right: 5px;"> - <EditPen /> - </el-icon>查看评价 - </el-button> - <el-button size="small" text type="primary" @click="onRectificationDialog(scope.row)"> - <el-icon style="margin-right: 5px;"> - <EditPen /> - </el-icon>整改 - </el-button> - <el-button size="small" text disabled @click="onOpenEdit(scope.row)"> - 查看整改 - </el-button> + + <!--<el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">--> + <!--<el-icon style="margin-right: 5px;">--> + <!--<EditPen />--> + <!--</el-icon>整改--> + <!--</el-button>--> + <!--<el-button size="small" text disabled @click="onOpenEdit(scope.row)">--> + <!--查看整改--> + <!--</el-button>--> </template> </el-table-column> </el-table> <div class="pages"> <el-pagination + v-if="tableData.length == 0 ? false : true" v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 20, 30]" :pager-count="5" - :small="small" - :disabled="disabled" - :background="background" layout="total, sizes, prev, pager, next, jumper" - :total="40" + :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </el-tab-pane> - <el-tab-pane label="已评价" name="second">Config</el-tab-pane> + <el-tab-pane label="已评价" name="second"> + <div class="button_Line mb15"> + <div class="button_Left"> + <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll"> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + </div> + <!-- <div class="button_Right">--> + <!-- <el-button @click="upButton">--> + <!-- <el-icon>--> + <!-- <Upload />--> + <!-- </el-icon>--> + <!-- </el-button>--> + <!-- <el-button>--> + <!-- <el-icon>--> + <!-- <Download />--> + <!-- </el-icon>--> + <!-- </el-button>--> + <!-- <el-button>--> + <!-- <el-icon>--> + <!-- <Refresh />--> + <!-- </el-icon>--> + <!-- </el-button>--> + <!-- </div>--> + </div> + <el-table + :data="tableData" + style="width: 100%" + ref="multipleTableRef" + @selection-change="handleSelectionChange" + > + <el-table-column + type="selection" + width="55" + /> + <el-table-column prop="drillName" label="演练名称" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="drillAddress" label="演练地点" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="drillWay" label="演练方式" show-overflow-tooltip sortable> + <template #default="scope"> + <div v-if="scope.row.drillWay=='0'">综合</div> + <div v-if="scope.row.drillWay=='1'">桌面</div> + <div v-if="scope.row.drillWay=='2'">专项</div> + </template> + </el-table-column> + <el-table-column prop="drillLevel" label="演练级别" show-overflow-tooltip sortable> + <template #default="scope"> + <div v-if="scope.row.drillLevel=='1'">公司级</div> + <div v-if="scope.row.drillLevel=='2'">分厂级</div> + <div v-if="scope.row.drillLevel=='3'">车间级</div> + </template> + </el-table-column> + <el-table-column prop="drillPlanDate" label="计划演练日期" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="drillRecordDate" label="演练记录日期" show-overflow-tooltip sortable></el-table-column> + <!-- <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column>--> + <el-table-column label="操作" width="260" align="center" fixed="right"> + <template #default="scope"> + <!--<el-button size="small" text disabled>--> + <!--<el-icon style="margin-right: 5px;">--> + <!--<EditPen />--> + <!--</el-icon>评价--> + <!--</el-button>--> + <!-- <el-button size="small" text type="primary" @click="onFlowChart(scope.row.id)">--> + <!-- 审批进度--> + <!-- </el-button>--> + <el-button size="small" text type="primary" @click="onApprovalProgress('查看评价',scope.row.id)"> + <el-icon style="margin-right: 5px;"> + <EditPen /> + </el-icon>查看评价 + </el-button> + <!--<el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">--> + <!--<el-icon style="margin-right: 5px;">--> + <!--<EditPen />--> + <!--</el-icon>整改--> + <!--</el-button>--> + <!--<el-button size="small" text disabled @click="onOpenEdit(scope.row)">--> + <!--查看整改--> + <!--</el-button>--> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-if="tableData.length == 0 ? false : true" + v-model:currentPage="pageIndex" + v-model:page-size="pageSize" + :page-sizes="[10, 20, 30]" + :pager-count="5" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + </el-tab-pane> </el-tabs> </el-card> - <ApprovalProgress ref="approvalRef" /> - <FlowChart ref="flowRef" /> - <RectificationDialog ref="rectificationRef" /> - <OpenEdit ref="editRef" /> - <upData ref="upShow"></upData> + <ApprovalProgress ref="approvalRef" @myAdd="onMyAdd" /> +<!-- <FlowChart ref="flowRef" />--> + <RectificationDialog ref="rectificationRef" @myAdd="onMyAdds" /> +<!-- <upData ref="upShow"></upData>--> </div> </template> <script lang="ts"> import { // toRefs, - // reactive, - // onMounted, + reactive, + onMounted, ref, defineComponent } from 'vue'; import { - ElTable, + ElMessage, + ElMessageBox, TabsPaneContext, } from 'element-plus'; import { Plus, - Upload, - Download, - Refresh, + // Upload, + // Download, + // Refresh, + Delete, EditPen, } from '@element-plus/icons-vue' -import FlowChart from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/flowChart.vue' +// import FlowChart from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/flowChart.vue' import ApprovalProgress from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue'; -import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue'; -import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue'; +// import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue'; import RectificationDialog from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue'; +import {emergencyDrillEvaluationApi} from '/@/api/contingencyManagement/emergencyDrillEvaluation' +import {emergencyDrillExecuteApi} from "/@/api/contingencyManagement/emergencyDrillExecute"; -// 定义表格数据类型 -interface User { - teamName: string - teamLevel: string - teamDescription: string - teamPhone: string - phone: string; - describe: string; - responsibleDepartment: string - teamLeader: string - -} // 定义接口来定义对象的类型 -interface TableDataRow { - // userName: string; - // userNickname: string; - // roleSign: string; - // department: string[]; - // phone: string; - // email: string; - // sex: string; - // password: string; - // overdueTime: Date; - // // describe: string; - // createTime: string; -} - +// interface TableDataRow { +// } export default defineComponent({ name: 'systemUser', components: { - OpenEdit, EditPen, Plus, - Upload, - Download, - Refresh, - UpData, + // Upload, + // Download, + // Refresh, + // UpData, + Delete, ApprovalProgress, RectificationDialog, - FlowChart + // FlowChart }, setup() { const activeName = ref('first') - const handleClick = (tab: TabsPaneContext, event: Event) => { console.log(tab, event) + if(tab.props.name=='first'){ + listQuery.searchParams.status=false + listApi() + }else if(tab.props.name=='second'){ + listQuery.searchParams.status=true + listApi() + } } - const multipleTableRef = ref<InstanceType<typeof ElTable>>() - const multipleSelection = ref<User[]>([]) + // 列表参数 + const listQuery = reactive({ + pageIndex: 1, + pageSize: 10, + searchParams: { + status:false + }, + }); + // 定义表格数据 + const tableData = ref([]); + + // 列表数据请求 + const listApi = async () => { + // let res = await emergencyDrillEvaluationApi().getEmergencyDrillEvaluationList(listQuery); + let res = await emergencyDrillExecuteApi().getEmergencyDrillExecuteList(listQuery); + if (res.data.code == 200) { + tableData.value = res.data.data; + pageIndex.value = res.data.pageIndex; + pageSize.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'error', + }); + } + }; // 上传 - const upShow=ref() - const upButton=()=>{ - upShow.value.openDialog() - } - // 定义表格数据 - const tableData: User[] = [ - { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - teamPhone: '051383830321', - phone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', - }, - { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - teamPhone: '051383830321', - phone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', - }, - { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - teamPhone: '051383830321', - phone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', - }, - { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - teamPhone: '051383830321', - phone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', - } - ] + // const upShow=ref() + // const upButton=()=>{ + // upShow.value.openDialog() + // } + // 审批进度弹窗 - const flowRef = ref(); - const onFlowChart = (row: TableDataRow) => { - flowRef.value.openDialog(row); + // const flowRef = ref(); + // const onFlowChart = (row: TableDataRow) => { + // flowRef.value.openDialog(row); + // }; + // 打开修改弹窗 + const rectificationRef = ref(); + const onEdit = (val: string, row: object) => { + if (val == '修改') { + rectificationRef.value.openDialog('修改演练实施评价',row,false); + } else { + // rectificationRef.value.openDialog('修改演练实施评价',row,false); + } }; - // 打开修改用户弹窗 - const editRef = ref(); - const onOpenEdit = (row: TableDataRow) => { - editRef.value.openDialog(row); + const onMyAdds = (e: boolean) => { + if (e) { + listApi(); + } else { + listApi(); + } }; // 审批进度弹窗 const approvalRef = ref(); - const onApprovalProgress = () => { - approvalRef.value.openDialog(); + const onApprovalProgress = (val: string, row: object) => { + if (val == '详情') { + approvalRef.value.openDialog('查看演练实施评价', row, true); + } + if (val == '评价') { + approvalRef.value.openDialog('演练实施评价', row, false); + } + if (val == '查看评价') { + approvalRef.value.openDialog('演练实施查看评价', row, true); + } + }; + // 新增后刷新 + const onMyAdd = (e: boolean) => { + if (e) { + listApi(); + } else { + listApi(); + } }; // 整改弹窗 - const rectificationRef = ref(); - const onRectificationDialog = () => { - rectificationRef.value.openDialog(); + // const rectificationRef = ref(); + // const onEdit = () => { + // rectificationRef.value.openDialog(); + // }; + // 多选删除 + const onDeleteAll = () => { + ElMessageBox.confirm('确定删除所选项吗?', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + emergencyDrillEvaluationApi() + .deleteEmergencyDrillEvaluation(deletAll.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'success', + }); + listApi(); + } else { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'error', + }); + listApi(); + } + }); + }) + .catch(() => {}); }; // 分页 - const pageIndex = ref(4); - const pageSize = ref(10); + const pageIndex = ref(); + const pageSize = ref(); + const total = ref(); // 分页改变 const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); + listQuery.pageSize = val; + listApi(); }; // 分页未改变 const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); + listQuery.pageIndex = val; + listApi(); }; + const danger = ref(true); + const deletAll = ref(); + const handleSelectionChange = (val: any) => { + let valId = JSON.parse(JSON.stringify(val)); + let arr = []; + for (let i = 0; i < valId.length; i++) { + arr.push(valId[i].id); + } + deletAll.value = arr; + // console.log(deletAll.value); + if (val.length == 1) { + danger.value = false; + } else if (val.length == 0) { + danger.value = true; + } else { + danger.value = false; + } + }; + onMounted(() => { + listApi(); + }); return { activeName, handleClick, - multipleSelection, - multipleTableRef, - upButton, - upShow, + // upButton, + // upShow, tableData, - onOpenEdit, //编辑 + // onOpenEdit, //编辑 pageIndex, pageSize, handleSizeChange, handleCurrentChange, onApprovalProgress, approvalRef, - onRectificationDialog, + onEdit, rectificationRef, - onFlowChart, - flowRef, + // onFlowChart, + // flowRef, + onDeleteAll, + danger, + total, + handleSelectionChange, + onMyAdd, + onMyAdds, }; }, }); @@ -302,6 +456,15 @@ flex-direction: row; justify-content: space-between; } +//表头 +::v-deep .el-table th.el-table__cell { + background-color: #f6f7fa; + font-weight: 400; + color: #909399; +} +.el-table .sort-caret.ascending{ + border-bottom-color: #c0c4cc; +} //分页 .pages{ display: flex; -- Gitblit v1.9.2