<template> <div class="PublishingChannelManagement"> <!-- 搜索栏 --> <div class="filter"> <div> <ButtonGradient @click.native="handleOpenDialogAddEdit()"> <template #prefix> <img src="@screen/images/insert.svg" /> </template> 新增 </ButtonGradient> <ButtonGradient> <template #prefix> <img src="@screen/images/refresh.svg" /> </template> 刷新 </ButtonGradient> </div> <InputSearch style="width: 480px" :formList="searchFormList" @handleSearch="handleSearch" /> </div> <!-- 内容 --> <div class="body"> <Card v-for="item in 8" :key="item" /> </div> <!-- 分页 --> <div class="footer"> <Pagination layout="total,prev, pager, next, jumper" :total="90" /> </div> <!-- 新增编辑弹窗 --> <AddNEditDialog v-model="addNEditDialogVisible" :data="dialogData" /> </div> </template> <script> import Pagination from "@screen/components/Pagination.vue"; import InputSearch from "@screen/components/InputSearch/index.vue"; import Card from "./components/Card"; import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; import AddNEditDialog from "./components/AddNEditDialog.vue"; import { searchFormList } from "./data"; export default { name: "PublishingChannelManagement", components: { Pagination, InputSearch, Card, ButtonGradient, AddNEditDialog, }, data() { return { searchFormList, data: [], addNEditDialogVisible: false, dialogData: null, }; }, methods: { handleOpenDialogAddEdit(data) { console.log("data", data); this.addNEditDialogVisible = true; this.dialogData = data; }, handleSearch(data) { // this.searchData = data; // this.getData(); }, }, }; </script> <style lang="scss" scoped> .PublishingChannelManagement { padding: 21px; height: 100%; display: flex; flex-direction: column; z-index: 6; width: 100%; .filter { height: 60px; display: flex; justify-content: space-between; div { display: flex; gap: 6px; } } .body { flex: 1; overflow: hidden; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 24px; // grid-row-gap: 9px; // grid-column-gap: 9px; grid-auto-rows: min-content; } .footer { margin-top: 15px; height: 36px; display: flex; align-items: center; justify-content: center; } } </style>