From 1c328d7233aaa6ea48fbdfb73b415eb9837956a6 Mon Sep 17 00:00:00 2001 From: zhouwenxuan <1175765986@qq.com> Date: 星期五, 11 八月 2023 10:20:08 +0800 Subject: [PATCH] 预警管理、基础信息管理页面 --- src/views/warningManage/warningPeople/index.vue | 129 +++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 123 insertions(+), 6 deletions(-) diff --git a/src/views/warningManage/warningPeople/index.vue b/src/views/warningManage/warningPeople/index.vue index c1d2ba9..0e8274e 100644 --- a/src/views/warningManage/warningPeople/index.vue +++ b/src/views/warningManage/warningPeople/index.vue @@ -1,15 +1,132 @@ <template> - <div> - 预警通知 - </div> + <div class="system-gas-container"> + <el-card shadow="hover"> + <div class="system-menu-search mb15"> + <el-form :inline="true" > + <el-form-item label="姓名:"> + <el-input v-model="state.tableData.listQuery.searchParams.name" placeholder="姓名" ></el-input> + </el-form-item> + <el-button size="default" type="primary" class="ml10"> + <el-icon> + <ele-Search /> + </el-icon> + 查询 + </el-button> + <el-button size="default" class="ml10" @click="reset()"> + <el-icon> + <RefreshLeft /> + </el-icon> + 重置 + </el-button> + </el-form> + </div> + <el-button size="default" class="mb10" type="success" @click="openDialog('新增',{})"> + <el-icon> + <ele-FolderAdd /> + </el-icon> + 新增预警人员 + </el-button> + + <el-table :data="state.tableData.data" style="width: 100%"> + <el-table-column align="center" prop="name" label="预警人员"/> + <el-table-column align="center" prop="phone" label="手机号"/> + <el-table-column label="操作" show-overflow-tooltip width="140"> + <template #default="scope"> + <el-button size="small" text type="primary" @click="openDialog('查看', scope.row)">查看</el-button> + <el-button size="small" text type="primary" @click="openDialog('修改', scope.row)">修改</el-button> + <el-button size="small" text type="primary" style="color:red;" @click="del(scope.row)">删除</el-button> + </template> + </el-table-column> + </el-table> + <br /> + <el-pagination + @size-change="onHandleSizeChange" + @current-change="onHandleCurrentChange" + class="page-position" + :pager-count="5" + :page-sizes="[10, 20, 30]" + v-model:current-page="state.tableData.listQuery.pageIndex" + background + v-model:page-size="state.tableData.listQuery.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="state.tableData.total"> + </el-pagination> + <br /> + <br /> + </el-card> + <people-dialog ref="peopleRef" @getPeopleData = initPeopleData></people-dialog> + </div> </template> <script setup lang="ts"> +import {reactive, ref} from "vue"; +import { ElMessage, ElMessageBox } from 'element-plus' +import { PeopleDataState } from "/@/types/warning"; +import peopleDialog from "./component/peopleDialog.vue"; +const peopleRef = ref(); +const state = reactive<PeopleDataState>({ + tableData: { + data: [ + // { + // id: '1', + // name: '张三', + // phone: '112554566666' + // }, + // { + // id: '2', + // name: '李四', + // phone: '11254212321' + // } + ], + total: 0, + loading: false, + listQuery: { + pageIndex: 1, + pageSize: 10, + searchParams:{ + name: '' + } + } + } +}); + +const initPeopleData = () => { + console.log("数据列表") +}; +const onHandleSizeChange = (val: number) => { + state.tableData.listQuery.pageSize = val; + initPeopleData(); +}; +// 分页改变 +const onHandleCurrentChange = (val: number) => { + state.tableData.listQuery.pageIndex = val; + initPeopleData(); +}; +const openDialog = (type: string, value: any) => { + peopleRef.value.openDialog(type, value); +}; +const del = (val: any) => { + ElMessageBox.confirm( + '确定删除此条数据?', + '提示', + { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + } + ) + .then(() => { + ElMessage({ + type: 'success', + message: '删除成功', + }) + }) +}; +const reset = () => { + state.tableData.listQuery.searchParams.name = ''; +} </script> - - - <style scoped lang="scss"> </style> \ No newline at end of file -- Gitblit v1.9.2