|
|
@@ -18,16 +18,480 @@
|
|
|
<DashboardHeader height="100%" content="原材仓看板" />
|
|
|
</div>
|
|
|
|
|
|
- <!-- 列表区域 - 2列3行Grid布局 -->
|
|
|
+ <!-- 列表区域 - 3列2行Grid布局 -->
|
|
|
<div class="content-section">
|
|
|
<div class="grid-container">
|
|
|
- <div v-for="tab in tabs" :key="tab.name" class="grid-item">
|
|
|
- <el-card :header="tab.label" shadow="hover" class="list-card">
|
|
|
- <QueryNew
|
|
|
- :document-id="tab.documentId"
|
|
|
- class="query-container"
|
|
|
- :refresh-min="num"
|
|
|
- />
|
|
|
+ <!-- 已登记未质检列表 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card header="已登记未质检列表" shadow="hover" class="list-card">
|
|
|
+ <div ref="wrapper_preRollPass" class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.preRollPass"
|
|
|
+ :data="tableData.preRollPass"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <!-- <el-table-column
|
|
|
+ type="index"
|
|
|
+ :width="getIndexWidth()"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ /> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="物料批次"
|
|
|
+ label="物料批次"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('preRollPass', '物料批次')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="采购订单"
|
|
|
+ label="采购订单"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('preRollPass', '采购订单')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('preRollPass', '物料编码')"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('preRollPass', '物料名称')"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="到货数量"
|
|
|
+ label="到货数量"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('preRollPass', '到货数量')"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="供应商名称"
|
|
|
+ label="供应商名称"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('preRollPass', '供应商名称')"
|
|
|
+ />
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="送货单批次"
|
|
|
+ label="送货单批次"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('preRollPass')"
|
|
|
+ /> -->
|
|
|
+ </el-table>
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.preRollPass || 1 }} /
|
|
|
+ {{
|
|
|
+ Math.max(1, Math.ceil((total.preRollPass || 0) / pageSize))
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 已QC通过待入库列表 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card header="已QC通过待入库列表" shadow="hover" class="list-card">
|
|
|
+ <div ref="wrapper_mergedPreRollPass" class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.mergedPreRollPass"
|
|
|
+ :data="tableData.mergedPreRollPass"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <!-- <el-table-column
|
|
|
+ type="index"
|
|
|
+ :width="getIndexWidth()"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ /> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="物料批次"
|
|
|
+ label="物料批次"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('mergedPreRollPass', '物料批次')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="采购订单"
|
|
|
+ label="采购订单"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('mergedPreRollPass', '采购订单')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('mergedPreRollPass', '物料编码')"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('mergedPreRollPass', '物料名称')"
|
|
|
+ />
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="规格"
|
|
|
+ label="规格"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('mergedPreRollPass')"
|
|
|
+ /> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="数量"
|
|
|
+ label="数量"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('mergedPreRollPass', '数量')"
|
|
|
+ />
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="供应商编码"
|
|
|
+ label="供应商编码"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('mergedPreRollPass')"
|
|
|
+ /> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="供应商名称"
|
|
|
+ label="供应商名称"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('mergedPreRollPass', '供应商名称')"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.mergedPreRollPass || 1 }} /
|
|
|
+ {{
|
|
|
+ Math.max(
|
|
|
+ 1,
|
|
|
+ Math.ceil((total.mergedPreRollPass || 0) / pageSize)
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 每日入库信息列表 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card header="每日入库信息列表" shadow="hover" class="list-card">
|
|
|
+ <div ref="wrapper_rollUp" class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.rollUp"
|
|
|
+ :data="tableData.rollUp"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <!-- <el-table-column
|
|
|
+ type="index"
|
|
|
+ :width="getIndexWidth()"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ /> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="业务类型"
|
|
|
+ label="业务类型"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('rollUp', '业务类型')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('rollUp', '物料编码')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('rollUp', '物料名称')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="入库数量"
|
|
|
+ label="入库数量"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('rollUp', '入库数量')"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="入库时间"
|
|
|
+ label="入库时间"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('rollUp', '入库时间')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ formatTimestamp(scope.row["入库时间"])
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="审核人"
|
|
|
+ label="审核人"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('rollUp', '审核人')"
|
|
|
+ />
|
|
|
+ </el-table> -->
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.rollUp || 1 }} /
|
|
|
+ {{ Math.max(1, Math.ceil((total.rollUp || 0) / pageSize)) }}
|
|
|
+ </div>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 每日出库信息列表 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card header="每日出库信息列表" shadow="hover" class="list-card">
|
|
|
+ <div ref="wrapper_finalPass" class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.finalPass"
|
|
|
+ :data="tableData.finalPass"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <!-- <el-table-column
|
|
|
+ type="index"
|
|
|
+ :width="getIndexWidth()"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ /> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="业务类型"
|
|
|
+ label="业务类型"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('finalPass', '业务类型')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('finalPass', '物料编码')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('finalPass', '物料名称')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="出库数量"
|
|
|
+ label="出库数量"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('finalPass', '出库数量')"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="出库时间"
|
|
|
+ label="出库时间"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('finalPass', '出库时间')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ formatTimestamp(scope.row["出库时间"])
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="审核人"
|
|
|
+ label="审核人"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('finalPass', '审核人')"
|
|
|
+ /> -->
|
|
|
+ </el-table>
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.finalPass || 1 }} /
|
|
|
+ {{ Math.max(1, Math.ceil((total.finalPass || 0) / pageSize)) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 已入库原材料不良列表 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card
|
|
|
+ header="已入库原材料不良列表"
|
|
|
+ shadow="hover"
|
|
|
+ class="list-card"
|
|
|
+ >
|
|
|
+ <div ref="wrapper_slitting" class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.slitting"
|
|
|
+ :data="tableData.slitting"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <!-- <el-table-column
|
|
|
+ type="index"
|
|
|
+ :width="getIndexWidth()"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ /> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="申请单号"
|
|
|
+ label="申请单号"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('slitting', '申请单号')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="业务类型"
|
|
|
+ label="业务类型"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('slitting', '业务类型')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('slitting', '物料编码')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('slitting', '物料名称')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="入库数量"
|
|
|
+ label="入库数量"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('slitting', '入库数量')"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="入库时间"
|
|
|
+ label="入库时间"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('slitting', '入库时间')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ formatTimestamp(scope.row["入库时间"])
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="审核人"
|
|
|
+ label="审核人"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('slitting', '审核人')"
|
|
|
+ /> -->
|
|
|
+ </el-table>
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.slitting || 1 }} /
|
|
|
+ {{ Math.max(1, Math.ceil((total.slitting || 0) / pageSize)) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 库存呆滞料查询 -->
|
|
|
+ <div class="grid-item">
|
|
|
+ <el-card header="库存呆滞料查询" shadow="hover" class="list-card">
|
|
|
+ <div ref="wrapper_annealing" class="table-wrapper">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading.annealing"
|
|
|
+ :data="tableData.annealing"
|
|
|
+ border
|
|
|
+ class="auto-fit-table"
|
|
|
+ size="small"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :header-cell-style="headerCellStyle"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ >
|
|
|
+ <!-- <el-table-column
|
|
|
+ type="index"
|
|
|
+ :width="getIndexWidth()"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ /> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="物料编码"
|
|
|
+ label="物料编码"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('annealing', '物料编码')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="物料名称"
|
|
|
+ label="物料名称"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('annealing', '物料名称')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="规格型号"
|
|
|
+ label="规格型号"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('annealing')"
|
|
|
+ /> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="在库数量"
|
|
|
+ label="在库数量"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('annealing', '在库数量')"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="批次号"
|
|
|
+ label="批次号"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('annealing', '批次号')"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="库存天数"
|
|
|
+ label="库存天数"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('annealing', '库存天数')"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="入库日期"
|
|
|
+ label="入库日期"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth('annealing', '入库日期')"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ formatTimestamp(scope.row["入库日期"])
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div v-if="num > 0" class="page-indicator">
|
|
|
+ {{ pageNo.annealing || 1 }} /
|
|
|
+ {{ Math.max(1, Math.ceil((total.annealing || 0) / pageSize)) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -36,54 +500,342 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import QueryNew from "@/views/bulletinBoard/components/queryNew.vue";
|
|
|
-// import QueryNew from "@/views/bulletinBoard/components/queryNew1.vue";
|
|
|
import DashboardHeader from "@/views/bulletinBoard/components/dashboardHeader.vue";
|
|
|
+import DictTag from "@/components/DictTag";
|
|
|
import screenfull from "screenfull";
|
|
|
+import * as QueryManageApi from "@/api/mes/queryManage";
|
|
|
+
|
|
|
export default {
|
|
|
name: "TraceResult",
|
|
|
- components: { QueryNew, DashboardHeader },
|
|
|
+ components: { DashboardHeader, DictTag },
|
|
|
data() {
|
|
|
return {
|
|
|
num: 10,
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- label: "已登记未质检列表",
|
|
|
- name: "preRollPass",
|
|
|
- documentId: "2005460172242325506",
|
|
|
+ pageSize: 3,
|
|
|
+
|
|
|
+ tableData: {
|
|
|
+ preRollPass: [],
|
|
|
+ mergedPreRollPass: [],
|
|
|
+ rollUp: [],
|
|
|
+ finalPass: [],
|
|
|
+ slitting: [],
|
|
|
+ annealing: [],
|
|
|
+ },
|
|
|
+
|
|
|
+ loading: {
|
|
|
+ preRollPass: false,
|
|
|
+ mergedPreRollPass: false,
|
|
|
+ rollUp: false,
|
|
|
+ finalPass: false,
|
|
|
+ slitting: false,
|
|
|
+ annealing: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ pageNo: {
|
|
|
+ preRollPass: 1,
|
|
|
+ mergedPreRollPass: 1,
|
|
|
+ rollUp: 1,
|
|
|
+ finalPass: 1,
|
|
|
+ slitting: 1,
|
|
|
+ annealing: 1,
|
|
|
+ },
|
|
|
+
|
|
|
+ total: {
|
|
|
+ preRollPass: 0,
|
|
|
+ mergedPreRollPass: 0,
|
|
|
+ rollUp: 0,
|
|
|
+ finalPass: 0,
|
|
|
+ slitting: 0,
|
|
|
+ annealing: 0,
|
|
|
+ },
|
|
|
+
|
|
|
+ autoTimers: {},
|
|
|
+ resizeTimer: null,
|
|
|
+ wrapperWidths: {},
|
|
|
+
|
|
|
+ // 各表格字段宽度权重配置（权重越大，列越宽）- 3列2行布局，空间较紧
|
|
|
+ colWidthConfigs: {
|
|
|
+ preRollPass: {
|
|
|
+ 物料批次: 1.8,
|
|
|
+ 采购订单: 1.5,
|
|
|
+ 物料编码: 1.5,
|
|
|
+ 物料名称: 2.2,
|
|
|
+ 到货数量: 1,
|
|
|
+ 供应商名称: 2,
|
|
|
},
|
|
|
- {
|
|
|
- label: "已QC通过待入库列表",
|
|
|
- name: "mergedPreRollPass",
|
|
|
- documentId: "2005466606724091905",
|
|
|
+ mergedPreRollPass: {
|
|
|
+ 物料批次: 1.8,
|
|
|
+ 采购订单: 1.7,
|
|
|
+ 物料编码: 1.5,
|
|
|
+ 物料名称: 2.0,
|
|
|
+ 数量: 1,
|
|
|
+ 供应商名称: 2,
|
|
|
},
|
|
|
- {
|
|
|
- label: "每日入库信息列表",
|
|
|
- name: "rollUp",
|
|
|
- documentId: "2005468337855959041",
|
|
|
+ rollUp: {
|
|
|
+ 业务类型: 1.2,
|
|
|
+ 物料编码: 1.5,
|
|
|
+ 物料名称: 2.2,
|
|
|
+ 入库数量: 1,
|
|
|
+ 入库时间: 1.8,
|
|
|
+ // 审核人: 1,
|
|
|
},
|
|
|
- {
|
|
|
- label: "每日出库信息列表",
|
|
|
- name: "finalPass",
|
|
|
- documentId: "2005468804044460033",
|
|
|
+ finalPass: {
|
|
|
+ 业务类型: 1.2,
|
|
|
+ 物料编码: 1.5,
|
|
|
+ 物料名称: 2.2,
|
|
|
+ 出库数量: 1,
|
|
|
+ 出库时间: 1.8,
|
|
|
+ // 审核人: 1,
|
|
|
},
|
|
|
- {
|
|
|
- label: "已入库原材料不良列表",
|
|
|
- name: "slitting",
|
|
|
- documentId: "2005487894289092609",
|
|
|
+ slitting: {
|
|
|
+ 申请单号: 2.0,
|
|
|
+ 业务类型: 1.2,
|
|
|
+ 物料编码: 1.5,
|
|
|
+ 物料名称: 2.2,
|
|
|
+ 入库数量: 1,
|
|
|
+ 入库时间: 1.5,
|
|
|
+ // 审核人: 1,
|
|
|
},
|
|
|
- {
|
|
|
- label: "库存呆滞料查询",
|
|
|
- name: "annealing",
|
|
|
- documentId: "2005521571224129538",
|
|
|
+ annealing: {
|
|
|
+ 物料编码: 1.5,
|
|
|
+ 物料名称: 2.0,
|
|
|
+ 在库数量: 1,
|
|
|
+ 批次号: 2.0,
|
|
|
+ 库存天数: 1,
|
|
|
+ 入库日期: 1.5,
|
|
|
},
|
|
|
+ },
|
|
|
+
|
|
|
+ tabs: [
|
|
|
+ { name: "preRollPass", documentId: "2005460172242325506" },
|
|
|
+ { name: "mergedPreRollPass", documentId: "2005466606724091905" },
|
|
|
+ { name: "rollUp", documentId: "2005468337855959041" },
|
|
|
+ { name: "finalPass", documentId: "2005468804044460033" },
|
|
|
+ { name: "slitting", documentId: "2005487894289092609" },
|
|
|
+ { name: "annealing", documentId: "2005521571224129538" },
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ num() {
|
|
|
+ this.restartAllAutoPage();
|
|
|
+ },
|
|
|
+ },
|
|
|
mounted() {
|
|
|
+ this.init();
|
|
|
this.enterFullScreen();
|
|
|
+ window.addEventListener("resize", this.handleResize);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.clearAllTimers();
|
|
|
+ window.removeEventListener("resize", this.handleResize);
|
|
|
+ clearTimeout(this.resizeTimer);
|
|
|
},
|
|
|
methods: {
|
|
|
+ async init() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.updateWrapperWidths();
|
|
|
+ });
|
|
|
+
|
|
|
+ for (const tab of this.tabs) {
|
|
|
+ await this.loadTableData(tab);
|
|
|
+ }
|
|
|
+ this.startAllAutoPage();
|
|
|
+ },
|
|
|
+
|
|
|
+ updateWrapperWidths() {
|
|
|
+ this.tabs.forEach((tab) => {
|
|
|
+ const wrapper = this.$refs[`wrapper_${tab.name}`];
|
|
|
+ if (wrapper) {
|
|
|
+ const rect = wrapper.getBoundingClientRect();
|
|
|
+ this.$set(this.wrapperWidths, tab.name, Math.floor(rect.width));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ getIndexWidth() {
|
|
|
+ return 25;
|
|
|
+ },
|
|
|
+
|
|
|
+ getColWidth(tableName, prop) {
|
|
|
+ let containerWidth = this.wrapperWidths[tableName];
|
|
|
+
|
|
|
+ if (!containerWidth) {
|
|
|
+ const wrapper = this.$refs[`wrapper_${tableName}`];
|
|
|
+ if (wrapper) {
|
|
|
+ const rect = wrapper.getBoundingClientRect();
|
|
|
+ containerWidth = Math.floor(rect.width);
|
|
|
+ this.$set(this.wrapperWidths, tableName, containerWidth);
|
|
|
+ } else {
|
|
|
+ // 3列2行布局，父容器950，每列约300，减去padding和边框
|
|
|
+ containerWidth = 280;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const config = this.colWidthConfigs[tableName] || {};
|
|
|
+ const weights = Object.values(config);
|
|
|
+ const totalWeight = weights.reduce((sum, w) => sum + w, 0);
|
|
|
+
|
|
|
+ // 获取当前字段的权重，默认1
|
|
|
+ const weight = config[prop] || 1;
|
|
|
+
|
|
|
+ // 预留边框和间隙空间
|
|
|
+ const reservedSpace = 20;
|
|
|
+ const availableWidth = containerWidth - reservedSpace;
|
|
|
+
|
|
|
+ // 根据权重比例计算宽度
|
|
|
+ const baseWidth = availableWidth / totalWeight;
|
|
|
+ const colWidth = Math.floor(baseWidth * weight);
|
|
|
+
|
|
|
+ // 3列布局空间较紧，最小宽度35px
|
|
|
+ return Math.max(35, colWidth);
|
|
|
+ },
|
|
|
+
|
|
|
+ handleResize() {
|
|
|
+ clearTimeout(this.resizeTimer);
|
|
|
+ this.resizeTimer = setTimeout(() => {
|
|
|
+ this.updateWrapperWidths();
|
|
|
+ this.$forceUpdate();
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
+
|
|
|
+ async loadTableData(tab) {
|
|
|
+ if (this.loading[tab.name]) return;
|
|
|
+ try {
|
|
|
+ this.$set(this.loading, tab.name, true);
|
|
|
+ const currentPage = this.pageNo[tab.name] || 1;
|
|
|
+
|
|
|
+ const { data } = await QueryManageApi.loadTableData({
|
|
|
+ pageNo: currentPage,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ paramList: [],
|
|
|
+ id: tab.documentId,
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$set(this.tableData, tab.name, data?.list || []);
|
|
|
+ this.$set(this.total, tab.name, data?.total || 0);
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.updateWrapperWidths();
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error("加载数据失败:", error);
|
|
|
+ this.$set(this.tableData, tab.name, []);
|
|
|
+ } finally {
|
|
|
+ this.$set(this.loading, tab.name, false);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ startAutoPage(tab) {
|
|
|
+ this.stopAutoPage(tab);
|
|
|
+ const ms = this.num * 1000;
|
|
|
+ if (!ms || ms <= 0) return;
|
|
|
+
|
|
|
+ this.autoTimers[tab.name] = setInterval(async () => {
|
|
|
+ const maxPage = Math.max(
|
|
|
+ 1,
|
|
|
+ Math.ceil((this.total[tab.name] || 0) / this.pageSize)
|
|
|
+ );
|
|
|
+ const currentPage = this.pageNo[tab.name] || 1;
|
|
|
+ const nextPage = currentPage < maxPage ? currentPage + 1 : 1;
|
|
|
+
|
|
|
+ this.$set(this.pageNo, tab.name, nextPage);
|
|
|
+ await this.loadTableData(tab);
|
|
|
+ }, ms);
|
|
|
+ },
|
|
|
+
|
|
|
+ stopAutoPage(tab) {
|
|
|
+ if (this.autoTimers[tab.name]) {
|
|
|
+ clearInterval(this.autoTimers[tab.name]);
|
|
|
+ delete this.autoTimers[tab.name];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ startAllAutoPage() {
|
|
|
+ this.tabs.forEach((tab) => this.startAutoPage(tab));
|
|
|
+ },
|
|
|
+
|
|
|
+ clearAllTimers() {
|
|
|
+ Object.keys(this.autoTimers).forEach((key) => {
|
|
|
+ clearInterval(this.autoTimers[key]);
|
|
|
+ });
|
|
|
+ this.autoTimers = {};
|
|
|
+ },
|
|
|
+
|
|
|
+ restartAllAutoPage() {
|
|
|
+ this.clearAllTimers();
|
|
|
+ this.startAllAutoPage();
|
|
|
+ },
|
|
|
+
|
|
|
+ formatTimestamp(val) {
|
|
|
+ if (!val) return "";
|
|
|
+ const timestamp = String(val).length === 10 ? val * 1000 : val;
|
|
|
+ const d = new Date(Number(timestamp));
|
|
|
+ if (isNaN(d.getTime())) return val;
|
|
|
+ const pad = (n) => String(n).padStart(2, "0");
|
|
|
+ return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 行样式 - 优先使用后端返回的colorControl
|
|
|
+ rowStyle({ row, rowIndex }) {
|
|
|
+ if (row.colorControl) {
|
|
|
+ return {
|
|
|
+ backgroundColor: row.colorControl,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+
|
|
|
+ // 行类名 - 用于CSS选择器和斑马纹
|
|
|
+ tableRowClassName({ row, rowIndex }) {
|
|
|
+ if (row.colorControl) {
|
|
|
+ return "has-color-control";
|
|
|
+ }
|
|
|
+ return rowIndex % 2 === 0 ? "even-row" : "odd-row";
|
|
|
+ },
|
|
|
+
|
|
|
+ // 单元格样式 - 优先使用后端colorControl，否则斑马纹
|
|
|
+ cellStyle({ row, column, rowIndex, columnIndex }) {
|
|
|
+ const baseStyle = {
|
|
|
+ padding: "1px",
|
|
|
+ fontSize: "9px",
|
|
|
+ whiteSpace: "nowrap",
|
|
|
+ overflow: "hidden",
|
|
|
+ textOverflow: "ellipsis",
|
|
|
+ height: "12px",
|
|
|
+ lineHeight: "10px",
|
|
|
+ color: "#fff",
|
|
|
+ };
|
|
|
+
|
|
|
+ if (row.colorControl) {
|
|
|
+ return {
|
|
|
+ ...baseStyle,
|
|
|
+ backgroundColor: row.colorControl,
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ const bgColor = rowIndex % 2 === 0 ? "#0a1e44" : "#132a55";
|
|
|
+ return {
|
|
|
+ ...baseStyle,
|
|
|
+ backgroundColor: bgColor,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ headerCellStyle() {
|
|
|
+ return {
|
|
|
+ padding: "1px",
|
|
|
+ fontSize: "9px",
|
|
|
+ fontWeight: 600,
|
|
|
+ backgroundColor: "#071b38",
|
|
|
+ color: "#fff",
|
|
|
+ whiteSpace: "nowrap",
|
|
|
+ overflow: "hidden",
|
|
|
+ textOverflow: "ellipsis",
|
|
|
+ height: "14px",
|
|
|
+ lineHeight: "12px",
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
handleChange(v) {
|
|
|
const n = Number(v);
|
|
|
if (isNaN(n) || n < 0) {
|
|
|
@@ -93,6 +845,7 @@ export default {
|
|
|
}
|
|
|
this.num = n;
|
|
|
},
|
|
|
+
|
|
|
enterFullScreen() {
|
|
|
setTimeout(() => {
|
|
|
if (screenfull.isEnabled) {
|
|
|
@@ -105,7 +858,6 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-/* 主容器 - 自适应全屏 */
|
|
|
.app-container {
|
|
|
background: -webkit-radial-gradient(
|
|
|
50% 35%,
|
|
|
@@ -122,10 +874,9 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
box-sizing: border-box;
|
|
|
- overflow: hidden; /* 禁止滚动条 */
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-/* 控制栏 */
|
|
|
.control-bar {
|
|
|
flex-shrink: 0;
|
|
|
height: 28px;
|
|
|
@@ -153,25 +904,23 @@ export default {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
-/* 标题区域 */
|
|
|
.header-section {
|
|
|
flex-shrink: 0;
|
|
|
height: 32px;
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
|
|
|
-/* 内容区域 */
|
|
|
.content-section {
|
|
|
flex: 1;
|
|
|
min-height: 0;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-/* Grid布局 - 2列3行 */
|
|
|
+/* ========== 3列2行布局 ========== */
|
|
|
.grid-container {
|
|
|
display: grid;
|
|
|
- grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
- grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ grid-template-rows: repeat(3, minmax(0, 1fr));
|
|
|
gap: 6px;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
@@ -183,7 +932,6 @@ export default {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-/* 卡片样式 */
|
|
|
.list-card {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
@@ -203,20 +951,32 @@ export default {
|
|
|
|
|
|
.list-card ::v-deep .el-card__body {
|
|
|
flex: 1;
|
|
|
- padding: 4px;
|
|
|
+ padding: 0px;
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
-/* 内容区 */
|
|
|
-.query-container {
|
|
|
+.table-wrapper {
|
|
|
flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
min-height: 0;
|
|
|
- overflow: auto; /* 允许卡片内部滚动 */
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.page-indicator {
|
|
|
+ text-align: center;
|
|
|
+ color: #8adfec;
|
|
|
+ font-size: 9px;
|
|
|
+ padding: 1px 0;
|
|
|
+ background-color: #192849;
|
|
|
+ border-top: 1px solid #1a2e5a;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
-/* 输入框样式 */
|
|
|
::v-deep .el-input__inner {
|
|
|
background: transparent !important;
|
|
|
border: 1px solid #034f8e;
|
|
|
@@ -228,7 +988,6 @@ export default {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
-/* 卡片整体样式 */
|
|
|
::v-deep .el-card {
|
|
|
background-color: #0a1e44 !important;
|
|
|
border: 1px solid #1a2e5a !important;
|
|
|
@@ -243,4 +1002,117 @@ export default {
|
|
|
::v-deep .el-card__header {
|
|
|
border-bottom: 1px solid #1a2e5a;
|
|
|
}
|
|
|
+
|
|
|
+/* ========= 表格样式（含背景色） ========= */
|
|
|
+::v-deep .auto-fit-table {
|
|
|
+ width: 100% !important;
|
|
|
+ flex: 1;
|
|
|
+ font-size: 9px !important;
|
|
|
+ background-color: #0a1e44 !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .el-table__body-wrapper,
|
|
|
+::v-deep .auto-fit-table .el-table__header-wrapper {
|
|
|
+ overflow: hidden !important;
|
|
|
+ background-color: #0a1e44 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 空数据提示样式 */
|
|
|
+::v-deep .auto-fit-table .el-table__empty-block {
|
|
|
+ background-color: #0a1e44 !important;
|
|
|
+ min-height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .el-table__empty-text {
|
|
|
+ color: #8adfec !important;
|
|
|
+ font-size: 9px;
|
|
|
+ line-height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .el-table__body,
|
|
|
+::v-deep .auto-fit-table .el-table__header {
|
|
|
+ width: 100% !important;
|
|
|
+ table-layout: fixed !important;
|
|
|
+ background-color: #0a1e44 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表头背景色 */
|
|
|
+::v-deep .auto-fit-table .el-table__header th {
|
|
|
+ padding: 0 !important;
|
|
|
+ font-size: 9px !important;
|
|
|
+ height: auto !important;
|
|
|
+ line-height: 1.1;
|
|
|
+ font-weight: 600;
|
|
|
+ background-color: #071b38 !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 单元格基础背景色 */
|
|
|
+::v-deep .auto-fit-table .el-table__body td {
|
|
|
+ padding: 0 !important;
|
|
|
+ font-size: 9px !important;
|
|
|
+ height: auto !important;
|
|
|
+ line-height: 1.1;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 有colorControl时的行 - 背景色由inline style控制 */
|
|
|
+::v-deep .auto-fit-table .has-color-control td {
|
|
|
+ background-color: inherit !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 斑马纹 - 仅对没有colorControl的行生效 */
|
|
|
+::v-deep .auto-fit-table .even-row td {
|
|
|
+ background-color: #0a1e44 !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .odd-row td {
|
|
|
+ background-color: #132a55 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 鼠标悬停 - 有colorControl时不改变颜色 */
|
|
|
+::v-deep .auto-fit-table .has-color-control:hover td {
|
|
|
+ background-color: inherit !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .even-row:hover td,
|
|
|
+::v-deep .auto-fit-table .odd-row:hover td {
|
|
|
+ background-color: rgba(138, 223, 236, 0.2) !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table.el-table--border,
|
|
|
+::v-deep .auto-fit-table.el-table--border th,
|
|
|
+::v-deep .auto-fit-table.el-table--border td {
|
|
|
+ border-color: #1a2e5a !important;
|
|
|
+ border-width: 1px !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table .cell {
|
|
|
+ font-size: 9px !important;
|
|
|
+ line-height: 1.1 !important;
|
|
|
+ padding: 0 1px !important;
|
|
|
+ white-space: nowrap !important;
|
|
|
+ overflow: hidden !important;
|
|
|
+ text-overflow: ellipsis !important;
|
|
|
+ background-color: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .auto-fit-table td .cell,
|
|
|
+::v-deep .auto-fit-table th .cell {
|
|
|
+ padding-left: 1px !important;
|
|
|
+ padding-right: 1px !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-loading-mask {
|
|
|
+ background-color: rgba(10, 30, 68, 0.8) !important;
|
|
|
+}
|
|
|
+/*设置卡片中的header区域的高度由字体大小撑开
|
|
|
+.list-card ::v-deep .el-card__header {
|
|
|
+ min-height: auto !important;
|
|
|
+ height: auto !important;
|
|
|
+ padding: 2px 8px;
|
|
|
+ line-height: 1.2;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+*/
|
|
|
</style>
|
chensibo