요점은 VUE에서 1. onSave 작성하기 2. fn_cellEditBegin : 1) 신규행 저장 “I” 일때, 셀 입력 할수있냐 , 입력 못하게 막냐 2) 신규행저장“I” 이 아닐때 , 셀 입력 할수있냐 , 입력 못하게 막냐 3. fn_cellEditEnd : 자동 체크박스 세팅
서비스Impl에서 1. iterator 와 while 을 사용. 2. $flag I,U,D 판단 으로 DEL_YN 세팅 . ⇒ 각각의 행을 순차적으로 저장
저장 버튼(F3)
저장하는 방법!!!!!!!!!!!!!!
:buttonSet=”{ save: true 설정하여, 저장기능을 활성화 합니다. @onSave=”onSave” 설정으로 onSave함수를 연결합니다.
// <ONESearchCard> 화면에서 저장 버튼과 기능을 활성화 합니다.
<ONESearchCard ref="headerCard" :masterCd="this.$route.query.masterCd">
<template v-slot:btnGroup>
<ONEMainButtonGroup ref="mainBtnGroup"
:buttonSet="{
search: true, // F5 조회 버튼
init: true, // F6 새로고침 버튼
**save: true**, **// F3 저장 버튼**
close: true // F8 닫기 버튼
}"
:conditionVisible="conditionVisible"
@onShow="onShow"
@onSearch="onSearch"
@onInit="onInit"
**@onSave="onSave"**
@onClose="onClose"
/>
</template>
</ONESearchCard>
// 저장할 때,핵심은 onSave 함수 입니다.
async onSave () {
this.grid.setFlag() // flag 세팅 => "+"버튼으로 신규추가된 행에 $flag: I 를 넣어줍니다.
// 이미 존재하는 데이터를 수정하는 행에 $flag: U 를 넣어줍니다.
// "-" 삭제하는 행에 $flag: D 를 넣어줍니다.
// 체크된 행을 체크
if (!this.grid.isCheckedRow()) return // 그리드 가장 왼쪽, 체크박스에 선택된 행을 확인 후, 만약 선택된 행이 없다면 알림창 띄우고, onSave 종료.
// 필수값 체크
if (!await this.grid.chkNecessary()) return // headerStyle: 'grid-font-necessary' 를 체크합니다. 만약 필수값이 없으면 알림창 띄우고, onSave 종료.
if (!await this.$confirm('M_CONFIRMSAVE')) return // 저장하시겠습니까?
const saveDs = this.grid.getCheckedRowItems() // 체크된 행의 데이터만 변수에 담아둡니다. AUIGrid.vue 에서 getCheckedRowItems 확인가능
const sendData = [{
ds_json: saveDs // 컨트롤러에서 List paramList = mapUtil.getPayLoad(request, "ds_json"); 로 받습니다.
}]
this.$save('app', sendData) // 컨트롤러 PostMapping 에 받을 주소를 작성합니다.
.then(async (res) => { // res.data.rtnMap 을 받아오지만, 사용하지 않네용..
this.$notify('M_SUCCESS', 'positive') // 정상적으로 처리되었습니다.
this.onSearch() // 저장 후 다시 조회 합니다.
})
.catch(async (error) => error)
.finally(() => {
this.onResize() // 회면 ui 를 재조정합니다.
})
},
fn_cellEditBegin (event) {
const checkFlag = this.grid.getRowState(event.item.serialkey)
if (checkFlag === 'I') {
// 화면에서 그리드 "+" 신규저장하는 행 일때
// 'addUser', 'addDate', 'updUser', 'updDate', 'addIpAddr', 'updIpAddr' 는 셀에 입력 못하도록 false
if (['addUser', 'addDate', 'updUser',
'updDate', 'addIpAddr', 'updIpAddr'].indexOf(event.dataField) > -1) return false
return true // 나머지 는 입력 가능하게 true
} else {
// F5 조회했을때, 'addUser', 'addDate', 'updUser', 'updDate', 'addIpAddr', 'updIpAddr', 'appCd' 셀에 입력 못하도록 입력을 막아요
if (['addUser', 'addDate', 'updUser',
'updDate', 'addIpAddr', 'updIpAddr', 'appCd'].indexOf(event.dataField) > -1) return false
// 나머지 .. 음.. appNm 은 수정이 되겠네요. return false/true 설정 안하면, 기본으로 true 인 듯
}
},
fn_cellEditEnd (event) {
this.grid.autoCheck(event) // 그리드 셀에 **데이터를 수정**을 하면, **자동으로 왼쪽 체크박스가 체크** 되는 함수를 설정해줍니다
// => onSave() 에서 if (!this.grid.isCheckedRow()) return 와 연관이 있지요. 자동으로 수정된 행을 체크해주면 편하니까요
// // ㄴ> 체크된 행을 체크
},
async mounted () {
// 컴포넌트, 템플릿, 렌더링된 돔에 접근할 수 있다
this.grid = this.$refs.myGrid
**// 그리드 이벤트 바인드 (여기 이거요, 여기요)**
**this.grid.bind('cellEditBegin', this.fn_cellEditBegin)
this.grid.bind('cellEditEnd', this.fn_cellEditEnd)**
this.onResize()
},
Transaction이 발생했을 때 @PostMapping의 경로(value)로 요청을 받아 동작하게 될 Java Controller Class 와 Service객체를 호출한다.
public class AppController extends OneServiceSupport {
@Resource(name="mapUtil")
private MapUtil mapUtil;
@Resource(name="commonDao")
private CommonDao commonDao;
@Resource(name="appService") // @Resource ? 빈 이름을 찾아서 의존성 주입
private AppService appService;
@Description(value = "어플리케이션 저장")
@PostMapping(value = "/app")
public ModelAndView saveAppList(HttpServletRequest request,
HttpServletResponse response, Model model) throws Exception {
List paramList = mapUtil.getPayLoad(request, "ds_json"); // 저장할떄는 .get(0); 아닙니당~ 눈으로 확인 한번하고 넘어가세용
appService.saveAppList(paramList); // 서비스 의 저장로직 실행합니다. 보통 리턴은 안받지만, 만약 필요하면 리턴값을 아래 rtnMap 처럼 model에 넣어주는 경우도 있음
Map rtnMap = new HashMap();
rtnMap.put("errorCode", 0);
rtnMap.put("errMsg", "성공");
model.addAttribute("rtnMap", rtnMap);
return new ModelAndView("jsonView");
}
}
public interface AppService {
// 저장
// @Transactional 어노테이션 꼭 작성해주세요.
@Transactional
public void saveAppList(List list)throws Exception;
}