diff --git a/src/views/VoucherCreate.vue b/src/views/VoucherCreate.vue index 86187dff3fd61cec216cce7e3cf041f81d7d79db..b1284e4b74d87805f84163cc630e71505804c245 100644 --- a/src/views/VoucherCreate.vue +++ b/src/views/VoucherCreate.vue @@ -1,54 +1,46 @@ <template> <div class="voucher-create"> - <v-card - :loading="isProcessing" - > - <v-card-title>프로그램 등록</v-card-title> - <v-card-text> - <v-alert - v-if="error.isError" - dense - text - type="error" - > - {{ error.message }} - </v-alert> - <program-field - :program.sync="voucher.program" - ></program-field> - <v-text-field - label="이용횟수" - v-model="voucher.quantity" - ></v-text-field> - </v-card-text> - <v-card-actions> - <v-spacer></v-spacer> - <v-btn - color="error" - outlined - @click="cancel" - > - <v-icon - left - > - mdi-delete - </v-icon> - 취소 - </v-btn> - <v-btn - color="primary" - outlined - @click="createVoucher" - > - <v-icon - left - > - mdi-content-save - </v-icon> - 저장 - </v-btn> - </v-card-actions> - </v-card> + <v-row> + <v-col cols="12"> + <v-card :loading="isProcessing"> + <v-card-title>이용권 등록</v-card-title> + <v-card-text> + <v-alert + v-if="error.isError" + dense + text + type="error" + > + {{ error.message }} + </v-alert> + <program-field :program.sync="voucher.program"></program-field> + <v-text-field + label="이용횟수" + v-model="voucher.quantity" + ></v-text-field> + </v-card-text> + <v-card-actions> + <v-spacer></v-spacer> + <v-btn + color="error" + outlined + @click="cancel" + > + <v-icon left>mdi-delete</v-icon> + 취소 + </v-btn> + <v-btn + color="primary" + outlined + @click="createVoucher" + > + <v-icon left>mdi-content-save</v-icon> + 저장 + </v-btn> + </v-card-actions> + </v-card> + </v-col> + </v-row> </div> </template> diff --git a/src/views/VoucherDetail.vue b/src/views/VoucherDetail.vue index 46310ace1baf44d5abeca90a57958cf4b895cc4f..f9e83ad94c872acb69a16524093035a43652a716 100644 --- a/src/views/VoucherDetail.vue +++ b/src/views/VoucherDetail.vue @@ -1,73 +1,69 @@ <template> <div class="voucher-detail"> - <v-card - :loading="isProcessing" - > - <v-card-title>이용권 정보</v-card-title> - <v-card-text> - <v-alert - v-if="error.isError" - dense - text - type="error" - > - {{ error.message }} - </v-alert> - <v-text-field - label="등록번호" - readonly - v-model="id" - ></v-text-field> - <program-field - :program.sync="voucher.program" - ></program-field> - <v-text-field - label="이용횟수" - v-model="voucher.quantity" - ></v-text-field> - <v-text-field - label="등록 시각" - readonly - v-model="voucher.createdAt" - ></v-text-field> - <v-text-field - label="최종 수정 시각" - readonly - v-model="voucher.updatedAt" - ></v-text-field> - </v-card-text> - <v-card-actions> - <v-spacer></v-spacer> - <v-btn - color="error" - outlined - @click="deleteVoucher(id)" - > - <v-icon - left - > - mdi-delete - </v-icon> - 삭제 - </v-btn> - <v-btn - color="primary" - outlined - @click="updateVoucher(id)" - > - <v-icon - left - > - mdi-content-save - </v-icon> - 저장 - </v-btn> - </v-card-actions> - </v-card> + <v-row> + <v-col cols="12"> + <v-card :loading="isProcessing"> + <v-card-title>이용권 정보</v-card-title> + <v-card-text> + <v-alert + v-if="error.isError" + dense + text + type="error" + > + {{ error.message }} + </v-alert> + <v-text-field + label="등록번호" + readonly + v-model="id" + ></v-text-field> + <program-field + :program.sync="voucher.program" + ></program-field> + <v-text-field + label="이용횟수" + v-model="voucher.quantity" + ></v-text-field> + <v-text-field + label="등록 시각" + readonly + v-model="voucher.createdAt" + ></v-text-field> + <v-text-field + label="최종 수정 시각" + readonly + v-model="voucher.updatedAt" + ></v-text-field> + </v-card-text> + <v-card-actions> + <v-spacer></v-spacer> + <v-btn + color="error" + outlined + @click="deleteVoucher(id)" + > + <v-icon left>mdi-delete</v-icon> + 삭제 + </v-btn> + <v-btn + color="primary" + outlined + @click="updateVoucher(id)" + > + <v-icon left>mdi-content-save</v-icon> + 저장 + </v-btn> + </v-card-actions> + </v-card> + </v-col> + </v-row> </div> </template> <script> +import moment from 'moment'; + import APISetting from '@/settings/api'; import ProgramField from '@/components/ProgramField.vue'; @@ -89,6 +85,8 @@ export default { title: '', }, quantity: '', + createdAt: '', + updatedAt: '', }, }), @@ -121,7 +119,10 @@ export default { const [json, res] = values; if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.'); if (res.status !== 200) throw new Error(json.message); - this.voucher = json.voucher; + const { voucher } = json; + voucher.createdAt = moment(voucher.createdAt).format('YYYY-MM-DD HH:mm:ss'); + voucher.updatedAt = moment(voucher.updatedAt).format('YYYY-MM-DD HH:mm:ss'); + this.voucher = voucher; }) .catch((e) => { this.error.message = e.message; @@ -146,7 +147,10 @@ export default { const [json, res] = values; if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.'); if (res.status !== 200) throw new Error(json.message); - this.voucher = json.voucher; + const { voucher } = json; + voucher.createdAt = moment(voucher.createdAt).format('YYYY-MM-DD HH:mm:ss'); + voucher.updatedAt = moment(voucher.updatedAt).format('YYYY-MM-DD HH:mm:ss'); + this.voucher = voucher; }) .catch((e) => { this.error.message = e.message; diff --git a/src/views/VoucherList.vue b/src/views/VoucherList.vue index 22196e6feff1ba435a5c23b449db8519b28368bb..8e756beb994e6aa960db9615c278010b965db83a 100644 --- a/src/views/VoucherList.vue +++ b/src/views/VoucherList.vue @@ -1,78 +1,78 @@ <template> <div class="voucher-list"> - <v-card> - <v-card-title>이용권 목록</v-card-title> - <v-card-text> - <v-row - justify="end" - > - <v-col - align-self="center" - cols="12" - sm="8" - md="9" - lg="9" - xl="10" - > - <v-btn - color="success" - outlined - @click="createVoucher" - > - <v-icon - left + <v-row> + <v-col cols="12"> + <v-card> + <v-card-title>이용권 목록</v-card-title> + <v-card-text> + <v-row> + <v-col + align-self="center" + cols="12" + sm="8" + md="9" + lg="9" + xl="10" > - mdi-plus - </v-icon> - 새 이용권 등록 - </v-btn> - </v-col> - <v-col - cols="12" - sm="4" - md="3" - lg="3" - xl="2" - > - <v-text-field - append-icon="mdi-magnify" - clearable - label="이용권 검색" - v-model="voucherList.searchKeyword" - ></v-text-field> - </v-col> - </v-row> - <v-data-table - :headers="voucherList.headers" - item-key="id" - :items="voucherList.data" - :loading="isProcessing" - loading-text="데이터를 불러오는 중입니다." - :search="voucherList.searchKeyword" - no-results-text="일치하는 이용권을 찾지 못했습니다." - > - <template v-slot:item.action="{ item }"> - <v-icon - small - class="mr-2" - @click="editVoucher(item.id)" - > - mdi-pencil - </v-icon> - <v-icon - small - @click="deleteVoucher(item.id)" + <v-btn + color="success" + outlined + @click="createVoucher" + > + <v-icon left>mdi-plus</v-icon> + 새 이용권 등록 + </v-btn> + </v-col> + <v-col + cols="12" + sm="4" + md="3" + lg="3" + xl="2" + > + <v-text-field + append-icon="mdi-magnify" + clearable + label="이용권 검색" + v-model="voucherList.searchKeyword" + ></v-text-field> + </v-col> + </v-row> + <v-data-table + :headers="voucherList.headers" + item-key="id" + :items="voucherList.data" + :loading="isProcessing" + loading-text="데이터를 불러오는 중입니다." + :search="voucherList.searchKeyword" + no-results-text="일치하는 이용권을 찾지 못했습니다." > - mdi-delete - </v-icon> - </template> - </v-data-table> - </v-card-text> - </v-card> + <template v-slot:item.action="{ item }"> + <v-icon + small + class="mr-2" + @click="editVoucher(item.id)" + > + mdi-pencil + </v-icon> + <v-icon + small + @click="deleteVoucher(item.id)" + > + mdi-delete + </v-icon> + </template> + </v-data-table> + </v-card-text> + </v-card> + </v-col> + </v-row> </div> </template> <script> +import moment from 'moment'; + import APISetting from '@/settings/api'; export default { @@ -98,6 +98,10 @@ export default { text: '이용횟수', value: 'quantity', }, + { + text: '등록 시각', + value: 'createdAt', + }, { text: '', value: 'action', @@ -122,6 +126,10 @@ export default { }) .then((json) => { this.voucherList.data = json.vouchers; + this.voucherList.data.forEach((voucher) => { + // eslint-disable-next-line no-param-reassign + voucher.createdAt = moment(voucher.createdAt).format('YYYY-MM-DD HH:mm:ss'); + }); }) .catch((e) => { this.error.message = e.message;