From 39dd199ee55594f72c99e2a97c2304a40def5320 Mon Sep 17 00:00:00 2001 From: 13937891274 <kxc0822> Date: 星期三, 06 七月 2022 18:01:10 +0800 Subject: [PATCH] 新增页面 --- src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue | 338 ++++ src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/index.vue | 338 ++++ src/views/contingencyManagement/panManagement/component/openSee.vue | 354 ++++ src/views/contingencyManagement/panManagement/index.vue | 389 ++++ src/views/contingencyManagement/emergencyPlanStartRecord/index.vue | 338 ++++ src/views/contingencyManagement/panManagement/component/openAdd.vue | 413 +++++ src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue | 338 ++++ src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue | 338 ++++ src/components/userSelections/index.vue | 2 src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue | 338 ++++ src/views/contingencyManagement/panManagement/component/openEdit.vue | 460 +++++ src/views/contingencyManagement/panManagement/component/dialog.vue | 200 ++ src/views/contingencyManagement/panManagement/component/upData.vue | 109 + src/views/contingencyManagement/panManagement/component/addEmergencyPersonnel.vue | 185 ++ src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue | 338 ++++ src/views/contingencyManagement/panManagement/component/editEmergencyPersonnel.vue | 225 ++ 16 files changed, 4,703 insertions(+), 0 deletions(-) diff --git a/src/components/userSelections/index.vue b/src/components/userSelections/index.vue index ef9a3fc..f543cd9 100644 --- a/src/components/userSelections/index.vue +++ b/src/components/userSelections/index.vue @@ -266,10 +266,12 @@ ::v-deep .el-form-item{ margin-bottom: 0; } +//弹窗底部边框线 ::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; diff --git a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue new file mode 100644 index 0000000..5583fcb --- /dev/null +++ b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue @@ -0,0 +1,338 @@ +<template> + <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> + </div> + <div class="button_Line"> + <div class="button_Left"> + <el-button size="default" type="primary" @click="onOpenAdd('新建')"> + <el-icon> + <Plus /> + </el-icon>新建 + </el-button> + <el-button size="default" type="warning" plain disabled> + <el-icon> + <Edit /> + </el-icon>修改 + </el-button> + <el-button size="default" type="danger" plain disabled> + <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> + <el-table + :data="tableData" + style="width: 100%" + ref="multipleTableRef" + > + <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="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"> + <template #default="scope"> + <el-button :disabled="scope.row.userName === 'admin'" 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)"> + 发起审批 + </el-button> + <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + </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>--> + </el-card> + <OpenSee ref="seeRef" /> + <OpenAdd ref="addRef" /> + <OpenEdit ref="editRef" /> + <upData ref="upShow"></upData> + </div> +</template> + +<script lang="ts"> +import { + // toRefs, + // reactive, + // onMounted, + ref, + defineComponent +} from 'vue'; +import { + ElMessageBox, + ElMessage, + ElTable, +} from 'element-plus'; +import { Plus, + Edit, + Delete, + Upload, + 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 UpData from '/@/views/contingencyManagement/panManagement/component/upData.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', + components: { + OpenAdd, + OpenSee, + OpenEdit, + View, + EditPen, + Plus, + Edit, + Delete, + Upload, + Download, + Refresh, + VideoPause, + VideoPlay, + UpData + }, + setup() { + const seeRef = ref(); + const editRef = ref(); + // 选择框 + // const value = ref(''); + // const options = + // { + // value: 'Option1', + // label: 'Option1', + // }; + const multipleTableRef = ref<InstanceType<typeof ElTable>>() + const multipleSelection = ref<User[]>([]) + + // 上传 + const upShow=ref() + const upButton=()=>{ + upShow.value.openDialog() + } + // 定义表格数据 + const tableData: User[] = [ + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + } + ] + //查看用户弹窗 + const onOpenSee = (row: TableDataRow) => { + seeRef.value.openDialog(row); + }; + // 打开新增用户弹窗 + const addRef = ref(); + const onOpenAdd = () => { + addRef.value.openDialog(); + }; + // 打开修改用户弹窗 + const onOpenEdit = (row: TableDataRow) => { + editRef.value.openDialog(row); + }; + // 删除用户 + const onRowDel = (row: TableDataRow) => { + ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + ElMessage.success('删除成功'); + }) + .catch(() => {}); + }; + // 分页改变 + // const onHandleSizeChange = (val: number) => { + // state.tableData.param.pageSize = val; + // }; + // // 分页改变 + // const onHandleCurrentChange = (val: number) => { + // state.tableData.param.pageNum = val; + // }; + // 页面加载时 + // onMounted(() => { + // initTableData(); + // }); + return { + // value, + // options, + multipleSelection, + multipleTableRef, + upButton, + upShow, + tableData, + onOpenSee, //查看 + seeRef, + onOpenEdit, //编辑 + editRef, + onOpenAdd, //新增 + addRef, + onRowDel, + // onHandleSizeChange, + // onHandleCurrentChange, + // ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.table_Box{ + padding: 20px; + background-color: #fff; +} +.tableForm{ + margin-top: 10px; +} +/*按钮行*/ +.button_Line{ + display: flex; + flex-direction: row; + justify-content: space-between; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/index.vue b/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/index.vue new file mode 100644 index 0000000..5583fcb --- /dev/null +++ b/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/index.vue @@ -0,0 +1,338 @@ +<template> + <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> + </div> + <div class="button_Line"> + <div class="button_Left"> + <el-button size="default" type="primary" @click="onOpenAdd('新建')"> + <el-icon> + <Plus /> + </el-icon>新建 + </el-button> + <el-button size="default" type="warning" plain disabled> + <el-icon> + <Edit /> + </el-icon>修改 + </el-button> + <el-button size="default" type="danger" plain disabled> + <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> + <el-table + :data="tableData" + style="width: 100%" + ref="multipleTableRef" + > + <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="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"> + <template #default="scope"> + <el-button :disabled="scope.row.userName === 'admin'" 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)"> + 发起审批 + </el-button> + <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + </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>--> + </el-card> + <OpenSee ref="seeRef" /> + <OpenAdd ref="addRef" /> + <OpenEdit ref="editRef" /> + <upData ref="upShow"></upData> + </div> +</template> + +<script lang="ts"> +import { + // toRefs, + // reactive, + // onMounted, + ref, + defineComponent +} from 'vue'; +import { + ElMessageBox, + ElMessage, + ElTable, +} from 'element-plus'; +import { Plus, + Edit, + Delete, + Upload, + 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 UpData from '/@/views/contingencyManagement/panManagement/component/upData.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', + components: { + OpenAdd, + OpenSee, + OpenEdit, + View, + EditPen, + Plus, + Edit, + Delete, + Upload, + Download, + Refresh, + VideoPause, + VideoPlay, + UpData + }, + setup() { + const seeRef = ref(); + const editRef = ref(); + // 选择框 + // const value = ref(''); + // const options = + // { + // value: 'Option1', + // label: 'Option1', + // }; + const multipleTableRef = ref<InstanceType<typeof ElTable>>() + const multipleSelection = ref<User[]>([]) + + // 上传 + const upShow=ref() + const upButton=()=>{ + upShow.value.openDialog() + } + // 定义表格数据 + const tableData: User[] = [ + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + } + ] + //查看用户弹窗 + const onOpenSee = (row: TableDataRow) => { + seeRef.value.openDialog(row); + }; + // 打开新增用户弹窗 + const addRef = ref(); + const onOpenAdd = () => { + addRef.value.openDialog(); + }; + // 打开修改用户弹窗 + const onOpenEdit = (row: TableDataRow) => { + editRef.value.openDialog(row); + }; + // 删除用户 + const onRowDel = (row: TableDataRow) => { + ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + ElMessage.success('删除成功'); + }) + .catch(() => {}); + }; + // 分页改变 + // const onHandleSizeChange = (val: number) => { + // state.tableData.param.pageSize = val; + // }; + // // 分页改变 + // const onHandleCurrentChange = (val: number) => { + // state.tableData.param.pageNum = val; + // }; + // 页面加载时 + // onMounted(() => { + // initTableData(); + // }); + return { + // value, + // options, + multipleSelection, + multipleTableRef, + upButton, + upShow, + tableData, + onOpenSee, //查看 + seeRef, + onOpenEdit, //编辑 + editRef, + onOpenAdd, //新增 + addRef, + onRowDel, + // onHandleSizeChange, + // onHandleCurrentChange, + // ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.table_Box{ + padding: 20px; + background-color: #fff; +} +.tableForm{ + margin-top: 10px; +} +/*按钮行*/ +.button_Line{ + display: flex; + flex-direction: row; + justify-content: space-between; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue b/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue new file mode 100644 index 0000000..5583fcb --- /dev/null +++ b/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue @@ -0,0 +1,338 @@ +<template> + <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> + </div> + <div class="button_Line"> + <div class="button_Left"> + <el-button size="default" type="primary" @click="onOpenAdd('新建')"> + <el-icon> + <Plus /> + </el-icon>新建 + </el-button> + <el-button size="default" type="warning" plain disabled> + <el-icon> + <Edit /> + </el-icon>修改 + </el-button> + <el-button size="default" type="danger" plain disabled> + <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> + <el-table + :data="tableData" + style="width: 100%" + ref="multipleTableRef" + > + <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="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"> + <template #default="scope"> + <el-button :disabled="scope.row.userName === 'admin'" 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)"> + 发起审批 + </el-button> + <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + </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>--> + </el-card> + <OpenSee ref="seeRef" /> + <OpenAdd ref="addRef" /> + <OpenEdit ref="editRef" /> + <upData ref="upShow"></upData> + </div> +</template> + +<script lang="ts"> +import { + // toRefs, + // reactive, + // onMounted, + ref, + defineComponent +} from 'vue'; +import { + ElMessageBox, + ElMessage, + ElTable, +} from 'element-plus'; +import { Plus, + Edit, + Delete, + Upload, + 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 UpData from '/@/views/contingencyManagement/panManagement/component/upData.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', + components: { + OpenAdd, + OpenSee, + OpenEdit, + View, + EditPen, + Plus, + Edit, + Delete, + Upload, + Download, + Refresh, + VideoPause, + VideoPlay, + UpData + }, + setup() { + const seeRef = ref(); + const editRef = ref(); + // 选择框 + // const value = ref(''); + // const options = + // { + // value: 'Option1', + // label: 'Option1', + // }; + const multipleTableRef = ref<InstanceType<typeof ElTable>>() + const multipleSelection = ref<User[]>([]) + + // 上传 + const upShow=ref() + const upButton=()=>{ + upShow.value.openDialog() + } + // 定义表格数据 + const tableData: User[] = [ + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + } + ] + //查看用户弹窗 + const onOpenSee = (row: TableDataRow) => { + seeRef.value.openDialog(row); + }; + // 打开新增用户弹窗 + const addRef = ref(); + const onOpenAdd = () => { + addRef.value.openDialog(); + }; + // 打开修改用户弹窗 + const onOpenEdit = (row: TableDataRow) => { + editRef.value.openDialog(row); + }; + // 删除用户 + const onRowDel = (row: TableDataRow) => { + ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + ElMessage.success('删除成功'); + }) + .catch(() => {}); + }; + // 分页改变 + // const onHandleSizeChange = (val: number) => { + // state.tableData.param.pageSize = val; + // }; + // // 分页改变 + // const onHandleCurrentChange = (val: number) => { + // state.tableData.param.pageNum = val; + // }; + // 页面加载时 + // onMounted(() => { + // initTableData(); + // }); + return { + // value, + // options, + multipleSelection, + multipleTableRef, + upButton, + upShow, + tableData, + onOpenSee, //查看 + seeRef, + onOpenEdit, //编辑 + editRef, + onOpenAdd, //新增 + addRef, + onRowDel, + // onHandleSizeChange, + // onHandleCurrentChange, + // ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.table_Box{ + padding: 20px; + background-color: #fff; +} +.tableForm{ + margin-top: 10px; +} +/*按钮行*/ +.button_Line{ + display: flex; + flex-direction: row; + justify-content: space-between; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyPlanStartRecord/index.vue b/src/views/contingencyManagement/emergencyPlanStartRecord/index.vue new file mode 100644 index 0000000..5583fcb --- /dev/null +++ b/src/views/contingencyManagement/emergencyPlanStartRecord/index.vue @@ -0,0 +1,338 @@ +<template> + <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> + </div> + <div class="button_Line"> + <div class="button_Left"> + <el-button size="default" type="primary" @click="onOpenAdd('新建')"> + <el-icon> + <Plus /> + </el-icon>新建 + </el-button> + <el-button size="default" type="warning" plain disabled> + <el-icon> + <Edit /> + </el-icon>修改 + </el-button> + <el-button size="default" type="danger" plain disabled> + <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> + <el-table + :data="tableData" + style="width: 100%" + ref="multipleTableRef" + > + <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="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"> + <template #default="scope"> + <el-button :disabled="scope.row.userName === 'admin'" 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)"> + 发起审批 + </el-button> + <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + </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>--> + </el-card> + <OpenSee ref="seeRef" /> + <OpenAdd ref="addRef" /> + <OpenEdit ref="editRef" /> + <upData ref="upShow"></upData> + </div> +</template> + +<script lang="ts"> +import { + // toRefs, + // reactive, + // onMounted, + ref, + defineComponent +} from 'vue'; +import { + ElMessageBox, + ElMessage, + ElTable, +} from 'element-plus'; +import { Plus, + Edit, + Delete, + Upload, + 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 UpData from '/@/views/contingencyManagement/panManagement/component/upData.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', + components: { + OpenAdd, + OpenSee, + OpenEdit, + View, + EditPen, + Plus, + Edit, + Delete, + Upload, + Download, + Refresh, + VideoPause, + VideoPlay, + UpData + }, + setup() { + const seeRef = ref(); + const editRef = ref(); + // 选择框 + // const value = ref(''); + // const options = + // { + // value: 'Option1', + // label: 'Option1', + // }; + const multipleTableRef = ref<InstanceType<typeof ElTable>>() + const multipleSelection = ref<User[]>([]) + + // 上传 + const upShow=ref() + const upButton=()=>{ + upShow.value.openDialog() + } + // 定义表格数据 + const tableData: User[] = [ + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + } + ] + //查看用户弹窗 + const onOpenSee = (row: TableDataRow) => { + seeRef.value.openDialog(row); + }; + // 打开新增用户弹窗 + const addRef = ref(); + const onOpenAdd = () => { + addRef.value.openDialog(); + }; + // 打开修改用户弹窗 + const onOpenEdit = (row: TableDataRow) => { + editRef.value.openDialog(row); + }; + // 删除用户 + const onRowDel = (row: TableDataRow) => { + ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + ElMessage.success('删除成功'); + }) + .catch(() => {}); + }; + // 分页改变 + // const onHandleSizeChange = (val: number) => { + // state.tableData.param.pageSize = val; + // }; + // // 分页改变 + // const onHandleCurrentChange = (val: number) => { + // state.tableData.param.pageNum = val; + // }; + // 页面加载时 + // onMounted(() => { + // initTableData(); + // }); + return { + // value, + // options, + multipleSelection, + multipleTableRef, + upButton, + upShow, + tableData, + onOpenSee, //查看 + seeRef, + onOpenEdit, //编辑 + editRef, + onOpenAdd, //新增 + addRef, + onRowDel, + // onHandleSizeChange, + // onHandleCurrentChange, + // ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.table_Box{ + padding: 20px; + background-color: #fff; +} +.tableForm{ + margin-top: 10px; +} +/*按钮行*/ +.button_Line{ + display: flex; + flex-direction: row; + justify-content: space-between; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue b/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue new file mode 100644 index 0000000..5583fcb --- /dev/null +++ b/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue @@ -0,0 +1,338 @@ +<template> + <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> + </div> + <div class="button_Line"> + <div class="button_Left"> + <el-button size="default" type="primary" @click="onOpenAdd('新建')"> + <el-icon> + <Plus /> + </el-icon>新建 + </el-button> + <el-button size="default" type="warning" plain disabled> + <el-icon> + <Edit /> + </el-icon>修改 + </el-button> + <el-button size="default" type="danger" plain disabled> + <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> + <el-table + :data="tableData" + style="width: 100%" + ref="multipleTableRef" + > + <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="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"> + <template #default="scope"> + <el-button :disabled="scope.row.userName === 'admin'" 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)"> + 发起审批 + </el-button> + <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + </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>--> + </el-card> + <OpenSee ref="seeRef" /> + <OpenAdd ref="addRef" /> + <OpenEdit ref="editRef" /> + <upData ref="upShow"></upData> + </div> +</template> + +<script lang="ts"> +import { + // toRefs, + // reactive, + // onMounted, + ref, + defineComponent +} from 'vue'; +import { + ElMessageBox, + ElMessage, + ElTable, +} from 'element-plus'; +import { Plus, + Edit, + Delete, + Upload, + 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 UpData from '/@/views/contingencyManagement/panManagement/component/upData.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', + components: { + OpenAdd, + OpenSee, + OpenEdit, + View, + EditPen, + Plus, + Edit, + Delete, + Upload, + Download, + Refresh, + VideoPause, + VideoPlay, + UpData + }, + setup() { + const seeRef = ref(); + const editRef = ref(); + // 选择框 + // const value = ref(''); + // const options = + // { + // value: 'Option1', + // label: 'Option1', + // }; + const multipleTableRef = ref<InstanceType<typeof ElTable>>() + const multipleSelection = ref<User[]>([]) + + // 上传 + const upShow=ref() + const upButton=()=>{ + upShow.value.openDialog() + } + // 定义表格数据 + const tableData: User[] = [ + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + } + ] + //查看用户弹窗 + const onOpenSee = (row: TableDataRow) => { + seeRef.value.openDialog(row); + }; + // 打开新增用户弹窗 + const addRef = ref(); + const onOpenAdd = () => { + addRef.value.openDialog(); + }; + // 打开修改用户弹窗 + const onOpenEdit = (row: TableDataRow) => { + editRef.value.openDialog(row); + }; + // 删除用户 + const onRowDel = (row: TableDataRow) => { + ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + ElMessage.success('删除成功'); + }) + .catch(() => {}); + }; + // 分页改变 + // const onHandleSizeChange = (val: number) => { + // state.tableData.param.pageSize = val; + // }; + // // 分页改变 + // const onHandleCurrentChange = (val: number) => { + // state.tableData.param.pageNum = val; + // }; + // 页面加载时 + // onMounted(() => { + // initTableData(); + // }); + return { + // value, + // options, + multipleSelection, + multipleTableRef, + upButton, + upShow, + tableData, + onOpenSee, //查看 + seeRef, + onOpenEdit, //编辑 + editRef, + onOpenAdd, //新增 + addRef, + onRowDel, + // onHandleSizeChange, + // onHandleCurrentChange, + // ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.table_Box{ + padding: 20px; + background-color: #fff; +} +.tableForm{ + margin-top: 10px; +} +/*按钮行*/ +.button_Line{ + display: flex; + flex-direction: row; + justify-content: space-between; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue new file mode 100644 index 0000000..5583fcb --- /dev/null +++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue @@ -0,0 +1,338 @@ +<template> + <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> + </div> + <div class="button_Line"> + <div class="button_Left"> + <el-button size="default" type="primary" @click="onOpenAdd('新建')"> + <el-icon> + <Plus /> + </el-icon>新建 + </el-button> + <el-button size="default" type="warning" plain disabled> + <el-icon> + <Edit /> + </el-icon>修改 + </el-button> + <el-button size="default" type="danger" plain disabled> + <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> + <el-table + :data="tableData" + style="width: 100%" + ref="multipleTableRef" + > + <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="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"> + <template #default="scope"> + <el-button :disabled="scope.row.userName === 'admin'" 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)"> + 发起审批 + </el-button> + <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + </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>--> + </el-card> + <OpenSee ref="seeRef" /> + <OpenAdd ref="addRef" /> + <OpenEdit ref="editRef" /> + <upData ref="upShow"></upData> + </div> +</template> + +<script lang="ts"> +import { + // toRefs, + // reactive, + // onMounted, + ref, + defineComponent +} from 'vue'; +import { + ElMessageBox, + ElMessage, + ElTable, +} from 'element-plus'; +import { Plus, + Edit, + Delete, + Upload, + 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 UpData from '/@/views/contingencyManagement/panManagement/component/upData.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', + components: { + OpenAdd, + OpenSee, + OpenEdit, + View, + EditPen, + Plus, + Edit, + Delete, + Upload, + Download, + Refresh, + VideoPause, + VideoPlay, + UpData + }, + setup() { + const seeRef = ref(); + const editRef = ref(); + // 选择框 + // const value = ref(''); + // const options = + // { + // value: 'Option1', + // label: 'Option1', + // }; + const multipleTableRef = ref<InstanceType<typeof ElTable>>() + const multipleSelection = ref<User[]>([]) + + // 上传 + const upShow=ref() + const upButton=()=>{ + upShow.value.openDialog() + } + // 定义表格数据 + const tableData: User[] = [ + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + } + ] + //查看用户弹窗 + const onOpenSee = (row: TableDataRow) => { + seeRef.value.openDialog(row); + }; + // 打开新增用户弹窗 + const addRef = ref(); + const onOpenAdd = () => { + addRef.value.openDialog(); + }; + // 打开修改用户弹窗 + const onOpenEdit = (row: TableDataRow) => { + editRef.value.openDialog(row); + }; + // 删除用户 + const onRowDel = (row: TableDataRow) => { + ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + ElMessage.success('删除成功'); + }) + .catch(() => {}); + }; + // 分页改变 + // const onHandleSizeChange = (val: number) => { + // state.tableData.param.pageSize = val; + // }; + // // 分页改变 + // const onHandleCurrentChange = (val: number) => { + // state.tableData.param.pageNum = val; + // }; + // 页面加载时 + // onMounted(() => { + // initTableData(); + // }); + return { + // value, + // options, + multipleSelection, + multipleTableRef, + upButton, + upShow, + tableData, + onOpenSee, //查看 + seeRef, + onOpenEdit, //编辑 + editRef, + onOpenAdd, //新增 + addRef, + onRowDel, + // onHandleSizeChange, + // onHandleCurrentChange, + // ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.table_Box{ + padding: 20px; + background-color: #fff; +} +.tableForm{ + margin-top: 10px; +} +/*按钮行*/ +.button_Line{ + display: flex; + flex-direction: row; + justify-content: space-between; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue b/src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue new file mode 100644 index 0000000..5583fcb --- /dev/null +++ b/src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue @@ -0,0 +1,338 @@ +<template> + <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> + </div> + <div class="button_Line"> + <div class="button_Left"> + <el-button size="default" type="primary" @click="onOpenAdd('新建')"> + <el-icon> + <Plus /> + </el-icon>新建 + </el-button> + <el-button size="default" type="warning" plain disabled> + <el-icon> + <Edit /> + </el-icon>修改 + </el-button> + <el-button size="default" type="danger" plain disabled> + <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> + <el-table + :data="tableData" + style="width: 100%" + ref="multipleTableRef" + > + <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="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"> + <template #default="scope"> + <el-button :disabled="scope.row.userName === 'admin'" 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)"> + 发起审批 + </el-button> + <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + </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>--> + </el-card> + <OpenSee ref="seeRef" /> + <OpenAdd ref="addRef" /> + <OpenEdit ref="editRef" /> + <upData ref="upShow"></upData> + </div> +</template> + +<script lang="ts"> +import { + // toRefs, + // reactive, + // onMounted, + ref, + defineComponent +} from 'vue'; +import { + ElMessageBox, + ElMessage, + ElTable, +} from 'element-plus'; +import { Plus, + Edit, + Delete, + Upload, + 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 UpData from '/@/views/contingencyManagement/panManagement/component/upData.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', + components: { + OpenAdd, + OpenSee, + OpenEdit, + View, + EditPen, + Plus, + Edit, + Delete, + Upload, + Download, + Refresh, + VideoPause, + VideoPlay, + UpData + }, + setup() { + const seeRef = ref(); + const editRef = ref(); + // 选择框 + // const value = ref(''); + // const options = + // { + // value: 'Option1', + // label: 'Option1', + // }; + const multipleTableRef = ref<InstanceType<typeof ElTable>>() + const multipleSelection = ref<User[]>([]) + + // 上传 + const upShow=ref() + const upButton=()=>{ + upShow.value.openDialog() + } + // 定义表格数据 + const tableData: User[] = [ + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + } + ] + //查看用户弹窗 + const onOpenSee = (row: TableDataRow) => { + seeRef.value.openDialog(row); + }; + // 打开新增用户弹窗 + const addRef = ref(); + const onOpenAdd = () => { + addRef.value.openDialog(); + }; + // 打开修改用户弹窗 + const onOpenEdit = (row: TableDataRow) => { + editRef.value.openDialog(row); + }; + // 删除用户 + const onRowDel = (row: TableDataRow) => { + ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + ElMessage.success('删除成功'); + }) + .catch(() => {}); + }; + // 分页改变 + // const onHandleSizeChange = (val: number) => { + // state.tableData.param.pageSize = val; + // }; + // // 分页改变 + // const onHandleCurrentChange = (val: number) => { + // state.tableData.param.pageNum = val; + // }; + // 页面加载时 + // onMounted(() => { + // initTableData(); + // }); + return { + // value, + // options, + multipleSelection, + multipleTableRef, + upButton, + upShow, + tableData, + onOpenSee, //查看 + seeRef, + onOpenEdit, //编辑 + editRef, + onOpenAdd, //新增 + addRef, + onRowDel, + // onHandleSizeChange, + // onHandleCurrentChange, + // ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.table_Box{ + padding: 20px; + background-color: #fff; +} +.tableForm{ + margin-top: 10px; +} +/*按钮行*/ +.button_Line{ + display: flex; + flex-direction: row; + justify-content: space-between; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/panManagement/component/addEmergencyPersonnel.vue b/src/views/contingencyManagement/panManagement/component/addEmergencyPersonnel.vue new file mode 100644 index 0000000..0188133 --- /dev/null +++ b/src/views/contingencyManagement/panManagement/component/addEmergencyPersonnel.vue @@ -0,0 +1,185 @@ +<template> + <div class="system-edit-user-container"> + <el-dialog + title="新建应急队伍人员" + v-model="isShowDialog" + width="769px" + draggable + > + <el-form + ref="ruleFormRef" + :model="ruleForm" + size="default" + :rules="rules" + label-width="90px"> + <el-row :gutter="35"> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="选择人员" prop="selectPeople"> + <el-input + v-model="ruleForm.selectPeople" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search"/> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="人员工号" prop="jobNumber"> + <el-input v-model="ruleForm.jobNumber" placeholder="请填写人员工号"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="人员名称" prop="personnelName"> + <el-input v-model="ruleForm.personnelName" placeholder="请填写人员名称"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="人员性别" prop="personnelGender"> + <el-radio-group v-model="ruleForm.personnelGender"> + <el-radio label="男" /> + <el-radio label="女" /> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="手机号码" prop="phone"> + <el-input v-model="ruleForm.phone" placeholder="请填写手机号码"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="职位" prop="position"> + <el-input v-model="ruleForm.position" placeholder="请填写职位"></el-input> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">继续添加</el-button> + <el-button size="default" @click="onCancel">关闭</el-button> + <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script lang="ts"> +import { + ref, + reactive, + defineComponent +} from 'vue'; + +import type { + FormRules, + FormInstance, +} from 'element-plus' + +import { + Search +} from '@element-plus/icons-vue' + +export default defineComponent({ + name: 'addTeamLeader', + components: { + // Search, + }, + setup() { + const isShowDialog = ref(false) + const ruleFormRef = ref<FormInstance>() + const ruleForm = reactive({ + selectPeople: '', // 选择人员 + jobNumber: '', //人员工号 + personnelName: '', // 人员名称 + personnelGender: '', // 人员性别 + phone: '', // 手机号码 + position: '', // 职位 + }); + const rules = reactive<FormRules>({ + jobNumber: [ + { + required: true, + message: '人员工号不能为空', + trigger: 'change', + }, + ], + personnelName: [ + { + required: true, + message: '人员名称不能为空', + trigger: 'change', + }, + ], + personnelGender: [ + { + required: true, + message: '人员性别不能为空', + trigger: 'change', + }, + ], + phone: [ + { + required: true, + message: '手机号码不能为空', + trigger: 'change', + }, + ], + position: [ + { + required: true, + message: '职位不能为空', + trigger: 'change', + }, + ], + }) + const submitForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + console.log('submit!') + } else { + console.log('error submit!', fields) + } + }) + } + // 打开弹窗 + const openDialog = () => { + isShowDialog.value = true; + }; + // 关闭弹窗 + const closeDialog = () => { + isShowDialog.value = false; + }; + // 取消 + const onCancel = () => { + closeDialog(); + }; + return { + openDialog, + closeDialog, + isShowDialog, + ruleFormRef, + submitForm, + onCancel, + ruleForm, + rules, + Search, + }; + }, +}); +</script> +<style scoped lang="scss"> +.textarea{ + height: 168px!important; +} +.textarea ::v-deep .el-textarea__inner{ + height: 168px!important; +} +::v-deep .el-table__cell { + font-weight: 400; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/panManagement/component/dialog.vue b/src/views/contingencyManagement/panManagement/component/dialog.vue new file mode 100644 index 0000000..add861a --- /dev/null +++ b/src/views/contingencyManagement/panManagement/component/dialog.vue @@ -0,0 +1,200 @@ +<template> + <div class="system-add-user-container"> + <el-dialog title="查看应急队伍管理" v-model="isShowDialog" width="769px"> + <el-form :model="ruleForm" size="default" label-width="90px"> + <el-row :gutter="35"> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="账户名称"> + <el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="用户昵称"> + <el-input v-model="ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="关联角色"> + <el-select v-model="ruleForm.roleSign" placeholder="请选择" clearable class="w100"> + <el-option label="超级管理员" value="admin"></el-option> + <el-option label="普通用户" value="common"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="部门"> + <el-cascader + :options="deptData" + :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }" + placeholder="请选择部门" + clearable + class="w100" + v-model="ruleForm.department" + > + <template #default="{ node, data }"> + <span>{{ data.deptName }}</span> + <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> + </template> + </el-cascader> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="手机号"> + <el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="邮箱"> + <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="性别"> + <el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100"> + <el-option label="男" value="男"></el-option> + <el-option label="女" value="女"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="账户密码"> + <el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="账户过期"> + <el-date-picker v-model="ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="用户状态"> + <el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-form-item label="用户描述"> + <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="onCancel" size="default">取 消</el-button> + <el-button type="primary" @click="onSubmit" size="default">新 增</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script lang="ts"> +import { reactive, toRefs, onMounted, defineComponent } from 'vue'; + +// 定义接口来定义对象的类型 +interface DeptData { + deptName: string; + createTime: string; + status: boolean; + sort: number | string; + describe: string; + id: number; + children?: DeptData[]; +} +interface UserState { + isShowDialog: boolean; + ruleForm: { + userName: string; + userNickname: string; + roleSign: string; + department: any; + phone: string; + email: string; + sex: string; + password: string; + overdueTime: string; + status: boolean; + describe: string; + }; + deptData: Array<DeptData>; +} + +export default defineComponent({ + name: 'systemAddUser', + setup() { + const state = reactive<UserState>({ + isShowDialog: false, + ruleForm: { + userName: '', // 账户名称 + userNickname: '', // 用户昵称 + roleSign: '', // 关联角色 + department: [], // 部门 + phone: '', // 手机号 + email: '', // 邮箱 + sex: '', // 性别 + password: '', // 账户密码 + overdueTime: '', // 账户过期 + status: true, // 用户状态 + describe: '', // 用户描述 + }, + deptData: [], // 部门数据 + }); + // 打开弹窗 + const openDialog = () => { + state.isShowDialog = true; + }; + // 关闭弹窗 + const closeDialog = () => { + state.isShowDialog = false; + }; + // 取消 + const onCancel = () => { + closeDialog(); + }; + // 新增 + const onSubmit = () => { + closeDialog(); + }; + // 初始化部门数据 + const initTableData = () => { + state.deptData.push({ + deptName: 'vueNextAdmin', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '顶级部门', + id: Math.random(), + children: [ + { + deptName: 'IT外包服务', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '总部', + id: Math.random(), + }, + { + deptName: '资本控股', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '分部', + id: Math.random(), + }, + ], + }); + }; + // 页面加载时 + onMounted(() => { + initTableData(); + }); + return { + openDialog, + closeDialog, + onCancel, + onSubmit, + ...toRefs(state), + }; + }, +}); +</script> diff --git a/src/views/contingencyManagement/panManagement/component/editEmergencyPersonnel.vue b/src/views/contingencyManagement/panManagement/component/editEmergencyPersonnel.vue new file mode 100644 index 0000000..d6092e1 --- /dev/null +++ b/src/views/contingencyManagement/panManagement/component/editEmergencyPersonnel.vue @@ -0,0 +1,225 @@ +<template> + <div class="system-edit-user-container"> + <el-dialog + title="修改应急队伍人员" + v-model="isShowDialog" + width="769px" + draggable + > + <el-form + ref="ruleFormRef" + :model="ruleForm" + size="default" + :rules="rules" + label-width="90px"> + <el-row :gutter="35"> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="选择人员" prop="selectPeople"> + <el-input + v-model="ruleForm.selectPeople" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search"/> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="人员工号" prop="jobNumber"> + <el-input v-model="ruleForm.jobNumber" placeholder="请填写人员工号"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="人员名称" prop="personnelName"> + <el-input v-model="ruleForm.personnelName" placeholder="请填写人员名称"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="人员性别" prop="personnelGender"> + <el-radio-group v-model="ruleForm.personnelGender"> + <el-radio label="男" /> + <el-radio label="女" /> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="手机号码" prop="phone"> + <el-input v-model="ruleForm.phone" placeholder="请填写手机号码"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="职位" prop="position"> + <el-input v-model="ruleForm.position" placeholder="请填写职位"></el-input> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">继续添加</el-button> + <el-button size="default" @click="onCancel">关闭</el-button> + <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script lang="ts"> +import { + ref, + reactive, + toRefs, + defineComponent +} from 'vue'; + +import type { + FormRules, + FormInstance, +} from 'element-plus' + +import { + Search +} from '@element-plus/icons-vue' +// 定义接口来定义对象的类型 +interface DeptData { + deptName: string; + createTime: string; + status: boolean; + sort: number | string; + describe: string; + id: number; + children?: DeptData[]; +} + +interface RuleFormRow { + // teamName: string; + // teamLevel: string; + // teamLeader: string; + // responsibleDepartment: any + // teamPhone: string; + // telephone: string; + // describe: string; + // selectPeople: string +} +interface UserState { + isShowDialog: boolean; + ruleForm: RuleFormRow; + deptData: Array<DeptData>; +} +export default defineComponent({ + name: 'editTeamLeader', + components: { + // Search, + }, + setup() { + const state = reactive<UserState>({ + isShowDialog: false, + ruleForm: { + selectPeople:'', //选择人员 + jobNumber: '', // 人员工号 + phone: '', // 手机号码 + personnelGender: '', //人员性别 + position: '', //职位 + personnelName: '', // 人员名称 + }, + deptData: [], // 部门数据 + }); + // const isShowDialog = ref(false) + const ruleFormRef = ref<FormInstance>() + // 打开弹窗 + const openDialog = (row: RuleFormRow) => { + // isShowDialog.value = true; + state.ruleForm = row; + state.isShowDialog = true; + }; + // 关闭弹窗 + const closeDialog = () => { + // isShowDialog.value = false; + state.isShowDialog = false; + }; + // 取消 + const onCancel = () => { + closeDialog(); + }; + const rules = reactive<FormRules>({ + selectPeople:[ + { + required: true, + message: '人员不能为空', + trigger: 'change', + }, + ], + jobNumber: [ + { + required: true, + message: '人员工号不能为空', + trigger: 'change', + }, + ], + personnelName: [ + { + required: true, + message: '人员名称不能为空', + trigger: 'change', + }, + ], + personnelGender: [ + { + required: true, + message: '人员性别不能为空', + trigger: 'change', + }, + ], + phone: [ + { + required: true, + message: '手机号码不能为空', + trigger: 'change', + }, + ], + position: [ + { + required: true, + message: '职位不能为空', + trigger: 'change', + }, + ], + }) + const submitForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + console.log('submit!') + } else { + console.log('error submit!', fields) + } + }) + } + return { + openDialog, + closeDialog, + // isShowDialog, + ruleFormRef, + submitForm, + onCancel, + rules, + Search, + ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.textarea{ + height: 168px!important; +} +.textarea ::v-deep .el-textarea__inner{ + height: 168px!important; +} +::v-deep .el-table__cell { + font-weight: 400; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/panManagement/component/openAdd.vue b/src/views/contingencyManagement/panManagement/component/openAdd.vue new file mode 100644 index 0000000..629340b --- /dev/null +++ b/src/views/contingencyManagement/panManagement/component/openAdd.vue @@ -0,0 +1,413 @@ +<template> + <div class="system-edit-user-container"> + <el-dialog + title="新建应急预案管理" + v-model="isShowDialog" + width="769px" + draggable + > + <el-form + ref="ruleFormRef" + :model="ruleForm" + size="default" + label-width="120px" + > + <el-row :gutter="35"> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="预案名称" prop="teamName"> + <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="适用部门" prop="responsibleDepartment"> + <el-tree-select + v-model="treeSelect" + :data="tree" + multiple + :render-after-expand="true" + show-checkbox + /> + <el-divider /> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="预案类型" prop="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></el-option> + <el-option label="其他预案" value="common"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="危险源关联" prop="teamLevel"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="是" value="admin"></el-option> + <el-option label="否" value="common"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="预案级别" prop="teamPhone"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="公司级" value="admin"></el-option> + <el-option label="分厂级" value="common"></el-option> + <el-option label="车间级" value="common"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="编写人" prop="telephone"> + <el-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search"/> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="编写部门" prop="telephone"> + <el-tree-select + v-model="ruleForm.responsibleDepartment" + :data="data" class="w100" + placeholder="请选择"/> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="发布实施日期" prop="telephone"> +<!-- <el-tree-select--> +<!-- v-model="ruleForm.responsibleDepartment"--> +<!-- :data="data" class="w100"--> +<!-- placeholder="请选择"/>--> + <el-date-picker + v-model="value1" + type="datetime" + placeholder="选择日期时间" + /> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="应急队伍" prop="telephone"> + <el-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search"/> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-form-item label="相关附件"> + <el-upload + v-model:file-list="fileList" + class="upload-demo" + action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" + :on-change="handleChange" + > + <el-button type="primary" + >点击上传</el-button> + <template #tip> + <div class="el-upload__tip"> + 添加相关附件 + </div> + </template> + </el-upload> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="区域名称" prop="telephone"> + <el-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search"/> + </template> + </el-input> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="onCancel" size="default">关闭</el-button> + <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script lang="ts"> +import { reactive, + ref, + defineComponent +} from 'vue'; + +import type { + UploadUserFile, + FormInstance, + // FormRules, +} from 'element-plus' + +import { + Search +} from '@element-plus/icons-vue' + +export default defineComponent({ + name: 'openAdd', + components: { + + }, + setup() { + const isShowDialog = ref(false) + + const ruleFormRef = ref<FormInstance>() + //定义表单 + const ruleForm = reactive({ + teamName: '', // 队伍名称 + teamLeader: '', //队伍负责人 + department: [], // 负责人部门 + phone: '', // 负责人手机 + telephone: '', // 固定电话 + }); + // 打开弹窗 + const openDialog = () => { + // state.ruleForm = row; + isShowDialog.value = true; + }; + // 关闭弹窗 + const closeDialog = () => { + isShowDialog.value = false; + }; + // 取消 + const onCancel = () => { + closeDialog(); + }; + //日期选择器 + const value1 = ref('') + // 上传附件 + const fileList = ref<UploadUserFile[]>([]) + // 可选择树 + const treeSelect = ref() + const tree = [ + { + value: '1', + label: 'Level one 1', + children: [ + { + value: '1-1', + label: 'Level two 1-1', + children: [ + { + value: '1-1-1', + label: 'Level three 1-1-1', + }, + ], + }, + ], + }, + { + value: '2', + label: 'Level one 2', + children: [ + { + value: '2-1', + label: 'Level two 2-1', + children: [ + { + value: '2-1-1', + label: 'Level three 2-1-1', + }, + ], + }, + { + value: '2-2', + label: 'Level two 2-2', + children: [ + { + value: '2-2-1', + label: 'Level three 2-2-1', + }, + ], + }, + ], + }, + { + value: '3', + label: 'Level one 3', + children: [ + { + value: '3-1', + label: 'Level two 3-1', + children: [ + { + value: '3-1-1', + label: 'Level three 3-1-1', + }, + ], + }, + { + value: '3-2', + label: 'Level two 3-2', + children: [ + { + value: '3-2-1', + label: 'Level three 3-2-1', + }, + ], + }, + ], + }, + ] + //定义树形下拉框 + const responsibleDepartment = ref() + const data = [ + { + value: '1', + label: '广汇能源综合物流发展有限责任公司', + children: [ + { + value: '1-1', + label: '经营班子', + children: [], + }, + ], + }, + { + value: '2', + label: '生产运行部', + children: [ + { + value: '2-1', + label: '灌装一班', + children: [] + }, + { + value: '2-2', + label: '工艺四班', + children: [], + }, + ], + }, + { + value: '3', + label: '设备部', + children: [ + { + value: '3-1', + label: '仪表班', + children: [], + }, + { + value: '3-2', + label: '机修班', + children: [], + }, + ], + }, + ] + // 必填项提示 + // const rules = reactive<FormRules>({ + // teamName: [ + // { + // required: true, + // message: '队伍名称不能为空', + // trigger: 'change', + // }, + // ], + // teamLevel: [ + // { + // required: true, + // message: '队伍级别不能为空', + // trigger: 'change', + // }, + // ], + // teamLeader: [ + // { + // required: true, + // message: '队伍负责人不能为空', + // trigger: 'change', + // }, + // ], + // responsibleDepartment: [ + // { + // required: true, + // message: '负责人部门不能为空', + // trigger: 'change', + // }, + // ], + // teamPhone: [ + // { + // required: true, + // message: '负责人手机不能为空', + // trigger: 'change', + // }, + // ], + // telephone: [ + // { + // required: true, + // message: '固定电话不能为空', + // trigger: 'change', + // }, + // ], + // }) + // 表单提交验证必填项 + const submitForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + console.log('submit!') + } else { + console.log('error submit!', fields) + } + }) + } + return { + openDialog, + closeDialog, + isShowDialog, + onCancel, + fileList, + responsibleDepartment, + data, + Search, + ruleForm, + value1, + treeSelect, + tree, + ruleFormRef, + submitForm, + // rules, + }; + }, +}); +</script> +<style scoped lang="scss"> +.textarea{ + height: 168px!important; +} +.textarea ::v-deep .el-textarea__inner{ + height: 168px!important; +} +::v-deep .el-table__cell { + font-weight: 400; +} +.el-divider--horizontal{ + height: 0; + margin: 0; + border-top: transparent; +} +.el-select{ + width: 100%; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/panManagement/component/openEdit.vue b/src/views/contingencyManagement/panManagement/component/openEdit.vue new file mode 100644 index 0000000..dcafa12 --- /dev/null +++ b/src/views/contingencyManagement/panManagement/component/openEdit.vue @@ -0,0 +1,460 @@ +<template> + <div class="system-edit-user-container"> + <el-dialog title="编辑应急队伍管理" v-model="isShowDialog" width="769px"> + <el-form + ref="ruleFormRef" + :rules="rules" + :model="ruleForm" + size="default" + label-width="120px" + > + <el-row :gutter="35"> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="队伍名称" prop="teamName"> + <el-input v-model="ruleForm.teamName"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="队伍级别" prop="teamLevel"> + <el-select v-model="ruleForm.teamLevel" class="w100"> + <el-option label="公司" value="admin"></el-option> + <el-option label="分厂-车间" value="common"></el-option> + <el-option label="工序-班组等" value="shang"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="队伍负责人" prop="teamLeader"> + <el-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" @click="openUser"/> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="负责人部门" prop="responsibleDepartment"> + <el-tree-select v-model="ruleForm.responsibleDepartment" :data="data" class="w100"/> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="负责人手机" prop="teamPhone"> + <el-input v-model="ruleForm.teamPhone"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="固定电话" prop="telephone"> + <el-input v-model="ruleForm.telephone"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-form-item label="队伍描述"> + <el-input + class="textarea" + v-model="ruleForm.describe" + type="textarea" + maxlength="150" + placeholder="请填写队伍描述" + ></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-form-item label="相关附件"> + <el-upload + v-model:file-list="fileList" + class="upload-demo" + action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" + :on-change="handleChange" + > + <el-button type="primary">点击上传</el-button> + <template #tip> + <div class="el-upload__tip"> + 添加相关附件 + </div> + </template> + </el-upload> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="应急队伍人员" name="first"> + <el-button type="primary" size="default" @click="onAddEmergencyPersonnel">新增</el-button> + <el-table + :data="tableData" + style="width: 100%;margin-top: 15px;" + ref="multipleTableRef" + :header-cell-style="{background:'#f6f7fa',color:'#909399'}" + > + <el-table-column prop="jobNumber" 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 size="small" type="primary" text="plain" >查看 + </el-button> + <el-button size="small" type="primary" text="plain" @click="onEditEmergencyPersonnel(scope.row)" style="margin-right: 5px;">编辑 + </el-button> + <el-button size="small" type="primary" text="plain" style="margin-right: 5px;">删除 + </el-button> + </template> + </el-table-column> + </el-table> + </el-tab-pane> + </el-tabs> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="onCancel" size="default">关闭</el-button> + <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button> + </span> + </template> + </el-dialog> + <userSelections ref="userRef"/> + <AddEmergencyPersonnel ref="addRef" /> + <EditEmergencyPersonnel ref="editRef" /> + </div> +</template> + +<script lang="ts"> +import { + reactive, + toRefs, + ref, + onMounted, + defineComponent +} from 'vue'; +import type { + UploadUserFile, + TabsPaneContext, + FormInstance, + FormRules, + ElTable, +} from 'element-plus' +import { + Search +} from '@element-plus/icons-vue' +import userSelections from "/@/components/userSelections/index.vue" +import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue"; +import EditEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/editEmergencyPersonnel.vue"; +// 定义表格数据类型 +interface User { + personnelName: string + jobNumber: string + phone: string; + position: string; +} +// 定义接口来定义对象的类型 +interface TableDataRow { + // userName: string; + // userNickname: string; + // roleSign: string; + // department: string[]; + // phone: string; + // email: string; +} +// 定义接口来定义对象的类型 +interface DeptData { + deptName: string; + createTime: string; + status: boolean; + sort: number | string; + describe: string; + id: number; + children?: DeptData[]; +} +// 定义接口来定义对象的类型 +interface RuleFormRow { + // teamName: string; + // teamLevel: string; + // teamLeader: string; + // responsibleDepartment: any + // teamPhone: string; + // telephone: string; + // describe: string; + selectPeople:string + jobNumber: string; + personnelName: string; + personnelGender: string; + phone: string; + position: string; +} +interface UserState { + isShowDialog: boolean; + ruleForm: RuleFormRow; + deptData: Array<DeptData>; +} + +export default defineComponent({ + name: 'openEdit', + components: { + userSelections, + AddEmergencyPersonnel, + EditEmergencyPersonnel + }, + setup() { + const state = reactive<UserState>({ + isShowDialog: false, + ruleForm: { + selectPeople:'111', //选择人员 + jobNumber: '', // 人员工号 + phone: '', // 手机号码 + personnelGender: '', //人员性别 + position: '', //职位 + personnelName: '', // 人员名称 + }, + deptData: [], // 部门数据 + }); + + // 关闭弹窗 + const closeDialog = () => { + state.isShowDialog = false; + }; + // 取消 + const onCancel = () => { + closeDialog(); + }; + // // 新增 + // const onSubmit = () => { + // closeDialog(); + // }; + // 初始化部门数据 + const initTableData = () => { + state.deptData.push({ + deptName: 'vueNextAdmin', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '顶级部门', + id: Math.random(), + children: [ + { + deptName: 'IT外包服务', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '总部', + id: Math.random(), + }, + { + deptName: '资本控股', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '分部', + id: Math.random(), + }, + ], + }); + }; + // 页面加载时 + onMounted(() => { + initTableData(); + }); + // 上传附件 + const fileList = ref<UploadUserFile[]>([]) + + //定义树形下拉框 + const responsibleDepartment = ref() + const data = [ + { + value: '1', + label: '广汇能源综合物流发展有限责任公司', + children: [ + { + value: '1-1', + label: '经营班子', + children: [], + }, + ], + }, + { + value: '2', + label: '生产运行部', + children: [ + { + value: '2-1', + label: '灌装一班', + children: [] + }, + { + value: '2-2', + label: '工艺四班', + children: [], + }, + ], + }, + { + value: '3', + label: '设备部', + children: [ + { + value: '3-1', + label: '仪表班', + children: [], + }, + { + value: '3-2', + label: '机修班', + children: [], + }, + ], + }, + ] + //定义tabs切换 + const activeName = ref('first') + + const handleClick = (tab: TabsPaneContext, event: Event) => { + console.log(tab, event) + } + //添加队伍负责人弹窗 + const addRef = ref(); + const onAddEmergencyPersonnel = () => { + addRef.value.openDialog(); + }; + + //定义表格数据 + const multipleTableRef = ref<InstanceType<typeof ElTable>>() + const multipleSelection = ref<User[]>([]) + const tableData: User[] = [ + { + personnelName: '张志刚', + jobNumber: '1037', + position: '副组长', + phone: '13673321356', + }, + { + personnelName: '张志刚', + jobNumber: '1037', + position: '副组长', + phone: '13673321356', + }, + { + personnelName: '张志刚', + jobNumber: '1037', + position: '副组长', + phone: '13673321356', + }, + { + personnelName: '张志刚', + jobNumber: '1037', + position: '副组长', + phone: '13673321356', + } + ] + // 必填项提示 + const rules = reactive<FormRules>({ + teamName: [ + { + required: true, + message: '队伍名称不能为空', + trigger: 'change', + }, + ], + teamLevel: [ + { + required: true, + message: '队伍级别不能为空', + trigger: 'change', + }, + ], + teamLeader: [ + { + required: true, + message: '队伍负责人不能为空', + trigger: 'change', + }, + ], + responsibleDepartment: [ + { + required: true, + message: '负责人部门不能为空', + trigger: 'change', + }, + ], + teamPhone: [ + { + required: true, + message: '负责人手机不能为空', + trigger: 'change', + }, + ], + telephone: [ + { + required: true, + message: '固定电话不能为空', + trigger: 'change', + }, + ], + }) + + // 打开用户选择弹窗 + const userRef = ref(); + const openUser = () => { + userRef.value.openDialog(); + }; + + const ruleFormRef = ref<FormInstance>() + // 打开弹窗 + const openDialog = (row: RuleFormRow) => { + state.ruleForm = row; + state.isShowDialog = true; + }; + // 表单提交验证必填项 + const submitForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + console.log('submit!') + } else { + console.log('error submit!', fields) + } + }) + } + //表格编辑弹窗 + const editRef = ref(); + const onEditEmergencyPersonnel = (row: TableDataRow) => { + editRef.value.openDialog(row); + }; + return { + openDialog, + closeDialog, + onCancel, + // onSubmit, + fileList, + responsibleDepartment, + data, + activeName, + handleClick, + multipleSelection, + onAddEmergencyPersonnel, + onEditEmergencyPersonnel, + addRef, + editRef, + submitForm, + Search, + rules, + ruleFormRef, + tableData, + multipleTableRef, + openUser, + userRef, + ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.textarea{ + height: 168px!important; +} +.textarea ::v-deep .el-textarea__inner{ + height: 168px!important; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/panManagement/component/openSee.vue b/src/views/contingencyManagement/panManagement/component/openSee.vue new file mode 100644 index 0000000..d5f5ff3 --- /dev/null +++ b/src/views/contingencyManagement/panManagement/component/openSee.vue @@ -0,0 +1,354 @@ +<template> + <div class="system-edit-user-container"> + <el-dialog + title="查看应急队伍管理" + v-model="isShowDialog" + width="769px" + draggable + > + <el-form :model="ruleForm" size="default" label-width="90px"> + <el-row :gutter="35"> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="队伍名称"> + <el-input v-model="ruleForm.teamName" :disabled="true"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="队伍级别"> + <el-select v-model="ruleForm.teamLevel" :disabled="true" class="w100"> + <el-option label="公司" value="admin"></el-option> + <el-option label="分厂-车间" value="common"></el-option> + <el-option label="工序-班组等" value="shang"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="队伍负责人"> + <el-input + v-model="ruleForm.teamLeader" + placeholder="Please input" + class="input-with-select" + :disabled="true" + > + <template #append> + <el-button :icon="Search"/> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="负责人部门"> + <el-tree-select v-model="ruleForm.responsibleDepartment" :data="data" :disabled="true" class="w100"/> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="负责人手机"> + <el-input v-model="ruleForm.teamPhone" :disabled="true"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="固定电话"> + <el-input v-model="ruleForm.telephone" :disabled="true"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-form-item label="队伍描述"> + <el-input class="textarea" v-model="ruleForm.describe" type="textarea" :disabled="true" maxlength="150"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-form-item label="相关附件"> + <el-upload + v-model:file-list="fileList" + class="upload-demo" + action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" + :on-change="handleChange" + > + <el-button type="primary" disabled + >点击上传</el-button> + <template #tip> + <div class="el-upload__tip"> + 添加相关附件 + </div> + </template> + </el-upload> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="应急队伍人员" name="first"> + <el-button type="primary" size="default" disabled>新增</el-button> + <el-table + :data="tableData" + style="width: 100%;margin-top: 15px;" + ref="multipleTableRef" + :header-cell-style="{background:'#f6f7fa',color:'#909399'}" + > + <el-table-column prop="jobNo" label="人员工号" show-overflow-tooltip></el-table-column> + <el-table-column prop="personnelName" label="人员名称" show-overflow-tooltip></el-table-column> + <el-table-column prop="phone" label="手机号码" show-overflow-tooltip></el-table-column> + <el-table-column prop="position" label="职位" show-overflow-tooltip></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-tab-pane> + </el-tabs> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="onCancel" size="default">关闭</el-button> + </span> + </template> + </el-dialog> +<!-- <AddTeamLeader ref="addRef" />--> + </div> +</template> + +<script lang="ts"> +import { reactive, toRefs, ref, onMounted, defineComponent } from 'vue'; +import type { + UploadUserFile, + TabsPaneContext, +} from 'element-plus' +import { + Search +} from '@element-plus/icons-vue' +// import AddTeamLeader from '/@/views/contingency/component/addEmergencyPersonnel.vue'; +// 定义接口来定义对象的类型 +interface DeptData { + deptName: string; + createTime: string; + status: boolean; + sort: number | string; + describe: string; + id: number; + children?: DeptData[]; +} +interface RuleFormRow { + teamName: string; + teamLevel: string; + teamLeader: string; + department: any; + phone: string; + telephone: string; + describe: string; +} +interface UserState { + isShowDialog: boolean; + ruleForm: RuleFormRow; + deptData: Array<DeptData>; +} +// 定义表格数据类型 +interface User { + personnelName: string + jobNo: string + phone: string; + position: string; +} +// // 定义表格数据类型 +// interface Team { +// personnelName: string +// teamLevel: string +// teamDescription: string +// teamPhone: string +// phone: string; +// describe: string; +// responsibleDepartment: string +// } +export default defineComponent({ + name: 'openSee', + components: { + // Search, + }, + setup() { + const state = reactive<UserState>({ + isShowDialog: false, + ruleForm: { + teamName: '', // 队伍名称 + teamLevel: '', // 队伍级别 + teamLeader: '', //队伍负责人 + department: [], // 负责人部门 + phone: '', // 负责人手机 + telephone: '', // 固定电话 + describe: '', // 队伍描述 + }, + deptData: [], // 部门数据 + }); + // 打开弹窗 + const openDialog = (row: RuleFormRow) => { + state.ruleForm = row; + state.isShowDialog = true; + }; + // 关闭弹窗 + const closeDialog = () => { + state.isShowDialog = false; + }; + // 取消 + const onCancel = () => { + closeDialog(); + }; + // 初始化部门数据 + const initTableData = () => { + state.deptData.push({ + deptName: 'vueNextAdmin', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '顶级部门', + id: Math.random(), + children: [ + { + deptName: 'IT外包服务', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '总部', + id: Math.random(), + }, + { + deptName: '资本控股', + createTime: new Date().toLocaleString(), + status: true, + sort: Math.random(), + describe: '分部', + id: Math.random(), + }, + ], + }); + }; + // 页面加载时 + onMounted(() => { + initTableData(); + }); + // 上传附件 + const fileList = ref<UploadUserFile[]>([]) + + //定义树形下拉框 + const responsibleDepartment = ref() + const data = [ + { + value: '1', + label: '广汇能源综合物流发展有限责任公司', + children: [ + { + value: '1-1', + label: '经营班子', + children: [], + }, + ], + }, + { + value: '2', + label: '生产运行部', + children: [ + { + value: '2-1', + label: '灌装一班', + children: [] + }, + { + value: '2-2', + label: '工艺四班', + children: [], + }, + ], + }, + { + value: '3', + label: '设备部', + children: [ + { + value: '3-1', + label: '仪表班', + children: [], + }, + { + value: '3-2', + label: '机修班', + children: [], + }, + ], + }, + ] + //定义tabs切换 + const activeName = ref('first') + + const handleClick = (tab: TabsPaneContext, event: Event) => { + console.log(tab, event) + } + + //定义表格数据 + const multipleSelection = ref<User[]>([]) + const tableData: User[] = [ + { + personnelName: '张志刚', + jobNo: '1037', + position: '副组长', + phone: '13673321356', + }, + { + personnelName: '张志刚', + jobNo: '1037', + position: '副组长', + phone: '13673321356', + }, + { + personnelName: '张志刚', + jobNo: '1037', + position: '副组长', + phone: '13673321356', + }, + { + personnelName: '张志刚', + jobNo: '1037', + position: '副组长', + phone: '13673321356', + } + ] + + // //添加队伍负责人 + // const addRef = ref(); + // //添加队伍负责人弹窗 + // const onAddTeamLeader = () => { + // addRef.value.openDialog(); + // }; + return { + openDialog, + closeDialog, + onCancel, + fileList, + responsibleDepartment, + data, + activeName, + handleClick, + tableData, + multipleSelection, + Search, + // addRef, + // onAddTeamLeader, + ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.textarea{ + height: 168px!important; +} +.textarea ::v-deep .el-textarea__inner{ + height: 168px!important; +} +::v-deep .el-table__cell { + font-weight: 400; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/panManagement/component/upData.vue b/src/views/contingencyManagement/panManagement/component/upData.vue new file mode 100644 index 0000000..07a7958 --- /dev/null +++ b/src/views/contingencyManagement/panManagement/component/upData.vue @@ -0,0 +1,109 @@ +<template> + <el-dialog + v-model="dialogVisible" + title="导入Excel" + width="50%" + draggable + > + <el-upload + v-model:file-list="fileList" + class="upload-demo" + action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" + multiple + :on-preview="handlePreview" + :on-remove="handleRemove" + :before-remove="beforeRemove" + :limit="3" + :on-exceed="handleExceed" + > + <el-button size="default">下载模板</el-button> + <el-button size="default" type="primary">点击上传</el-button> + <template #tip> + <div class="el-upload__tip"> + 只允许导入“xls”或“xlsx”格式文件! + </div> + </template> + </el-upload> + </el-dialog> +</template> +<script lang="ts"> +import { ref, + defineComponent, +} from "vue"; +import { + ElMessage, + ElMessageBox +} from "element-plus"; +import type { + UploadProps, + UploadUserFile, +} from "element-plus"; + +export default defineComponent({ + setup() { + let dialogVisible =ref<boolean>(false) + const fileList = ref<UploadUserFile[]>([ + // { + // name: "element-plus-logo.svg", + // url: "https://element-plus.org/images/element-plus-logo.svg", + // }, + // { + // name: "element-plus-logo2.svg", + // url: "https://element-plus.org/images/element-plus-logo.svg", + // }, + ]); + + const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => { + console.log(file, uploadFiles); + }; + + const handlePreview: UploadProps["onPreview"] = (uploadFile) => { + console.log(uploadFile); + }; + + const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => { + ElMessage.warning( + `The limit is 3, you selected ${ + files.length + } files this time, add up to ${ + files.length + uploadFiles.length + } totally` + ); + }; + + const beforeRemove: UploadProps["beforeRemove"] = ( + uploadFile, + uploadFiles + ) => { + return ElMessageBox.confirm( + `Cancel the transfert of ${uploadFile.name} ?` + ).then( + () => true, + () => false + ); + }; + // 打开弹窗 + const openDialog = (type:string,value:any,projectList: any,projectId:string) => { + dialogVisible.value=true + } + return { + dialogVisible, + fileList, + handleRemove, + handlePreview, + handleExceed, + beforeRemove, + openDialog, + }; + }, +}); +</script> +<style scoped lang="scss"> +.el-upload__tip{ + margin-left: 100px; + margin-top: 20px; +} +::v-deep .el-dialog__header{ + border-bottom: 1px solid #e8e8e8; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/panManagement/index.vue b/src/views/contingencyManagement/panManagement/index.vue new file mode 100644 index 0000000..05980d0 --- /dev/null +++ b/src/views/contingencyManagement/panManagement/index.vue @@ -0,0 +1,389 @@ +<template> + <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="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></el-option> + <el-option label="其他预案" value="common"></el-option> + </el-select> + <el-button size="default" type="primary" class="ml10"> + 查询 + </el-button> + <el-button size="default" class="ml10" @click="submitReset"> + 重置 + </el-button> + </div> + <div class="button_Line"> + <div class="button_Left"> + <el-button size="default" type="primary" @click="onOpenAdd"> + <el-icon> + <Plus /> + </el-icon>新建 + </el-button> + <el-button size="default" type="warning" plain disabled> + <el-icon> + <Edit /> + </el-icon>修改 + </el-button> + <el-button size="default" type="danger" plain disabled> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + <el-button size="default" type="primary" @click="onOpenAdd"> + 废止库 + </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> + <el-table + :data="tableData" + style="width: 100%" + ref="multipleTableRef" + > + <el-table-column + type="selection" + width="55" + /> + <el-table-column prop="teamName" label="预案名称" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="teamLevel" label="预案类型" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="teamDescription" label="预案级别" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="phone" label="发布实施日期" show-overflow-tooltip sortable></el-table-column> + <el-table-column label="操作" width="260" align="center"> + <template #default="scope"> + <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="dialogFormVisible = true"> + <el-icon style="margin-right: 5px;"> + <VideoPlay /> + </el-icon>启动 + </el-button> + <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary"> + <el-icon style="margin-right: 5px;"> + <VideoPause /> + </el-icon>废止 + </el-button> + <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary"> + <el-icon style="margin-right: 5px;"> + <EditPen /> + </el-icon>修改 + </el-button> + <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary"> + 发起审批 + </el-button> + <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + </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>--> + </el-card> +<!-- <OpenSee ref="seeRef" />--> + <OpenAdd ref="addRef" /> + <OpenEdit ref="editRef" /> + <upData ref="upShow"></upData> + <el-dialog v-model="dialogFormVisible" width="30%" title="启动"> + <el-form :model="form" label-width="80px"> + <el-form-item label="备注" > + <el-input v-model="form.remarks" type="textarea" autocomplete="off" /> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="dialogFormVisible = false">取消</el-button> + <el-button type="primary" @click="dialogFormVisible = false" + >确定</el-button + > + </span> + </template> + </el-dialog> + </div> +</template> + +<script lang="ts"> +import { + // toRefs, + reactive, + // onMounted, + ref, + defineComponent +} from 'vue'; +import { + ElMessageBox, + ElMessage, + ElTable, +} from 'element-plus'; +import { Plus, + Edit, + Delete, + Upload, + 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 UpData from '/@/views/contingencyManagement/panManagement/component/upData.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', + components: { + OpenAdd, + OpenSee, + OpenEdit, + View, + EditPen, + Plus, + Edit, + Delete, + Upload, + Download, + Refresh, + VideoPause, + VideoPlay, + UpData + }, + setup() { + // const seeRef = ref(); + const editRef = ref(); + // 选择框 + // const value = ref(''); + // const options = + // { + // value: 'Option1', + // label: 'Option1', + // }; + const multipleTableRef = ref<InstanceType<typeof ElTable>>() + const multipleSelection = ref<User[]>([]) + + // 上传 + const upShow=ref() + const upButton=()=>{ + upShow.value.openDialog() + } + // 定义表格数据 + const tableData: User[] = [ + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + }, + { + teamName: '应急救援组', + teamLevel: '公司', + teamDescription: '实施抢险抢险的应急方案和措施实施 ;', + teamPhone: '051383830321', + phone: '13603812900', + describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + + '(2)负责现场被困人员、受伤人员抢救工作;\n' + + '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + + '(4)抢险抢修或救援结束后,对结果进行复查和评估。', + responsibleDepartment: '仪表班', + teamLeader: '王磊', + } + ] + //查看用户弹窗 + // const onOpenSee = (row: TableDataRow) => { + // seeRef.value.openDialog(row); + // }; + // 启动弹窗 + const dialogTableVisible = ref(false) + const dialogFormVisible = ref(false) + const form = reactive({ + remarks: '', + }) + // 打开新增用户弹窗 + const addRef = ref(); + const onOpenAdd = () => { + addRef.value.openDialog(); + }; + // 打开修改用户弹窗 + const onOpenEdit = (row: TableDataRow) => { + editRef.value.openDialog(row); + }; + // 删除用户 + const onRowDel = (row: TableDataRow) => { + ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + ElMessage.success('删除成功'); + }) + .catch(() => {}); + }; + // 分页改变 + // const onHandleSizeChange = (val: number) => { + // state.tableData.param.pageSize = val; + // }; + // // 分页改变 + // const onHandleCurrentChange = (val: number) => { + // state.tableData.param.pageNum = val; + // }; + // 页面加载时 + // onMounted(() => { + // initTableData(); + // }); + return { + // value, + // options, + multipleSelection, + multipleTableRef, + upButton, + upShow, + tableData, + // onOpenSee, //查看 + dialogTableVisible, + dialogFormVisible, + form, + // seeRef, + onOpenEdit, //编辑 + editRef, + onOpenAdd, //新增 + addRef, + onRowDel, + // onHandleSizeChange, + // onHandleCurrentChange, + // ...toRefs(state), + }; + }, +}); +</script> +<style scoped lang="scss"> +.table_Box{ + padding: 20px; + background-color: #fff; +} +.tableForm{ + margin-top: 10px; +} +/*按钮行*/ +.button_Line{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.el-button--text { + margin-right: 15px; +} +.el-select { + width: 300px; +} +.el-input { + width: 300px; +} +.dialog-footer button:first-child { + margin-right: 10px; +} +//弹窗底部边框线 +::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; +} +</style> \ No newline at end of file -- Gitblit v1.9.2