From 4bf752b23dc31572d7b930be46b86e105d0455f4 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Thu, 25 Apr 2019 22:45:28 +0800
Subject: [PATCH] Change gallery to photo.

---
 src/api/gallery.js                            |  23 --
 src/api/photo.js                              |  30 ++
 src/config/router.config.js                   |   6 +-
 src/views/attachment/AttachmentList.vue       |   2 +-
 .../components/AttachmentDetailDrawer.vue     |  25 +-
 src/views/sheet/SheetList.vue                 |   4 +-
 src/views/sheet/internal/GalleryList.vue      | 262 -------------
 src/views/sheet/internal/PhotoList.vue        | 365 ++++++++++++++++++
 8 files changed, 412 insertions(+), 305 deletions(-)
 delete mode 100644 src/api/gallery.js
 create mode 100644 src/api/photo.js
 delete mode 100644 src/views/sheet/internal/GalleryList.vue
 create mode 100644 src/views/sheet/internal/PhotoList.vue

diff --git a/src/api/gallery.js b/src/api/gallery.js
deleted file mode 100644
index 917cd1688..000000000
--- a/src/api/gallery.js
+++ /dev/null
@@ -1,23 +0,0 @@
-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
diff --git a/src/api/photo.js b/src/api/photo.js
new file mode 100644
index 000000000..ac0a1bc03
--- /dev/null
+++ b/src/api/photo.js
@@ -0,0 +1,30 @@
+import service from '@/utils/service'
+
+const baseUrl = '/api/admin/photos'
+
+const photoApi = {}
+
+photoApi.query = params => {
+  return service({
+    url: baseUrl,
+    params: params,
+    method: 'get'
+  })
+}
+
+photoApi.create = (photo) => {
+  return service({
+    url: baseUrl,
+    data: photo,
+    method: 'post'
+  })
+}
+
+photoApi.delete = photoId => {
+  return service({
+    url: `${baseUrl}/${photoId}`,
+    method: 'delete'
+  })
+}
+
+export default photoApi
diff --git a/src/config/router.config.js b/src/config/router.config.js
index f30d17b6f..cf454c659 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -80,10 +80,10 @@ export const asyncRouterMap = [
             meta: { title: '友情链接', hiddenHeaderContent: false }
           },
           {
-            path: '/sheets/galleries',
-            name: 'GalleryList',
+            path: '/sheets/photos',
+            name: 'PhotoList',
             hidden: true,
-            component: () => import('@/views/sheet/internal/GalleryList'),
+            component: () => import('@/views/sheet/internal/PhotoList'),
             meta: { title: '图库', hiddenHeaderContent: false }
           },
           {
diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue
index 2e041c0e9..38d28d2f2 100644
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@@ -142,7 +142,7 @@
       v-model="drawerVisiable"
       v-if="selectAttachment"
       :attachment="selectAttachment"
-      :addToGallery="true"
+      :addToPhoto="true"
       @delete="handleDelete"
     />
   </page-view>
diff --git a/src/views/attachment/components/AttachmentDetailDrawer.vue b/src/views/attachment/components/AttachmentDetailDrawer.vue
index a7defceb8..37d98eae8 100644
--- a/src/views/attachment/components/AttachmentDetailDrawer.vue
+++ b/src/views/attachment/components/AttachmentDetailDrawer.vue
@@ -122,10 +122,10 @@
     <div class="bottom-control">
       <a-popconfirm
         title="你确定要添加到图库？"
-        @confirm="handleAddToGallery"
+        @confirm="handleAddToPhoto"
         okText="确定"
         cancelText="取消"
-        v-if="addToGallery"
+        v-if="addToPhoto"
       >
         <a-button
           type="dashed"
@@ -147,7 +147,7 @@
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import attachmentApi from '@/api/attachment'
-import galleryApi from '@/api/gallery'
+import photoApi from '@/api/photo'
 
 export default {
   name: 'AttachmentDetailDrawer',
@@ -156,7 +156,7 @@ export default {
     return {
       detailLoading: true,
       editable: false,
-      gallery: {}
+      photo: {}
     }
   },
   model: {
@@ -168,7 +168,7 @@ export default {
       type: Object,
       required: true
     },
-    addToGallery: {
+    addToPhoto: {
       type: Boolean,
       required: false,
       default: false
@@ -239,15 +239,12 @@ 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'] = new Date().getTime()
-      this.gallery['location'] = ''
-      this.gallery['team'] = ''
-      galleryApi.create(this.gallery).then(response => {
+    handleAddToPhoto() {
+      this.photo['name'] = this.attachment.name
+      this.photo['thumbnail'] = this.attachment.thumbPath
+      this.photo['url'] = this.attachment.path
+      this.photo['takeTime'] = new Date().getTime()
+      photoApi.create(this.photo).then(response => {
         this.$message.success('添加成功！')
       })
     },
diff --git a/src/views/sheet/SheetList.vue b/src/views/sheet/SheetList.vue
index e62aaf4f5..fefe3aa56 100644
--- a/src/views/sheet/SheetList.vue
+++ b/src/views/sheet/SheetList.vue
@@ -53,7 +53,7 @@
                     <a href="javascript:void(0);">编辑</a>
                   </router-link>
                   <router-link
-                    :to="{name:'GalleryList'}"
+                    :to="{name:'PhotoList'}"
                     v-if="record.id==2"
                   >
                     <a href="javascript:void(0);">编辑</a>
@@ -211,7 +211,7 @@ const internalPages = [
   {
     id: '2',
     name: '图库页面',
-    url: '/galleries'
+    url: '/photos'
   },
   {
     id: '3',
diff --git a/src/views/sheet/internal/GalleryList.vue b/src/views/sheet/internal/GalleryList.vue
deleted file mode 100644
index 4bf55dbbe..000000000
--- a/src/views/sheet/internal/GalleryList.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<template>
-  <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>
-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 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>
diff --git a/src/views/sheet/internal/PhotoList.vue b/src/views/sheet/internal/PhotoList.vue
new file mode 100644
index 000000000..f682bdf62
--- /dev/null
+++ b/src/views/sheet/internal/PhotoList.vue
@@ -0,0 +1,365 @@
+<template>
+  <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>
+                      <a-select-option value="11">11</a-select-option>
+                      <a-select-option value="22">22</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="loadPhotos(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"
+            >添加</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="photos"
+          :loading="listLoading"
+        >
+          <a-list-item
+            slot="renderItem"
+            slot-scope="item, index"
+            :key="index"
+          >
+            <a-card
+              :bodyStyle="{ padding: 0 }"
+              hoverable
+              @click="showDrawer(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>
+    <a-drawer
+      title="图片详情"
+      :width="isMobile()?'100%':'460'"
+      closable
+      :visible="drawerVisiable"
+      destroyOnClose
+      @close="onDrawerClose"
+    >
+      <a-row
+        type="flex"
+        align="middle"
+      >
+        <a-col :span="24">
+          <a-skeleton
+            active
+            :loading="drawerLoading"
+            :paragraph="{rows: 8}"
+          >
+            <div class="attach-detail-img">
+              <img :src="photo.url">
+            </div>
+          </a-skeleton>
+        </a-col>
+        <a-divider />
+        <a-col :span="24">
+          <a-skeleton
+            active
+            :loading="drawerLoading"
+            :paragraph="{rows: 8}"
+          >
+            <a-list itemLayout="horizontal">
+              <a-list-item>
+                <a-list-item-meta>
+                  <template
+                    slot="description"
+                    v-if="editable"
+                  >
+                    <a-input v-model="photo.name" />
+                  </template>
+                  <template
+                    slot="description"
+                    v-else
+                  >{{ photo.name }}</template>
+                  <span slot="title">
+                    图片名称：
+                  </span>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-list-item-meta>
+                  <template
+                    slot="description"
+                    v-if="editable"
+                  >
+                    <a-input v-model="photo.takeTime" />
+                  </template>
+                  <span
+                    slot="description"
+                    v-else
+                  >{{ photo.takeTime | moment }}</span>
+                  <span slot="title">拍摄日期：</span>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-list-item-meta>
+                  <template
+                    slot="description"
+                    v-if="editable"
+                  >
+                    <a-input v-model="photo.location" />
+                  </template>
+                  <span
+                    slot="description"
+                    v-else
+                  >{{ photo.location || '无' }}</span>
+                  <span slot="title">拍摄地点：</span>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-list-item-meta>
+                  <template
+                    slot="description"
+                    v-if="editable"
+                  >
+                    <a-input v-model="photo.team" />
+                  </template>
+                  <span
+                    slot="description"
+                    v-else
+                  >{{ photo.team || '无' }}</span>
+                  <span slot="title">分组：</span>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-list-item-meta>
+                  <template
+                    slot="description"
+                    v-if="editable"
+                  >
+                    <a-input
+                      v-model="photo.description"
+                      type="textarea"
+                      :autosize="{ minRows: 5 }"
+                    />
+                  </template>
+                  <span
+                    slot="description"
+                    v-else
+                  >{{ photo.description || '无' }}</span>
+                  <span slot="title">描述：</span>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </a-skeleton>
+        </a-col>
+      </a-row>
+      <a-divider />
+      <div class="bottom-control">
+          <a-button
+            type="dashed"
+            style="marginRight: 8px"
+            @click="handleEditClick"
+            v-if="!editable"
+          >编辑</a-button>
+          <a-button
+            type="primary"
+            style="marginRight: 8px"
+            @click="handleEditClick"
+            v-else
+          >保存</a-button>
+        <a-popconfirm
+          title="你确定要删除该图片？"
+          okText="确定"
+          cancelText="取消"
+          @confirm="handleDeletePhoto"
+        >
+          <a-button type="danger">删除</a-button>
+        </a-popconfirm>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import photoApi from '@/api/photo'
+
+export default {
+  mixins: [mixin, mixinDevice],
+  data() {
+    return {
+      drawerVisiable: false,
+      drawerLoading: false,
+      listLoading: true,
+      photo: {},
+      photos: [],
+      editable: false,
+      pagination: {
+        page: 1,
+        size: 18,
+        sort: null
+      },
+      queryParam: {
+        page: 0,
+        size: 18,
+        sort: null,
+        keyword: null,
+        mediaType: null,
+        attachmentType: null
+      }
+    }
+  },
+  created() {
+    this.loadPhotos()
+  },
+  methods: {
+    loadPhotos(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
+      photoApi.query(this.queryParam).then(response => {
+        this.photos = response.data.data.content
+        this.pagination.total = response.data.data.total
+        this.listLoading = false
+      })
+    },
+    showDrawer(photo) {
+      this.photo = photo
+      this.drawerVisiable = true
+    },
+    handlePaginationChange(page, size) {
+      this.$log.debug(`Current: ${page}, PageSize: ${size}`)
+      this.pagination.page = page
+      this.pagination.size = size
+      this.loadPhotos()
+    },
+    handleEditClick() {
+      this.editable = true
+    },
+    handleDeletePhoto() {
+      photoApi.delete(this.photo.id).then(response => {
+        this.$message.success('删除成功！')
+        this.onClose()
+      })
+    },
+    resetParam() {
+      this.queryParam.keyword = null
+      this.queryParam.mediaType = null
+      this.queryParam.attachmentType = null
+      this.loadPhotos()
+    },
+    handleDelete(attachment) {
+      this.loadPhotos()
+    },
+    onDrawerClose() {
+      this.drawerVisiable = false
+    }
+  }
+}
+</script>
+
+<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>