2022年12月6日 星期二

V80201 - WebService 定義呼叫 操作說明 & 顯示傳回資料說明 - 若資料空白,則顯示"無符合的資料!!" - 錯誤訊息: 找到多個合約端點組態

 目的: V80201 - WebService 呼叫 & 顯示傳回資料說明  - AMM_PDM04

處理說明: 呼叫 WebService的步驟
                  1>將 WebService 的網址加入 專案  
                       - 方案總管 --> 參考  --> 加入服務參考
                       Ex: http://enovia/AMM/Service.asmx Method: AMM_PDM04
                  2>完成後, 
                       - 方案總管 --> Connect Service  --> 多一 AMM_PDM04
                  3>web.config 移除重複 endpoint 
                       - web.config  --> 移除重複 endpoint of AMM_PDM04
                  4>呼叫 AMM_PDM04 函式  
                       AMM_PDM04.ServiceSoapClient PDM04 = new AMM_PDM04.ServiceSoapClient();
                       DataSet ds = PDM04.AMM_PDM04("10-43-0301-001", "","AJT", "A", "0011", 
                                                                                     "",  "C", "2000/01/01","2022/12/05","", 
                                                                                     "");
                   5>若無符合條件的資料,則顯示訊息
                         if (gridstore.data.getCount() == 0) {
                                    mywarnalert("無符合條件的資料!!");
                                }

                   6>WebService 傳回 ds.tables , 修改成 T1 & T1C


1>Visual Studio 2019 IDE 操作畫面

1.    方案總管 à 參考 à 按右鍵 à 加入服務參考

Ex:  http://enovia/AMM/Service.asmx

    Method: AMM_PDM04



 

 

 

 

 

 

 

 

 

2.於加入服務參考視窗設置參數如下圖

    Ex:    AMM_PDM01



3.確定後可至方案總管 à Connected Service查看


  

4.web.config à 將重複的endpoint 移除

  --> 否則執行時,會出現 以致出現錯誤訊息(xx找到多個該合約的端點組態xx)

  --> 將其中一個 AMM_PLM04 刪除即可

   <endpoint address="http://enovia/AMM/Service.asmx" binding="customBinding"

        bindingConfiguration="ServiceSoap122" contract="AMM_PDM01.ServiceSoap"

        name="ServiceSoap12" />





   

4.呼叫webservice所提供之function



 

程式範例

ZRFC_ZM66.ZRFC_ZM66SoapClient sap = new ZRFC_ZM66.ZRFC_ZM66SoapClient();

DataSet ds = sap.CALL_Z_RFC_ZM66("1", MATNR, null, null, null, null, null, null, null, null, null, null, null, null, null);

DataTable dt = ds.Tables[0];

 

 

Sample2:  *.cs





using TLSWEB_AMM.AMM_PDM04;

AMM_PDM04.ServiceSoapClient PDM04 = new AMM_PDM04.ServiceSoapClient();

            DataSet ds = PDM04.AMM_PDM04("10-43-0301-001", "","AJT", "A", "0011",

                     "",  "C", "2000/01/01","2022/12/05","",

                                         "");

             //將 WebService 取得的 ds , 改成 TMGrid的格式 T1 & T1C

            DataTable dt = ds.Tables[0];
            dt.TableName = "T1";
            DataTable dt1 = ds.Tables.Add("T1C");
            dt1.Columns.Add("TOTAL", typeof(Int32));
            DataRow dr = ds.Tables["T1C"].NewRow();
            dr["TOTAL"] = dt.Rows.Count;
            ds.Tables["T1C"].Rows.Add(dr);
            return ds;




實例: Web改版:  V80201 - 呼叫WebService AMM_PDM04






4>
{
                        xtype: 'button',
                        id: 'btn_Show',
                        flex: 2,
                        border: 1,
                        text: '資料顯示',
                        iconCls: 'icon-search',
                        handler: function () {
                            //檢核 [專案配置][生產工廠]不可均空白
                            var Tmp_PDM_CONFIG = Ext.getCmp('s_PDM_CONFIG').getValue();
                            var Tmp_FACWC = Ext.getCmp('s_FACWC').getValue();
                            var Tmp_Str = "";
                            if ((checkisnull(Tmp_PDM_CONFIG)) && (checkisnull(Tmp_FACWC))) {
                                Tmp_Str = "[專案配置][生產工廠]不可均空白, 敬請檢核";
                                mywarnalert(Tmp_Str);
                                return;
                            }
                         var np = s_JSON('s_form'); //TMFunction.js, 組合form上的查詢條件為json參數傳遞                            
                            np["s_STAT"] = Ext.getCmp('s_STAT').getValue();
                            console.log(" np[s_STAT]  : ", np["s_STAT"]);
                            gridstore.getProxy().url = '../api/V80201API/getWebService_M';
                            gridstore.getProxy().extraParams = np; //分頁OK,篩選條件OK                                                        
                            gridstore.on("load", function () {
                                console.log("gridstore.onload !!");
                                if (gridstore.data.getCount() == 0) {
                                    mywarnalert("無符合條件的資料!!");
                                }
                            });
                            gridstore.load();
                        }    //end of  顯示資料.handler                       
                    },  // end of 顯示資料

