feat: 预付款选择审批人改版

app/controller/advance_controller.js

@@ -80,16 +80,17 @@ module.exports = app => {
             };
             // 获取所有项目参与者
             if ((ctx.advance.status === auditConst.status.uncheck || ctx.advance.status === auditConst.status.checkNo) && ctx.session.sessionUser.accountId === ctx.advance.uid) {
-                data.accountGroup = accountGroup;
+                // data.accountGroup = accountGroup;
                 // 获取所有项目参与者
                 const accountList = await ctx.service.projectAccount.getAllDataByCondition({
                     where: { project_id: ctx.session.sessionProject.id, enable: 1 },
                     columns: ['id', 'name', 'company', 'role', 'enable', 'is_admin', 'account_group'],
                 });
-                data.accountList = accountList;
-                // accountGroup.forEach
-                // console.log('accountGroup', accountGroup);
-                // console.log('accountList', accountList);
+                // data.accountList = accountList;
+                data.accountGroup = accountGroup.map((item, idx) => {
+                    const groupList = accountList.filter(item => item.account_group === idx);
+                    return { groupName: item, groupList };
+                });
             }
             // 获取审核人左边列表
             data.auditors = await ctx.service.advanceAudit.getAuditorsWithOwner(ctx.advance.id, ctx.advance.times);

app/public/css/main.css

@@ -104,23 +104,23 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
 /*滚动条*/
 /* 滚动条 */
 /*水平滚动条的样式*/
-/*::-webkit-scrollbar-thumb:horizontal { 
+/*::-webkit-scrollbar-thumb:horizontal {
 	width: 5px;
 	background-color: #e9ecef;
 	-webkit-border-radius: 0;
 }*/
 /*滚动条的背景颜色,滚动条的圆角宽度*/
 /*::-webkit-scrollbar-track-piece {
-	background-color: #efefef; 
-	-webkit-border-radius: 0; 
+	background-color: #efefef;
+	-webkit-border-radius: 0;
 }*/
 /*滚动条的宽度,滚动条的高度*/
 /*::-webkit-scrollbar {
-	width: 14px; 
-	height: 14px; 
+	width: 14px;
+	height: 14px;
 }*/
 /*垂直滚动条的样式*/
-/*::-webkit-scrollbar-thumb:vertical { 
+/*::-webkit-scrollbar-thumb:vertical {
 	height: 50px;
 	background-color: #e9ecef;
 	-webkit-border-radius: 0;
@@ -129,7 +129,7 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
 	border: 1px solid #ced4da;
 }*/
 /*滚动条的hover样式*/
-/*::-webkit-scrollbar-thumb:hover { 
+/*::-webkit-scrollbar-thumb:hover {
 	height: 50px;
 	background-color: #ced4da;
 	-webkit-border-radius: 0;
@@ -701,7 +701,7 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
   font-size: 14px
 }
 .bd-toc {
-  
+
     position: sticky;
     top:3rem;
     height: calc(100vh - 10rem);
@@ -856,7 +856,7 @@ body{
   line-height: 30px;
 }
 .panel-title > .title-main .btn.pull-right {
-    margin: 5px 0 0 0 
+    margin: 5px 0 0 0
 }
 .panel-content{
   padding-top:35px;
@@ -1079,7 +1079,7 @@ a.maintain-icon .fa{
     }
 }
 
-a.maintain-icon:hover .fa{ 
+a.maintain-icon:hover .fa{
     animation-iteration-count:0
 }
 /*审批列表*/
@@ -1118,4 +1118,22 @@ a.maintain-icon:hover .fa{
   position: relative;
   margin: 0 0 0 70px;
   word-break: break-word;
-}
+}
+
+.book-list{
+  padding: 0;
+  margin: 0;
+  height: 285px;
+  overflow-y: auto;
+}
+.book-list dt{
+  padding-left:5px;
+  background-color: #e2e6ea
+}
+.book-list dd{
+  padding-left:15px;
+  cursor: pointer;
+}
+.book-list dd:hover{
+  background-color: #f2f2f2
+}

