清单模板编辑器增加排序功能

web/maintain/bill_template_lib/html/main.html

@@ -21,9 +21,9 @@
                         <table class="table table-hover table-bordered">
                             <thead>
                                 <tr>
-                                    <th>清单模板名称</th>
+                                    <th>清单模板名称 <i class="fa fa-sort sort-table" data-status="asc" data-sort="name" aria-hidden="true"></i></th>
                                     <th width="160">编办</th>
-                                    <th width="160">添加时间</th>
+                                    <th width="160">添加时间 <i class="fa fa-sort sort-table" data-status="asc" data-sort="time" aria-hidden="true"></i></th>
                                     <th width="70">操作</th>
                                     <th width="60">复制</th>
                                 </tr>
@@ -35,8 +35,8 @@
                                 <td><%= lib.compilationName%></td>
                                 <td><%= moment(lib.createDate).format('YYYY-MM-DD')%></td>
                                 <td>
-                                    <a class="lock-btn-control disabled" href="javacript:void(0);" onclick='getTemplateLib("<%= lib.ID%>")' title="编辑"><i class="fa fa-pencil-square-o"></i></a>
-                                    <a class="text-danger lock-btn-control disabled" href="javacript:void(0);" onclick='showDeleteModal("<%= lib.ID%>")' title="删除"><i class="fa fa-remove"></i></a>
+                                    <a class="lock-btn-control disabled" href="javascript:void(0);" onclick='getTemplateLib("<%= lib.ID%>")' title="编辑"><i class="fa fa-pencil-square-o"></i></a>
+                                    <a class="text-danger lock-btn-control disabled" href="javascript:void(0);" onclick='showDeleteModal("<%= lib.ID%>")' title="删除"><i class="fa fa-remove"></i></a>
                                     <a class="lock" data-locked="true" href="javascript:void(0);" title="解锁"><i class="fa fa-unlock-alt"></i></a>
                                 </td>
                                 <td>
@@ -159,8 +159,12 @@
         </div>
     </div>
 </div>
-
+<script>
+    const templateLibs =  JSON.parse(unescape('<%- escape(JSON.stringify(templateLibs)) %>'));
+</script>
 <script src="/public/web/PerfectLoad.js"></script>
 <script src="/public/web/lock_util.js"></script>
 <script src="/web/maintain/bills_lib/scripts/bills_lib_ajax.js"></script>
-<script type="text/javascript" src="/web/maintain/bill_template_lib/js/bills_template.js"></script>
+<script src="/lib/moment/moment.min.js"></script>
+<script src="/lib/lodash/lodash.js"></script>
+<script type="text/javascript" src="/web/maintain/bill_template_lib/js/bills_template.js"></script>

web/maintain/bill_template_lib/js/bills_template.js

@@ -54,7 +54,7 @@ $(document).ready(function() {
     });
 
     // 锁定、解锁
-    $('.lock').click(function () {
+    $('body').on('click', '.lock', function () {
         lockUtil.handleLockClick($(this));
     });
 
@@ -74,6 +74,39 @@ $(document).ready(function() {
             $.bootstrapLoading.end();
         });
     });
+
+    // 排序更改
+    $('.sort-table').on('click', function () {
+        const sortBy = $(this).data('sort');
+        const sortAsc = $(this).attr('data-status');
+        $(this).removeClass('fa-sort fa-sort-amount-asc fa-sort-amount-desc').addClass('fa-sort-amount-' + sortAsc);
+        $(this).attr('data-status', sortAsc === 'asc' ? 'desc' : 'asc');
+        let sortList = templateLibs;
+        if (sortBy === 'time') {
+            $('i[data-sort="name"]').removeClass('fa-sort fa-sort-amount-asc fa-sort-amount-desc').addClass('fa-sort');
+            sortList = _.orderBy(templateLibs, ['createDate'], [sortAsc]);
+        } else {
+            $('i[data-sort="time"]').removeClass('fa-sort fa-sort-amount-asc fa-sort-amount-desc').addClass('fa-sort');
+            sortList = _.orderBy(templateLibs, ['name'], [sortAsc]);
+        }
+        let html = '';
+        for (const lib of sortList) {
+            html += '<tr class="libTr">\n' +
+                '                                <td id="' + lib.ID + '"><a href="/billsTemplate/editTemplate/' + lib.ID + '?locked=true">' + lib.name + '</a></td>\n' +
+                '                                <td>' + lib.compilationName + '</td>\n' +
+                '                                <td>' + moment(lib.createDate).format('YYYY-MM-DD') + '</td>\n' +
+                '                                <td>\n' +
+                '                                    <a class="lock-btn-control disabled" href="javascript:void(0);" onclick="getTemplateLib(\'' + lib.ID + '\')" title="编辑"><i class="fa fa-pencil-square-o"></i></a>\n' +
+                '                                    <a class="text-danger lock-btn-control disabled" href="javascript:void(0);" onclick="showDeleteModal(\'' + lib.ID + '\')" title="删除"><i class="fa fa-remove"></i></a>\n' +
+                '                                    <a class="lock" data-locked="true" href="javascript:void(0);" title="解锁"><i class="fa fa-unlock-alt"></i></a>\n' +
+                '                                </td>\n' +
+                '                                <td>\n' +
+                '                                    <a class="btn btn-secondary btn-sm copy-data lock-btn-control disabled" href="javascript:void(0);" onclick="showCopyModal(\'' + lib.ID + '\')" title="复制数据"><i class="fa fa-clone"></i>复制</a>\n' +
+                '                                </td>\n' +
+                '                            </tr>'
+        }
+        $('#showArea').html(html);
+    });
 });
 
 function getTemplateLib (ID) {
@@ -93,4 +126,4 @@ function showDeleteModal(ID){
 function showCopyModal(ID) {
     $('#libID').val(ID);
     $('#copy').modal('show');
-}
+}