/admin/content/list 페이징 처리와 검색 조건 기능 추가

nuxt/components/common/DefaultSelectCode.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { GridCodeType } from '~/types';
+
+const value = defineModel<string>({ default: '' });
+
+const props = defineProps<{
+  options: GridCodeType[];
+  className?: string;
+  selectType?: 'SELECT' | 'ALL';
+  isLoading?: boolean;
+}>();
+
+const selectOptions = computed(() => {
+  if (props.selectType === 'REQUIRED') {
+    return [{ label: '선택', value: '' }, ...props.options];
+  }
+
+  if (props.selectType === 'ALL') {
+    return [{ label: '전체', value: '' }, ...props.options];
+  }
+
+  return props.options;
+});
+
+const emit = defineEmits(['change']);
+
+const change = () => {
+  emit('change');
+};
+</script>
+
+<template>
+  <a-select
+    :class="className"
+    :options="selectOptions"
+    :loading="isLoading"
+    v-model:value="value"
+    @change="change"
+  />
+</template>

nuxt/components/common/InstCodeSelect.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps<{
+  className?: string;
+  selectType?: 'SELECT' | 'ALL';
+}>();
+
+const commonCodeStore = useCommonCodeStore();
+const value = defineModel<string>('');
+
+const { data, isLoading } = useQuery({
+  queryKey: ['INST_CODE_LIST'],
+  queryFn: async () => {
+    return await commonCodeStore.searchInstCodeList();
+  },
+  staleTime: 60 * 1000,
+  refetchOnWindowFocus: false,
+  refetchOnMount: false
+});
+</script>
+
+<template>
+  <common-default-select-code
+    v-if="!isLoading"
+    :class-name="className"
+    :select-type="selectType"
+    :options="data"
+    v-model="value"
+  />
+</template>

nuxt/pages/admin/content/index.vue

@@ -69,7 +69,7 @@ const nonValid = computed(() => {
               :colon="false"
               :label-col="{ span: 2 }"
             >
-<!--              <common-inst-code-select v-model:value="contents.orgId" />-->
+              <common-inst-code-select v-model:value="contents.orgId" />
             </a-form-item>
           </a-col>
 

nuxt/pages/admin/content/list.vue

@@ -2,13 +2,11 @@
 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';
+import { useCommonCodeStore } from '~/stores';
 
 const router = useRouter();
 
-// const siteCodeList = await useCommonCodeStore().searchSiteCodeList();
-// const instCodeList = await useCommonCodeStore().searchInstCodeList();
+const instCodeList = await useCommonCodeStore().searchInstCodeList();
 const contentStore = useContentStore();
 const { contentsList, contentsQuery } = storeToRefs(contentStore);
 const gridRef = ref();
@@ -28,6 +26,15 @@ const columns: OptColumn[] = [
     name: 'orgId',
     header: '관리기관',
     width: 100,
+    disabled: true,
+    formatter: 'listItemText',
+    resizable: true,
+    editor: {
+      type: 'select',
+      options: {
+        listItems: instCodeList
+      }
+    }
   },
   {
     name: 'useYn',
@@ -58,7 +65,7 @@ const columns: OptColumn[] = [
 ];
 
 const contentType = [
-  { label: '전체', value: '' },
+  { label: '전체', value: 'TOTAL' },
   { label: '제목', value: 'TITLE' },
   { label: '내용', value: 'CONTENT' }
 ];
@@ -72,7 +79,7 @@ onBeforeUnmount(() => {
 });
 
 const search = () => {
-  // contentStore.searchContentList();
+  contentStore.searchContentList();
 };
 
 const list = computed(() => {
@@ -133,12 +140,12 @@ const editPage = (contentId: any) => {
           <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"-->
-<!--              />-->
+              <lazy-common-inst-code-select
+                key="inst-code-select"
+                v-model="contentsQuery.orgId"
+                class-name="w-40"
+                select-type="ALL"
+              />
             </a-space>
           </a-col>
 
@@ -151,7 +158,8 @@ const editPage = (contentId: any) => {
                 v-model:value="contentsQuery.type"
                 :options="contentType"
               />
-              <a-input title="검색어" placeholder="Search" class="w-60" />
+              <a-input title="검색어" placeholder="Search" class="w-60"
+                       v-model:value="contentsQuery.keyword" allow-clear/>
             </a-space>
           </a-col>
           <a-col>

nuxt/stores/contents/index.ts

@@ -16,7 +16,7 @@ const DEFAULT_CONTENT_QUERY: ContentListQueryType = {
   page: 1,
   siteId: '',
   size: 10,
-  type: ''
+  type: 'TOTAL'
 };
 
 const DEFAULT_CONTENTS_LIST: Page<ContentListType> = {

nuxt/stores/index.ts

@@ -60,16 +60,6 @@ export const useDefaultStore = defineStore('useDefaultStore', () => {
 });
 
 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');
@@ -83,17 +73,8 @@ export const useCommonCodeStore = defineStore('useCommonCodeStore', () => {
     return data;
   };
 
-  const searchRoleCodeList = async (): Promise<GridCodeType[]> => {
-    const { data } = await useAxios().get<GridCodeType[]>(
-      '/api/admin/code/roleList'
-    );
-    return data;
-  };
-
   return {
     searchInstCodeList,
-    searchSiteCodeList,
-    searchCommonCodeList,
-    searchRoleCodeList
+    searchSiteCodeList
   };
 });

nuxt/types/contents/index.ts

@@ -4,7 +4,7 @@ export type ContentListQueryType = {
   siteId: string;
   orgId: string;
   keyword: string;
-  type: '' | 'TITLE' | 'CONTENT';
+  type: 'TOTAL' | 'TITLE' | 'CONTENT';
 };
 
 export type ContentListType = {