2 changed files with 367 additions and 0 deletions
@ -0,0 +1,15 @@
|
||||
import request from "@/api/request"; |
||||
|
||||
export function alarmNotificationPages(query) { |
||||
return request.post({ |
||||
url: `/alarm/notification/pages`, |
||||
body: query |
||||
}); |
||||
} |
||||
|
||||
export function alarmNotificationReply(data) { |
||||
return request.post({ |
||||
url: `/alarm/notification/reply`, |
||||
body: data |
||||
}); |
||||
} |
||||
@ -0,0 +1,352 @@
|
||||
<template> |
||||
<div class="container"> |
||||
<header> |
||||
<el-form :label-width="120"> |
||||
<el-row> |
||||
<el-col :span="6"> |
||||
<el-form-item label="预警类型"> |
||||
<div class="flex gap"> |
||||
<el-select |
||||
v-model="query.alarmTypeId" |
||||
style="min-width: 185px" |
||||
> |
||||
<el-option :value="-1" label="全部"/> |
||||
<el-option :value="1" label="预警问题"/> |
||||
<el-option :value="2" label="风险问题"/> |
||||
</el-select> |
||||
</div> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="预警时间"> |
||||
<date-time-range-picker-ext |
||||
v-model="query.discoveryTime" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="回复情况"> |
||||
<div class="flex gap"> |
||||
<el-select |
||||
v-model="query.replyState" |
||||
style="min-width: 185px" |
||||
> |
||||
<el-option :value="-1" label="全部"/> |
||||
<el-option :value="1" label="已回复"/> |
||||
<el-option :value="0" label="未回复"/> |
||||
</el-select> |
||||
</div> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item |
||||
label="被通知单位" |
||||
prop="involveDepartId" |
||||
:rules="{ |
||||
message: '请选择问题涉及单位', |
||||
trigger: ['blur'], |
||||
}" |
||||
> |
||||
<depart-tree-select |
||||
v-model="formData.involveDepartId" |
||||
:check-strictly="true" |
||||
@node-click=" |
||||
(row) => |
||||
(formData.involveDepartName = |
||||
row.shortName) |
||||
" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="预警内容"> |
||||
<el-input |
||||
placeholder="请输入" |
||||
v-model="query.alarmContent" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div class="flex between mt-20 mb-26"> |
||||
<div></div> |
||||
<div> |
||||
<el-button type="primary" @click="getList"> |
||||
<template #icon |
||||
> |
||||
<icon name="el-icon-Search" |
||||
/> |
||||
</template> |
||||
查询 |
||||
</el-button |
||||
> |
||||
<el-button @click="reset">重置</el-button> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
<main> |
||||
<div class="table-container" v-loading="loading"> |
||||
<el-table :data="list" ref="tableRef"> |
||||
<el-table-column |
||||
label="预警时间" |
||||
prop="alarmTime" |
||||
width="150" |
||||
/> |
||||
<el-table-column |
||||
label="预警类型" |
||||
prop="alarmType" |
||||
width="90" |
||||
/> |
||||
<el-table-column |
||||
label="被通知单位" |
||||
prop="notificationDepartName" |
||||
width="150" |
||||
/> |
||||
<el-table-column |
||||
label="预警内容" |
||||
prop="alarmContent" |
||||
/> |
||||
<el-table-column label="回复情况" width="110"> |
||||
<template #default="{ row }"> |
||||
<el-text v-if="row.replyState==1" class="mx-1">已回复</el-text> |
||||
<el-text v-else type="warning" class="mx-1">未回复</el-text> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="160"> |
||||
<template #default="{ row }"> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="handleAction(row)" |
||||
>查看详情 |
||||
</el-button> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="handleEdit(row)" |
||||
v-perms="['negative:edit']" |
||||
>立即回复 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<div class="flex end mt-8"> |
||||
<el-pagination |
||||
@size-change="getList" |
||||
@current-change="getList" |
||||
:current-page="query.current" |
||||
:page-sizes="[10, 20, 50]" |
||||
:page-size="query.size" |
||||
v-model:current-page="query.current" |
||||
layout="total, sizes, prev, pager, next" |
||||
:total="total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
</main> |
||||
<el-dialog v-model="editShow" title="回复问题" width="900px"> |
||||
<el-form label-width="148" :model="formData" ref="formRef"> |
||||
<el-form-item |
||||
label="回复问题" |
||||
prop="thingDesc" |
||||
:rules="{ |
||||
required: true, |
||||
message: '请输入回复内容', |
||||
trigger: ['blur'], |
||||
}" |
||||
> |
||||
<el-input |
||||
type="textarea" |
||||
placeholder="请输入回复内容" |
||||
v-model="formData.thingDesc" |
||||
:autosize="{ minRows: 4 }" |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<footer class="flex end"> |
||||
<el-button @click="editShow = false" size="large">取消</el-button> |
||||
<el-button type="primary" @click="handleSumbit" size="large" |
||||
>确定</el-button |
||||
> |
||||
</footer> |
||||
</el-dialog> |
||||
</div> |
||||
|
||||
</template> |
||||
<script setup> |
||||
import moment from "moment"; |
||||
import {ElLoading} from "element-plus"; |
||||
import { |
||||
alarmNotificationPages, |
||||
alarmNotificationReply |
||||
} from "@/api/work/alarm"; |
||||
import feedback from "@/utils/feedback"; |
||||
|
||||
import useCatchStore from "@/stores/modules/catch"; |
||||
|
||||
const catchStore = useCatchStore(); |
||||
|
||||
const query = ref({ |
||||
current: 1, |
||||
size: 10, |
||||
alarmTypeId: -1, |
||||
replyState: -1 |
||||
}); |
||||
|
||||
const list = ref([]); |
||||
const total = ref(0); |
||||
|
||||
const loading = ref(true); |
||||
|
||||
function getList() { |
||||
let param = { |
||||
current: query.value.current, |
||||
size: query.value.size, |
||||
} |
||||
if(query.value.alarmTypeId != -1) { |
||||
param['alarmTypeId'] = query.value.alarmTypeId |
||||
} |
||||
if(query.value.replyState != -1) { |
||||
param['replyState'] = query.value.replyState |
||||
} |
||||
if(query.value.discoveryTime != undefined && query.value.discoveryTime != null) { |
||||
param['startTime'] = query.value.discoveryTime[0] |
||||
param['endTime'] = query.value.discoveryTime[1] |
||||
} |
||||
if(formData.value.involveDepartId != undefined) { |
||||
param['notificationDepartCode'] = formData.value.involveDepartId |
||||
} |
||||
if(query.value.alarmContent != undefined) { |
||||
param['alarmContent'] = query.value.alarmContent; |
||||
} |
||||
loading.value = true; |
||||
alarmNotificationPages(param).then((data) => { |
||||
list.value = data.records; |
||||
total.value = data.total; |
||||
loading.value = false; |
||||
}); |
||||
} |
||||
|
||||
function handleTableSort(orderObj) { |
||||
if (orderObj.order) { |
||||
query.value.order = orderObj.order |
||||
query.value.orderProp = orderObj.prop |
||||
} else { |
||||
query.value.order = '' |
||||
query.value.orderProp = '' |
||||
} |
||||
getList() |
||||
} |
||||
|
||||
const tableRef = ref() |
||||
|
||||
function reset() { |
||||
query.value = { |
||||
current: 1, |
||||
size: 10, |
||||
responderKey: "name", |
||||
}; |
||||
tableRef.value.clearSort() |
||||
getList(); |
||||
// 重置路由 |
||||
router.push("/query"); |
||||
} |
||||
|
||||
const route = useRoute(); |
||||
watch( |
||||
() => route.query, |
||||
() => { |
||||
updateQuery(); |
||||
getList(); |
||||
} |
||||
); |
||||
|
||||
function updateQuery() { |
||||
if (route.query.processingStatus) { |
||||
query.value.processingStatus = [route.query.processingStatus]; |
||||
} else { |
||||
query.value.processingStatus = []; |
||||
} |
||||
if (route.query.crtTime === "today") { |
||||
query.value.crtTime = [ |
||||
moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"), |
||||
moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"), |
||||
]; |
||||
} else { |
||||
query.value.crtTime = []; |
||||
} |
||||
if (route.query.extensionFlag === "true") { |
||||
query.value.extensionFlag = true |
||||
} else { |
||||
query.value.extensionFlag = ''; |
||||
} |
||||
} |
||||
|
||||
onMounted(() => { |
||||
updateQuery(); |
||||
getList(); |
||||
}); |
||||
|
||||
const show = ref(false); |
||||
|
||||
function handleAction(row) { |
||||
show.value = true; |
||||
} |
||||
|
||||
const router = useRouter(); |
||||
|
||||
|
||||
const editShow = ref(false); |
||||
const formData = ref({}); |
||||
const formRef = ref(null); |
||||
|
||||
function handleEdit(row) { |
||||
editShow.value = true; |
||||
formData.value = {...row}; |
||||
} |
||||
|
||||
async function handleSumbit() { |
||||
await formRef.value.validate(); |
||||
let data = { |
||||
replyResultContent: formData.value.replyResultContent, |
||||
id: formData.value.id |
||||
} |
||||
await alarmNotificationReply(data); |
||||
editShow.value = false; |
||||
feedback.msgSuccess("操作成功"); |
||||
getList(); |
||||
} |
||||
|
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.form-row { |
||||
padding: 8px 0; |
||||
box-shadow: inset 0px -1px 0px 0px #ebebeb; |
||||
|
||||
label { |
||||
width: 120px; |
||||
line-height: 24px; |
||||
padding-right: 12px; |
||||
box-sizing: border-box; |
||||
text-align: right; |
||||
|
||||
& + * { |
||||
width: calc(100% - 126px); |
||||
} |
||||
} |
||||
|
||||
.btn-box { |
||||
width: 70px; |
||||
} |
||||
|
||||
.el-form-item { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.query-box { |
||||
gap: 10px 20px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue