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

<template>
  <div>
    <div class="upload_record" v-if="!isShowDetail">
      <!--   <h1>资料列表</h1> -->
      <div class="search HeadLeft">
        <div class="input">
          <img src="../../img/search.png" />
          <input
            type="text"
            name=""
            id=""
            placeholder="请输入要搜索的资料名"
            v-model="searchName"
          />
        </div>
        <button @click="searchByName()">搜索</button>
      </div>
      <div class="sortBox">
        <div class="sort_inside">
          <span>是否下载</span>
          <select name="" id="isDownload" v-model="downloadSortVal">
            <option value="">不限</option>
            <option value="already">已下载</option>
            <option value="notyet">未下载</option>
          </select>
          <span>是否完成</span>
          <select name="" id="isReturn" v-model="reportSortVal">
            <option value="">不限</option>
            <option value="already">已完成</option>
            <option value="notyet">待办</option>
          </select>
          <span>排序</span>
          <select name="" id="timeSort" v-model="timeSortVal">
            <option value="dec">时间降序</option>
            <option value="asc">时间升序</option>
          </select>
        </div>
        <button @click="searchByCondition">确定</button>
      </div>
      <div class="tableD">
        <div class="table_template">
          <table class="table">
            <thead>
              <tr :style="tableHeadStyle">
                <td
                  v-for="(item, index) in tableHeaderD"
                  :key="index"
                  :style="tableHeadStyle"
                >
                  {{ item }}
                </td>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(obj, index) in tableData"
                :key="index"
                :class="{ table_gray: !discolor && index % 2 === 0 }"
              >
                <!--  <td v-for="(item, i) in obj" :key="i" :style="trStyle"> -->
                <td>{{ obj.informationName || "北京博瑞" }}</td>
                <td>{{ (obj.filePulishTime || "").replace("-", "/") }}</td>
                <td>{{ obj.accountScope == 1 ? "共通" : "部分" }}</td>
                <td>
                  {{
                    (obj.fileUploadDate || "")
                      .replace("T", " ")
                      .slice(0, -4)
                      .replace(RegExp("-", "g"), "/")
                  }}
                </td>
                <td>{{ obj.download > 0 ? "已下载" : "未下载" }}</td>
                <td>
                  <!-- <span
                    @click="waitToReport(obj.report, index)"
                    :class="showItemOperation"
                    class="reportStyle"
                    >待办</span
                  > -->
                  <!--  :class="{ reportStyle: obj.report == 0 ? true : false }" -->
                  <!-- <span :class="!showItemOperation">已完成</span> -->
                  <!-- <span
                    @click="waitToReport(obj, index)"
                    :class="{
                      showItemOperationStyle: obj.report == 1 ? true : false,
                    }"
                    class="reportStyle"
                    >待办</span
                  >
                  <span
                    :class="{
                      showItemOperationStyle: obj.report == 0 ? true : false,
                    }"
                    >已完成</span
                  > -->
                  <span v-if="!obj.endDate || (obj.endDate && obj.download == 1 && obj.report == 1)">已完成</span>
                  <span v-else @click="waitToReport(obj, index)" :class="{noDownLoad: obj.download == '0'}">待办</span>
                </td>

                <td v-if="operation" :style="trStyle" class="operationStyle">
                  <span
                    style="cursor: pointer"
                    v-for="(operationObj, i) in operation"
                    :key="i"
                    @click="
                      operationObj.function(obj, index);
                      nowIndex = index;
                    "
                    >{{ operationObj.name }}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="pageD">
        <TablePage
          :totalPage="totalPage"
          :currentPage="currentPage"
          @change_page="changePage"
          @jump_page="jumpPage"
        />
        <p>共{{ totalPage }}页，共{{ sum }}条数据</p>
      </div>
    </div>
    <div v-else>
      <Detail></Detail>
    </div>
  </div>
</template>

