eduerpos_ui_manage/src/components/page/admin/inspect/task/Execute.vue

<template>
  <el-dialog title="执行巡检" :visible.sync="dialogVisible" width="860px" @open="load" :close-on-click-modal="false">
    <div class="exec-wrap" v-loading="loading">
      <!-- 任务信息 -->
      <div class="task-head" v-if="task">
        <div class="task-title">{{ task.storeName }} · {{ task.planName }}</div>
        <div class="task-meta">
          <span>执行日期：{{ fmt(task.taskDate) }}</span>
          <span>巡检员：{{ task.inspectorName || '-' }}</span>
          <span v-if="task.status === 1">
            <el-tag size="mini" type="warning">待执行</el-tag>
          </span>
          <span v-else-if="task.status === 2">
            <el-tag size="mini" type="primary">执行中</el-tag>
          </span>
          <el-button v-if="task.status === 1" type="primary" size="mini" :loading="starting" @click="start">开始执行</el-button>
        </div>
        <el-alert v-if="task.status === 3" type="success" :closable="false" title="任务已提交，不可修改" />
      </div>

      <!-- 自动采集指标 -->
      <div class="sec" v-if="autoItems.length">
        <h4>自动采集指标（只读）</h4>
        <div v-for="item in autoItems" :key="item.taskItemId" class="auto-item">
          <div class="ai-left">
            <span class="ai-name">{{ item.indicatorName }}</span>
            <el-tag size="mini" type="primary">自动</el-tag>
          </div>
          <div class="ai-right">
            <span class="ai-raw" v-if="item.rawValueText">原始值：{{ item.rawValueText }}</span>
            <span class="ai-score">得分：{{ fmtNum(item.score) }}/{{ fmtNum(item.maxScore) }}</span>
            <el-tag size="mini" :type="item.passFlag === 1 ? 'success' : 'danger'">{{ item.passFlag === 1 ? '及格' : '不及格' }}</el-tag>
            <span class="ai-weight">权重 {{ fmtNum(item.weight) }}%</span>
          </div>
        </div>
      </div>

      <!-- 人工巡检指标 -->
      <div class="sec" v-if="manualItems.length">
        <h4>人工巡检指标（需打分）</h4>
        <div v-for="item in manualItems" :key="item.taskItemId" class="manual-item">
          <div class="mi-head">
            <span class="ai-name">{{ item.indicatorName }}</span>
            <el-tag size="mini" type="warning">人工</el-tag>
            <span class="mi-pass" v-if="scored(item)">
              <el-tag size="mini" :type="itemPass(item) ? 'success' : 'danger'">{{ itemPass(item) ? '及格' : '不及格' }}</el-tag>
            </span>
            <span class="grow"></span>
            <span class="mi-weight">权重 {{ fmtNum(item.weight) }}% · 满分 {{ fmtNum(item.maxScore) }} · 及格 {{ fmtNum(item.passScore) }}</span>
          </div>
          <div class="mi-body">
            <div class="mi-score">
              <span class="mi-label">得分</span>
              <el-input-number v-model="item.score" :min="0" :max="Number(item.maxScore || 0)" :step="1" :precision="1" :disabled="!canEdit" @change="onScoreChange" />
              <span class="mi-unit">/ {{ fmtNum(item.maxScore) }}</span>
            </div>
            <div class="mi-pics">
              <span class="mi-label">照片</span>
              <div class="pic-list">
                <div v-for="(p, idx) in item._pics" :key="idx" class="pic-item">
                  <el-image :src="p" fit="cover" :preview-src-list="item._pics" class="pic-img" />
                  <i class="el-icon-close pic-del" v-if="canEdit" @click="removePic(item, idx)"></i>
                </div>
                <el-upload
                  v-if="canEdit && item._pics.length < 5"
                  :http-request="opts => uploadItemPic(item, opts)"
                  :show-file-list="false"
                  accept="image/*"
                  action="#">
                  <div class="pic-add"><i class="el-icon-plus"></i><span>上传</span></div>
                </el-upload>
              </div>
            </div>
            <div class="mi-rmk">
              <span class="mi-label">备注</span>
              <el-input v-model="item.rmk" :disabled="!canEdit" type="textarea" :rows="2" placeholder="巡检备注" />
            </div>
          </div>
        </div>
      </div>

      <!-- 汇总 -->
      <div class="summary">
        <div class="sum-item"><span>加权总分</span><b class="sum-total">{{ fmtNum(totalScore) }}</b><em>/ {{ fmtNum(maxScore) }}</em></div>
        <div class="sum-item"><span>及格线</span><b>{{ fmtNum(passScore) }}</b></div>
        <div class="sum-item">
          <span>结果</span>
          <el-tag v-if="task && task.status === 3" size="small" :type="task.passFlag === 1 ? 'success' : 'danger'">{{ task.passFlag === 1 ? '及格' : '不及格' }}</el-tag>
          <el-tag v-else-if="allScored" size="small" :type="passFlag ? 'success' : 'danger'">{{ passFlag ? '及格' : '不及格' }}</el-tag>
          <el-tag v-else size="small" type="info">未完成</el-tag>
        </div>
        <div class="sum-item grow">
          <span>不合格项</span>
          <span class="unpass" v-if="unpassItems.length">{{ unpassItems.join('、') }}</span>
          <span v-else class="muted">无</span>
        </div>
      </div>
    </div>

    <span slot="footer" class="exec-footer">
      <span class="hint">提交后系统将自动生成整改记录（如存在不合格项）</span>
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button v-if="canEdit" :loading="savingDraft" @click="saveDraft">保存草稿</el-button>
      <el-button v-if="canEdit" type="primary" :loading="submitting" @click="submit">提交巡检</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { post, ok, msg, fmt, fmtNum, splitPictures, joinPictures, upload } from '../common'

