首页轮播图列表

src/apis/index.js

@@ -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

src/apis/modules/imgmgt.js

@@ -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}`)

src/main.js

@@ -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')

src/views/imgMgt/homeBanner/index.vue

@@ -1,44 +1,28 @@
 <template>
     <x-search-bar class="mb-8-2">
         <template #default="{ gutter, colSpan }">
-            <a-form
+            <a-form :label-col="{ style: { width: '40px' } }" :model="searchFormData" layout="inline">
-                :label-col="{ style: { width: '100px' } }"
-                :model="searchFormData"
-                layout="inline">
                 <a-row :gutter="gutter">
                     <a-col v-bind="colSpan">
-                        <a-form-item
+                        <a-form-item label="标题" name="name">
-                            :label="$t('pages.system.user.form.username')"
+                            <a-input placeholder="请输入图片标题"
-                            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')"
                                 v-model:value="searchFormData.name"></a-input>
                         </a-form-item>
                     </a-col>
 
-                    <a-col
+                    <a-col v-bind="colSpan">
-                        class="align-right"
+                         <a-form-item label="状态" name="status">
-                        v-bind="colSpan">
+                          <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
+                            <a-button ghost type="primary" @click="handleSearch">
-                                ghost
-                                type="primary"
-                                @click="handleSearch">
                                 {{ $t('button.search') }}
                             </a-button>
                         </a-space>
@@ -47,58 +31,36 @@
             </a-form>
         </template>
     </x-search-bar>
-    <a-row
+    <a-row :gutter="8" :wrap="false">
-        :gutter="8"
-        :wrap="false">
         <a-col flex="auto">
             <a-card type="flex">
                 <x-action-bar class="mb-8-2">
-                    <a-button
+                    <a-button type="primary" @click="$refs.editDialogRef.handleCreate()">
-                        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
+                <a-table :columns="columns" :data-source="listData" bordered="true" :loading="loading"
-                    :columns="columns"
+                    :pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
-                    :data-source="listData"
-                    :loading="loading"
-                    :pagination="paginationState"
-                    :scroll="{ x: 1000 }"
-                    @change="onTableChange">
                     <template #bodyCell="{ column, record }">
-                        <template v-if="'statusType' === column.key">
+                        <template v-if="'img' === column.dataIndex">
-                            <!--状态-->
+                            <a-image :width="50" :src="record.img||$imageErr.imgErr" />
-                            <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>
 
-                        <template v-if="'createAt' === column.key">
+                        <template v-if="'status' === column.dataIndex">
-                            {{ formatUtcDateTime(record.created_at) }}
+                           <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
+                                    <edit-outlined /> </a-tooltip></x-action-button>
-                            ></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
+                                    <delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
-                            ></x-action-button>
                         </template>
                     </template>
                 </a-table>
@@ -106,9 +68,7 @@
         </a-col>
     </a-row>
 
-    <edit-dialog
+    <edit-dialog ref="editDialogRef" @ok="onOk"></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: '图片', dataIndex: 'img', width: 100,align:'center' },
-    { title: t('pages.system.user.form.name'), dataIndex: 'name', key: 'name', width: 100 },
+    { title: '标题', dataIndex: 'name', key: 'name' },
-    { title: t('pages.system.user.form.phone'), dataIndex: 'phone', width: 120 },
+    { title: '状态', dataIndex: 'status', width: 120,align:'center' },
-    { title: t('pages.system.user.form.email'), dataIndex: 'email', width: 100 },
+    { title: '顺序', dataIndex: 'sequence', width: 100,align:'center'},
-    { title: t('pages.system.user.form.status'), dataIndex: 'status', key: 'statusType', width: 60 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 100,align:'center' },
-    { title: t('pages.system.user.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
-    { title: t('button.action'), key: 'action', fixed: 'right', width: 100 },
 ]
 
 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
+        const { success, data, total } = await apis.imgmgt
-            .getUsersList({
+            .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()