feat(wms): 新增报表导出文件管理功能
新增报表导出文件管理模块，包含后端接口和前端页面 在各类报表页面添加保存报表功能 优化CoilSelector和CoilCard组件显示 调整分页大小和表格高度 统一各产线报表配置 修复文件预览组件高度问题
This commit is contained in:
砂糖
379
klp-ui/src/views/wms/report/export/index.vue
Normal file
379
klp-ui/src/views/wms/report/export/index.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<drag-resize-panel direction="horizontal" :initialSize="400" :minSize="200" :maxSize="600">
|
||||
<!-- 左侧文件列表 -->
|
||||
<template slot="panelA">
|
||||
<div class="left-panel">
|
||||
<el-input v-model="queryParams.reportTitle" placeholder="请输入报表标题" clearable @change="handleQuery"
|
||||
size="small" />
|
||||
<!-- 自定义列表样式 -->
|
||||
<div class="custom-list" v-loading="loading" style="height: calc(100% - 140px); overflow-y: auto;">
|
||||
<div v-for="item in exportFileList" :key="item.id" class="list-item" @click="handleRowClick(item)"
|
||||
:class="{ 'active': form.id === item.id }">
|
||||
<div class="item-header">
|
||||
<div class="item-title">{{ item.reportTitle }}</div>
|
||||
<div class="item-actions">
|
||||
<el-button size="mini" type="text" @click.stop="handleDelete(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-meta">
|
||||
<span class="meta-value" v-if="item.reportType">#{{ item.reportType }}</span>
|
||||
<span class="meta-value" v-if="item.productionLine">#{{ item.productionLine }}</span>
|
||||
<span class="meta-value">{{ parseTime(item.createTime, '{y}.{m}.{d}') }}</span>
|
||||
<span class="meta-value">{{ item.createBy }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="exportFileList.length === 0" class="empty-list">
|
||||
<el-empty description="暂无报表文件" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize" @pagination="getList" style="margin-top: 10px;" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 右侧编辑和预览 -->
|
||||
<template slot="panelB">
|
||||
<div class="right-panel" v-if="form.id" v-loading="rightLoading">
|
||||
<div class="panel-header">
|
||||
<el-input v-model="form.reportTitle" @change="handleSimpleUpdate" size="small" placeholder="请输入报表标题" />
|
||||
<el-button type="primary" icon="el-icon-download" @click="handleExport">下载</el-button>
|
||||
</div>
|
||||
|
||||
<!-- Excel预览 -->
|
||||
<div v-if="form.attachment" class="preview-section">
|
||||
<xlsx-preview :src="form.attachment" height="calc(100vh - 180px)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-empty v-else description="点击左侧选择报表文件查看" v-loading="rightLoading" />
|
||||
</template>
|
||||
</drag-resize-panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listExportFile, getExportFile, delExportFile, addExportFile, updateExportFile } from "@/api/wms/exportFile";
|
||||
import XlsxPreview from "@/components/FilePreview/preview/xlsx/index.vue";
|
||||
import DragResizePanel from "@/components/DragResizePanel/index.vue";
|
||||
|
||||
export default {
|
||||
name: "ExportFile",
|
||||
components: {
|
||||
XlsxPreview,
|
||||
DragResizePanel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 报导出文件表格数据
|
||||
exportFileList: [],
|
||||
// 标题
|
||||
title: "编辑报表文件",
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
reportTitle: undefined,
|
||||
reportName: undefined,
|
||||
reportParams: undefined,
|
||||
productionLine: undefined,
|
||||
attachment: undefined,
|
||||
reportType: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
id: undefined,
|
||||
reportTitle: undefined,
|
||||
reportName: undefined,
|
||||
reportParams: undefined,
|
||||
productionLine: undefined,
|
||||
attachment: undefined,
|
||||
reportType: undefined,
|
||||
createBy: undefined,
|
||||
createTime: undefined,
|
||||
updateBy: undefined,
|
||||
updateTime: undefined,
|
||||
remark: undefined,
|
||||
delFlag: undefined
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
reportTitle: [
|
||||
{ required: true, message: "报表标题不能为空", trigger: "blur" }
|
||||
],
|
||||
reportName: [
|
||||
{ required: true, message: "报表名称不能为空", trigger: "blur" }
|
||||
],
|
||||
reportParams: [
|
||||
{ required: true, message: "报表查询参数不能为空", trigger: "blur" }
|
||||
],
|
||||
productionLine: [
|
||||
{ required: true, message: "相关产线不能为空", trigger: "blur" }
|
||||
],
|
||||
attachment: [
|
||||
{ required: true, message: "附件不能为空", trigger: "blur" }
|
||||
],
|
||||
reportType: [
|
||||
{ required: true, message: "报表类型不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
rightLoading: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询报导出文件列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listExportFile(this.queryParams).then(response => {
|
||||
this.exportFileList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
reportTitle: undefined,
|
||||
reportName: undefined,
|
||||
reportParams: undefined,
|
||||
productionLine: undefined,
|
||||
attachment: undefined,
|
||||
reportType: undefined,
|
||||
createBy: undefined,
|
||||
createTime: undefined,
|
||||
updateBy: undefined,
|
||||
updateTime: undefined,
|
||||
remark: undefined,
|
||||
delFlag: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 行点击事件 */
|
||||
handleRowClick(row) {
|
||||
this.rightLoading = true;
|
||||
// this.loading = true;
|
||||
getExportFile(row.id).then(response => {
|
||||
this.rightLoading = false;
|
||||
this.form = response.data;
|
||||
this.title = "修改报表文件";
|
||||
});
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.title = "添加报表文件";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
getExportFile(row.id).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.title = "修改报表文件";
|
||||
});
|
||||
},
|
||||
/** 简单更新按钮操作 */
|
||||
handleSimpleUpdate() {
|
||||
// this.submitForm();
|
||||
updateExportFile(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.id != null) {
|
||||
updateExportFile(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addExportFile(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id;
|
||||
this.$modal.confirm('是否确认删除报导出文件编号为"' + ids + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delExportFile(ids);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.reset();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.$download.oss(this.form.ossId)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
height: calc(100vh - 84px);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.panel-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 自定义列表样式 */
|
||||
.custom-list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e4e7ed;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.list-item.active {
|
||||
border-color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-weight: 500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
color: #909399;
|
||||
border-radius: 4px;
|
||||
padding: 2px 5px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.empty-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.preview-section {
|
||||
margin-top: 30px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.preview-section h4 {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user