数字钢卷的修改日志开发

2026-07-13 10:39:34 +08:00
parent fdba2fb78d
commit 048aeefa77
8 changed files with 529 additions and 2 deletions
--- a/klp-ui/src/api/wms/coilChangeLog.js
+++ b/klp-ui/src/api/wms/coilChangeLog.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 根据钢卷ID查询钢卷变更日志
+export function getCoilChangeLogByCoilId(coilId) {
+  return request({
+    url: '/wms/coilChangeLog/byCoilId/' + coilId,
+    method: 'get',
+    timeout: 100000
+  })
+}
--- a/klp-ui/src/views/wms/coil/info/components/ChangeLogSection.vue
+++ b/klp-ui/src/views/wms/coil/info/components/ChangeLogSection.vue
@@ -0,0 +1,486 @@
+<template>
+  <div class="section change-log-section">
+    <div class="section-header">
+      <span class="section-icon">&#128221;</span>
+      <span class="section-title">修改日志</span>
+    </div>
+    <div class="section-body">
+      <el-table
+        v-if="changeLogs.length"
+        :data="changeLogs"
+        border
+        stripe
+        size="small"
+        v-loading="loading"
+        :header-cell-style="{ background: '#f5f7fa', color: '#303133', fontWeight: 600 }"
+        style="width: 100%"
+      >
+        <el-table-column prop="operationDesc" label="操作类型" min-width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span class="operation-badge">{{ scope.row.operationDesc }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="修改信息" min-width="420">
+          <template slot-scope="scope">
+            <div class="change-log-line">
+              <div class="change-log-line-boxes">
+                <div
+                  v-for="(item, idx) in scope.row.previewItems"
+                  :key="scope.row.logId + '-' + idx"
+                  class="mini-change-item"
+                  :title="previewText(item)"
+                >
+                  <span class="mini-change-label">{{ item.label }}</span>
+                  <span class="mini-change-box old">{{ item.oldText }}</span>
+                  <span class="mini-change-arrow">→</span>
+                  <span class="mini-change-box new">{{ item.newText }}</span>
+                </div>
+              </div>
+              <el-button
+                v-if="scope.row.moreCount > 0"
+                type="text"
+                size="mini"
+                class="more-btn"
+                @click="openMoreDialog(scope.row)"
+              >
+                更多 {{ scope.row.moreCount }} 项
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createBy" label="修改人" width="120" show-overflow-tooltip />
+        <el-table-column label="修改时间" width="170" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ formatDateTime(scope.row.createTime) }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-empty
+        v-else-if="!loading"
+        description="暂无修改日志"
+        :image-size="60"
+      />
+
+      <el-dialog
+        title="全部修改信息"
+        :visible.sync="dialogVisible"
+        width="960px"
+        append-to-body
+      >
+        <div v-if="activeLog" class="change-log-dialog">
+          <div class="change-log-dialog-meta">
+            <span>操作类型：{{ activeLog.operationDesc }}</span>
+            <span>修改人：{{ activeLog.createBy }}</span>
+            <span>修改时间：{{ formatDateTime(activeLog.createTime) }}</span>
+          </div>
+          <div class="change-log-grid all-items">
+            <div
+              v-for="(item, idx) in activeLog.summaryItems"
+              :key="'dialog-' + activeLog.logId + '-' + idx"
+              class="change-log-card"
+            >
+              <div class="change-log-card-header">
+                <span class="change-field-name">{{ item.label }}</span>
+              </div>
+              <div class="change-log-card-body">
+                <div class="change-value-box old">
+                  <span class="change-value-label">原值</span>
+                  <span class="change-value-text">{{ item.oldText }}</span>
+                </div>
+                <span class="change-arrow">→</span>
+                <div class="change-value-box new">
+                  <span class="change-value-label">新值</span>
+                  <span class="change-value-text">{{ item.newText }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCoilChangeLogByCoilId } from '@/api/wms/coilChangeLog'
+
+const CHANGE_FIELD_LABELS = {
+  currentCoilNo: '当前钢卷号',
+  enterCoilNo: '入场钢卷号',
+  supplierCoilNo: '厂家原料号',
+  itemName: '物料名称',
+  specification: '规格',
+  material: '材质',
+  netWeight: '净重',
+  grossWeight: '毛重',
+  warehouseName: '库位',
+  actualWarehouseName: '实际库区',
+  qualityStatus: '质量状态',
+  manufacturer: '厂家',
+  zincLayer: '镀层质量',
+  status: '状态',
+  remark: '备注',
+  saleName: '销售员',
+  actualLength: '实际长度',
+  actualWidth: '实际宽度',
+  actualThickness: '实际厚度',
+  length: '长度',
+  theoreticalLength: '理论长度',
+  theoreticalThickness: '理论厚度',
+  trimmingRequirement: '净边料要求',
+  packagingRequirement: '包装要求',
+  contractNo: '合同号',
+  chromePlateCoilNo: '镀铬卷号',
+  productionStartTime: '生产开始时间',
+  productionEndTime: '生产结束时间',
+  productionDuration: '生产时长'
+}
+
+const HIDDEN_CHANGE_FIELDS = new Set([
+  'warehouseId',
+  'actualWarehouseId',
+  'itemId',
+  'parentCoilId',
+  'parentCoilIds',
+  'parentCoilNos',
+  'hasMergeSplit',
+  'exclusiveStatus'
+])
+
+const PREVIEW_ITEM_LIMIT = 3
+
+export default {
+  name: 'ChangeLogSection',
+  props: {
+    coilId: { type: [String, Number], default: '' }
+  },
+  data() {
+    return {
+      loading: false,
+      changeLogs: [],
+      dialogVisible: false,
+      activeLog: null
+    }
+  },
+  watch: {
+    coilId: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.loadChangeLogs()
+        } else {
+          this.changeLogs = []
+        }
+      }
+    }
+  },
+  methods: {
+    formatDateTime(val) {
+      if (!val) return '-'
+      const date = new Date(val)
+      if (isNaN(date.getTime())) return String(val)
+      const y = date.getFullYear()
+      const m = String(date.getMonth() + 1).padStart(2, '0')
+      const d = String(date.getDate()).padStart(2, '0')
+      const hh = String(date.getHours()).padStart(2, '0')
+      const mm = String(date.getMinutes()).padStart(2, '0')
+      const ss = String(date.getSeconds()).padStart(2, '0')
+      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+    },
+    getFieldLabel(field) {
+      return CHANGE_FIELD_LABELS[field] || field
+    },
+    shouldHideField(field, diffMap) {
+      if (HIDDEN_CHANGE_FIELDS.has(field)) return true
+      if (field.endsWith('Id') && diffMap[`${field.slice(0, -2)}Name`]) return true
+      return false
+    },
+    normalizeDisplayValue(field, val) {
+      if (val === null || val === undefined || val === '') return '-'
+      if (typeof val === 'number' && /Time$/.test(field)) {
+        return this.formatDateTime(val)
+      }
+      if (typeof val === 'string' && /^\d{13}$/.test(val) && /Time$/.test(field)) {
+        return this.formatDateTime(Number(val))
+      }
+      if (Array.isArray(val)) return val.length ? val.join(', ') : '-'
+      if (typeof val === 'object') {
+        try {
+          return JSON.stringify(val)
+        } catch (e) {
+          return String(val)
+        }
+      }
+      return String(val)
+    },
+    buildSummaryItem(field, oldVal, newVal) {
+      const oldText = this.normalizeDisplayValue(field, oldVal)
+      const newText = this.normalizeDisplayValue(field, newVal)
+      if (oldText === newText) return null
+      return {
+        field,
+        label: this.getFieldLabel(field),
+        oldText,
+        newText
+      }
+    },
+    buildSummaryItems(log) {
+      const items = []
+      if (log.changedFields) {
+        try {
+          const diffMap = JSON.parse(log.changedFields)
+          Object.keys(diffMap || {}).forEach(key => {
+            if (this.shouldHideField(key, diffMap)) return
+            const item = diffMap[key] || {}
+            const summaryItem = this.buildSummaryItem(key, item.old, item.new)
+            if (summaryItem) items.push(summaryItem)
+          })
+        } catch (e) {
+          items.push({
+            field: 'raw',
+            label: '修改内容',
+            oldText: '-',
+            newText: log.changedFields
+          })
+        }
+      }
+      if (!items.length && log.oldCoilNo !== log.newCoilNo) {
+        items.push(this.buildSummaryItem('currentCoilNo', log.oldCoilNo, log.newCoilNo))
+      }
+      if (!items.length && log.operationDesc) {
+        items.push({
+          field: 'operationDesc',
+          label: '修改内容',
+          oldText: '-',
+          newText: log.operationDesc
+        })
+      }
+      return items.length ? items : [{
+        field: 'empty',
+        label: '修改内容',
+        oldText: '-',
+        newText: '-'
+      }]
+    },
+    previewText(item) {
+      if (!item) return '-'
+      return `${item.label}：${item.oldText}→${item.newText}`
+    },
+    openMoreDialog(row) {
+      this.activeLog = row
+      this.dialogVisible = true
+    },
+    async loadChangeLogs() {
+      if (!this.coilId) return
+      this.loading = true
+      try {
+        const res = await getCoilChangeLogByCoilId(this.coilId)
+        const rows = (res && res.data) || []
+        this.changeLogs = rows.map(item => ({
+          ...item,
+          createBy: item.createBy || '-',
+          operationDesc: item.operationDesc || '-',
+          summaryItems: this.buildSummaryItems(item)
+        })).map(item => {
+          const previewItems = (item.summaryItems || []).slice(0, PREVIEW_ITEM_LIMIT)
+          return {
+            ...item,
+            previewItems,
+            moreCount: Math.max(item.summaryItems.length - previewItems.length, 0)
+          }
+        })
+      } catch (e) {
+        console.error('获取钢卷修改日志失败：', e)
+        this.changeLogs = []
+        this.activeLog = null
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.operation-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 11px;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.18);
+  color: #2563eb;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.change-log-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.change-log-line-boxes {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.mini-change-item {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #fff;
+  min-width: 0;
+}
+
+.mini-change-label {
+  color: #475569;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.mini-change-box {
+  display: inline-block;
+  max-width: 140px;
+  padding: 0 6px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  font-size: 11px;
+  line-height: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #1e293b;
+}
+
+.mini-change-box.old {
+  background: #fff7ed;
+  border-color: #fed7aa;
+}
+
+.mini-change-box.new {
+  background: #ecfdf5;
+  border-color: #a7f3d0;
+}
+
+.mini-change-arrow {
+  color: #94a3b8;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.change-log-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 6px;
+  padding: 0;
+}
+
+.change-log-grid.all-items {
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.more-btn {
+  padding: 0;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.change-log-card {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.change-log-card-header {
+  display: flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 0 8px;
+  background: #f8fafc;
+  border-bottom: 1px solid #edf2f7;
+}
+
+.change-field-name {
+  font-size: 11px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.change-log-card-body {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  min-height: 44px;
+}
+
+.change-value-box {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  padding: 6px 8px;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  background: #fff;
+}
+
+.change-value-box.old {
+  background: #fff7ed;
+  border-color: #fed7aa;
+}
+
+.change-value-box.new {
+  background: #ecfdf5;
+  border-color: #a7f3d0;
+}
+
+.change-value-label {
+  margin-bottom: 2px;
+  font-size: 10px;
+  color: #94a3b8;
+  line-height: 1.2;
+}
+
+.change-value-text {
+  color: #1e293b;
+  font-size: 11px;
+  line-height: 1.35;
+  word-break: break-all;
+}
+
+.change-arrow {
+  flex: 0 0 auto;
+  color: #94a3b8;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.change-log-dialog-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 20px;
+  margin-bottom: 10px;
+  color: #606266;
+  font-size: 12px;
+}
+
+@media (max-width: 768px) {
+  .change-log-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
--- a/klp-ui/src/views/wms/coil/info/components/CostInfoSection.vue
+++ b/klp-ui/src/views/wms/coil/info/components/CostInfoSection.vue
@@ -53,6 +53,7 @@
      <div v-else-if="!pathLoading && pathChecked" class="cost-chart-wrap">
        <el-empty description="暂无加工路径数据" :image-size="60" />
      </div>
+
    </div>
  </div>
 </template>
@@ -704,4 +705,5 @@ export default {
  font-weight: 600;
  color: #f56c6c;
 }
+
 </style>
--- a/klp-ui/src/views/wms/coil/info/index.vue
+++ b/klp-ui/src/views/wms/coil/info/index.vue
@@ -1,4 +1,4 @@
-<template>
+<template>
  <div class="coil-info-page" v-loading="loading">
    <div class="content-container">
      <BasicInfoSection :coilInfo="coilInfo" :initialQualityStatus="initialQualityStatus" />
@@ -42,6 +42,8 @@
      <ProductionCharts v-if="isColdHardCoil"
        :segData="segData" :gaugeRows="gaugeRows" :shapeRows="shapeRows"
        :perfSegCount="perfSegCount" :segLoading="segLoading" :realtimeLoading="realtimeLoading" />
+
+      <ChangeLogSection :coil-id="coilId" />
    </div>
  </div>
 </template>
@@ -64,6 +66,7 @@ import LifecycleTrace from './components/LifecycleTrace.vue'
 import ContractInfo from './components/ContractInfo.vue'
 import SalesObjectionTable from './components/SalesObjectionTable.vue'
 import TransferRecords from './components/TransferRecords.vue'
+import ChangeLogSection from './components/ChangeLogSection.vue'
 // import InspectionInfo from './components/InspectionInfo.vue'
 import ProductionCharts from './components/ProductionCharts.vue'

@@ -77,6 +80,7 @@ export default {
    ContractInfo,
    SalesObjectionTable,
    TransferRecords,
+    ChangeLogSection,
    // InspectionInfo,
    ProductionCharts
  },