eduerpos_ui_manage/src/components/page/admin/inspect/rectification/Detail.vue

<template>
  <el-dialog title="整改详情" :visible.sync="dialogVisible" width="760px" @open="load" :close-on-click-modal="false">
    <div class="detail-wrap" v-loading="loading">
      <div class="head" v-if="rounds.length">
        <div class="head-main">{{ rounds[0].storeName }} · {{ rounds[0].indicatorName }}</div>
        <div class="head-meta">
          <span>当前轮次：第 {{ rounds[rounds.length - 1].rectRound || 1 }} 轮</span>
          <span v-if="rounds[0].taskId">任务ID：{{ rounds[0].taskId }}</span>
        </div>
      </div>

      <el-timeline v-if="rounds.length">
        <el-timeline-item v-for="r in rounds" :key="r.rectId" :timestamp="'第 ' + (r.rectRound || 1) + ' 轮整改'" placement="top" :color="rectColor(r.status)">
          <div class="round-card">
            <div class="round-head">
              <span class="round-title">指标：{{ r.indicatorName }}</span>
              <el-tag size="mini" :style="rectStyle(r.status)">{{ rectText(r.status) }}</el-tag>
              <el-button v-if="r.status === 3" type="primary" size="mini" @click="$emit('recheck', r)">复检</el-button>
            </div>

            <!-- 下发通知 -->
            <div class="node">
              <div class="node-title"><i class="el-icon-message"></i> 下发整改通知<span class="node-time">{{ fmt(r.createDate, true) }}</span></div>
              <div class="node-content">
                <div v-if="r.noticeContent">{{ r.noticeContent }}</div>
                <div class="kv"><span>巡检得分：{{ fmtNum(r.inspectScore) }} / 及格分：{{ fmtNum(r.passScore) }}</span></div>
                <div class="kv"><span>截止日期：{{ fmt(r.deadlineDate, true) }}</span></div>
                <div class="kv" v-if="r.urgeCount"><span>已催办 {{ r.urgeCount }} 次（最近 {{ fmt(r.lastUrgeDate, true) }}）</span></div>
              </div>
            </div>

            <!-- 门店反馈 -->
            <div class="node" :class="{ empty: !r.feedbackDate }">
              <div class="node-title"><i class="el-icon-shop"></i> 门店提交整改反馈<span class="node-time">{{ fmt(r.feedbackDate, true) }}</span></div>
              <div class="node-content" v-if="r.feedbackDate">
                <div v-if="r.feedbackContent">{{ r.feedbackContent }}</div>
                <div class="pic-row" v-if="pictures(r.feedbackPictures).length">
                  <el-image
                    v-for="(p, i) in pictures(r.feedbackPictures)"
                    :key="i"
                    :src="p"
                    fit="cover"
                    :preview-src-list="pictures(r.feedbackPictures)"
                    class="thumb" />
                </div>
              </div>
              <div class="muted" v-else>门店尚未提交反馈</div>
            </div>

            <!-- 复检结果 -->
            <div class="node" :class="{ empty: !r.recheckDate }">
              <div class="node-title"><i class="el-icon-search"></i> 巡检员复检<span class="node-time">{{ fmt(r.recheckDate, true) }}</span></div>
              <div class="node-content" v-if="r.recheckDate">
                <div class="kv">
                  <span>复检得分：{{ fmtNum(r.recheckScore) }}</span>
                  <el-tag size="mini" :type="r.recheckResult === 1 ? 'success' : 'danger'" class="kv-tag">{{ r.recheckResult === 1 ? '复检通过' : '复检不通过' }}</el-tag>
                  <span v-if="r.recheckUserName" class="kv-user">复检人：{{ r.recheckUserName }}</span>
                </div>
                <div v-if="r.recheckRmk">{{ r.recheckRmk }}</div>
                <div class="pic-row" v-if="pictures(r.recheckPictures).length">
                  <el-image
                    v-for="(p, i) in pictures(r.recheckPictures)"
                    :key="i"
                    :src="p"
                    fit="cover"
                    :preview-src-list="pictures(r.recheckPictures)"
                    class="thumb" />
                </div>
              </div>
              <div class="muted" v-else>尚未复检</div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>

      <div class="empty" v-else>未找到整改记录</div>
    </div>
    <span slot="footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { post, fmt, fmtNum, splitPictures, RECT_STATUS } from '../common'

export default {
  name: 'InspectRectificationDetail',
  props: {
    visible: Boolean,
    row: Object
  },
  computed: {
    dialogVisible: {
      get() { return this.visible },
      set(v) { this.$emit('update:visible', v) }
    }
  },
  data() {
    return { loading: false, rounds: [] }
  },
  methods: {
    load() {
      if (!this.row) return
      this.loading = true
      // 同任务同指标的多轮整改：通过 taskItemId 查询全部轮次
      const q = this.row.taskItemId
        ? { taskItemId: this.row.taskItemId, pageSize: 50, currentPage: 1 }
        : { taskId: this.row.taskId, indicatorId: this.row.indicatorId, pageSize: 50, currentPage: 1 }
      post(this.$axios, '/inspectManage/rectification/page', q).then(res => {
        const list = (res && res.list) || []
        this.rounds = list.length ? list.sort((a, b) => (a.rectRound || 1) - (b.rectRound || 1)) : [this.row]
      }).finally(() => { this.loading = false })
    },
    pictures(str) { return splitPictures(str) },
    rectText(v) { return (RECT_STATUS[v] || {}).text || '-' },
    rectStyle(v) {
      const st = RECT_STATUS[v]
      return { background: st.color, borderColor: st.color, color: '#fff' }
    },
    rectColor(v) { return (RECT_STATUS[v] || {}).color || '#909399' },
    fmt,
    fmtNum
  }
}
</script>

<style scoped>
.detail-wrap { max-height: 560px; overflow-y: auto; }
.head { background: #f5f7fa; border-radius: 4px; padding: 12px 16px; margin-bottom: 16px; }
.head-main { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.head-meta { display: flex; gap: 18px; color: #606266; font-size: 13px; }
.round-card { border: 1px solid #ebeef5; border-radius: 6px; padding: 12px 14px; }
.round-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.round-title { font-weight: 600; flex: 1; }
.node { border-left: 3px solid #ebeef5; padding: 4px 0 12px 14px; margin-left: 4px; }
.node.empty { border-left-color: #f0f2f5; }
.node-title { color: #303133; font-weight: 600; margin-bottom: 6px; }
.node-time { color: #909399; font-weight: 400; font-size: 12px; margin-left: 10px; }
.node-content { color: #606266; font-size: 13px; line-height: 1.7; }
.kv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kv-user { color: #909399; }
.pic-row { display: flex; gap: 8px; margin-top: 8px; }
.thumb { width: 56px; height: 56px; border-radius: 4px; }
.muted { color: #909399; font-size: 12px; }
.empty { color: #909399; padding: 30px; text-align: center; }
</style>