wms / wms4_guangxihongwang · Files

<template>
  <a-layout>
    <a-layout-header class="header">
      <h1 style="color: white;">库存差异比较系统</h1>
    </a-layout-header>

    <a-layout-content class="content">
      <!-- 数据加载状态 -->
      <a-card title="数据状态" style="margin-bottom: 20px;">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-statistic
              title="WCS系统数据量"
              :value="systemATotal"
              :value-style="{ color: systemALoaded ? '#3f8600' : '#cf1322' }"
            >
              <template #suffix>
                <a-tag :color="systemALoaded ? 'green' : 'red'">
                  {{ systemALoaded ? '已加载' : '加载中' }}
                </a-tag>
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="WMS系统数据量"
              :value="systemBTotal"
              :value-style="{ color: systemBLoaded ? '#3f8600' : '#cf1322' }"
            >
              <template #suffix>
                <a-tag :color="systemBLoaded ? 'green' : 'red'">
                  {{ systemBLoaded ? '已加载' : '加载中' }}
                </a-tag>
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="数据更新时间"
              :value="dataUpdateTime"
            />
          </a-col>
        </a-row>

        <div style="text-align: center; margin-top: 20px;">
          <a-button
            type="primary"
            @click="loadAllData"
            :loading="loadingData"
            :disabled="loadingData"
          >
            <reload-outlined />
            {{ loadingData ? '数据加载中...' : '重新加载数据' }}
          </a-button>
        </div>
      </a-card>

      <!-- WCS系统数据展示 -->
      <a-card title="WCS系统库存数据" style="margin-bottom: 20px;">
        <a-table
          :scroll="{ x: true,y: 300 }"
          :data-source="systemAData"
          :columns="systemAColumns"
          :pagination="systemAPagination"
          :loading="loadingSystemA"
          size="small"
          @change="handleSystemAPageChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'count'">
              <span :style="{ fontWeight: 'bold', color: '#1890ff' }">
                {{ record.count }}
              </span>
            </template>
          </template>
        </a-table>
      </a-card>

      <!-- WMS系统数据展示 -->
      <a-card title="WMS系统库存数据" style="margin-bottom: 20px;">
        <a-table
          :scroll="{ x: true,y: 300 }"
          :dataSource="systemBData"
          :columns="systemBColumns"
          :pagination="systemBPagination"
          :loading="loadingSystemB"
          size="small"
          @change="handleSystemBPageChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'qty'">
              <span :style="{ fontWeight: 'bold', color: '#52c41a' }">
                {{ record.qty }}
              </span>
            </template>
          </template>
        </a-table>
      </a-card>

      <!-- 数据比较控制 -->
      <a-card title="数据比较" style="margin-bottom: 20px;">
        <div style="text-align: center;">
          <a-button
            type="primary"
            size="large"
            @click="compareData"
            :disabled="!systemALoaded || !systemBLoaded || comparing"
            :loading="comparing"
          >
            <template #icon><SearchOutlined /></template>
            {{ comparing ? '比较中...' : '开始比较数据' }}
          </a-button>

          <a-button
            v-if="comparing"
            size="large"
            @click="cancelCompare"
            danger
            style="margin-left: 10px;"
          >
            <template #icon><ExclamationCircleOutlined /></template>
            取消比较
          </a-button>
        </div>

        <!-- 比较状态指示器 -->
        <div v-if="comparing" style="text-align: center; margin-top: 10px;">
          <a-spin size="large" />
          <p style="margin-top: 10px; color: #1890ff;">
            数据比较中，请稍候...
          </p>
        </div>
      </a-card>

      <!-- 比较结果区域 -->
      <a-card
        title="差异分析结果"
        v-if="comparisonResult.length && !comparing"
      >
        <!-- 统计概览 -->
        <a-row :gutter="16" style="margin-bottom: 20px;">
          <a-col :span="6">
            <a-statistic title="总记录数" :value="comparisonResult.length" />
          </a-col>
          <a-col :span="6">
            <a-statistic
              title="完全匹配"
              :value="matchCount"
              :value-style="{ color: '#3f8600' }"
            />
          </a-col>
          <a-col :span="6">
            <a-statistic
              title="数量差异"
              :value="quantityDiffCount"
              :value-style="{ color: '#cf1322' }"
            />
          </a-col>
          <a-col :span="6">
            <a-statistic
              title="仅单系统存在"
              :value="singleSystemCount"
              :value-style="{ color: '#faad14' }"
            />
          </a-col>
        </a-row>

        <!-- 差异详情 -->
        <a-table
          :scroll="{ x: true,y: 300 }"
          :columns="detailColumns"
          :data-source="comparisonResult"
          :rowClassName="(record) => getRowClassByStatus(record.status)"
          :pagination="{
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
          }"
          size="small"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>

            <template v-if="column.dataIndex === 'systemAQty' && record.status === wcsConstant.QUANTITY_DIFF">
              <span style="color: #cf1322; font-weight: bold;">
                {{ record.systemAQty }}
              </span>
            </template>

            <template v-if="column.dataIndex === 'systemBQty' && record.status === wcsConstant.QUANTITY_DIFF">
              <span style="color: #cf1322; font-weight: bold;">
                {{ record.systemBQty }}
              </span>
            </template>

            <template v-if="column.dataIndex === 'countDiff'">
              <span
                :style="{
                  color: record.countDiff === 0 ? '#3f8600' : '#cf1322',
                  fontWeight: 'bold'
                }"
              >
                {{ record.countDiff > 0 ? '+' : '' }}{{ record.countDiff }}
              </span>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script>