2022年12月4日 星期日

V80201 – 自訂挑選欄位值 – RunTime新增欄位值

目的: V80201 – 生工OSM查詢 自訂挑選欄位值 – RunTime新增欄位值

 處理說明: 1> DataSet ds = setupPickDs(n, Tmp_Sql, new string[] { "KEYCODE" });
                        var Tmp_STAT ,Tmp_DESCPT = "";
                        DataRow dr = ds.Tables["T1"].NewRow();
                        dr["STAT"] = "A";
                       dr["DESCPT"] = "未審核";
                       ds.Tables["T1"].Rows.Add(dr);
           


1>*.cs
//過濾欄位 [編審狀態(STAT)]挑選

        [HttpPost]
        public dynamic get_s_STATPick(string STAT = "", int isComplete = 0)
        {
            string Tmp_Sql = " SELECT  DISTINCT KEY_CODE AS STAT ,DESCPT  "
                                       + "  FROM   KEYCODE "
                                       + "  WHERE  1=2 "
                                       + "    AND      KEY_CODE IS NOT NULL "
                                       + " ORDER  BY  KEY_CODE ";
            string n = funId + "s_STAT";
            DataSet ds = setupPickDs(n, Tmp_Sql, new string[] { "KEYCODE" });
            var Tmp_STAT = "";
            var Tmp_DESCPT = "";
            DataRow dr = ds.Tables["T1"].NewRow();
            dr["STAT"] = "A";
            dr["DESCPT"] = "未審核";
            ds.Tables["T1"].Rows.Add(dr);
            dr = ds.Tables["T1"].NewRow();
            dr["STAT"] = "B";
            dr["DESCPT"] = "審核中";
            ds.Tables["T1"].Rows.Add(dr);
            dr = ds.Tables["T1"].NewRow();
            dr["STAT"] = "C";
            dr["DESCPT"] = "已審核";
            ds.Tables["T1"].Rows.Add(dr);
            if (STAT != null && !STAT.Equals(""))
            {
                if (isComplete == 1)
                {
                    ds = getPickDsbyCondi(n, "STAT='" + STAT + "'");
                }
                else
                {
                    ds = getPickDsbyCondi(n, "STAT  LIKE '%" + STAT + "%'");
                }
            }
            return ds;
        }  // end of  get_s_STATPick



2022年11月30日 星期三

V20301 –Master結構圖

 目的: V20301 –Master結構圖說明

處理說明: 1> V20301 –Master結構圖說明








V80209 – MD畫面 – 顯示 Detail 資料 - grid.on("selectionchange",function(){}.. ) - Grid 選擇資料改變

 目的: V80209 – MD畫面 – 顯示 Detail 資料

