更新后台管理系统，实现团课管理基础显示

2026-07-06 16:44:27 +08:00
parent efd4d03037
commit 1e41f31271
6 changed files with 1389 additions and 0 deletions
@@ -0,0 +1,227 @@
+<template>
+  <div class="course-label-management">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="search-section">
+            <el-input
+              v-model="searchKeyword"
+              placeholder="搜索标签名称"
+              clearable
+              style="width: 240px"
+              @clear="handleSearch"
+              @keyup.enter="handleSearch"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+            <el-button type="primary" @click="handleSearch">
+              搜索
+            </el-button>
+          </div>
+          <el-button type="primary" @click="handleAdd">
+            新增标签
+          </el-button>
+        </div>
+      </template>
+      <el-table
+        v-loading="loading"
+        :data="dataSource"
+        style="width: 100%"
+      >
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="labelName" label="标签名称" min-width="140">
+          <template #default="{ row }">
+            <el-tag
+              :color="row.color"
+              effect="dark"
+              style="font-weight: 500; font-size: 14px; border-color: transparent;"
+            >
+              {{ row.labelName }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="color" label="颜色" width="100">
+          <template #default="{ row }">
+            <div style="display: flex; align-items: center; gap: 6px;">
+              <span
+                :style="{
+                  display: 'inline-block',
+                  width: '16px',
+                  height: '16px',
+                  borderRadius: '4px',
+                  backgroundColor: row.color,
+                  border: '1px solid #ddd',
+                }"
+              />
+              <span>{{ row.color }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+        <el-table-column label="操作" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="handleEdit(row)">
+              编辑
+            </el-button>
+            <el-button type="danger" link size="small" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+    >
+      <el-form
+        ref="formRef"
+        :model="formState"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item label="标签名称" prop="labelName">
+          <el-input v-model="formState.labelName" placeholder="请输入标签名称" />
+        </el-form-item>
+        <el-form-item label="标签颜色" prop="color">
+          <el-color-picker v-model="formState.color" show-alpha />
+          <span style="margin-left: 8px; color: #909399;">{{ formState.color }}</span>
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input
+            v-model="formState.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入标签描述"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleModalOk">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+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'
+
+const loading = ref(false)
+const dataSource = ref<CourseLabel[]>([])
+const searchKeyword = ref('')
+
+const modalVisible = ref(false)
+const modalTitle = ref('')
+const formRef = ref()
+const formState = reactive<CourseLabel>({
+  labelName: '',
+  color: '#1890ff',
+  description: '',
+})
+
+const formRules = {
+  labelName: [
+    { required: true, message: '请输入标签名称', trigger: 'blur' },
+    { min: 2, max: 50, message: '标签名称长度在 2 到 50 个字符', trigger: 'blur' },
+  ],
+  color: [{ required: true, message: '请选择标签颜色', trigger: 'change' }],
+}
+
+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())
+      )
+    }
+  } catch {
+    ElMessage.error('加载数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSearch = () => fetchData()
+
+const handleAdd = () => {
+  modalTitle.value = '新增标签'
+  Object.assign(formState, {
+    id: undefined,
+    labelName: '',
+    color: '#1890ff',
+    description: '',
+  })
+  modalVisible.value = true
+}
+
+const handleEdit = (row: CourseLabel) => {
+  modalTitle.value = '编辑标签'
+  Object.assign(formState, { ...row })
+  modalVisible.value = true
+}
+
+const handleDelete = async (row: CourseLabel) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该标签吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    await courseLabelApi.delete(row.id!)
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+const handleModalOk = async () => {
+  if (!formRef.value) return
+  try {
+    await formRef.value.validate()
+    if (formState.id) {
+      await courseLabelApi.update(formState.id, formState)
+    } else {
+      await courseLabelApi.create(formState)
+    }
+    ElMessage.success('操作成功')
+    modalVisible.value = false
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('操作失败')
+    }
+  }
+}
+
+onMounted(() => fetchData())
+</script>
+
+<style scoped lang="css">
+.course-label-management {
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+
+    .search-section {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+  }
+}
+</style>