|
|
@@ -0,0 +1,358 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!--查询表单-->
|
|
|
+ <el-card class="operate-container" shadow="never">
|
|
|
+ <el-form :inline="true" class="demo-form-inline">
|
|
|
+ <el-form-item label="产品名称">
|
|
|
+ <el-input v-model="searchObj.bomName" placeholder="产品名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="fetch()"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button type="default" @click="resetData()">清空</el-button>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ <div class="_blank">
|
|
|
+ <div class="el-toolbar-body" style="justify-content: flex-start">
|
|
|
+ <el-button type="primary" @click="exportData" icon="el-icon-upload2"
|
|
|
+ ><i class="fa fa-plus" /> 导出</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 列表数据 -->
|
|
|
+ <el-table
|
|
|
+ :key="tableKey"
|
|
|
+ ref="table"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ style="width: 100%"
|
|
|
+ @selection-change="onSelectChange"
|
|
|
+ @cell-click="cellClick"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('common.serialNo')"
|
|
|
+ width="55px"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ (page - 1) * limit + scope.$index + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="产品加工汇总表" :resizable="false" align="center">
|
|
|
+ <!--批次-->
|
|
|
+ <el-table-column
|
|
|
+ prop="orderNo"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureSum.orderNo')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--产品名称-->
|
|
|
+ <el-table-column
|
|
|
+ prop="bomName"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureSum.bomName')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--总数量-->
|
|
|
+ <el-table-column
|
|
|
+ prop="totalNum"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureSum.totalNum')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--待加工数量-->
|
|
|
+ <el-table-column
|
|
|
+ prop="awaitNum"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureSum.awaitNum')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--已完成数量-->
|
|
|
+ <el-table-column
|
|
|
+ prop="endNum"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureSum.endNum')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--报废数量-->
|
|
|
+ <el-table-column
|
|
|
+ prop="scrapNum"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureSum.scrapNum')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!--操作-->
|
|
|
+ <el-table-column label="操作" width="210" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="fetchDataById(scope.row.orderNo)"
|
|
|
+ >查看详情</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页组件 -->
|
|
|
+ <el-pagination
|
|
|
+ :current-page="page"
|
|
|
+ :total="total"
|
|
|
+ :page-size="limit"
|
|
|
+ :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
|
|
|
+ style="padding: 30px 0; text-align: center"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @size-change="changePageSize"
|
|
|
+ @current-change="changeCurrentPage"
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-dialog title="产品加工详情" :visible.sync="dialogVisible" style="width: 100%; margin-top: 20px">
|
|
|
+ <el-table
|
|
|
+ :key="tableKey"
|
|
|
+ :span-method="objectSpanMethod"
|
|
|
+ ref="table"
|
|
|
+ :data="formData"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <!--批次-->
|
|
|
+ <el-table-column
|
|
|
+ prop="orderNo"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureInfo.orderNo')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--产品名称-->
|
|
|
+ <el-table-column
|
|
|
+ prop="bomName"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureInfo.bomName')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--总数量-->
|
|
|
+ <el-table-column
|
|
|
+ prop="totalNum"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureInfo.totalNum')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!--工序-->
|
|
|
+ <el-table-column
|
|
|
+ prop="procedureName"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureInfo.procedureName')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!--待加工数量-->
|
|
|
+ <el-table-column
|
|
|
+ prop="awaitNum"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureInfo.awaitNum')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--已完成数量-->
|
|
|
+ <el-table-column
|
|
|
+ prop="endNum"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureInfo.endNum')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--报废数量-->
|
|
|
+ <el-table-column
|
|
|
+ prop="scrapNum"
|
|
|
+ :label="$t('statisticalAnalysis.table.procedureInfo.scrapNum')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="dialogVisible = false" size="small"
|
|
|
+ >返 回</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 【产品加工汇总】-API
|
|
|
+import productlineAvailabilityApi from "@/api/statisticalAnalysis/productlineAvailability";
|
|
|
+// 【弹出框】elementui组件
|
|
|
+import elDragDialog from "@/directive/el-drag-dialog";
|
|
|
+import Pagination from "@/components/Pagination";
|
|
|
+export default {
|
|
|
+ name: "productStatistics",
|
|
|
+ directives: {
|
|
|
+ elDragDialog,
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [], // 讲师列表
|
|
|
+ formData: [],
|
|
|
+ total: 0, // 总记录数
|
|
|
+ page: 1, // 当前页码
|
|
|
+ limit: 10, // 每页记录数
|
|
|
+ searchObj: {}, // 查询条件
|
|
|
+ dialogVisible: false, //是否弹框
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
|
|
|
+ created() {
|
|
|
+ // 加载列表数据
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ loadingId: {
|
|
|
+ handler(val, oldVal) {
|
|
|
+ // 加载列表数据
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ loadingDate: {
|
|
|
+ handler(val, oldVal) {
|
|
|
+ // 加载列表数据
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ view(row) {
|
|
|
+ this.$refs.view.setOperatorDetailPerformance(row);
|
|
|
+ this.operatorViewVisible = true;
|
|
|
+ },
|
|
|
+ fetch() {
|
|
|
+ this.tableKey = !this.tableKey;
|
|
|
+ productlineAvailabilityApi
|
|
|
+ .procedureSum(this.page, this.limit, this.searchObj)
|
|
|
+ .then((response) => {
|
|
|
+ const res = response.data;
|
|
|
+ this.tableData = (res.data || []).records;
|
|
|
+ this.total = (res.data || []).total;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //根据id查询
|
|
|
+ fetchDataById(orderNo) {
|
|
|
+ //弹出框
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.searchObj.orderNo = orderNo;
|
|
|
+ this.tableKey = !this.tableKey;
|
|
|
+ productlineAvailabilityApi
|
|
|
+ .procedureInfo(this.searchObj)
|
|
|
+ .then((response) => {
|
|
|
+ response.data.data.procedureInfos.map((item) => {
|
|
|
+ item.bomName = response.data.data.bomName;
|
|
|
+ item.orderNo = response.data.data.orderNo;
|
|
|
+ item.totalNum = response.data.data.totalNum;
|
|
|
+ });
|
|
|
+ this.formData = response.data.data.procedureInfos;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
|
|
|
+ changePageSize(size) {
|
|
|
+ this.limit = size;
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ // 改变页码，page：回调参数，表示当前选中的“页码”
|
|
|
+ changeCurrentPage(page) {
|
|
|
+ this.page = page;
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ //清空
|
|
|
+ resetData() {
|
|
|
+ this.searchObj = {};
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ cellClick(row, column) {
|
|
|
+ if (column["columnKey"] === "operation") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let flag = false;
|
|
|
+ this.selection.forEach((item) => {
|
|
|
+ if (item.id === row.id) {
|
|
|
+ flag = true;
|
|
|
+ this.$refs.table.toggleRowSelection(row);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!flag) {
|
|
|
+ this.$refs.table.toggleRowSelection(row, true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSelectChange(selection) {
|
|
|
+ this.selection = selection;
|
|
|
+ },
|
|
|
+ //导出
|
|
|
+ exportData() {
|
|
|
+ productlineAvailabilityApi.expectprocedureSum().then((res) => {
|
|
|
+ if (!res) return;
|
|
|
+ const blob = new Blob([res.data], {
|
|
|
+ type: "application/vnd.ms-excel;",
|
|
|
+ });
|
|
|
+ const a = document.createElement("a");
|
|
|
+ // 生成文件路径
|
|
|
+ let href = window.URL.createObjectURL(blob);
|
|
|
+ a.href = href;
|
|
|
+ // 文件名中有中文 则对文件名进行转码
|
|
|
+ a.download = decodeURIComponent("产品加工汇总");
|
|
|
+ // 利用a标签做下载
|
|
|
+ document.body.appendChild(a);
|
|
|
+ a.click();
|
|
|
+ document.body.removeChild(a);
|
|
|
+ window.URL.revokeObjectURL(href);
|
|
|
+ this.allloading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //
|
|
|
+ objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
|
|
|
+ const _row = this.flitterData(this.formData).one[rowIndex];
|
|
|
+ const _col = _row > 0 ? 1 : 0;
|
|
|
+ return {
|
|
|
+ rowspan: _row,
|
|
|
+ colspan: _col,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**合并表格的第一列，处理表格数据 */
|
|
|
+ flitterData(arr) {
|
|
|
+ let spanOneArr = [];
|
|
|
+ let concatOne = 0;
|
|
|
+ arr.forEach((item, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ spanOneArr.push(1);
|
|
|
+ } else {
|
|
|
+ //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
|
|
|
+ if (item.quarterly === arr[index - 1].quarterly) {
|
|
|
+ //第一列需合并相同内容的判断条件
|
|
|
+ spanOneArr[concatOne] += 1;
|
|
|
+ spanOneArr.push(0);
|
|
|
+ } else {
|
|
|
+ spanOneArr.push(1);
|
|
|
+ concatOne = index;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ one: spanOneArr,
|
|
|
+ };
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.rowBtn {
|
|
|
+ margin: 0 5px;
|
|
|
+ color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+.rowBtn:hover {
|
|
|
+ opacity: 0.7;
|
|
|
+}
|
|
|
+</style>
|
paidaxin666