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

<template>
  <div>
    <div class="upload_record" v-if="initialPage">
      <h1>资料列表</h1>
      <div class="searchBox">
        <div class="search_inside">
          <span><img src="" alt="" /></span>
          <input type="text" name="" id="" placeholder="请输入要搜索的资料名" />
          <button>搜索</button>
        </div>
      </div>
      <div class="sortBox">
        <div class="sort_inside">
          <span>是否下载</span>
          <select name="" id="isDownload">
            <option value="">不限</option>
            <option value="">是</option>
            <option value="">否</option>
          </select>
          <span>是否反馈</span>
          <select name="" id="isReturn">
            <option value="">不限</option>
            <option value="">是</option>
            <option value="">否</option>
          </select>
          <span>排序</span>
          <select name="" id="timeSort">
            <option value="">时间降序</option>
            <option value="">时间升序</option>
          </select>
        </div>
        <button>确定</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 :style="trStyle" v-if="flag">{{ index + 1 }}</td> -->
                <td v-for="(item, index) in obj" :key="index" :style="trStyle">
                  {{ item }}
                </td>
                <td v-if="operation" :style="trStyle" class="operationStyle">
                  <span
                    v-for="(operationObj, i) in operation"
                    :key="i"
                    @click="operationObj.function(index)"
                    >{{ operationObj.name }}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="pageD">
        <TablePage
          :totalPage="totalPage"
          :currentPage="currentPage"
          @change_page="changePage"
          @jump_page="jumpPage"
        />
      </div>
    </div>
    <div v-else>
      <Detail></Detail>
    </div>
    <!-- <div v-show="!initialPage">
      详情页面
      <div><span>资料名称</span><span>{{}}</span></div>
      <div><span>上传时间</span><span>{{}}</span></div>
      <div>
        <div><span>车系</span><span>{{}}</span></div>
        <div><span>车型</span><span>{{}}</span></div>
      </div>
      <div>
        <div><span>素材时间</span><span>{{}}</span></div>
        <div><span>经销商范围</span><span>{{}}</span></div>
      </div>
      <div><span>资料描述</span><span>{{}}</span></div>
      <span>附件</span>
    </div> -->
  </div>
</template>

<script>
import TablePage from "../../components/TablePage";
import Detail from './components/UploadLinkDetail';
export default {
  props: {
    isManufacturer: {
      type: String,
      default: "distributor",
    },
    detailVisible: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    TablePage,
    Detail,
  },
  data() {
    return {
      initialPage: this.detailVisible,
      tableHeaderD: [
        "资料名称",
        "时间类型",
        "传播类型",
        "上传时间",
        "下载状态",
        "反馈状态",
        "操作",
      ],
      operation: [
        {
          name: "下载",
          function: () => {
            //this.download();
            this.downloadPost();
          },
        },
        /*    {
          name: "反馈",
          function: () => {
            this.feedback();
          },
        }, */
        {
          name: "查看详情>",
          function: () => {
            this.showDetail();
          },
        },
      ],
      // 表格配置
      sum: 240, // 一共有多少条数据
      pageSize: 20, // 每页展示的数据
      discolor: false, // 是否隔行变色
      currentPage: 1,
      tableData: [
        {
          name: "北京博瑞",
          time: "2021/04",
          spread: "传播类型1",
          uploadTime: "",
          down: "已下载",
          feedback: "未反馈",
        },
        {
          name: "雷克萨斯纯电动SUV",
          time: "2021/04",
          spread: "传播类型1",
          uploadTime: "",
          down: "已下载",
          feedback: "未反馈",
        },
        {
          name: "续航可达400公里",
          time: "2021/04",
          spread: "传播类型1",
          uploadTime: "",
          down: "已下载",
          feedback: "未反馈",
        },
      ],
      tableHeadStyle: {
        background: "#848484",
        height: "30px",
        color: "white",
      },
      trStyle: {
        width: "150px",
        height: "30px",
        overflow: "hidden",
      },
    };
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
  },
  methods: {
    showDetail: function () {
      //alert("展示详情");
      this.initialPage = !this.initialPage;
    },
    feedback: () => {
      alert("反馈");
    },
    download: function () {
      alert("下载");
    },
    // 获取某一页面的数据，展示在表格
    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);
    },
    submit: function () {
      console.log(this.totalPage);
      this.sum = this.sum + 1;
      console.log(
        this.inforName,
        this.inforDes,
        this.materialTime,
        this.range,
        this.addByCustomize
      );
    },
    //下载文件
    downloadPost: function (config) {
      console.log(config);
      return new Promise((resolve, reject) => {
        this.$http({
          url: config.url,
          method: "post",
          data: config.data,
          responseType: "blob",
        })
          .then((res) => {
            // resolve(res);
            let link = document.createElement("a");
            link.href = window.URL.createObjectURL(new Blob([res.data]));
            link.target = "_blank";
            //文件名和格式
            link.download = "文件模板.xlsx";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
  },
  mounted() {},
};
</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: #f5f5f5;
}
.operationStyle span {
  color: #0000ff;
}
</style>