Lexus-media/src/views/data/components/UploadRecordDetail.vue

<template>
  <div class="record_detail">
    <div class="title">
      <p class="data_detail">数据详情</p>
    </div>
    <div class="content">
      <div class="content_datail">
        <div class="detail">
          <p style="width: 65px">资料名称：</p>
          <p>{{ detailData.informationName || '' }}</p>
        </div>
        <div class="detail">
          <p style="width: 65px">上传时间：</p>
          <p>{{ (detailData.filePulishTime || '').replace(RegExp("-", "g"), '/') }}</p>
        </div>
        <div class="multiDetail">
          <div class="time">
            <p style="width: 65px">素材时间：</p>
            <p>{{ (((detailData.fileUploadDate || '').replace('T', ' ')).slice(0, -4)).replace(RegExp("-", "g"), '/') }}</p>
          </div>
          <div class="range">
            <p style="width: 75px">经销商范围：</p>
            <p style="margin-right: 10px">
              {{ detailData.accountScope === 1 ? "共通" : "部分" }}
            </p>
            <p>
              可查看经销商<span @click="showTable">{{
                detailData.totalCount || 0
              }}</span
              >家
            </p>
          </div>
        </div>
        <div class="detail">
          <div style="width: 15%">资料描述：</div>
          <p style="width: 85%">{{ detailData.fileDiscription || '' }}</p>
        </div>
        <div class="files">
          <p style="width: 65px">附件：</p>
          <div class="filesName">
            <p
              v-for="(item, index) in filesList"
              :key="index"
              @click="downloadFile(index)"
            >
              {{ item.fileName || ''}}
            </p>
          </div>
        </div>
      </div>
      <div class="table" v-show="isShowTable">
        <div class="table_option">
          <select @change="seletByArea" v-model="optionValue">
            <option value="">全区</option>
            <option v-for="(item, index) in areaList" :key="index">
              {{ item }}
            </option>
          </select>
          <div class="hidTable" @click="hidTable">
            <img src="../../../img/crossMark.png" />
          </div>
        </div>
        <div class="count">
          <Count :sum="sum"></Count>
        </div>
        <Table
          :tableData="tableData"
          :pageSize='pageSize'
          :currentPage='currentPage'
        ></Table>
        <div v-if="sum">
          <TablePage
            :totalPage="totalPage"
            :currentPage="currentPage"
            @change_page="changePage"
            @jump_page="jumpPage"
          ></TablePage>
        </div>
      </div>
    </div>
    <div class="download">
      <p class="download_record">下载记录</p>
      <div class="btn">
        <div class="current_button" @click="downloadExcel">导出</div>
      </div>
      <p class="tip">点击导出，查看该资料下载记录</p>
    </div>
  </div>
</template>

