审批流程显示

anquan-detail2.html

@@ -119,148 +119,30 @@
                     <tr>
                       <td>
                         <div class="row">
-                          <div class="col-3">
+                          <div class="col-4">
                             <table class="table table-bordered">
-                              <tr><td class="text-center">检查人</td><td><i class="fas fa fa-play-circle fa-rotate-90"></i> 布尔 <small class="text-muted">职称</small></td></tr>
-                              <tr><td rowspan="2" class="text-center">审批</td><td><i class="fas fa-chevron-circle-down"></i> 张三  <small class="text-muted">职称</small></td></tr>
-                              <tr><td><i class="fas fa-chevron-circle-down"></i> 李四  <small class="text-muted">职称</small></td></tr>
-                              <tr><td class="text-center">整改</td><td><i class="fas fa-chevron-circle-down"></i> 由 李四 指派</td></tr>
-                              <tr><td class="text-center">复查</td><td><i class="fas fa fa-stop-circle"></i> 李四 <small class="text-muted">职称</small></td></tr>
+                              <tr><td class="text-center">检查人</td><td><i class="fas fa fa-play-circle fa-rotate-90"></i> 布尔 <small class="text-muted">职称</small></td><td><span class="text-success">完成</span></td></tr>
+                              <tr><td rowspan="2" class="text-center">审批</td><td><i class="fas fa-chevron-circle-down"></i> 张三  <small class="text-muted">职称</small></td><td><span class="text-success">完成</span></td></tr>
+                              <tr><td><i class="fas fa-chevron-circle-down"></i> 李四  <small class="text-muted">职称</small></td><td><span class="text-warning">进行中</span></td></tr>
+                              <tr><td class="text-center">整改</td><td><i class="fas fa-chevron-circle-down"></i> 由 李四 指派</td><td></td></tr>
+                              <tr><td class="text-center">复查</td><td><i class="fas fa fa-stop-circle"></i> 李四 <small class="text-muted">职称</small></td><td></td></tr>
                             </table>
                           </div>
-                          <div class="col-9">
-                            <!--审批流程审批中-->
+                          <div class="col-8">
+                            <!--审批日志-->
                             <ul class="timeline-list list-unstyled mt-2">
