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="tableData"
          @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
        :detailData='detailData'
      ></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,
      tableData: [],
      detailData: {}
    };
  },
  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 = {};
      if (this.inputValue !== "请输入要搜索的资料名") {
        data = {
          informationName: this.inputValue,
        };
      }
      this.getFirmsUploadList(data);
      this.inputValue = "请输入要搜索的资料名";
    },
    sort: function () {
      // ASC降序
      let asc = this.order === "DESC" ? false : true;
      let data = {
        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) {
      let id = this.tableData[i].id;
      console.log(id);
      this.selectInformationAgentList(id);
    },
    delet: function (i) {
      let id = this.tableData[i].id;
      this.deleteInformationInfo(id);
      setTimeout(() => {
        this.getFirmsUploadList();
      }, 2000)
    },
    detail: function (i) {
      let id = this.tableData[i].id || i;
      this.detailData = this.tableData[i];
      this.$router.push({ query: { id: id } });
    },
    // 上传记录列表接口
    getFirmsUploadList: function (data = {}) {
      this.$http({
        method: "post",
        url: "/firmsUploadList",
        data: data,
      })
        .then((res) => {
          console.log(res);
          if (res.data && res.data.code === 200) {
            this.tableData = res.data.data;
            this.sum = res.data.count;
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 下载资料接口
    selectInformationAgentList: function (dataId) {
      return new Promise((resolve, reject) => {
        this.$http({
          url: '/selectInformationAgentList',
          method: "post",
          data: {id: dataId},
          responseType: 'blob'
        })
          .then((res) => {
            console.log(res);
            resolve(res);
            let link = document.createElement("a");
            link.href = window.URL.createObjectURL(new Blob([res.data]));
            link.target = "_blank";
            //文件名和格式
            link.download = "文件模板.zip";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    // 删除记录接口
    deleteInformationInfo: function (dataId) {
      this.$http({
        method: "post",
        url: "/deleteInformationInfo",
        data: {
          id: dataId,
        },
      })
        .then((res) => {
          if(res.data && res.data.code === 200){
            alert('删除成功');
          }else{
            console.log(res.message)
          }
        })
        .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>