新增bannert图显示状态tag

src/api/carousal.ts

@@ -20,10 +20,10 @@ export const deleteCarousal = (id:number) => {
   return httpClient.delete(`/carousals/${id}`)
 }
 
-export const activeCarousal = (id:number) => {
+export const activeCarousal = (id: { id: string | number }) => {
   return httpClient.put(`/carousals/${id}/active`)
 }
 
-export const inactiveCarousal = (id:number) => {
+export const inactiveCarousal = (id: { id: string | number }) => {
   return httpClient.put(`/carousals/${id}/inactive`)
 }

src/pages/carousal/components/CarousalDialog.vue

@@ -37,6 +37,7 @@ const props = defineProps<{
   isEdit?: Boolean | null
   headerTitle?: String | null
   classify: Classify | {}
+  count:number
 }>()
 const form = ref<FormInstanceFunctions | null>(null)
 const header = computed(() => `${props.isEdit ? '编辑' : '创建'}${props.headerTitle || ''}`)
@@ -142,8 +143,12 @@ watch(
   () => props.classify,
   (newClassify) => {
     Object.assign(carousalData, newClassify)
+    console.log(carousalData)
+  },
+  {
+    deep: true,
+    immediate: true
   },
-  { deep: true }
 )
 const fetchSaveClassifyData = async () => {
   /* TODO: 保存分类数据 */

src/pages/carousal/index.vue

@@ -4,7 +4,7 @@ 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 { getCarousalList } from '@/api/carousal'
+import { activeCarousal, getCarousalList, inactiveCarousal } from '@/api/carousal'
 
 const columns: BaseTableColumns = [
   {
@@ -20,7 +20,7 @@ const columns: BaseTableColumns = [
   {
     title: '显示状态',
     colKey: 'status',
-    width: 100
+    width: 100,
   },
   {
     title: '操作',
@@ -39,7 +39,7 @@ const query = reactive({
   page:1,
   size:10,
 })
-const classifyDialogVisible = ref(false)
+const carousalDialogVisible = ref(false)
 const isEdit = ref(false)
 const currentTableData = ref<{}>({})
 const fetchClassifyTableData = async () => {
@@ -47,16 +47,23 @@ const fetchClassifyTableData = async () => {
   query.page = pagination.page
   query.size = pagination.size
   const getCarousalListApi = await getCarousalList(query)
-  currentTableData.value = getCarousalListApi.data
+  data.value = getCarousalListApi.data
   pagination.total = getCarousalListApi.pagination.total
 }
 onMounted(fetchClassifyTableData)
-const editClick = (classify: Classify) => {
+const editClick = (row:object) => {
   isEdit.value = true
-  currentTableData.value = classify
-  console.log(classify)
-
-  classifyDialogVisible.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: 分页切换 */
@@ -66,7 +73,7 @@ const onPageChange = () => {
 <template>
   <RegularPage title="轮播图管理">
     <template #right-area>
-      <TButton @click="classifyDialogVisible = true">创建轮播图</TButton>
+      <TButton @click="carousalDialogVisible = true">创建轮播图</TButton>
     </template>
     <TTable
       class="w-full h-full"
@@ -85,6 +92,11 @@ const onPageChange = () => {
         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">{{
@@ -94,11 +106,12 @@ const onPageChange = () => {
       </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="classifyDialogVisible"
+      v-model:visible="carousalDialogVisible"
       :isEdit="isEdit"
       headerTitle="轮播图"
     ></ClassifyDialog>