-                              <li class="timeline-list-item pb-2">
-                                  <div class="timeline-item-date">2020<span>06-01</span><span>13:22:01</span></div>
-                                  <div class="timeline-item-tail"></div>
-                                  <div class="timeline-item-icon bg-success text-light">
-                                    <i class="fas fa-caret-down"></i>
-                                  </div>
-                                  <div class="timeline-item-content">
-                                    <div class="card">
-                                      <div class="card-body p-3">
-                                        <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">布尔</span><span class="ml-auto text-success">上报审批</span></p>
-                                          <p class="text-muted mb-0">职称</p>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                              </li>
-                              <li class="timeline-list-item pb-2">
-                                  <div class="timeline-item-date"><!-- 2020<span>06-01</span><span>13:20:01</span --></div>
-                                  <div class="timeline-item-tail"></div>
-                                  <div class="timeline-item-icon bg-warning text-light">
-                                    <i class="far fa-ellipsis-h"></i>
-                                  </div>
-                                  <div class="timeline-item-content">
-                                    <div class="card">
-                                      <div class="card-body p-3">
-                                        <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">张三</span><span class="ml-auto text-warning">审批中</span></p>
-                                          <p class="text-muted mb-0">职称</p>
-                                        </div>
-                                      </div>
-                                      <!--审批意见-->
-                                      <!-- <div class="card-body p-3 border-top">
-                                        <div class="">
-                                          这是审批意见文本，内容不算很长。
-                                        </div>
-                                      </div> -->
-                                    </div>
-                                  </div>
-                              </li>
-                              <li class="timeline-list-item pb-2">
-                                  <div class="timeline-item-date"></div>
-                                  <div class="timeline-item-tail"></div>
-                                  <div class="timeline-item-icon bg-secondary text-light">
-                                  </div>
-                                  <div class="timeline-item-content">
-                                    <div id="" class="card">
-                                      <div class="card-body p-3">
-                                        <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">李四</span><span class="ml-auto text-warning"> </span></p>
-                                          <p class="text-muted mb-0">职称</p>
-                                        </div>
-                                      </div>
-                                      <!--审批意见-->
-                                      <!-- <div class="card-body p-3 border-top">
-                                        <div class="">
-                                          这是审批意见文本，内容不算很长。
-                                        </div>
-                                      </div> -->
-                                    </div>
-                                  </div>
-                              </li>
-                              <li class="timeline-list-item pb-2">
-                                  <div class="timeline-item-date"></div>
-                                  <div class="timeline-item-tail"></div>
-                                  <div class="timeline-item-icon bg-secondary text-light">
-                                  </div>
-                                  <div class="timeline-item-content">
-                                    <div id="" class="card">
-                                      <div class="card-body p-3">
-                                        <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">王五</span><span class="ml-auto text-warning"> </span></p>
-                                          <p class="text-muted mb-0">职称</p>
-                                        </div>
-                                      </div>
-                                      <!--审批意见-->
-                                      <!-- <div class="card-body p-3 border-top">
-                                        <div class="">
-                                          这是审批意见文本，内容不算很长。
-                                        </div>
-                                      </div> -->
-                                    </div>
-                                  </div>
-                              </li>
-                              <li class="timeline-list-item pb-2">
-                                  <!-- <div class="timeline-item-tail"></div> -->
-                                  <div class="timeline-item-icon bg-secondary text-light">
-                                  </div>
-                                  <div class="timeline-item-content">
-                                    <div id="" class="card">
-                                      <div class="card-body p-3">
-                                        <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">李四</span><span class="ml-auto text-warning"></span></p>
-                                          <p class="text-muted mb-0">职称</p>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                              </li>
-                            </ul>
-                            <!--审批流程复查中-->
-                            <ul class="timeline-list list-unstyled mt-2">
-                              <li class="timeline-list-item pb-2">
-                                  <div class="timeline-item-date">2020<span>06-01</span><span>13:22:01</span></div>
-                                  <div class="timeline-item-tail"></div>
-                                  <div class="timeline-item-icon bg-success text-light">
-                                    <i class="fas fa-caret-down"></i>
-                                  </div>
-                                  <div class="timeline-item-content">
-                                    <div class="card">
-                                      <div class="card-body p-3">
-                                        <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">布尔</span><span class="ml-auto text-success">上报审批</span></p>
-                                          <p class="text-muted mb-0">职称</p>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                              </li>
+                              <!--关闭-->
                               <li class="timeline-list-item pb-2">
                                   <div class="timeline-item-date">2020<span>06-01</span><span>13:20:01</span></div>
                                   <div class="timeline-item-tail"></div>
-                                  <div class="timeline-item-icon bg-success text-light">
-                                    <i class="far fa-check"></i>
+                                  <div class="timeline-item-icon bg-danger text-light">
+                                    <i class="fas fa-minus"></i>
                                   </div>
                                   <div class="timeline-item-content">
                                     <div class="card">
                                       <div class="card-body p-3">
                                         <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">张三</span><span class="ml-auto text-success">审批通过</span></p>
+                                          <p class="mb-1 d-flex"><span class="h5">张三</span><span class="ml-auto text-danger">关闭</span></p>
                                           <p class="text-muted mb-0">职称</p>
                                         </div>
                                       </div>
@@ -273,17 +155,18 @@
                                     </div>
                                   </div>
                               </li>
+                              <!--退回-->
                               <li class="timeline-list-item pb-2">
                                   <div class="timeline-item-date">2020<span>06-01</span><span>13:20:01</span></div>
                                   <div class="timeline-item-tail"></div>
-                                  <div class="timeline-item-icon bg-success text-light">
-                                    <i class="far fa-check"></i>
+                                  <div class="timeline-item-icon bg-warning text-light">
+                                    <i class="fas fa-reply"></i>
                                   </div>
                                   <div class="timeline-item-content">
-                                    <div id="" class="card">
+                                    <div class="card">
                                       <div class="card-body p-3">
                                         <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">李四</span><span class="ml-auto text-success">审批通过</span></p>
+                                          <p class="mb-1 d-flex"><span class="h5">李四</span><span class="ml-auto text-warning">退回 张三</span></p>
                                           <p class="text-muted mb-0">职称</p>
                                         </div>
                                       </div>
