V80204 - 呼叫 WebService WS_ALS02_WBS - WebService 匯入及呼叫 - 1>參考 2>Connected Services - getWS_xxxx_

 目的: V80204  - 呼叫 WebService  WS_ALS02_WBS  - 取得 WBS+機號的報工工時

處理說明:  1>呼叫 WebSerivce 函式 = class.function

                       找出 WebService的  class 及 function

                   2>匯入 WebService 網址 - 找出 WS 的 class 及 function
                        [方案總管] --> [參考] -->[加入服務參考]

                        執行後 , [方案總管] --> [Connected Services]  --> 會新增一class

                   3>web.config 將重覆的 WebService名稱 remak ,

                       否則會有錯誤訊息  

1>*.cs

3>呼叫 WebService 函式的方法:  myfunc.getWS_ALS_WBSHR(string par_WBS, string par_ASN)

        //取得 WBS + ACNO.報工工時        

        //傳入參數:  par_WBS, par_ACNO , 若機號空白,則傳回該WBS的所有機號.工作小時

        //傳回參數:  工作小時

        //                     --> WS_ALS02 原本以分鐘傳回, 以小時為計算單位必需 /60 , 取小數2位        

        public static dynamic getWS_ALS_WBSHR(string par_WBS, string par_ASN)

        {

            string Tmp_hour = "0";

            string Tmp_Str = "";

            string Tmp_Str1 = "", Tmp_Str2 = "";

            double Tmp_double1 = 0;

            if (par_WBS != "")

            {

                ws_als_wbshour.ws_als_wbshourSoapClient wbshour_cls = 

                                       new ws_als_wbshour.ws_als_wbshourSoapClient();

                try

                {

                    Tmp_Str = wbshour_cls.wbshour(par_WBS, par_ASN);

                    //將 [分鐘]字串轉成[小時]字串

                    Tmp_Str1 = Min2Hr(Tmp_Str1);

                    Tmp_hour = Tmp_Str1;

                }

                catch (Exception ex)

                { }  //throw ex;  可能回傳 null

                finally

                { };

            }

            return Tmp_hour;

        }

2>*.js

{

                        xtype: 'button',

                        id: 'btn1_Show',

                        flex: 2,

                        border: 1,

                        text: '報工工時顯示',

                        iconCls: 'icon-search',

                        handler: function () {

                            //s1_form 的所有欄位均加入 np  - type=2

                   var np = s_JSON('s1_form', 2); //TMFunction.js, 組合form上的查詢條件為json參數傳遞

                            np['s1_WBS'] = Ext.getCmp('s1_WBS').getValue();

                            np['s1_ACNO'] = Ext.getCmp('s1_ACNO').getValue();

                            //因為 LoadMask 無作用,所以改用 label 來顯示訊息

                            //Ext.getCmp("waitlbl").setVisible(true);

                            //Ext.getCmp("waitlbl").update;

                            //Ext.getCmp("waitlbl").show();                            

                            var Proc_Msg;

                            try {

                                Proc_Msg = new Ext.LoadMask(Ext.getCmp("s1_PROCMSG"),

                                    { msg: 'WBS報工工時顯示處理中, 請稍候...', }

                                );

                                Proc_Msg.show();//使用 mask 需手動呼叫show() 方法下

                                //getGridData_M --> 轉工只有曾在於工作中心就會列入  , 後來改為  [目前工作中心]=xxxx , 才顯示

                                //gridstore.getProxy().url = '../api/V80205API/getGridData_M';

                                //2022/06/15 ..過濾條件若[目前工作中心]有值,則過濾 [目前工作中心]=xxxx, 其他 工作中心資料不顯示

                                // url 改為 getGridData_M_sub_WC --> 同 [過濾目前工作中心]鈕,的處理方法 ,                                 

                                //gridstore.getProxy().url = '../api/V120102API/getGridData_M';

                                //gridstore.getProxy().extraParams = np;　//分頁OK,篩選條件OK

                                //console.log("1 reloadGridData - before");

                                //Ext.getCmp('grid_Single').reloadGridData();

                                //console.log("2 reloadGridData - after");

                                //取得  WBS+ACNO 的 WBS報工工時

                                Ext.Ajax.timeout = 600000; //如果有ajax timeout問題可以加上去       

                                Ext.Ajax.request({

                                    url: '../../api/V80204API/get_WBS_ALS_HR',  //myfunc.getWS_ALS_WBSHR

                                    method: 'POST',

                                    //async: false,

                                    async: true,

                                    timeout: 600000,

                                    //standardSubmit: true, // 非 Ajax 的方式  //若要傳送檔案至前端, standardSubmit必需設為 true 

                                    params: np,

                                    success: function (response, opts) {

                                        console.log('0 get_WBS_ALS_HR sucess!!');

                                        //console.log('0 opts:', opts);

                                        //console.log('0 response:', response);

                                        console.log("success response.responseText:", response.responseText);

                                        var obj = Ext.decode(response.responseText);

                                        var Tmp_WBSHR = "";

                                        //console.log("obj:", obj);

                                        if (obj["success"]) {

                                            Tmp_WBSHR = obj["WBSHR"];

                                            //mysuccessalert(Tmp_WBSHR);

                                            console.log("success=true , Tmp_WBSHR=", Tmp_WBSHR);

                                            Ext.getCmp("s1_WBS_HR").setValue(Tmp_WBSHR);

                                        }

                                        else {

                                            console.log(' 2 get_WBS_ALS_HR obj[sucess]  false !!');

                                            Tmp_Str = "[取得WBS報工工時]失敗 !! <br>"

                                                + obj["Rtn_Msg"];

                                            mysuccessalert(Tmp_Str);

                                        }

                                        Proc_Msg.hide();  //使用 mask 需手動呼叫hide() 方法下

                                        //Ext.getCmp("waitlbl").setVisible(false);                                        

                                    },

                                    failure: function (response, opts) {

                                        //console.log('uploadFileToDB failure !!');

                                        //console.log(" failure opts.response.responseText:", opts.response.responseText);

                                        console.log(' 3 get_WBS_ALS_HR failure !!');

                                        var obj = Ext.decode(response.responseText);

                                        console.log("obj:", obj);

                                        Tmp_Str = "[取得WBS報工工時]失敗!! <br>"

                                                         + obj["Rtn_Msg"];

                                        mywarnalert(Tmp_Str);

                                        //Ext.getCmp("waitlbl").setVisible(false);

                                        Proc_Msg.hide();  //使用 mask 需手動呼叫hide() 方法下

                                    } // end of failure 

                                });  // end of submit

                            }

                            finally {

                                //Proc_Msg.hide();  //使用 mask 需手動呼叫hide() 方法下

                            }

                        }

                    },  // end of 顯示資料

