fad_oa/ruoyi-ui/src/views/oa/project/travelCompare.vue

<template>
  <div class="travel-compare-page">
    <el-card shadow="never" class="filter-card">
      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-label">姓名</span>
          <el-input
            v-model="queryParams.nickName"
            clearable
            size="small"
            placeholder="请输入姓名"
            style="width: 180px"
          />
        </div>
        <div class="filter-item">
          <span class="filter-label">地点</span>
          <el-input
            v-model="queryParams.workPlace"
            clearable
            size="small"
            placeholder="请输入报工地点"
            style="width: 200px"
          />
        </div>
        <div class="filter-item">
          <span class="filter-label">时间</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            size="small"
            clearable
          />
        </div>
        <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </div>
    </el-card>

    <el-card shadow="never" class="table-card">
      <div slot="header" class="card-header">
        <span>报工审核</span>
        <el-button size="mini" icon="el-icon-refresh" @click="loadList">刷新</el-button>
      </div>

      <el-table :data="list" v-loading="loading" stripe empty-text="暂无比对记录">
        <el-table-column label="姓名" prop="nickName" min-width="140" />
        <el-table-column label="日期" prop="compareDate" min-width="120">
          <template slot-scope="scope">{{ formatDate(scope.row.compareDate) }}</template>
        </el-table-column>
        <el-table-column label="是否出差" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.isTrip === 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="报工地点" prop="workPlace" min-width="180" show-overflow-tooltip />
        <el-table-column label="实际出差地点" prop="travelPlace" min-width="180" show-overflow-tooltip />
        <el-table-column label="机器比对结果" min-width="140">
          <template slot-scope="scope">
            <span
              :class="[
                'result-tag',
                scope.row.compareResult === '通过' ? 'pass' : (scope.row.compareResult === '异常' ? 'fail' : 'neutral')
              ]"
            >
              {{ scope.row.compareResult }}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrap">
        <el-pagination
          background
          :current-page="pageNum"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next, sizes, jumper"
          :page-sizes="[10, 20, 50, 100]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { listTravelCompare } from '@/api/oa/projectCompare'

export default {
  name: 'OaProjectTravelCompare',
  data () {
    return {
      loading: false,
      list: [],
      total: 0,
      pageNum: 1,
      pageSize: 50,
      dateRange: [],
      queryParams: {
        nickName: '',
        workPlace: ''
      }
    }
  },
  created () {
    this.loadList()
  },
  methods: {
    formatDateOnly (date) {
      const p = n => (n < 10 ? `0${n}` : `${n}`)
      return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())}`
    },
    formatDate (val) {
      if (!val) return '-'
      const d = new Date(val)
      if (Number.isNaN(d.getTime())) return '-'
      return this.formatDateOnly(d)
    },
    handleQuery () {
      this.pageNum = 1
      this.loadList()
    },
    async loadList () {
      this.loading = true
      try {
        const [start, end] = this.dateRange || []
        const res = await listTravelCompare(
          start || null,
          end || null,
          this.queryParams.nickName,
          this.queryParams.workPlace,
          this.pageNum,
          this.pageSize
        )
        this.list = res?.rows || []
        this.total = res?.total || 0
      } catch (err) {
        console.error('加载报工审核失败:', err)
        this.$message.error('加载报工审核失败')
        this.list = []
        this.total = 0
      } finally {
        this.loading = false
      }
    },
    handleCurrentChange (pageNum) {
      this.pageNum = pageNum
      this.loadList()
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.loadList()
    },
    resetQuery () {
      this.pageNum = 1
      this.pageSize = 50
      this.queryParams.nickName = ''
      this.queryParams.workPlace = ''
      this.dateRange = []
      this.loadList()
    }
  }
}
</script>

<style lang="scss" scoped>
.travel-compare-page {
  padding: 16px 20px 32px;
}

.filter-card,
.table-card {
  border: 1px solid #d7d9df;
  border-radius: 10px;
  margin-bottom: 16px;
}

.filter-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: #2b2f36;
}

.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.result-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
}

.pass {
  background: #e8f7ee;
  color: #1f8b4c;
}

.fail {
  background: #fdecec;
  color: #d93026;
}

.neutral {
  background: #eef2f7;
  color: #5c6b7a;
}
</style>