From 01b6b200bedf57900a88bbd982cf25889e13dc49 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期三, 10 八月 2022 14:17:09 +0800 Subject: [PATCH] 对接 --- src/views/contingencyManagement/panManagement/component/abolishLibrary.vue | 397 +++++++++++++++++++++++++++----------------------------- 1 files changed, 189 insertions(+), 208 deletions(-) diff --git a/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue b/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue index 67908b7..f13523f 100644 --- a/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue +++ b/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue @@ -1,238 +1,219 @@ <template> - <div class="system-edit-user-container"> - <el-dialog - title="废止库" - v-model="isShowDialog" - width="769px" - draggable - :fullscreen="full" - > - <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> - <el-form - ref="ruleFormRef" - :model="ruleForm" - size="default" - :rules="rules" - label-width="120px" - > - <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="jobNo" label="预案名称" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="personnelName" 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="position" label="发布实施日期" show-overflow-tooltip sortable></el-table-column> - <el-table-column label="操作" width="200" align="center"> - <template #default="scope"> - <el-button disabled size="small" text="plain" >查看 - </el-button> - <el-button disabled size="small" text="plain" style="margin-right: 5px;">编辑 - </el-button> - <el-button disabled size="small" text="plain" style="margin-right: 5px;">删除 - </el-button> - </template> - </el-table-column> - </el-table> - </el-col> - </el-row> - </el-form> - <div class="pages"> -<!-- <el-pagination--> -<!-- @size-change="onHandleSizeChange"--> -<!-- @current-change="onHandleCurrentChange"--> -<!-- class="mt15"--> -<!-- :pager-count="5"--> -<!-- :page-sizes="[10, 20, 30]"--> -<!-- v-model:current-page="formInline.pageIndex"--> -<!-- background--> -<!-- v-model:page-size="formInline.pageSize"--> -<!-- layout="total, sizes, prev, pager, next, jumper"--> -<!-- :total="tableData.total"--> -<!-- >--> -<!-- </el-pagination>--> - <el-pagination - 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" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> - </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 -} from 'vue'; +import { ref, reactive, defineComponent, onMounted } from 'vue'; -import type { - FormInstance, -} from 'element-plus' - +import type { FormInstance } from 'element-plus'; import { - Search, - FullScreen -} from '@element-plus/icons-vue' -// 定义表格数据类型 -interface User { - personnelName: string - jobNo: string - phone: string; - position: string; -} -// 定义表单搜索 -const formInline = reactive({ - pageIndex: 1, - pageSize: 10, - searchParams: { - teamName: "", - teamType: "", - } -}) + // ElMessageBox, + ElMessage, +} from 'element-plus'; +import { Search, FullScreen } from '@element-plus/icons-vue'; +import { emergencyPlanApi } from '../../../../api/contingencyManagement/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() { - const isShowDialog = ref(false) + // 列表数据请求 + 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 ruleFormRef = ref<FormInstance>() - // 打开弹窗 - const openDialog = () => { - // state.ruleForm = row; - isShowDialog.value = true; - }; - // 关闭弹窗 - const closeDialog = () => { - isShowDialog.value = false; - }; - // 取消 - const onCancel = () => { - closeDialog(); - }; - // 打开用户选择弹窗 - const userRef = ref(); - const openUser = () => { - userRef.value.openDialog(); - }; - // 分页改变 - // const onHandleSizeChange = (val: number) => { - // formInline.pageSize = val; - // }; - // const onHandleCurrentChange = (val: number) => { - // formInline.pageIndex = val; - // }; - //定义表格数据 - const multipleSelection = ref<User[]>([]) - const tableData: User[] = [] - - // 分页 - const pageIndex = ref(4); - const pageSize = ref(10); - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); - }; - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); - }; - //全屏 - const full = ref(false); - const toggleFullscreen = () => { - if (full.value == false) { - full.value = true; - } else { - full.value = false; - } - }; - return { - openDialog, - closeDialog, - isShowDialog, - onCancel, - tableData, - multipleSelection, - Search, - ruleFormRef, - // submitForm, - userRef, - openUser, - // onHandleSizeChange, - // onHandleCurrentChange, - formInline, - pageIndex, - pageSize, - handleSizeChange, - handleCurrentChange, - toggleFullscreen, - FullScreen, - full, - }; - }, + 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