admin/src/pages/carousal/index.vue

<script setup lang="ts">
import RegularPage from '@/components/RegularPage.vue'
import { onMounted, ref, reactive } from 'vue'
import type { BaseTableColumns } from 'tdesign-vue-next'
import type { Classify } from '@/model/classify'
import ClassifyDialog from '@/pages/carousal/components/CarousalDialog.vue'
import { activeCarousal, getCarousalList, inactiveCarousal } from '@/api/carousal'

const columns: BaseTableColumns = [
  {
    title: 'ID',
    colKey: 'id',
    width: 100
  },
  {
    title: '轮播图',
    colKey: 'imageUrl',
    width: 100
  },
  {
    title: '显示状态',
    colKey: 'status',
    width: 100,
  },
  {
    title: '操作',
    colKey: 'operation',
    width: 100
  }
]
const loading = ref(false)
const data = ref([])
const pagination = reactive({
  page: 1,
  size: 10,
  total:0
})
const query = reactive({
  page:1,
  size:10,
})
const carousalDialogVisible = ref(false)
const isEdit = ref(false)
const currentTableData = ref<{}>({})
const fetchClassifyTableData = async () => {
  /* TODO: 获取轮播图表格数据 */
  query.page = pagination.page
  query.size = pagination.size
  const getCarousalListApi = await getCarousalList(query)
  data.value = getCarousalListApi.data
  pagination.total = getCarousalListApi.pagination.total
}
onMounted(fetchClassifyTableData)
const editClick = (row:object) => {
  isEdit.value = true
  currentTableData.value = row
  carousalDialogVisible.value = true
}
const showClick = async (res:object) => {
  if (res.status === 'active'){
    await inactiveCarousal({ id: res.id })
  } else {
    await activeCarousal({ id: res.id })
  }
  await fetchClassifyTableData()
  console.log(res)
}
const onPageChange = () => {
  /* TODO: 分页切换 */
}
</script>

<template>
  <RegularPage title="轮播图管理">
    <template #right-area>
      <TButton @click="carousalDialogVisible = true">创建轮播图</TButton>
    </template>
    <TTable
      class="w-full h-full"
      row-key="id"
      height="92%"
      table-layout="auto"
      :data="data"
      :loading="loading"
      :columns="columns"
      cell-empty-content="-"
      :paginationAffixedBottom="true"
      :pagination="{
        total: pagination.total,
        current: pagination.page,
        pageSize: pagination.size,
        onChange: onPageChange
      }"
    >
      <template #status="{row}">
        <TSpace>
          <TTag :theme="row.status === 'active' ? 'success' : 'danger'" variant="light">{{row.status === 'active' ? '显示中' : '已关闭'}}</TTag>
        </TSpace>
      </template>
      <template #roles="{ row }">
        <TSpace>
          <TTag v-for="role in row.roles" :key="role.id" theme="success" variant="light">{{
            role.label
          }}</TTag>
        </TSpace>
      </template>
      <template #operation="{ row }">
        <TButton variant="text" size="small" theme="primary" @click="editClick(row)">编辑</TButton>
        <TButton variant="text" size="small" theme="primary" @click="showClick(row)">{{ row.status === 'active' ? '关闭显示' : '开启显示'}}</TButton>
      </template>
    </TTable>
    <ClassifyDialog
      :classify="currentTableData"
      v-model:visible="carousalDialogVisible"
      :isEdit="isEdit"
      headerTitle="轮播图"
    ></ClassifyDialog>
  </RegularPage>
</template>

<style scoped>
:deep(.t-card__body) {
  flex: 1;
  min-height: 0;
}
</style>