2>WebService 範例: WS_SAP12:  變更勾選工單之SAP工單狀態。

URL：http://194.1.5.106/sapws/ZRFC_ZCO02.asmx  Method: PROCESS_TRANS_WEB_CO02

4>WebService – [加入服務參考]時 – 會將WebService 網址記錄在 web.config
--> AMM_PLM04可能會重覆 , 以致出現錯誤訊息(xx找到多個該合約的端點組態xx)
-->將其中一個 AMM_PLM04 刪除即可

JS - 箭頭函式的用法 => , 即函式的簡約寫法

 目的: 了解 JS 箭頭函式的用法  =>

處理說明:  1>箭頭函式  =>  , 即  function 的簡要 statement

                   2>var func = function (x) { return x + 1 }

可簡約寫成 var func= (x)=>x+1

3>若用 {} , 則需自行 (return 傳回值)

var func1=function (x) { return x+1}

需簡約寫成 var func1=(x)=>{return x+1};

--> 若簡約寫成 var func1=(x)=>{x+1}; , 會無傳回值

JS Callback function - function 的執行順序

 目的 :  認識 callback function 的定義及用法

處理說明:  JavaScript 是一個「非同步」的語言，

當我們執行程式時， for 迴圈並不會等待處理作業(statement)結束後才繼續，

而是在執行階段就一口氣將statement執行完。

一. callback function 的定義:  call function , 只有滿足某個條件(event 發生時)才會被執行

    Callback function 跟一般的函式沒什麼不同， 差別在於被呼叫執行的時機

     Office.addEventListener( '電話響', function(){ /* 接電話 */ }, false);

Callback function就是「把函式當作另一個函式的參數，透過另一個函式來呼叫它」

Ex1>   window.setTimeout( function(){ ... }, 1000);

Ex2>

  var handler = function() { /* 接電話 */ }; 

  Office.addEventListener( '電話響', handler, false);

Ex3:

var funcA = function(){

  console.log('function A');

};

var funcB = function(){

  console.log('function B');

};

funcA();
funcB();

         -->  先印  function A  , 再印 function B

Ex4:

         var funcA=function {
                   window.setTimeout(function(){  console.log('function A'); }, 

                    Math.random()*1000);
         }

         var funcB=function {
                   window.setTimeout(function(){console.log('function B'); }, 
                    Math.random()*1000);
         }

         funcA();

         funcB();

        --> 不確定 function A / function B 先印

Ex5: 確保 function A 先印, 再印 function B

         var funcA=function(par_callback) {
                   window.setTimeout(function(){

                    console.log('function A'); 

                    if (typeof par_callback="function"){

                        par_callback();  

                    }

                    }, 

                    Math.random()*1000);

         };

         var funcB=function(){

               window.setTimeout(function(){

                    console.log('function B'); 

                    }, 

                    Math.random()*1000);

         };

       funcA(funcB);

  

       --> 無論 funcA 在執行的時候要等多久， 

     funcB 都會等到 console.log('function A'); 之後才執行。

Ex6 : 在五秒鐘之內，每秒鐘依序透過 console.log 印出： 0 1 2 3 4

          for (var i=0;i<5;i++){

               window.setTimeout(function(){   console.log(i);  }

                    ,1000*i);

           };

           //執行結果 : 5 5 5 5 5  

--> JavaScript 是一個「非同步」的語言,執行程式時， 

   for迴圈並不會等待處理作業(statement , window.setTimeout )結束後才繼續，

      而是在執行階段就一口氣將statement執行完。              