import {
  UploadOutlined,
  SearchOutlined,
  ExclamationCircleOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import {compare, getInventoryDetailByLocationCode} from "../../../api/api";
import {httpAction} from "../../../api/manage";
import * as wcsConstant from "../../../utils/wcsConstant";

export default {
  name: 'CompareInventory',
  components: {
    UploadOutlined,
    SearchOutlined,
    ExclamationCircleOutlined,
    ReloadOutlined,
  },
  data() {
    return {
      // WCS系统数据相关
      systemAData: [],
      systemATotal: 0,
      systemALoaded: false,
      loadingSystemA: false,
      systemAPagination: {
        current: 1,
        pageSize: 5,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['5','10', '20', '30','100','1000','3250'],
        showQuickJumper: true,
      },

      // WMS系统数据相关
      systemBData: [],
      systemBTotal: 0,
      systemBLoaded: false,
      loadingSystemB: false,
      systemBPagination: {
        current: 1,
        pageSize: 5,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['5','10', '20', '30','100','1000','3250'],
        showQuickJumper: true,
      },

      // 比较结果相关
      comparisonResult: [],
      comparing: false,
      cancelToken: null,

      // 加载状态
      loadingData: false,
      dataUpdateTime: '--',

      // 表格列定义（使用驼峰命名）
      systemAColumns: [
        { title: '库位编码', dataIndex: 'locationNo', key: 'locationNo', width: 150 },
        { title: '物料编码', dataIndex: 'no', key: 'no', width: 120 },
        { title: '物料名称', dataIndex: 'name', key: 'name', width: 150 },
        { title: '数量', dataIndex: 'count', key: 'count', width: 80 },
        { title: '单位', dataIndex: 'unit', key: 'unit', width: 80 },
      ],

      systemBColumns: [
        { title: '库位编码', dataIndex: 'locationCode', key: 'locationCode', width: 150 },
        { title: '物料编码', dataIndex: 'materialCode', key: 'materialCode', width: 120 },
        { title: '物料名称', dataIndex: 'materialName', key: 'materialName', width: 150 },
        { title: '数量', dataIndex: 'qty', key: 'qty', width: 80 },
        { title: '单位', dataIndex: 'materialUnit', key: 'materialUnit', width: 80 },
      ],

      detailColumns: [
        { title: '库位编码', dataIndex: 'locationCode', key: 'locationCode', width: 150 },
        { title: '物料编码', dataIndex: 'materialCode', key: 'materialCode', width: 120 },
        { title: '物料名称', dataIndex: 'materialName', key: 'materialName', width: 150 },
        { title: 'WCS系统数量', dataIndex: 'systemAQty', key: 'systemAQty', width: 100 },
        { title: 'WMS系统数量', dataIndex: 'systemBQty', key: 'systemBQty', width: 100 },
        { title: '数量差异', dataIndex: 'countDiff', key: 'countDiff', width: 100 },
        { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
      ],
    };
  },
  computed: {
    wcsConstant() {
      return wcsConstant
    },
    matchCount() {
      return this.comparisonResult.filter(item => item.status === wcsConstant.MATCH).length;
    },
    quantityDiffCount() {
      return this.comparisonResult.filter(item => item.status === wcsConstant.QUANTITY_DIFF).length;
    },
    singleSystemCount() {
      return this.comparisonResult.filter(item =>
        item.status === wcsConstant.ONLY_IN_A || item.status === wcsConstant.ONLY_IN_B
      ).length;
    },
  },
  mounted() {
    // // 页面加载时自动获取数据
    // this.loadAllData();
  },
  methods: {
    // 加载所有数据
    async loadAllData() {
      this.loadingData = true;
      this.dataUpdateTime = '加载中...';

      try {
        // 并行加载WCS系统和WMS系统的数据
        await Promise.all([
          this.loadSystemAData(1),
          this.loadSystemBData(1)
        ]);

        this.dataUpdateTime = new Date().toLocaleString();
        message.success('数据加载完成');
      } catch (error) {
        message.error('数据加载失败');
        console.error(error);
      } finally {
        this.loadingData = false;
      }
    },

    // 加载WCS系统数据
    async loadSystemAData(page) {
      this.loadingSystemA = true;
      console.log("WCS库存返回开始")
      try {
        const response = await this.$http.get('/config/location/wcsInventory', {
          params: {
            pageNo: page,
            pageSize: this.systemAPagination.pageSize
          }
        });
        console.log("WCS库存返回结果")
        console.log(JSON.stringify(response))

        if (response.success) {
          this.systemAData = response.result;
          this.systemATotal = response.total;
          this.systemALoaded = true;

          // 更新分页信息
          this.systemAPagination.current = page;
          this.systemAPagination.total = response.total;
        } else {
          throw new Error(response.message);
        }
      } catch (error) {
        this.systemALoaded = false;
        console.error('加载WCS系统数据失败:', error);
        message.error('加载WCS系统数据失败');
      } finally {
        this.loadingSystemA = false;
      }
    },

    // 加载WMS系统数据
    async loadSystemBData(page) {
      this.loadingSystemB = true;

      try {
        getInventoryDetailByLocationCode()
        const response = await this.$http.get('/inventory/inventoryDetail/list', {
          params: {
            pageNo: page,
            pageSize: this.systemBPagination.pageSize
          }
        });
        if (response.success) {
          this.systemBData = response.result.records;
          this.systemBTotal = response.result.total;
          this.systemBLoaded = true;

          // 更新分页信息
          this.systemBPagination.current = page;
          this.systemBPagination.total = response.result.total;
        } else {
          throw new Error(response.message);
        }
      } catch (error) {
        this.systemBLoaded = false;
        console.error('加载WMS系统数据失败:', error);
        message.error('加载WMS系统数据失败');
      } finally {
        this.loadingSystemB = false;
      }
    },
    // WCS系统分页变化处理
    handleSystemAPageChange(pagination) {
      this.systemAPagination.pageSize = pagination.pageSize;
      this.loadSystemAData(pagination.current);
    },
    // WMS系统分页变化处理
    handleSystemBPageChange(pagination) {
      this.systemBPagination.pageSize = pagination.pageSize;
      this.loadSystemBData(pagination.current);
    },
    // 比较数据
    compareData() {
      if (this.comparing && this.cancelToken) {
        this.cancelToken.cancel('用户取消了请求');
        return;
      }
      this.comparing = true;
      this.comparisonResult = [];

      httpAction("/config/location/compare", {}, 'POST').then((res) => {
        if (res.success) {
          this.comparisonResult = res.result;
          message.success(`数据比较完成，共发现 ${this.comparisonResult.length} 条记录`);
        } else {
          this.$message.error(res.message);
        }
      }).finally(() => {
        this.comparing = false;
      })
    },
    // 取消比较
    cancelCompare() {
      if (this.comparing && this.cancelToken) {
        this.cancelToken.cancel('用户取消了比较操作');
        message.info('已取消数据比较');
      }
    },

    getRowClassByStatus(status) {
      const statusClassMap = {
        3 : 'status-match',
        0 : 'status-quantity-diff',
        1 : 'status-only-a',
        2 : 'status-only-b'
      };
      return statusClassMap[status] || '';
    },
    // 状态颜色
    getStatusColor(status) {
      const colors = {
        3 : 'green',
        0 : 'red',
        1 : 'orange',
        2 : 'blue',
      };
      return colors[status] || 'default';
    },

    // 状态文本
    getStatusText(status) {
      const texts = {
        3 : '完全匹配',
        0 : '数量差异',
        1 : '仅WCS系统存在',
        2 : '仅WMS系统存在',
      };
      return texts[status] || '未知';
    },
  },
};
</script>

<style scoped>
.header {
  background-color: #001529;
  padding: 0 20px;
}

.content {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 64px);
}

.ant-card {
  margin-bottom: 16px;
}

/* 解决scoped样式穿透问题，确保样式能应用到表格行 */
::v-deep .status-match {
  background-color: #f6ffed !important; /* 绿色 - 完全匹配 */
}

::v-deep .status-quantity-diff {
  background-color: #fff1f0 !important; /* 红色 - 数量差异 */
}

::v-deep .status-only-a {
  background-color: #fff7e6 !important; /* 橙色 - 仅WCS系统存在 */
}

::v-deep .status-only-b {
  background-color: #e6f7ff !important; /* 蓝色 - 仅WMS系统存在 */
}

/* 行 hover 效果 */
::v-deep .ant-table-tbody > tr.status-match:hover > td {
  background-color: #eaffdf !important;
}

::v-deep .ant-table-tbody > tr.status-quantity-diff:hover > td {
  background-color: #ffe8e6 !important;
}

::v-deep .ant-table-tbody > tr.status-only-a:hover > td {
  background-color: #fff0cc !important;
}

::v-deep .ant-table-tbody > tr.status-only-b:hover > td {
  background-color: #ccf0ff !important;
}
</style>