export default {
  name: 'InspectTaskExecute',
  props: {
    visible: Boolean,
    taskId: [Number, String]
  },
  computed: {
    dialogVisible: {
      get() { return this.visible },
      set(v) { this.$emit('update:visible', v) }
    },
    autoItems() { return this.items.filter(i => i.indicatorType === 1) },
    manualItems() { return this.items.filter(i => i.indicatorType === 2) },
    canEdit() { return !!(this.task && this.task.status === 2) },
    totalScore() {
      return this.items.reduce((s, i) => s + ((Number(i.score) || 0) * (Number(i.weight) || 0) / 100), 0)
    },
    maxScore() { return Number((this.task && this.task.maxScore) || 0) },
    passScore() { return Number((this.task && this.task.passScore) || 0) },
    passFlag() { return this.totalScore >= this.passScore },
    allScored() {
      return this.manualItems.every(i => i.score !== null && i.score !== undefined && i.score !== '')
    },
    unpassItems() {
      return this.items.filter(i => i.score !== null && i.score !== undefined && i.score !== '' && Number(i.score) < Number(i.passScore || 0)).map(i => i.indicatorName)
    }
  },
  data() {
    return { loading: false, task: null, items: [], starting: false, savingDraft: false, submitting: false }
  },
  methods: {
    load() {
      if (!this.taskId) return
      this.loading = true
      Promise.all([
        post(this.$axios, '/inspectManage/task/detail', { id: this.taskId }),
        post(this.$axios, '/inspectManage/task/items', { taskId: this.taskId })
      ]).then(([r1, r2]) => {
        this.task = (r1 && r1.obj) || null
        this.items = ((r2 && r2.list) || []).map(i => Object.assign({}, i, { _pics: splitPictures(i.pictureUrls) }))
      }).finally(() => { this.loading = false })
    },
    start() {
      this.starting = true
      post(this.$axios, '/inspectManage/task/start', { id: this.taskId, inspectorId: this.task.inspectorId }).then(res => {
        if (ok(res)) {
          this.$message.success('已开始执行')
          post(this.$axios, '/inspectManage/task/detail', { id: this.taskId }).then(r => {
            this.task = (r && r.obj) || this.task
          })
        } else {
          this.$message.error(msg(res) || '开始失败')
        }
      }).finally(() => { this.starting = false })
    },
    scored(item) {
      return item.score !== null && item.score !== undefined && item.score !== ''
    },
    itemPass(item) {
      return Number(item.score) >= Number(item.passScore || 0)
    },
    onScoreChange() {
      // 实时计算由 computed 完成
    },
    beforeUpload(file) {
      if (file.size > 204800) {
        this.$message.error('单张图片不能超过 200KB')
        return false
      }
      if (file.type && file.type.indexOf('image') !== 0) {
        this.$message.error('仅支持图片文件')
        return false
      }
      return true
    },
    uploadItemPic(item, opts) {
      if (!this.beforeUpload(opts.file)) {
        opts.onError(new Error('invalid'))
        return
      }
      upload(this.$axios, opts.file, '/inspect').then(res => {
        if (ok(res) && res.obj) {
          item._pics.push(res.obj)
          if (item._pics.length > 5) {
            item._pics.splice(5, item._pics.length - 5)
            this.$message.warning('每项最多上传 5 张图片')
          }
          opts.onSuccess(res)
        } else {
          this.$message.error(msg(res) || '上传失败')
          opts.onError(new Error(msg(res) || 'upload failed'))
        }
      }).catch(() => {
        this.$message.error('上传失败')
        opts.onError(new Error('upload failed'))
      })
    },
    removePic(item, idx) {
      item._pics.splice(idx, 1)
    },
    itemPayload(item) {
      const payload = Object.assign({}, item)
      delete payload._pics
      delete payload.createDate
      delete payload.updateDate
      payload.pictureUrls = joinPictures(item._pics)
      return payload
    },
    saveDraft() {
      const reqs = this.manualItems.map(item => post(this.$axios, '/inspectManage/taskItem/update', this.itemPayload(item)))
      this.savingDraft = true
      Promise.all(reqs).then(results => {
        const failed = results.filter(r => !ok(r))
        if (failed.length) {
          this.$message.error('部分评分项保存失败')
        } else {
          this.$message.success('草稿已保存')
        }
      }).catch(() => this.$message.error('保存失败')).finally(() => { this.savingDraft = false })
    },
    submit() {
      if (!this.allScored) return this.$message.warning('请先为所有人工巡检指标打分')
      const invalid = this.manualItems.filter(i => Number(i.score) > Number(i.maxScore))
      if (invalid.length) return this.$message.warning('存在超出满分范围的得分，请检查')
      this.submitting = true
      const reqs = this.manualItems.map(item => post(this.$axios, '/inspectManage/taskItem/update', this.itemPayload(item)))
      Promise.all(reqs).then(results => {
        const failed = results.filter(r => !ok(r))
        if (failed.length) throw new Error('评分项保存失败')
        return post(this.$axios, '/inspectManage/task/submit', { id: this.taskId, inspectorId: this.task.inspectorId })
      }).then(res => {
        if (ok(res)) {
          this.$message.success('提交成功，已自动生成整改记录（如有不合格项）')
          this.$emit('saved')
        } else {
          this.$message.error(msg(res) || '提交失败')
        }
      }).catch(err => {
        this.$message.error(err && err.message ? err.message : '提交失败')
      }).finally(() => { this.submitting = false })
    },
    fmt,
    fmtNum
  }
}
</script>

