/admin/content/list 프론트 기능 추가
This commit is contained in:
이진기
126
nuxt/pages/admin/content/index.vue
Normal file
126
nuxt/pages/admin/content/index.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<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>
|
||||
194
nuxt/pages/admin/content/list.vue
Normal file
194
nuxt/pages/admin/content/list.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<script setup lang="ts">
|
||||
import type { OptColumn, OptRowHeader } from 'tui-grid/types/options';
|
||||
import { useContentStore } from '~/stores/contents';
|
||||
import type { ContentType } from '~/types/contents';
|
||||
import { BOOLEANS } from '~/constants/grid';
|
||||
// import { useCommonCodeStore } from '~/stores';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// const siteCodeList = await useCommonCodeStore().searchSiteCodeList();
|
||||
// const instCodeList = await useCommonCodeStore().searchInstCodeList();
|
||||
const contentStore = useContentStore();
|
||||
const { contentsList, contentsQuery } = storeToRefs(contentStore);
|
||||
const gridRef = ref();
|
||||
|
||||
const gridRowHeaders: OptRowHeader[] = ['checkbox', 'rowNum'];
|
||||
|
||||
const columns: OptColumn[] = [
|
||||
{
|
||||
name: 'contentId',
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
name: 'contentTitle',
|
||||
header: '콘텐츠제목'
|
||||
},
|
||||
{
|
||||
name: 'orgId',
|
||||
header: '관리기관',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
name: 'useYn',
|
||||
header: '사용여부',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
name: 'frstRgtrId',
|
||||
header: '작성자',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
name: 'frstRegDt',
|
||||
header: '작성일',
|
||||
width: 130
|
||||
},
|
||||
{
|
||||
name: 'lastMdfrId',
|
||||
header: '수정자',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
name: 'lastMdfcnDt',
|
||||
header: '수정일',
|
||||
width: 130
|
||||
}
|
||||
];
|
||||
|
||||
const contentType = [
|
||||
{ label: '전체', value: '' },
|
||||
{ label: '제목', value: 'TITLE' },
|
||||
{ label: '내용', value: 'CONTENT' }
|
||||
];
|
||||
|
||||
onBeforeMount(() => {
|
||||
contentStore.searchContentList();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// contentStore.resetContentListQuery();
|
||||
});
|
||||
|
||||
const search = () => {
|
||||
// contentStore.searchContentList();
|
||||
};
|
||||
|
||||
const list = computed(() => {
|
||||
return contentsList.value.content;
|
||||
});
|
||||
|
||||
watch(list, (newValue) => {
|
||||
if (gridRef.value) {
|
||||
gridRef.value.off('dblclick');
|
||||
if (newValue.length > 0) {
|
||||
setTimeout(() => {
|
||||
gridRef.value.on('dblclick', ({ instance, rowKey }) => {
|
||||
const row = instance.getRow(rowKey);
|
||||
editPage(row.contentId);
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const deleteContentList = async () => {
|
||||
const checkedRows = gridRef.value.getCheckedRows() as Array<ContentType>;
|
||||
|
||||
if (!checkedRows.length) {
|
||||
message.warn('삭제할 콘텐츠가 없습니다.');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
type: 'warning',
|
||||
okText: '예',
|
||||
cancelText: '아니오',
|
||||
title: '컨텐츠 삭제',
|
||||
content: '선택한 컨텐츠를 삭제하시겠습니까?',
|
||||
onOk: async () => {
|
||||
const createdRows = checkedRows.filter((row) => row.contentId);
|
||||
await contentStore.deleteContents(createdRows);
|
||||
await contentStore.searchContentList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const movePage = (page: number) => {
|
||||
contentsQuery.value.page = page;
|
||||
search();
|
||||
};
|
||||
|
||||
const editPage = (contentId: any) => {
|
||||
const query = typeof contentId === 'number' ? `?contentId=${contentId}` : '';
|
||||
router.push(`/admin/content${query}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<client-only>
|
||||
<a-space direction="vertical" class="w-full">
|
||||
<a-card>
|
||||
<a-row :gutter="[16, 8]">
|
||||
<a-col>
|
||||
<a-space>
|
||||
<a-typography-text>관리기관</a-typography-text>
|
||||
<!-- <lazy-common-inst-code-select-->
|
||||
<!-- key="inst-code-select"-->
|
||||
<!-- v-model="contentsQuery.orgId"-->
|
||||
<!-- class-name="w-40"-->
|
||||
<!-- select-type="ALL"-->
|
||||
<!-- />-->
|
||||
</a-space>
|
||||
</a-col>
|
||||
|
||||
<a-col>
|
||||
<a-space>
|
||||
<a-typography-text>검색어</a-typography-text>
|
||||
<a-select
|
||||
title="컨텐츠 구분"
|
||||
class="w-20"
|
||||
v-model:value="contentsQuery.type"
|
||||
:options="contentType"
|
||||
/>
|
||||
<a-input title="검색어" placeholder="Search" class="w-60" />
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-button type="primary" @click="search">검색</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<a-card>
|
||||
<a-space direction="vertical" class="w-full">
|
||||
<a-flex justify="space-between">
|
||||
<!-- <common-permit-button api="/api/admin/contents/deleteContents">-->
|
||||
<!-- <a-button type="primary" danger @click="deleteContentList"-->
|
||||
<!-- >삭제-->
|
||||
<!-- </a-button>-->
|
||||
<!-- </common-permit-button>-->
|
||||
<!-- <common-permit-button api="/api/admin/contents/updateContents">-->
|
||||
<!-- <a-button type="primary" @click="editPage">추가</a-button>-->
|
||||
<!-- </common-permit-button>-->
|
||||
</a-flex>
|
||||
<data-grid
|
||||
:key="`board-content-grid-${Math.random()}`"
|
||||
:row-headers="gridRowHeaders"
|
||||
:data="contentsList.content"
|
||||
:columns="columns"
|
||||
ref="gridRef"
|
||||
/>
|
||||
<data-pagination
|
||||
:key="`pagination-${Math.random()}`"
|
||||
:total-elements="contentsList.totalElements"
|
||||
:show-pagination-count="10"
|
||||
:size="contentsQuery.size"
|
||||
:page="contentsQuery.page"
|
||||
@change="movePage"
|
||||
/>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</a-space>
|
||||
</client-only>
|
||||
</template>
|
||||
Reference in New Issue
Block a user