上传记录，链接上传，table组件添加flag

src/components/Table.vue

@@ -8,7 +8,7 @@
         </thead>
         <tbody>
             <tr v-for="(obj, index) in tableData" :key="index" :class="{ table_gray: !discolor && index%2 === 0 }">
-                <td :style="trStyle">{{ index + 1 }}</td>
+                <td :style="trStyle" v-if="flag">{{ index + 1 }}</td>
                 <td v-for="(item, index) in obj" :key="index" :style="trStyle">
                     {{ item }}
                 </td>
@@ -89,7 +89,11 @@ export default {
         pageSize: {
             type: Number,
             default: 20
-        }
+        },
+        flag: {
+            type: Boolean,
+            default: true
+        },
     },
     mounted() {
     },

src/views/data/UploadLink.vue

@@ -1,14 +1,216 @@
 <template>
-  <div class="upload_record">
-    <h1>链接上传</h1>
+  <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>

src/views/data/UploadRecord.vue

@@ -1,14 +1,218 @@
 <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>
 </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>