feat: 确认审查结果-横向树状表格

src/views/processing/retention-file/index.vue

@@ -3,30 +3,54 @@
     <el-card>
       <div slot="header" class="clearfix">
         <span>企业留档文件(所属任务：广汽丰田体系审查)</span>
-        <el-button icon="el-icon-back" class="back-btn" type="text">
+        <el-button
+          icon="el-icon-back"
+          class="back-btn"
+          type="text"
+          @click="handleBack"
+        >
           返回
         </el-button>
-        <el-button class="back-btn" icon="el-icon-download">下载文件</el-button>
-        <el-button class="back-btn" icon="el-icon-refresh">重新生成</el-button>
+        <el-button class="back-btn" icon="el-icon-download" type="primary">
+          下载文件
+        </el-button>
+        <el-button class="back-btn" icon="el-icon-refresh" type="primary">
+          重新生成
+        </el-button>
       </div>
       <!-- table部分 -->
-      <el-table
-        v-if="spanMethod.length"
-        ref="table"
-        :data="testTableArr"
-        :span-method="arraySpanMethod"
-        class="ele-table table-info-area"
-        border
-        stripe
-      >
-        <el-table-column
-          v-for="(item, index) in tableTitleKey"
-          :key="index"
-          :prop="item"
-          :label="tableTitle[item].name + info[tableTitle[item].type]"
-          align="center"
-        ></el-table-column>
-      </el-table>
+      <table border="1">
+        <thead>
+          <tr>
+            <th class="one-column" rowspan="2">文件名称</th>
+            <th class="two-column">文件目录</th>
+            <th class="three-column">标准章节</th>
+            <th class="four-column">标准要求</th>
+            <th class="five-column">审查要点</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="one-column" rowspan="2">文件</td>
+            <td class="two-column">1.1-1.5</td>
+            <td class="three-column">5.1</td>
+            <td class="four-column">
+              车辆制造商应具备车辆全生命周期的汽车信息安全管理体系
+            </td>
+            <td class="five-column">车辆制造商是否建立汽车信息安全管理体系</td>
+          </tr>
+          <tr>
+            <td class="two-column">1.6</td>
+            <td class="three-column">5.1</td>
+            <td class="four-column">
+              车辆制造商应具备车辆全生命周期的汽车信息安全管理体系
+            </td>
+            <td class="five-column">
+              车辆制造商是否针对正式发布的汽车信息安全管理体系进行了试运行
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </el-card>
   </div>
 </template>
@@ -34,19 +58,11 @@
 <script>
 export default {
   data() {
-    return {
-      info: {
-        string: '',
-        avg: '(平均值)',
-        sum: '(总数)'
-      },
-      testTableArr: [], // table数据
-      spanKey: [], // 需要合并的列,每个元素为表格的prop值（键值）
-      tableTitle: {}, // table表头显示
-      tableTitleKey: [], // 所有的列的prop值（键值）
-      spanMethod: [], // 表格向下合并的方式
-      divArr: [], // 分片数据，用于将数据分片，保证不会
-      divIndex: [0] // 用于记录分片的位置
+    return {}
+  },
+  methods: {
+    handleBack() {
+      this.$router.go(-1)
     }
   }
 }
@@ -59,4 +75,31 @@ export default {
     float: right;
   }
 }
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th,
+td {
+  border: 1px solid black;
+  padding: 8px;
+  text-align: left;
+  width: 300px;
+}
+.five-column {
+  width: 350px;
+}
+.four-column {
+  width: 350px;
+}
+.three-column {
+  width: 300px;
+}
+.two-column {
+  width: 150px;
+}
+.one-column {
+  width: 200px;
+}
 </style>