feat: 完成后台联调与通用列表组件

src/views/EnterpriseReviewsView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
-import { ElMessage } from 'element-plus'
-import { Eye, FileCheck2, RefreshCw, Search, ShieldCheck, ShieldX } from '@lucide/vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { Eye, FileCheck2, ShieldCheck, ShieldX } from '@lucide/vue'
 import {
   approveEnterpriseReview,
   downloadTenantQualification,
@@ -14,14 +14,22 @@ import {
 } from '@/api/platformIam'
 import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/api/http'
 import ApiErrorMeta from '@/components/ApiErrorMeta.vue'
-import MetricStrip from '@/components/MetricStrip.vue'
+import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
+import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
 import { useAccessPreviewStore } from '@/stores/accessPreview'
 
 const access = useAccessPreviewStore()
 const loading = ref(false)
 const loadError = ref<ApiErrorDetails | null>(null)
 const reviews = ref<EnterpriseReview[]>([])
-const keyword = ref('')
+const page = ref(1)
+const pageSize = ref(10)
+type ReviewFilters = QueryModel & { keyword: string }
+const filters = ref<ReviewFilters>({ keyword: '' })
+const appliedFilters = ref<ReviewFilters>({ keyword: '' })
+const queryFields: QueryField[] = [
+  { key: 'keyword', type: 'input', placeholder: '企业名称、企业编号、信用代码或审核单号' },
+]
 const detailOpen = ref(false)
 const selectedReview = ref<EnterpriseReview | null>(null)
 const qualifications = ref<PlatformTenantQualification[]>([])
@@ -34,9 +42,22 @@ const previewName = ref('')
 const decisionOpen = ref(false)
 const submitting = ref(false)
 const decision = reactive({ type: 'approve' as 'approve' | 'reject', comment: '' })
+const decisionFormRef = ref<FormInstance>()
+const decisionRules: FormRules = {
+  comment: [{
+    validator: (_rule, value, callback) => {
+      if (typeof value === 'string' && value.trim()) {
+        callback()
+        return
+      }
+      callback(new Error('请填写审核说明或驳回原因'))
+    },
+    trigger: ['blur', 'change'],
+  }],
+}
 
 const filteredReviews = computed(() => {
-  const query = keyword.value.trim().toLowerCase()
+  const query = appliedFilters.value.keyword.trim().toLowerCase()
   if (!query) return reviews.value
   return reviews.value.filter((review) => [
     review.tenantName,
@@ -47,12 +68,19 @@ const filteredReviews = computed(() => {
   ].some((value) => value?.toLowerCase().includes(query)))
 })
 
-const metrics = computed(() => [
-  { label: '待审核企业', value: reviews.value.length, note: '当前需要平台处理' },
-  { label: '营业执照', value: reviews.value.filter((item) => item.qualificationType === 'BUSINESS_LICENSE').length, note: '本期待核验资质' },
-  { label: '可通过', value: access.can('platform:customer:approve') ? reviews.value.length : 0, note: '按当前账号权限' },
-  { label: '当前结果', value: filteredReviews.value.length, note: keyword.value ? '符合搜索条件' : '全部待审记录' },
-])
+const pagedReviews = computed(() => {
+  const start = (page.value - 1) * pageSize.value
+  return filteredReviews.value.slice(start, start + pageSize.value)
+})
+
+const reviewColumns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', width: 250, fixed: 'left', slotName: 'actions' },
+  { key: 'company', label: '企业', minWidth: 230, slotName: 'company' },
+  { key: 'qualification', label: '资质', minWidth: 210, slotName: 'qualification' },
+  { key: 'contact', label: '联系人', minWidth: 180, slotName: 'contact' },
+  { key: 'submittedAt', label: '提交时间', minWidth: 175, slotName: 'submittedAt' },
+  { key: 'status', label: '状态', width: 110, slotName: 'status' },
+]
 
 function displayText(value: unknown) {
   return typeof value === 'string' && value.trim() ? value : '—'
@@ -86,6 +114,12 @@ async function loadReviews() {
   }
 }
 
+function searchReviews() {
+  appliedFilters.value = { ...filters.value }
+  page.value = 1
+  void loadReviews()
+}
+
 async function loadSelectedQualifications() {
   const tenantId = selectedReview.value?.tenantId
   if (!tenantId) return
@@ -139,15 +173,15 @@ function openDecision(review: EnterpriseReview, type: 'approve' | 'reject') {
   decision.type = type
   decision.comment = type === 'approve' ? '营业执照清晰，企业资料审核通过' : ''
   decisionOpen.value = true
+  void nextTick(() => decisionFormRef.value?.clearValidate('comment'))
 }
 
 async function submitDecision() {
   const review = selectedReview.value
-  if (!review || submitting.value) return
-  if (!decision.comment.trim()) {
-    ElMessage.warning(decision.type === 'approve' ? '请填写审核说明' : '请填写驳回原因')
-    return
-  }
+  const form = decisionFormRef.value
+  if (!review || !form || submitting.value) return
+  const valid = await form.validate().then(() => true).catch(() => false)
+  if (!valid) return
 
   submitting.value = true
   try {
@@ -189,21 +223,8 @@ onBeforeUnmount(clearPreviewUrl)
 </script>
 
 <template>
-  <!-- THESIS: 把企业审核组织成一条清晰的待办队列，与客户档案保持清楚的任务边界。
-  OWN-WORLD: 延续 Admin 的海军蓝框架、白色数据面板、紧凑表格和克制状态色。
-  STORY: 审核员先识别待审企业，再核对营业执照与联系人，最后留下明确的通过或驳回意见。
-  FIRST VIEWPORT: 摘要、搜索和真实待审列表连续呈现，详情从右侧展开，决策在受保护的确认对话框中完成。
-  FORM: 现有 Operate 页面体系的直接扩展，不改变全局导航与品牌语言。
-  FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md -->
   <div class="business-page enterprise-review-page">
-    <MetricStrip :items="metrics" />
-
-    <section class="surface-panel review-toolbar" aria-label="企业审核筛选">
-      <el-input v-model="keyword" clearable placeholder="企业名称、企业编号、信用代码或审核单号" aria-label="企业审核关键词">
-        <template #prefix><Search :size="16" /></template>
-      </el-input>
-      <el-button :loading="loading" @click="loadReviews"><RefreshCw :size="16" />刷新</el-button>
-    </section>
+    <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="企业审核筛选" :fields="queryFields" @search="searchReviews" />
 
     <section v-if="loadError" class="surface-panel review-error" role="alert">
       <ShieldX :size="22" />
@@ -215,35 +236,30 @@ onBeforeUnmount(clearPreviewUrl)
       <header class="panel-heading">
         <div><h2>企业资料审核</h2><p>仅展示后端返回的待审核记录，提交审核时使用审核单 ID。</p></div>
       </header>
-      <el-table v-loading="loading" :data="filteredReviews" row-key="id" empty-text="暂无待审核企业">
-        <el-table-column label="操作" width="250" fixed="left">
-          <template #default="{ row }">
+      <DataTable
+        v-model:page="page"
+        v-model:page-size="pageSize"
+        :data="pagedReviews"
+        :columns="reviewColumns"
+        :loading="loading"
+        :total="filteredReviews.length"
+        aria-label="企业审核列表"
+        row-key="id"
+        empty-text="暂无待审核企业"
+      >
+        <template #actions="{ row }">
             <div class="table-actions">
               <el-button link type="primary" @click="openDetail(row as EnterpriseReview)"><Eye :size="15" />详情</el-button>
               <el-button v-if="access.can('platform:customer:approve')" link type="success" @click="openDecision(row as EnterpriseReview, 'approve')"><ShieldCheck :size="15" />通过</el-button>
               <el-button v-if="access.can('platform:customer:reject')" link type="danger" @click="openDecision(row as EnterpriseReview, 'reject')"><ShieldX :size="15" />驳回</el-button>
             </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="企业" min-width="230">
-          <template #default="{ row }">
-            <div class="primary-cell"><strong>{{ displayText((row as EnterpriseReview).tenantName) }}</strong><span>{{ displayText((row as EnterpriseReview).tenantCode) }} · 租户 {{ (row as EnterpriseReview).tenantId }}</span></div>
-          </template>
-        </el-table-column>
-        <el-table-column label="资质" min-width="210">
-          <template #default="{ row }">
-            <div class="primary-cell"><strong>{{ qualificationName((row as EnterpriseReview).qualificationType) }}</strong><span>{{ displayText((row as EnterpriseReview).certificateNo) }}</span></div>
-          </template>
-        </el-table-column>
-        <el-table-column label="联系人" min-width="180">
-          <template #default="{ row }">
-            <div class="primary-cell"><strong>{{ displayText((row as EnterpriseReview).contactName) }}</strong><span>{{ displayText((row as EnterpriseReview).contactPhone) }}</span></div>
-          </template>
-        </el-table-column>
-        <el-table-column label="提交时间" min-width="175"><template #default="{ row }">{{ formatDate((row as EnterpriseReview).submittedAt ?? (row as EnterpriseReview).createdAt) }}</template></el-table-column>
-        <el-table-column label="状态" width="110"><template #default><span class="status-badge is-warning"><i />待审核</span></template></el-table-column>
-      </el-table>
-      <footer class="table-footer"><span>共 {{ filteredReviews.length }} 条待审记录</span><span v-if="keyword">已按关键词筛选</span></footer>
+        </template>
+        <template #company="{ row }"><div class="primary-cell"><strong>{{ displayText((row as EnterpriseReview).tenantName) }}</strong><span>{{ displayText((row as EnterpriseReview).tenantCode) }} · 租户 {{ (row as EnterpriseReview).tenantId }}</span></div></template>
+        <template #qualification="{ row }"><div class="primary-cell"><strong>{{ qualificationName((row as EnterpriseReview).qualificationType) }}</strong><span>{{ displayText((row as EnterpriseReview).certificateNo) }}</span></div></template>
+        <template #contact="{ row }"><div class="primary-cell"><strong>{{ displayText((row as EnterpriseReview).contactName) }}</strong><span>{{ displayText((row as EnterpriseReview).contactPhone) }}</span></div></template>
+        <template #submittedAt="{ row }">{{ formatDate((row as EnterpriseReview).submittedAt ?? (row as EnterpriseReview).createdAt) }}</template>
+        <template #status><span class="status-badge is-warning"><i />待审核</span></template>
+      </DataTable>
     </section>
 
     <el-drawer v-model="detailOpen" title="企业审核详情" size="620px" class="business-drawer">
@@ -312,8 +328,8 @@ onBeforeUnmount(clearPreviewUrl)
         <strong>{{ displayText(selectedReview.tenantName) }}</strong>
         <span>审核单 {{ selectedReview.id }}</span>
       </div>
-      <el-form label-position="top">
-        <el-form-item :label="decision.type === 'approve' ? '审核说明' : '驳回原因'" required>
+      <el-form ref="decisionFormRef" :model="decision" :rules="decisionRules" label-position="top">
+        <el-form-item prop="comment" :label="decision.type === 'approve' ? '审核说明' : '驳回原因'" required>
           <el-input v-model="decision.comment" type="textarea" :rows="4" maxlength="300" show-word-limit :placeholder="decision.type === 'approve' ? '请填写审核通过说明' : '请明确说明需要企业修改的内容'" />
         </el-form-item>
       </el-form>
@@ -328,8 +344,6 @@ onBeforeUnmount(clearPreviewUrl)
 </template>
 
 <style scoped>
-.review-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
-.review-toolbar .el-input { width: min(460px, 100%); }
 .review-error { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 20px; border-color: #fecdca; background: #fffafa; color: #b42318; }
 .review-error strong { color: #7a271a; font-size: 13px; }
 .review-error p { margin: 4px 0 0; color: #b54708; font-size: 12px; }
@@ -347,14 +361,15 @@ onBeforeUnmount(clearPreviewUrl)
 .qualification-preview { display: grid; max-height: min(70vh, 760px); min-height: 240px; place-items: center; overflow: auto; border: 1px solid var(--cc-border); border-radius: 6px; background: #f8fafc; }
 .qualification-preview img { display: block; max-width: 100%; height: auto; }
 .decision-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 12px 14px; border-radius: 8px; background: #f8fafc; }
+.decision-summary > * { min-width: 0; overflow-wrap: anywhere; }
 .decision-summary strong { color: #172033; font-size: 13px; }
 .decision-summary span { color: var(--cc-muted); font-size: 11px; }
+:deep(.review-decision-dialog .el-form-item__error) { line-height: 1.45; overflow-wrap: anywhere; }
 @media (max-width: 720px) {
-  .review-toolbar { align-items: stretch; flex-direction: column; }
-  .review-toolbar .el-input { width: 100%; }
   .review-error { grid-template-columns: auto minmax(0, 1fr); }
   .review-error .el-button { grid-column: 1 / -1; min-height: 44px; }
   .qualification-error, .qualification-item { align-items: stretch; flex-direction: column; }
   .qualification-error .el-button, .qualification-item .el-button { min-height: 44px; }
+  .decision-summary { align-items: flex-start; flex-direction: column; }
 }
 </style>