From 1be21989c76f0eb9a43b9ebcab322d7171dbccd6 Mon Sep 17 00:00:00 2001 From: zhaojiale <631455805@qq.com> Date: 星期四, 08 九月 2022 17:08:57 +0800 Subject: [PATCH] json转换取消 --- src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue | 664 ++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 439 insertions(+), 225 deletions(-) diff --git a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue index 2b8d46d..bba7134 100644 --- a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue +++ b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue @@ -1,272 +1,443 @@ <template> <div class="system-user-container"> <el-card shadow="hover"> - <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 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 type="primary" @click="onOpenEdit(scope.row)"> - <el-icon style="margin-right: 5px;"> - <VideoPlay /> - </el-icon>启动 - </el-button> - <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)"> - <el-icon style="margin-right: 5px;"> - <VideoPause /> - </el-icon>废止 - </el-button> - <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)"> - <el-icon style="margin-right: 5px;"> - <EditPen /> - </el-icon>修改 - </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-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="待评价" name="first"> + <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="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-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> - <OpenAdd ref="addRef" /> - <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 { - ElMessageBox, ElMessage, - ElTable, + ElMessageBox, + TabsPaneContext, } from 'element-plus'; -import { Plus, - // Edit, +import { + Plus, + // Upload, + // Download, + // Refresh, Delete, - Upload, - Download, - Refresh, - // View, - VideoPause, - VideoPlay, EditPen, } from '@element-plus/icons-vue' -import OpenAdd from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/openAdd.vue'; -import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue'; -import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue'; +// import FlowChart from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/flowChart.vue' +import ApprovalProgress from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.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: { - OpenAdd, - OpenEdit, - // View, EditPen, Plus, - // Edit, + // Upload, + // Download, + // Refresh, + // UpData, Delete, - Upload, - Download, - Refresh, - VideoPause, - VideoPlay, - 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) + if(tab.props.name=='first'){ + listQuery.searchParams.status=false + listApi() + }else if(tab.props.name=='second'){ + listQuery.searchParams.status=true + listApi() + } + } + // 列表参数 + 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 rectificationRef = ref(); + const onEdit = (val: string, row: object) => { + if (val == '修改') { + rectificationRef.value.openDialog('修改演练实施评价',row,false); + } else { + // rectificationRef.value.openDialog('修改演练实施评价',row,false); } - ] - // 打开新增用户弹窗 - const addRef = ref(); - const onOpenAdd = () => { - addRef.value.openDialog(); }; - // 打开修改用户弹窗 - const onOpenEdit = (row: TableDataRow) => { - editRef.value.openDialog(row); + const onMyAdds = (e: boolean) => { + if (e) { + listApi(); + } else { + listApi(); + } }; - // 删除用户 - const onRowDel = (row: TableDataRow) => { - ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { - confirmButtonText: '确认', + // 审批进度弹窗 + const approvalRef = ref(); + 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 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 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; + // 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, - upButton, - upShow, + activeName, + handleClick, + // upButton, + // upShow, tableData, - // onOpenSee, //查看 - // seeRef, - onOpenEdit, //编辑 - editRef, - onOpenAdd, //新增 - addRef, - onRowDel, + // onOpenEdit, //编辑 + pageIndex, + pageSize, + handleSizeChange, + handleCurrentChange, + onApprovalProgress, + approvalRef, + onEdit, + rectificationRef, + // onFlowChart, + // flowRef, + onDeleteAll, + danger, + total, + handleSelectionChange, + onMyAdd, + onMyAdds, }; }, }); @@ -285,4 +456,47 @@ 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; + 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