/

src/App.vue

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

src/views/data/InforList.vue

@@ -51,7 +51,6 @@
                 :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>
@@ -59,7 +58,7 @@
                   <span
                     v-for="(operationObj, i) in operation"
                     :key="i"
-                    @click="operationObj.function(index)"
+                    @click="operationObj.function(index);nowIndex=index"
                     >{{ operationObj.name }}
                   </span>
                 </td>
@@ -78,29 +77,16 @@
       </div>
     </div>
     <div v-else>
-      <Detail></Detail>
+      <Detail
+      :detailData="tableData"
+      :nowIndex="nowIndex"></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';
+import Detail from './components/InfoListItemDetail';
 export default {
   props: {
     isManufacturer: {
@@ -131,9 +117,9 @@ export default {
       operation: [
         {
           name: "下载",
-          function: () => {
+          function: (i) => {
             //this.download();
-            this.downloadPost();
+            this.downloadPost(i);
           },
         },
         /*    {
@@ -144,15 +130,15 @@ export default {
         }, */
         {
           name: "查看详情>",
-          function: () => {
-            this.showDetail();
+          function: (i) => {
+            this.showDetail(i);
           },
         },
       ],
       // 表格配置
       sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
-      discolor: false, // 是否隔行变色
+      discolor: false, // flase是隔行变色
       currentPage: 1,
       tableData: [
         {
@@ -245,7 +231,7 @@ export default {
     },
     //下载文件
     downloadPost: function (config) {
-      console.log(config);
+      console.log("下载文件:",config);
       return new Promise((resolve, reject) => {
         this.$http({
           url: config.url,
@@ -313,9 +299,15 @@ export default {
   }
 }
 .table_gray {
-  background: #f5f5f5;
+  background-color: #EEEEEE;
 }
 .operationStyle span {
   color: #0000ff;
 }
+.operationStyle  {
+  color: #0000ff;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
 </style>

src/views/data/UploadLink.vue

@@ -23,7 +23,7 @@
         </thead>
         <tbody class="bodyStyle">
           <tr
-            class="tableHeadStyle2 bodyContent"
+            class="bodyContent tableHeadStyle2"
             v-for="(obj, index) in tableData"
             :key="index"
             :class="{ table_gray: !discolor && index % 2 === 0 }"
@@ -135,7 +135,7 @@ export default {
       // 表格配置
       sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
-      discolor: false, // 是否隔行变色
+      discolor: false, // false是隔行变色
       currentPage: 1,
       /* tableHeader: [
         "NO.",
@@ -324,7 +324,7 @@ export default {
   }
 }
 .table_gray {
-  background: #f5f5f5;
+   background-color: #00549F;
 }
 
 .tableBox table td {
@@ -385,7 +385,7 @@ export default {
 }
 .bodyContent td {
   background-color: #fff;
-  height: 17px;
+  height: 20px;
 }
 .operationStyle {
   color: #0000ff;

src/views/data/components/UploadLinkDetail.vue

@@ -6,43 +6,48 @@
     <div class="content">
       <div class="content_datail">
         <div class="detail">
-          <p style="width: 65px">资料名称：</p>
-          <p>{{ dataObj.name }}</p>
+          <p style="width: 80px">资料名称：</p>
+          <p>{{ detailData[nowIndex].name }}</p>
         </div>
         <div class="detail">
-          <p style="width: 65px">上传时间：</p>
-          <p>{{ dataObj.time2 }}</p>
+          <p style="width: 80px">上传时间：</p>
+          <p>{{ detailData[nowIndex].time }}</p>
         </div>
         <div class="multiDetail">
           <div class="time">
-            <span style="width: 65px">车系：</span>
-            <span>{{ dataObj.time1 }}</span>
+            <span style="width: 80px">车系：</span>
+            <span>{{ detailData[nowIndex].carSeries }}</span>
           </div>
           <div class="range">
-            <p style="width: 75px">车型：</p>
-            <p style="margin-right: 10px">雷克萨斯</p>
+            <p style="width: 80px">车型：</p>
+            <p style="margin-right: 10px">
+              {{ detailData[nowIndex].carSeries }}
+            </p>
           </div>
         </div>
         <div class="multiDetail">
           <div class="time">
-            <span style="width: 65px">素材时间：</span>
-            <span>{{ dataObj.time1 }}</span>
+            <span style="width: 80px">素材时间：</span>
+            <span>{{ detailData[nowIndex].carSeries }}</span>
           </div>
           <div class="range">
-            <p style="width: 75px">经销商范围：</p>
-            <p style="margin-right: 10px">{{ dataObj.range }}</p>
+            <p style="width: 80px">经销商范围：</p>
+            <p style="margin-right: 10px">
+              {{ detailData[nowIndex].carSeries }}
+            </p>
           </div>
         </div>
         <div class="detail">
-          <p style="width: 65px">资料描述：</p>
-          <p>{{ dataObj.desc }}</p>
+          <p style="width: 80px">资料描述：</p>
+          <p>{{ detailData[nowIndex].carSeries }}</p>
         </div>
         <div class="files">
-          <p style="width: 65px">附件：</p>
+          <p style="width: 80px">附件：</p>
           <div class="filesName">
             <p
-                v-for="(item, index) in dataObj.files" :key="index"
-                @click="downloadFile(index)"
+              v-for="(item, index) in dataObj.files"
+              :key="index"
+              @click="downloadFile(index)"
             >
               {{ item.name }}
             </p>
@@ -55,27 +60,23 @@
 
 <script>
 export default {
-  props: {},
-  components: {
+  props: {
+    detailData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    nowIndex: {
+      type: Number,
+      default: -1,
+    },
   },
+  components: {},
   mounted() {},
   data() {
     return {
-      dataObj: {
-        name: "雷克萨斯ES上市",
-        time1: "2021/04",
-        range: "共通",
-        time2: "2021/03/10 18:19",
-        sum: 200,
-        desc: "资料包内海报，主要针对此次新款车型上市卖点进行宣传。",
-        files: [
-          {
-            id: "111",
-            name: "宣传活动海报合集",
-          }
-        ],
-      },
-      
+      dataObj: {},
     };
   },
   computed: {
@@ -86,8 +87,8 @@ export default {
   },
   methods: {
     // 下载附件
-    downloadFile: function(i) {
-        console.log(i);
+    downloadFile: function (i) {
+      console.log(i);
     },
   },
 };
@@ -96,14 +97,15 @@ export default {
 <style scoped lang="less">
 .record_detail {
   .title {
-    border-top: 1px solid #ccc;
+    border: 1px solid #ccc;
+    border-bottom: 0px;
     .data_detail {
-      padding-left: 10px;
+      padding-left: 22px;
       font-size: 14px;
       font-weight: bolder;
-      height: 30.8px;
-      vertical-align: bottom;
-      display: table-cell;
+      height: 46.8px;
+      display: flex;
+      align-items: center;
     }
   }
   .content {
@@ -114,7 +116,7 @@ export default {
     .content_datail {
       width: 420px;
       height: 390px;
-      padding: 20px 30px 0;
+      padding: 20px 50px 0;
       .detail {
         width: 100%;
         min-height: 50px;