cos upload

src/views/cxshMini/home/banner/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <div class="appManagement-container">
-    <el-divider content-position="left">
-      演示环境仅做基础功能展示，若想实现不同角色的真实菜单配置，需将settings.js路由加载模式改为all模式，由后端全面接管路由渲染与权限控制
-    </el-divider>
+  <div class="banner-container">
     <vab-query-form>
       <vab-query-form-left-panel :span="12">
         <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button>
@@ -22,23 +19,20 @@
 
     <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
       <el-table-column show-overflow-tooltip type="selection" />
-      <el-table-column align="center" label="图标" width="100">
+      <el-table-column align="center" label="顺序" prop="sort" show-overflow-tooltip />
+      <el-table-column align="center" label="图片" width="100">
         <template slot-scope="scope">
           <!-- 使用 show-overflow-tooltip 显示图片，并添加 tooltip -->
           <el-tooltip class="item" :content="scope.row.name" effect="dark" placement="top">
-            <img alt="image" :src="scope.row.icon" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
+            <img alt="image" :src="scope.row.url" style="width: 50px; height: 50px; object-fit: cover" />
           </el-tooltip>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="名称" prop="name" show-overflow-tooltip />
-      <el-table-column align="center" label="类型" show-overflow-tooltip>
-        <template #default="{ row }">
-          {{ row.type === 1 ? '小程序' : row.type === 2 ? 'H5' : '后台管理' }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="描述" prop="description" show-overflow-tooltip />
-      <el-table-column label="操作" show-overflow-tooltip width="200">
+      <el-table-column align="center" label="描述" prop="desc" show-overflow-tooltip />
+      <el-table-column align="center" label="操作" show-overflow-tooltip width="200">
         <template #default="{ row }">
+          <el-button :disabled="!row.canUp" type="text" @click="moveUp(row.id)">上移</el-button>
+          <el-button :disabled="!row.canDown" type="text" @click="moveDown(row.id)">下移</el-button>
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
           <el-button type="text" @click="handleDelete(row)">删除</el-button>
         </template>
@@ -58,12 +52,11 @@
 </template>
 
 <script>
-  import { doDelete, getList } from '@/api/appManagement'
-  import { formatTime } from '@/utils'
-  import Edit from './components/AppManagementEdit'
+  import { getList, doDelete, doMoveUp, doMoveDown } from '@/api/banner'
+  import Edit from './components/BannerEdit.vue'
 
   export default {
-    name: 'AppManagement',
+    name: 'Banner',
     components: { Edit },
     data() {
       return {
@@ -141,6 +134,18 @@
           this.listLoading = false
         }, 300)
       },
+
+      async moveUp(id) {
+        console.log('moveUp', id)
+        await doMoveUp(id)
+        this.$baseMessage('移动成功', 'success')
+        this.fetchData()
+      },
+      async moveDown(id) {
+        await doMoveDown(id)
+        this.$baseMessage('移动成功', 'success')
+        this.fetchData()
+      },
     },
   }
 </script>