admin/src/pages/classify/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/classify/components/ClassifyDialog.vue'

const columns: BaseTableColumns = [
  {
    title: '分类名称',
    colKey: 'name',
    width: 100
  },
  {
    title: '分类编号',
    colKey: 'numbering',
    width: 100
  },
  {
    title: '排序',
    colKey: 'sort',
    width: 100
  },
  {
    title: '操作',
    colKey: 'operation',
    width: 100
  }
]
const loading = ref(false)
const data = ref(
  Array.from({ length: 1 })
    .fill({ id: '1', name: '趣味科普', numbering: 'enjoy', sort: '1' })
    .map((item) => item)
)
const pagination = reactive({
  total: 1,
  page: 1,
  size: 10
})
const classifyDialogVisible = ref(false)
const isEdit = ref(false)
const currentTableData = ref<Classify | {}>({})
const fetchClassifyTableData = () => {
  /* TODO: 获取分类表格数据 */
}
onMounted(fetchClassifyTableData)
const editClick = (classify: Classify) => {
  isEdit.value = true
  currentTableData.value = classify
  console.log(classify)

  classifyDialogVisible.value = true
}
const onPageChange = () => {
  /* TODO: 分页切换 */
}
</script>

<template>
  <RegularPage title="分类管理">
    <template #right-area>
      <TButton @click="classifyDialogVisible = 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 #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>
      </template>
    </TTable>
    <ClassifyDialog
      :classify="currentTableData"
      v-model:visible="classifyDialogVisible"
      :isEdit="isEdit"
      headerTitle="分类"
    ></ClassifyDialog>
  </RegularPage>
</template>

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