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

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