/admin/content/list 프론트 기능 추가

nuxt/components/data/Pagenation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import 'tui-pagination/dist/tui-pagination.css';
+import 'tui-pagination.css';
 import Pagination from 'tui-pagination/dist/tui-pagination';
 import type { PaginationType } from '~/types/data/pagination';
 

nuxt/constants/grid/index.ts

@@ -0,0 +1,20 @@
+export const BOOLEANS = [
+  { text: '사용', value: 'true' },
+  { text: '미사용', value: 'false' }
+];
+
+export const YES_OR_NO_CODE_LIST = [
+  { text: '예', value: 'true' },
+  { text: '아니오', value: 'false' }
+];
+
+export const LOCK_CODE_LIST = [
+  { text: '정상', value: 'false' },
+  { text: '잠김', value: 'true' }
+];
+
+export const ADMIN_STATUS_CODE_LIST = [
+  { text: '미승인', value: 'NONE' },
+  { text: '승인', value: 'APRV' },
+  { text: '반려', value: 'RJCT' }
+];

nuxt/nuxt.config.ts

@@ -21,12 +21,6 @@ export default defineNuxtConfig({
     autoImport: true
   },
   devtools: { enabled: true },
-  // plugins: [
-  //   '~/plugins/ant-design-vue.ts'
-  // ],
-  // css: [
-  //   'ant-design-vue/dist/reset.css'
-  // ],
   modules: [
     '@pinia/nuxt',
     '@unocss/nuxt',
@@ -35,11 +29,11 @@ export default defineNuxtConfig({
   ],
   vite: {
     optimizeDeps: {
-      include: ['tui-grid', '@ant-design', 'ant-design-vue']
+      include: ['tui-grid', 'ant-design-vue']
     }
   },
   alias: {},
   experimental: {
-    payloadExtraction: false
+    payloadExtraction: true
   }
 });

nuxt/pages/admin/content/index.vue

@@ -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>

nuxt/pages/admin/content/list.vue

@@ -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>

nuxt/stores/contents/index.ts

@@ -0,0 +1,140 @@
+import type {
+  ContentListQueryType,
+  ContentListType,
+  ContentType
+} from '~/types/contents';
+import { cloneDeep } from 'lodash-es';
+import type { Page } from '~/types/common';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useAxios } from '~/composables/useAxios';
+import { message } from 'ant-design-vue';
+
+const DEFAULT_CONTENT_QUERY: ContentListQueryType = {
+  keyword: '',
+  orgId: '',
+  page: 1,
+  siteId: '',
+  size: 10,
+  type: ''
+};
+
+const DEFAULT_CONTENTS_LIST: Page<ContentListType> = {
+  content: [],
+  totalElements: 0,
+  totalPages: 0
+};
+
+const DEFAULT_CONTENTS: ContentType = {
+  contentTitle: '',
+  contentPlain: '',
+  contents: '',
+  frstRegDt: '',
+  frstRgtrId: '',
+  lastMdfcnDt: '',
+  lastMdfrId: '',
+  orgId: '',
+  siteId: '',
+  useYn: true
+};
+
+export const useContentStore = defineStore('useContentStore', () => {
+  const contentsQuery = ref<ContentListQueryType>(
+    cloneDeep(DEFAULT_CONTENT_QUERY)
+  );
+
+  const contentsList = ref<Page<ContentListType>>(
+    cloneDeep(DEFAULT_CONTENTS_LIST)
+  );
+
+  const contents = ref<ContentType>(cloneDeep(DEFAULT_CONTENTS));
+  const initialValue = ref<string>('');
+
+  const resetContentListQuery = () => {
+    contentsQuery.value = cloneDeep(DEFAULT_CONTENT_QUERY);
+  };
+
+  const resetContentList = () => {
+    contentsList.value = cloneDeep(DEFAULT_CONTENTS_LIST);
+  };
+
+  const resetContents = () => {
+    contents.value = cloneDeep(DEFAULT_CONTENTS);
+    initialValue.value = '';
+  };
+
+  const initContentsQuery = () => {
+    contentsQuery.value = cloneDeep(DEFAULT_CONTENT_QUERY);
+  };
+
+  const searchContentList = async () => {
+    try {
+      const { data } = await useAxios().get(
+        '/api/admin/contents/contentsList',
+        {
+          params: {
+            ...contentsQuery.value
+          }
+        }
+      );
+
+      contentsList.value = data;
+    } catch (e) {
+      message.error('사이트 리스트를 불러오는데 실패하였습니다.');
+    }
+  };
+
+  const searchContents = async (contentId: number) => {
+    try {
+      const { data } = await useAxios().get('/api/admin/contents/detail', {
+        params: {
+          contentId
+        }
+      });
+
+      contents.value = data;
+      initialValue.value = data.contents;
+    } catch (e) {
+      message.error('컨텐츠 정보를 불러오는데 실패하였습니다.');
+    }
+  };
+
+  const updateContents = () => {
+    console.log(contents.value);
+    return useAxios().post(
+      '/api/admin/contents/updateContents',
+      contents.value
+    );
+  };
+
+  const deleteContents = async (data: ContentType[]) => {
+    try {
+      const params = new URLSearchParams();
+      data.forEach((item) => {
+        params.append('contentId', String(item.contentId));
+      });
+
+      await useAxios().post('/api/admin/contents/deleteContents', null, {
+        params
+      });
+      message.success('컨텐츠 정보가 삭제 되었습니다.');
+    } catch (e) {
+      message.error('컨텐츠 정보 삭제에 실패하였습니다.');
+    }
+  };
+
+  return {
+    contentsQuery,
+    contentsList,
+    contents,
+    initialValue,
+    resetContentListQuery,
+    searchContentList,
+    searchContents,
+    resetContentList,
+    resetContents,
+    initContentsQuery,
+    deleteContents,
+    updateContents
+  };
+});

