172 lines
8.8 KiB
HTML
172 lines
8.8 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 样式 -->
|
|
<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 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<style>
|
|
body { margin: 0; padding: 20px; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; background-color: #f0f2f5; }
|
|
.box-card { margin-bottom: 20px; }
|
|
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
|
.page-header h2 { margin: 0; color: #303133; }
|
|
.search-row { display: flex; gap: 15px; margin-bottom: 20px; }
|
|
.pagination-container { margin-top: 20px; text-align: right; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<el-card class="box-card">
|
|
<div class="page-header">
|
|
<h2><i class="el-icon-document" style="margin-right: 10px; color: #E6A23C;"></i>生产工单明细</h2>
|
|
<div>
|
|
<el-button type="info" plain icon="el-icon-back" @click="goBack" size="small">返回主控台</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 搜索区域 -->
|
|
<div class="search-row">
|
|
<el-input v-model="searchParams.work_orders_number" placeholder="工单号 (支持模糊搜索)" style="width: 250px" clearable @clear="handleSearch" @keyup.enter.native="handleSearch">
|
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
</el-input>
|
|
<el-input v-model="searchParams.material_name" placeholder="物料名称 (支持模糊搜索)" style="width: 250px" clearable @clear="handleSearch" @keyup.enter.native="handleSearch">
|
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
</el-input>
|
|
<el-input v-model="searchParams.material_code" placeholder="物料代码 (支持模糊搜索)" style="width: 250px" clearable @clear="handleSearch" @keyup.enter.native="handleSearch">
|
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
</el-input>
|
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
|
<el-button icon="el-icon-refresh-left" @click="resetSearch">重置</el-button>
|
|
</div>
|
|
|
|
<!-- 数据表格 -->
|
|
<el-table :data="tableData" v-loading="loading" border style="width: 100%" stripe size="small" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
|
|
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
|
|
<el-table-column prop="execution_time" label="执行时间" width="160" sortable></el-table-column>
|
|
<el-table-column prop="work_orders_number" label="工单号" width="160"></el-table-column>
|
|
<el-table-column prop="line_number" label="行号" width="60" align="center"></el-table-column>
|
|
<el-table-column prop="material_code" label="物料代码" width="120"></el-table-column>
|
|
<el-table-column prop="material_name" label="物料名称" min-width="150" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="material_specification" label="规格" min-width="150" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="warehouse_name" label="仓库" width="120" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="数量信息" align="center">
|
|
<el-table-column prop="issue_number" label="应发数量" width="90" align="right"></el-table-column>
|
|
<el-table-column prop="total_issue_number" label="已发料数量" width="100" align="right">
|
|
<template slot-scope="scope">
|
|
<span :style="{color: scope.row.total_issue_number >= scope.row.issue_number ? '#67C23A' : '#F56C6C', fontWeight: 'bold'}" v-text="scope.row.total_issue_number">
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="unit_name" label="单位" width="60" align="center"></el-table-column>
|
|
</el-table-column>
|
|
<el-table-column label="金额信息" align="center">
|
|
<el-table-column prop="cost_price" label="成本单价" width="100" align="right">
|
|
<template slot-scope="scope">
|
|
<span v-text="'¥ ' + Number(scope.row.cost_price || 0).toFixed(2)"></span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="issue_amount_total" label="发料总额" width="100" align="right">
|
|
<template slot-scope="scope">
|
|
<span style="color: #409EFF; font-weight: bold;" v-text="'¥ ' + Number(scope.row.issue_amount_total || 0).toFixed(2)"></span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="executor_user_name" label="执行人" width="100" align="center"></el-table-column>
|
|
<el-table-column prop="materials_user_name" label="领料人" width="100" align="center"></el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination-container">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[20, 50, 100, 200]"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
syncingReport: false,
|
|
tableData: [],
|
|
total: 0,
|
|
currentPage: 1,
|
|
pageSize: 50,
|
|
searchParams: {
|
|
work_orders_number: '',
|
|
material_name: '',
|
|
material_code: ''
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchData();
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
window.location.href = '/';
|
|
},
|
|
fetchData() {
|
|
this.loading = true;
|
|
|
|
const params = {
|
|
page: this.currentPage,
|
|
limit: this.pageSize,
|
|
work_orders_number: this.searchParams.work_orders_number,
|
|
material_name: this.searchParams.material_name,
|
|
material_code: this.searchParams.material_code
|
|
};
|
|
|
|
axios.get('/api/work_orders', { params })
|
|
.then(res => {
|
|
this.tableData = res.data.rows;
|
|
this.total = res.data.total;
|
|
})
|
|
.catch(err => {
|
|
this.$message.error('获取数据失败');
|
|
console.error(err);
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
handleSearch() {
|
|
this.currentPage = 1;
|
|
this.fetchData();
|
|
},
|
|
resetSearch() {
|
|
this.searchParams.work_orders_number = '';
|
|
this.searchParams.material_name = '';
|
|
this.searchParams.material_code = '';
|
|
this.handleSearch();
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.fetchData();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val;
|
|
this.fetchData();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% include "global_log.html" %}
|
|
</body>
|
|
</html> |