| | |
| | | |
| | | <!-- 搜索区域 --> |
| | | <div class="search-section"> |
| | | <el-form :model="searchForm" inline> |
| | | <el-form-item label="标题"> |
| | | <div class="search-toolbar"> |
| | | <el-input |
| | | v-model="searchForm.title" |
| | | placeholder="请输入标题关键词" |
| | | style="width: 200px" |
| | | clearable |
| | | @keyup.enter="handleSearch" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="handleSearch">搜索</el-button> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="success" @click="handleAdd"> |
| | | <el-button type="primary" @click="handleSearch"> |
| | | <el-icon><Search /></el-icon> |
| | | 查询 |
| | | </el-button> |
| | | <el-button type="primary" @click="handleSetOrder"> |
| | | <el-icon><Sort /></el-icon> |
| | | 设置顺序 |
| | | </el-button> |
| | | <el-button type="primary" @click="handleAdd"> |
| | | <el-icon><Plus /></el-icon> |
| | | 新增轮播图 |
| | | </el-button> |
| | | <el-button @click="updateSortOrders">设置顺序</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 数据表格 --> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="createTime" label="创建时间" width="180" /> |
| | | <el-table-column label="操作" width="200" fixed="right"> |
| | | <el-table-column label="操作" width="120" fixed="right"> |
| | | <template #default="{ row }"> |
| | | <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button> |
| | | <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button> |
| | | <el-button type="primary" size="small" @click="handleEdit(row)" :icon="Edit" circle title="编辑"></el-button> |
| | | <el-button type="danger" size="small" @click="handleDelete(row)" :icon="Delete" circle title="删除"></el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | <script setup> |
| | | import { ref, reactive, onMounted } from 'vue' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import { Plus } from '@element-plus/icons-vue' |
| | | import { Plus, Sort, Edit, Delete } from '@element-plus/icons-vue' |
| | | import { CarouselApi } from '@/api/carousel' |
| | | import { uploadFile, getMediasByTarget, saveMedia, deleteMedia } from '@/api/media' |
| | | import { MediaTargetType } from '@/constants/mediaTargetType' |
| | |
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .search-toolbar { |
| | | display: flex; |
| | | gap: 12px; |
| | | align-items: center; |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | .table-section { |
| | | background: #fff; |
| | | padding: 20px; |