

<template>
  <!-- 图片资料 -->
  <div class="picture-panel">
    <a-row class="item-row" v-if="sources.length > 0">
      <template v-for="item in sources" :key="item.id">
        <a-col :span="8" class="item-col">
          <div class="source-content">
            <a-image
              :width="200"
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            />
          </div>
          <div class="info">
            <span class="name" :title="item.fileName">{{ item.fileName }}</span>
            <span class="uploadTime" :title="item.uploadTime">上传时间：{{ item.uploadTime }}</span>
          </div>
        </a-col>
      </template>
    </a-row>
    <a-row class="item-row-no" v-else>暂无数据</a-row>
  </div>
</template>
          
    <script>
import { defineComponent, reactive, toRefs, onMounted, ref, watch, getCurrentInstance } from 'vue';
import moment from 'moment';
export default defineComponent({
  name: 'PicturePanel',
  components: {},
  props: [],
  setup() {
    const data = reactive({
      sources: [],
    });

    /**
     * 查询图片资源
     */
    const queryPictures = () => {
      data.sources = [
        {
          id: '1001',
          fileCode: '123',
          fileName: 'GPG.doc',
          fielsPath: '../.././GPG.doc',
          uploadTime: '2023-06-05',
        },
        {
          id: '1002',
          fileCode: '123',
          fileName: 'GPG.doc',
          fielsPath: '../.././GPG.doc',
          uploadTime: '2023-06-05',
        },
        {
          id: '1003',
          fileCode: '123',
          fileName: 'GPG.doc',
          fielsPath: '../.././GPG.doc',
          uploadTime: '2023-06-05',
        },
        {
          id: '1003',
          fileCode: '123',
          fileName: 'GPG.doc',
          fielsPath: '../.././GPG.doc',
          uploadTime: '2023-06-05',
        },
        {
          id: '1005',
          fileCode: '123',
          fileName: 'GPG.doc',
          fielsPath: '../.././GPG.doc',
          uploadTime: '2023-06-05',
        },
      ];
    };
    onMounted(() => {
      queryPictures();
    });
    return {
      ...toRefs(data),
      queryPictures,
    };
  },
});
</script>
      <style lang="less" scoped>
.picture-panel {
  height: 100%;
  width: 100%;
  padding: 10px;
  .item-row {
    height: 100%;
    overflow: auto;
    .item-col {
      height: 240px;
      width: 100%;
      padding: 4px;
      .source-content {
        height: 100%;
        width: 100%;
        background: rgba(101, 224, 233, 0.2);
      }
      .info {
        position: absolute;
        bottom: 0px;
        height: 28px;
        width: calc(100% - 10px);
        display: flex;
        .name {
          display: flex;
          height: 28px;
          width: 40%;
          overflow: hidden;
        }
        .uploadTime {
          display: flex;
          height: 28px;
          width: 60%;
          overflow: hidden;
        }
      }
    }
  }
  .item-row-no {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>