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: '(总数)'
+    return {}
   },
-      testTableArr: [], // table数据
-      spanKey: [], // 需要合并的列,每个元素为表格的prop值（键值）
-      tableTitle: {}, // table表头显示
-      tableTitleKey: [], // 所有的列的prop值（键值）
-      spanMethod: [], // 表格向下合并的方式
-      divArr: [], // 分片数据，用于将数据分片，保证不会
-      divIndex: [0] // 用于记录分片的位置
+  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>

src/views/task/confirm-result/index.vue

@@ -6,10 +6,10 @@
         <!--1-抬头标题-->
         <div class="title-style">
           <div class="title-content-style">
-            查看审查问卷(所属任务: 广汽丰田体系审查)
+            确认审查结果(所属任务: 广汽丰田体系审查)
           </div>
           <div class="title-content-style">
-            <a href="/task/on">返回</a>
+            <el-button type="text" @click="goToProcessedReview">返回</el-button>
           </div>
         </div>
         <!--2-统计值-->
@@ -106,44 +106,55 @@
               <span class="title-i"></span>
               <span class="title-content">审查问卷概要</span>
             </div>
-            <table border="1">
+            <table border="1" style="width: 100%">
               <thead>
                 <tr>
-                  <th>章节</th>
-                  <th>文本</th>
-                  <th>关键点</th>
-                  <th>审查详细信息</th>
+                  <th>标准章节</th>
+                  <th>标准要求</th>
+                  <th>审查要点</th>
+                  <th>审查细则</th>
+                  <th>符合场景</th>
+                  <th>审查结果</th>
+                  <th>填写人</th>
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="(item, index) in list" :key="index">
-                  <td :rowspan="getRowspan(item.keyPointList)">
+                <!-- 循环遍历 arr -->
+                <template v-for="(item, index) in questionnaireSummary">
+                  <tr :key="index">
+                    <td align="center" :rowspan="getRows2(item)">
                       {{ item.chapter }}
                     </td>
-                  <td :rowspan="getRowspan(item.keyPointList)">
+                    <td align="center" :rowspan="getRows2(item)">
                       {{ item.text }}
                     </td>
-                  <template v-if="item.keyPointList.length > 0">
-                    <tr
-                      v-for="(keyPoint, keyPointIndex) in item.keyPointList"
-                      :key="keyPointIndex"
+                  </tr>
+                  <!-- 循环遍历 keyPointList -->
+                  <template v-for="(i, index) in item.keyPointList">
+                    <tr :key="index">
+                      <td align="center" :rowspan="getRows(i)">{{ i.text }}</td>
+                    </tr>
+                    <!-- 循环遍历 reviewDetailsList -->
+                    <template v-for="(v, index) in i.reviewDetailsList">
+                      <tr :key="index">
+                        <td
+                          align="center"
+                          :rowspan="v.reviewSceneList.length + 1"
                         >
-                      <td :rowspan="getRowspan(keyPoint.reviewDetailsList)">
-                        {{ keyPoint.text }}
+                          {{ v.text }}
                         </td>
-                      <template v-if="keyPoint.reviewDetailsList.length > 0">
-                        <tr
-                          v-for="(
-                            reviewDetails, reviewDetailsIndex
-                          ) in keyPoint.reviewDetailsList"
-                          :key="reviewDetailsIndex"
-                        >
-                          <td>{{ reviewDetails.text }}</td>
                       </tr>
-                      </template>
+                      <!-- 循环遍历 reviewSceneList -->
+                      <template v-for="(s, index) in v.reviewSceneList">
+                        <tr :key="index">
+                          <td align="center">{{ s.text }}</td>
+                          <td align="center">{{ s.result }}</td>
+                          <td align="center">{{ s.people }}</td>
                         </tr>
                       </template>
-                </tr>
+                    </template>
+                  </template>
+                </template>
               </tbody>
             </table>
           </div>
