File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="pagetitle">
<h2>공지사항 등록</h2>
</div>
<section class="section">
<div class="card">
<div class="card-body pt-3">
<form @submit.prevent="handleSubmit">
<table class="form-table" style="width: 100%;">
<tbody>
<tr>
<th class="text-lf">
<span>제목</span>
</th>
<td>
<input type="text" class="form-control" placeholder="제목을 입력하세요." v-model="title" required />
</td>
</tr>
<tr class="border-top">
<th colspan="4" class="text-lf">
<span>내용</span>
</th>
</tr>
<tr style="max-height: 600px">
<td colspan="4" style="height: 100%" class="pt-0">
<ckeditor :editor="editor" required></ckeditor>
<textarea name="" id="" v-model="editorData"></textarea>
</td>
</tr>
<!-- 첨부파일 -->
<tr class="border-top">
<th class="text-lf">
첨부파일
</th>
<td colspan="2">
<div class="gd-12 pr0">
<div class="gd-2 pl0 pr0">
<label for="file" class="btn btn-outline-primary">파일찾기</label>
<input type="file" id="file" ref="file" multiple />
</div>
</div>
</td>
</tr>
<!-- 공지글 -->
<tr class="border-top">
<th class="text-lf">
공지글
</th>
<td colspan="3">
<div class="d-flex no-gutters">
<div class="col-md-4">
<input type="radio" name="notice" id="notice-y" class="mr5" value="Y" v-model="notice" required />
<label for="notice-y">사용</label>
</div>
<div class="col-md-4">
<input type="radio" name="notice" id="notice-n" class="mr5" value="N" v-model="notice" required />
<label for="notice-n">미사용</label>
</div>
</div>
</td>
</tr>
<!-- 공지글 게시기간 -->
<tr class="border-top">
<th class="text-lf">
공지글 게시기간
</th>
<td colspan="3">
<div class="d-flex no-gutters">
<div class="col-md-4">
<input type="datetime-local" class="form-control" v-model="startDate" :disabled="notice === 'N'"
required />
</div>
<div class="pd-1">-</div>
<div class="col-md-4">
<input type="datetime-local" class="form-control" v-model="endDate" :disabled="notice === 'N'"
required />
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="text-end">
<button class="btn btn-primary" type="submit">등록</button>
<button class="btn btn-secondary" @click="handleCancel">취소</button>
</div>
</form>
</div>
</div>
</section>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
components: {
ckeditor: CKEditor,
},
data() {
console.log(localStorage.getItem('testKey'));
const today = new Date().toISOString().split('T')[0];
const todayDatetime = new Date().toISOString().slice(0, 16); // To include time for datetime-local
return {
editor: ClassicEditor,
editorData: '', // Data for the editor
title: '', // Bind to title input
notice: '', // Bind to notice radio buttons
startDate: todayDatetime, // Bind to start date
endDate: todayDatetime, // Bind to end date
isFormValid: true, // To track form validation status
};
},
methods: {
handleInsert() {
console.log('Form Data:', {
title: this.title,
editorData: this.editorData,
notice: this.notice,
startDate: this.startDate,
endDate: this.endDate,
});
},
handleCancel() {
// Reset form fields
this.title = '';
this.editorData = '';
this.notice = '';
this.startDate = this.endDate = new Date().toISOString().slice(0, 16);
// Optionally remove from localStorage
localStorage.removeItem('formData');
},
handleSubmit() {
console.log('handleSubmit called');
// Validate the form before submission
this.validateForm();
if (this.isFormValid) {
// Save form data to localStorage
const formData = {
title: this.title,
editorData: this.editorData,
notice: this.notice,
startDate: this.startDate,
endDate: this.endDate,
};
localStorage.setItem('formData', JSON.stringify(formData));
alert('등록되었습니다.');
// Add further logic here (e.g., API call)
} else {
alert('모든 필드를 올바르게 작성해주세요.');
}
},
validateForm() {
// Check if all required fields are filled
this.isFormValid = !!(
this.title &&
this.editorData &&
this.notice &&
this.startDate &&
this.endDate
);
},
loadFormData() {
const savedData = localStorage.getItem('formData');
console.log('savedData:', savedData);
if (savedData) {
const formData = JSON.parse(savedData);
this.title = formData.title || '';
this.editorData = formData.editorData || '';
this.notice = formData.notice || '';
this.startDate = formData.startDate || '';
this.endDate = formData.endDate || '';
}
},
},
mounted() {
this.loadFormData(); // Load saved data from localStorage
},
};
</script>
<style scoped>
td,
th {
padding: 1rem;
}
th {
width: 10rem;
}
#file {
position: absolute;
width: 0;
height: 0;
padding: 0;
overflow: hidden;
border: 0;
}
.ckeditor {
width: 100%;
height: 300px;
/* Adjust height as needed */
}
</style>