From 5421ae90e2fb0e153037f4a2ca4741de61d04cdd Mon Sep 17 00:00:00 2001 From: 13937891274 <kxc0822> Date: 星期四, 14 七月 2022 18:02:25 +0800 Subject: [PATCH] 应急预案启动记录 --- src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue | 348 +++++++++++++++++++++++++++++---------------------------- 1 files changed, 178 insertions(+), 170 deletions(-) diff --git a/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue b/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue index 5583fcb..067f83c 100644 --- a/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue +++ b/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue @@ -2,22 +2,35 @@ <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> + <el-form + ref="ruleFormRef" + :model="ruleForm" + size="default" + label-width="80px" + :inline="true" + > + <el-form-item prop="telephone" > + <el-input + v-model="ruleForm.teamLeader" + placeholder="请选择应急物资" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" @click="daiInpt"/> + </template> + </el-input> + </el-form-item> + <el-button size="default" type="primary" class="ml10"> + 查询 + </el-button> + <el-button size="default" class="ml10" @click="submitReset"> + 重置 + </el-button> + </el-form> </div> <div class="button_Line"> <div class="button_Left"> - <el-button size="default" type="primary" @click="onOpenAdd('新建')"> + <el-button size="default" type="primary" @click="onOpenAdd"> <el-icon> <Plus /> </el-icon>新建 @@ -34,11 +47,6 @@ </el-button> </div> <div class="button_Right"> - <el-button @click="upButton"> - <el-icon> - <Upload /> - </el-icon> - </el-button> <el-button> <el-icon> <Download /> @@ -60,30 +68,15 @@ 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"> + <el-table-column prop="teamName" label="应急物资" min-width="120" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="teamLevel" label="保养结果" min-width="120" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="teamDescription" label="保养日期" min-width="120" show-overflow-tooltip sortable></el-table-column> + <el-table-column label="操作" width="200" align="center" fixed="right"> <template #default="scope"> - <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)"> + <el-button 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)"> - 发起审批 + <View /> + </el-icon>查看 </el-button> <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> <el-icon> @@ -93,31 +86,33 @@ </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>--> + <div class="pages"> + <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> </el-card> - <OpenSee ref="seeRef" /> - <OpenAdd ref="addRef" /> - <OpenEdit ref="editRef" /> + <EmergencySupplies ref="showRef"/> + <OpenSee ref="editRef" /> <upData ref="upShow"></upData> + <OpenAdd ref="addRef" /> </div> </template> <script lang="ts"> import { // toRefs, - // reactive, + reactive, // onMounted, ref, defineComponent @@ -126,79 +121,65 @@ ElMessageBox, ElMessage, ElTable, + FormInstance, } from 'element-plus'; -import { Plus, - Edit, +import { + Plus, + Search, Delete, - Upload, + Edit, Download, Refresh, View, - VideoPause, - VideoPlay, EditPen, } from '@element-plus/icons-vue' -import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue'; -import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue'; -import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.vue'; +import OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue'; import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue'; - +import EmergencySupplies from '/@/components/emergencySupplies/index.vue' +import OpenAdd from '/@/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue'; // 定义表格数据类型 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; } export default defineComponent({ - name: 'systemUser', + name: 'index', components: { - OpenAdd, OpenSee, - OpenEdit, View, + OpenAdd, EditPen, Plus, Edit, Delete, - Upload, + EmergencySupplies, Download, Refresh, - VideoPause, - VideoPlay, UpData }, setup() { - const seeRef = ref(); + const ruleFormRef = ref<FormInstance>() + //定义表单 + const ruleForm = reactive({ + teamName: '', // 队伍名称 + teamLeader: '', //队伍负责人 + department: [], // 负责人部门 + phone: '', // 负责人手机 + telephone: '', // 固定电话 + }); + const editRef = ref(); - // 选择框 - // const value = ref(''); - // const options = - // { - // value: 'Option1', - // label: 'Option1', - // }; + // 打开新建用户弹窗 + const addRef = ref(); + const onOpenAdd = () => { + addRef.value.openDialog(); + }; const multipleTableRef = ref<InstanceType<typeof ElTable>>() const multipleSelection = ref<User[]>([]) @@ -210,71 +191,40 @@ // 定义表格数据 const tableData: User[] = [ { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - teamPhone: '051383830321', - phone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', + teamName: '消防安全绳', + teamLevel: 'YJWZ20210208104332', + teamDescription: '安全管理部', }, { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - teamPhone: '051383830321', - phone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', + teamName: '消防安全绳', + teamLevel: 'YJWZ20210208104332', + teamDescription: '安全管理部' }, { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - teamPhone: '051383830321', - phone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', + teamName: '消防安全绳', + teamLevel: 'YJWZ20210208104332', + teamDescription: '安全管理部', }, { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - teamPhone: '051383830321', - phone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', + teamName: '消防安全绳', + teamLevel: 'YJWZ20210208104332', + teamDescription: '安全管理部', } ] - //查看用户弹窗 - const onOpenSee = (row: TableDataRow) => { - seeRef.value.openDialog(row); - }; - // 打开新增用户弹窗 - const addRef = ref(); - const onOpenAdd = () => { - addRef.value.openDialog(); - }; - // 打开修改用户弹窗 - const onOpenEdit = (row: TableDataRow) => { + // // 打开新增用户弹窗 + // const addRef = ref(); + // const onOpenAdd = () => { + // addRef.value.openDialog(); + // }; + // // 打开修改用户弹窗 + const OnOpenSee = (row: TableDataRow) => { editRef.value.openDialog(row); }; + // 应急物资弹窗 + const showRef=ref() + const daiInpt=()=>{ + showRef.value.openDailog() + } // 删除用户 const onRowDel = (row: TableDataRow) => { ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { @@ -287,18 +237,17 @@ }) .catch(() => {}); }; + // 分页 + const pageIndex = ref(4); + const pageSize = ref(10); // 分页改变 - // const onHandleSizeChange = (val: number) => { - // state.tableData.param.pageSize = val; - // }; - // // 分页改变 - // const onHandleCurrentChange = (val: number) => { - // state.tableData.param.pageNum = val; - // }; - // 页面加载时 - // onMounted(() => { - // initTableData(); - // }); + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`); + }; + // 分页未改变 + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`); + }; return { // value, // options, @@ -307,16 +256,21 @@ upButton, upShow, tableData, - onOpenSee, //查看 - seeRef, - onOpenEdit, //编辑 + OnOpenSee, //编辑 editRef, + Edit, + onRowDel, + pageIndex, + pageSize, + handleSizeChange, + handleCurrentChange, + ruleFormRef, + ruleForm, + Search, + daiInpt, + showRef, onOpenAdd, //新增 addRef, - onRowDel, - // onHandleSizeChange, - // onHandleCurrentChange, - // ...toRefs(state), }; }, }); @@ -335,4 +289,58 @@ flex-direction: row; justify-content: space-between; } +//弹窗底部边框线 +::v-deep .el-dialog__footer{ + border-top: 1px solid #e8e8e8; + border-radius: 0 0 4px 4px; +} +//弹窗顶部边框线 +::v-deep .el-dialog__header { + border-bottom: 1px solid #e8e8e8; + margin-right: 0; + border-radius: 4px 4px 0 0; +} +//表头 +::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