<template> <!-- 运维应急管理(应标) --> <div class="publicContainer"> <!-- 搜索区域 --> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> <el-form-item label="紧急情况" prop="urgentType"> <el-select clearable v-model="queryParams.urgentType" style="width: 250px" placeholder="请选择紧急情况"> <el-option v-for="item in sewageCodeList" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <!-- 按钮区域 --> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button> </el-col> <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar> </el-row> <!-- 表格 --> <el-table v-loading="tableLoading" :data="tableData" max-height="650"> <el-table-column label="序号" type="index" width="55" /> <el-table-column label="事件名称" prop="eventName" /> <el-table-column label="事件图片" prop="sysFileList" width="300"> <template #default="scope"> <el-image style="width: 60px; height: 60px; margin: 5px" v-for="i in scope.row.sysFileList" :src="i.url" :preview-src-list="[i.url]" > </el-image> <span v-if="scope.row.sysFileList.length == ''">暂无照片</span> </template> </el-table-column> <el-table-column label="事件描述" prop="eventDescribe" /> <el-table-column label="紧急程度" prop="urgentType"> <template #default="scope"> <span>{{ scope.row.urgentType == 1 ? '一般' : '紧急' }}</span> </template> </el-table-column> <el-table-column label="事件来源" prop="eventSource"> <template #default="scope"> <span>{{ scope.row.eventSource == 1 ? '运维上报' : '群众上报' }}</span> </template> </el-table-column> <el-table-column label="创建时间" prop="createTime" /> <el-table-column label="操作" width="160" class-name="small-padding fixed-width"> <template #default="scope"> <!-- <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button> <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button> --> <el-button link icon="View" type="primary" @click="handleWarn(scope.row)">发送通知</el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getDataList" /> <!-- 添加或修改弹窗 --> <el-dialog :title="dialogTitle" v-model="dialogShow" width="900px" append-to-body> <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="160px" class="publicForm"> <el-form-item label="事件名称" prop="eventName"> <el-input type="text" v-model="formData.eventName" placeholder="请输入事件名称" /> </el-form-item> <el-form-item label="事件来源" prop="eventSource"> <el-select clearable v-model="formData.eventSource" style="width: 180px" placeholder="请选择事件来源"> <el-option v-for="item in eventSourceList" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="紧急程度" prop="urgentType"> <el-select clearable v-model="formData.urgentType" style="width: 180px" placeholder="请选择紧急程度"> <el-option v-for="item in sewageCodeList" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="事件描述" prop="eventDescribe"> <el-input type="text" v-model="formData.eventDescribe" placeholder="请输入事件描述" /> </el-form-item> <el-form-item label="事件图片" prop="sysFileList"> <ImageFileUpload :limit="3" :saveFileArr="formData.sysFileList" :listType="'picture-card'" :fileType="['png', 'jpg', 'jpeg']" :refType="'devops_Emergency'" ></ImageFileUpload> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="info" @click="cancelForm">取 消</el-button> <el-button type="primary" @click="submitForm">确 定</el-button> </div> </template> </el-dialog> <!-- 通知提醒弹窗 --> <el-dialog title="通知提醒" v-model="dialogShowTZ" width="600px" append-to-body> <el-form ref="formRefTZ" :model="formDataTZ" :rules="rulesFormTZ" label-width="120px" class="publicForm"> <el-form-item label="被通知人" prop="userIdArray"> <el-select v-model="formDataTZ.userIdArray" multiple clearable placeholder="请选择被通知人"> <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" /> </el-select> </el-form-item> <el-form-item label="通知人电话:" prop="phone"> <el-input type="text" v-model="formDataTZ.phone" placeholder="请输入通知人电话" clearable maxlength="11" /> </el-form-item> <!-- <el-form-item label="通知状态" prop="msgState"> <el-select v-model="formDataTZ.msgState" placeholder="请选择通知状态"> <el-option v-for="item in infoStaticList" :key="item.id" :label="item.staticLabel" :value="item.id" /> </el-select> </el-form-item> --> <el-form-item label="通知消息" prop="noticeMsg"> <el-input type="textarea" v-model="formDataTZ.noticeMsg" placeholder="请输入通知消息" /> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="info" @click="dialogShowTZ = false">取 消</el-button> <el-button type="primary" @click="submitFormTZ">确 定</el-button> </div> </template> </el-dialog> </div> </template> <script setup> import { devopsEmergencyPage, devopsEmergencyAdd, devopsEmergencyDel, devopsEmergencyEdit } from '@/api/publicService/index'; import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传 import { projectNoticeAdd } from '@/api/publicService/index'; import { pageUser } from '@/api/system/user'; import bus from '@/utils/mitt'; const { proxy } = getCurrentInstance(); const tableData = ref([]); const tableLoading = ref(true); const total = ref(0); const dialogShow = ref(false); const dialogTitle = ref(''); const showSearch = ref(true); const dialogShowTZ = ref(false); const formDataTZ = ref({ fileList: [], msgState: '1', }); const userList = ref([]); const rulesFormTZ = ref({ userIdArray: [{ required: true, message: '请选择被通知人', trigger: 'blur' }], msgState: [{ required: true, message: '请选择通知状态', trigger: 'blur' }], noticeMsg: [{ required: true, message: '请输入通知消息', trigger: 'blur' }], phone: [ { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur', required: true, }, ], }); const eventSourceList = ref([ { label: '运维上报', value: '1', }, { label: '群众上报', value: ' 2', }, ]); const sewageCodeList = ref([ { label: '一般', value: '1', }, { label: '紧急', value: ' 2', }, ]); const allData = reactive({ formData: { sysFileList: [], }, queryParams: { pageNum: 1, pageSize: 10, sewageCode: undefined, dataTime: undefined, }, rulesForm: { eventName: [{ required: true, message: '请输入事件名称', trigger: 'blur' }], }, }); const { queryParams, formData, rulesForm } = toRefs(allData); /** 获取搜索数据列表 */ function getDataList() { tableLoading.value = true; devopsEmergencyPage(queryParams.value).then(response => { tableData.value = response.data; total.value = response.total; tableLoading.value = false; }); } /** 取消按钮 */ function cancelForm() { dialogShow.value = false; proxy.resetForm('formRef'); //清空表单 } /** 搜索按钮操作 */ function handleQuery() { queryParams.value.pageNum = 1; getDataList(); } /** 重置按钮操作 */ function resetQuery() { proxy.resetForm('queryRef'); handleQuery(); } /** 新增按钮操作 */ function handleAdd() { formData.value.sysFileList = []; formData.value.urgentType = sewageCodeList.value[0].value; formData.value.eventSource = eventSourceList.value[0].value; dialogShow.value = true; dialogTitle.value = '新增应急事件'; } /** 修改按钮操作 */ function handleUpdate(row) { dialogShow.value = true; dialogTitle.value = '修改应急事件'; formData.value = { ...row }; } /** 提交按钮 */ function submitForm() { proxy.$refs['formRef'].validate(valid => { if (valid) { console.log(formData.value, 'formData.value'); if (dialogTitle.value == '修改应急事件') { devopsEmergencyEdit(formData.value).then(response => { proxy.$modal.msgSuccess('修改成功'); dialogShow.value = false; getDataList(); }); } else { if (formData.value.id) delete formData.value.id; devopsEmergencyAdd(formData.value).then(response => { proxy.$modal.msgSuccess('新增成功'); dialogShow.value = false; getDataList(); }); } } }); } /** 删除按钮操作 */ function handleDelete(row) { const postIds = row.id; proxy.$modal .confirm('是否确认删除该数据项?') .then(function () { return devopsEmergencyDel(postIds); }) .then(() => { getDataList(); proxy.$modal.msgSuccess('删除成功'); }) .catch(() => {}); } /** 搜索用户列表 */ function getList() { pageUser().then(res => { userList.value = res.data || []; userList.value.map(item => { item.userId = String(item.userId); }); }); } // 发送报警(应标) function handleWarn(row) { dialogShowTZ.value = true; } function submitFormTZ() { proxy.$refs['formRefTZ'].validate(valid => { if (valid) { projectNoticeAdd(formDataTZ.value).then(response => { proxy.$modal.msgSuccess('通知成功'); dialogShowTZ.value = false; bus.emit('Refresh'); }); } }); } onMounted(() => { getDataList(); getList(); }); </script>