live-telecast-vue3-ui-pc/src/components/PageListModall/pageListModal.vue

<script setup lang="ts">
import { computed, ref } from "vue";
import { PageContent } from "/@/components/PageContent";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { modalProps } from "./types";
// import type { PageContentInstance } from "/@/components/PageContent";
const { handleResetClick, handleSearchClick } = usePageSearch();
const props = defineProps(modalProps);
const { modalConfig } = props;
const { title, searchConfig, contentConfig } = modalConfig;
const pageContentRef = ref<InstanceType<typeof PageContent>>(null);
// const emit = defineEmits(["confirmBtnClick"]);

const dialogVisible = ref(false);

async function show(_group_id) {
  dialogVisible.value = true;
  console.log(pageContentRef);
  pageContentRef.value.getPageData({ id: _group_id });
}
defineExpose({
  show
});
</script>

<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    center
    top="8vh"
    destroy-on-close
    width="1040px"
  >
    <PageSearch
      :form-config="searchConfig"
      @search-btn-click="handleSearchClick"
      @reset-btn-click="handleResetClick"
    />
    <PageContent ref="pageContentRef" :content-config="contentConfig" />
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-pagination) {
  justify-content: flex-start !important;
}

.search {
  padding: 0px !important;
}
</style>