feat(数据溯源报表): 添加数据溯源报表
This commit is contained in:
关博
parent
9bf22d4e90
commit
6f94d4c200
28
src/api/qms/data-tracing-report.js
Normal file
28
src/api/qms/data-tracing-report.js
Normal file
@ -0,0 +1,28 @@
|
||||
import request from '@/router/axios'
|
||||
|
||||
// 分页查询 数据溯源一级 报表数据
|
||||
export function pageDataTracingOneReport(query) {
|
||||
return request({
|
||||
url: '/iep-qms/qms-report/pageDataTracingOneReport',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询 数据溯源二级 报表数据
|
||||
export function pageDataTracingTwoReport(query) {
|
||||
return request({
|
||||
url: '/iep-qms/qms-report/pageDataTracingTwoReport',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询 数据溯源三级 报表数据
|
||||
export function pageDataTracingThreeReport(query) {
|
||||
return request({
|
||||
url: '/iep-qms/qms-report/pageDataTracingThreeReport',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
353
src/views/qms/data_tracing_report/index.vue
Normal file
353
src/views/qms/data_tracing_report/index.vue
Normal file
@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<div class="execution">
|
||||
<!-- 三级弹出框 -->
|
||||
<el-dialog title="详细信息" :visible.sync="threeFormObj.threeDialogVisible" width="70%">
|
||||
<!-- 按钮 -->
|
||||
<c-top-bar :offset="50">
|
||||
<el-button type="text" icon="el-icon-document" disabled>修复涂料型号：{{threeFormObj.repairCode}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" disabled>修复层厚度：{{threeFormObj.repairThickness}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" disabled>修复涂料批号：{{threeFormObj.repairBatch}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" disabled>保护膜型号：{{threeFormObj.protectCode}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" disabled>保护膜批号：{{threeFormObj.protectBatch}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" disabled>胶水型号：{{threeFormObj.jlueCode}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" disabled>胶水批号：{{threeFormObj.jlueBatch}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" disabled>胶层厚度：{{threeFormObj.jlueThickness}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" disabled>底膜型号：{{threeFormObj.dimoCode}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" disabled>底膜批号：{{threeFormObj.dimoBatch}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" disabled>原膜批号：{{threeFormObj.yuanCode}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" disabled>原膜批号：{{threeFormObj.yuanBatch}}</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button type="text" icon="el-icon-document" @click="doThreeExport">导出</el-button>
|
||||
<el-divider style="margin-top: 0;"></el-divider>
|
||||
</c-top-bar>
|
||||
<!-- 表单 -->
|
||||
<el-form ref="threeFormObj" :model="threeFormObj" label-width="120px">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24">
|
||||
<el-table size="mini" :data="threeFormObj.threeTableList" border style="width: 100%" height="550px" highlight-current-row>
|
||||
<el-table-column align="center" prop="lxmCode" label="离型膜型号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="lxmBatch" label="离型膜批号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="tpuCode" label="TPU粒子型号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="tpuBatch" label="TPU粒子批号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="tpumCode" label="TPU功能母粒型号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="tpumBatch" label="TPU功能母粒批号" show-overflow-tooltip/>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<!-- 二级弹出框 -->
|
||||
<el-dialog title="详细信息" :visible.sync="twoFormObj.twoDialogVisible" width="70%">
|
||||
<!-- 按钮 -->
|
||||
<c-top-bar :offset="50">
|
||||
<el-button type="text" icon="el-icon-document" disabled>小卷产品型号：{{twoFormObj.itemDescSmall}}</el-button>
|
||||
<el-divider direction="vertical"/>
|
||||
<el-button type="text" icon="el-icon-document" disabled>小卷产品批号：{{twoFormObj.inventoryId}}</el-button>
|
||||
<el-divider direction="vertical"/>
|
||||
<el-button type="text" icon="el-icon-document" disabled>大卷产品型号：{{twoFormObj.itemDescBig}}</el-button>
|
||||
<el-divider direction="vertical"/>
|
||||
<el-button type="text" icon="el-icon-document" disabled>大卷产品批号：{{twoFormObj.materialLot}}</el-button>
|
||||
</c-top-bar>
|
||||
<c-top-bar :offset="50">
|
||||
<el-button type="text" icon="el-icon-export" @click="doTwoExport">导出</el-button>
|
||||
</c-top-bar>
|
||||
<!-- 表单 -->
|
||||
<el-form ref="twoFormObj" :model="twoFormObj" label-width="80px">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24">
|
||||
<el-table size="mini" :data="twoFormObj.twoTableList" border style="width: 100%" height="550px" @row-click="handleTwoRowClick" highlight-current-row>
|
||||
<el-table-column align="center" prop="repairCode" label="修复涂料型号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="repairThickness" label="修复层厚度" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="repairBatch" label="修复涂料批号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="protectCode" label="保护膜型号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="protectBatch" label="保护膜批号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="jlueCode" label="胶水型号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="jlueBatch" label="胶层批号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="jlueThickness" label="胶层厚度" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="dimoCode" label="底膜型号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="dimoBatch" label="底膜批号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="yuanCode" label="原膜型号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="yuanBatch" label="原膜批号" show-overflow-tooltip/>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<!-- 一级界面 -->
|
||||
<basic-container style="margin-top: -20px">
|
||||
<!-- 按钮 -->
|
||||
<c-top-bar :offset="50">
|
||||
<el-button type="text" icon="el-icon-search" @click="doRetrieve(true)">检索</el-button>
|
||||
<el-divider direction="vertical"/>
|
||||
<el-button type="text" icon="el-icon-circle-close" @click="doClear()">清除</el-button>
|
||||
<el-divider direction="vertical"/>
|
||||
<el-button type="text" icon="el-icon-document" @click="doExport">导出</el-button>
|
||||
</c-top-bar>
|
||||
<!-- 搜索框 -->
|
||||
<el-form ref="mainFormObj" :model="mainFormObj" label-width="120px">
|
||||
<el-row :gutter="24">
|
||||
<!-- 站点 -->
|
||||
<el-col :span="6">
|
||||
<el-form-item label="站点:" prop="site">
|
||||
<el-input placeHolder="站点" v-model="site" :disabled="true"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 批次 -->
|
||||
<el-col :span="6">
|
||||
<el-form-item label="批次:" prop="lotNo" >
|
||||
<el-input placeHolder="请输入批次" v-model="mainFormObj.lotNo"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 表格 -->
|
||||
<el-tabs v-model="tabActiveName">
|
||||
<el-tab-pane label="查询结果" name="main">
|
||||
<el-table size="mini" :data="mainFormObj.mainTableList" border style="width: 100%" height="550" @row-click="handleMainRowClick" highlight-current-row>
|
||||
<el-table-column align="center" prop="itemDescSmall" label="小卷产品型号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="inventoryId" label="小卷产品批号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="materialLot" label="大卷产品型号" show-overflow-tooltip/>
|
||||
<el-table-column align="center" prop="itemDescBig" label="大卷产品批号" show-overflow-tooltip/>
|
||||
</el-table>
|
||||
<div style="width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
|
||||
<el-pagination @current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page.sync="mainFormObj.mainPage.current"
|
||||
:page-sizes="[10, 20, 50, 100, 200]"
|
||||
:page-size="mainFormObj.mainPage.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="mainFormObj.mainPage.total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</basic-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {hideLoading, showLoading} from '@/const/loading';
|
||||
import {mapGetters} from 'vuex';
|
||||
import {getStore} from "@/util/store";
|
||||
import {
|
||||
pageDataTracingOneReport,
|
||||
pageDataTracingThreeReport,
|
||||
pageDataTracingTwoReport
|
||||
} from "@/api/qms/data-tracing-report";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabActiveName: "main",
|
||||
site: getStore({name: 'tenantId'}),
|
||||
// 一级界面 搜索框和表格定义
|
||||
mainFormObj: {
|
||||
lotNo: '',
|
||||
mainTableList: [],
|
||||
mainPage: {
|
||||
total: 0,
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
},
|
||||
// 二级界面 搜索框和表格定义
|
||||
twoFormObj: {
|
||||
itemDescSmall : '',
|
||||
inventoryId: '',
|
||||
materialLot: '',
|
||||
itemDescBig: '',
|
||||
twoTableList: [],
|
||||
twoDialogVisible: false,
|
||||
},
|
||||
// 三级界面 搜索框和表格定义
|
||||
threeFormObj: {
|
||||
repairCode:'',
|
||||
repairThickness: '',
|
||||
repairBatch: '',
|
||||
protectCode: '',
|
||||
protectBatch: '',
|
||||
jlueCode: '',
|
||||
jlueBatch: '',
|
||||
jlueThickness: '',
|
||||
dimoCode: '',
|
||||
dimoBatch: '',
|
||||
yuanCode: '',
|
||||
yuanBatch: '',
|
||||
threeTableList: [],
|
||||
threeDialogVisible: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
...mapGetters(['permissions']),
|
||||
permissionList() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 三级界面-检索
|
||||
doThreeRetrieve() {
|
||||
let me = this;
|
||||
let obj = {
|
||||
lotNo: me.threeFormObj.yuanBatch,
|
||||
};
|
||||
showLoading();
|
||||
pageDataTracingThreeReport(obj).then(response => {
|
||||
if (!response.data.data || response.data.data.length === 0) {
|
||||
this.$message.error(`当前原膜${me.threeFormObj.yuanBatch}无产出及消耗记录！`);
|
||||
this.doClear();
|
||||
} else {
|
||||
me.threeFormObj.threeTableList = response.data.data;
|
||||
}
|
||||
}).finally(() => {
|
||||
hideLoading();
|
||||
});
|
||||
},
|
||||
// 三级界面-导出
|
||||
doThreeExport() {
|
||||
let me = this;
|
||||
let search = {
|
||||
site: me.site,
|
||||
lotNo: me.threeFormObj.yuanBatch,
|
||||
};
|
||||
this.downBlobFile("/iep-qms/qms-report/dataTracingThreeReport/tablePageThreeExport", search, "数据溯源报表3.xlsx");
|
||||
},
|
||||
|
||||
// 二级界面-检索
|
||||
doTwoRetrieve() {
|
||||
let me = this;
|
||||
let obj = {
|
||||
lotNo: me.twoFormObj.materialLot,
|
||||
};
|
||||
showLoading();
|
||||
pageDataTracingTwoReport(obj).then(response => {
|
||||
if (!response.data.data || response.data.data.length === 0) {
|
||||
this.$message.error(`当前涂布大卷${me.twoFormObj.materialLot}无产出及消耗记录！`);
|
||||
this.twoFormObj.twoDialogVisible = false;
|
||||
this.doClear();
|
||||
} else {
|
||||
me.twoFormObj.twoTableList = response.data.data;
|
||||
}
|
||||
}).finally(() => {
|
||||
hideLoading();
|
||||
});
|
||||
},
|
||||
// 二级界面-单击事件
|
||||
handleTwoRowClick(row) {
|
||||
this.threeFormObj.repairCode = row.repairCode
|
||||
this.threeFormObj.repairThickness = row.repairThickness;
|
||||
this.threeFormObj.repairBatch = row.repairBatch;
|
||||
this.threeFormObj.protectCode = row.protectCode;
|
||||
this.threeFormObj.protectBatch = row.protectBatch;
|
||||
this.threeFormObj.jlueCode = row.jlueCode;
|
||||
this.threeFormObj.jlueBatch = row.jlueBatch;
|
||||
this.threeFormObj.jlueThickness = row.jlueThickness;
|
||||
this.threeFormObj.dimoCode = row.dimoCode;
|
||||
this.threeFormObj.dimoBatch = row.dimoBatch;
|
||||
this.threeFormObj.dimoCode = row.dimoCode;
|
||||
this.threeFormObj.yuanCode = row.yuanCode;
|
||||
this.threeFormObj.yuanBatch = row.yuanBatch;
|
||||
this.threeFormObj.threeTableList = [];
|
||||
this.threeFormObj.threeDialogVisible = true;
|
||||
this.doThreeRetrieve();
|
||||
},
|
||||
// 二级界面-导出
|
||||
doTwoExport() {
|
||||
let me = this;
|
||||
let search = {
|
||||
site: me.site,
|
||||
lotNo: me.twoFormObj.materialLot,
|
||||
};
|
||||
this.downBlobFile("/iep-qms/qms-report/dataTracingTwoReport/tablePageTwoExport", search, "数据溯源报表2.xlsx");
|
||||
},
|
||||
|
||||
// 主界面-检索
|
||||
doRetrieve(flag) {
|
||||
let me = this;
|
||||
if (flag) {
|
||||
me.mainFormObj.mainPage.current = 1;
|
||||
}
|
||||
let obj = {
|
||||
lotNo: this.mainFormObj.lotNo,
|
||||
};
|
||||
showLoading();
|
||||
pageDataTracingOneReport(Object.assign({
|
||||
current: me.mainFormObj.mainPage.current,
|
||||
size: me.mainFormObj.mainPage.size,
|
||||
},obj)).then(response => {
|
||||
if (!response.data.data || response.data.data.length === 0) {
|
||||
this.$message.error('检索无数据');
|
||||
this.doClear();
|
||||
} else {
|
||||
let data = response.data.data;
|
||||
me.mainFormObj.mainTableList = data.records;
|
||||
me.mainFormObj.mainPage.total = data.total;
|
||||
me.mainFormObj.mainPage.current = data.current;
|
||||
}
|
||||
}).finally(() => {
|
||||
hideLoading();
|
||||
});
|
||||
},
|
||||
// 主界面-页面大小改变
|
||||
handleSizeChange(val) {
|
||||
this.mainFormObj.mainPage.size = val;
|
||||
this.mainFormObj.mainPage.current = 1;
|
||||
this.doRetrieve();
|
||||
},
|
||||
// 主界面-页面切换
|
||||
handleCurrentChange(val) {
|
||||
this.mainFormObj.mainPage.current = val;
|
||||
this.doRetrieve();
|
||||
},
|
||||
// 主界面-单击事件
|
||||
handleMainRowClick(row) {
|
||||
this.twoFormObj.itemDescSmall = row.itemDescSmall;
|
||||
this.twoFormObj.inventoryId = row.inventoryId;
|
||||
this.twoFormObj.materialLot = row.materialLot;
|
||||
this.twoFormObj.itemDescBig = row.itemDescBig;
|
||||
this.twoFormObj.twoTableList = [];
|
||||
this.twoFormObj.twoDialogVisible = true;
|
||||
this.doTwoRetrieve();
|
||||
},
|
||||
// 主界面-清除
|
||||
doClear() {
|
||||
let me = this;
|
||||
me.mainFormObj.lotNo = ''
|
||||
me.mainFormObj.mainTableList = []
|
||||
this.mainFormObj.mainPage = {
|
||||
total: 0,
|
||||
current: 1,
|
||||
size: 20
|
||||
}
|
||||
// 初始化界面
|
||||
this.doRetrieve();
|
||||
},
|
||||
// 主界面-导出
|
||||
doExport() {
|
||||
let me = this;
|
||||
let search = {
|
||||
site: me.site,
|
||||
lotNo: this.mainFormObj.lotNo,
|
||||
};
|
||||
this.downBlobFile("/iep-qms/qms-report/dataTracingOneReport/tablePageOneExport", search, "数据溯源报表1.xlsx");
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user