init: MES_Manage_View_V20 v1.1.0 项目初始化
- Vue 2.7 + Element UI + Webpack 5 前端 - SQL Server 数据库脚本 (script.sql) - 4份技术文档 (技术分析/功能映射/使用说明书/用户操作手册) - 存储过程修复 (fix_生产管理_外协报表_查询.sql)
This commit is contained in:
308
src/views/QualityManagement/QualityDetails/index.vue
Normal file
308
src/views/QualityManagement/QualityDetails/index.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<!-- 模板部分保持不变 -->
|
||||
<div>
|
||||
<el-card>
|
||||
<div>
|
||||
<span class="show-text">生产订单号:</span>
|
||||
<el-input v-model="orderNo" placeholder="请输入订单号" clearable style="width: 100px; margin-right: 10px" />
|
||||
<!-- <span class="show-text">合同号:</span>
|
||||
<el-input v-model="contractNo" placeholder="请输入合同号" clearable style="width: 130px; margin-right: 10px" /> -->
|
||||
<span class="show-text">零件编码:</span>
|
||||
<el-input v-model="productCode" placeholder="请输入零件编码" clearable style="width: 150px; margin-right: 10px" />
|
||||
<span class="show-text">零件名称:</span>
|
||||
<el-input v-model="productName" placeholder="请输入零件名称" clearable style="width: 100px; margin-right: 10px" />
|
||||
<span class="show-text">质检类型:</span>
|
||||
<el-select
|
||||
v-model="QualityStatus"
|
||||
clearable
|
||||
placeholder="请选择质检类型"
|
||||
style="width: 150px; margin-right: 10px"
|
||||
>
|
||||
<el-option label="全部" value="10" />
|
||||
<el-option label="收检" value="0" />
|
||||
<el-option label="终检" value="1" />
|
||||
<el-option label="来料检验" value="2" />
|
||||
<el-option label="退库检验" value="3" />
|
||||
</el-select>
|
||||
<span class="show-text">质检日期起:</span>
|
||||
<el-date-picker
|
||||
v-model="startDate"
|
||||
type="date"
|
||||
placeholder="选择开始日期"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 150px; margin-right: 10px" />
|
||||
<span class="show-text">质检日期止:</span>
|
||||
<el-date-picker
|
||||
v-model="endDate"
|
||||
type="date"
|
||||
placeholder="选择结束日期"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 150px; margin-right: 10px" />
|
||||
<el-button :disabled="!!loading" icon="el-icon-search" plain type="primary" @click="searchTable()">查询</el-button>
|
||||
<el-button style="width: 100px;" icon="el-icon-download" type="primary" @click="exportExcel">Excel导出</el-button>
|
||||
</div>
|
||||
|
||||
<el-tabs v-model="activeTab" type="card" class="custom-tabs">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:height="'67vh'"
|
||||
border
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
highlight-current-row
|
||||
size="mini"
|
||||
style="width: 100%;margin-top: 20px;"
|
||||
tooltip-effect="dark"
|
||||
:row-class-name="tableRowClassName"
|
||||
@row-click="handleRowClick">
|
||||
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column align="center" label="序号" type="index" width="50" fixed />
|
||||
<el-table-column align="center" prop="质检类型" label="质检类型" width="80" fixed />
|
||||
<el-table-column align="center" prop="零件编码" label="零件编码" width="220" fixed />
|
||||
<el-table-column align="center" prop="零件名称" label="零件名称" width="190" />
|
||||
<el-table-column align="center" prop="内部合同号" label="销售订单号" width="100" />
|
||||
<el-table-column align="center" prop="计划号" label="生产订单号" width="80" />
|
||||
<el-table-column align="center" prop="工序名称" label="工序名称" width="100" />
|
||||
<el-table-column align="center" prop="工位名称" label="工位名称" width="100" />
|
||||
<el-table-column align="center" prop="供应商代码" label="供应商代码" width="120" />
|
||||
<el-table-column align="center" prop="检验数量" label="检验数量" width="120" />
|
||||
<el-table-column align="center" prop="合格数" label="合格数" width="120" />
|
||||
<el-table-column align="center" prop="不合格数" label="不合格数" width="120" />
|
||||
<el-table-column align="center" prop="检测人" label="检测人" width="100" />
|
||||
<el-table-column align="center" label="检测时间" width="160">
|
||||
<template slot-scope="scope">
|
||||
{{ formatDateTime(scope.row.检测时间) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" prop="检测说明" label="检测说明" width="160"/>
|
||||
</el-table>
|
||||
|
||||
<div class="block" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:current-page="pageCurrent"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="total1"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChanges"
|
||||
@current-change="handleCurrentChanges" />
|
||||
</div>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 分页
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
total1: 0,
|
||||
|
||||
// 搜索条件
|
||||
QualityStatus:'10',
|
||||
startDate:null,
|
||||
endDate:null,
|
||||
orderNo:'',
|
||||
contractNo:'',
|
||||
productCode:'',
|
||||
productName:'',
|
||||
|
||||
|
||||
// 表格数据
|
||||
loading: false,
|
||||
activeTab: 'first',
|
||||
tableData: [],
|
||||
|
||||
// 新增相关数据
|
||||
orderList: [],
|
||||
exporting: false,
|
||||
// processList: [],
|
||||
// personnelList: [],
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.searchTable()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// ============ 表格相关方法 ============
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
if (!row.结束时间 || row.结束时间 === '') {
|
||||
return 'row-without-endtime'
|
||||
}
|
||||
return ''
|
||||
},
|
||||
|
||||
handleRowClick(row) {
|
||||
this.currentTask = row
|
||||
},
|
||||
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val
|
||||
},
|
||||
exportExcel() {
|
||||
// 校验日期是否已选择
|
||||
// if (!this.startDate || !this.endDate) {
|
||||
// this.$message.warning('请选择开始日期和结束日期')
|
||||
// return
|
||||
// }
|
||||
// // 校验开始日期不能大于结束日期
|
||||
// if (this.startDate > this.endDate) {
|
||||
// this.$message.warning('开始日期不能大于结束日期')
|
||||
// return
|
||||
// }
|
||||
const param = []
|
||||
param.push(["质检类型", this.QualityStatus]);
|
||||
param.push(["开始日期", this.startDate]);
|
||||
param.push(["结束日期", this.endDate]);
|
||||
param.push(["订单号", this.orderNo ]);
|
||||
param.push(["合同号", this.contractNo ]);
|
||||
param.push(["零件编码", this.productCode ]);
|
||||
param.push(["零件名称", this.productName ]);
|
||||
|
||||
this.exporting = true
|
||||
const Data = this.CreateData('2001', '质量管理_质检明细_导出', param)
|
||||
this.exportExcel_NPOI(Data).finally(() => {
|
||||
this.exporting = false
|
||||
})
|
||||
},
|
||||
// ============ 数据加载方法 ============
|
||||
// loadPersonnelList() {
|
||||
// var param = []
|
||||
// var Data = this.CreateData('11', '系统管理_人员管理_所有有效人员查询', param)
|
||||
// this.ExecDatabase(Data).then(response => {
|
||||
// if (response.data && response.data.length > 0) {
|
||||
// this.personnelList = response.data.map(person => ({
|
||||
// key: person.人员编号,
|
||||
// label: person.人员姓名,
|
||||
// disabled: false
|
||||
// }))
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
|
||||
// loadOrderList(orderId) {
|
||||
// var param = []
|
||||
// param.push(['订单编号', orderId])
|
||||
// var Data = this.CreateData('11', '工时校验_获取订单列表', param)
|
||||
// this.ExecDatabase(Data).then(response => {
|
||||
// this.orderList = response.data || []
|
||||
// }).catch(error => {
|
||||
// console.error('加载订单列表失败:', error)
|
||||
// this.orderList = []
|
||||
// })
|
||||
// },
|
||||
|
||||
|
||||
// loadProcessList(orderId) {
|
||||
// var param = [['订单编号', orderId]]
|
||||
// var Data = this.CreateData('11', '工时校验_获取订单工序', param)
|
||||
// this.ExecDatabase(Data).then(response => {
|
||||
// this.processList = response.data || []
|
||||
// }).catch(error => {
|
||||
// console.error('加载工序列表失败:', error)
|
||||
// this.processList = []
|
||||
// })
|
||||
// },
|
||||
|
||||
|
||||
|
||||
// ============ 分页方法 ============
|
||||
handleSizeChanges(val) {
|
||||
this.pageCurrent = 1
|
||||
this.pageSize = val
|
||||
this.searchTable()
|
||||
},
|
||||
|
||||
handleCurrentChanges(val) {
|
||||
this.pageCurrent = val
|
||||
this.searchTable()
|
||||
},
|
||||
|
||||
searchTable() {
|
||||
this.loading = true
|
||||
|
||||
var param = []
|
||||
param.push(["质检类型", this.QualityStatus]);
|
||||
param.push(["开始日期", this.startDate]);
|
||||
param.push(["结束日期", this.endDate]);
|
||||
param.push(["订单号", this.orderNo ]);
|
||||
param.push(["合同号", this.contractNo ]);
|
||||
param.push(["零件编码", this.productCode ]);
|
||||
param.push(["零件名称", this.productName ]);
|
||||
param.push(['PageCurrent', this.pageCurrent])
|
||||
param.push(['pageSize', this.pageSize])
|
||||
param.push(['PageCount', '1111', 'int', '1'])
|
||||
param.push(['ItemCount', '1111', 'int', '1'])
|
||||
|
||||
var Data = this.CreateData('11', '质量管理_质检明细_查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.tableData = response.data.result || []
|
||||
this.total1 = parseInt(response.data.output[0].ItemCount)
|
||||
this.loading = false
|
||||
}).catch(error => {
|
||||
this.$message.error('查询失败:' + error.message)
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// ============ 工具方法 ============
|
||||
|
||||
|
||||
getCurrentUser() {
|
||||
return this.$store.state.user.name
|
||||
},
|
||||
|
||||
formatDateTime(dateTime) {
|
||||
if (!dateTime) return ''
|
||||
const date = new Date(dateTime)
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false
|
||||
}).replace(/\//g, '-')
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.show-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.custom-tabs {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ::v-deep .row-without-endtime {
|
||||
background-color: #f56c6c !important;
|
||||
color: #000000 !important;
|
||||
} */
|
||||
</style>
|
||||
Reference in New Issue
Block a user