任务执行1-19

src/components/search-table/index.vue

@@ -20,43 +20,53 @@
       <a-divider style="margin-top: 0" />
 
       <!-- 数据表格 -->
-      <DataTable
-        :data="data"
-        :columns="columns"
-        :loading="loading"
-        :pagination="pagination"
-        :bordered="bordered"
-        :row-selection="rowSelection"
-        :scroll="scroll"
-        :show-toolbar="showToolbar"
-        :show-download="showDownload"
-        :show-refresh="showRefresh"
-        :show-density="showDensity"
-        :show-column-setting="showColumnSetting"
-        :download-button-text="downloadButtonText"
-        :refresh-tooltip-text="refreshTooltipText"
-        :density-tooltip-text="densityTooltipText"
-        :column-setting-tooltip-text="columnSettingTooltipText"
-        @page-change="handlePageChange"
-        @page-size-change="handlePageSizeChange"
-        @selection-change="handleSelectionChange"
-        @row-click="handleRowClick"
-        @refresh="handleRefresh"
-        @download="handleDownload"
-        @density-change="handleDensityChange"
-        @column-change="handleColumnChange"
+      <PageState
+        :status="stateStatus"
+        :empty-text="emptyText"
+        :error-text="errorText"
+        :partial-text="partialText"
+        :loading-text="loadingText"
+        @retry="handleRefresh"
       >
-        <template #toolbar-left>
-          <slot name="toolbar-left" />
-        </template>
-        <template #toolbar-right>
-          <slot name="toolbar-right" />
-        </template>
-        <!-- 动态插槽透传 -->
-        <template v-for="col in slotColumns" :key="col.dataIndex" #[String(col.slotName)]="slotProps">
-          <slot :name="col.slotName" v-bind="slotProps" />
-        </template>
-      </DataTable>
+        <DataTable
+          v-if="stateStatus !== 'empty' && stateStatus !== 'error' && stateStatus !== 'unauthorized'"
+          :data="data"
+          :columns="columns"
+          :loading="loading"
+          :pagination="pagination"
+          :bordered="bordered"
+          :row-selection="rowSelection"
+          :scroll="responsiveScroll"
+          :show-toolbar="showToolbar"
+          :show-download="showDownload"
+          :show-refresh="showRefresh"
+          :show-density="showDensity"
+          :show-column-setting="showColumnSetting"
+          :download-button-text="downloadButtonText"
+          :refresh-tooltip-text="refreshTooltipText"
+          :density-tooltip-text="densityTooltipText"
+          :column-setting-tooltip-text="columnSettingTooltipText"
+          @page-change="handlePageChange"
+          @page-size-change="handlePageSizeChange"
+          @selection-change="handleSelectionChange"
+          @row-click="handleRowClick"
+          @refresh="handleRefresh"
+          @download="handleDownload"
+          @density-change="handleDensityChange"
+          @column-change="handleColumnChange"
+        >
+          <template #toolbar-left>
+            <slot name="toolbar-left" />
+          </template>
+          <template #toolbar-right>
+            <slot name="toolbar-right" />
+          </template>
+          <!-- 动态插槽透传 -->
+          <template v-for="col in slotColumns" :key="col.dataIndex" #[String(col.slotName)]="slotProps">
+            <slot :name="col.slotName" v-bind="slotProps" />
+          </template>
+        </DataTable>
+      </PageState>
     </a-card>
   </div>
 </template>
@@ -105,6 +115,26 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  status: {
+    type: String as PropType<'loading' | 'empty' | 'error' | 'success' | 'partial' | 'unauthorized' | undefined>,
+    default: undefined,
+  },
+  loadingText: {
+    type: String,
+    default: '加载中',
+  },
+  emptyText: {
+    type: String,
+    default: '暂无数据',
+  },
+  errorText: {
+    type: String,
+    default: '数据暂时不可用，请稍后重试。',
+  },
+  partialText: {
+    type: String,
+    default: '部分数据加载失败，当前页面展示可用数据。',
+  },
   pagination: {
     type: Object as PropType<{
       current: number
@@ -191,6 +221,17 @@ const slotColumns = computed(() => {
   return props.columns.filter((col) => col.slotName)
 })
 
+const stateStatus = computed(() => {
+  if (props.status) return props.status
+  if (props.loading) return 'loading'
+  if (!props.data.length) return 'empty'
+  return 'success'
+})
+
+const responsiveScroll = computed(() => {
+  return props.scroll || { x: 'max-content' }
+})
+
 const handleFormModelUpdate = (value: Record<string, any>) => {
   emit('update:formModel', value)
 }
@@ -246,4 +287,10 @@ export default {
 .search-table-container {
   padding: 0 20px 20px 20px;
 }
+
+@media (max-width: 768px) {
+  .search-table-container {
+    padding: 0 12px 12px;
+  }
+}
 </style>