链接上传子页面，上传下载功能

src/App.vue

@@ -36,7 +36,7 @@ export default {
     return {
       navTitle1: ' > 数据管理',
       navTitle2: '',
-      isManufacturer: 'manufacturer', // distributor经销商 manufacturer厂商
+      isManufacturer: 'distributor', // distributor 经销商 manufacturer 厂商
     }
   },
   methods: {

src/components/Modal.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="modal-backdrop">
+    <div class="modal" :style="mainStyles">  <!--  id="unloadFile" -->
+      <div class="modal-header">
+        <h3>编辑</h3>
+      </div>
+      <div class="modal-body">
+        <div class="bodyRow">
+          <span>资料名称</span
+          ><select name="" id="">
+            <option value="">请选择</option>
+          </select>
+        </div>
+        <div class="bodyRow">
+          <span>发布时间</span
+          ><select name="" id="">
+            <option value="">请选择</option>
+          </select>
+        </div>
+        <div class="bodyRow">
+          <div class="contentCol1">
+            <span>车系</span
+            ><select name="" id="">
+              <option value="">请选择</option>
+            </select>
+          </div>
+          <div class="contentCol2">
+            <span>车型</span
+            ><select name="" id="">
+              <option value="">请选择</option>
+            </select>
+          </div>
+        </div>
+        <div class="bodyRow">
+          <div class="contentCol1">
+            <span>发布平台</span
+            ><select name="" id="">
+              <option value="">请选择</option>
+            </select>
+          </div>
+
+          <div class="contentCol2">
+            <span>发布板块</span
+            ><select name="" id="">
+              <option value="">请选择</option>
+            </select>
+          </div>
+        </div>
+        <div class="bodyRow">
+          <span>项目分类</span
+          ><select name="" id="">
+            <option value="">请选择</option>
+          </select>
+        </div>
+        <div class="bodyRow">
+          <div class="contentCol1">
+            <span>内容分类1</span
+            ><select name="" id="">
+              <option value="">请选择</option>
+            </select>
+          </div>
+          <div class="contentCol2">
+            <span>内容分类2</span
+            ><select name="" id="">
+              <option value="">请选择</option>
+            </select>
+          </div>
+        </div>
+        <div class="bodyRow">
+          <span>标题</span>
+          <input
+            type="text"
+            placeholder="文章标题"
+            v-model="dataset_title"
+          />
+        </div>
+        <div class="bodyRow">
+          <span>链接</span>
+          <input
+            type="text"
+            placeholder="文章链接"
+            v-model="dataset_link"
+          />
+        </div>
+      </div>
+      <div class="modal-footer">
+        <!-- <button type="button" class="btn-confirm" @click="confirm">确认</button> -->
+        <button type="button" class="btn-confirm" @click="onSubmit('form')">
+          确认
+        </button>
+        <button type="button" class="btn-close" @click="closeSelf">取消</button>
+      </div>
+    </div>
+  </div>
+</template>
+ 
+<script>
+export default {
+  name: "Modal",
+  props: {},
+  data() {
+    return {
+      formData: new FormData(),
+    };
+  },
+  methods: {
+    closeSelf() {
+      this.$emit("closeme");
+    },
+/*     toUploadFile() {
+      let btn = document.getElementById("unloadFile");
+      btn.click();
+      this.dialogVisible = false;
+      this.uploadPercent = 0;
+    }, */
+    onSubmit() {
+      this.formData.append("dataset_title", this.dataset_title);
+      this.formData.append("dataset_link", this.dataset_link);
+
+      this.$http({
+        method: "post",
+        url: "/auth/checkSign",
+        data: {
+          /*  token: token, */
+          /*   this.$http.post("/datasets/", this.formData) */
+        },
+      })
+        .then((r) => {
+          console.log(r);
+          this.$notify({
+            title: "成功",
+            message: "这是一条成功的提示消息",
+            type: "success",
+          });
+          this.$router.push({ path: "/filemanage/data" });
+        })
+        .catch((e) => {
+          console.log(e);
+          this.$notify.error({
+            title: "失败",
+            message: "创建数据集失败",
+          });
+        });
+    },
+  },
+};
+</script>
+
+<style>
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal {
+  background-color: #fff;
+  box-shadow: 2px 2px 20px 1px;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  width: 1030px;
+}
+.modal-header {
+  border-bottom: 1px solid #eee;
+  color: #313131;
+  justify-content: space-between;
+  padding: 15px;
+  display: flex;
+}
+.modal-footer {
+  border-top: 1px solid #eee;
+  justify-content: center;
+  padding: 15px;
+  display: flex;
+}
+.modal-body {
+  position: relative;
+  padding: 20px 150px 20px 150px;
+}
+.btn-close,
+.btn-confirm {
+  border-radius: 8px;
+  margin-left: 16px;
+  width: 56px;
+  height: 36px;
+  border: none;
+  cursor: pointer;
+}
+.btn-close {
+  color: #313131;
+  background-color: gray;
+}
+.btn-confirm {
+  color: #fff;
+  background-color: #2d8cf0;
+}
+.bodyRow {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.bodyRow span {
+  width: 80px;
+  margin: 10px;
+}
+.bodyRow select {
+  width: 80px;
+}
+.bodyRow input {
+  width: 480px;
+}
+.contentCol1 {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.contentCol1 span {
+  width: 80px;
+  margin: 10px;
+}
+.contentCol2 {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 403px;
+}
+</style>
+ 

src/views/data/InforList.vue

@@ -1,14 +1,247 @@
 <template>
   <div class="upload_record">
     <h1>资料列表</h1>
+    <div class="record">
+      <div>上传记录</div>
+      <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="">
+            <option value="">不限</option>
+            <option value="">是</option>
+            <option value="">否</option>
+          </select>
+          <span>是否反馈</span>
+          <select name="" id="">
+            <option value="">不限</option>
+            <option value="">是</option>
+            <option value="">否</option>
+          </select>
+          <span>排序</span>
+          <select name="" id="">
+            <option value="">时间降序</option>
+            <option value="">时间升序</option>
+          </select>
+        </div>
+        <button>确定</button>
+      </div>
+      <div class="tableD">
+        <UpLoadTable
+          :trStyle="trStyle"
+          :tableHeader="tableHeaderD"
+          :tableData="tableData"
+          :tableHeadStyle="tableHeadStyle"
+          :operation="operation"
+          :discolor="discolor"
+          :flag="false"
+        />
+      </div>
+      <div class="pageD">
+        <Tablepage
+          :totalPage="totalPage"
+          :currentPage="currentPage"
+          @change_page="changePage"
+          @jump_page="jumpPage"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import Tablepage from "../../components/TablePage";
+import UpLoadTable from "../../components/Table";
 export default {
-}
+  props: {
+    isManufacturer: {
+      type: String,
+      default: "distributor",
+    },
+  },
+  components: {
+    Tablepage,
+    UpLoadTable,
+  },
+  data() {
+    return {
+      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: "50/20",
+          feedback: "未反馈",
+        },
+        {
+          name: "雷克萨斯纯电动SUV",
+          time: "2021/04",
+          spread: "传播类型1",
+          uploadTime: "",
+          down: "50/20",
+          feedback: "未反馈",
+        },
+        {
+          name: "a，续航可达400公里",
+          time: "2021/04",
+          spread: "传播类型1",
+          uploadTime: "",
+          down: "50/20",
+          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: () => {
+      alert("展示详情");
+    },
+    feedback: () => {
+      alert("反馈");
+    },
+    download: () => {
+      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;
+}
 </style>

src/views/data/UploadLink.vue

@@ -1,216 +1,250 @@
-<template>
-  <div class="upload_Link">
-    <span><b>链接上传</b></span>
-    <span><b>针对论坛及其他平台链接上传</b></span>
-    <div class="contentHead">
-      <span>上传平台</span>
-      <select name="" id="">
-        <option value="">汽车之家</option>
-        <option value="">请选择</option>
-      </select>
-    </div>
-    <div class="tableBox">
-      <table class="feedbackTable">
-        <thead>
-          <tr class="tableHeadStyle1">
-            <td>论坛传播情况汇总</td>
-          </tr>
-          <tr class="tableHeadStyle2">
-            <td v-for="(item, index) in tableHeader" :key="index">
-              {{ item }}
-            </td>
-          </tr>
-        </thead>
-        <tbody class="bodyStyle">
-          <tr
-            class="tableHeadStyle2 bodyContent"
-            v-for="(obj, index) in tableData"
-            :key="index"
-            :class="{ table_gray: !discolor && index % 2 === 0 }"
-          >
-            <td  v-if="flag">{{ index + 1 }}</td>
-            <td v-for="(item, index) in obj" :key="index" >
-              {{ item }}
-            </td>
-            <td v-if="operation">
-              <span
-                v-for="(operationObj, index) in operation"
-                :key="index"
-                @click="operationObj.function"
-                class="operationStyle"
-                >{{ operationObj.name }}
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    isManufacturer: {
-      type: String,
-      default: "distributor",
-    },
-  },
-  components: {},
-  data() {
-    return {
-      // 表格配置
-      sum: 240, // 一共有多少条数据
-      pageSize: 20, // 每页展示的数据
-      discolor: false, // 是否隔行变色
-      currentPage: 1,
-      /* tableHeader: [
-        "NO.",
-        "DLR Code",
-        "经销商名称",
-        "所属区域",
-        "发布日期",
-        "资料名称",
-        "反馈日期",
-        "发布平台",
-        "发布版块",
-        "项目分类",
-      ], */
-      tableHeader: [
-        "NO.",
-        "发布日期",
-        "资料名称",
-        "车系",
-        "车型",
-        "发布版块",
-        "项目分类",
-        "内容分类1",
-        "内容分类2",
-        "标题",
-        "链接",
-        "操作",
-      ],
-      tableData: [
-        {
-          releaseTime: "2021/03/04",
-          dataName: "雷克萨斯ES上市",
-          carSeries: "雷克萨斯ES",
-          carType: "ES雷克萨斯",
-          releaseMedia: "S雷克萨斯",
-          releasePlate: " d",
-          projectClass: "东区",
-          draftGenre: "雷克萨斯ES",
-          contentClass: "ES雷克萨斯",
-          articleTitle: "S雷克萨斯",
-          //articleLink: "",
-        },
-      ],
-      flag: true,
-      operation: [
-        {
-          name: "查看",
-          function: () => {
-            this.showDetail();
-          },
-        },
-      ],
-    };
-  },
-  methods: {
-    showDetail: () => {
-      alert("展示详情");
-    },
-  },
-};
-</script>
-
-<style scoped lang="less">
-.contentHead {
-  height: 55px;
-  display: flex;
-  align-items: center;
-}
-.contentHead span {
-  margin-right: 15px;
-}
-.tableBox {
-  width: 1030px;
-  overflow: auto;
-}
-.tableBox {
-  text-align: center;
-  .table {
-    table-layout: fixed;
-    background-color: #fff;
-    border-collapse: collapse;
-    border: none;
-    td {
-      border: 1px solid #ccc;
-    }
-    span {
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-}
-.table_gray {
-  background: #f5f5f5;
-}
-
-.tableBox table td {
-  border: 1px solid #ccc;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-// 表头样式
-.tableHeadStyle1 {
-  background: #848484;
-  height: 30px;
-  color: #fff;
-  display: flex;
-  align-items: center;
-}
-.tableHeadStyle1 td {
-  width: 100%;
-  padding: 7px 5px;
-}
-.tableHeadStyle2 {
-  background: #848484;
-  height: 30px;
-  color: #fff;
-  display: flex;
-  align-items: center;
-}
-.tableHeadStyle2 td {
-  width: 60px;
-  padding: 7px 5px;
-}
-.tableHeadStyle2 td:nth-child(10) {
-  width: 100px;
-  padding: 7px 5px;
-}
-.tableHeadStyle2 td:nth-child(11) {
-  width: 100px;
-  padding: 7px 5px;
-}
-.tableHeadStyle2 td:nth-child(2) {
-  width: 100px;
-  padding: 7px 5px;
-}
-.tableHeadStyle2 td:nth-child(3) {
-  width: 100px;
-  padding: 7px 5px;
-}
-.bodyStyle {
-  display: block;
-  background-color: #fff;
-}
-.bodyContent td {
-  background-color: #fff;
-}
-.operationStyle {
-  color: #0000ff;
-}
-</style>
+<template>
+  <div class="upload_Link">
+    <span><b>链接上传</b></span>
+    <span><b>针对论坛及其他平台链接上传</b></span>
+    <div class="contentHead">
+      <span>上传平台</span>
+      <select name="" id="">
+        <option value="">汽车之家</option>
+        <option value="">请选择</option>
+      </select>
+    </div>
+    <div class="tableBox">
+      <table class="feedbackTable">
+        <thead class="theadStyle">
+          <tr class="tableHeadStyle1">
+            <td>论坛传播情况汇总</td>
+          </tr>
+          <tr class="tableHeadStyle2">
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item }}
+            </td>
+          </tr>
+        </thead>
+        <tbody class="bodyStyle">
+          <tr
+            class="tableHeadStyle2 bodyContent"
+            v-for="(obj, index) in tableData"
+            :key="index"
+            :class="{ table_gray: !discolor && index % 2 === 0 }"
+          >
+            <td v-if="flag">{{ index + 1 }}</td>
+            <td v-for="(item, index) in obj" :key="index">
+              {{ item }}
+            </td>
+            <td class="operationStyle">
+              <span @click="toggleModal">编辑</span>
+              <span>删除</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <Modal v-show="showModal" v-on:closeme="closeme"></Modal>
+    <div class="fileOperation">
+      <span class="operationStyle">导入模板</span>
+      <button>导入</button>
+      <button>导出</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Modal from "../../components/Modal";
+export default {
+  props: {
+    isManufacturer: {
+      type: String,
+      default: "distributor",
+    },
+  },
+  components: {
+    Modal,
+  },
+  data() {
+    return {
+      showModal: false,
+      // 表格配置
+      sum: 240, // 一共有多少条数据
+      pageSize: 20, // 每页展示的数据
+      discolor: false, // 是否隔行变色
+      currentPage: 1,
+      /* tableHeader: [
+        "NO.",
+        "DLR Code",
+        "经销商名称",
+        "所属区域",
+        "发布日期",
+        "资料名称",
+        "反馈日期",
+        "发布平台",
+        "发布版块",
+        "项目分类",
+      ], */
+      tableHeader: [
+        "NO.",
+        "发布日期",
+        "资料名称",
+        "车系",
+        "车型",
+        "发布版块",
+        "项目分类",
+        "内容分类1",
+        "内容分类2",
+        "标题",
+        "链接",
+        "操作",
+      ],
+      tableData: [
+        {
+          releaseTime: "2021/03/04",
+          dataName: "雷克萨斯ES上市",
+          carSeries: "雷克萨斯ES",
+          carType: "ES雷克萨斯",
+          releaseMedia: "S雷克萨斯",
+          // releasePlate: " ",
+          projectClass: "东区",
+          draftGenre: "雷克萨斯ES",
+          contentClass: "ES雷克萨斯",
+          articleTitle: "S雷克萨斯",
+          articleLink: "d",
+        },
+      ],
+      flag: true,
+      operation: [
+        {
+          name: "编辑",
+          function: () => {
+            this.EditForm();
+          },
+        },
+        {
+          name: "删除",
+          function: () => {
+            this.showDetail();
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    EditForm: () => {
+      alert("编辑");
+    },
+    showDetail: () => {
+      alert("展示详情");
+    },
+    toggleModal: function () {
+      this.showModal = !this.showModal;
+    },
+    closeme: function () {
+      this.showModal = !this.showModal;
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.contentHead {
+  height: 55px;
+  display: flex;
+  align-items: center;
+}
+.contentHead span {
+  margin-right: 15px;
+}
+.tableBox {
+  width: 1030px;
+  overflow: auto;
+}
+.tableBox {
+  text-align: center;
+  .table {
+    table-layout: fixed;
+    background-color: #fff;
+    border-collapse: collapse;
+    border: none;
+    td {
+      border: 1px solid #ccc;
+    }
+    span {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+.table_gray {
+  background: #f5f5f5;
+}
+
+.tableBox table td {
+  border: 1px solid #ccc;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+// 表头样式
+.theadStyle tr td {
+  color: white;
+}
+.tableHeadStyle1 {
+  background: #848484;
+  height: 30px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+}
+.tableHeadStyle1 td {
+  width: 100%;
+  padding: 7px 5px;
+}
+.tableHeadStyle2 {
+  background: #848484;
+  height: 30px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+}
+.tableHeadStyle2 td {
+  width: 60px;
+  padding: 7px 5px;
+}
+.tableHeadStyle2 td:nth-child(10) {
+  width: 100px;
+  padding: 7px 5px;
+}
+.tableHeadStyle2 td:nth-child(11) {
+  width: 100px;
+  padding: 7px 5px;
+}
+.tableHeadStyle2 td:nth-child(2) {
+  width: 100px;
+  padding: 7px 5px;
+}
+.tableHeadStyle2 td:nth-child(3) {
+  width: 100px;
+  padding: 7px 5px;
+}
+.bodyStyle {
+  display: block;
+  background-color: #fff;
+}
+.bodyContent td {
+  background-color: #fff;
+}
+.operationStyle {
+  color: #0000ff;
+  display: flex;
+  justify-content: space-around;
+}
+.operationStyle span {
+  color: #0000ff;
+}
+.fileOperation{
+    display: flex;
+    justify-content: flex-start;
+    margin: 10px;
+    align-items: center;
+}
+</style>

src/views/data/UploadRecord.vue

@@ -1,218 +0,0 @@
-<template>
-  <div class="record">
-    <div>上传记录</div>
-    <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="">
-          <option value="">不限</option>
-          <option value="">是</option>
-          <option value="">否</option>
-        </select>
-        <span>是否反馈</span>
-        <select name="" id="">
-          <option value="">不限</option>
-          <option value="">是</option>
-          <option value="">否</option>
-        </select>
-        <span>排序</span>
-        <select name="" id="">
-          <option value="">时间降序</option>
-          <option value="">时间升序</option>
-        </select>
-      </div>
-      <button>确定</button>
-    </div>
-    <div class="tableD">
-      <UpLoadTable
-        :trStyle="trStyle"
-        :tableHeader="tableHeaderD"
-        :tableData="tableData"
-        :tableHeadStyle="tableHeadStyle"
-        :operation="operation"
-        :discolor="discolor"
-        :flag="false"
-      />
-    </div>
-    <div class="pageD">
-      <Tablepage
-        :totalPage="totalPage"
-        :currentPage="currentPage"
-        @change_page="changePage"
-        @jump_page="jumpPage"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import Tablepage from "../../components/TablePage";
-import UpLoadTable from "../../components/Table";
-export default {
-  props: {
-    isManufacturer: {
-      type: String,
-      default: "distributor",
-    },
-  },
-  components: {
-    Tablepage,
-    UpLoadTable,
-  },
-  data() {
-    return {
-      tableHeaderD: [
-        "资料名称",
-        "时间类型",
-        "传播类型",
-        "上传时间",
-        "下载状态",
-        "反馈状态",
-        "操作",
-      ],
-      operation: [
-        {
-          name: "下载",
-          function: () => {
-            this.download();
-          },
-        },
-        {
-          name: "反馈",
-          function: () => {
-            this.feedback();
-          },
-        },
-        {
-          name: "查看详情>",
-          function: () => {
-            this.showDetail();
-          },
-        },
-      ],
-      // 表格配置
-      sum: 240, // 一共有多少条数据
-      pageSize: 20, // 每页展示的数据
-      discolor: false, // 是否隔行变色
-      currentPage: 1,
-      flag: 0,
-      tableData: [
-        {
-          name: "北京博瑞",
-          time: "2021/04",
-          spread: "传播类型1",
-          uploadTime: "",
-          down: "50/20",
-          feedback: "已反馈",
-        },
-        {
-          name: "雷克萨斯纯电动SUV",
-          time: "2021/04",
-          spread: "传播类型1",
-          uploadTime: "",
-          down: "50/20",
-          feedback: "已反馈",
-        },
-        {
-          name: "a，续航可达400公里",
-          time: "2021/04",
-          spread: "传播类型1",
-          uploadTime: "",
-          down: "50/20",
-          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: () => {
-      alert("展示详情");
-    },
-    feedback: () => {
-      alert("反馈");
-    },
-    download: () => {
-      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
-      );
-    },
-  },
-};
-</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;
-}
-</style>