admin模块接入数据库

pages/mall/admin/product/labels/index.uvue

@@ -118,73 +118,169 @@ class="group-item"
 </template>
 
 <script setup lang="uts">
-import { ref, reactive, computed } from 'vue'
-
-interface Label {
-id: number;
-name: string;
-groupId: number;
-status: boolean;
-showInMobile: boolean;
-}
-
-interface Group {
-id: number;
-name: string;
-}
-
-const groups = reactive<Group[]>([
-{ id: 0, name: '全部' } as Group,
-{ id: 1, name: '商务礼品专题' } as Group,
-{ id: 2, name: '员工福利' } as Group,
-{ id: 3, name: '主题' } as Group
-])
-
-const labels = reactive<Label[]>([
-{ id: 1, name: '外事礼品', groupId: 1, status: true, showInMobile: true } as Label,
-{ id: 2, name: '会议庆典', groupId: 1, status: true, showInMobile: true } as Label,
-{ id: 3, name: '入职纪念', groupId: 2, status: true, showInMobile: true } as Label,
-{ id: 4, name: '员工激励', groupId: 2, status: true, showInMobile: true } as Label,
-{ id: 5, name: '员工生日', groupId: 2, status: true, showInMobile: true } as Label,
-{ id: 6, name: '三八妇女节', groupId: 3, status: true, showInMobile: true } as Label,
-{ id: 7, name: '新春快乐', groupId: 3, status: true, showInMobile: true } as Label
-])
+import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { 
+  fetchLabelGroups, saveLabelGroup, deleteLabelGroup, 
+  fetchLabels, saveLabel, deleteLabel,
+  ProductLabelGroup, ProductLabel 
+} from '@/services/admin/productLabelService.uts'
 
+const groups = ref<ProductLabelGroup[]>([])
+const labels = ref<ProductLabel[]>([])
+const isLoading = ref(false)
 const activeGroupIndex = ref(0)
 
-const filteredLabels = computed((): Label[] => {
-const activeGroup = groups[activeGroupIndex.value]
-if (activeGroupIndex.value === 0) return labels
-return labels.filter((l: Label): boolean => l.groupId === activeGroup.id)
+const activeGroupId = computed((): string | null => {
+  if (groups.value.length === 0) return null
+  return groups.value[activeGroupIndex.value]?.id ?? null
 })
 
+const filteredLabels = computed((): ProductLabel[] => {
+  // 方案 B：全部是真实分组，所以直接根据 activeGroupId 过滤
+  // 如果当前选中的是“全部”组，则展示该组下的标签（或根据业务逻辑展示所有）
+  const gid = activeGroupId.value
+  if (gid == null) return [] as ProductLabel[]
+  
+  // 如果“全部”组的名称确实是“全部”，且业务逻辑是展示所有标签：
+  if (groups.value[activeGroupIndex.value]?.name === '全部') {
+    return labels.value
+  }
+  
+  return labels.value.filter((l: ProductLabel): boolean => l.group_id === gid)
+})
+
+onMounted(() => {
+  initData()
+})
+
+async function initData() {
+  isLoading.value = true
+  try {
+    // 1. 加载分组
+    const groupRes = await fetchLabelGroups()
+    groups.value = groupRes
+    
+    // 如果没有任何分组（包括“全部”），则尝试初始化一个
+    if (groups.value.length === 0) {
+      await saveLabelGroup({ name: '全部', sort_order: 0 } as ProductLabelGroup)
+      const retryGroups = await fetchLabelGroups()
+      groups.value = retryGroups
+    }
+
+    // 2. 加载所有标签
+    const labelRes = await fetchLabels()
+    labels.value = labelRes
+  } catch (e) {
+    uni.showToast({ title: '初始化失败', icon: 'none' })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 刷新标签列表
+async function refreshLabels() {
+  const res = await fetchLabels()
+  labels.value = res
+}
+
 // Drawer logic
 const showDrawerMask = ref(false)
 const showDrawer = ref(false)
+const isEditLabel = ref(false)
+const editingLabelId = ref<string | null>(null)
 const labelForm = reactive({ name: '' })
 
-function openLabelDrawer(label: Label | null = null) {
-if (label) { labelForm.name = label.name } else { labelForm.name = '' }
-showDrawerMask.value = true
-setTimeout(() => {
-showDrawer.value = true
-}, 50)
+function openLabelDrawer(label: ProductLabel | null = null) {
+  if (label != null) { 
+    isEditLabel.value = true
+    editingLabelId.value = label.id ?? null
+    labelForm.name = label.name 
+  } else { 
+    isEditLabel.value = false
+    editingLabelId.value = null
+    labelForm.name = '' 
+  }
+  showDrawerMask.value = true
+  setTimeout(() => {
+    showDrawer.value = true
+  }, 50)
 }
 
 function closeLabelDrawer() {
-showDrawer.value = false
-setTimeout(() => {
-showDrawerMask.value = false
-}, 300)
+  showDrawer.value = false
+  setTimeout(() => {
+    showDrawerMask.value = false
+  }, 300)
+}
+
+async function handleSaveLabel() {
+  if (!labelForm.name) {
+    uni.showToast({ title: '请输入名称', icon: 'none' })
+    return
+  }
+  
+  const gid = activeGroupId.value
+  if (gid == null) return
+
+  const labelData: ProductLabel = {
+    id: editingLabelId.value ?? undefined,
+    name: labelForm.name,
+    group_id: gid,
+    is_active: true,
+    show_in_mobile: true,
+    sort_order: 0
+  }
+
+  const success = await saveLabel(labelData)
+  if (success) {
+    uni.showToast({ title: '保存成功' })
+    closeLabelDrawer()
+    refreshLabels()
+  }
+}
+
+async function onToggleStatus(label: ProductLabel) {
+  const updated = { ...label, is_active: !label.is_active } as ProductLabel
+  await saveLabel(updated)
+  refreshLabels()
+}
+
+async function onToggleMobile(label: ProductLabel) {
+  const updated = { ...label, show_in_mobile: !label.show_in_mobile } as ProductLabel
+  await saveLabel(updated)
+  refreshLabels()
+}
+
+async function deleteLabelItem(label: ProductLabel) {
+  if (label.id == null) return
+  uni.showModal({
+    title: '提示',
+    content: '确定删除该标签吗？',
+    success: async (res) => {
+      if (res.confirm) {
+        const success = await deleteLabel(label.id!)
+        if (success) {
+          uni.showToast({ title: '删除成功' })
+          refreshLabels()
+        }
+      }
+    }
+  })
 }
 
 function openGroupModal() {
-uni.showToast({ title: '添加分组功能已模拟', icon: 'none' })
-}
-
-function deleteLabel(label: Label) {
-const idx = labels.indexOf(label)
-if (idx > -1) { labels.splice(idx, 1) }
+  uni.showModal({
+    title: '添加分组',
+    editable: true,
+    placeholderText: '请输入分组名称',
+    success: async (res) => {
+      if (res.confirm && res.content) {
+        await saveLabelGroup({ name: res.content, sort_order: groups.value.length } as ProductLabelGroup)
+        const groupRes = await fetchLabelGroups()
+        groups.value = groupRes
+      }
+    }
+  })
 }
 </script>