app/public/js/advance_audit.js

@@ -26,20 +26,39 @@ $(document).ready(function () {
         }
     }
     // 审批人分组选择
-    $('#account_group').change(function () {
-        let account_html = '<option value="0">选择审批人</option>'
-        for (const account of accountList) {
-            if ((parseInt($(this).val()) === 0 || parseInt($(this).val()) === account.account_group) && account.id !== parseInt(userID)) {
-                const role = account.role !== '' ? '（' + account.role + '）' : ''
-                const company = account.company !== '' ? ' -' + account.company : ''
-                account_html += '<option value="' + account.id + '">' + account.name + role + company + '</option>'
-            }
+    // $('#account_group').change(function () {
+    //     let account_html = '<option value="0">选择审批人</option>'
+    //     for (const account of accountList) {
+    //         if ((parseInt($(this).val()) === 0 || parseInt($(this).val()) === account.account_group) && account.id !== parseInt(userID)) {
+    //             const role = account.role !== '' ? '（' + account.role + '）' : ''
+    //             const company = account.company !== '' ? ' -' + account.company : ''
+    //             account_html += '<option value="' + account.id + '">' + account.name + role + company + '</option>'
+    //         }
+    //     }
+    //     $('#account_list').html(account_html)
+    // });
+
+    // 添加审批流程按钮逻辑
+    $('.acc-btn').click(function () {
+        const idx = $(this).attr('data-groupid')
+        const type = $(this).attr('data-type')
+        if (type === 'hide') {
+            $(this).parent().parent().find(`div[data-toggleid="${idx}"]`).show(() => {
+                $(this).children().removeClass('fa-plus-square').addClass('fa-minus-square-o')
+                $(this).attr('data-type', 'show')
+
+            })
+        } else {
+            $(this).parent().parent().find(`div[data-toggleid="${idx}"]`).hide(() => {
+                $(this).children().removeClass('fa-minus-square-o').addClass('fa-plus-square')
+                $(this).attr('data-type', 'hide')
+            })
         }
-        $('#account_list').html(account_html)
-    });
+        return false
+    })
     // 添加到审批流程中
-    $('body').on('change', '#account_list', function () {
-        let id = $(this).val()
+    $('dl').on('click', 'dd', function () {
+        let id = $(this).data('id')
         id = parseInt(id)
         if (id !== 0) {
             postData(preUrl + '/audit/add', { auditorId: id }, (data) => {

app/view/advance/detail.ejs

@@ -123,7 +123,7 @@
                                     </div>
                                 </td>
                                 <td width="70%">
-                                    <!-- <div class="dropdown">
+                                    <div class="dropdown">
                                         <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button"
                                             id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                             aria-expanded="false">
@@ -134,66 +134,22 @@
                                             <div class="mb-2 p-2"><input class="form-control form-control-sm"
                                                     placeholder="姓名/手机 检索"></div>
                                             <dl class="list-unstyled book-list">
-                                                <dt><a href=""><i class="fa fa-minus-square-o"></i></a> 建设单位</dt>
-                                                <dd class="border-bottom p-2 mb-0">
-                                                    <p class="mb-0 d-flex"><span class="text-primary">李旭</span><span
-                                                            class="ml-auto">15800000003</span></p>
-                                                    <span class="text-muted">职称</span>
-                                                </dd>
-                                                <dd class="border-bottom p-2 mb-0">
-                                                    <p class="mb-0 d-flex"><span class="text-primary">李旭</span><span
-                                                            class="ml-auto">15800000003</span></p>
-                                                    <span class="text-muted">职称</span>
-                                                </dd>
-                                                <dd class="border-bottom p-2 mb-0">
-                                                    <p class="mb-0 d-flex"><span class="text-primary">李旭</span><span
-                                                            class="ml-auto">15800000003</span></p>
-                                                    <span class="text-muted">职称</span>
-                                                </dd>
-                                                <dd class="border-bottom p-2 mb-0">
-                                                    <p class="mb-0 d-flex"><span class="text-primary">李旭</span><span
-                                                            class="ml-auto">15800000003</span></p>
-                                                    <span class="text-muted">职称</span>
-                                                </dd>
-                                                <dt><a href=""><i class="fa fa-minus-square-o"></i></a> 监理单位</dt>
-                                                <dd class="border-bottom p-2 mb-0">
-                                                    <p class="mb-0 d-flex"><span class="text-primary">李旭</span><span
-                                                            class="ml-auto">15800000003</span></p>
-                                                    <span class="text-muted">职称</span>
-                                                </dd>
-                                                <dd class="border-bottom p-2 mb-0">
-                                                    <p class="mb-0 d-flex"><span class="text-primary">李旭</span><span
-                                                            class="ml-auto">15800000003</span></p>
-                                                    <span class="text-muted">职称</span>
-                                                </dd>
-                                                <dt><a href=""><i class="fa fa-plus-square"></i></a> 施工单位</dt>
-                                                <dt><a href=""><i class="fa fa-plus-square"></i></a> 设计单位</dt>
+                                                <% accountGroup.forEach((group, idx) => { %>
+                                                    <dt><a href="javascript: void(0);" class="acc-btn" data-groupid="<%- idx %>" data-type="hide"><i class="fa fa-plus-square"></i></a> <%- group.groupName %></dt>
+                                                    <div class="dd-content" data-toggleid="<%- idx %>">
+                                                        <% group.groupList.forEach(item => { %>
+                                                            <dd class="border-bottom p-2 mb-0 " data-id="<%- item.id %>" >
+                                                                <p class="mb-0 d-flex"><span class="text-primary"><%- item.name %></span><span
+                                                                        class="ml-auto"><%- item.mobile %></span></p>
+                                                                <span class="text-muted"><%- item.role %></span>
+                                                            </dd>
+                                                        <% });%>
+                                                    </div>
+                                                <% }) %>
                                             </dl>
                                         </div>
-                                    </div> -->
-                                    <div class="form-group">
-                                        <label>选择审批人</label>
-                                        <div class="input-group">
-                                            <div class="input-group-prepend">
-                                                <select class="form-control" id="account_group">
-                                                    <option value="0">所有分组</option>
-                                                    <% for (const dw in accountGroup) { %>
-                                                    <option value="<%= dw %>"><%= accountGroup[dw] %></option>
-                                                    <% } %>
-                                                </select>
-                                            </div>
-                                            <select class="form-control" id="account_list">
-                                                <option value="0">选择审批人</option>
-                                                <% for (const account of accountList) { %>
-                                                <% if (account.id !== ctx.session.sessionUser.accountId) { %>
-                                                <option value="<%= account.id %>">
-                                                    <%= account.name %><% if (account.role !== '') { %>（<%= account.role %>）<% } %><% if (account.company !== '') { %>
-                                                    -<%= account.company %><% } %></option>
-                                                <% } %>
-                                                <% } %>
-                                            </select>
-                                        </div>
                                     </div>
+
                                     <div class="card mt-3">
                                         <div class="card-header">
                                             审批流程
@@ -431,12 +387,14 @@
 </script>
 <% if(isEdited && ctx.session.sessionUser.accountId === ctx.advance.uid) { %>
 <script>
-    const accountGroup = JSON.parse('<%- JSON.stringify(accountGroup) %>');
-    const accountList = JSON.parse('<%- JSON.stringify(accountList) %>');
+
 </script>
 <% } %>
 <style>
     .fold-card {
         display: none;
     }
+    .dd-content {
+        display: none;
+    }
 </style>