@@ -303,10 +186,10 @@
                                     <i class="far fa-check"></i>
                                   </div>
                                   <div class="timeline-item-content">
-                                    <div id="" class="card">
+                                    <div class="card">
                                       <div class="card-body p-3">
                                         <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">王五</span><span class="ml-auto text-success">整改完成</span></p>
+                                          <p class="mb-1 d-flex"><span class="h5">张三</span><span class="ml-auto text-success">审批通过</span></p>
                                           <p class="text-muted mb-0">职称</p>
                                         </div>
                                       </div>
@@ -320,16 +203,16 @@
                                   </div>
                               </li>
                               <li class="timeline-list-item pb-2">
-                                  <div class="timeline-item-date"><!-- 2020<span>06-01</span><span>13:20:01</span> --></div>
+                                  <div class="timeline-item-date">2020<span>06-01</span><span>13:22:01</span></div>
                                   <!-- <div class="timeline-item-tail"></div> -->
-                                  <div class="timeline-item-icon bg-warning text-light">
-                                    <i class="far fa-ellipsis-h"></i>
+                                  <div class="timeline-item-icon bg-success text-light">
+                                    <i class="fas fa-caret-up"></i>
                                   </div>
                                   <div class="timeline-item-content">
-                                    <div id="" class="card">
+                                    <div class="card">
                                       <div class="card-body p-3">
                                         <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">李四</span><span class="ml-auto text-warning">复查中</span></p>
+                                          <p class="mb-1 d-flex"><span class="h5">布尔</span><span class="ml-auto text-success">上报审批</span></p>
                                           <p class="text-muted mb-0">职称</p>
                                         </div>
                                       </div>

anquan-detail3.html

@@ -130,34 +130,19 @@
                     <tr>
                       <td>
                         <div class="row">
-                          <div class="col-3">
+                          <div class="col-4">
                             <table class="table table-bordered">
-                              <tr><td class="text-center">检查人</td><td><i class="fas fa fa-play-circle fa-rotate-90"></i> 布尔 <small class="text-muted">职称</small></td></tr>
-                              <tr><td rowspan="2" class="text-center">审批</td><td><i class="fas fa-chevron-circle-down"></i> 张三  <small class="text-muted">职称</small></td></tr>
-                              <tr><td><i class="fas fa-chevron-circle-down"></i> 李四  <small class="text-muted">职称</small></td></tr>
-                              <tr><td class="text-center">整改</td><td><i class="fas fa-chevron-circle-down"></i> 由 李四 指派</td></tr>
-                              <tr><td class="text-center">复查</td><td><i class="fas fa fa-stop-circle"></i> 李四 <small class="text-muted">职称</small></td></tr>
+                              <tr><td class="text-center">检查人</td><td><i class="fas fa fa-play-circle fa-rotate-90"></i> 布尔 <small class="text-muted">职称</small></td><td><span class="text-success">完成</span></td></tr>
+                              <tr><td rowspan="2" class="text-center">审批</td><td><i class="fas fa-chevron-circle-down"></i> 张三  <small class="text-muted">职称</small></td><td><span class="text-success">完成</span></td></tr>
+                              <tr><td><i class="fas fa-chevron-circle-down"></i> 李四  <small class="text-muted">职称</small></td><td><span class="text-success">完成</span></td></tr>
+                              <tr><td class="text-center">整改</td><td><i class="fas fa-chevron-circle-down"></i> 王五</td><td><span class="text-warning">整改中</span></td></tr>
+                              <tr><td class="text-center">复查</td><td><i class="fas fa fa-stop-circle"></i> 李四 <small class="text-muted">职称</small></td><td></td></tr>
                             </table>
                           </div>
-                          <div class="col-9">
+                          <div class="col-8">
+                            <!--审批日志-->
                             <ul class="timeline-list list-unstyled mt-2">
