187 lines
7.7 KiB
HTML
187 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>收货明细报表 - 数据展示看板</title>
|
|
|
|
<!-- 引入 ElementUI (Vue的经典UI库) 样式 -->
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
|
<!-- 引入 Vue.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
|
|
<!-- 引入 ElementUI 组件库 -->
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
<!-- 引入 axios 用于发送 HTTP 请求 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f7fa;
|
|
}
|
|
.header {
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #ebeef5;
|
|
}
|
|
.header h2 {
|
|
margin: 0;
|
|
color: #303133;
|
|
}
|
|
.card {
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|
}
|
|
.pagination-container {
|
|
margin-top: 20px;
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="header">
|
|
<h2>📦 ERP 数据展示看板 - 收货明细报表</h2>
|
|
<el-button type="primary" @click="goToBomTree" icon="el-icon-data-analysis">切换至 BOM 成本雷达图</el-button>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<!-- 搜索工具栏 -->
|
|
<div style="margin-bottom: 20px;">
|
|
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
|
|
<el-form-item label="供应商名称">
|
|
<el-input v-model="searchForm.supplier_name" placeholder="支持模糊搜索" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="物料名称">
|
|
<el-input v-model="searchForm.material_name" placeholder="支持模糊搜索" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="采购订单号">
|
|
<el-input v-model="searchForm.po_code" placeholder="支持模糊搜索" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
|
|
<el-button @click="resetSearch" icon="el-icon-refresh">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- 数据表格 -->
|
|
<el-table
|
|
:data="tableData"
|
|
v-loading="loading"
|
|
border
|
|
stripe
|
|
style="width: 100%">
|
|
|
|
<el-table-column prop="receipt_time" label="收货时间" width="160" sortable></el-table-column>
|
|
<el-table-column prop="purchase_order_code" label="采购订单号" width="130"></el-table-column>
|
|
<el-table-column prop="row_no" label="行号" width="60" align="center"></el-table-column>
|
|
<el-table-column prop="material_code" label="物料代码" width="130"></el-table-column>
|
|
<el-table-column prop="material_name" label="物料名称" min-width="150" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="material_specification" label="规格" min-width="150" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="warehouse_name" label="收货仓库" width="120"></el-table-column>
|
|
<el-table-column prop="supplier_name" label="供应商名称" min-width="200" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="receive_price" label="收货单价" width="100" align="right">
|
|
<template slot-scope="scope">
|
|
<span style="color: #F56C6C; font-weight: bold;" v-pre>¥ </span><span style="color: #F56C6C; font-weight: bold;" v-text="scope.row.receive_price.toFixed(2)"></span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
<!-- 分页器 -->
|
|
<div class="pagination-container">
|
|
<el-pagination
|
|
background
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[20, 50, 100, 500]"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="totalRows">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: function() {
|
|
return {
|
|
tableData: [],
|
|
loading: false,
|
|
currentPage: 1,
|
|
pageSize: 50,
|
|
totalRows: 0,
|
|
searchForm: {
|
|
supplier_name: '',
|
|
material_name: '',
|
|
po_code: ''
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// 页面加载完成后立即拉取第一页数据
|
|
this.fetchData();
|
|
},
|
|
methods: {
|
|
goToBomTree() {
|
|
window.location.href = '/bom';
|
|
},
|
|
fetchData() {
|
|
this.loading = true;
|
|
// 构造带有搜索参数的请求 URL
|
|
const params = new URLSearchParams({
|
|
page: this.currentPage,
|
|
limit: this.pageSize,
|
|
supplier_name: this.searchForm.supplier_name,
|
|
material_name: this.searchForm.material_name,
|
|
po_code: this.searchForm.po_code
|
|
});
|
|
|
|
axios.get(`/api/receipts?${params.toString()}`)
|
|
.then(response => {
|
|
this.tableData = response.data.rows;
|
|
this.totalRows = response.data.total;
|
|
this.loading = false;
|
|
})
|
|
.catch(error => {
|
|
console.error("数据加载失败:", error);
|
|
this.$message.error('抱歉，获取数据失败了！');
|
|
this.loading = false;
|
|
});
|
|
},
|
|
handleSearch() {
|
|
this.currentPage = 1;
|
|
this.fetchData();
|
|
},
|
|
resetSearch() {
|
|
this.searchForm = {
|
|
supplier_name: '',
|
|
material_name: '',
|
|
po_code: ''
|
|
};
|
|
this.currentPage = 1;
|
|
this.fetchData();
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.fetchData();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val;
|
|
this.fetchData();
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
{% include "global_log.html" %}
|
|
</body>
|
|
</html> |