From c12e39694dae65cf10460b3eccfb2e4005559173 Mon Sep 17 00:00:00 2001 From: 13937891274 <kxc0822> Date: 星期五, 05 八月 2022 10:51:47 +0800 Subject: [PATCH] 应急预案管理数据对接 --- src/views/contingencyManagement/panManagement/component/abolishLibrary.vue | 389 ++++++++++++++++++++++++++---------------------------- 1 files changed, 188 insertions(+), 201 deletions(-) diff --git a/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue b/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue index 767011f..f3bd004 100644 --- a/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue +++ b/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue @@ -1,237 +1,224 @@ <template> - <div class="system-edit-user-container"> - <el-dialog - title="废止库" - v-model="isShowDialog" - width="60%" - draggable - :fullscreen="full" - > - <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> - <el-row :gutter="35"> - <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> - <el-table - :data="tableData" - style="width: 100%;margin-top: 15px;" - ref="multipleTableRef" - :model="formInline" - :header-cell-style="{background:'#f6f7fa',color:'#909399'}" - > - <el-table-column prop="name" label="预案名称" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="type" label="预案类型" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="authorUid" label="编写人" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="releaseDate" label="发布实施日期" show-overflow-tooltip sortable></el-table-column> - <el-table-column label="操作" width="200" align="center"> - <template #default="scope"> - <el-button size="small" text type="primary" @click="onReduction(scope.row.id)">还原 - </el-button> - </template> - </el-table-column> - </el-table> - </el-col> - </el-row> - <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" - class="mt15" - background - layout="total, sizes, prev, pager, next, jumper" - :total="total" - @size-change="onHandleSizeChange" - @current-change="onHandleCurrentChange" - /> - </div> - <template #footer> + <div class="system-edit-user-container"> + <el-dialog title="废止库" v-model="isShowDialog" width="60%" draggable :fullscreen="full"> + <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> + <el-row :gutter="35"> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-table + :data="tableData" + style="width: 100%; margin-top: 15px" + ref="multipleTableRef" + :model="formInline" + :header-cell-style="{ background: '#f6f7fa', color: '#909399' }" + > + <el-table-column prop="name" label="预案名称" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="type" label="预案类型" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="authorUid" label="编写人" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="releaseDate" label="发布实施日期" show-overflow-tooltip sortable></el-table-column> + <el-table-column label="操作" width="200" align="center"> + <template #default="scope"> + <el-button size="small" text type="primary" @click="onReduction(scope.row.id)">还原 </el-button> + </template> + </el-table-column> + </el-table> + </el-col> + </el-row> + <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" + class="mt15" + background + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="onHandleSizeChange" + @current-change="onHandleCurrentChange" + /> + </div> + <template #footer> <span class="dialog-footer"> <el-button @click="onCancel">取消</el-button> </span> - </template> - </el-dialog> - </div> + </template> + </el-dialog> + </div> </template> <script lang="ts"> import { ref, reactive, - defineComponent + defineComponent, + onMounted, } from 'vue'; -import type { - FormInstance, -} from 'element-plus' +import type { FormInstance } from 'element-plus'; import { - // ElMessageBox, - ElMessage, + // ElMessageBox, + ElMessage, } from 'element-plus'; -import { - Search, - FullScreen -} from '@element-plus/icons-vue' -import {emergencyPlanApi} from "/@/api/emergencyPlan"; +import { Search, FullScreen } from '@element-plus/icons-vue'; +import { emergencyPlanApi } from '../../../../api/emergencyPlan'; export default defineComponent({ - name: 'abolishLibrary', - components: { + name: 'abolishLibrary', + components: {}, + setup(prop, { emit }) { + // 列表参数 + const listQuery = reactive({ + pageIndex: 1, + pageSize: 10, + searchParams: { + abolishStatus: true, + }, + }); + // 定义表格数据 + const tableData = ref([]); - }, - setup(prop, {emit}) { - // 列表参数 - const listQuery = reactive({ - pageIndex: 1, - pageSize: 10, - searchParams: { - abolishStatus: true, - } - }) - // 定义表格数据 - const tableData = ref([]); + // 列表数据请求 + const openDialog = async () => { + isShowDialog.value = true; + let res = await emergencyPlanApi().getEmergencyPlanList(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, + type: 'error', + message: res.data.msg, + }); + } + }; - // 列表数据请求 - const openDialog = async () => { - isShowDialog.value = true; - let res = await emergencyPlanApi().getEmergencyPlanList(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, - type:'error', - message:res.data.msg - }) - } - } + const isShowDialog = ref(false); - const isShowDialog = ref(false) - - const ruleFormRef = ref<FormInstance>() - // 打开弹窗 - // const openDialog = () => { - // isShowDialog.value = true; - // }; - // 关闭弹窗 - const closeDialog = () => { - isShowDialog.value = false; - }; - // 取消 - const onCancel = () => { - closeDialog(); - }; - const onReduction = async (data: any, formEl: FormInstance) => { - isShowDialog.value = false; - emergencyPlanApi() - .addEmergencyPlan(data) - .then((res) => { - if (res.data.code == 200) { - ElMessage({ - showClose: true, - message: res.data.msg, - type: 'success', - }); - emit('myAdd', true); - } else { - ElMessage({ - showClose: true, - message: res.data.msg, - type: 'error', - }); - emit('myAdd', true); - } - formEl.resetFields(); - }); - } - // 分页 - const pageIndex = ref(); - const pageSize = ref(); - const total = ref(); - // 分页改变 - const handleSizeChange = (val: number) => { - listQuery.pageSize = val; - }; - // 分页未改变 - const handleCurrentChange = (val: number) => { - listQuery.pageIndex = val; - }; - //全屏 - const full = ref(false); - const toggleFullscreen = () => { - if (full.value == false) { - full.value = true; - } else { - full.value = false; - } - }; - return { - openDialog, - closeDialog, - isShowDialog, - onCancel, - tableData, - Search, - ruleFormRef, - pageIndex, - pageSize, - handleSizeChange, - handleCurrentChange, - toggleFullscreen, - FullScreen, - full, - listQuery, - // onSubmit, - total, - emit, - onReduction, - }; - }, + const ruleFormRef = ref<FormInstance>(); + // 打开弹窗 + // const openDialog = () => { + // isShowDialog.value = true; + // }; + // 关闭弹窗 + const closeDialog = () => { + isShowDialog.value = false; + }; + // 取消 + const onCancel = () => { + closeDialog(); + }; + const onReduction = async (id: number) => { + isShowDialog.value = false; + emergencyPlanApi() + .reductionEmergencyTeam(id) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'success', + }); + emit('myAdd', true); + } else { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'error', + }); + emit('myAdd', true); + openDialog() + } + }).catch(() => {}); + }; + // 分页 + const pageIndex = ref(); + const pageSize = ref(); + const total = ref(); + // 分页改变 + const handleSizeChange = (val: number) => { + listQuery.pageSize = val; + }; + // 分页未改变 + const handleCurrentChange = (val: number) => { + listQuery.pageIndex = val; + }; + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; + return { + openDialog, + closeDialog, + isShowDialog, + onCancel, + tableData, + Search, + ruleFormRef, + pageIndex, + pageSize, + handleSizeChange, + handleCurrentChange, + toggleFullscreen, + FullScreen, + full, + listQuery, + // onSubmit, + total, + emit, + onReduction, + }; + }, }); </script> <style scoped lang="scss"> -.textarea{ - height: 168px!important; +.textarea { + height: 168px !important; } -.textarea ::v-deep .el-textarea__inner{ - height: 168px!important; +.textarea ::v-deep .el-textarea__inner { + height: 168px !important; } ::v-deep .el-table__cell { - font-weight: 400; + font-weight: 400; } //分页 -.pages{ - display: flex; - justify-content: flex-end; +.pages { + display: flex; + justify-content: flex-end; } ::v-deep .el-pagination .el-pager li { - margin: 0 5px; - background-color: #f4f4f5; - color: #606266; - min-width: 30px; - border-radius: 2px; + 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; + 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; + 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 button:disabled { + color: #c0c4cc; } -::v-deep .el-pagination .btn-next{ - margin: 0 5px; - background-color: #f4f4f5; - color: #606266; - min-width: 30px; - border-radius: 2px; +::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