前端
This commit is contained in:
Jimmy
186
web_ui/templates/index.html
Normal file
186
web_ui/templates/index.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<!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>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user