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 CarousalDialog from '@/pages/carousal/components/CarousalDialog.vue'
import { activeCarousal, deleteCarousal, getCarousalList, inactiveCarousal } from '@/api/carousal'
import { BrowseIcon } from 'tdesign-icons-vue-next'
import type { CarousalResult } from '@/model/carousals'

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<boolean>(false)
const data = ref<CarousalResult[]>([])
const pagination = reactive<{page:number,size:number,total:number}>({
  page: 1,
  size: 10,
  total:0
})
const query = reactive<{page:number,size:number}>({
  page:1,
  size:10,
})
const carousalDialogVisible = ref<boolean>(false)
const isEdit = ref<boolean>(false)
const currentTableData = ref<CarousalResult | {}>({})
const fetchSaveCarousalData = async () :Promise<void> => {
  /* TODO: 获取轮播图表格数据 */
  query.page = pagination.page
  query.size = pagination.size
  const getCarousalListApi = await getCarousalList(query)
  data.value = getCarousalListApi.data
  pagination.total = getCarousalListApi.pagination.total
}
onMounted(fetchSaveCarousalData)
const editClick = (row:object):void => {
  isEdit.value = true
  currentTableData.value = Object.assign({}, row)
  carousalDialogVisible.value = true
}
const showClick = async (res:CarousalResult):Promise<void> => {
  if (res.status === 'active'){
    await inactiveCarousal(res.id)
  } else {
    await activeCarousal(res.id)
  }
  await fetchSaveCarousalData()
}
const delClick = async (row:CarousalResult) :Promise<void>=> {
  await deleteCarousal(row.id)
  await fetchSaveCarousalData()
}
const handleCreateCarousal = () :void => {
  isEdit.value = false
  carousalDialogVisible.value = true
  currentTableData.value = {}
}
const onPageChange = ():void => {
  /* TODO: 分页切换 */
}
const handleSuccessDialog = async () :Promise<void> => {
  await fetchSaveCarousalData()
  carousalDialogVisible.value = false
}
</script>

<template>
  <RegularPage title="轮播图管理">
    <template #right-area>
      <TButton @click="handleCreateCarousal">创建轮播图</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 #imageUrl="{row}">
        <div class="tdesign-demo-image-viewer__base">
          <t-image-viewer :images="[row.imageUrl]">
            <template #trigger="{ open }">
              <div class="tdesign-demo-image-viewer__ui-image">
                <img alt="test" :src="row.imageUrl" class="tdesign-demo-image-viewer__ui-image--img" />
                <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                  <span><BrowseIcon size="1.4em" /> 预览</span>
                </div>
              </div>
            </template>
          </t-image-viewer>
        </div>
      </template>
      <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>
        <TButton variant="text" size="small" theme="danger" @click="delClick(row)">删除</TButton>
      </template>
    </TTable>
    <CarousalDialog
      :carousal="currentTableData"
      v-model:visible="carousalDialogVisible"
      :isEdit="isEdit"
      @success="handleSuccessDialog"
      headerTitle="轮播图"
    ></CarousalDialog>
  </RegularPage>
</template>

<style scoped>
:deep(.t-card__body) {
  flex: 1;
  min-height: 0;
}
.tdesign-demo-image-viewer__ui-image {
  width: 100%;
  height: 100%;
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: var(--td-radius-small);
  overflow: hidden;
}

.tdesign-demo-image-viewer__ui-image--hover {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--td-text-color-anti);
  line-height: 22px;
  transition: 0.2s;
}

.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
  opacity: 1;
  cursor: pointer;
}

.tdesign-demo-image-viewer__ui-image--img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
  position: absolute;
}


.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
  cursor: pointer;
}

.tdesign-demo-image-viewer__base {
  width: 100px;
  height: 100px;
  border: 4px solid var(--td-bg-color-secondarycontainer);
  border-radius: var(--td-radius-medium);
}
</style>