[05월 2주차] Vue.js 3 modal(모달, 팝업) 창 띄우기

 

Note

---

선택 불가능한 콤보 박스 만들기 - disabled

콤보 박스로 표시되지만 선택은 할 수 없도록 표시 가능

• Detail - 부모
  
  • "Detail"은 자식 컴포넌트를 의미한다. 
  •   <Detail :statusCdList1="statusCdList2"/>
    • 자식 컴포넌트 Detail 에게  statusCdList2라는 데이터를 보내서 자식 컴포넌트의 변수 statusCdList1에 값을 전달한다. 
  • 코드 리스트는 statusCdList변수를 선언과 동시에 store에서 데이터를 가져와서 statusCdList에 저장한다. 
  • view 라는 컴포넌트가 DOM에 렌더링되자마자 실행되도록 onMounted() 메서드 안에 코드 리스트 가져오는 getCodeList()를 넣어줘야한다. 

<hide/>

<div class="ly-table">
  <Detail 
  :statusCdList="statusCdList"
  />
</div>

// script
onMounted(() => {
  getCodeList();
});

const getCodeList = () =>
  store.dispatch("Store/getCodeList", {
    axios: $axios,
    apiUrls: $apiUrls,
    params: {
      grpIdList: ["원하는 코드리스트 고유 번호"],
    },
  });

const statusCdList = computed(() =>
  store.getters["Store/getStoreCodeList"]("원하는 코드리스트 고유 번호")
);

 

• Detail - 자식
  • HTML의 disable 속성을 이용하면 콤보 박스로 표시되지만 다른 값으로 선택은 할  수 없도록 설정 가능하다. 
  • 다음과 같이 기존에 만들어둔 CodeStore.js 파일에서 선언한 get 메서드를 호출해서 원하는 그룹의 코드 리스트를 가져올 수 있다. 
  • 아래 컴포넌트의 변수 statusCdList로 선언하고 Vue.js에서 가져온 데이터를 저장한다. 
  • defineProps(): Vue.js3에 도입된 Composition API의 일부이다.
    • 부모  =>  자식 컴포넌트로 전달된 props 객체를 정의한다. 
    • 부모 컴포넌트에서 보낸 statusCdList를 가지고 콤보 박스로 데이터를 표현할 수 있다. 

<hide/>

<el-form-item label="상태">
  <el-select
    v-model="model.statusCd"
    placeholder="선택"
    disabled
  >
    <el-option label="선택" value="" />
    <el-option
      v-for="item in statusCdList"
      :key="item.cdId"
      :label="item.cdNm"
      :value="item.cdId"
    />
  </el-select>
</el-form-item>

// script
import { defineProps } from "vue";
const props = defineProps({
    statusCdList: {
        type: Array,
        required: false,
},

 

---

특정 경우에만 버튼이 보이도록 설정  (v-if 사용 방법)

• Model의 상태 코드가 "생성"인 경우에만 특정 버튼이 보이도록 구현하려고 한다. 
• 버튼 태그 안에 v-if를 이용해서 조건문을 넣을 수 있다.  
• "statusCode == 'CREATED' "라는 조건을 따옴표로 감싸서 넣어준다. 조건문 안에 있는 문자열은 홑따옴표(')로 감싸준다.  
• type = "primary"는 버튼의 배경색이 강조되서 눈에 띄게 표시된다. type으로 지정할 수 있는 값은 success, warning, danger, info 가 있으며 각 속성의 색을 다르게 지정할 수 있다. 

<hide/>
<el-button
  v-if="statusCode == 'CREATED'"
  type="primary"
  @click="executeModel">
	버튼에 표시할 라벨
</el-button>
<el-dialog v-model="dialogVisibleEdit" :title="모달타이틀">
</el-dialog>

<script>
const dialogVisibleEdit = ref(false);

const executeModel = () => {
...
}

 

---

modal(모달, 팝업) 창에 컴포넌트 띄우기

• 컴포넌트에 여러 개의 자식 컴포넌트를 넣으나 팝업 창 안에 컴포넌트 여러 개를 넣으나 구현하는 방법은 똑같다. 단지, <el-dialog>로 감싸는지 아닌지의 여부만 다르다. 
• <el-dialog
  • v-model="dialogVisible" :title="모달타이틀">
    • v-model은 Vue.js에서 제공하는 양방향 데이터 바인딩 기능 중 하나이다. 
    • 모달 다이얼로그 안에서 사용자가 입력하는 값과 Vue.js 앱의 데이터를 동기화 가능하다. 
    • dialogVisible는 <script > 코드 안에 변수로 선언한 값이다. 
    • v-model을 사용하면 팝업 창의 열림 / 닫힘 상태를 나타내는 변수를 선언하고 해당 변수를 양방향 데이터 바인딩할 수 있다.
  • <자식 컴포넌트  (변수, 메서드 전달) />
• <script > 코드 안에 다음과 같이 선언해서 true / false 로 팝업 창을 열고 닫을 수 있다. 

<hide/>
<el-dialog v-model="dialogVisible" :title="model_title">
	 <ModelSearchForm @searchModel="searchModel" />
</el-dialog> 

const dialogModelList = ref(false);

const getModelList = () => {	// 팝업 창을 열기
  dialogVisible.value = true;
  // ...
};

const handleClose = () => {		
  dialogVisible.value = false;   // 팝업 창 닫기 
};

 

---

Map => Json 형태의 String 변환 -  Java

• Gson이란?
  • 구글에서 만든 Java용 Json 라이브러리이다. 
  • Gson을 이용하면 Java 객체 <=> Json 데이터, 양방향으로 변환 가능하다. 

 

 

  Ex) 변환 예시

• 아래과 같이 Map에 key-value형태로 데이터를 넣어준다. 
• new Gson().toJson(hyperParamMap)
  • Map 형태의 hyperParamMap를 Json 모양의 String으로 바꿀 수 있다. 
  • map = {"key1": "value1", "key2": "value2"} 와 같이 저장하고나서 
  • toJson() 안에 매개변수로 넣어주면
  • String 형태인  "{"key1": "value1", "key2": "value2"} " 으로 변환된다. 

<hide/>
Map<String, Object> map = new LinkedHashMap<>();
for(int i = 0; i < paramList().size(); ++i){
	map.put(param.getParamKey(), param.getParamVal());
}

---

title

• content