0103開発ログ

19560 ワード
egov Java CSS jstl jsp 電子政府の枠組み DOM JavaScript html テキストリンク

今日やったこと

  • DBに出張に関連するユーザスタックデータを挿入し、roleVOに対するクエリー
    • を作成する.
  • 出張情報照会
  • ポップアップウィンドウ:人名選択時に地図にデータを保存しhtmlタグ
    • を追加する.
  • 削除名ボタンをクリックすることで、地図上のデータ削除とhtmlタグ削除機能
    • を実現する.

    1.DB、SQL操作


    先周、出张情报を选んだ时、出张関系者まで完全な照会を书きましたが、今日考えてみると、出张情报の照会は、出张费のリストを単独で照会するように、単独照会を実现すべきだと思います.したがって、BT_ID個の出張番号があると仮定し、出張関係者-ユーザー-部門-職級の4つのテーブルのデータを以下のように照会します.
    部門名および職階名の取得にサブクエリが使用されているのが特徴です.
    SELECT B
	TR.BT_ID, 
    BT_ROLE_ID, 
    BTR.USER_ID, 
    USER_TYPE, 
    EMP.EMP_Name AS USER_NAME, 
    EMP.EMP_Dept AS USER_DEPT_CODE, 
    EMP.EMP_Position AS USER_POS_CODE,
	(SELECT POS_NAME
	FROM EMPLOYEE AS EMP
	JOIN POS ON EMP.EMP_Position = POS_CODE
	WHERE EMP.EMP_NO = BTR.USER_ID) AS USER_POS_NAME,
	(SELECT DEP_NAME
	FROM EMPLOYEE AS EMP
	JOIN DEP ON EMP.EMP_Dept = DEP_CODE
	WHERE EMP.EMP_NO = BTR.USER_ID) AS USER_DEP_NAME
FROM BUSINESSTRIP_ROLES AS BTR
JOIN EMPLOYEE AS EMP ON EMP.EMP_NO = BTR.USER_ID
WHERE BTR.BT_ID = "BT-00018";

    2.出張情報照会の際、出張関係者リストを一緒に照会し、適切な場所に入れる



    出張関係者目次には出張者、承認者、受取人の3種類が含まれており、出張情報を照会する際はUSER_TYPE変数の値に基づいて適切な場所に置く必要があります.
    現在、すべての転送された出張者リストを迂回し、USER_TYPEに一致する名前値を取得させただけですが、すべてのUSER TYPEは1つのリストにあるので、各タイプが今何回目なのか分からないので、引用符を付けることはできません.今後改善点を探す必要があります.
    <c:set var="btRoleVOList" value="${btVO.btRoleVOList }"/>

<td class="tbtd_caption"><label for="APPROVER_ID">결재자</label></td>
<td class="tbtd_content flex-between">
  <p class="multi-user">
    <c:forEach var="role" items="${btRoleVOList }" varStatus="status">
      <c:if test="${role.USER_TYPE == 1}">
        <c:out value="${role.USER_NAME }"/>
      </c:if>
    </c:forEach>
  </p>
  <a class="btn" href="javascript:openUserSearch('<c:out value="${btVO.BT_ID}"/>','<c:out value="1"/>');">찾기</a>
</td>

    3.人名選択時にデータを保存しhtmlタグを追加/削除する



    ポップアップウィンドウで一度に複数人を選択して追加する機能を実現することを決定します.人物検索結果で名前をクリックすると、その人物のUSER_IDとUSER_NAMEが得られ、地図に保存した後にspanラベルが追加されます.
    選択したデータを格納するスペースが必要であり、各ユーザには独自のキー値USER_IDがあるため、キー値でアクセス可能な重複を防止できるmapを使用することにした.
    選択した人の名前を表示するときに個々に削除できるようにspanラベルを使用しました.私が以前書いたJavascript DOMを使用してhtmlタグを生成、操作し、クラス操作の文章をクリーンアップするを参考にしてもっと喜んでいます.
    function fn_egov_select(USER_ID, USER_NAME) {

  if(!users.has(USER_ID)) {
    var showResult = document.getElementById('selectUserList');
    var showUser = document.createElement('span');
    var icon = document.createElement('i');
    icon.classList.add("fas");
    icon.classList.add("fa-window-close");

    console.log(showResult);

    showUser.setAttribute('id', USER_ID);
    showUser.innerHTML = USER_NAME;
    showUser.appendChild(icon);
    showUser.className = "selectedUser";

    icon.addEventListener('click', function(e) {
      users.delete(USER_ID);
      e.target.parentElement.remove();
      console.log(users);
    });
    showResult.appendChild(showUser);
  } else {
    alert("이미 추가한 인물입니다.");
  }

  users.set(USER_ID, USER_NAME);
  console.log(users);
}
    spanラベルに削除アイコンを追加し、iラベルにaddEventListenerを使用してクリックイベントを追加します.最初はshowUser spanタグにクリックイベントを適用した後、自分の削除を要求したのですが、削除ボタンをクリックすると削除ボタンが消えてしまうという問題があったので修正しました.現在の削除ボタンをクリックすると、親ラベルspanラベルが削除されます.
    削除アイコンにはfontAwestomeが使用されています.fontAwestomeの使い方 
    <head>
  <script src="https://kit.fontawesome.com/451f49eee4.js" crossorigin="anonymous"></script>
</head>
<body>
  <span> <i class="fas fa-window-close"></i> </span>
</body>

    4.解決すべき問題

  • 出張情報照会では、出張関係者名の間にカンマなどの区切りを付ける方法を検討します.
  • 人物クエリーポップアップウィンドウでは、今日作成されたhtmlラベルにcssが適用されないという問題があります.js DOMで生成された部分だけでは問題ありませんが、これらのラベル、クラスは適用されません.明日のブラウズソリューション
  • 現在選択されているユーザ情報はjsマップに含まれており、これらの情報をコントローラに送り返し、これらの情報でVOを生成して保存する必要がある.逆に、DBから取得した値をVOとし、ポップアップウィンドウでVOListの値をMapに変換する.
    • 簡単なアルゴリズム2
    [PIA]4章VIGO,資料型