-                              <li class="timeline-list-item pb-2">
-                                  <div class="timeline-item-date">2020<span>06-01</span><span>13:22:01</span></div>
-                                  <div class="timeline-item-tail"></div>
-                                  <div class="timeline-item-icon bg-success text-light">
-                                    <i class="fas fa-caret-down"></i>
-                                  </div>
-                                  <div class="timeline-item-content">
-                                    <div class="card">
-                                      <div class="card-body p-3">
-                                        <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">布尔</span><span class="ml-auto text-success">上报审批</span></p>
-                                          <p class="text-muted mb-0">职称</p>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                              </li>
+                              <!--整改中-->
                               <li class="timeline-list-item pb-2">
                                   <div class="timeline-item-date">2020<span>06-01</span><span>13:20:01</span></div>
                                   <div class="timeline-item-tail"></div>
@@ -168,16 +153,15 @@
                                     <div class="card">
                                       <div class="card-body p-3">
                                         <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">张三</span><span class="ml-auto text-success">审批通过</span></p>
-                                          <p class="text-muted mb-0">职称</p>
+                                          <p class="mb-1 d-flex"><span class="h5">李四 指派 王五 整改</span>
                                         </div>
                                       </div>
                                       <!--审批意见-->
-                                      <div class="card-body p-3 border-top">
+                                      <!-- <div class="card-body p-3 border-top">
                                         <div class="">
                                           这是审批意见文本，内容不算很长。
                                         </div>
-                                      </div>
+                                      </div> -->
                                     </div>
                                   </div>
                               </li>
@@ -188,7 +172,7 @@
                                     <i class="far fa-check"></i>
                                   </div>
                                   <div class="timeline-item-content">
-                                    <div class="card">
+                                    <div id="" class="card">
                                       <div class="card-body p-3">
                                         <div class="card-text">
                                           <p class="mb-1 d-flex"><span class="h5">李四</span><span class="ml-auto text-success">审批通过</span></p>
@@ -196,46 +180,48 @@
                                         </div>
                                       </div>
                                       <!--审批意见-->
-                                      <div class="card-body p-3 border-top">
+                                      <!-- <div class="card-body p-3 border-top">
                                         <div class="">
                                           这是审批意见文本，内容不算很长。
                                         </div>
-                                      </div>
+                                      </div> -->
                                     </div>
                                   </div>
                               </li>
                               <li class="timeline-list-item pb-2">
-                                  <div class="timeline-item-date"></div>
+                                  <div class="timeline-item-date">2020<span>06-01</span><span>13:20:01</span></div>
                                   <div class="timeline-item-tail"></div>
-                                  <div class="timeline-item-icon bg-warning text-light">
-                                    <i class="far fa-ellipsis-h"></i>
+                                  <div class="timeline-item-icon bg-success text-light">
+                                    <i class="far fa-check"></i>
                                   </div>
                                   <div class="timeline-item-content">
-                                    <div id="" class="card">
+                                    <div class="card">
                                       <div class="card-body p-3">
                                         <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">王五</span><span class="ml-auto text-warning">整改中</span></p>
+                                          <p class="mb-1 d-flex"><span class="h5">张三</span><span class="ml-auto text-success">审批通过</span></p>
                                           <p class="text-muted mb-0">职称</p>
                                         </div>
                                       </div>
                                       <!--审批意见-->
-                                      <!-- <div class="card-body p-3 border-top">
+                                      <div class="card-body p-3 border-top">
                                         <div class="">
                                           这是审批意见文本，内容不算很长。
                                         </div>
-                                      </div> -->
+                                      </div>
                                     </div>
                                   </div>
                               </li>
                               <li class="timeline-list-item pb-2">
+                                  <div class="timeline-item-date">2020<span>06-01</span><span>13:22:01</span></div>
                                   <!-- <div class="timeline-item-tail"></div> -->
-                                  <div class="timeline-item-icon bg-secondary text-light">
+                                  <div class="timeline-item-icon bg-success text-light">
+                                    <i class="fas fa-caret-up"></i>
                                   </div>
                                   <div class="timeline-item-content">
-                                    <div id="" class="card">
+                                    <div class="card">
                                       <div class="card-body p-3">
                                         <div class="card-text">
-                                          <p class="mb-1 d-flex"><span class="h5">李四</span><span class="ml-auto text-warning"></span></p>
+                                          <p class="mb-1 d-flex"><span class="h5">布尔</span><span class="ml-auto text-success">上报审批</span></p>
                                           <p class="text-muted mb-0">职称</p>
                                         </div>
                                       </div>