滚动高度限制及增加序号展示

app/public/js/category.js

@@ -54,15 +54,18 @@ function getCategoryHtml(category) {
     return html.join('');
 }
 // 获取分类值html
-function getValueHtml(value) {
+function getValueHtml(value, index = null) {
     const html = [];
+    let i = index ? index : 1;
     for (const v of value) {
         html.push('<tr name="value" vid="' + v.id + '">');
+        html.push('<td width="35" class="text-center">'+ i +'</td>');
         html.push('<td><a href="javascript:void(0);" class="up-btn mr-2" title="上移"><i class="fa fa-caret-up"></i></a><a href="javascript:void(0);" class="down-btn" title="下移"><i class="fa fa-caret-down "></i></a></td>');
         html.push('<td><input class="form-control form-control-sm" name="value" placeholder="请输入值" value="' + v.value + '" vid ="' + v.id +  '"></td>');
         html.push('<td>', v.relaTenders.length + v.newTenders.length ,'</td>');
         html.push('<td><a href="javascript: void(0);" class="text-danger" name="del-value" vid="' + v.id + '">删除</a></td>');
         html.push('</tr>');
+        i++;
     }
     return html.join('');
 }
@@ -169,7 +172,7 @@ function bindCategoryControl() {
         $('#add-ok').attr('cid', id);
         if (editCate) {
             const list = $('#value-list');
-            list.html(getValueHtml(editCate.value) + '<tr id="add-value-row"><td colspan="3"><a href="javascript: void(0);">添加新值</a></td></tr>');
+            list.html(getValueHtml(editCate.value) + '<tr id="add-value-row"><td colspan="4"><a href="javascript: void(0);">添加新值</a></td></tr>');
             $('#add-value-row').click(function () {
                 const newID = editCate.value.length > 0 ? _.maxBy(editCate.value, function (v) { return v.id; }).id + 1 : 1;
                 const newValue = {
@@ -180,7 +183,7 @@ function bindCategoryControl() {
                     newTenders: editCate.value.length > 0 ? [] : tenders.concat([]),
                 };
                 editCate.value.push(newValue);
-                $(this).before(getValueHtml([newValue]));
+                $(this).before(getValueHtml([newValue], $('#value-list tr').length));
                 bindCategoryValueControl();
                 makeIconColor();
             });
@@ -309,7 +312,9 @@ $(document).ready(() => {
     $('body').on('click', '.up-btn', function () {
         const prev = $(this).parents("tr").prev();
         const prevIndex = parseInt($(prev).index('#value-list tr'));
+        prev.children('td').eq(0).text(prevIndex + 2);
         $(this).parents("tr").insertBefore(prev);
+        $(this).parents("tr").children('td').eq(0).text(prevIndex + 1);
         makeIconColor();
         // if(prevIndex === 1){
         //     console.log('hello');
@@ -322,6 +327,8 @@ $(document).ready(() => {
         const nowlength = $('#value-list tr').length - 1;
         if (nextIndex < nowlength) {
             $(this).parents("tr").insertAfter(next);
+            next.children('td').eq(0).text(nextIndex);
+            $(this).parents("tr").children('td').eq(0).text(nextIndex + 1);
         }
         makeIconColor();
     });

app/view/setting/category_modal.ejs

@@ -55,10 +55,10 @@
             <div class="modal-header">
                 <h5 class="modal-title">添加值</h5>
             </div>
-            <div class="modal-body">
+            <div class="modal-body" style="max-height: 500px;overflow: auto">
                 <table class="table table-bordered">
                     <thead>
-                    <tr><th width="40">排序</th><th>值</th><th>包含标段</th><th>删除</th></tr>
+                    <tr><th width="35" class="text-center">序号</th><th width="40">排序</th><th>值</th><th>包含标段</th><th>删除</th></tr>
                     </thead>
                     <tbody id="value-list">
                     </tbody>