<style scoped>
.exec-wrap { max-height: 520px; overflow-y: auto; }
.task-head { background: #f5f7fa; border-radius: 4px; padding: 12px 16px; margin-bottom: 14px; }
.task-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.task-meta { display: flex; gap: 18px; align-items: center; color: #606266; font-size: 13px; flex-wrap: wrap; }
.sec { margin-bottom: 16px; }
.sec h4 { margin: 0 0 8px; font-size: 13px; color: #606266; }
.auto-item { display: flex; justify-content: space-between; align-items: center; background: #fafbfc; border: 1px solid #ebeef5; border-radius: 4px; padding: 10px 14px; margin-bottom: 8px; }
.ai-left { display: flex; align-items: center; gap: 8px; }
.ai-name { font-weight: 600; }
.ai-right { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.ai-raw { color: #909399; }
.ai-score { color: #606266; }
.ai-weight { color: #909399; }
.manual-item { border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 10px; }
.mi-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fafbfc; border-bottom: 1px solid #ebeef5; }
.grow { flex: 1; }
.mi-weight { color: #909399; font-size: 12px; }
.mi-body { padding: 12px 14px; }
.mi-score, .mi-pics, .mi-rmk { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.mi-label { width: 48px; color: #909399; font-size: 13px; line-height: 32px; flex-shrink: 0; }
.mi-unit { line-height: 32px; color: #909399; }
.pic-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pic-item { position: relative; }
.pic-img { width: 60px; height: 60px; border-radius: 4px; display: block; }
.pic-del { position: absolute; top: -6px; right: -6px; background: #f56c6c; color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; line-height: 16px; text-align: center; cursor: pointer; }
.pic-add { width: 60px; height: 60px; border: 1px dashed #dcdfe6; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #909399; cursor: pointer; }
.pic-add i { font-size: 18px; }
.pic-add span { font-size: 11px; }
.summary { display: flex; align-items: center; gap: 26px; background: #f5f7fa; border-radius: 4px; padding: 12px 16px; margin-top: 4px; }
.sum-item { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: #606266; }
.sum-total { font-size: 22px; color: #409eff; }
.sum-item em { color: #909399; font-style: normal; }
.unpass { color: #f56c6c; }
.muted { color: #909399; }
.exec-footer { display: flex; align-items: center; gap: 10px; }
.hint { color: #909399; font-size: 12px; flex: 1; }
</style>