vueJava/nuxt/pages/admin/content/index.vue

127 lines
3.3 KiB
Vue

<script setup lang="ts">
import { useContentStore } from '~/stores/contents';
const route = useRoute();
const router = useRouter();
const contentId = route.query.contentId;
const editorRef = ref();
const contentStore = useContentStore();
const { contents, initialValue } = storeToRefs(contentStore);
onBeforeMount(() => {
if (contentId) {
contentStore.searchContents(Number(contentId));
} else {
contentStore.resetContents();
}
});
const save = () => {
contents.value.contents = editorRef.value.getValue();
contentStore
.updateContents()
.then(() => {
message.success('콘텐츠 정보가 저장이 되었습니다.');
moveList();
})
.catch(() => {
message.error('콘텐츠 저장에 실패하였습니다.');
});
};
const moveList = () => {
router.push('/admin/content/list');
};
const nonValid = computed(() => {
return !contents.value.contentTitle;
});
</script>
<template>
<client-only>
<a-space direction="vertical" class="w-full">
<a-card>
<a-row>
<a-col :span="24">
<a-form-item
label="제목"
label-align="left"
:colon="false"
:label-col="{ span: 2 }"
>
<a-input
title="제목"
placeholder="콘텐츠 제목"
v-model:value="contents.contentTitle"
/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item
label="기관"
label-align="left"
:colon="false"
:label-col="{ span: 2 }"
>
<common-inst-code-select v-model:value="contents.orgId" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item
label="내용"
label-align="left"
:colon="false"
:label-col="{ span: 2 }"
:wrapper-col="{ span: 22 }"
>
<lazy-data-editor ref="editorRef" :initial-value="initialValue" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item
label="사용여부"
label-align="left"
:colon="false"
:label-col="{ span: 2 }"
:wrapper-col="{ span: 22 }"
>
<a-switch v-model:checked="contents.useYn" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-flex justify="space-between">
<a-space>
<common-permit-button api="/api/admin/contents/updateContents">
<a-button
type="primary"
@click="save"
:disabled="nonValid"
v-if="!contentId"
>저장</a-button
>
<a-button
type="primary"
@click="save"
v-if="contentId != null"
>수정</a-button
>
</common-permit-button>
<a-button type="default" @click="moveList">목록</a-button>
</a-space>
</a-flex>
</a-col>
</a-row>
</a-card>
</a-space>
</client-only>
</template>