预测偏差

src/router/plan.js

@@ -60,6 +60,12 @@ const plant = {
 					title: "预测版本",
 					component: () => import("@/views/plan/workbench/predictVersion"),
 				},
+				{
+					icon: "el-icon-document",
+					path: "/plan/workbench/predictionDeviation",
+					title: "预测偏差",
+					component: () => import("@/views/plan/workbench/predictionDeviation"),
+				},
 			]
 		},
 	],

src/views/plan/workbench/predictionDeviation/index.vue

@@ -0,0 +1,347 @@
+<template>
+  <div ref="tableRef" class="table-height-wrap predict-deviation-wrapper">
+    <SearchTemplate>
+      <el-form :inline="true" class="clearfix search-content">
+        <el-form-item label="版本号" style="margin-bottom: 0">
+          <el-select
+            style="width: 200px"
+            v-model="queryParams.versionId"
+            filterable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in getSpecifiedVersion"
+              :key="item['AP_CustDemandVerHead-VersionId']"
+              :label="item['AP_CustDemandVerHead-VersionId']"
+              :value="item['AP_CustDemandVerHead-VersionId']"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="版本号2" style="margin-bottom: 0">
+          <el-select
+            style="width: 200px"
+            v-model="queryParams.versionIdTwo"
+            filterable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in getSpecifiedVersion"
+              :key="item['AP_CustDemandVerHead-VersionId']"
+              :label="item['AP_CustDemandVerHead-VersionId']"
+              :value="item['AP_CustDemandVerHead-VersionId']"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="客户">
+          <el-select
+            style="width: 200px"
+            v-model="queryParams.customerId"
+            placeholder="请选择"
+            multiple
+            filterable
+            collapse-tags
+            :loading="customerLoading"
+            @visible-change="setCustomerList"
+          >
+            <el-option
+              v-for="item in customerArray"
+              :key="item['Customer-CustomerId']"
+              :label="item['Customer-Name1']"
+              :value="item['Customer-CustomerId']"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="物料">
+          <el-select
+            style="width: 200px"
+            v-model="queryParams.artId"
+            filterable
+            :loading="artIdLoading"
+            @visible-change="setArtList"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in artList"
+              :key="item['Article-ArtId']"
+              :label="item['Article-ArtId'] + '-' + item['Article-Descr1']"
+              :value="item['Article-ArtId']"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            icon="el-icon-search"
+            size="mini"
+            :disabled="!queryParams.versionId || !queryParams.versionIdTwo"
+            class="search-button-style"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button
+            icon="el-icon-refresh"
+            size="mini"
+            class="reset-button-style"
+            @click="resetQuery"
+            >重置</el-button
+          >
+          <el-button
+            icon="el-icon-download"
+            class="add-button-style"
+            @click="handleNewExport"
+            style="margin-left: 24px;width: 150px;"
+            >导出最新预测偏差</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </SearchTemplate>
+    <ContentContainer>
+      <el-table
+        v-if="tableHeight"
+        :height="tableHeight"
+        :data="tableData1"
+        v-loading="loading"
+        size="mini"
+        @header-dragend="
+          (newWidth, oldWidth, column) => saveRowWidth(column, newWidth)
+        "
+        border
+        :span-method="objectSpanMethod"
+      >
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-ArtId')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-ArtId"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-Descr1')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-Descr1"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('Customer-CustomerId')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["Customer-CustomerId"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('Customer-Name1')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["Customer-Name1"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-LastUser')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-LastUser"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('User-Name')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["User-Name"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["title"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="item in headers"
+          :key="item"
+          :width="getRowWidth(item)"
+          :label="getColumnName(item)"
+          :show-overflow-tooltip="true"
+        >
+          <template #default="scope">
+            <span>{{ scope.row[item] || 0 }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-show="pagination.total > 0"
+        v-model:pagination="pagination"
+        @change="getTableList"
+      />
+    </ContentContainer>
+  </div>
+</template>
+<script>
+import { ListMixin } from "@/mixins/ListMixin";
+import { get } from "@/server/api.js";
+import { getArtIdList } from "@/server/productionPlanning/emergencyOrder";
+export default {
+  mixins: [ListMixin],
+  data() {
+    return {
+      artList: [],
+      customerArray: [],
+      queryTableDataUrl: "/admin/ap/custdemandverhead/differencepage",
+      headers: [], // 遍历表头
+      tableHeight: 0,
+      artIdLoading: false,
+      customerLoading: false,
+      tableData1: [],
+      getSpecifiedVersion: [],
+    };
+  },
+  methods: {
+    // 合并单元格
+		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex < 6) {
+        if (rowIndex % row.row === 0) {
+          return {
+            rowspan: row.row,
+            colspan: 1,
+          }
+        } else {	
+          return {
+            rowspan: 0,
+            colspan: 0,
+          }
+        }
+      }
+    },
+    // 查询分页列表
+    getTableList() {
+      this.loading = true;
+      for (let key in this.queryParams) {
+        if (this.queryParams[key] == '') {
+          this.queryParams[key] = undefined
+        }
+      }
+      get(this.queryTableDataUrl, {
+        ...this.pagination,
+        ...this.queryParams,
+        "customerId": this.queryParams.customerId ? this.queryParams.customerId.join(",") : undefined
+      })
+        .then(({ code, data: { count = 0, records: { Data = [], Head = [] } } }) => {
+          if (code === 200) {
+            this.headers = Head || []
+            this.tableData1 = (Data || []).map(el => {
+              return {
+                ...el,
+                ...el.item
+              }
+            })
+            this.pagination.total = count
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(() => {
+          this.loading = false
+        });
+    },
+    // 物料列表
+    setArtList() {
+      if (this.artList.length > 0) {
+        // 已经有数据了，请求过接口
+      } else {
+        this.artIdLoading = true
+        getArtIdList().then(({ data = [] }) => {
+          this.artIdLoading = false
+          this.artList = data;
+        }).catch(() => {
+          this.artIdLoading = false
+        })
+      }
+    },
+    // 客户列表
+    setCustomerList() {
+      if (this.customerArray.length > 0) {
+        // 已经有数据了，请求过接口
+      } else {
+        this.customerLoading = true
+        get('/admin/base/customer/customerlst').then(({ data = [] }) => {
+          this.customerLoading = false
+          this.customerArray = data
+        }).catch(() => {
+          this.customerLoading = false
+        })
+      }
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      this.pagination.pageNumber = 1;
+      this.getTableList();
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.queryParams.customerId = [];
+      this.queryParams.versionId = '';
+      this.queryParams.artId = '';
+      this.handleQuery();
+    },
+    // 根据客户查询版本
+    getVersionOfCustom() {
+      get(`/admin/ap/custdemandverhead/selectuinquelist`).then(({ code, data }) => {
+        if (code === 200) {
+          this.getSpecifiedVersion = data
+        }
+      })
+    },
+    // 导出最新预测偏差
+    handleNewExport() {
+      for (let key in this.queryParams) {
+        if (this.queryParams[key] == '' || key == 'versionId') {
+          this.queryParams[key] = undefined
+        }
+      }
+      get(`/admin/ap/custdemandverhead/difference`, {
+        ...this.queryParams,
+        "customerId": this.queryParams.customerId ? this.queryParams.customerId.join(",") : undefined
+      }).then(res => {
+        let link = document.createElement('a');
+        link.style.display = 'none';
+        link.href = (process.env.VUE_APP_BASE_URL || "http://101.201.121.115:9003/") + res.data;
+        link.setAttribute('download', '最新预测偏差.xlsx');
+        document.body.appendChild(link);
+        link.click();
+      })
+    },
+  },
+  created() {
+    this.getVersionOfCustom()
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = this.calculationTableHeight(
+        this.$refs.tableRef,
+        120
+      );
+    })
+  }
+};
+</script>
+<style lang="less" scoped>
+.predict-deviation-wrapper {
+  height: 100%;
+  overflow: hidden;
+}
+</style>