시스템관리 > 권한관리 > 사이트관리 화면과 API 추가

nuxt/pages/admin/sys/site/index.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import type { OptColumn, OptRowHeader } from 'tui-grid/types/options';
+import { useSiteStore } from '~/stores/sys/site';
+import type { SiteType } from '~/types/sys/site';
+import { MaxLengthTextEditor } from '~/constants/theme/grid/MaxLengthTextEditor';
+
+const siteStore = useSiteStore();
+const { siteList } = storeToRefs(siteStore);
+const gridRef = ref();
+
+const gridRowHeaders: OptRowHeader[] = ['checkbox', 'rowNum'];
+
+const columns: OptColumn[] = [
+  {
+    name: 'siteId',
+    header: '사이트 ID',
+    width: 80,
+    editor: {
+      type: 'text'
+    },
+    validation: {
+      required: true
+    }
+  },
+  {
+    name: 'siteName',
+    header: '사이트명',
+    width: 120,
+    editor: {
+      type: 'text'
+    },
+    validation: {
+      required: true
+    }
+  },
+  {
+    name: 'siteDescription',
+    header: '사이트 설명',
+    width: 200,
+    editor: {
+      type: 'text'
+    }
+  },
+  {
+    name: 'siteDomain',
+    header: '사이트 도메인',
+    width: 150,
+    editor: {
+      type: 'text'
+    },
+    validation: {
+      required: true
+    }
+  },
+  {
+    name: 'siteType',
+    header: '사이트 형식',
+    width: 80,
+    formatter: 'listItemText',
+    editor: {
+      type: 'select',
+      options: {
+        listItems: [
+          { text: '사용자', value: 'USER' },
+          { text: '관리자', value: 'ADMIN' }
+        ]
+      }
+    },
+    validation: {
+      required: true
+    }
+  },
+  {
+    name: 'sitePrefix',
+    header: '사이트 구분',
+    width: 120,
+    editor: {
+      type: 'select',
+      options: {
+        listItems: [
+          { text: '대국민포털', value: 'portal' },
+          { text: '참여기관포털', value: 'admin' }
+        ]
+      }
+    }
+  },
+  {
+    name: 'lgnUrl',
+    header: '로그인 URL',
+    width: 120,
+    editor: {
+      type: MaxLengthTextEditor,
+      options: {
+        maxlength: 200,
+        placeholder: '로그인 URL을 입력해주세요.'
+      }
+    }
+  },
+  {
+    name: 'bscUrl',
+    header: '기본 URL',
+    width: 120,
+    editor: {
+      type: MaxLengthTextEditor,
+      options: {
+        maxlength: 200,
+        placeholder: '로그인 후 이동될 URL을 입력해주세요.'
+      }
+    }
+  },
+  { name: 'siteRegdate', header: '등록일시', width: 140 }
+];
+
+onBeforeMount(() => {
+  siteStore.searchSiteList();
+});
+
+const save = () => {
+  if (gridRef.value.validate().length) {
+    alert('len:::' + gridRef.value.validate().length);
+    message.warn('입력된 사이트 정보를 확인해주세요.');
+    return;
+  }
+
+  Modal.confirm({
+    type: 'info',
+    title: '사이트 정보 저장',
+    content: '선택한 사이트 정보를 저장하시겠습니까?',
+    okText: '예',
+    cancelText: '아니오',
+    onOk: async () => {
+      try {
+        const data = gridRef.value.getData();
+        siteStore.updateSiteList(data);
+      } catch (e) {
+        message.error('사이트 정보를 저장하는 도중 에러가 발생되었습니다.');
+      }
+    }
+  });
+};
+
+const deleteSiteList = () => {
+  const checkedRows = gridRef.value.getCheckedRows() as Array<SiteType>;
+
+  if (!checkedRows.length) {
+    message.warn('삭제할 사이트가 없습니다.');
+    return;
+  }
+
+  const params = new URLSearchParams();
+  checkedRows.forEach((value) => {
+    params.append('siteId', value.siteId);
+  });
+};
+
+const addRow = () => {
+  gridRef.value.appendRow({});
+};
+</script>
+
+<template>
+  <client-only>
+    <a-space direction="vertical" style="width: 100%">
+      <a-card>
+        <a-space direction="vertical" style="width: 100%">
+          <a-flex justify="space-between">
+            <common-permit-button api="/api/admin/sys/site/deleteSiteList">
+              <a-button type="primary" danger @click="deleteSiteList"
+                >삭제</a-button
+              >
+            </common-permit-button>
+            <common-permit-button api="/api/admin/sys/site/updateSiteList">
+              <a-space>
+                <a-button type="primary" @click="addRow">추가</a-button>
+                <a-button type="primary" @click="save">저장</a-button>
+              </a-space>
+            </common-permit-button>
+          </a-flex>
+          <data-grid
+            :key="`site-grid-${Math.random()}`"
+            :row-headers="gridRowHeaders"
+            :data="siteList"
+            :columns="columns"
+            ref="gridRef"
+          />
+        </a-space>
+      </a-card>
+    </a-space>
+  </client-only>
+</template>
+
+<style scoped></style>