sist_web/src/views/content/components/file_list.vue

<template>
  <div class="file_list" style="background-color:#fff; margin-top: 3rem;">
    <div class="query">
      <el-row>
        <el-col :xs="14" :sm="14" :md="14" :lg="20" :xl="20">
          <!--<div style="width: 95%;">-->
          <div>
            <!--<input class="query_input" v-model="query"/>-->
            <el-input class="query_input" v-model="query" size="small"
                      :placeholder="$t('message.placeholder')"></el-input>
          </div>
        </el-col>
        <el-col :xs="10" :sm="10" :md="10" :lg="4" :xl="4" style="float: right">
          <el-button class="query_button" type="primary" size="small" icon="el-icon-search"
                     @click="handleCurrentChange(-1)">
            {{ $t('message.search') }}
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="list">
      <!--<el-row>-->
      <div class="file" v-for="(file ,index) in value.data" :key="index">
        <div class="file_name">
            <span class="span">
              <img class="def_img" src="@/assets/file_list/xz_icon_xz.png">
              <img class="hover_img" src="@/assets/file_list/xz_icon_xzls.png">
            </span>
          <a :href="file.fileAddr">{{ file.fileName }}</a>
        </div>
        <div class="file_time">
          {{ getDateTime(file.createTime) }}
        </div>


        <!--<el-col :span="16" :offset="2">-->
        <!--  -->
        <!--</el-col>-->
        <!--<el-col :span="6">-->
        <!--</el-col>-->
      </div>
      <!--</el-row>-->
    </div>
    <el-row>
      <el-col class="pagination_p">
        <el-pagination class="pagination"
                       :small="small"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page.sync="value.pageNum"
                       :page-sizes="[10,20, 30, 50, 100]"
                       layout="prev, pager,next,sizes,  jumper"
                       :total="value.total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getNode} from "@/api";

export default {
  name: "file_list",
  props: {
    value: {
      type: Object,
      default() {
        return{
          data:[],
          pageNum: 1,
          pageSize: 10,
        }
      },
    },
  },
  data() {
    return {
      width: document.documentElement.clientWidth,
      small: document.documentElement.clientWidth <= 992,
      query: '',
      pageSize:value.pageSize
    }
  },
  methods: {
    getDateTime(date) {
      let time = new Date(date);
      let year = time.getFullYear();
      let month = time.getMonth() + 1
      let day = time.getDate();
      return year + "-" + month + "-" + day;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      if (val === -1) {
        this.value.pageSize = 1
      } else {
        this.value.pageSize = val
      }
      this.getData()
    },
    downloadFile(file) {
      var filename = prompt(file.fileName);
      var a = document.createElement('a');
      a.href = file.fileAddr;
      a.download = filename;
      a.click()
    },
    handleCurrentChange(val) {
      if (val === -1) {
        this.value.pageNum = 1
      } else {
        this.value.pageNum = val
      }
      this.getData()
    },
    getData() {
      let data = {
        title: this.query,
        id: this.value.navId,
        pageNum: this.value.pageNum,
        pageSize: this.value.pageSize,
      }
      this.type = this.$route.query && this.$route.query.type
      if (this.type != null && this.type != 0) {
        data.id = this.value.secondId
      }
      console.log(data,"data")
      getNode(data).then(res => {
        this.value.data = res.rows
        this.value.total = res.total
      })
    },
    getDay(time) {
      let day = new Date(time).getDate();
      return day
    },
    getTime(time) {
      let date = new Date(time);
      let month = date.getMonth() + 1;
      return date.getFullYear() + "-" + month
    }
  }
}
</script>

<style scoped lang="scss">

.list {
  padding-top: 5rem;
  font-size: 1.6rem;

  .file {
    color: #757575;
    clear: both;
    padding: 2rem 3rem;

    .file_name {
      float: left;

      .span {
        padding-right: 1rem;

        .def_img, .hover_img {
          width: 1.5rem;
        }

        .def_img {
          display: inline-block;
        }

        .hover_img {
          display: none;
        }
      }
    }

    .file_time {
      float: right;
    }

    a {
      color: #757575 !important;
    }
  }

  .file:hover {
    //background-color: gray;
    color: #1956BC;

    a {
      color: #1956BC !important;
      font-weight: bold;
    }

    .file_name {
      .def_img {
        display: none;
      }

      .hover_img {
        display: inline-block;
      }
    }


  }

  a {
    text-decoration: none;
  }
}

.pagination_p {
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 5rem;

  .pagination {
    display: inline-block;
    float: none;
  }
}

.query {
  //margin: 1rem 0;
  z-index: 999;
  width: 30%;
  position: absolute;
  right: 3rem;
  top: -2.4rem;
  //float: right;

  .query_input {
    border-color: #1956BC !important;
    border-radius: 0 !important;

  }

  .query_button {
    //height: 3.5rem;
    border-radius: 0rem 1rem 1rem 0rem;
    background-color: #1956BC;
    border-color: #1956BC !important;
  }

}

@media screen and (min-width: 1100px) and (max-width: 1400px) {
  .query {
    width: 40% !important;
  }
}

@media screen and (max-width: 1100px) {
  .query {
    width: 80% !important;
  }
}

</style>