查询列表组件

src/components/SearchTable/index.ts

@@ -0,0 +1,3 @@
+import SearchTable from './src/SearchTable.vue'
+
+export { SearchTable }

src/components/SearchTable/src/SearchTable.vue

@@ -0,0 +1,101 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="searchDialogVisible" style="height: 70%;width: 80%;">
+      <div class="searchHeardClass">
+         <!-- 搜索工作栏 -->
+        <Search :schema="searchSchema" @search="setSearchParamsRef" @reset="setSearchParamsRef" />
+      </div>
+      <div class="searchTableClass">
+        <Table
+          ref="searchTableRef"
+          :columns="tableColumns"
+          :data="tableObjectRef.tableList"
+          :loading="tableObjectRef.loading"
+          :pagination="{
+            total: tableObjectRef.total
+          }"
+          v-model:pageSize="tableObjectRef.pageSize"
+          v-model:currentPage="tableObjectRef.currentPage"
+          v-model:sort="tableObjectRef.sort"
+          :selection="true"
+        />
+      </div>
+    <template #footer>
+      <div class="flex items-center">
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="searchDialogVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+// const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const searchDialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+
+/** 打开弹窗 */
+const setSearchParamsRef = ref()
+const tableObjectRef = ref()
+const getPage:any = ref()
+const searchSchema = ref()
+const tableColumns = ref()
+const open = (type: string, allSchemas: any,getApiPage: any ) => {
+  searchDialogVisible.value = true
+  console.log(45,allSchemas )
+  searchSchema.value = allSchemas.searchSchema
+  tableColumns.value = allSchemas.tableColumns
+  getPage.value = getApiPage
+  // dialogTitle.value = t('action.' + type)
+  dialogTitle.value = type
+  formType.value = type
+  const {tableObject, tableMethods } = useTable({
+    getListApi: getPage.value // 分页接口
+  })
+  tableObjectRef.value = tableObject
+  // 获得表格的各种操作
+  const { getList, setSearchParams } = tableMethods
+  setSearchParamsRef.value = setSearchParams
+  getList()
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+// Table 组件 ref
+const searchTableRef = ref()
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 提交请求
+  formLoading.value = true
+  const selections = searchTableRef.value.selections
+  if (selections.length > 1 || selections.length == 0) {
+    message.warning('请选择一条数据！')
+    return
+  }
+  try {
+    
+    searchDialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
+<style scoped lang="scss">
+.searchDialogClass{
+  height: 60% !important;
+  width: 80% !important;
+}
+.searchHeardClass{
+  height: 200px;
+}
+.searchTableClass{
+  height: 300px;
+  overflow-y: auto;
+}
+</style>