From c64c8f43ec1a3d88feb1f915fd488040b6358e7d Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期二, 09 八月 2022 19:04:12 +0800 Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut --- src/views/contingencyManagement/contingency/index.vue | 457 +++++++++++++++++++++++++++++++-------------------------- 1 files changed, 248 insertions(+), 209 deletions(-) diff --git a/src/views/contingencyManagement/contingency/index.vue b/src/views/contingencyManagement/contingency/index.vue index af8194e..22a783a 100644 --- a/src/views/contingencyManagement/contingency/index.vue +++ b/src/views/contingencyManagement/contingency/index.vue @@ -2,22 +2,22 @@ <div class="system-user-container"> <el-card shadow="hover"> <div class="system-user-search mb15"> - <el-form :inline="true" :model="formInline" class="demo-form-inline"> + <el-form :inline="true" class="demo-form-inline"> <el-form-item> - <el-input size="default" v-model="formInline.name" placeholder="队伍名称"> </el-input> + <el-input size="default" v-model="listQuery.searchParams.teamName" placeholder="队伍名称"> </el-input> </el-form-item> <el-form-item> - <el-select size="default" v-model="formInline.level" placeholder="请选择队伍级别"> - <el-option label="公司" value="shanghai"></el-option> - <el-option label="分厂-车间" value="beijing"></el-option> - <el-option label="工序-班组等" value="beijing"></el-option> + <el-select size="default" v-model="listQuery.searchParams.teamLevel" placeholder="请选择队伍级别"> + <el-option label="公司" value="1"></el-option> + <el-option label="分厂-车间" value="2"></el-option> + <el-option label="工序-班组等" value="3"></el-option> </el-select> </el-form-item> <el-form-item> <el-button size="default" type="primary" class="ml10" @click="onSubmit"> 查询 </el-button> - <el-button size="default" class="ml10" @click="submitReset"> + <el-button size="default" class="ml10" @click="submitReset"> 重置 </el-button> </el-form-item> @@ -25,67 +25,74 @@ </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>新建 </el-button> - <el-button size="default" type="warning" plain disabled> + <el-button size="default" type="warning" plain :disabled="warning"> <el-icon> <Edit /> </el-icon>修改 </el-button> - <el-button size="default" type="danger" plain disabled> + <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 class="button_Right">--> +<!-- <el-button size="default" @click="upButton">--> +<!-- <el-icon>--> +<!-- <Upload />--> +<!-- </el-icon>--> +<!-- </el-button>--> +<!-- <el-button size="default">--> +<!-- <el-icon>--> +<!-- <Download />--> +<!-- </el-icon>--> +<!-- </el-button>--> +<!-- <el-button size="default">--> +<!-- <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="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="teamPhone" label="负责人手机" show-overflow-tooltip></el-table-column> - <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column> - <el-table-column label="操作" width="200" align="center"> + <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip sortable> <template #default="scope"> - <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)"> + <span v-if="scope.row.teamLevel == 1">公司</span> + <span v-if="scope.row.teamLevel == 2">分厂-车间</span> + <span v-if="scope.row.teamLevel == 3">工序-班组等</span> + </template> + </el-table-column> + <el-table-column prop="teamDesc" label="队伍描述" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="principalPhone" 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="200" align="center" fixed="right"> + <template #default="scope"> + <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)"> <el-icon style="margin-right: 5px;"> <View /> </el-icon>查看 </el-button> - <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)"> + <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 type="primary" @click="onRowDel(scope.row)"> + <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)"> <el-icon> <Delete /> </el-icon>删除 @@ -95,22 +102,22 @@ </el-table> <div class="pages"> <el-pagination - v-model:currentPage="currentPage" + v-if="tableData.length == 0 ? false : true" + @size-change="onHandleSizeChange" + @current-change="onHandleCurrentChange" + class="mt15" + :pager-count="5" + :page-sizes="[10, 20, 30]" + v-model:currentPage="pageIndex" + background v-model:page-size="pageSize" - :page-sizes="[10,20,50,100]" - :small="small" - :disabled="disabled" - :background="background" layout="total, sizes, prev, pager, next, jumper" - :total="400" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> + :total="total" + > + </el-pagination> </div> </el-card> - <OpenSee ref="seeRef" /> - <OpenAdd ref="addRef" /> - <OpenEdit ref="editRef" /> + <OpenAdd ref="addRef" @myAdd="onMyAdd" /> <upData ref="upShow"></upData> </div> </template> @@ -119,212 +126,222 @@ import { // toRefs, reactive, - // onMounted, + onMounted, ref, defineComponent } from 'vue'; import { ElMessageBox, ElMessage, - ElTable, } from 'element-plus'; import { Plus, Edit, Delete, - Upload, - Download, - Refresh, + // Upload, + // Download, + // Refresh, View, EditPen, } from '@element-plus/icons-vue' -import OpenAdd from '/@/views/contingencyManagement/contingency/component/openAdd.vue'; -import OpenEdit from '/@/views/contingencyManagement/contingency/component/openEdit.vue'; -import OpenSee from '/@/views/contingencyManagement/contingency/component/openSee.vue'; -import UpData from '/@/views/contingencyManagement/contingency/component/upData.vue'; -// 定义表格数据类型 -interface User { - teamName: string - teamLevel: string - teamDescription: string - teamPhone: string - telephone: 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; -} +import OpenAdd from '../../contingencyManagement/contingency/component/openAdd.vue' +import UpData from '../../contingencyManagement/contingency/component/upData.vue'; +import {contingencyApi} from "../../../api/contingencyManagement/contingency"; export default defineComponent({ name: 'systemUser', components: { OpenAdd, - OpenSee, - OpenEdit, View, EditPen, Plus, Edit, Delete, - Upload, - Download, - Refresh, - UpData + // Upload, + // Download, + // Refresh, + UpData, + contingencyApi }, setup() { - // 定义表单搜索 - const formInline = reactive({ - name: '', - level: '', + // 列表参数 + const listQuery = reactive({ + pageIndex: 1, + pageSize: 10, + searchParams: { + teamName: "", + teamLevel: "", + } }) - // 搜索按钮 - const onSubmit = () => { - console.log('submit!') + // 定义表格数据 + const tableData = ref([]); + // 列表数据请求 + const onSubmit = async () => { + let res = await contingencyApi().getTeamManagementList(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 seeRef = ref(); - const editRef = ref(); - const multipleTableRef = ref<InstanceType<typeof ElTable>>() - const multipleSelection = ref<User[]>([]) + // 重置 + const submitReset = () => { + listQuery.searchParams.teamName = ''; + listQuery.searchParams.teamLevel = ''; + onSubmit(); + }; + const warning = ref(true); + const danger = ref(true); + const deleteAll = 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); + } + deleteAll.value = arr; + if (val.length == 1) { + warning.value = false; + danger.value = false; + } else if (val.length == 0) { + warning.value = true; + danger.value = true; + } else { + warning.value = true; + danger.value = false; + } + }; // 上传 - const upShow=ref() - const upButton=()=>{ - upShow.value.openDialog() - } - // 定义表格数据 - const tableData: User[] = [ - { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - telephone: '051383830321', - teamPhone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', - }, - { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - telephone: '051383830321', - teamPhone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', - }, - { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - telephone: '051383830321', - teamPhone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', - }, - { - teamName: '应急救援组', - teamLevel: '公司', - teamDescription: '实施抢险抢险的应急方案和措施实施 ;', - telephone: '051383830321', - teamPhone: '13603812900', - describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + - '(2)负责现场被困人员、受伤人员抢救工作;\n' + - '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + - '(4)抢险抢修或救援结束后,对结果进行复查和评估。', - responsibleDepartment: '仪表班', - teamLeader: '王磊', - } - ] - //查看用户弹窗 - const onOpenSee = (row: TableDataRow) => { - seeRef.value.openDialog(row); - }; - // 打开新增用户弹窗 + // const upShow=ref() + // const upButton=()=>{ + // upShow.value.openDialog() + // } + // 打开新增应急队伍弹窗 const addRef = ref(); const onOpenAdd = () => { - addRef.value.openDialog(); + addRef.value.openDialog('新建应急队伍管理'); }; - // 打开修改用户弹窗 - const onOpenEdit = (row: TableDataRow) => { - editRef.value.openDialog(row); + // 新增后刷新 + const onMyAdd = (e: boolean) => { + if (e) { + onSubmit(); + } else { + onSubmit(); + } + }; + // 打开修改应急队伍弹窗 + const onEdit = (val: string, row: object) => { + if (val == '详情') { + addRef.value.openDialog('查看应急队伍管理',row,true); + } else { + addRef.value.openDialog('修改应急队伍管理',row,false); + } }; // 删除用户 - const onRowDel = (row: TableDataRow) => { - ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { + const onRowDel = (data: any) => { + ElMessageBox.confirm('确定删除所选项吗?', '提示', { confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }).then(() => { + contingencyApi() + .deleteEmergencyTeam([data]) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'success', + }); + onSubmit(); + } else { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'error', + }); + onSubmit(); + } + }); + }).catch(() => {}); + }; + // 多选删除 + const onDeleteAll = () => { + ElMessageBox.confirm('确定删除所选项吗?', '提示', { + confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }) .then(() => { - ElMessage.success('删除成功'); + contingencyApi() + .deleteEmergencyTeam(deleteAll.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'success', + }); + onSubmit(); + } else { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'error', + }); + onSubmit(); + } + }); }) .catch(() => {}); }; + // 分页 + const pageIndex = ref(); + const pageSize = ref(); + const total = ref(); // 分页改变 - const currentPage = ref(4); - const pageSize = ref(10); - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); + const onHandleSizeChange = (val: number) => { + listQuery.pageSize = val; + onSubmit(); }; - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); + const onHandleCurrentChange = (val: number) => { + listQuery.pageIndex = val; + onSubmit(); }; - // const onHandleSizeChange = (val: number) => { - // state.tableData.param.pageSize = val; - // }; - // // 分页改变 // 页面加载时 - // onMounted(() => { - // initTableData(); - // }); + onMounted(() => { + onSubmit(); + }); return { - // value, - // options, - formInline, + listQuery, onSubmit, - multipleSelection, - multipleTableRef, - upButton, - upShow, - tableData, - onOpenSee, //查看 - seeRef, - onOpenEdit, //编辑 - editRef, + // upButton, + // upShow, onOpenAdd, //新增 addRef, - onRowDel, - currentPage, + pageIndex, pageSize, - handleSizeChange, - handleCurrentChange, - // ...toRefs(state), + total, + onEdit, + handleSelectionChange, + submitReset, + onRowDel, + onMyAdd, + tableData, + onDeleteAll, + onHandleSizeChange, + onHandleCurrentChange, + deleteAll, + warning, + danger, }; }, }); @@ -342,13 +359,35 @@ display: flex; flex-direction: row; justify-content: space-between; + margin-bottom: 10px; } - .pages{ - padding-top: 20px; - display: flex; - justify-content: flex-end; - } -.el-form .el-form-item:last-of-type{ - margin-bottom: 22px!important; +//分页 +.pages{ + display: flex; + justify-content: flex-end; + margin-top: 15px; +} +.el-form .el-form-item{ + margin-bottom: 0px!important; +} +//弹窗底部边框线 +::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; } </style> \ No newline at end of file -- Gitblit v1.9.2