83 lines
4.0 KiB
Vue
83 lines
4.0 KiB
Vue
<template>
|
||
<div class="root">
|
||
<div class="search-box">
|
||
<el-input v-model="script.filterData.headline" style="width: 240px; margin-right: 10px" size="large"
|
||
placeholder="预警标题" :suffix-icon="Search" />
|
||
<el-select v-model="script.filterData.eventType" style="width: 240px; margin-right: 10px" size="large"
|
||
placeholder="预警类型" :suffix-icon="ArrowDown" :options="script.eventTypeOptions" clearable />
|
||
<el-select v-model="script.filterData.severity" style="width: 240px; margin-right: 10px" size="large"
|
||
placeholder="预警级别" :suffix-icon="ArrowDown" :options="script.severityOptions" clearable />
|
||
<el-select v-model="script.filterData.responseStatus" style="width: 240px; margin-right: 10px" size="large"
|
||
placeholder="响应情况" :suffix-icon="ArrowDown" :options="script.responseOptions" clearable />
|
||
</div>
|
||
<div class="event-box">
|
||
<el-button type="primary" @click="">生成报告</el-button>
|
||
<el-button type="primary" @click="script.openAddDialog">发布预警</el-button>
|
||
<el-button type="primary" @click="triggerFileSelect">上传线下帮扶</el-button>
|
||
<el-button type="primary" @click="script.gotoLedgerPage">线下帮扶台账</el-button>
|
||
<el-button type="primary" @click="script.openScheduleDiaog">立即排班</el-button>
|
||
<el-button type="primary" @click="script.gotoDutyPage">值班管理</el-button>
|
||
<el-button type="primary" @click="script.gotoMessagePage">消息推送设置</el-button>
|
||
<el-button type="primary" color="#952DE6" @click="">导出</el-button>
|
||
<input type="file" ref="fileInput" style="display: none" @change="handleFileSelect" accept=".*"></input>
|
||
<!-- <el-button type="primary" @click="script.gotoLedgerPage">驻地台账</el-button> -->
|
||
<!-- <el-button type="primary" @click="script.openAddDialog">上报项目</el-button> -->
|
||
</div>
|
||
<DynamicTable :dataSource="script.tableData.value" :columns="script.columns" :autoHeight="true"
|
||
:pagination="script.pagination">
|
||
|
||
</DynamicTable>
|
||
<div class="model-box">
|
||
<MyDialog v-model="script.modelVisible.value" :title="script.model?.title"
|
||
:dynamicComponent="script.model?.content" :component-props="script.model?.props"
|
||
:onConfirm="script.model?.onConfirm" :onCancel="script.model?.onCancel" ref="dialogRef"
|
||
:width="script.model?.width">
|
||
</MyDialog>
|
||
<MyDrawer v-model="script.drawerVisible.value" :title="script.drawer?.title"
|
||
:dynamicComponent="script.drawer?.content" :component-props="script.drawer?.props"
|
||
:onConfirm="script.drawer?.onConfirm" :onCancel="script.drawer?.onCancel" ref="drawerRef"
|
||
:direction="script.drawer?.direction" :size="script.drawer?.size">
|
||
</MyDrawer>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import DynamicTable from "../../../component/DynamicTable/index.js";
|
||
import { Search, ArrowDown } from "@element-plus/icons-vue";
|
||
import MyDialog from "../../../component/MyDialog/index.js";
|
||
import MyDrawer from "../../../component/MyDrawer/index.js";
|
||
import scriptFn from "./index.js";
|
||
const script = scriptFn();
|
||
const { dialogRef, drawerRef } = script;
|
||
const fileInput = ref(null);
|
||
|
||
// 触发文件选择
|
||
const triggerFileSelect = () => {
|
||
fileInput.value.click();
|
||
};
|
||
|
||
// 处理文件选择
|
||
const handleFileSelect = (event) => {
|
||
const file = event.target.files[0];
|
||
if (file) {
|
||
script.uploadFile(file);
|
||
}
|
||
// 清空input值，确保相同文件可以重复选择
|
||
event.target.value = '';
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.root {
|
||
height: 100%;
|
||
padding: 25px;
|
||
}
|
||
|
||
.event-box {
|
||
margin: 20px 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
</style> |