芝麻web文件管理V1.00

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

<template>
  <BasePage>
    <h1 class="mb-2">Sample Table Local</h1>

<BaseTable :data="data" :columns="columns">
      <template #cell-status="{ row }">
        <span
          v-if="row.data.status === 'Active'"
          class="
            inline-flex
            px-2
            text-xs
            font-semibold
            leading-5
            text-green-800
            bg-green-100
            rounded-full
          "
        >
          {{ row.data.status }}
        </span>

<span
          v-else
          class="
            inline-flex
            px-2
            text-xs
            font-semibold
            leading-5
            text-red-800
            bg-red-100
            rounded-full
          "
        >
          {{ row.data.status }}
        </span>
      </template>

<base-dropdown-item>
            <document-text-icon
              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
              aria-hidden="true"
            />
            New Invoice
          </base-dropdown-item>

<base-dropdown-item>
            <document-icon
              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
              aria-hidden="true"
            />
            New Estimate
          </base-dropdown-item>

<base-dropdown-item>
            <user-icon
              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
              aria-hidden="true"
            />
            New Customer
          </base-dropdown-item>
        </base-dropdown>
      </template>
    </BaseTable>

<h1 class="mt-8 mb-2">Sample Table Remote</h1>

export default {
  components: {
    BaseTable,
    DotsHorizontalIcon,
    UserIcon,
    DocumentIcon,
    DocumentTextIcon,
  },

setup() {
    const itemStore = useItemStore()
    const data = reactive([
      { name: 'Tom', age: 3, image: 'tom.jpg', status: 'Active' },
      { name: 'Felix', age: 5, image: 'felix.jpg', status: 'Disabled' },
      { name: 'Sylvester', age: 7, image: 'sylvester.jpg', status: 'Active' },
    ])

const columns = computed(() => {
      return [
        {
          key: 'name',
          label: 'Name',
          thClass: 'extra',
          tdClass: 'font-medium text-gray-900',
        },
        { key: 'age', label: 'Age' },
        { key: 'image', label: 'Image' },
        { key: 'status', label: 'Status' },
        {
          key: 'actions',
          label: '',
          tdClass: 'text-right text-sm font-medium',
          sortable: false,
        },
      ]
    })

const columns2 = computed(() => {
      return [
        {
          key: 'name',
          label: 'Name',
          thClass: 'extra',
          tdClass: 'font-medium text-gray-900',
        },
        { key: 'price', label: 'Price' },
        { key: 'created_at', label: 'Created At' },
        {
          key: 'actions',
          label: '',
          tdClass: 'text-right text-sm font-medium',
          sortable: false,
        },
      ]
    })

async function fetchData({ page, sort }) {
      let data = {
        orderByField: sort.fieldName || 'created_at',
        orderBy: sort.order || 'desc',
        page,
      }

let response = await itemStore.fetchItems(data)

return {
        data: response.data.items.data,
        pagination: {
          totalPages: response.data.items.last_page,
          currentPage: page,
          totalCount: response.data.itemTotalCount,
          limit: 10,
        },
      }
    }

return {
      data,
      columns,
      fetchData,
      columns2,
    }
  },
}
</script>