From 22c6d355f1d418b55efa3f54e3bf0d4d01c95d85 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期五, 29 七月 2022 09:46:30 +0800 Subject: [PATCH] 对接 --- src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue | 519 ++++++++++++++++++++++++++++++--------------------------- 1 files changed, 272 insertions(+), 247 deletions(-) diff --git a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue index 5583fcb..6aabd99 100644 --- a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue +++ b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue @@ -1,114 +1,97 @@ <template> <div class="system-user-container"> <el-card shadow="hover"> - <div class="system-user-search mb15"> - <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input> - <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;"> - <el-option label="公司" value="shanghai"></el-option> - <el-option label="分厂-车间" value="beijing"></el-option> - <el-option label="工序-班组等" value="beijing"></el-option> - </el-select> - <el-button size="default" type="primary" class="ml10"> - 查询 - </el-button> - <el-button size="default" class="ml10" @click="submitReset"> - 重置 - </el-button> - </div> - <div class="button_Line"> - <div class="button_Left"> - <el-button size="default" type="primary" @click="onOpenAdd('新建')"> - <el-icon> - <Plus /> - </el-icon>新建 - </el-button> - <el-button size="default" type="warning" plain disabled> - <el-icon> - <Edit /> - </el-icon>修改 - </el-button> - <el-button size="default" type="danger" plain disabled> - <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" - > - <el-table-column - type="selection" - width="55" - /> - <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column> - <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column> - <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column> - <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column> - <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column> - <el-table-column label="操作" width="260" align="center"> - <template #default="scope"> - <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)"> - <el-icon style="margin-right: 5px;"> - <VideoPlay /> - </el-icon>启动 - </el-button> - <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)"> - <el-icon style="margin-right: 5px;"> - <VideoPause /> - </el-icon>废止 - </el-button> - <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)"> - <el-icon style="margin-right: 5px;"> - <EditPen /> - </el-icon>修改 - </el-button> - <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)"> - 发起审批 - </el-button> - <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> - <el-icon> - <Delete /> - </el-icon>删除 - </el-button> - </template> - </el-table-column> - </el-table> - <!-- <el-pagination--> - <!-- @size-change="onHandleSizeChange"--> - <!-- @current-change="onHandleCurrentChange"--> - <!-- class="mt15"--> - <!-- :pager-count="5"--> - <!-- :page-sizes="[10, 20, 30]"--> - <!-- v-model:current-page="tableData.param.pageNum"--> - <!-- background--> - <!-- v-model:page-size="tableData.param.pageSize"--> - <!-- layout="total, sizes, prev, pager, next, jumper"--> - <!-- :total="tableData.total"--> - <!-- >--> - <!-- </el-pagination>--> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="待评价" name="first"> + <div class="button_Line"> + <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="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 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)"> + 审批进度 + </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 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-tab-pane label="已评价" name="second">Config</el-tab-pane> + </el-tabs> </el-card> - <OpenSee ref="seeRef" /> - <OpenAdd ref="addRef" /> +<!-- <ApprovalProgress ref="approvalRef" />--> + <FlowChart ref="flowRef" /> + <RectificationDialog ref="rectificationRef" /> <OpenEdit ref="editRef" /> <upData ref="upShow"></upData> </div> @@ -117,44 +100,31 @@ <script lang="ts"> import { // toRefs, - // reactive, - // onMounted, + reactive, + onMounted, ref, defineComponent } from 'vue'; import { - ElMessageBox, - ElMessage, ElTable, + ElMessage, + ElMessageBox, + TabsPaneContext, } from 'element-plus'; -import { Plus, - Edit, - Delete, +import { + Plus, Upload, Download, Refresh, - View, - VideoPause, - VideoPlay, EditPen, } from '@element-plus/icons-vue' -import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.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 OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.vue'; import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue'; +import RectificationDialog from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue'; +import {emergencyDrillEvaluationApi} from '/@/api/emergencyDrillEvaluation' -// 定义表格数据类型 -interface User { - teamName: string - teamLevel: string - teamDescription: string - teamPhone: string - phone: string; - describe: string; - responsibleDepartment: string - teamLeader: string - -} // 定义接口来定义对象的类型 interface TableDataRow { @@ -170,153 +140,174 @@ // // describe: string; // createTime: string; } - export default defineComponent({ name: 'systemUser', components: { - OpenAdd, - OpenSee, OpenEdit, - View, EditPen, Plus, - Edit, - Delete, Upload, Download, Refresh, - VideoPause, - VideoPlay, - UpData + UpData, + // ApprovalProgress, + RectificationDialog, + FlowChart }, setup() { - const seeRef = ref(); - const editRef = ref(); - // 选择框 - // const value = ref(''); - // const options = - // { - // value: 'Option1', - // label: 'Option1', - // }; - const multipleTableRef = ref<InstanceType<typeof ElTable>>() - const multipleSelection = ref<User[]>([]) + + const activeName = ref('first') + + const handleClick = (tab: TabsPaneContext, event: Event) => { + console.log(tab, event) + } + // 列表参数 + const listQuery = reactive({ + pageIndex: 1, + pageSize: 10, + searchParams: { + }, + }); + // 定义表格数据 + const tableData = ref([]); + + // 列表数据请求 + const listApi = async () => { + let res = await emergencyDrillEvaluationApi().getEmergencyDrillEvaluationList(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 flowRef = ref(); + const onFlowChart = (row: TableDataRow) => { + flowRef.value.openDialog(row); + }; + // // 查看整改弹窗 + // const editRef = ref(); + // const onOpenEdit = () => { + // editRef.value.openDialog('演练实施评价',false); + // }; + // 打开修改弹窗 + const rectificationRef = ref(); + const onEdit = (val: string, row: object) => { + if (val == '详情') { + rectificationRef.value.openDialog('查看演练实施评价',row,true); + } else { + rectificationRef.value.openDialog('修改演练实施评价',row,false); } - ] - //查看用户弹窗 - const onOpenSee = (row: TableDataRow) => { - seeRef.value.openDialog(row); }; - // 打开新增用户弹窗 - const addRef = ref(); - const onOpenAdd = () => { - addRef.value.openDialog(); - }; - // 打开修改用户弹窗 - const onOpenEdit = (row: TableDataRow) => { - editRef.value.openDialog(row); - }; - // 删除用户 - const onRowDel = (row: TableDataRow) => { - ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { - confirmButtonText: '确认', + // 审批进度弹窗 + // const approvalRef = ref(); + // const onApprovalProgress = () => { + // approvalRef.value.openDialog(); + // }; + // 整改弹窗 + // const rectificationRef = ref(); + // const onEdit = () => { + // rectificationRef.value.openDialog(); + // }; + // 多选删除 + const onDeleteAll = () => { + ElMessageBox.confirm('确定删除所选项吗?', '提示', { + confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }) .then(() => { - ElMessage.success('删除成功'); + 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(); + const pageSize = ref(); + const total = ref(); // 分页改变 - // const onHandleSizeChange = (val: number) => { - // state.tableData.param.pageSize = val; - // }; - // // 分页改变 - // const onHandleCurrentChange = (val: number) => { - // state.tableData.param.pageNum = val; - // }; - // 页面加载时 - // onMounted(() => { - // initTableData(); - // }); + const handleSizeChange = (val: number) => { + listQuery.pageSize = val; + listApi(); + }; + // 分页未改变 + const handleCurrentChange = (val: number) => { + 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.toString(); + // 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 { - // value, - // options, - multipleSelection, - multipleTableRef, + activeName, + handleClick, upButton, upShow, tableData, - onOpenSee, //查看 - seeRef, - onOpenEdit, //编辑 - editRef, - onOpenAdd, //新增 - addRef, - onRowDel, - // onHandleSizeChange, - // onHandleCurrentChange, - // ...toRefs(state), + // onOpenEdit, //编辑 + pageIndex, + pageSize, + handleSizeChange, + handleCurrentChange, + // onApprovalProgress, + // approvalRef, + onEdit, + rectificationRef, + onFlowChart, + flowRef, + onDeleteAll, + handleSelectionChange, }; }, }); @@ -335,4 +326,38 @@ flex-direction: row; justify-content: space-between; } +//分页 +.pages{ + display: flex; + justify-content: flex-end; + margin-top: 15px; +} +::v-deep .el-pagination .el-pager li { + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; +} +::v-deep .el-pagination .el-pager li.is-active { + background-color: #409eff; + color: #fff; +} +::v-deep .el-pagination .btn-prev { + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; +} +::v-deep .el-pagination button:disabled{ + color: #c0c4cc; +} +::v-deep .el-pagination .btn-next{ + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; +} </style> \ No newline at end of file -- Gitblit v1.9.2