[WebOrder] CodeHelp 이용 (v-model, onChange)

맨 아래 설명이 있다 ..

 

Item.vue

 

-> 수정 전

<!-- 품목 자산 분류 -->
<CodeHelp :master-seq="1"
          :is-filter="false"
          v-model="kwdItemType"
          @update:modelValue="doSearch"
          @onChange="onChange"
          density="compact"
          variant="outlined">
</CodeHelp>

 

원래 v-model 과 modelValue,  @update: 이용해서  값이 update 되면 doSearch() 가 실행되도록 짰는데

@onChange: 만 이용하는 것으로 변경하려고 한다.

 

 

 

-> 수정 후

<!-- 품목 자산 분류 -->
<CodeHelp :master-seq="1"
          :is-filter="false"
          @onChange="onChange"
          density="compact"
          variant="outlined">
</CodeHelp>

 

 

const onChange = (val) => {
    consoleLog("CodeHelp 값 변경:", val);
    kwdItemType.value = val;   // 선택 값 반영
    doSearch();                // 바로 검색 실행
};

 

 

 

 

doSearh 는 변경사항 없이 그대로 둔다.

// 조회
const doSearch = () => {
    doSearchPaging(sheet1, {
        url: "../item/item.do",
        method: "POST",
        reqHeader: {"Content-Type": "application/json"},
        param: {
            data: {
                kwdItemName: kwdItemName.value,
                kwdItemNo: kwdItemNo.value,
                kwdItemType: kwdItemType.value?.detailSeq ? kwdItemType.value?.detailSeq : null,
            }
        },
    })
};

 

kwdItemType은 아래에 설명이 있음. 객체라서 .detailSeq로 꺼내서 서버로 넘김.

---

 

 

CodeHelp 에서 처리가 되는 게 아니라 AutoComplete.vue나 Select.vue 로 넘어가고, 여기에서 처리한다.

AutoComplete에서 사용자가 선택하면 emit("onChange", {...}) 발생

AutoComplete.vue 의 onChange부분

 

AutoComplete.vue와 Select.vue 둘 다 마찬가지로 return-object 를 쓰기 때문에 객체가 넘어온다.

 

하위 컴포넌트(Select / AutoComplete)
→ return-object라서 선택하면 { codeName, detailSeq, masterSeq, ... } 객체 전체가 넘어옴.

 

그래서 서버로 값 넘길 때 (detailSeq만 넘기려고 하니까)

kwdItemType.value.detailSeq 로 넘기는 것이다.