halo/src/views/sheet/internal/GalleryList.vue

<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>