自定义对话框。

public/scHintBox.html

@@ -7,22 +7,21 @@
         3、有三个按钮的多分支选择询问框。
         4、输入文本值对话框。
 ----------------------------------------------------------------------------------------------------------------------->
-
-<div class="modal fade" id="hintBox" data-backdrop="static">
+<div class="modal fade" id="hintBox_form" data-backdrop="static">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
-
             <div class="modal-header">
-                <h5 class="modal-title" id="hintBox_title">标题</h5>
+                <h5 id="hintBox_title" class="modal-title">标题</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
 
             <div class="modal-body">
-                <div id = "hintBox_info" style="margin:5px 10px 10px 10px;">提示明细</div>
+                <div id = "hintBox_caption" style="margin:5px 10px 10px 10px;">提示明细</div>
                 <div style="margin:5px 10px 5px 10px;">
-                    <input type="text" class="form-control" value="" id="hintBox_value"/>
+                    <input id="hintBox_value" type="text" class="form-control" value="" />
+                    <p id="hintBox_error" style="margin-top:7px; color:red; display:none;">“xxx”已存在!</p>
                 </div>
             </div>
 
@@ -36,36 +35,68 @@
 </div>
 
 <script>
-    G_HINTBOX_VALUE = null;
-    hintBoxButtonType = {yes: 1, yesNo: 2, yesNoCancel: 3};
-    function speFont(str){
-        return `<span style='color:red;font-weight:bold;font-size:15px'> ${str} </span>`;
+    const hintBox = {
+        value: null,
+        btnType: {yes: 1, yesNo: 2, yesNoCancel: 3},
+        init: function (){
+            // 事件类
+            $("#hintBox_value").unbind();
+            $("#hintBox_btn_yes").unbind();
+            $('#hintBox_btn_no').unbind();
+            $('#hintBox_btn_cancel').unbind();
+            $("#hintBox_value").keypress(
+                function (event) {
+                    hintBox.value = $('#hintBox_value').val();
+                    if (event.keyCode === 13) {
+                        $('#hintBox_btn_yes').click();
+                        return false;
+                    }
+                }
+            );
+            $('#hintBox_btn_cancel').click(
+                function () {
+                    $.bootstrapLoading.end();
+                    return;
+                }
+            );
+
+            // 显示类
+            $('#hintBox_caption').hide();
+            $('#hintBox_value').hide();
+            $('#hintBox_error').hide();
+            $('#hintBox_btn_yes').hide();
+            $('#hintBox_btn_no').hide();
+            $('#hintBox_btn_cancel').hide();
+        },
+        font: function(str){
+            return `<span style='color:red;font-weight:bold;font-size:15px'> ${str} </span>`;
+        }
     };
 
-    function hintBox(title, caption, btnType, doYes, doNo) {
+    function hintBoxInfo(title, caption, btnType, doYes, doNo) {
+        hintBox.init();
         $('#hintBox_title').text(title);
-        $('#hintBox_info').html(caption);
-
-        $('#hintBox_value').hide();
-        $('#hintBox_info').show();
-        $('#hintBox_btn_yes').show();
-        $('#hintBox_btn_yes').text('是');
-        $("#hintBox_btn_yes").unbind();
-        $('#hintBox_btn_no').show();
-        $('#hintBox_btn_no').text('否');
-        $('#hintBox_btn_no').unbind();
-        $('#hintBox_btn_cancel').show();
-        $('#hintBox_btn_cancel').text('取消');
-        $('#hintBox_btn_cancel').unbind();
+        $('#hintBox_caption').html(caption);
+        $('#hintBox_caption').show();
 
         switch (btnType) {
-            case hintBoxButtonType.yes:
+            case hintBox.btnType.yes:
                 $('#hintBox_btn_yes').text('确定');
-                $('#hintBox_btn_no').hide();
-                $('#hintBox_btn_cancel').hide();
+                $('#hintBox_btn_yes').show();
+                break;
+            case hintBox.btnType.yesNo:
+                $('#hintBox_btn_yes').text('是');
+                $('#hintBox_btn_no').text('否');
+                $('#hintBox_btn_yes').show();
+                $('#hintBox_btn_no').show();
                 break;
-            case hintBoxButtonType.yesNo:
-                $('#hintBox_btn_cancel').hide();
+            case hintBox.btnType.yesNoCancel:
+                $('#hintBox_btn_yes').text('是');
+                $('#hintBox_btn_no').text('否');
+                $('#hintBox_btn_cancel').text('取消');
+                $('#hintBox_btn_yes').show();
+                $('#hintBox_btn_no').show();
+                $('#hintBox_btn_cancel').show();
                 break;
         }
 
@@ -77,37 +108,36 @@
             $('#hintBox_btn_no').click(doNo);
         }
 
-        $('#hintBox_btn_cancel').click(
-            function () {return;}
-        );
-
-        $("#hintBox").modal({show:true});
+        $("#hintBox_form").modal('show');
     };
 
-    function hintBoxValue(title, value, doYes) {
+    function hintBoxValue(title, value, doOK) {
+        hintBox.init();
         $('#hintBox_title').text(title);
-
-        $('#hintBox_info').hide();
-        G_HINTBOX_VALUE = value;
-
+        hintBox.value = value;
         $('#hintBox_value').show();
         $('#hintBox_value').val(value);
-        $("#hintBox_value").unbind();
-        $("#hintBox_value").change(
-            function () {
-                G_HINTBOX_VALUE = $('#hintBox_value').val();
-            }
-        );
+        $("#hintBox_value").focus();
+        $("#hintBox_value").select();
 
-        $('#hintBox_btn_yes').show();
         $('#hintBox_btn_yes').text('确定');
-        $('#hintBox_btn_yes').unbind();
-        $('#hintBox_btn_yes').click(doYes);   // doYes不能给参数
+        $('#hintBox_btn_yes').show();
+        $('#hintBox_btn_yes').click(doOK);   // doOK不能给参数
 
-        $('#hintBox_btn_no').hide();
-        $('#hintBox_btn_cancel').hide();
+        $("#hintBox_form").modal('show');
+    };
 
-        $("#hintBox").modal({show:true});
+    // 注意：该方法只能用在hintBoxValue()的doOK回调函数中。
+    function hintBoxError (error) {
+        $('#hintBox_error').text(error);
+        $('#hintBox_error').show(200);
+        $("#hintBox_value").focus();
+        $("#hintBox_value").select();
     };
+
+    $('#hintBox_form').on('hide.bs.modal', function() {
+        $.bootstrapLoading.end();
+        return;
+    });
 </script>
 

web/building_saas/main/html/calc_program_manage.html

@@ -28,8 +28,8 @@
 
     <script>
         !function loadHintBox(){
-            $("body").append('<div id = "div_hintBox"></div>');
-            $("#div_hintBox").load("../../../../public/scHintBox.html");
+            $("body").append('<div id = "hintBox_container"></div>');
+            $("#hintBox_container").load("../../../../public/scHintBox.html");
         }();
     </script>
 </body>

web/building_saas/main/js/models/calc_program.js

@@ -944,11 +944,12 @@ let analyzer = {
     },
     fieldNameIsUsed: function(template, fieldName){
         let fieldNameEn = projectObj.project.calcProgram.compiledFeeTypeMaps[fieldName];
-        for (let item of template.calcItems){
-              if (item.fieldName == fieldNameEn){
-                  return true;
-              }
-        };
+        for (var i = 0; i < template.calcItems.length; i++) {
+            if (template.calcItems[i].fieldName == fieldNameEn){
+                template.fieldNameTempUsed = i;
+                return true;
+            }
+        }
         return false;
     }
 };

web/building_saas/main/js/views/calc_program_manage.js

@@ -115,20 +115,23 @@ let calcProgramManage = {
                 return;
             }
 
-            if (analyzer.fieldNameIsUsed(me.getSelectionInfo().template, args.newValue)){
+            let template = me.getSelectionInfo().template;
+            if (analyzer.fieldNameIsUsed(template, args.newValue)){
                 let sheet = me.detailSpread.getActiveSheet();
                 sheet.suspendEvent();
                 sheet.setValue(args.row, args.col, args.oldValue);
                 sheet.resumeEvent();
                 $.bootstrapLoading.end();
-                alert(`“${args.newValue}” 已被其它行使用，不允许重复选择！`);
+                let s = hintBox.font(template.fieldNameTempUsed + 1);
+                hintBoxInfo('系统提示', `“${args.newValue}” 已被第 ${s} 行使用，不允许重复选择！`, 1);
+                delete template.fieldNameTempUsed;
                 return;
             }
 
             curCalcItem.fieldName = projectObj.project.calcProgram.compiledFeeTypeMaps[args.newValue];
         }
         else if (dataCode == 'dispExprUser'){  // 除非直接改单元格，弹窗不会走这里
-            alert('用户修改dispExprUser值，触发onDetailEditEnded事件。');
+            hintBoxInfo('系统提示', '用户直接在sheet中修改了dispExprUser值，触发onDetailEditEnded事件。', 1);
         };
 
         curCalcItem[dataCode] = args.newValue;
@@ -210,36 +213,39 @@ let calcProgramManage = {
                         let template = calcProgramManage.getSelectionInfo().template;
                         let idx = calcProgramManage.mainSpread.getActiveSheet().getActiveRowIndex();
 
-                        let newName = prompt("请输入新的模板名称：", template.name);
-                        if (!newName || (newName && newName == template.name)) {
-                            $.bootstrapLoading.end();
-                            return;
-                        };
+                        let newName = '';
+                        hintBoxValue('请输入新的模板名称：', template.name, function () {
+                            newName = hintBox.value;
 
-                        while (analyzer.templateNameIsExist(newName)){
-                            alert(`“${newName}”已存在，请重新输入！`);
-                            newName = prompt("请输入新的模板名称：", template.name);
-                        };
+                            if (!newName){
+                                hintBoxError(`名称不能为空！`);
+                                return false;
+                            };
 
-                        if (!newName || (newName && newName == template.name)) {
-                            $.bootstrapLoading.end();
-                            return;
-                        };
+                            if (newName == template.name) {
+                                $.bootstrapLoading.end();
+                                return;
+                            }
 
-                        template.name = newName;
+                            if (analyzer.templateNameIsExist(newName)){
+                                hintBoxError(`“${newName}” 已存在，请重新输入！`);
+                                return false;
+                            };
 
-                        let data = {
-                            'projectID': projectObj.project.ID(),
-                            'ID': template.ID,
-                            'name': template.name
-                        };
-                        calcProgramManage.updateTemplate(data, function (rst) {
-                            if (rst){
-                                projectObj.project.calcProgram.compileTemplateMaps();
-                                sheetCommonObj.showData(calcProgramManage.mainSpread.getSheet(0), calcProgramManage.mainSetting, calcProgramManage.datas);
-                            }
+                            template.name = newName;
+                            let data = {
+                                'projectID': projectObj.project.ID(),
+                                'ID': template.ID,
+                                'name': template.name
+                            };
+                            calcProgramManage.updateTemplate(data, function (rst) {
+                                if (rst){
+                                    projectObj.project.calcProgram.compileTemplateMaps();
+                                    sheetCommonObj.showData(calcProgramManage.mainSpread.getSheet(0), calcProgramManage.mainSetting, calcProgramManage.datas);
+                                    $.bootstrapLoading.end();
+                                }
+                            });
                         });
-                        $.bootstrapLoading.end();
                     }
                 },
                 "spr1": '--------',
@@ -256,7 +262,7 @@ let calcProgramManage = {
                         let template = calcProgramManage.getSelectionInfo().template;
                         if (analyzer.templateIsUsed(template.ID)) {
                             $.bootstrapLoading.end();
-                            alert(`计算模板“${template.name}”已被使用，不允许删除！`);
+                            hintBoxInfo('系统提示', `计算模板“${template.name}”已被使用，不允许删除！`, 1);
                             return;
                         }
                         let data = {
@@ -322,13 +328,6 @@ let calcProgramManage = {
                     name: '删除行',
                     icon: 'fa-remove',
                     callback: function () {
-                        // function cbYes() {alert('你点击了yes按键');};
-                        // function cbNo() {alert('你点击了no按键');}
-                        // function cbOK() {alert(`你输入的值为：${G_HINTBOX_VALUE}`);};
-                        //
-                        // // hintBox('操作确认', '确定要删除当前节点吗？', 2, cbYes, cbNo);
-                        // hintBoxValue('请输入新名称：', '我的模板1', cbOK);
-                        // return;
                         $.bootstrapLoading.start();
                         let template = calcProgramManage.getSelectionInfo().template;
                         let idx = calcProgramManage.detailSpread.getActiveSheet().getActiveRowIndex();
@@ -336,13 +335,14 @@ let calcProgramManage = {
 
                         if (item.fieldName == 'common'){
                             $.bootstrapLoading.end();
-                            alert(`费用类别为“工程造价”的行不允许删除！`);
+                            hintBoxInfo('系统提示', `费用类别为“工程造价”的行不允许删除！`, 1);
                             return;
                         };
 
                         if (analyzer.calcItemIsUsed(template, item)){
                             $.bootstrapLoading.end();
-                            alert(`第 ${idx + 1} 行“${item.name}”已被第 ${item.tempUsed + 1} 行引用，不允许删除！`);
+                            let s = hintBox.font(item.tempUsed + 1);
+                            hintBoxInfo('系统提示', `第 ${idx + 1} 行“${item.name}”已被第 ${s} 行引用，不允许删除！`, 1);
                             delete item.tempUsed;
                             return;
                         };