Lexus-media/src/views/data/UploadRecord.vue

<template>
  <div class="upload_record">
    <div v-if="!isShowDetail">
    <div class="search">
      <div class="input">
        <img src="../../img/search.png">
        <input type="text" @focus="focusInput" v-model="inputValue">
      </div>
      <div class="current_button" @click="search">
        搜索
      </div>
    </div>
    <div class="sort">
      <Count :sum='sum'/>
      <p>排序</p>
      <select v-model="order" @change="sort">
        <option value="">按时间降序</option>
        <option value="DESC">按时间升序</option>
      </select>
    </div>
    <div class="table">
      <Table
        :tableData='data'
        @download='download'
        @delet='delet'
        @detail='detail'
      >
      </Table>
    </div>
    <TablePage
      :currentPage='currentPage'
      :totalPage='totalPage'
      @change_page='changePage'
      @jump_page='jumpPage'
    ></TablePage>
    </div>
    <div v-else>
      <Detail></Detail>
    </div>
  </div>
</template>

<script>
import Count from '../../components/Count';
import Table from './components/UploadRecordTable';
import TablePage from '../../components/TablePage';
import Detail from './components/UploadRecordDetail';
export default {
  components: {
    Count,
    Table,
    TablePage,
    Detail
  },
  data() {
    return {
      inputValue: '请输入要搜索的资料名',
      order: '', // 排序方式
      sum: 100, // 表格总数据
      currentPage: 1,
      pageSize: 20,
      data: [
        {informationName:'雷克萨斯ES上市', filePulishTime:'2021/04',accountScope: '共通', download1: 50, downloadCount: 25, fileUploadDate: '2021/03/10 18:19'},
        {informationName:'雷克萨斯ES上市', filePulishTime:'2021/04',accountScope: '共通', download1: 50, downloadCount: 25, fileUploadDate: '2021/03/10 18:19'},
        {informationName:'雷克萨斯ES上市', filePulishTime:'2021/04',accountScope: '共通', download1: 50, downloadCount: 25, fileUploadDate: '2021/03/10 18:19'},
        {informationName:'雷克萨斯ES上市', filePulishTime:'2021/04',accountScope: '共通', download1: 50, downloadCount: 25, fileUploadDate: '2021/03/10 18:19'},
        {informationName:'雷克萨斯ES上市', filePulishTime:'2021/04',accountScope: '共通', download1: 50, downloadCount: 25, fileUploadDate: '2021/03/10 18:19'}
      ],
    }
  },
  computed:{
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum/this.pageSize);
    },
    isShowDetail() {
      return (this.$route.query && this.$route.query.id) ? true : false
    }
  },
  methods: {
    focusInput: function() {
      this.inputValue = '';
    },
    search: function() {
      console.log(this.inputValue);
      let data = {
        name: this.inputValue,
        asc: true
      }
      this.getFirmsUploadList(data);
      this.inputValue = '请输入要搜索的资料名'
    },
    sort: function(){
      // ASC降序
      let asc = this.order === 'DESC' ? false : true;
      let data = {
        name: this.inputValue,
        asc: asc
      }
      this.getFirmsUploadList(data);
    },
    changePage: function(page) {
      this.currentPage = page;
      console.log(page);
    },
    // 点击上一页，下一页，首页，尾页
    jumpPage: function(item) {
      switch(item) {
        case 1:
          this.currentPage = 1;
          break;
        case 2:
          this.currentPage = this.currentPage - 1;
          break;
        case 3:
          this.currentPage = this.currentPage + 1;
          break;
        case 4:
          this.currentPage = this.totalPage;
          break;
      }
      console.log(this.currentPage);
    },
    download: function(i) {
      this.selectInformationAgentList(i);
    },
    delet: function(i) {
      this.deleteInformationInfo(i);
    },
    detail: function(i) {
      let id = this.data[i].id || i
      this.$router.push({ query: { id: id } });
    },
    // 上传记录列表接口
    getFirmsUploadList: function(data) {
      this.$http(({
        methods: 'post',
        url: '/firmsUploadList',
        data: data
      })).then((res) => {
        console.log(res);
      }).catch((err) => {
        console.log(err);
      })
    },
    // 下载资料接口
    selectInformationAgentList: function(dataId) {
      this.$http({
        methods: 'post',
        url: '/selectInformationAgentList',
        data: {
          id: dataId
        }
      }).then((res) => {
        console.log(res);
      }).catch((err) => {
        console.log(err);
      })
    },
    // 删除记录接口
    deleteInformationInfo: function(dataId) {
      this.$http({
        method: 'post',
        url: '/deleteInformationInfo',
        data: {
          dataId: dataId
        }
      }).then((res) => {
        console.log(res);
      }).catch((err) => {
        console.log(err);
      })
    }
  },
  created() {
    this.getFirmsUploadList();
  }
}
</script>

<style scoped lang="less">
.upload_record{
  .search{
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    align-items: center;
    .input{
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 2px;
      display: flex;
      img{
        width: 28px;
        height: 28px;
        border: 1px solid #ccc;
      }
      input{
        background-color: #fff;
        border: 1px solid #ccc;
        margin-left: 3px;
        color: #555;
        font-size: 12px;
      }
    }
  }
  .sort{
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    height: 30px;
    p{
      margin: 10px 5px 0 15px;
      text-align: center;
      height: 20px;
    }
    select{
      border: 1px solid #ccc;
      font-size: 12px;
      height: 30px;
    }
  }
}
input{
  outline: none;
  border: 1px solid #ccc;
}
input:focus{
  animation: shadowAni 200ms linear forwards;
}
@keyframes shadowAni{
  0%{
    border-color: #cccccc;
    box-shadow: inset 0px 0px 0 #ccc;
  };
  100%{
    border-color: #75b9F0;
    box-shadow: 0px 0px 5px #75b9F0;
  }
}
</style>