nuxt/stores/index.ts

@@ -0,0 +1,99 @@
+import type { SiteType } from '~/types/sys/site';
+import type { GridCodeType } from '~/types';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { useAxios } from '~/composables/useAxios';
+
+export const useLoadingStore = defineStore('useLoadingStore', () => {
+  const loadCount = ref<number>(0);
+
+  const incrementLoadCount = () => {
+    loadCount.value++;
+  };
+
+  const decrementLoadCount = () => {
+    loadCount.value--;
+  };
+
+  const resetLoadCount = () => {
+    loadCount.value = 0;
+  };
+
+  const isLoading = computed(() => {
+    return loadCount.value > 0;
+  });
+
+  return {
+    isLoading,
+    resetLoadCount,
+    incrementLoadCount,
+    decrementLoadCount
+  };
+});
+
+export const useDefaultStore = defineStore('useDefaultStore', () => {
+  const siteInfo = ref<SiteType>({
+    siteId: '',
+    siteName: '',
+    siteDescription: '',
+    siteDomain: '',
+    siteType: '',
+    sitePrefix: '',
+    siteLocale: '',
+    siteLogo: '',
+    bscUrl: '',
+    lgnUrl: '',
+    delYn: false,
+    useYn: true,
+    frstRgtrId: '',
+    frstRegDt: '',
+    lastMdfrId: '',
+    lastMdfcnDt: ''
+  });
+
+  const fetchSiteInfo = async () => {
+    const { data } = await useAxios().get<SiteType>('/api/admin/siteInfo');
+    siteInfo.value = data;
+  };
+
+  return { siteInfo, fetchSiteInfo };
+});
+
+export const useCommonCodeStore = defineStore('useCommonCodeStore', () => {
+  const searchCommonCodeList = async (
+    codeGroupId: string
+  ): Promise<GridCodeType[]> => {
+    const { data } = await useAxios().get('/api/admin/code/codeList', {
+      params: {
+        codeGroupId
+      }
+    });
+    return data;
+  };
+
+  const searchSiteCodeList = async (): Promise<GridCodeType[]> => {
+    const { data } = await useAxios().get('/api/admin/code/siteList');
+    return data;
+  };
+
+  const searchInstCodeList = async (): Promise<GridCodeType[]> => {
+    const { data } = await useAxios().get<GridCodeType[]>(
+      '/api/admin/code/instList'
+    );
+    return data;
+  };
+
+  const searchRoleCodeList = async (): Promise<GridCodeType[]> => {
+    const { data } = await useAxios().get<GridCodeType[]>(
+      '/api/admin/code/roleList'
+    );
+    return data;
+  };
+
+  return {
+    searchInstCodeList,
+    searchSiteCodeList,
+    searchCommonCodeList,
+    searchRoleCodeList
+  };
+});

nuxt/types/common/index.ts

@@ -0,0 +1,10 @@
+export type Page<T> = {
+  content: T[];
+  totalElements: number;
+  totalPages: number;
+};
+
+export type PagingQuery = {
+  page: number;
+  size: number;
+};

nuxt/types/contents/index.ts

@@ -0,0 +1,32 @@
+export type ContentListQueryType = {
+  page: number;
+  size: number;
+  siteId: string;
+  orgId: string;
+  keyword: string;
+  type: '' | 'TITLE' | 'CONTENT';
+};
+
+export type ContentListType = {
+  contentId: number;
+  contentTitle: string;
+  useYn: boolean;
+  frstRgtrId: string;
+  frstRegDt: string;
+  lastMdfrId: string;
+  lastMdfcnDt: string;
+};
+
+export type ContentType = {
+  contentId?: number;
+  siteId: string;
+  orgId: string;
+  contentTitle: string;
+  contents: string;
+  contentPlain: string;
+  useYn: boolean;
+  frstRgtrId: string;
+  frstRegDt: string;
+  lastMdfrId: string;
+  lastMdfcnDt: string;
+};

nuxt/types/index.ts

@@ -0,0 +1,20 @@
+export type PagingQueryType = {
+  page: number;
+  size: number;
+};
+
+export type GridCodeType = {
+  label?: string;
+  text?: string;
+  value: string;
+};
+
+export type FileInfoType = {
+  fileId: number;
+  fileOriginalName: string;
+  filePath: string;
+  fileMimeType: string;
+  fileSize: number;
+  fileAltText: string;
+  fileDownloadCount: number;
+};