You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
8.3 KiB
236 lines
8.3 KiB
<template> |
|
<div class="container"> |
|
<header> |
|
<el-form :model="query" :label-width="120"> |
|
<el-row> |
|
<el-col :span="6"> |
|
<el-form-item label="报告类型" prop="deptId"> |
|
<el-select v-model="query.reportType" placeholder="请选择报告类型" clearable> |
|
<el-option label="周报" value="周报" /> |
|
<el-option label="月报" value="月报" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="生成时间" prop="createTime"> |
|
<el-date-picker |
|
v-model="query.createTime" |
|
value-format="YYYY-MM-DD HH:mm:ss" |
|
type="datetimerange" |
|
format="YYYY-MM-DD HH:mm:ss" |
|
range-separator="~" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<div class="flex between mb-20"> |
|
<div> |
|
<el-button type="primary" @click="show = true" |
|
>报告生成</el-button> |
|
</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> |
|
</el-form> |
|
</header> |
|
<main> |
|
<div class="table-container"> |
|
<el-table :data="list"> |
|
<el-table-column prop="createTime" label="生成时间" width="140" /> |
|
<el-table-column prop="reportType" label="报告类型" align="center" /> |
|
<el-table-column prop="statisticalTime" label="统计时间" width="340" /> |
|
<el-table-column prop="operator" label="操作人" /> |
|
<el-table-column label="状态"> |
|
<template #default="{ row }"> |
|
<span v-if="row.state === 0">生成中</span> |
|
<span v-else-if="row.state === 1">成功</span> |
|
<span v-else>失败</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作"> |
|
<template #default="{ row }"> |
|
<el-button |
|
type="primary" |
|
link |
|
@click="download(row.reportFilepath)" |
|
v-if="row.state === 1" |
|
>报告下载</el-button |
|
> |
|
<el-button |
|
type="danger" |
|
link |
|
@click="handleDelete(row.id)" |
|
>删除报告</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="flex mt-4 end"> |
|
<el-pagination |
|
@size-change="getList" |
|
@current-change="getList" |
|
:current-page="query.current" |
|
:page-sizes="[10, 20, 50]" |
|
v-model:page-size="query.size" |
|
v-model:current-page="query.current" |
|
:total="total" |
|
layout="total, sizes, prev, pager, next" |
|
/> |
|
</div> |
|
</main> |
|
</div> |
|
|
|
<el-dialog title="报告生成" v-model="show" width="1200px"> |
|
<el-form label-width="120px" ref="formRef" :model="form" :rules="rules"> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="报告类型" prop="reportType"> |
|
<el-select v-model="form.reportType" placeholder="请选择报告类型" style="width: 300px"> |
|
<el-option label="周报" value="周报" /> |
|
<el-option label="月报" value="月报" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12" v-if="form.reportType === '周报'"> |
|
<el-form-item label="统计时间" prop="reportTimeRange"> |
|
<el-date-picker |
|
v-model="form.reportTimeRange" |
|
type="datetimerange" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
value-format="YYYY-MM-DD HH:mm:ss" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12" v-if="form.reportType === '月报'"> |
|
<el-form-item label="统计时间" prop="reportTime"> |
|
<el-date-picker |
|
v-model="form.reportTime" |
|
type="month" |
|
placeholder="请选择统计月" |
|
value-format="YYYY-MM-DD" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
</el-form> |
|
<div style="height: 400px; background: #D1D1D1;"></div> |
|
<template #footer> |
|
<footer class="dialog-footer"> |
|
<el-button size="large" type="primary" @click="handleGenReport">生成报告</el-button> |
|
</footer> |
|
</template> |
|
</el-dialog> |
|
</template> |
|
<script setup> |
|
import feedback from '@/utils/feedback' |
|
const { VITE_API_URL } = process.env; |
|
import { reportList, generateReport, delReport } from '@/api/report' |
|
|
|
const query = reactive({ |
|
current: 1, |
|
size: 12 |
|
}) |
|
const total = ref(0) |
|
|
|
const list = ref([]) |
|
function getList() { |
|
reportList(query).then(data => { |
|
list.value = data.records |
|
total.value = data.total |
|
}) |
|
} |
|
getList() |
|
|
|
function reset() { |
|
delete query.reportType |
|
delete query.createTime |
|
getList() |
|
} |
|
|
|
const show = ref(false) |
|
const form = reactive({}) |
|
const formRef = ref() |
|
const rules = { |
|
reportType: [ |
|
{ |
|
required: true, |
|
message: "请选择报告类型", |
|
trigger: ["blur"] |
|
} |
|
], |
|
reportTimeRange: [ |
|
{ |
|
required: true, |
|
message: "请选择统计时间", |
|
trigger: ["blur"], |
|
}, |
|
], |
|
reportTime: [ |
|
{ |
|
required: true, |
|
message: "请选择统计时间", |
|
trigger: ["blur"], |
|
}, |
|
] |
|
} |
|
|
|
function handleGenReport() { |
|
formRef.value.validate((valid) => { |
|
if (valid) { |
|
generateReport(form).then(res => { |
|
feedback.msgSuccess('操作成功') |
|
show.value = false |
|
getList() |
|
}) |
|
} |
|
}) |
|
} |
|
|
|
function download(filepath) { |
|
window.open(`${VITE_API_URL}/api/file/stream/${filepath}`) |
|
} |
|
|
|
const handleDelete = async (id) => { |
|
await feedback.confirm('确定要删除该报告？') |
|
await delReport(id) |
|
feedback.msgSuccess('删除成功') |
|
getList() |
|
} |
|
|
|
const shortcuts = [ |
|
{ |
|
text: '本周', |
|
value: () => { |
|
const end = new Date() |
|
const start = new Date() |
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * (end.getDay() === 0? 6: end.getDay() - 1)) |
|
return [start, end] |
|
}, |
|
}, |
|
{ |
|
text: '上周', |
|
value: () => { |
|
const end = new Date() |
|
end.setTime(end.getTime() - 3600 * 1000 * 24 * (end.getDay() === 0? 6: end.getDay())) |
|
const start = new Date() |
|
start.setTime(end.getTime() - 3600 * 1000 * 24 * 6) |
|
return [start, end] |
|
} |
|
} |
|
] |
|
|
|
</script> |
|
<style lang="scss" scoped> |
|
|
|
</style> |