完善团课相关管理

gym-manage-web/src/views/groupcourse/CourseLabelManagement.vue

@@ -71,6 +71,17 @@
           </template>
         </el-table-column>
       </el-table>
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        style="margin-top: 16px; justify-content: flex-end"
+        @size-change="onSizeChange"
+        @current-change="onPageChange"
+      />
     </el-card>
 
     <el-dialog
@@ -112,12 +123,16 @@
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Search } from '@element-plus/icons-vue'
-import { courseLabelApi, type CourseLabel } from '@/api/groupCourse.api'
+import { courseLabelApi, type CourseLabel, type CourseLabelPageRequest } from '@/api/groupCourse.api'
 
 const loading = ref(false)
 const dataSource = ref<CourseLabel[]>([])
 const searchKeyword = ref('')
 
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
 const modalVisible = ref(false)
 const modalTitle = ref('')
 const formRef = ref()
@@ -138,12 +153,17 @@ const formRules = {
 const fetchData = async () => {
   loading.value = true
   try {
-    dataSource.value = await courseLabelApi.getAll()
-    if (searchKeyword.value) {
-      dataSource.value = dataSource.value.filter((item) =>
-        item.labelName.toLowerCase().includes(searchKeyword.value.toLowerCase())
-      )
+    const params: CourseLabelPageRequest = {
+      page: currentPage.value - 1,
+      size: pageSize.value,
+      sort: 'id',
+      order: 'asc',
     }
+    if (searchKeyword.value) params.keyword = searchKeyword.value
+
+    const res = await courseLabelApi.getPage(params)
+    dataSource.value = res.content
+    total.value = Number(res.totalElements)
   } catch {
     ElMessage.error('加载数据失败')
   } finally {
@@ -151,7 +171,16 @@ const fetchData = async () => {
   }
 }
 
-const handleSearch = () => fetchData()
+const onPageChange = () => fetchData()
+const onSizeChange = () => {
+  currentPage.value = 1
+  fetchData()
+}
+
+const handleSearch = () => {
+  currentPage.value = 1
+  fetchData()
+}
 
 const handleAdd = () => {
   modalTitle.value = '新增标签'
@@ -191,10 +220,15 @@ const handleModalOk = async () => {
   if (!formRef.value) return
   try {
     await formRef.value.validate()
+    // Convert RGBA to hex before submitting
+    const data = { ...formState }
+    if (data.color?.startsWith('rgba')) {
+      data.color = rgbaToHex(data.color)
+    }
     if (formState.id) {
-      await courseLabelApi.update(formState.id, formState)
+      await courseLabelApi.update(formState.id, data)
     } else {
-      await courseLabelApi.create(formState)
+      await courseLabelApi.create(data)
     }
     ElMessage.success('操作成功')
     modalVisible.value = false
@@ -206,6 +240,19 @@ const handleModalOk = async () => {
   }
 }
 
+/** Convert rgba(r, g, b, a) to #rrggbb or #rrggbbaa hex */
+const rgbaToHex = (rgba: string): string => {
+  const match = rgba.match(/[\d.]+/g)
+  if (!match || match.length < 3) return rgba
+  const r = parseInt(match[0])
+  const g = parseInt(match[1])
+  const b = parseInt(match[2])
+  const a = match.length >= 4 ? Math.round(parseFloat(match[3]) * 255) : 255
+  const toHex = (n: number) => n.toString(16).padStart(2, '0')
+  const hex = `#${toHex(r)}${toHex(g)}${toHex(b)}`
+  return a < 255 ? `${hex}${toHex(a)}` : hex
+}
+
 onMounted(() => fetchData())
 </script>