sj_tdtybz/src/views/admin/AdminBatchesView.vue

<template>
  <div class="admin-batches-view">
    <PagePanel title="批次管理">
      <p class="tip">
        全区批次运维查询。「已归档」多为重复/作废残留。删除会摘离明细并从列表隐藏。日常业务仍由各岗位办理。
      </p>
      <div class="query-panel">
        <el-form :inline="true" size="small">
          <el-form-item label="发放年月">
            <el-input v-model="q.payMonth" clearable placeholder="yyyyMM" style="width: 120px" />
          </el-form-item>
          <el-form-item label="街镇">
            <el-select v-model="q.townId" clearable style="width: 140px" @change="onTown">
              <el-option v-for="t in towns" :key="t.id" :label="t.name" :value="t.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="村居">
            <el-select v-model="q.villageId" clearable style="width: 140px">
              <el-option v-for="v in villages" :key="v.id" :label="v.name" :value="v.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="级别">
            <el-select v-model="q.batchLevel" clearable style="width: 110px">
              <el-option label="村级" value="VILLAGE" />
              <el-option label="镇级" value="TOWN" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-loading="loading" :data="pagedList" border stripe size="small">
        <el-table-column prop="id" label="批次ID" min-width="140" show-overflow-tooltip />
        <el-table-column prop="payMonth" label="发放年月" width="100" align="center" />
        <el-table-column label="级别" width="70" align="center">
          <template #default="{ row }">{{ row.batchLevel === 'TOWN' ? '镇' : '村' }}</template>
        </el-table-column>
        <el-table-column prop="town" label="街镇" width="100" />
        <el-table-column prop="village" label="村居" width="100" />
        <el-table-column prop="peopleCount" label="人数" width="70" align="center" />
        <el-table-column label="合计" width="110" align="right">
          <template #default="{ row }">{{ formatAmt(row.totalAmount) }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="140" show-overflow-tooltip />
        <el-table-column prop="currentStage" label="阶段" width="150" show-overflow-tooltip />
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="open(row, 'detail')">详情</el-button>
            <el-button link type="primary" size="small" @click="open(row, 'flow')">流程</el-button>
            <el-button link type="danger" size="small" @click="onDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination v-model:page="page" v-model:page-size="pageSize" :total="total" />
    </PagePanel>

    <BatchDetailDrawer
      v-model="drawer"
      :batch-id="drawerId"
      :initial-tab="drawerTab"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import PagePanel from '@/components/common/PagePanel.vue'
import TablePagination from '@/components/common/TablePagination.vue'
import BatchDetailDrawer from '@/components/biz/BatchDetailDrawer.vue'
import { listRegionsAdmin, pageAdminBatches, purgeBatchAdmin } from '@/api/biz'
import { useClientPagination } from '@/composables/useClientPagination'
import type { RegionRow } from '@/api/sjnmtybt/regionStore'

type AdminBatch = {
  id: string
  payMonth: string
  batchLevel: string
  town: string
  village: string
  peopleCount: number
  totalAmount: number
  status: string
  currentStage: string
}

const q = reactive({
  payMonth: '',
  townId: '',
  villageId: '',
  batchLevel: '',
})
const list = ref<AdminBatch[]>([])
const towns = ref<RegionRow[]>([])
const villages = ref<RegionRow[]>([])
const loading = ref(false)
const drawer = ref(false)
const drawerId = ref('')
const drawerTab = ref<'detail' | 'flow'>('detail')

const { page, pageSize, total, pagedList, resetPage } = useClientPagination(list)

function formatAmt(n: number) {
  return Number(n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

async function onTown() {
  q.villageId = ''
  villages.value = q.townId
    ? await listRegionsAdmin({ level: 'VILLAGE', parentId: q.townId })
    : []
}

async function search() {
  loading.value = true
  try {
    list.value = (await pageAdminBatches({
      payMonth: q.payMonth || undefined,
      townId: q.townId || undefined,
      villageId: q.villageId || undefined,
      batchLevel: q.batchLevel || undefined,
    })) as AdminBatch[]
    resetPage()
  } finally {
    loading.value = false
  }
}

function reset() {
  q.payMonth = ''
  q.townId = ''
  q.villageId = ''
  q.batchLevel = ''
  villages.value = []
  search()
}

function open(row: AdminBatch, tab: 'detail' | 'flow') {
  drawerId.value = row.id
  drawerTab.value = tab
  drawer.value = true
}

async function onDelete(row: AdminBatch) {
  try {
    await ElMessageBox.confirm(
      `确认删除批次 ${row.id}？将软摘离明细并隐藏该批次。`,
      '删除批次',
      { type: 'warning', confirmButtonText: '确认删除' },
    )
  } catch {
    return
  }
  await purgeBatchAdmin(row.id)
  ElMessage.success('批次已删除')
  await search()
}

onMounted(async () => {
  towns.value = await listRegionsAdmin({ level: 'TOWN', parentId: 'D_SJ' })
  await search()
})
</script>

<style scoped lang="less">
.tip {
  margin: 0 0 10px;
  font-size: 12px;
  color: @text-secondary;
  line-height: 1.5;
}
.query-panel {
  margin-bottom: 10px;
}
</style>