<script>
import TablePage from "../../components/TablePage";
import Detail from "./components/InfoListItemDetail";
import { env_url } from "../../config/env";
export default {
  props: {
    isManufacturer: {
      type: String,
      default: "distributor",
    },
    detailVisible: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    TablePage,
    Detail,
  },
  data() {
    return {
      nowIndex: 0,
      searchName: "",
      timeSortVal: "dec",
      reportSortVal: "",
      downloadSortVal: "",
      //initialPage: true,
      tableHeaderD: [
        "资料名称",
        "素材时间",
        "经销商范围",
        "上传时间",
        "下载状态",
        "任务状态",
        "操作",
      ],
      operation: [
        {
          name: "下载",
          function: (obj, i) => {
            console.log(obj, i);
            let config = {
              url: "/dealerDownload",
              data: {
                informationId: obj.id,
                agentId: this.userId,
              },
            };
            this.downloadPost(config, obj);
          },
        },
        {
          name: "查看详情>",
          function: (obj, i) => {
            let data = {
              informationId: obj.id,
            };
            this.showDetail(data, i);
            console.log(obj, i);
          },
        },
      ],
      // 表格配置
      sum: 0, // 一共有多少条数据
      pageSize: 20, // 每页展示的数据
      discolor: false, // flase是隔行变色
      currentPage: 1,
      tableData: [],
      tableFileData: [],
      tableHeadStyle: {
        background: "#848484",
        height: "30px",
        color: "white",
      },
      trStyle: {
        minwidth: "150px",
        height: "30px",
        overflow: "hidden",
      },
      onlineUrl: env_url, //'http://8.140.188.129:8080'线上 //http://8.136.230.133:8080 //测试
      userId: localStorage.getItem("userId"),
      endDate: "",
      localReport: "",
    };
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
    isShowDetail() {
      return this.$route.query && this.$route.query.tag ? true : false;
    },
    showItemOperation: function () {
      console.log(this.localReport);
      if (!this.localReport) {
        console.log(this.localReport);
        return { showItemOperationStyle: false };
      } else {
        return { showItemOperationStyle: true };
      }
      /*  let now = new Date().getTime();
     if (!this.endDate) {
        console.log("超出反馈时间", this.endDate);
        return { showItemOperationStyle: true };
      } else {
        let end = Date.parse(new Date(this.endDate));
        if (now > end) {
          return { showItemOperationStyle: true };
        } else {
          return { showItemOperationStyle: false };
        }
      } */
    },
  },
  methods: {
    download: function () {
      alert("下载");
    },
    // 获取某一页面的数据，展示在表格
    changePage: function (page) {
      this.currentPage = page;

      //携带搜索条件
      let data = {
        informationName: this.searchName,
        asc: this.timeSortVal == "dec" ? false : true,
        report: "",
        download: "",
        Page: this.currentPage,
        Rows: this.pageSize,
        agentId: this.userId,
      };
      if (this.reportSortVal) {
        data.report = this.reportSortVal === "already" ? true : false;
      }
      if (this.downloadSortVal) {
        data.download = this.downloadSortVal === "already" ? true : false;
      }
      this.newGetDataList(data);
    },
    // 点击上一页，下一页，首页，尾页
    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);

      //携带搜索条件
      let data = {
        informationName: this.searchName,
        asc: this.timeSortVal == "dec" ? false : true,
        report: "",
        download: "",
        Page: this.currentPage,
        Rows: this.pageSize,
        agentId: this.userId,
      };
      if (this.reportSortVal) {
        data.report = this.reportSortVal === "already" ? true : false;
      }
      if (this.downloadSortVal) {
        data.download = this.downloadSortVal === "already" ? true : false;
      }
      this.newGetDataList(data);
    },
    //下载文件
    downloadPost: function (config, obj) {
      console.log("下载文件:", config, obj);
      let url =
        this.onlineUrl +
        "/dealerDownload?informationId=" +
        config.data.informationId +
        "&agentId=" +
        config.data.agentId;
      window.open(url);

      let data = {
        informationName: this.searchName,
        asc: this.timeSortVal == "dec" ? false : true,
        report: "",
        download: "",
        Page: this.currentPage,
        Rows: this.pageSize,
        agentId: this.userId,
      };
       if (this.reportSortVal) {
        data.report = this.reportSortVal === "already" ? true : false;
      }
      if (this.downloadSortVal) {
        data.download = this.downloadSortVal === "already" ? true : false;
      }
      this.newGetDataList(data);
    },
    //查看详情
    showDetail: function (config, i) {
      console.log(config);
      /*  //获取附件数据
      this.$http({
        url: "/selectInformationFileList",
        method: "post",
        data: config,
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableFileData = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        }); */
      let report = '';
      let download = '';
      if (this.reportSortVal) {
        report = this.reportSortVal === "already" ? true : false;
      }
      if (this.downloadSortVal) {
        download = this.downloadSortVal === "already" ? true : false;
      }
      this.$router.push({
        path: "/inforList/detail",
        query: {
          tag: "infoListDetail",
          informationId: config.informationId,
          nowIndex: i,
        
        informationName: this.searchName,
        asc: this.timeSortVal == "dec" ? false : true,
        report: report,
        download: download,
        Page: this.currentPage,
        Rows: this.pageSize,
        agentId: this.userId,

        },
      });
    },
    //获取资料列表
    getDataListPage: function () {
      this.$http({
        url: "/firmsUploadListByAgent",
        method: "post",
        data: {
          asc: false,
          agentId: this.userId,
          Page: this.currentPage,
          Rows: this.pageSize,
        },
      })
        .then((res) => {
          console.log(res, 'aaaaaaaaaaaaaaa')
          if (res.data.code === 200) {
            this.tableData = res.data.data;
            this.sum = res.data.count;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //条件筛选 获取新的资料列表
    newGetDataList: function (config) {
      this.$http({
        url: "/firmsUploadListByAgent",
        method: "post",
        data: config,
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data;
            this.sum = res.data.count;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //搜索资料名
    searchByName: function (p) {
      console.log("insearchByName", p);
      let searchName = this.searchName;
      let data = {
        informationName: searchName,
        Page: p,
        Rows: this.pageSize,
        agentId: this.userId,
        //搜索条件重置
        asc: false,
        report: "",
        download: "",
      };
      //搜索条件重置
      this.timeSortVal = "dec";
      this.reportSortVal = "";
      this.downloadSortVal = "";

      this.$http({
        url: "/firmsUploadListByAgent",
        method: "post",
        data: data,
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data;
            this.sum = res.data.count;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    searchByCondition: function () {
      let asc = this.timeSortVal === "dec" ? false : true;
      let report = "";
      if (this.reportSortVal === "already") {
        report = this.reportSortVal === "already" ? true : false;
      } else if (this.reportSortVal === "notyet") {
        report = this.reportSortVal === "notyet" ? false : true;
      }
      let download = "";
      if (this.downloadSortVal === "already") {
        download = this.downloadSortVal === "already" ? true : false;
      } else if (this.downloadSortVal === "notyet") {
        download = this.downloadSortVal === "notyet" ? false : true;
      }
      let data = {
        informationName: '',
        asc: asc,
        report: report,
        download: download,
        Page: this.currentPage,
        Rows: this.pageSize,
        agentId: this.userId,
      };
      if (!this.searchName) {
        this.newGetDataList(data);
        console.log("insearchByCondition", data);
      } else {
        data.informationName = this.searchName;
        this.newGetDataList(data);
        console.log("insearchByCondition", data);
      }
    },
    //待办跳转
    // waitToReport: function (obj, i) {
    //   this.endDate = this.tableData[i].endDate;
    //   this.localReport = this.tableData[i].report;
    //   console.log(obj.report == 0, obj.download == 0);
    //   console.log(obj);
    //   if (obj.report == 0 && obj.download != 0) {
    //     console.log("待办跳转");
    //     this.$router.push({
    //       path: "/uploadLink/sonUploadLink",
    //       query: { informationName: obj.informationName, id: obj.id },
    //     });
    //   }
    // },
    waitToReport: function(obj) {
      let data = new Date();
      let year = data.getFullYear();
      let month = data.getMonth() + 1;
      let day = data.getDate();
      if (month < 10) {
        month = "0" + month;
      } else {
        month = month + "";
      }
      let endDate = obj.endDate.replace(RegExp("-", "g"), "");
      let localDate = year + month + day;
      let dateFlag = (+endDate) - (+localDate)
      if (obj.report == 0 && obj.download != 0 && dateFlag >= 0) {
        this.$router.push({
          path: "/uploadLink/sonUploadLink",
          query: { informationName: obj.informationName, id: obj.id },
        });
      }
    },
  },
  // watch: {
  //   //普通的watch监听
  //   userId(newValue) {
  //     if(newValue) {
  //       this.getDataListPage()
  //     }
  //   }
  // },
  mounted() {
    setTimeout(() => {
      this.userId = localStorage.getItem("userId");
      this.getDataListPage();
    }, 500);
  },
};
</script>

<style scoped lang="less">
.searchBox {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-left: 40px;
}

.sortBox {
  display: flex;
  justify-content: flex-end;
  height: 40px;
  align-items: center;
}
.sort_inside {
  display: flex;
  width: 400px;
  justify-content: space-between;
}
/* 查看详情样式 */
.table_template {
  text-align: center;
  .table {
    background-color: #fff;
    border-collapse: collapse;
    border: none;
    width: 100%;
    td {
      border: 1px solid #ccc;
    }
    span {
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.table_gray {
  background-color: #eeeeee;
}
.operationStyle span {
  color: #0000ff;
}
.operationStyle {
  color: #0000ff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/* 搜索栏 */
.search {
  padding: 10px 15px 10px 10px;
  display: flex;
  align-items: center;
  .input {
    background-color: #fff;
    padding: 2px;
    display: flex;
    align-items: center;
    margin-left: 16px;
    border: 1px solid #ccc;
    img {
      width: 28px;
      height: 28px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    input {
      background-color: #fff;
      border: 1px solid #ccc;
      margin-left: 4px;
      color: #555;
      font-size: 12px;
      height: 24px;
    }
  }
}
.HeadLeft {
  border: 1px solid #ccc;
}
.pageD {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
}
.pageD p {
  margin-left: 16px;
}
.reportStyle {
  text-decoration: underline;
  cursor: pointer;
}
.showItemOperationStyle {
  display: none;
}
.noDownLoad{
  color: rgb(173, 162, 162);
  cursor: text!important;
}
</style>