- 상세조회에 필요한 단건 조회, 여러건 조회를 구성합니다.
- 각 항목은 별도 표기, 클릭하여 수정하도록 기능을 지원합니다.
- JSON 기본 데이터에 자유롭게 액션을 추가 가능합니다.
title: Detail views
blocks:
- type: info
fetchFn: |
const rows = [
{
name: '참나무 하우스',
status: '영업중',
primaryInfo: '참나무 바베큐 장작구이 송파맛집',
secondaryInfo: ['바베큐', '화로구이', '고기', '모임', '회식'],
priceRange: '3~4',
},
/*
{
name: '참나무 하우스',
status: '영업중',
primaryInfo: '참나무 바베큐 장작구이 송파맛집',
secondaryInfo: ['바베큐', '화로구이', '고기', '모임', '회식'],
priceRange: '3~4',
},
*/
]
return rows.map(e => {
e.secondaryInfoLabel = `
<div class="flex gap-1 text-sm">
${e.secondaryInfo.map(ee => `<span class="bg-violet-500/10 px-1.5 py-0.5 rounded">${ee}</span>`).join('')}
</div>
`
return e
})
autoHeader: true
full: true
headers:
priceRange:
iconEnd: clipboard-edit-outline
clickFn: |
// alert('헤더로부터 수정')
opt.$modal.show('editPriceOption')
leftButtons:
- label: 수정
clickFn: |
alert('수정버튼 클릭: ' + opt.row[opt.key])
rightButtons:
- label: 관련된 액션
clickFn: |
alert('액션버튼 클릭')
secondaryInfo:
hidden: true
secondaryInfoLabel:
format: html
leftButtons:
- label: 공개
clickFn: |
alert('처리 완료')
rightButtons:
- label: 삭제
clickFn: |
alert('처리 완료')
rowClickFn: |
const {key} = opt
// alert(`${key}에 대한 수정`)
if (key == 'priceRange')
opt.$modal.show('editPriceValue')
- type: modal
name: editPriceValue
header: 내역의 가격을 수정
text: 할까요?
- type: modal
name: editPriceOption
header: 가격대, 기본값 관리
text: 할까요?