處理說明:1> Ext.getCmp('grid_M').on("selectionchange", function (view, selections, options) {
                      1>>取得目前畫面的過濾條件
                          var np = s_JSON('s_form'); //TMFunction.js, 組合form上的查詢條件為json參數傳遞 
                      2>>取得目前 Master PK欄位值
                             var cur_recs = Ext.getCmp('grid_M').selModel.getSelection();
                              var cur_rec = cur_recs[0];
                              np["RVNO"] = cur_rec.data["RVNO"];
                       3>設定 Detail .store.proxy
                           gridstore.getProxy().url = '../api/V80209API/getGridData_D';
                           gridstore.getProxy().extraParams = np; //分頁OK,篩選條件OK
                       Ext.getCmp('grid_D').reloadGridData(false);  //若Detail資料空白時,不顯示無資料訊息



1>*.js
Ext.getCmp('grid_M').on("selectionchange", function (view, selections, options) {
        var np = s_JSON('s_form'); //TMFunction.js, 組合form上的查詢條件為json參數傳遞
        //console.log("Ext.getCmp('s_STAT') : ", Ext.getCmp('s_STAT'));
        var gridstore = Ext.getCmp('grid_D').store;        
        var cur_recs = Ext.getCmp('grid_M').selModel.getSelection();
        if (cur_recs.length == 0) {
            //Tmp_Str = "請先選擇要查詢的資料<br>";
            //mywarnalert(Tmp_Str);
            return;
        }
        var cur_rec = cur_recs[0];
        np["RVNO"] = cur_rec.data["RVNO"];
        np["s_VRCODE"] = Ext.getCmp('s_VRCODE').getValue();        
        np["s_UPDREC"] = Ext.getCmp('s_UPDREC').getValue();        
        np["s_UPDDT1"] = Ext.getCmp('s_UPDDT1').getValue();        
        np["s_UPDDT2"] = Ext.getCmp('s_UPDDT2').getValue();        
        console.log(" np[s_VRCODE]  : ", np["s_VRCODE"]);
        console.log(" np[s_UPDDT1]  : ", np["s_UPDDT1"]);
        console.log(" np[s_UPDDT2]  : ", np["s_UPDDT2"]);
        gridstore.getProxy().url = '../api/V80209API/getGridData_D';
        gridstore.getProxy().extraParams = np; //分頁OK,篩選條件OK
        Ext.getCmp('grid_D').reloadGridData(false); //若Detail資料空白時,不顯示無資料訊息
    });


2>*.cs   - getGridData_D()
[HttpPost]
        public dynamic getGridData_D()
        {
            var c = HttpContext.Current;
            NameValueCollection nvc = c.Request.Form;
            OracleCommand cmd = new OracleCommand();

            setDBTable("AMM_FRO3F16D");
            string Tmp_RVNO = nvc["RVNO"];
            string Tmp_VRCODE = nvc["s_VRCODE"];
            string Tmp_UPDREC = nvc["s_UPDREC"];
            string Tmp_UPDDT1 = nvc["s_UPDDT1"];
            string Tmp_UPDDT2 = nvc["s_UPDDT2"];
            //string csSQL = " AND RVNO = :RVNO ";
            //cmd.CommandText = csSQL;
            //cmd.Parameters.Add(":RVNO", RVNO);
            //setDBTable("AMM_FRO3F16D");
            //DataSet ds = getGridDataPage(cmd);

            string Tmp_Sql1 = "", Tmp_Sql2 = "";  //for 日期起迄
string Tmp_Sql = "  SELECT  RNK,RVNO,ITM,REER,INDDT,OUTDDT,NOTE,VRCODE,PN,SN,QDRNO,DIRNO,ACNO,MKTM "
                        + "  FROM   ( SELECT  dense_rank()  over(order by  RVNO,ITM) as RNK,"
                                       + "  RVNO,ITM,REER,INDDT,OUTDDT,NOTE,VRCODE,PN,SN,QDRNO,DIRNO,ACNO,MKTM "
                                      + "   FROM     AMM_FRO3F16D "
                                       + "   WHERE  1=1 ";
            //拆移編號
            if (!myfunc.checkisnull(Tmp_RVNO))
            {
                Tmp_Sql = Tmp_Sql + " AND    RVNO=" + myfunc.AA(Tmp_RVNO);
            };
            //異動原因
            if (!myfunc.checkisnull(Tmp_VRCODE))
            {
                if (Tmp_VRCODE != "ALL")
                   Tmp_Sql = Tmp_Sql + " AND    VRCODE=" + myfunc.AA(Tmp_VRCODE);
            };
            //異動記錄
            if (!myfunc.checkisnull(Tmp_UPDREC))
            {
                if (Tmp_UPDREC != "ALL")
                    Tmp_Sql = Tmp_Sql + " AND    (RVNO,ITM)  IN ( SELECT  RVNO,MAX(ITM)  "
                                                                                                    +" FROM    AMM_FRO3F16D "
                                                                           +" WHERE  RVNO="+myfunc.AA(Tmp_RVNO)
                                                                                                    +" GROUP BY RVNO "
                                                                                                   +" ) ";
            };
            //異動日期

            if (!(myfunc.checkisnull(Tmp_UPDDT1) && myfunc.checkisnull(Tmp_UPDDT2)))
            {                
                if (!myfunc.checkisnull(Tmp_UPDDT1))
               {
                  Tmp_Sql1 = Tmp_Sql1 + " (trunc(INDDT)>= " + myfunc.AA(Tmp_UPDDT1) + ")";
                  Tmp_Sql2 = Tmp_Sql2 + " (trunc(OUTDDT)>= " + myfunc.AA(Tmp_UPDDT1) + ")";
              };
            if (!myfunc.checkisnull(Tmp_UPDDT2))
            {
                if (!myfunc.checkisnull(Tmp_Sql1))
                {
                    Tmp_Sql1 = Tmp_Sql1 + " AND ";
                    Tmp_Sql2 = Tmp_Sql2 + " AND ";
                }
                Tmp_Sql1 = Tmp_Sql1 + "  (trunc(INDDT)<= " + myfunc.AA(Tmp_UPDDT2) + ")";
                Tmp_Sql2 = Tmp_Sql2 + "  (trunc(OUTDDT)<= " + myfunc.AA(Tmp_UPDDT2) + ")";
            }; // end of   if (!myfunc.checkisnull(Tmp_UPDDT2))

            Tmp_Sql = Tmp_Sql 
                            +" AND ( " 
                            + "("+ Tmp_Sql1+")"
                           + " OR " 
                           + "("+Tmp_Sql2 +")"
                           + ") ";
        };  //  if (!(myfunc.checkisnull(Tmp_UPDDT1) || myfunc.checkisnull(Tmp_UPDDT2)))
        Tmp_Sql = Tmp_Sql + " ) ";
            cmd.CommandText = Tmp_Sql;
            string countSql = " SELECT COUNT(*) as total FROM (" + Tmp_Sql + ")";
            DataSet ds = getDataTable(cmd, countSql);            

            //新增  CaluField 欄位  - [異動碼]            
            getKeyCode("VRCODE", ref ds);
            //新增  CaluField 欄位  - [處理人員姓名]            
            Tmp_Sql = " SELECT  EMPLYID AS REER,EMPLYNM "
                           + "  FROM   HR_EMPLYM ";
            getKeyCode("REER", ref ds,Tmp_Sql);

            return ds;
        }

2022年11月29日 星期二

V80209 – MD畫面 結構圖, 設定 Master的高度加大 - 調整高度

 目的: V80209 – MD畫面結構圖, 設定 Master的高度加大

處理說明: 1>加大 Master 的高度
                        Ext.getCmp('Detail').flex = 2;






2>高度放大後的高度

1>*.js
  //加大 Master 的高度
    Ext.getCmp('Detail').flex = 2;


2>*.js  TMMDViewEdit

Ext.define('TMMDViewEdit', {
    extend: 'Ext.Panel',
    layout: 'border',
    id: 'TMMDViewEdit',
    setTemplateBtnVisible: function (isVisible) {
        Ext.getCmp('btn_add').setVisible(isVisible);
        Ext.getCmp('btn_edit').setVisible(isVisible);
        Ext.getCmp('btn_del').setVisible(isVisible);
    },
     :
     :
    initComponent: function () {
        var me = this;
        me.items = [{
            region: 'center',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            autoScroll: true,
            id: 'Detail' + unique,
            flex: 1,
            border: false,
            items: [Ext.create('MDViewEdit_M')]
        },
        {
            region: 'south',
            flex: 1,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            border: false,
            split: true,
            items: [Ext.create('TabPanel_D')]
        }];
        me.callParent();
    }
});








    

V80209 - MD 畫面 Tab.[編輯]頁設為Hide 且 [編輯]按鈕設為 Hide

 目的: MD 畫面 Tab.[編輯]頁設為Hide 且 [編輯]按鈕設為 Hide

處理說明: 

     1>Tab.[編輯]頁設為Hide 

          Ext.getCmp('MDViewEdit_M').setTabVisible(0, false);

          //單檔    Ext.getCmp('TMSingleViewEdit').setTabVisible(0, false);

     2> 所有的編輯按鈕(新增/修改/刪除)設為 Hide

           Ext.getCmp('TMMDViewEdit').setTemplateBtnVisible(false);   

          //單檔    Ext.getCmp('TMSingleViewEdit').setTemplateBtnVisible(false);   



//設定 [編輯頁].Visible=false;  & 編輯按鈕 false

    Ext.getCmp('MDViewEdit_M').setTabVisible(0, false);

    Ext.getCmp('TMMDViewEdit').setTemplateBtnVisible(false);   

2022年11月28日 星期一

jQuery 用法 - $('#id') - $('div') - $('.class') - append - appendchild - remove .printThis()

 

jQuery 是什麼 ?

jQuery 是一個 JavaScript 函式庫 (Javascipt Framework)主要目的就跟 Logo 上面寫的精神一樣:「write less, do more由於如果要直接用 Javascript 將所有功能實作出來,常常要費時費力且造成大量且難以閱讀的程式碼,更嚴重者,有於瀏覽器之間的差異,常常要針對不同瀏覽器寫不同的程式碼,讓程式碼維護的難度大為提升。

jQuery 就是一個讓你加速網頁程式開發速度的工具,在這個倡導 Cloud 2011 年,許多應用程式都是使用網頁的方式來呈現,許多大型專案也都使用網站作為介面,因此,如何有效率的產出大量的 javascript ajax ,就是 jQuery 所主打的目標。

假設今天想要用 Javascript 讀取網頁中的單選按鈕「radio Button」,程式碼如下:

var checkValue;
var elements = document.getElementsByTagName(‘input’);
for (var n = 0; n < elements.length; n++){
if (elements[n].type == ‘radio’ && elements[n].name == ‘RadioGroup’ && elements[n].checked){
checkedValue = elements[n].value;
}

整個流程應該會是 (1) 找出所有 input 元素 (2) 當元素是 radio button 且屬於某個 group (3) 確認某個選項已經被勾選了 (4) 將勾選的值指派給 checkValue 變數

但如果使用 jQuery 的話,要怎樣完成上面的命令呢,只要一行

var checkValue = $(‘[name=”radioGroup”]:checked’).val();

其中的 $() 符號就是 jQuery 常用的選擇器,善用選擇器可以快速找到網頁當中的物件

 

但是起初瀏覽器腳本,僅有提供以下三個可以存取網頁內容節點的API

  • document.getElementById()
  • document.getElementsByTagName()
  • document.getElementsByClassName()

要取得h1標籤#my-id元素節點或是.my-class類別節點們並不困難。不過ul li#my-id li就麻煩了會需要這樣做:


  1. inline event:

<h1 onclick="console.log('click')" id="my-id">Hello</h1>

  1. addEventListener

 

jQuery只需要一行:

$("#my-id").click()

 

à

$("#my-id").addClass("red")

$("li").addClass("red")


DOM的用法:

插入一個Node物件

const parent = document.createElement('div');
const child = document.createElement('p');
parent.append(child);
// 這會將子元素追加到div元素
// 然後div看起來像這樣<div> <p> </ p> </ div>

這會將子元素追加到 div 元素,然後 div 看起來像這樣

<div> <p> </ p> </ div>

1>.append()

此方法用於以Node物件或DOMString(基本上是文字)的形式新增元素。

插入DOMString

const parent = document.createElement('div');
parent.append('附加文字');

然後 div 看起來像這樣的

<div>附加文字</ div>

 

2>.appendChild()

 .append 方法類似,該方法用於DOM中的元素,但在這種情況下,只接受一個Node物件。

插入一個Node物件

const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);

這會將子元素追加到 div 元素,然後 div 看起來像這樣

<div> <p> </ p> </ div>

 

.append 接受Node物件和DOMString,而 .appendChild 只接受Node物件。

.append 沒有返回值,而 .appendChild 返回附加的Node物件。

 

3>append()  appendTo() 的用法

.append().appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同。对于.append(), 选择表达式在函数的前面,参数是将要插入的内容。对于.appendTo()刚好相反,内容在方法前面,无论是一个选择器表达式 或创建作为标记上的标记,它都将被插入到目标容器的末尾。

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

 

$('<p>Test</p>').appendTo('.inner');

結果à

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

 

2>>

$('h2').appendTo($('.container'));

à 結果

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

http://jasonday.github.io/printThis/#nada

$(“#print_area1,#print_area3”).printThis() à 產生預覽的畫面

$(".demo").printThis();



 




1>DOM 的元件移除 , $(‘#print_area1”).remove();

à .remove() 将元素移出DOM 

请看下面的HTML:

1

2

3

4

<div class="container">

  <div class="hello">Hello</div>

  <div class="goodbye">Goodbye</div>

</div>

可以移除任何想要移除的元素:

1

$('.hello').remove();

结果如下:

1

2

3

<div class="container">

  <div class="goodbye">Goodbye</div>

</div>





5>append 和 appendChild 的不同
Differences from Node.appendChild() : Element.append() allows you to also append string objects, whereas Node.appendChild() only accepts Node objects. Element.append() has no return value, whereas Node.appendChild() returns the appended Node object.