芝麻web文件管理V1.00

编辑当前文件:/home/pulsehostuk9/www/invoicer.pulsehost.co.uk/resources/scripts/admin/views/expenses/Index.vue

<template #actions>
        <BaseButton
          v-show="expenseStore.totalExpenses"
          variant="primary-outline"
          @click="toggleFilter"
        >
          {{ $t('general.filter') }}
          <template #right="slotProps">
            <BaseIcon
              v-if="!showFilters"
              name="FilterIcon"
              :class="slotProps.class"
            />
            <BaseIcon v-else name="XIcon" :class="slotProps.class" />
          </template>
        </BaseButton>

<BaseButton
          v-if="userStore.hasAbilities(abilities.CREATE_EXPENSE)"
          class="ml-4"
          variant="primary"
          @click="$router.push('expenses/create')"
        >
          <template #left="slotProps">
            <BaseIcon name="PlusIcon" :class="slotProps.class" />
          </template>
          {{ $t('expenses.add_expense') }}
        </BaseButton>
      </template>
    </BasePageHeader>

<BaseEmptyPlaceholder
      v-show="showEmptyScreen"
      :title="$t('expenses.no_expenses')"
      :description="$t('expenses.list_of_expenses')"
    >
      <UFOIcon class="mt-5 mb-4" />

<template
        v-if="userStore.hasAbilities(abilities.CREATE_EXPENSE)"
        #actions
      >
        <BaseButton
          variant="primary-outline"
          @click="$router.push('/admin/expenses/create')"
        >
          <template #left="slotProps">
            <BaseIcon name="PlusIcon" :class="slotProps.class" />
          </template>
          {{ $t('expenses.add_new_expense') }}
        </BaseButton>
      </template>
    </BaseEmptyPlaceholder>
    <div v-show="!showEmptyScreen" class="relative table-container">
      <div class="relative flex items-center justify-end h-5">
        <BaseDropdown
          v-if="
            expenseStore.selectedExpenses.length &&
            userStore.hasAbilities(abilities.DELETE_EXPENSE)
          "
        >
          <template #activator>
            <span
              class="
                flex
                text-sm
                font-medium
                cursor-pointer
                select-none
                text-primary-400
              "
            >
              {{ $t('general.actions') }}
              <BaseIcon name="ChevronDownIcon" />
            </span>
          </template>

<BaseDropdownItem
            v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
            @click="removeMultipleExpenses"
          >
            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
      </div>

<template #cell-name="{ row }">
          <router-link
            :to="{ path: `expenses/${row.data.id}/edit` }"
            class="font-medium text-primary-500"
          >
            {{ row.data.expense_category.name }}
          </router-link>
        </template>

<template #cell-expense_date="{ row }">
          {{ row.data.formatted_expense_date }}
        </template>

<template #cell-notes="{ row }">
          <div class="notes">
            <div class="truncate note w-60">
              {{ row.data.notes ? row.data.notes : '-' }}
            </div>
          </div>
        </template>

import abilities from '@/scripts/admin/stub/abilities'

import UFOIcon from '@/scripts/components/icons/empty/UFOIcon.vue'
import ExpenseDropdown from '@/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue'

const companyStore = useCompanyStore()
const expenseStore = useExpenseStore()
const dialogStore = useDialogStore()
const categoryStore = useCategoryStore()
const userStore = useUserStore()

let isFetchingInitialData = ref(true)
let showFilters = ref(null)

const filters = reactive({
  expense_category_id: '',
  from_date: '',
  to_date: '',
  customer_id: '',
})

const { t } = useI18n()
let tableComponent = ref(null)

const showEmptyScreen = computed(() => {
  return !expenseStore.totalExpenses && !isFetchingInitialData.value
})

const selectField = computed({
  get: () => expenseStore.selectedExpenses,
  set: (value) => {
    return expenseStore.selectExpense(value)
  },
})

const selectAllFieldStatus = computed({
  get: () => expenseStore.selectAllField,
  set: (value) => {
    return expenseStore.setSelectAllState(value)
  },
})

const expenseColumns = computed(() => {
  return [
    {
      key: 'status',
      thClass: 'extra w-10',
      tdClass: 'font-medium text-gray-900',
      placeholderClass: 'w-10',
      sortable: false,
    },
    {
      key: 'expense_date',
      label: t('expenses.date'),
      thClass: 'extra',
      tdClass: 'font-medium text-gray-900',
    },
    {
      key: 'name',
      label: t('expenses.category'),
      thClass: 'extra',
      tdClass: 'cursor-pointer font-medium text-primary-500',
    },
    { key: 'user_name', label: t('expenses.customer') },
    { key: 'notes', label: t('expenses.note') },
    { key: 'amount', label: t('expenses.amount') },
    {
      key: 'actions',
      sortable: false,
      tdClass: 'text-right text-sm font-medium',
    },
  ]
})

debouncedWatch(
  filters,
  () => {
    setFilters()
  },
  { debounce: 500 }
)

onUnmounted(() => {
  if (expenseStore.selectAllField) {
    expenseStore.selectAllExpenses()
  }
})

onMounted(() => {
  categoryStore.fetchCategories({ limit: 'all' })
})

async function searchCategory(search) {
  let res = await categoryStore.fetchCategories({ search })
  return res.data.data
}

async function fetchData({ page, filter, sort }) {
  let data = {
    ...filters,

orderByField: sort.fieldName || 'created_at',

orderBy: sort.order || 'desc',

page,
  }

isFetchingInitialData.value = true

let response = await expenseStore.fetchExpenses(data)
  isFetchingInitialData.value = false

return {
    data: response.data.data,

pagination: {
      data: response.data.data,
      totalPages: response.data.meta.last_page,
      currentPage: page,
      totalCount: response.data.meta.total,
      limit: 10,
    },
  }
}

function refreshTable() {
  tableComponent.value && tableComponent.value.refresh()
}

function setFilters() {
  refreshTable()
}

function clearFilter() {
  filters.expense_category_id = ''
  filters.from_date = ''
  filters.to_date = ''
  filters.customer_id = ''
}

function toggleFilter() {
  if (showFilters.value) {
    clearFilter()
  }

showFilters.value = !showFilters.value
}

function hasAbilities() {
  return userStore.hasAbilities([
    abilities.DELETE_EXPENSE,
    abilities.EDIT_EXPENSE,
  ])
}

function removeMultipleExpenses() {
  dialogStore
    .openDialog({
      title: t('general.are_you_sure'),
      message: t('expenses.confirm_delete', 2),
      yesLabel: t('general.ok'),
      noLabel: t('general.cancel'),
      variant: 'danger',
      size: 'lg',
      hideNoButton: false,
    })
    .then((res) => {
      if (res) {
        expenseStore.deleteMultipleExpenses().then((response) => {
          if (response.data) {
            refreshTable()
          }
        })
      }
    })
}
</script>