Complete attachment list show

src/api/attachment.js

@@ -0,0 +1,15 @@
+import service from '@/utils/service'
+
+const baseUrl = '/admin/api/attachments'
+
+const attachmentApi = {}
+
+attachmentApi.list = pagination => {
+  return service({
+    url: baseUrl,
+    method: 'get',
+    params: pagination
+  })
+}
+
+export default attachmentApi

src/views/attachment/AttachmentList.vue

@@ -1,107 +1,77 @@
 <template>
   <page-view>
-    <a-row :gutter="12" type="flex" align="middle">
+    <a-row
+      :gutter="12"
+      type="flex"
+      align="middle"
+    >
       <a-col
         class="attachment-item"
+        v-for="attachment in attachments"
+        :key="attachment.id"
         :xl="4"
         :lg="4"
         :md="12"
         :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
+        :xs="24"
+      >
+        <a-card
+          :bodyStyle="{ padding: '1rem' , width: '240px' }"
+          hoverable
+        >
+          <img
+            :src="attachment.thumbPath"
+            :alt="attachment.name"
+            slot="cover"
+          >
+          <a-card-meta>
+            <template slot="description">{{ attachment.name }}</template>
+          </a-card-meta>
         </a-card>
       </a-col>
     </a-row>
+    <a-row
+      type="flex"
+      justify="end"
+      :gutter="12"
+    >
+      <a-pagination
+        v-model="pagination.page"
+        :defaultPageSize="pagination.size"
+        :total="pagination.total"
+      ></a-pagination>
+    </a-row>
   </page-view>
 </template>
 
 <script>
 import { PageView } from '@/layouts'
+import attachmentApi from '@/api/attachment'
 export default {
   components: {
     PageView
   },
   data() {
     return {
-      src: 'https://cdn.ryanc.cc/img/blog/thumbnails/c86b59623c4a9bfeac403824dec3a789.jpg'
+      attachments: [],
+      pagination: {
+        page: 1,
+        size: 16,
+        sort: ''
+      }
+    }
+  },
+  created() {
+    this.loadAttachments()
+  },
+  methods: {
+    loadAttachments() {
+      const pagination = Object.assign({}, this.pagination)
+      pagination.page--
+      attachmentApi.list(pagination).then(response => {
+        this.attachments = response.data.data.content
+        this.pagination.total = response.data.data.total
+      })
     }
   }
 }

src/views/interface/ThemeList.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="page-header-index-wide">
+  <div class="page-header-index-wide">
     <a-row
       :gutter="12"
       type="flex"
@@ -165,7 +165,7 @@
         </a-col>
       </a-row>
     </a-drawer>
-</div>
+  </div>
 </template>
 
 <script>

src/views/post/PostEdit.vue

@@ -198,7 +198,7 @@ export default {
   computed: {
     publishText() {
       if (this.postToStage.id) {
-        return '更新'
+        return '更新并发布'
       }
       return '创建并发布'
     }