Create Gallery page.

src/api/gallery.js

@@ -0,0 +1,23 @@
+import service from '@/utils/service'
+
+const baseUrl = '/api/admin/galleries'
+
+const galleryApi = {}
+
+galleryApi.query = params => {
+  return service({
+    url: baseUrl,
+    params: params,
+    method: 'get'
+  })
+}
+
+galleryApi.create = (gallery) => {
+  return service({
+    url: baseUrl,
+    data: gallery,
+    method: 'post'
+  })
+}
+
+export default galleryApi

src/views/attachment/AttachmentList.vue

@@ -142,6 +142,7 @@
       v-model="drawerVisiable"
       v-if="selectAttachment"
       :attachment="selectAttachment"
+      :addToGallery="true"
       @delete="handleDelete"
     />
   </page-view>

src/views/attachment/components/AttachmentDetailDrawer.vue

@@ -120,6 +120,18 @@
     </a-row>
     <a-divider />
     <div class="bottom-control">
+      <a-popconfirm
+        title="你确定要添加到图库？"
+        @confirm="handleAddToGallery"
+        okText="确定"
+        cancelText="取消"
+        v-if="addToGallery"
+      >
+        <a-button
+          type="dashed"
+          style="marginRight: 8px"
+        >添加到图库</a-button>
+      </a-popconfirm>
       <a-popconfirm
         title="你确定要删除该附件？"
         @confirm="deleteAttachment"