@@ -191,6 +202,148 @@
 export default {
   data() {
     return {
+      questionnaireSummary: [
+        {
+          id: 1734848009319092224,
+          chapter: '5.1',
+          text: '标准要求-车辆制造商应具备车辆全生命周期的汽车信息安全管理体系。注：车辆全生命周期包括车辆的开发阶段、生产阶段及后生产阶段。',
+          keyPointList: [
+            {
+              id: 1734848009323286528,
+              text: '审查要点-车辆制造商是否建立汽车信息安全管理制度。',
+              reviewStandardId: 1734848009319092224,
+              reviewDetailsList: [
+                {
+                  id: 1734848009323286529,
+                  text: '审查细则-车辆制造商是否能够提供/展示汽车信息安全管理制度正式发布的证明材料。',
+                  reviewKeypointId: 1734848009323286528,
+                  reviewSceneList: [
+                    {
+                      id: 1734848009323286530,
+                      text: '符合场景-1.管理制度发布会红头文件',
+                      result: '合格',
+                      people: '小明',
+                      reviewDetailsId: 1734848009323286529
+                    },
+                    {
+                      id: 1734848010472525824,
+                      text: '2.管理制度正式发布会议纪要',
+                      result: '不合格',
+                      people: '小三',
+                      reviewDetailsId: 1734848009323286529
+                    },
+                    {
+                      id: 1734848010719989760,
+                      text: '3.专用系统正式发布流程或记录',
+                      result: '合格',
+                      people: '小明',
+                      reviewDetailsId: 1734848009323286529
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: 1734848011609182208,
+          chapter: '5.2',
+          text: '汽车信息安全管理体系应包括以下内容。建立企业内部管理汽车信息安全的过程。',
+          keyPointList: [
+            {
+              id: 1734848011609182209,
+              text: '车辆制造商汽车信息安全管理制度是否建立并明确汽车信息安全管理制度的组织架构及权责。',
+              reviewStandardId: 1734848011609182208,
+              reviewDetailsList: [
+                {
+                  id: 1734848011609182210,
+                  text: '车辆制造商汽车信息安全管理制度的角色应覆盖车辆/车辆产品在生命周期中的信息安全活动。',
+                  reviewKeypointId: 1734848011609182209,
+                  reviewSceneList: [
+                    {
+                      id: 1734848011609182211,
+                      text: '1.汽车信息安全管理制度或其配套的流程文件中包含流程图，定义了信息安全活动及对应的角色，并有角色的权责定义。',
+                      reviewDetailsId: 1734848011609182210,
+                      result: '合格',
+                      people: '小明'
+                    }
+                  ]
+                },
+                {
+                  id: 1734848012057972736,
+                  text: '车辆制造商汽车信息安全管理制度的角色应与车辆制造商的组织架构匹配。',
+                  reviewKeypointId: 1734848011609182209,
+                  reviewSceneList: [
+                    {
+                      id: 1734848012057972737,
+                      text: '1.汽车信息安全管理制度中定义的角色与车辆制造商的组织架构岗位名称一致。',
+                      reviewDetailsId: 1734848012057972736,
+                      result: '合格',
+                      people: '小明'
+                    },
+                    {
+                      id: 1734848012225744896,
+                      text: '2.汽车信息安全管理制度中定义的角色与车辆制造商的组织架构岗位有映射关系。',
+                      reviewDetailsId: 1734848012057972736,
+                      result: '不合格',
+                      people: '小明'
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              id: 1734848012976525312,
+              text: '车辆制造商汽车信息安全管理制度是否明确为保障汽车信息安全需求实现和维持所投入的资源。',
+              reviewStandardId: 1734848011609182208,
+              reviewDetailsList: [
+                {
+                  id: 1734848012976525313,
+                  text: '车辆制造商应提供在信息安全方面提供资源支持的证明材料，包括投入的场地、基础软硬件设备、技术人员和资金等。',
+                  reviewKeypointId: 1734848012976525312,
+                  reviewSceneList: [
+                    {
+                      id: 1734848012976525314,
+                      text: '1.典型的资源要求为人力投入，例如负责网络安全风险管理的人员、研发人员和事件管理响应人员。',
+                      reviewDetailsId: 1734848012976525313,
+                      result: '合格',
+                      people: '小明'
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              id: 1734848013714722816,
+              text: '车辆制造商汽车信息安全管理制度是否明确与其它管理流程（如QMS、ISMS）的适配性。',
+              reviewStandardId: 1734848011609182208,
+              reviewDetailsList: [
+                {
+                  id: 1734848013714722817,
+                  text: '车辆制造商应提供信息安全管理制度在建设实施中与企业其他管理流程相适配的证明材料。',
+                  reviewKeypointId: 1734848013714722816,
+                  reviewSceneList: [
+                    {
+                      id: 1734848013714722818,
+                      text: '1.明确信息安全管理要求融合到现有管理制度流程中，如在现有ISMS制度中增加汽车信息安全管理要求。',
+                      reviewDetailsId: 1734848013714722817,
+                      result: '合格',
+                      people: '小明'
+                    },
+                    {
+                      id: 1734848013899272192,
+                      text: '2.在信息安全管理制度中明确与其它管理流程的接口。',
+                      reviewDetailsId: 1734848013714722817,
+                      result: '不合格',
+                      people: '小明'
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ],
       dataList: [
         {
           id: 1734848009319092224,
@@ -466,6 +619,29 @@ export default {
     /* 返回跳转*/
     goToProcessedReview() {
       this.$router.push('/task/on')
+    },
+    getRows(i) {
+      let n = 0
+      if (i.reviewDetailsList) {
+        n = i.reviewDetailsList.length
+      }
+      i.reviewDetailsList.map(s => {
+        n = n * s.reviewSceneList.length
+      })
+      return n + 2
+    },
+    getRows2(item) {
+      let n = 0
+      if (item.keyPointList) {
+        n = item.keyPointList.length
+      }
+      item.keyPointList.map(i => {
+        i.reviewDetailsList.map(s => {
+          n *= s.reviewSceneList.length
+        })
+        n *= i.reviewDetailsList.length
+      })
+      return n + 3
     }
   }
 }
@@ -633,4 +809,23 @@ export default {
     }
   }
 }
+
+table {
+  margin-top: 20px;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+thead {
+  background-color: #e7e6e6;
+}
+
+th,
+td {
+  border: 1px solid black;
+  padding: 8px;
+  text-align: left;
+  width: 300px;
+  height: 100%;
+}
 </style>