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

<template>
  <section class="panel">
    <div class="toolbar">
      <el-select v-model="query.storeId" placeholder="门店" clearable filterable style="width: 180px;">
        <el-option v-for="s in stores" :key="s.storeId" :label="s.storeName" :value="s.storeId" />
      </el-select>
      <el-select v-model="query.indicatorId" placeholder="指标" clearable filterable style="width: 180px;">
        <el-option v-for="i in indicators" :key="i.indicatorId" :label="i.indicatorName" :value="i.indicatorId" />
      </el-select>
      <el-select v-model="query.status" placeholder="整改状态" clearable>
        <el-option label="待整改" :value="1" />
        <el-option label="整改中" :value="2" />
        <el-option label="待复检" :value="3" />
        <el-option label="复检通过" :value="4" />
        <el-option label="复检不通过" :value="5" />
        <el-option label="已超期" :value="6" />
        <el-option label="最终不通过" :value="7" />
      </el-select>
      <el-date-picker v-model="deadlineRange" type="daterange" value-format="yyyy-MM-dd" start-placeholder="截止开始" end-placeholder="截止结束" style="width: 240px;" />
      <el-button type="primary" @click="load()">查询</el-button>
      <el-button @click="reset">重置</el-button>
      <span class="grow"></span>
      <el-button type="warning" plain :disabled="!selected.length" @click="batchVisible = true">批量设置截止日期（{{ selected.length }}）</el-button>
      <el-button type="primary" plain @click="loadAll()">刷新</el-button>
    </div>

    <!-- 整改统计 -->
    <div class="stat-cards">
      <div class="stat-card" v-for="c in statItems" :key="c.label">
        <span>{{ c.label }}</span>
        <b :style="{ color: c.color }">{{ c.value }}</b>
        <em>条</em>
      </div>
    </div>

    <el-table :data="rows" border stripe v-loading="loading" @selection-change="onSelect">
      <el-table-column type="selection" width="45" />
      <el-table-column prop="rectId" label="ID" width="75" />
      <el-table-column prop="storeName" label="门店" min-width="130" />
      <el-table-column prop="indicatorName" label="指标" min-width="120" />
      <el-table-column label="轮次" width="70" align="center">
        <template slot-scope="s">第 {{ s.row.rectRound || 1 }} 轮</template>
      </el-table-column>
      <el-table-column label="巡检/及格" width="100">
        <template slot-scope="s">{{ fmtNum(s.row.inspectScore) }} / {{ fmtNum(s.row.passScore) }}</template>
      </el-table-column>
      <el-table-column label="截止日期" width="115">
        <template slot-scope="s">{{ fmt(s.row.deadlineDate, true) }}</template>
      </el-table-column>
      <el-table-column label="反馈日期" width="115">
        <template slot-scope="s">{{ fmt(s.row.feedbackDate, true) }}</template>
      </el-table-column>
      <el-table-column label="复检日期" width="115">
        <template slot-scope="s">{{ fmt(s.row.recheckDate, true) }}</template>
      </el-table-column>
      <el-table-column label="催办" width="80" align="center">
        <template slot-scope="s">
          <span v-if="s.row.urgeCount">{{ s.row.urgeCount }} 次</span>
          <span v-else class="muted">-</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="s">
          <el-tag size="mini" :style="rectStyle(s.row.status)">{{ rectText(s.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="s">
          <el-button type="text" @click="openDetail(s.row)">详情</el-button>
          <el-button type="text" v-if="canUrge(s.row)" @click="urge(s.row)">催办</el-button>
          <el-button type="text" v-if="s.row.status === 3" @click="openRecheck(s.row)">复检</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pager">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="query.pageSize"
        :current-page="query.currentPage"
        @size-change="n => { query.pageSize = n; load() }"
        @current-change="n => { query.currentPage = n; load() }"
      />
    </div>

    <el-dialog title="批量设置截止日期" :visible.sync="batchVisible" width="420px">
      <el-form label-width="100px">
        <el-form-item label="已选记录">{{ selected.length }} 条</el-form-item>
        <el-form-item label="截止日期" required>
          <el-date-picker v-model="batchDeadline" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择截止日期时间" style="width: 100%;" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="batchVisible = false">取消</el-button>
        <el-button type="primary" :loading="batchSaving" @click="batchUpdate">确定</el-button>
      </span>
    </el-dialog>

    <rect-detail :visible.sync="detailVisible" :row="detailRow" @recheck="openRecheck" @saved="load" />
    <rect-recheck :visible.sync="recheckVisible" :row="recheckRow" @saved="onRechecked" />
  </section>
</template>

<script>
import { post, ok, msg, pageData, fmt, fmtNum, slashDate, cleanParams, RECT_STATUS } from '../common'
import RectDetail from './Detail.vue'
import RectRecheck from './Recheck.vue'

export default {
  name: 'InspectRectificationIndex',
  components: { RectDetail, RectRecheck },
  data() {
    return {
      query: { storeId: '', indicatorId: '', status: '', deadlineDateBegin: '', deadlineDateEnd: '', pageSize: 10, currentPage: 1 },
      deadlineRange: [],
      rows: [],
      total: 0,
      loading: false,
      stats: { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0 },
      selected: [],
      stores: [],
      indicators: [],
      batchVisible: false,
      batchDeadline: '',
      batchSaving: false,
      detailVisible: false,
      detailRow: null,
      recheckVisible: false,
      recheckRow: null
    }
  },
  computed: {
    statItems() {
      const defs = [
        { key: 1, label: '待整改', color: '#E6A23C' },
        { key: 2, label: '整改中', color: '#409EFF' },
        { key: 3, label: '待复检', color: '#9B59B6' },
        { key: 6, label: '已超期', color: '#909399' },
        { key: 4, label: '复检通过', color: '#67C23A' }
      ]
      return defs.map(d => ({ label: d.label, color: d.color, value: this.stats[d.key] || 0 }))
    }
  },
  created() {
    this.load()
    this.loadOptions()
    this.loadStats()
  },
  methods: {
    loadAll() {
      this.load()
      this.loadStats()
    },
    loadStats() {
      post(this.$axios, '/inspectManage/rectification/page', { pageSize: 500, currentPage: 1 }).then(res => {
        const list = (res && res.list) || []
        const count = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0 }
        list.forEach(r => { if (count[r.status] !== undefined) count[r.status]++ })
        this.stats = count
      })
    },
    load() {
      const q = Object.assign({}, this.query)
      q.deadlineDateBegin = this.deadlineRange && this.deadlineRange[0] ? slashDate(this.deadlineRange[0]) : ''
      q.deadlineDateEnd = this.deadlineRange && this.deadlineRange[1] ? slashDate(this.deadlineRange[1]) : ''
      this.loading = true
      post(this.$axios, '/inspectManage/rectification/page', cleanParams(q)).then(res => {
        this.rows = (res && res.list) || []
        this.total = pageData(res).resultCount || this.rows.length
      }).finally(() => { this.loading = false })
    },
    loadOptions() {
      post(this.$axios, '/storeManage/getStoreList', {}).then(res => { this.stores = (res && res.list) || [] })
      post(this.$axios, '/inspectManage/indicator/page', { pageSize: 200, currentPage: 1 }).then(res => { this.indicators = (res && res.list) || [] })
    },
    reset() {
      this.query = { storeId: '', indicatorId: '', status: '', deadlineDateBegin: '', deadlineDateEnd: '', pageSize: 10, currentPage: 1 }
      this.deadlineRange = []
      this.load()
    },
    onSelect(rows) { this.selected = rows },
    canUrge(row) { return [1, 2, 3, 5, 6].indexOf(row.status) !== -1 },
    urge(row) {
      this.$confirm('确认对该整改进行催办？', '提示').then(() => {
        post(this.$axios, '/inspectManage/rectification/urge', { id: row.rectId }).then(res => {
          if (ok(res)) { this.load(); this.$message.success('催办完成') } else { this.$message.error(msg(res) || '催办失败') }
        })
      }).catch(() => {})
    },
    openDetail(row) {
      this.detailRow = row
      this.detailVisible = true
    },
    openRecheck(row) {
      this.recheckRow = row
      this.recheckVisible = true
    },
    onRechecked() {
      this.recheckVisible = false
      this.load()
    },
    batchUpdate() {
      if (!this.batchDeadline) return this.$message.warning('请选择截止日期')
      this.batchSaving = true
      post(this.$axios, '/inspectManage/rectification/batchUpdateDeadline', {
        rectIds: this.selected.map(r => r.rectId),
        deadlineDate: this.batchDeadline
      }).then(res => {
        if (ok(res)) {
          this.batchVisible = false
          this.batchDeadline = ''
          this.load()
          this.$message.success('截止日期更新完成')
        } else {
          this.$message.error(msg(res) || '更新失败')
        }
      }).finally(() => { this.batchSaving = false })
    },
    rectText(v) { return (RECT_STATUS[v] || {}).text || '-' },
    rectStyle(v) {
      const st = RECT_STATUS[v]
      return { background: st.color, borderColor: st.color, color: '#fff' }
    },
    fmt,
    fmtNum
  }
}
</script>

<style scoped>
.panel { background: #fff; border: 1px solid #ebeef5; border-radius: 4px; padding: 18px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .el-select, .toolbar .el-input { width: 160px; }
.grow { flex: 1; }
.muted { color: #909399; }
.pager { margin-top: 16px; text-align: right; }
.stat-cards { display: flex; gap: 16px; margin-bottom: 16px; }
.stat-card { flex: 1; background: #f5f7fa; border-radius: 6px; padding: 14px 18px; display: flex; align-items: baseline; gap: 8px; }
.stat-card span { color: #909399; font-size: 13px; }
.stat-card b { font-size: 24px; color: #303133; }
.stat-card em { color: #909399; font-style: normal; font-size: 12px; }
</style>