audi/app/pages/admin/staff/sales/index.vue

<template>
  <div class="admin--sales-list">
    <!-- 검색 영역 -->
    <div class="admin--search-box admin--search-box-large">
      <div class="admin--search-filters">
        <div class="admin--filter-row">
          <label class="admin--filter-label">전시장</label>
          <select v-model="filters.showroom" class="admin--form-select">
            <option value="">전체</option>
            <option v-for="showroom in showrooms" :key="showroom.id" :value="showroom.id">
              {{ showroom.name }}
            </option>
          </select>

          <label class="admin--filter-label">지점</label>
          <select v-model="filters.branch" class="admin--form-select">
            <option value="">전체</option>
            <option v-for="branch in branches" :key="branch.id" :value="branch.id">
              {{ branch.name }}
            </option>
          </select>

          <label class="admin--filter-label">팀</label>
          <select v-model="filters.team" class="admin--form-select">
            <option value="">전체</option>
            <option v-for="team in teams" :key="team.id" :value="team.id">
              {{ team.name }}
            </option>
          </select>
        </div>

        <div class="admin--filter-row">
          <label class="admin--filter-label">검색어</label>
          <input
            v-model="filters.keyword"
            type="text"
            class="admin--form-input"
            placeholder="이름으로 검색"
            @keyup.enter="handleSearch"
          >
          <button class="admin--btn admin--btn-primary" @click="handleSearch">
            검색
          </button>
          <button class="admin--btn admin--btn-secondary" @click="handleReset">
            초기화
          </button>
        </div>
      </div>

      <div class="admin--search-actions">
        <button class="admin--btn admin--btn-secondary" @click="handleExcelDownload">
          엑셀 다운로드
        </button>
        <button class="admin--btn admin--btn-secondary" @click="handleA2Print">
          A2 출력하기
        </button>
        <button class="admin--btn admin--btn-primary" @click="goToCreate">
          + 사원 등록
        </button>
      </div>
    </div>

    <!-- 테이블 -->
    <div class="admin--table-wrapper">
      <table class="admin--table admin--table-sales">
        <thead>
          <tr>
            <th>NO</th>
            <th>사진</th>
            <th>전시장</th>
            <th>지점</th>
            <th>팀</th>
            <th>이름</th>
            <th>직책</th>
            <th>대표번호</th>
            <th>핸드폰</th>
            <th>이메일</th>
            <th>관리</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="isLoading">
            <td colspan="11" class="admin--table-loading">
              데이터를 불러오는 중...
            </td>
          </tr>
          <tr v-else-if="!salesList || salesList.length === 0">
            <td colspan="11" class="admin--table-empty">
              등록된 영업사원이 없습니다.
            </td>
          </tr>
          <tr v-else v-for="(sales, index) in salesList" :key="sales.id">
            <td>{{ totalCount - ((currentPage - 1) * perPage + index) }}</td>
            <td>
              <div class="admin--table-photo">
                <img v-if="sales.photo_url" :src="sales.photo_url" :alt="sales.name">
                <div v-else class="admin--table-photo-empty">사진없음</div>
              </div>
            </td>
            <td>{{ sales.showroom_name }}</td>
            <td>{{ sales.branch_name }}</td>
            <td>{{ sales.team_name }}</td>
            <td class="admin--table-title">{{ sales.name }}</td>
            <td>{{ sales.position }}</td>
            <td>{{ sales.main_phone }}</td>
            <td>{{ sales.mobile }}</td>
            <td>{{ sales.email }}</td>
            <td>
              <div class="admin--table-actions admin--table-actions-col">
                <button
                  class="admin--btn-small admin--btn-small-primary"
                  @click="goToEdit(sales.id)"
                >
                  수정
                </button>
                <button
                  class="admin--btn-small admin--btn-small-danger"
                  @click="handleDelete(sales.id)"
                >
                  삭제
                </button>
                <button
                  class="admin--btn-small admin--btn-small-secondary"
                  @click="handlePrint(sales.id)"
                >
                  프린트
                </button>
                <button
                  class="admin--btn-small admin--btn-small-secondary"
                  @click="handleExcelExport(sales.id)"
                >
                  엑셀출력
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 페이지네이션 -->
    <div v-if="totalPages > 1" class="admin--pagination">
      <button
        class="admin--pagination-btn"
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
      >
        이전
      </button>
      <button
        v-for="page in visiblePages"
        :key="page"
        class="admin--pagination-btn"
        :class="{ 'is-active': page === currentPage }"
        @click="changePage(page)"
      >
        {{ page }}
      </button>
      <button
        class="admin--pagination-btn"
        :disabled="currentPage === totalPages"
        @click="changePage(currentPage + 1)"
      >
        다음
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

