|
|
@@ -0,0 +1,264 @@
|
|
|
+<template>
|
|
|
+ <div id="inventoryBalance">
|
|
|
+ <el-card shadow="never" v-loading="loading">
|
|
|
+ <!-- 数据表格 -->
|
|
|
+ <div>
|
|
|
+ <el-form ref="form" :model="form">
|
|
|
+ <el-form-item label="日期">
|
|
|
+ <el-date-picker
|
|
|
+ @change="changeDate"
|
|
|
+ v-model="form.reportDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ele-pro-table
|
|
|
+ ref="table"
|
|
|
+ class="table"
|
|
|
+ :columns="columns"
|
|
|
+ :datasource="datasource"
|
|
|
+ height="calc(100vh - 405px)"
|
|
|
+ full-height="calc(100vh - 116px)"
|
|
|
+ tool-class="ele-toolbar-form"
|
|
|
+ :needPage="false"
|
|
|
+ :cache-key="cacheKeyUrl"
|
|
|
+ >
|
|
|
+ </ele-pro-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import tableColumnsMixin from '@/mixins/tableColumnsMixin';
|
|
|
+ import { getProductionReport } from '@/api/mes';
|
|
|
+ export default {
|
|
|
+ mixins: [tableColumnsMixin],
|
|
|
+ components: {},
|
|
|
+ computed: {
|
|
|
+ columns() {
|
|
|
+ // let inspections = [];
|
|
|
+ // this.datasource.forEach((item) => {
|
|
|
+ // inspections.push(...item.inspections);
|
|
|
+ // });
|
|
|
+ // let result = uniqueByProperty(inspections, 'inspectionCode');
|
|
|
+ // let dataColumns = result.map((item) => ({
|
|
|
+ // prop: item.inspectionCode,
|
|
|
+ // label: item.inspectionName,
|
|
|
+ // align: 'center',
|
|
|
+ // showOverflowTooltip: true,
|
|
|
+ // formatter(row, column) {
|
|
|
+ // let data = row.inspections.find(
|
|
|
+ // (item) => item.inspectionCode === column.property
|
|
|
+ // );
|
|
|
+ // return data ? data.noQualifiedNumber : '';
|
|
|
+
|
|
|
+ // }
|
|
|
+ // }));
|
|
|
+ this.columnsVersion++;
|
|
|
+ let dataColumns;
|
|
|
+
|
|
|
+ if (!this.datasource.length) {
|
|
|
+ dataColumns = [];
|
|
|
+ } else {
|
|
|
+ dataColumns = this.datasource[0].inspections.map((item) => ({
|
|
|
+ prop: item.inspectionCode,
|
|
|
+ label: item.inspectionName,
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ formatter(row, column) {
|
|
|
+ let data = row.inspections.find(
|
|
|
+ (item) => item.inspectionCode === column.property
|
|
|
+ );
|
|
|
+ return data
|
|
|
+ ? data.noQualifiedNumber
|
|
|
+ ? data.noQualifiedNumber
|
|
|
+ : ''
|
|
|
+ : '';
|
|
|
+ }
|
|
|
+ }));
|
|
|
+ }
|
|
|
+
|
|
|
+ let arr = [
|
|
|
+ {
|
|
|
+ prop: 'batchNo',
|
|
|
+ label: '批次号',
|
|
|
+ align: 'center',
|
|
|
+ width: 150,
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'createTime',
|
|
|
+ label: '工单日期',
|
|
|
+ align: 'center',
|
|
|
+ width: 120,
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'workOrderNo',
|
|
|
+ label: '工单号',
|
|
|
+ align: 'center',
|
|
|
+ width: 180,
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'customerName',
|
|
|
+ label: '客户',
|
|
|
+ align: 'center',
|
|
|
+ width: 180,
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'productName',
|
|
|
+ label: '产品名称',
|
|
|
+ align: 'center',
|
|
|
+ width: 180,
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'firstProcessFeedingQty',
|
|
|
+ label: '首工序\n投料数量',
|
|
|
+ align: 'center',
|
|
|
+ width: 80,
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'lastProcessFeedingQty',
|
|
|
+ label: '尾工序\n投料数量',
|
|
|
+ align: 'center',
|
|
|
+ width: 80,
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'noQualifiedNumberCount',
|
|
|
+ label: '不良品\n总数',
|
|
|
+ align: 'center',
|
|
|
+ width: 80,
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'dateList',
|
|
|
+ label: '不良品类型/不良品数量',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ children: dataColumns
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ return arr;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ reportDate: ''
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ date: '',
|
|
|
+ reportDate: '',
|
|
|
+ datasource: [],
|
|
|
+ cacheKeyUrl: 'mes-reportForms-productionDayReport1',
|
|
|
+ columnsVersion: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeDate(e) {
|
|
|
+ this.loading = true;
|
|
|
+ if (!e) {
|
|
|
+ this.form.reportDate = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ setCellClass({ row, column }) {
|
|
|
+ // console.log(row, column, rowIndex, columnIndex);
|
|
|
+ let day = column.label.split('/')[1];
|
|
|
+ let num = row.dateList[day - 1];
|
|
|
+ if (!num) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ return num?.dateTotalNum ? 'content-num' : '';
|
|
|
+ },
|
|
|
+
|
|
|
+ async getList() {
|
|
|
+ const res = await getProductionReport(this.form);
|
|
|
+ console.log(res);
|
|
|
+ this.datasource = res;
|
|
|
+ this.loading = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ reload(where) {
|
|
|
+ this.date = where.startDate ?? '';
|
|
|
+ console.log(where);
|
|
|
+ this.$refs.table.reload({ page: 1, where: where });
|
|
|
+ },
|
|
|
+ getYesterday() {
|
|
|
+ const currentDate = new Date();
|
|
|
+ currentDate.setDate(currentDate.getDate() - 1);
|
|
|
+ const year = currentDate.getFullYear();
|
|
|
+ const month = String(currentDate.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(currentDate.getDate()).padStart(2, '0');
|
|
|
+ const yesterday = `${year}-${month}-${day}`;
|
|
|
+ return yesterday;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.form.reportDate = this.getYesterday();
|
|
|
+ this.getList();
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ #inventoryBalance {
|
|
|
+ height: calc(100vh - 96px);
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // element-ui样式穿透
|
|
|
+ :deep(.el-card) {
|
|
|
+ height: 100%;
|
|
|
+ .el-card__body {
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .ele-pro-table {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .el-table {
|
|
|
+ flex: 1;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // .el-table__body-wrapper {
|
|
|
+ // flex: 1;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 5px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ele-form-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.ele-pro-table-header-ellipsis > .el-table th.el-table__cell > .cell) {
|
|
|
+ white-space: pre;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.content-num) {
|
|
|
+ color: #000;
|
|
|
+ background-color: #53c77f !important;
|
|
|
+ }
|
|
|
+</style>
|