@@ -135,6 +147,7 @@
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import attachmentApi from '@/api/attachment'
+import galleryApi from '@/api/gallery'
 
 export default {
   name: 'AttachmentDetailDrawer',
@@ -142,7 +155,8 @@ export default {
   data() {
     return {
       detailLoading: true,
-      editable: false
+      editable: false,
+      gallery: {}
     }
   },
   model: {
@@ -154,6 +168,11 @@ export default {
       type: Object,
       required: true
     },
+    addToGallery: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     visiable: {
       type: Boolean,
       required: false,
@@ -220,6 +239,18 @@ export default {
           this.$message.error('复制失败')
         })
     },
+    handleAddToGallery() {
+      this.gallery['name'] = this.attachment.name
+      this.gallery['thumbnail'] = this.attachment.thumbPath
+      this.gallery['url'] = this.attachment.path
+      this.gallery['description'] = ''
+      this.gallery['takeTime'] = ''
+      this.gallery['location'] = ''
+      this.gallery['team'] = ''
+      galleryApi.create(this.gallery).then(response => {
+        this.$message.success('添加成功！')
+      })
+    },
     onClose() {
       this.$emit('close', false)
     }

src/views/sheet/SheetList.vue

@@ -46,11 +46,6 @@
                   slot="action"
                   slot-scope="text, record"
                 >
-                  <a
-                    href="javascript:;"
-                    @click="viewPage(record.id)"
-                  >查看</a>
-                  <a-divider type="vertical" />
                   <router-link
                     :to="{name:'LinkList'}"
                     v-if="record.id==1"
@@ -69,6 +64,11 @@
                   >
                     <a href="javascript:void(0);">编辑</a>
                   </router-link>
+                  <a-divider type="vertical" />
+                  <a
+                    href="javascript:;"
+                    @click="viewPage(record.id)"
+                  >查看</a>
                 </span>
               </a-table>
             </a-tab-pane>

src/views/sheet/internal/GalleryList.vue

@@ -1,10 +1,262 @@
 <template>
-  <div class="page-header-index-wide">Link List</div>
+  <div class="page-header-index-wide">
+    <a-row
+      :gutter="12"
+      type="flex"
+      align="middle"
+    >
+      <a-col
+        :span="24"
+        class="search-box"
+      >
+        <a-card :bordered="false">
+          <div class="table-page-search-wrapper">
+            <a-form layout="inline">
+              <a-row :gutter="48">
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
+                  <a-form-item label="关键词">
+                    <a-input v-model="queryParam.keyword" />
+                  </a-form-item>
+                </a-col>
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
+                  <a-form-item label="分组">
+                    <a-select v-model="queryParam.attachmentType">
+                      <a-select-option
+                        v-for="item in Object.keys(attachmentType)"
+                        :key="item"
+                        :value="item"
+                      >{{ attachmentType[item].text }}</a-select-option>
+                    </a-select>
+                  </a-form-item>
+                </a-col>
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
+                  <span class="table-page-search-submitButtons">
+                    <a-button
+                      type="primary"
+                      @click="loadAttachments(true)"
+                    >查询</a-button>
+                    <a-button
+                      style="margin-left: 8px;"
+                      @click="resetParam"
+                    >重置</a-button>
+                  </span>
+                </a-col>
+              </a-row>
+            </a-form>
+          </div>
+          <div class="table-operator">
+            <a-button
+              type="primary"
+              icon="plus"
+              @click="showUploadModal"
+            >添加</a-button>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :span="24">
+        <a-list
+          :grid="{ gutter: 12, xs: 1, sm: 2, md: 4, lg: 6, xl: 6, xxl: 6 }"
+          :dataSource="galleries"
+          :loading="listLoading"
+        >
+          <a-list-item
+            slot="renderItem"
+            slot-scope="item, index"
+            :key="index"
+          >
+            <a-card
+              :bodyStyle="{ padding: 0 }"
+              hoverable
+              @click="showDetailDrawer(item)"
+            >
+              <div class="attach-thumb">
+                <img :src="item.thumbnail">
+              </div>
+              <a-card-meta>
+                <ellipsis
+                  :length="isMobile()?36:18"
+                  tooltip
+                  slot="description"
+                >{{ item.name }}</ellipsis>
+              </a-card-meta>
+            </a-card>
+          </a-list-item>
+        </a-list>
+      </a-col>
+    </a-row>
+    <a-row
+      type="flex"
+      justify="end"
+    >
+      <a-pagination
+        :total="pagination.total"
+        :defaultPageSize="pagination.size"
+        :pageSizeOptions="['18', '36', '54','72','90','108']"
+        showSizeChanger
+        @change="handlePaginationChange"
+        @showSizeChange="handlePaginationChange"
+      />
+    </a-row>
+    <AttachmentDetailDrawer
+      v-model="drawerVisiable"
+      v-if="selectAttachment"
+      :attachment="selectAttachment"
+      @delete="handleDelete"
+    />
+  </div>
 </template>
 
 <script>
-export default {}
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import AttachmentDetailDrawer from '../../attachment/components/AttachmentDetailDrawer'
+import attachmentApi from '@/api/attachment'
+import galleryApi from '@/api/gallery'
+
+export default {
+  components: {
+    AttachmentDetailDrawer
+  },
+  mixins: [mixin, mixinDevice],
+  data() {
+    return {
+      attachmentType: attachmentApi.type,
+      listLoading: true,
+      selectAttachment: {},
+      attachments: [],
+      galleries: [],
+      mediaTypes: [],
+      editable: false,
+      pagination: {
+        page: 1,
+        size: 18,
+        sort: null
+      },
+      queryParam: {
+        page: 0,
+        size: 18,
+        sort: null,
+        keyword: null,
+        mediaType: null,
+        attachmentType: null
+      },
+      drawerVisiable: false
+    }
+  },
+  computed: {
+    formattedDatas() {
+      return this.attachments.map(attachment => {
+        attachment.typeProperty = this.attachmentType[attachment.type]
+        return attachment
+      })
+    }
+  },
+  created() {
+    this.loadAttachments()
+    this.loadGalleries()
+    this.loadMediaTypes()
+  },
+  methods: {
+    loadAttachments(isSearch) {
+      this.queryParam.page = this.pagination.page - 1
+      this.queryParam.size = this.pagination.size
+      this.queryParam.sort = this.pagination.sort
+      if (isSearch) {
+        this.queryParam.page = 0
+      }
+      this.listLoading = true
+      attachmentApi.query(this.queryParam).then(response => {
+        this.attachments = response.data.data.content
+        this.pagination.total = response.data.data.total
+        this.listLoading = false
+      })
+    },
+    loadGalleries(isSearch) {
+      this.queryParam.page = this.pagination.page - 1
+      this.queryParam.size = this.pagination.size
+      this.queryParam.sort = this.pagination.sort
+      if (isSearch) {
+        this.queryParam.page = 0
+      }
+      this.listLoading = true
+      galleryApi.query(this.queryParam).then(response => {
+        this.galleries = response.data.data.content
+        this.pagination.total = response.data.data.total
+        this.listLoading = false
+      })
+    },
+    loadMediaTypes() {
+      attachmentApi.getMediaTypes().then(response => {
+        this.mediaTypes = response.data.data
+      })
+    },
+    showDetailDrawer(attachment) {
+      this.selectAttachment = attachment
+      this.drawerVisiable = true
+    },
+    showUploadModal() {
+      this.uploadVisible = true
+    },
+    handlePaginationChange(page, size) {
+      this.$log.debug(`Current: ${page}, PageSize: ${size}`)
+      this.pagination.page = page
+      this.pagination.size = size
+      this.loadAttachments()
+    },
+    resetParam() {
+      this.queryParam.keyword = null
+      this.queryParam.mediaType = null
+      this.queryParam.attachmentType = null
+      this.loadAttachments()
+    },
+    handleDelete(attachment) {
+      this.loadAttachments()
+    }
+  }
+}
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+.ant-divider-horizontal {
+  margin: 24px 0 12px 0;
+}
+
+.search-box {
+  padding-bottom: 12px;
+}
+
+.attach-thumb {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  padding-bottom: 56%;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.ant-card-meta {
+  padding: 0.8rem;
+}
+
+.attach-detail-img img {
+  width: 100%;
+}
+
+.table-operator {
+  margin-bottom: 0;
+}
 </style>