definePageMeta({
  layout: 'admin',
  middleware: ['auth']
})

const router = useRouter()
const { get, del } = useApi()

const isLoading = ref(false)
const salesList = ref([])
const showrooms = ref([])
const branches = ref([])
const teams = ref([])

const filters = ref({
  showroom: '',
  branch: '',
  team: '',
  keyword: ''
})

const currentPage = ref(1)
const perPage = ref(10)
const totalCount = ref(0)
const totalPages = ref(0)

// 보이는 페이지 번호 계산
const visiblePages = computed(() => {
  const pages = []
  const maxVisible = 5
  let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2))
  let end = Math.min(totalPages.value, start + maxVisible - 1)

  if (end - start < maxVisible - 1) {
    start = Math.max(1, end - maxVisible + 1)
  }

  for (let i = start; i <= end; i++) {
    pages.push(i)
  }

  return pages
})

// 필터 데이터 로드
const loadFilters = async () => {
  // 전시장 리스트
  const { data: showroomData } = await get('/staff/showrooms')
  if (showroomData) showrooms.value = showroomData

  // 지점 리스트
  const { data: branchData } = await get('/branch/list', { per_page: 1000 })
  if (branchData) branches.value = branchData.items || []

  // 팀 리스트
  const { data: teamData } = await get('/staff/teams')
  if (teamData) teams.value = teamData
}

// 데이터 로드
const loadSales = async () => {
  isLoading.value = true

  const params = {
    page: currentPage.value,
    per_page: perPage.value,
    ...filters.value
  }

  const { data, error } = await get('/staff/sales', params)

  if (data) {
    salesList.value = data.items || []
    totalCount.value = data.total || 0
    totalPages.value = Math.ceil(totalCount.value / perPage.value)
  }

  isLoading.value = false
}

// 검색
const handleSearch = () => {
  currentPage.value = 1
  loadSales()
}

// 초기화
const handleReset = () => {
  filters.value = {
    showroom: '',
    branch: '',
    team: '',
    keyword: ''
  }
  currentPage.value = 1
  loadSales()
}

// 페이지 변경
const changePage = (page) => {
  if (page < 1 || page > totalPages.value) return
  currentPage.value = page
  loadSales()
}

// 엑셀 다운로드 (전체)
const handleExcelDownload = async () => {
  const params = { ...filters.value }
  window.open(`/api/staff/sales/excel?${new URLSearchParams(params)}`, '_blank')
}

// A2 출력
const handleA2Print = () => {
  const params = { ...filters.value }
  window.open(`/api/staff/sales/print-a2?${new URLSearchParams(params)}`, '_blank')
}

// 개별 프린트
const handlePrint = (id) => {
  window.open(`/api/staff/sales/${id}/print`, '_blank')
}

// 개별 엑셀 출력
const handleExcelExport = (id) => {
  window.open(`/api/staff/sales/${id}/excel`, '_blank')
}

// 등록 페이지로 이동
const goToCreate = () => {
  router.push('/admin/staff/sales/create')
}

// 수정 페이지로 이동
const goToEdit = (id) => {
  router.push(`/admin/staff/sales/edit/${id}`)
}

// 삭제
const handleDelete = async (id) => {
  if (!confirm('정말 삭제하시겠습니까?')) return

  const { error } = await del(`/staff/sales/${id}`)

  if (error) {
    alert('삭제에 실패했습니다.')
  } else {
    alert('삭제되었습니다.')
    loadSales()
  }
}

onMounted(() => {
  loadFilters()
  loadSales()
})
</script>