<script>
import Table from "./RecordDetailTable";
import Count from "../../../components/Count";
import TablePage from "../../../components/TablePage";
import { env_url, php_url } from "../../../config/env"
export default {
  components: {
    Table,
    Count,
    TablePage,
  },
  mounted() {
    let req = {
      page: this.page,
      rows: this.rows,
      asc: this.asc
    };
    console.log(req);
    this.getFirmsUploadList(req);
    this.getAreaList();
  },
  data() {
    return {
      isShowTable: false,
      sum: 0, // 表格总数据
      currentPage: 1,
      pageSize: 20,
      tableData: [],
      optionValue: "",
      filesList: [],
      index: (this.$route.query && this.$route.query.id) || "",
      asc: (this.$route.query && this.$route.query.asc) || true,
      rows: (this.$route.query && this.$route.query.rows) || 20,
      page: (this.$route.query && this.$route.query.page) || 20,
      detailData: {},
      areaList: [],
      onlineUrl: env_url, //'http://8.140.188.129:8080'线上 //http://8.136.230.133:8080 //测试
      php_url: php_url
    };
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
  },
  methods: {
    showTable: function () {
      this.isShowTable = !this.isShowTable;
      let id = this.detailData["id"];
      let req = {
        informationId: id,
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.getDlrData(req);
    },
    hidTable: function () {
      this.isShowTable = false;
    },
    seletByArea: function () {
      let id = this.detailData["id"];
      let req = {
        informationId: id,
        localArea: this.optionValue,
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.getDlrData(req);
    },
    // 获取某一页面的数据，展示在表格
    changePage: function (page) {
      this.currentPage = page;
      let id = this.detailData["id"];
      let req = {
        informationId: id,
        localArea: this.optionValue,
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.getDlrData(req);
    },
    // 点击上一页，下一页，首页，尾页
    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;
      }
      let id = this.detailData["id"];
      let req = {
        informationId: id,
        localArea: this.optionValue,
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.getDlrData(req);
    },
    // 下载附件
    downloadFile: function (i) {
      // let dataObj = {
      //   fileId: this.filesList[i]["id"],
      //   informationId: this.filesList[i]["informationId"],
      //   //agentId: this.filesList[i]['agentId'] 如果是厂商下载不传agentId
      // };
      let reqStr = "informationId=" + this.filesList[i]["informationId"] +"&" + "fileId=" + this.filesList[i]["id"];
      this.dealerDownload(reqStr);
    },
    // 导出 下载记录文件
    downloadExcel: function () {
      console.log(this.detailData);
      let reqStr = "=" + this.detailData["id"];
      this.exportTem(reqStr);
    },
    // 上传记录列表接口 获取对应详情
    getFirmsUploadList: function (data = {}) {
      this.$http({
        method: "post",
        url: "/firmsUploadList",
        data: data,
      })
        .then((res) => {
          if (res.data && res.data.code === 200) {
            this.detailData = res.data.data[this.index];
            let id = this.detailData["id"];
            let req = { informationId: id };
            this.selectInformationFileList(req);
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取 所有区域  接口
    getAreaList: function () {
      this.$http({
        method: "post",
        url: "/sys/agent/selectAgentAreaInfoList",
      })
        .then((res) => {
          if (res.data && res.data.code === 200) {
            this.areaList = res.data.data;
            console.log(this.areaList);
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 导出记录   接口
    exportTem: function (reqStr) {
      let url = this.php_url + "/lexus_php/web/information_export.php?informationId" + reqStr;
      window.open(url);
    },
    // 分页获取所有经销商信息接口
    getDlrData: function (data = {}) {
      this.$http({
        method: "post",
        url: "/sys/agent/selectAgentInfoPage",
        data,
      })
        .then((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);
        });
    },
    // 文件详情  接口
    selectInformationFileList(data) {
      this.$http({
        method: "post",
        url: "/selectInformationFileList",
        data: data,
      })
        .then((res) => {
          if (res.data && res.data.code === 200) {
            this.filesList = res.data.data;
            console.log(res.data.data, "文件");
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 文件下载接口
    dealerDownload: function (reqStr) {
      let url = this.onlineUrl + "/dealerDownload?" + reqStr;
      window.open(url);
    },
  }
};
</script>

<style scoped lang="less">
.record_detail {
  .title {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    .data_detail {
      padding-left: 10px;
      font-size: 14px;
      font-weight: bolder;
      height: 30.8px;
      line-height: 30.8px;
      // vertical-align: bottom;
      // display: table-cell;
    }
  }
  .content {
    display: flex;
    // justify-content: ;
    border: 1px solid #ccc;
    padding: 20px;
    .content_datail {
      width: 420px;
      height: 390px;
      padding: 20px 30px 0;
      .detail {
        width: 100%;
        display: flex;
        div{
          font-size: 12px;
        }
        p{
        min-height: 50px;
        }
      }
      .multiDetail {
        // display: flex;
        min-height: 50px;
        .time {
          // width: 126px;
          min-height: 50px;
          display: flex;
        }
        .range {
          display: flex;
          // width: 268px;
          min-height: 50px;
          span {
            color: #0056a0;
            margin: 0 10px;
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
      .files {
        display: flex;
        margin-top: 20px;
        .filesName {
          p {
            color: #0056a0;
            &:hover{
              cursor: pointer;
            }
          }
        }
      }
    }
    .table {
      width: 568px;
      height: 390px;
      background-color: #fff;
      padding: 10px;
      .table_option {
        height: 28px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        select {
          width: 144px;
          height: 28px;
          border: 1px solid #ccc;
          color: #555;
        }
      }
      .count {
        display: flex;
        justify-content: flex-end;
      }
      .hidTable {
        width: 41px;
        height: 26px;
        padding-left: 15px;
        img {
          width: 26px;
          height: 26px;
        }
      }
    }
  }
  .download {
    padding: 10px;
    .download_record {
      font-size: 14px;
    }
    .btn {
      margin: 20px 50px 10px;
    }
    .tip {
      margin-left: 68px;
    }
  }
}
</style>