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

<template>
  <el-dialog title="计划详情" :visible.sync="dialogVisible" width="880px" @open="load">
    <div class="detail-wrap" v-loading="loading">
      <div class="block">
        <h4>基本信息</h4>
        <div class="info-grid" v-if="plan">
          <div class="info-item"><label>计划名称</label><span>{{ plan.planName || '-' }}</span></div>
          <div class="info-item"><label>计划类型</label><span>{{ planTypeText(plan.planType) }}</span></div>
          <div class="info-item"><label>巡检周期</label><span>{{ cycleText(plan.cycleType) }}</span></div>
          <div class="info-item"><label>日期范围</label><span>{{ fmt(plan.startDate) }} ~ {{ fmt(plan.endDate) }}</span></div>
          <div class="info-item"><label>下次执行</label><span>{{ fmt(plan.nextExecuteDate) }}</span></div>
          <div class="info-item"><label>巡检员</label><span>{{ plan.inspectorName || '-' }}</span></div>
          <div class="info-item"><label>门店数</label><span>{{ plan.storeCount || 0 }}</span></div>
          <div class="info-item"><label>状态</label><span><el-tag size="mini" :type="planStatus(plan.status).type">{{ planStatus(plan.status).text }}</el-tag></span></div>
          <div class="info-item"><label>自动采集</label><span>{{ plan.autoCollectFlag === 1 ? '开启' : '关闭' }}</span></div>
          <div class="info-item full"><label>备注</label><span>{{ plan.rmk || '-' }}</span></div>
        </div>
      </div>

      <div class="block">
        <h4>关联指标（{{ indicators.length }}）</h4>
        <el-table :data="indicators" border size="mini" max-height="260">
          <el-table-column prop="indicatorName" label="指标名称" min-width="130" />
          <el-table-column label="类型" width="80">
            <template slot-scope="s"><el-tag size="mini" :type="s.row.indicatorType === 1 ? 'primary' : 'warning'">{{ s.row.indicatorType === 1 ? '自动' : '人工' }}</el-tag></template>
          </el-table-column>
          <el-table-column prop="maxScore" label="满分" width="70" align="center" />
          <el-table-column prop="passScore" label="及格分" width="70" align="center" />
          <el-table-column prop="weight" label="权重%" width="80" align="center" />
        </el-table>
      </div>

      <div class="block">
        <h4>关联门店（{{ stores.length }}）</h4>
        <el-table :data="stores" border size="mini" max-height="260">
          <el-table-column prop="storeName" label="门店名称" min-width="160" />
          <el-table-column prop="storeBelongto" label="归属校区" width="100" />
          <el-table-column prop="province" label="省" width="80" />
          <el-table-column prop="city" label="市" width="80" />
        </el-table>
      </div>

      <div class="block">
        <div class="block-head">
          <h4>已生成任务（{{ tasks.length }}）</h4>
          <el-button type="primary" size="mini" @click="$emit('generate', plan && plan.planId)">生成任务</el-button>
        </div>
        <el-table :data="tasks" border size="mini" max-height="280">
          <el-table-column prop="taskId" label="任务ID" width="80" />
          <el-table-column prop="storeName" label="门店" min-width="140" />
          <el-table-column label="执行日期" width="110">
            <template slot-scope="s">{{ fmt(s.row.taskDate) }}</template>
          </el-table-column>
          <el-table-column label="总分" width="100">
            <template slot-scope="s">{{ fmtNum(s.row.totalScore) }}/{{ fmtNum(s.row.maxScore) }}</template>
          </el-table-column>
          <el-table-column label="结果" width="80">
            <template slot-scope="s">
              <el-tag v-if="s.row.status === 3" size="mini" :type="s.row.passFlag === 1 ? 'success' : 'danger'">{{ s.row.passFlag === 1 ? '及格' : '不及格' }}</el-tag>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="90">
            <template slot-scope="s"><el-tag size="mini" :type="taskStatus(s.row.status).type">{{ taskStatus(s.row.status).text }}</el-tag></template>
          </el-table-column>
        </el-table>
        <div class="empty" v-if="!tasks.length">该计划暂未生成任务，可点击“生成任务”按执行日期创建。</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { post, fmt, fmtNum, PLAN_TYPE, CYCLE_TYPE, PLAN_STATUS, TASK_STATUS } from '../common'

export default {
  name: 'InspectPlanDetail',
  props: {
    visible: Boolean,
    planId: [Number, String]
  },
  computed: {
    dialogVisible: {
      get() { return this.visible },
      set(v) { this.$emit('update:visible', v) }
    }
  },
  data() {
    return { loading: false, plan: null, indicators: [], stores: [], tasks: [] }
  },
  methods: {
    load() {
      if (!this.planId) return
      this.loading = true
      Promise.all([
        post(this.$axios, '/inspectPlanManage/getPlanDetail', { id: this.planId }),
        post(this.$axios, '/inspectPlanManage/getPlanIndicators', { planId: this.planId }),
        post(this.$axios, '/inspectPlanManage/getPlanStores', { planId: this.planId }),
        post(this.$axios, '/inspectTaskManage/getTaskPage', { planId: this.planId, pageSize: 50, currentPage: 1 })
      ]).then(([r1, r2, r3, r4]) => {
        this.plan = (r1 && r1.obj) || null
        this.indicators = (r2 && r2.list) || []
        this.stores = (r3 && r3.list) || []
        this.tasks = (r4 && r4.list) || []
      }).finally(() => { this.loading = false })
    },
    planStatus(v) { return PLAN_STATUS[v] || { text: '-', type: 'info' } },
    taskStatus(v) { return TASK_STATUS[v] || { text: '-', type: 'info' } },
    planTypeText(v) { return PLAN_TYPE[v] || '-' },
    cycleText(v) { return CYCLE_TYPE[v] || '-' },
    fmt,
    fmtNum
  }
}
</script>

<style scoped>
.detail-wrap { max-height: 560px; overflow-y: auto; }
.block { margin-bottom: 18px; }
.block h4 { margin: 0 0 10px; color: #303133; }
.info-grid { display: flex; flex-wrap: wrap; background: #fafbfc; border: 1px solid #ebeef5; border-radius: 4px; padding: 6px 0; }
.info-item { width: 33.33%; display: flex; padding: 8px 14px; box-sizing: border-box; }
.info-item.full { width: 100%; }
.info-item label { width: 74px; color: #909399; flex-shrink: 0; }
.block-head { display: flex; justify-content: space-between; align-items: center; }
.empty { color: #909399; padding: 12px 0; }
</style>