update views/blog

src/api/blog.js

@@ -9,7 +9,8 @@ const blogApi = {
   getSearchList: '/api/blog/search',
   getBlogCategory: '/api/blog/v2/category',
   getBlogPost: '/api/blog/v2/post',
-  getBlogQuestion: '/api/blog/v2/question'
+  getBlogQuestion: '/api/blog/v2/question',
+  getBlogImage: '/api/file/image'
 }
 
 export function getPostList(queryInfo) {
@@ -84,3 +85,7 @@ export function addBlogQuestionWeight(formData) {
 export function minusBlogQuestionWeight(formData) {
   return postForm(blogApi.getBlogQuestion + '/weight/minus', formData)
 }
+
+export function getBlogImageList(queryInfo) {
+  return get(blogApi.getBlogImage, queryInfo)
+}

src/router/background_blog.js

@@ -2,6 +2,7 @@ const Background = () => import('views/admin/Background')
 const BlogCategory = () => import('views/blog/BlogCategory')
 const BlogPost = () => import('views/blog/BlogPost')
 const BlogQuestion = () => import('views/blog/BlogQuestion')
+const BlogImage = () => import('views/blog/BlogImage')
 
 export default {
   path: '/bg/blog',
@@ -35,6 +36,14 @@ export default {
       icon: 'el-icon-user',
       component: BlogQuestion,
       meta: { needAuth: true, roles: ['tnb_user'] }
+    },
+    {
+      path: '/bg/blog/image',
+      name: 'BlogImage',
+      title: '图片列表',
+      icon: 'el-icon-user',
+      component: BlogImage,
+      meta: { needAuth: true, roles: ['tnb_user'] }
     }
   ]
 }

src/router/background_file.js

@@ -1,31 +0,0 @@
-const Background = () => import('views/admin/Background')
-const AdminStoreNode = () => import('views/admin/oss/AdminStoreNode')
-const AdminUserNode = () => import('views/admin/oss/AdminUserNode')
-
-export default {
-  path: '/bg/file',
-  redirect: '/bg',
-  name: 'File',
-  title: '我的文件',
-  icon: 'el-icon-user',
-  component: Background,
-  meta: { needAuth: true, roles: ['tnb_user'] },
-  children: [
-    {
-      path: '/bg/file/list',
-      name: 'AdminStoreConfig',
-      title: '文件列表',
-      icon: 'el-icon-user',
-      component: AdminStoreNode,
-      meta: { needAuth: true, roles: ['tnb_user'] }
-    },
-    {
-      path: '/bg/file/image',
-      name: 'AdminUserNode',
-      title: '图片列表',
-      icon: 'el-icon-user',
-      component: AdminUserNode,
-      meta: { needAuth: true, roles: ['tnb_user'] }
-    }
-  ]
-}

src/router/index.js

@@ -15,7 +15,6 @@ import BackgroundAdminRouter from './background_admin'
 import BackgroundBackendRouter from './background_backend'
 import BackgroundOssRouter from './background_oss'
 import BackgroundBlogRouter from './background_blog'
-import BackgroundFileRouter from './background_file'
 
 // 懒加载引入页面组件，es6语法
 // ********************************************************************************************************************
@@ -86,7 +85,6 @@ export const asyncRoutes = [
   BackgroundBackendRouter,
   BackgroundOssRouter,
   BackgroundBlogRouter,
-  BackgroundFileRouter,
   {
     path: '*',
     name: '404',

src/views/blog/BlogImage.vue

@@ -0,0 +1,206 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <h3>图片列表</h3>
+      <el-row style="margin-top: 10px">
+        <el-button type="success" icon="el-icon-upload" style="margin-left: 5px" @click="handleUpload">添加</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-scrollbar style="width: 100%; height: 80vh;">
+        <el-row v-if="dataList.length !== 0">
+          <el-col
+            v-for="(album, index) in dataList"
+            :key="index"
+            :md="6"
+            :sm="12"
+            :xs="12"
+            style="padding: 5px"
+          >
+            <el-image
+              lazy
+              fit="cover"
+              class="coverImg"
+              :src="album.url"
+              @click="showImages(index)"
+            />
+          </el-col>
+        </el-row>
+      </el-scrollbar>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+
+      <el-dialog
+        title="上传图片"
+        append-to-body
+        :visible.sync="addDialog"
+        center
+      >
+        <template>
+          <el-upload
+            class="avatar-uploader"
+            :action="imgOssUrl"
+            :headers="imgHeaders"
+            :data="imgData"
+            :with-credentials="true"
+            :show-file-list="false"
+            :before-upload="beforeAvatarUpload"
+            :on-success="handleAvatarSuccess"
+          >
+            <i class="el-icon-plus avatar-uploader-icon" />
+          </el-upload>
+        </template>
+      </el-dialog>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import { getBlogImageList } from '@/api/blog'
+import { getAccessToken } from '@/utils/auth'
+
+export default {
+  name: 'BlogImage',
+  data() {
+    return {
+      imgOssUrl: '/api/file/upload',
+      imgHeaders: {
+        Authorization: ''
+      },
+      imgData: {
+        channelCode: 0
+      },
+      queryInfo: {
+        pn: 1
+      },
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 100,
+      totalSize: 0,
+      dataList: [],
+      addDialog: false
+    }
+  },
+  created() {
+    this.imgHeaders.Authorization = 'Bearer ' + getAccessToken()
+    const pageNumber = this.$route.query.pn
+    if (pageNumber !== undefined && pageNumber !== null) {
+      this.currentPage = parseInt(pageNumber)
+      this.queryInfo.pn = parseInt(pageNumber)
+    }
+    document.title = '图片列表'
+    this.getData()
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.queryInfo.pn = pageNumber
+      this.$router.push({
+        path: '/bg/blog/image',
+        query: this.queryInfo
+      })
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getData() {
+      getBlogImageList(this.queryInfo).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.totalSize = respData.totalSize
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleUpload() {
+      this.addDialog = true
+    },
+    // ****************************************************************************************************************
+    beforeAvatarUpload(file) {
+      const isJPG = file.type.startsWith('image/')
+      if (!isJPG) {
+        this.$message.error('只能上传图片文件')
+      }
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isLt2M) {
+        this.$message.error('图片文件大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    },
+    handleAvatarSuccess(resp, file) {
+      this.$message.info(resp.msg)
+    },
+    showImages(index) {
+      const imageUrls = []
+      for (const item of this.dataList) {
+        imageUrls.push(item.url)
+      }
+      this.$viewerApi({
+        images: imageUrls,
+        options: {
+          initialViewIndex: index,
+          movable: true,
+          fullscreen: false,
+          keyboard: true
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.uploader-example .uploader-btn {
+  margin-right: 4px;
+}
+.uploader-example .uploader-list {
+  max-height: 440px;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 256px;
+  height: 256px;
+  line-height: 178px;
+  text-align: center;
+}
+.coverImg {
+  width: 100%;
+  height: 320px;
+  display: block;
+}
+</style>

src/views/blog/BlogPost.vue

@@ -260,10 +260,16 @@ export default {
     if (published !== undefined && published !== null) {
       this.queryInfo.published = published
     }
-    getBlogCategoryList().then(resp => {
+    const queryInfo = {}
+    queryInfo.type = 'category'
+    getBlogCategoryList(queryInfo).then(resp => {
       if (resp.code === 0) {
         this.categoryList = resp.data
+      } else {
+        this.$message.error(resp.msg)
       }
+    }).catch(error => {
+      this.$message.error(error.message)
     })
 
     document.title = '文章列表'
@@ -312,7 +318,10 @@ export default {
     },
     onAdd() {
       const formData = new FormData()
-      formData.append('articleId', this.addForm.articleId)
+      if (this.addForm.articleId !== null) {
+        formData.append('articleId', this.addForm.articleId)
+      }
+
       formData.append('editor', this.addForm.editor)
       formData.append('title', this.addForm.title)
       formData.append('content', this.addForm.content)
@@ -323,6 +332,7 @@ export default {
       editBlogPost(formData).then(resp => {
         this.addDialog = false
         this.$message.info(resp.msg)
+        this.getData()
       }).catch(error => {
         this.$message.error(error.message)
       })