--> 切分變數(i)有效範圍的最小單位是 "function"

--> 因為函式未宣告變數 i , 所以每次執行 console.log(i); 的 i 變數是去函式「外層」取得
      因 function() 內未宣告 var i, 所以會在函式外層取得 (此時for迴圈已跑完 i=5) , 所以印出 5

      for(var i =0; i<5;i++)   --> 宣告 i 為全域變數

二.IIFE(Immediately Invoked Function Expression, IIFE)

    一般宣告方式:  doit(x);

    IIFE宣告方式:  函式宣告當下即呼叫 , 傳入參數 i , 即傳入當時的 i 值(0,1,2,3,4,5)

           (function doit(x){ console.log(x);} ) (i)

--> for (var i=0;i<5;i++) 

          (function doit(x){ console.log(x);} ) (i);

JS function - var 變數宣告, 及scope變數的範圍 - 全域變數/區域變數

function 的宣告 , 如下兩種均可

       1>function doSomeThing(y){}

       2>var doSomeThing = function (y)  {}

Ex1> function 宣告, [函式宣告]方式定義的函式可以在宣告前使用：

square(2); // 4 

function square(number) { 

     return number * number; 

}

Ex2: function 宣告,  [變數定義的函式] 不可以在宣告前使用：

square(2); // TypeError: square is not a function 

var square = function (number) { 

      return number * number; 

};

Ex1: 函式內的變數宣告
var x = 1; 

var doSomeThing = function(y) { 

      var x = 100; 

      return x + y; }; 

console.log( doSomeThing(50) ); //   150

console.log( x ); // 1 

-->  同 function doSomeThing(y)  { var x=100; return x+y;}  
-->

因為切分變數有效範圍的最小單位是 "function"，所以
在函式區塊內透過 var 定義的 x 實際上只屬於這個函式。
換句話說，外面的 x 跟 function 內的 x 其實是兩個不同的變數。

-->

自己的 function 內如果找不到，就會一層層往外找，直到全域變數為止：

function 可以讀取外層已經宣告的變數，
但外層拿不到裡面宣告的變數。

Ex2: 函式的變數宣告

var x = 1; 

var doSomeThing = function(y) { 

       x = 100; 

       return x + y; }; 

console.log( doSomeThing(50) ); // 150

console.log( x ); // 100

Ex3: 函式的變數宣告

var x = 1; 

var doSomeThing = function(y) { 

console.log(x); // 會出現什麼？ 

var x = 100; 

return x + y; }; 

console.log( doSomeThing(50) ); // 150 

console.log( x ); // undefined

--> 

要是不小心在 var 宣告前就使用了這個變數，這時候 JavaScript
就會開始尋找變數 x 了，在自己的 scope 找... 啊，找到了！
雖然是在下面，但可以確認的是自己的 scope 裡面有宣告，

於是就 很貼心地 「只會把宣告的語法」拉到這個 scope 的「最上面」...

-->如上寫法同下:

var doSomeThing = function(y) { 

var x; 

console.log(x); // undefined 

x = 100; return x + y; 

};

--> 

變數都盡量在 scope 的最上面先宣告完成後再使用。

二.全域變數/區域變數

1>全域變數

 JavaScript 這門語言中，沒有所謂「全域變數」這種東西。
更準確地說，

我們所說的「全域變數」其實指的是「全域物件」(或者叫「頂層物件」) 的屬性。

以瀏覽器來說，「全域物件」指的就是 window，在 node 環境中則叫做 global。

Ex:

var a = 10; 

console.log( window.a ); // 10

• 變數有效範圍 (scope) 的最小切分單位是 function (ES6 的 let 與 const 例外)
  即使是寫在函式內，沒有 var 的變數會變成「全域變數」
  全域變數指的是全域物件 (頂層物件) 的「屬性」
  
  

敘述句 (Statement)：敘述句就是執行某個動作  , 

                                   Ex: var foo;

運算式 (Expression): 運算式最大的特性，就是它會產生一個「值」。 

                                            Ex: var a = 10 * 10;

在運算式中，會透過提供一些數值給「運算子」(Operator) 進行運算，進而得到一個運算的結果。

建構子 function() { this.modelType=0; this.getModelType=function{return this.modeltype;}

/*
 * 建構子會如此做動：
 *
 * function MyConstructor(){
 *   // 實際的函式主體碼在這裡
 *   // 在|this| 上創建屬性
 *   // 希望通過分配給他們，如：
 *   this.fum = "nom";
 *   // et cetera...
 *
 *   // 如果函式有返回狀態它將返回一個物件
 *   // 那個物件將是新表達式的結果。
 *   // 換句話來說，表達式的結果是現在綁定 |this| 的物件
 *   // (例如，最常見的常見情況).
 * }function C(){

 this.a = 37;
}

var o = new C(); 

console.log(o.a); // logs 37 

//static var
var buttonModel = function () {
    this.modelType = 0; //預設檢視模式
    this.getModelType = function () {
        return this.modelType;
    }
}