首页轮播图列表

This commit is contained in:
Leo_Ding 2025-06-17 14:55:56 +08:00
parent 8e32d15d1e
commit 22845890a9
5 changed files with 51 additions and 79 deletions

View File

@ -1,10 +1,9 @@
const modules = import.meta.glob('./modules/*.js', { eager: true })
const api = {}
Object.keys(modules).forEach((key) => {
const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
console.log(name)
api[name] = { ...modules[key] }
})
export default api

View File

@ -0,0 +1,14 @@
/**
* 图片管理接口
*/
import request from '@/utils/request'
// 获取菜单列表
export const getDataList = (params) => request.basic.get('/api/v1/banners', params)
// 获取菜单条数据
export const getMenu = (id) => request.basic.get(`/api/v1/menus/${id}`)
// 添加菜单
export const createMenu = (params) => request.basic.post('/api/v1/menus', params)
// 更新菜单
export const updateMenu = (id, params) => request.basic.put(`/api/v1/menus/${id}`, params)
// 删除菜单
export const delMenu = (id) => request.basic.delete(`/api/v1/menus/${id}`)

BIN
src/assets/imgerror.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

View File

@ -1,8 +1,9 @@
import { createApp } from 'vue'
import imgErr from '@/assets/imgerror.png'
import App from '@/App.vue'
import { useCore } from '@/core'
const app = createApp(App)
app.config.globalProperties.$imageErr={imgErr}
useCore(app)
app.mount('#app')

View File

@ -1,44 +1,28 @@
<template>
<x-search-bar class="mb-8-2">
<template #default="{ gutter, colSpan }">
<a-form
:label-col="{ style: { width: '100px' } }"
:model="searchFormData"
layout="inline">
<a-form :label-col="{ style: { width: '40px' } }" :model="searchFormData" layout="inline">
<a-row :gutter="gutter">
<a-col v-bind="colSpan">
<a-form-item
:label="$t('pages.system.user.form.username')"
name="username">
<a-input
:placeholder="$t('pages.system.user.form.username.placeholder')"
v-model:value="searchFormData.username"></a-input>
</a-form-item>
</a-col>
<a-col v-bind="colSpan">
<a-form-item name="name">
<template #label>
{{ $t('pages.system.user.form.name') }}
<a-tooltip :title="$t('pages.system.user.form.name')">
<question-circle-outlined class="ml-4-1 color-placeholder" />
</a-tooltip>
</template>
<a-input
:placeholder="$t('pages.system.user.form.name.placeholder')"
<a-form-item label="标题" name="name">
<a-input placeholder="请输入图片标题"
v-model:value="searchFormData.name"></a-input>
</a-form-item>
</a-col>
<a-col
class="align-right"
v-bind="colSpan">
<a-col v-bind="colSpan">
<a-form-item label="状态" name="status">
<a-select v-model:value="searchFormData.status" >
<a-select-option value="enabled">启用</a-select-option>
<a-select-option value="disabled">停用</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col class="align-right" v-bind="colSpan">
<a-space>
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
<a-button
ghost
type="primary"
@click="handleSearch">
<a-button ghost type="primary" @click="handleSearch">
{{ $t('button.search') }}
</a-button>
</a-space>
@ -47,58 +31,36 @@
</a-form>
</template>
</x-search-bar>
<a-row
:gutter="8"
:wrap="false">
<a-row :gutter="8" :wrap="false">
<a-col flex="auto">
<a-card type="flex">
<x-action-bar class="mb-8-2">
<a-button
type="primary"
@click="$refs.editDialogRef.handleCreate()">
<a-button type="primary" @click="$refs.editDialogRef.handleCreate()">
<template #icon>
<plus-outlined></plus-outlined>
</template>
{{ $t('pages.system.user.add') }}
添加图片
</a-button>
</x-action-bar>
<a-table
:columns="columns"
:data-source="listData"
:loading="loading"
:pagination="paginationState"
:scroll="{ x: 1000 }"
@change="onTableChange">
<a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
:pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
<template #bodyCell="{ column, record }">
<template v-if="'statusType' === column.key">
<!--状态-->
<a-tag
v-if="statusUserTypeEnum.is('activated', record.status)"
color="processing">
{{ statusUserTypeEnum.getDesc(record.status) }}
</a-tag>
<!--状态-->
<a-tag
v-if="statusUserTypeEnum.is('freezed', record.status)"
color="processing">
{{ statusUserTypeEnum.getDesc(record.status) }}
</a-tag>
<template v-if="'img' === column.dataIndex">
<a-image :width="50" :src="record.img||$imageErr.imgErr" />
</template>
<template v-if="'createAt' === column.key">
{{ formatUtcDateTime(record.created_at) }}
<template v-if="'status' === column.dataIndex">
<a-tag :color="record.sequence==='enabled'?'green':'red'">{{ record.sequence==='enabled'?'启用':'停用' }}</a-tag>
</template>
<template v-if="'action' === column.key">
<x-action-button @click="$refs.editDialogRef.handleEdit(record)">
<a-tooltip>
<template #title> {{ $t('pages.system.user.edit') }}</template>
<edit-outlined /> </a-tooltip
></x-action-button>
<edit-outlined /> </a-tooltip></x-action-button>
<x-action-button @click="handleDelete(record)">
<a-tooltip>
<template #title>{{ $t('pages.system.delete') }}</template>
<delete-outlined style="color: #ff4d4f" /> </a-tooltip
></x-action-button>
<delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
</template>
</template>
</a-table>
@ -106,9 +68,7 @@
</a-col>
</a-row>
<edit-dialog
ref="editDialogRef"
@ok="onOk"></edit-dialog>
<edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
</template>
<script setup>
@ -128,13 +88,11 @@ defineOptions({
})
const { t } = useI18n() // t
const columns = [
{ title: t('pages.system.user.form.username'), dataIndex: 'username', width: 120 },
{ title: t('pages.system.user.form.name'), dataIndex: 'name', key: 'name', width: 100 },
{ title: t('pages.system.user.form.phone'), dataIndex: 'phone', width: 120 },
{ title: t('pages.system.user.form.email'), dataIndex: 'email', width: 100 },
{ title: t('pages.system.user.form.status'), dataIndex: 'status', key: 'statusType', width: 60 },
{ title: t('pages.system.user.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 100 },
{ title: '图片', dataIndex: 'img', width: 100,align:'center' },
{ title: '标题', dataIndex: 'name', key: 'name' },
{ title: '状态', dataIndex: 'status', width: 120,align:'center' },
{ title: '顺序', dataIndex: 'sequence', width: 100,align:'center'},
{ title: t('button.action'), key: 'action', fixed: 'right', width: 100,align:'center' },
]
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } =
@ -150,8 +108,8 @@ async function getPageList() {
try {
showLoading()
const { pageSize, current } = paginationState
const { success, data, total } = await apis.users
.getUsersList({
const { success, data, total } = await apis.imgmgt
.getDataList({
pageSize,
page: current,
...searchFormData.value,
@ -179,7 +137,7 @@ function handleDelete({ id }) {
okText: t('button.confirm'),
onOk: () => {
return new Promise((resolve, reject) => {
;(async () => {
; (async () => {
try {
const { success } = await apis.users.delUsers(id).catch(() => {
throw new Error()