feat: 增加日志记录历史消息

wlzboy

2026-03-24 6676a35122fd9c97d1b1679c211bc8a9b97f08f2

 ruoyi-ui/src/views/task/general/detail.vue

@@ -605,6 +605,51 @@
      </div>
    </el-card>

    <!-- 状态变更历史 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>状态变更历史</span>
      </div>

      <el-timeline v-if="statusHistoryList && statusHistoryList.length > 0">
        <el-timeline-item
          v-for="item in statusHistoryList"
          :key="item.id"
          :timestamp="parseTime(item.changeTime)"
          :color="getStatusColor(item.toStatus)"
          placement="top"
        >
          <el-card shadow="never" class="status-history-card">
            <div class="status-history-header">
              <span class="status-arrow">
                <el-tag v-if="item.fromStatus" size="small" :type="getTagType(item.fromStatus)">{{ item.fromStatusName || item.fromStatus }}</el-tag>
                <span v-else style="color: #C0C4CC; font-size: 13px;">初始创建</span>
                <i class="el-icon-arrow-right" style="margin: 0 8px; color: #909399;"></i>
                <el-tag size="small" :type="getTagType(item.toStatus)">{{ item.toStatusName || item.toStatus }}</el-tag>
              </span>
              <el-tag size="mini" :type="getSourceTagType(item.changeSource)" style="margin-left: 12px;">
                {{ getSourceLabel(item.changeSource) }}
              </el-tag>
            </div>
            <div style="margin-top: 8px; color: #606266; font-size: 13px;">
              <span><i class="el-icon-user" style="margin-right: 4px;"></i>{{ item.operatorName || '--' }}</span>
              <span v-if="item.changeReason" style="margin-left: 16px;">
                <i class="el-icon-chat-dot-round" style="margin-right: 4px;"></i>{{ item.changeReason }}
              </span>
              <span v-if="item.locationAddress" style="margin-left: 16px;">
                <i class="el-icon-location-outline" style="margin-right: 4px;"></i>{{ item.locationAddress }}
              </span>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>

      <div v-else style="text-align: center; padding: 40px 0; color: #909399;">
        <i class="el-icon-time" style="font-size: 48px; display: block; margin-bottom: 12px;"></i>
        <span>暂无状态变更记录</span>
      </div>
    </el-card>

    <!-- 操作日志 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
@@ -798,7 +843,7 @@
</template>

<script>
import { getTask, updateTask, assignTask, changeTaskStatus, uploadAttachment, deleteAttachment, getTaskVehicles, getAvailableVehicles, assignVehiclesToTask, unassignVehicleFromTask, getPaymentInfo, syncServiceOrder, syncDispatchOrder, syncTaskStatus, syncFromLegacySystem, checkTaskInvoice } from "@/api/task";
import { getTask, updateTask, assignTask, changeTaskStatus, uploadAttachment, deleteAttachment, getTaskVehicles, getAvailableVehicles, assignVehiclesToTask, unassignVehicleFromTask, getPaymentInfo, syncServiceOrder, syncDispatchOrder, syncTaskStatus, syncFromLegacySystem, checkTaskInvoice, getTaskStatusHistory } from "@/api/task";
import { listUser } from "@/api/system/user";
import { getToken } from "@/utils/auth";

@@ -850,6 +895,8 @@
      additionalFeeList: [],
      // 支付信息
      paymentInfo: null,
      // 状态变更历史
      statusHistoryList: [],
      // 上传相关
      uploadUrl: process.env.VUE_APP_BASE_API + "/task/attachment/upload/" + (new URLSearchParams(window.location.search).get('taskId') || ''),
      uploadHeaders: {
@@ -902,6 +949,7 @@
    this.getTaskDetail();
    this.getUserList();
    this.getAdditionalFeeList();
    this.loadStatusHistory();
    // 初始化上传URL
    this.uploadUrl = process.env.VUE_APP_BASE_API + "/task/attachment/upload/" + this.$route.params.taskId;
    // 检查发票申请状态
@@ -919,6 +967,56 @@
    }
  },
  methods: {
    /** 加载状态变更历史 */
    loadStatusHistory() {
      getTaskStatusHistory(this.$route.params.taskId).then(response => {
        this.statusHistoryList = response.data || [];
      }).catch(() => {
        this.statusHistoryList = [];
      });
    },
    /** 获取状态对应的 Tag 类型 */
    getTagType(status) {
      const map = {
        PENDING:   'info',
        DEPARTING: 'warning',
        IN_PROGRESS: '',
        COMPLETED: 'success',
        CANCELLED: 'danger'
      };
      return map[status] || 'info';
    },
    /** 获取状态对应的时间轴颜色 */
    getStatusColor(status) {
      const map = {
        PENDING:     '#909399',
        DEPARTING:   '#E6A23C',
        IN_PROGRESS: '#409EFF',
        COMPLETED:   '#67C23A',
        CANCELLED:   '#F56C6C'
      };
      return map[status] || '#909399';
    },
    /** 获取触发来源标签类型 */
    getSourceTagType(source) {
      const map = {
        APP:    'primary',
        ADMIN:  'warning',
        SYSTEM: 'info',
        LEGACY: ''
      };
      return map[source] || 'info';
    },
    /** 获取触发来源文字 */
    getSourceLabel(source) {
      const map = {
        APP:    'APP端',
        ADMIN:  '后台',
        SYSTEM: '系统',
        LEGACY: '旧系统'
      };
      return map[source] || source || '--';
    },
    /** 获取任务详情 */
    getTaskDetail() {
      getTask(this.$route.params.taskId).then(response => {
@@ -1325,4 +1423,17 @@
.box-card {
  margin-bottom: 20px;
}
.status-history-card {
  border: none;
  background: #fafafa;
}
.status-history-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.status-arrow {
  display: flex;
  align-items: center;
}
</style>