smartERPLite
Vue DocumentAppearance
저장
서버에 저장는 데이터는 FlexGrid의 CollectionView에서 추출해서 전송한다.
명명규칙
- 저장 프로그램의 호출 url은
save로 시작한다.
리턴 타입. ResMap과 json
저장후에 메시지에 저장 건수가 필요하면 저장 건수를 담고, 아니면 단순히 ResMap을 리턴한다.
Front End
그리드에서 저장할 데이터 추출 해서 저장
flex.getSaveData()함수로추가,수정,삭제된 데이터를 추출한다.getSaveData()는 저장할 데이터가 없으면null이다.- 저장할 파라미터를 object로 생성한다.
파라미터의key가 서버의 저장 파라미터 Bean의 필드명과 매핑된다. - 저장 함수를 호출하기전에 모든 유효성 검증을 완료한다.
- 유효성 검증 실패시 경고는
await vmAler(메시지)함수를 사용한다. - 유효성 검증 완료후
await vmConfirm(메시지)으로 저장할지 물어본다. vmConfirm의 return type은Promise<'YES' | 'NO' | 'CANCEL'>이므로answer === 'YES'와 같이 비교한다.await vmConfirm() === 'YES'또는if (vmConfirm())와 같이 함수의 결과를 비교하면 않됨.- 유효성 검증이 완료되면
http.post함수를 실행한다.
첫번째는 저장할 url, 두번째 파라미터는 저자할 파라미터이다.
async/await와 http.post 사용
async function save() {
const saveData = flex.getSaveData()
if (!saveData) {
await vmAlert('저장할 데이터가 없습니다.')
} else {
const answer = await vmConfirm('저장하시겠습니까?')
if (answer === 'YES') {
const { data } = await http.post('/formGrid/save', { flex: saveData })
console.log('save data result', data)
}
}
}
// 저장할 변수 타입
let saveData: {
flex: VmCollectionViewItem[] | null,
flexDetail: VmCollectionViewItem[] | null
}
async function save() {
saveData = {
flex: flex.getSaveData(),
flexDetail: flexDetail.getSaveData()
}
const valid = validate(saveData)
if ( valid ) {
const answer = await vmConfirm('저장하시겠습니까?')
if (answer === 'YES') {
const { data } = await http.post('/formGrid/save', saveData)
console.log('save data result', data)
}
}
}
function validate(saveData:{flex: VmCollectionViewItem[] | null, flex: VmCollectionViewItem[] | null}) {
let result = false;
if (!saveData.flex && !saveData.flexDetail) {
await vmAlert('저장할 데이터가 없습니다.')
}
return result;
}
Back End