feat(F006): label mgmt connect real backend type=7

2026-08-22 16:57:06 +08:00 · 2026-08-22 16:57:06 +08:00 · 9d219904b7
commit 9d219904b7
parent 6571eadc20
1 changed files with 253 additions and 108 deletions
--- a/src/modules/other/label/LabelListView.vue
+++ b/src/modules/other/label/LabelListView.vue
@ -1,106 +1,217 @@
 <script setup lang="ts">
 /**
- * F006 标签管理 - W10 A1 标准化
+ * F006 标签管理 - 树形增删改完整版 (2026-08-22)
 *
- * W10 A1: 套 PageHeader/SearchBar 标准化模板
+ * 沿用 CategoryDeepListView 范式 + 老后台 other/label.vue 字段
+ * 后端 type=7 (商品标签), 共用 tb_category 表 + ApiCategoryController
 *
- * 沿用老 vue other/label.vue 173 行:
- *   - 搜索: 标签名
- *   - 表格列: ID (自增序号) / 标签名 / 创建时间 / 状态 (启用/禁用)
- *   - 操作: 修改 / 启用禁用 / 删除
- *   - 树形结构 (children)
- *   - 增改弹窗
+ * 后端端点:
+ *   GET  /other/category/list?type=7     平铺, 前端按 pid 组装树
+ *   POST /other/category/save              新增
+ *   POST /other/category/update             修改
+ *   GET  /other/category/delete?id=         递归删子级 (GET!)
+ *   POST /other/category/enabled?id=        启用/禁用
 *
- * 字段: id/name/status/createDate
+ * 老后台 URL: /vue/statistics/index-town#/other/label (W10 之前的页)
 */
-import { ref, onMounted, reactive } from 'vue'
+import { onMounted, ref, reactive, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { httpGet } from '@/utils/request'
-import DataTable from '@/components/DataTable/DataTable.vue'
+import { Plus } from '@element-plus/icons-vue'
+import { httpGet, httpPost } from '@/utils/request'
 import PageHeader from '@/components/PageHeader/PageHeader.vue'
-import SearchBar from '@/components/SearchBar/SearchBar.vue'
+import SearchBar, { type SearchField } from '@/components/SearchBar/SearchBar.vue'
+import DataTable from '@/components/DataTable/DataTable.vue'
 import TableActions from '@/components/TableActions/TableActions.vue'

 interface Label {
  id: string
  name: string
+  level: number
+  pid: string
+  sort: number
  status: number
  createDate: string
  children?: Label[]
-  raw: any
 }

-const STATUS_MAP: Record<number, { label: string; type: string }> = {
-  0: { label: '启用', type: 'success' },
-  1: { label: '禁用', type: 'danger' }
+// 标签类型固定为 7 (商品标签), 与老后台一致
+const LABEL_TYPE = 7
+
+const STATUS_META: Record<number, { label: string; color: string; bg: string }> = {
+  0: { label: '启用', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
+  1: { label: '禁用', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
 }
+function fmtDate(d: string | null | undefined): string {
+  if (!d) return '--'
+  return String(d).slice(0, 19).replace('T', ' ')
+}
+function statMeta(s: number) { return STATUS_META[s] ?? STATUS_META[0] }

-const FALLBACK: Label[] = [
-  { id: '1', name: '热销', status: 0, createDate: '2026-07-01 10:00:00', raw: {} },
-  { id: '2', name: '新品', status: 0, createDate: '2026-07-01 10:01:00', raw: {} },
-  { id: '3', name: '推荐', status: 0, createDate: '2026-07-01 10:02:00', raw: {} },
-  { id: '4', name: '限时', status: 0, createDate: '2026-07-02 09:00:00', raw: {} },
-  { id: '5', name: '满减', status: 0, createDate: '2026-07-02 09:01:00', raw: {} },
-  { id: '6', name: '包邮', status: 0, createDate: '2026-07-03 14:00:00', raw: {} },
-  { id: '7', name: '正品', status: 0, createDate: '2026-07-03 14:01:00', raw: {} },
-  { id: '8', name: '进口', status: 1, createDate: '2026-07-04 11:00:00', raw: {} }
-]
-
-const list = ref<Label[]>([])
-const total = ref(0)
+const LIST = ref<Label[]>([])
 const loading = ref(false)
-const error = ref<string | null>(null)
-const page = ref(1)
-const limit = ref(20)
-const filters = reactive({ name: '' })
+const dataSource = ref<'api' | 'mock' | 'loading'>('loading')
+const apiError = ref<string>('')
+const search = reactive({ name: '' })
+const selection = ref<Label[]>([])

-const detailVisible = ref(false)
-const detailData = ref<Label | null>(null)
-const editVisible = ref(false)
-const editMode = ref<'add' | 'edit'>('add')
-const editForm = reactive<Label>({ id: '', name: '', status: 0, createDate: '', raw: {} })
+// 树形过滤 (按名称关键字, 保留命中节点及其父链)
+function filterTree(nodes: Label[], kw: string): Label[] {
+  if (!kw) return nodes
+  const out: Label[] = []
+  for (const n of nodes) {
+    const matched = (n.name ?? '').includes(kw)
+    const children = filterTree(n.children || [], kw)
+    if (matched || children.length) out.push({ ...n, children })
+  }
+  return out
+}
+const displayList = computed(() => filterTree(LIST.value, (search.name || '').trim()))
+
+// 顶部统计
+const stats = computed(() => {
+  const total = LIST.value.length
+  const enabled = LIST.value.filter(n => n.status === 0).length
+  const disabled = LIST.value.filter(n => n.status === 1).length
+  let maxLen = 0
+  const walk = (ns: Label[]) => {
+    for (const n of ns) {
+      if ((n.name || '').length > maxLen) maxLen = n.name.length
+      if (n.children?.length) walk(n.children)
+    }
+  }
+  walk(LIST.value)
+  return [
+    { label: '标签总数', value: total, icon: 'CollectionTag', color: 'var(--brand)' },
+    { label: '已启用', value: enabled, icon: 'CircleCheck', color: 'var(--green)' },
+    { label: '已禁用', value: disabled, icon: 'CircleClose', color: 'var(--red)' },
+    { label: '最长名称', value: maxLen ? `${maxLen}字` : '--', icon: 'Histogram', color: 'var(--amber)' }
+  ]
+})

 async function load() {
-  loading.value = true
-  error.value = null
+  loading.value = true; dataSource.value = 'loading'
  try {
-    // /other/label/page 后端 404, 用 FALLBACK
-    await new Promise(r => setTimeout(r, 200))
-    let rows = [...FALLBACK]
-    if (filters.name) rows = rows.filter(r => r.name.includes(filters.name))
-    list.value = rows.map((r, i) => ({ ...r, _index: i + 1 }))
-    total.value = rows.length
+    const r: any = await httpGet('/other/category/list', { type: LABEL_TYPE })
+    const flat: any[] = r?.list || (Array.isArray(r) ? r : [])
+    LIST.value = buildTree(flat)
+    dataSource.value = 'api'; apiError.value = ''
  } catch (e: any) {
-    error.value = e?.msg || e?.message || '加载失败'
-    list.value = FALLBACK.map((r, i) => ({ ...r, _index: i + 1 }))
-    total.value = FALLBACK.length
+    dataSource.value = 'mock'
+    apiError.value = e?.msg || e?.message || '后端 API 暂未实装, 已加载前端示例数据'
+    LIST.value = []
  } finally { loading.value = false }
 }

-function onSearch() { page.value = 1; load() }
-function onReset() { filters.name = ''; load() }
-function onPageChange(p: number) { page.value = p; load() }
-function onLimitChange(l: number) { limit.value = l; load() }
-function onAdd() { editMode.value = 'add'; editForm.id = ''; editForm.name = ''; editForm.status = 0; editForm.createDate = ''; editVisible.value = true }
-function onEdit(row: Label) { editMode.value = 'edit'; Object.assign(editForm, JSON.parse(JSON.stringify(row))); editVisible.value = true }
-function onSubmitEdit() {
-  if (!editForm.name.trim()) { ElMessage.warning('请填写标签名'); return }
-  ElMessage.success(editMode.value === 'add' ? '新增成功 (mock)' : '修改成功 (mock)')
+// 按 pid 组装树 (孤立节点挂根), 按 sort 升序
+function buildTree(flat: any[]): Label[] {
+  const map = new Map<string, any>()
+  flat.forEach((n: any) => map.set(String(n.id), { ...n, children: [] }))
+  const roots: any[] = []
+  for (const n of flat) {
+    const node = map.get(String(n.id))
+    const pid = String(n.pid ?? '0')
+    const parent = pid === '0' ? null : map.get(pid)
+    if (parent) parent.children.push(node)
+    else roots.push(node)
+  }
+  const sortRec = (ns: any[]) => {
+    ns.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))
+    ns.forEach((n) => sortRec(n.children || []))
+  }
+  sortRec(roots)
+  return roots
+}
+
+const searchFields: SearchField[] = [
+  { key: 'name', label: '标签名称', type: 'text', placeholder: '请输入标签名' }
+]
+
+const columns = [
+  { prop: 'name', label: '标签名称', minWidth: 200 },
+  { prop: 'createDate', label: '创建时间', minWidth: 170, slot: 'createTime' },
+  { prop: 'status', label: '状态', width: 110, slot: 'status', align: 'center' as const },
+  { label: '操作', width: 200, slot: 'actions', fixed: 'right' as const, align: 'center' as const }
+]
+
+function onSelectionChange(rows: Label[]) { selection.value = rows }
+function onSearchClick() { /* 搜索通过 reactive 触发 computed filter, 无需重 load */ }
+function onReset() { search.name = '' }
+
+// ============ 增改弹窗 ============
+const editVisible = ref(false)
+const editMode = ref<'add' | 'edit'>('add')
+const editForm = reactive<{ id: string; name: string; status: number }>({ id: '', name: '', status: 0 })
+
+function onAdd() { editMode.value = 'add'; editForm.id = ''; editForm.name = ''; editForm.status = 0; editVisible.value = true }
+function onEdit(row: Label) {
+  editMode.value = 'edit'
+  editForm.id = String(row.id)
+  editForm.name = row.name ?? ''
+  editForm.status = row.status ?? 0
+  editVisible.value = true
+}
+async function onSubmitEdit() {
+  const name = editForm.name.trim()
+  if (!name) { ElMessage.warning('请填写标签名称'); return }
+  if (name.length > 30) { ElMessage.warning('标签名称不能超过 30 个字符'); return }
+  const payload = editMode.value === 'add'
+    ? { type: LABEL_TYPE, name, status: editForm.status, pid: '0', level: 1 }
+    : { id: editForm.id, type: LABEL_TYPE, name, status: editForm.status }
+  try {
+    await httpPost(editMode.value === 'add' ? '/other/category/save' : '/other/category/update', payload)
+    ElMessage.success(editMode.value === 'add' ? '新增成功' : '修改成功')
    editVisible.value = false
    load()
+  } catch (e: any) { ElMessage.error(e?.msg || e?.message || '操作失败') }
 }
-function onToggleStatus(row: Label) {
-  const newStatus = row.status === 0 ? 1 : 0
-  ElMessageBox.confirm(`确认${newStatus === 0 ? '启用' : '禁用'}「${row.name}」?`, '提示', { type: 'warning' }).then(() => {
-    ElMessage.success(`${newStatus === 0 ? '启用' : '禁用'}成功 (mock)`)
+
+// ============ 启/禁用 ============
+async function toggleStatus(row: Label) {
+  const disabling = row.status === 0
+  try {
+    await ElMessageBox.confirm(
+      `${disabling ? '禁用' : '启用'}「${row.name}」?${disabling ? '禁用后该标签将不对外展示' : ''}`,
+      '操作确认', { type: 'warning' }
+    )
+  } catch { return }
+  try {
+    await httpPost(`/other/category/enabled?id=${row.id}`)
+    ElMessage.success(disabling ? '已停用' : '已启用')
    load()
-  }).catch(() => {})
+  } catch (e: any) { ElMessage.error(e?.msg || e?.message || '操作失败') }
 }
-function onDelete(row: Label) {
-  ElMessageBox.confirm(`确认删除「${row.name}」?`, '提示', { type: 'warning' }).then(() => {
-    ElMessage.success('已删除 (mock)')
+
+// ============ 删除 (递归) ============
+async function onDelete(row: Label) {
+  const hasChild = row.children?.length
+  try {
+    await ElMessageBox.confirm(
+      `确认删除「${row.name}」?${hasChild ? `该标签下有 ${row.children!.length} 个子标签, 将一并删除!` : '删除后不可恢复。'}`,
+      '删除确认', { type: 'warning' }
+    )
+  } catch { return }
+  try {
+    await httpGet('/other/category/delete', { id: row.id })
+    ElMessage.success('已删除')
+    selection.value = []
+    load()
+  } catch (e: any) { ElMessage.error(e?.msg || e?.message || '删除失败') }
+}
+
+async function onBatchDelete() {
+  if (!selection.value.length) return
+  await ElMessageBox.confirm(
+    `确认批量删除选中的 ${selection.value.length} 个标签?子标签也会被一并删除!`,
+    '批量删除', { type: 'warning' }
+  ).catch(() => {})
+  // 后端 /delete 不支持批量, 循环删除
+  let ok = 0
+  for (const row of selection.value) {
+    try { await httpGet('/other/category/delete', { id: row.id }); ok++ } catch {}
+  }
+  ElMessage.success(`已批量删除 ${ok} 条`)
+  selection.value = []
  load()
-  }).catch(() => {})
 }

 onMounted(load)
@ -108,63 +219,78 @@ onMounted(load)

 <template>
  <div class="rr-page">
-    <PageHeader title="标签管理" :sub="`商品/活动/服务标签分类管理 (共 ${total} 个)`">
-      <el-button type="primary" @click="onAdd">新增标签</el-button>
+    <PageHeader title="标签管理" sub="商品/活动/服务标签分类管理" :data-source="dataSource" :api-error="apiError">
+      <el-button type="primary" @click="onAdd">
+        <el-icon style="margin-right:4px"><Plus /></el-icon>新增标签
+      </el-button>
    </PageHeader>

+    <!-- 顶部统计卡 -->
+    <div class="stats-grid">
+      <div v-for="(s, i) in stats" :key="i" class="stat-card">
+        <div class="stat-icon" :style="{ color: s.color, background: 'var(--brand-soft)' }">
+          <el-icon><component :is="s.icon" /></el-icon>
+        </div>
+        <div class="stat-info">
+          <div class="stat-label">{{ s.label }}</div>
+          <div class="stat-value">{{ s.value }}</div>
+        </div>
+      </div>
+    </div>
+
    <SearchBar
-      v-model:filters="filters"
-      :fields="[
-        { key: 'name', label: '标签名称', type: 'text', placeholder: '请输入标签名' }
-      ]"
-      @search="onSearch"
+      v-model:filters="search"
+      :fields="searchFields"
+      @search="onSearchClick"
      @reset="onReset"
    />

-    <div class="rr-card">
+    <div class="rr-list-card">
+      <!-- 批量操作栏 -->
+      <div class="batch-bar" :class="{ 'has-selection': selection.length > 0 }">
+        <span v-if="selection.length > 0" class="batch-count">已选 <strong>{{ selection.length }}</strong> 个标签</span>
+        <span v-else class="batch-hint">勾选后可批量删除</span>
+        <div class="batch-actions">
+          <el-button size="small" type="danger" plain :disabled="!selection.length" @click="onBatchDelete">批量删除</el-button>
+        </div>
+      </div>
+
      <DataTable
-        :columns="[
-          { prop: 'name', label: '标签名称', minWidth: 200 },
-          { prop: 'createDate', label: '创建时间', width: 180 },
-          { prop: 'status', label: '状态', width: 100, slot: 'status' },
-          { label: '操作', width: 140, align: 'center', slot: 'action' }
-        ]"
-        :data="list"
+        :columns="columns"
+        :data="displayList"
        :loading="loading"
-        :total="total"
-        :page="page"
-        :limit="limit"
-        :show-pagination="total > 10"        :page-sizes="[10, 20, 50, 100]"
-        :error="error"
-        empty-text="暂无标签"
-        borderless
        row-key="id"
-        @page-change="onPageChange"
-        @limit-change="onLimitChange"
+        borderless
+        empty-text="暂无标签"
+        :show-pagination="false"
+        :default-expand-all="false"
      >
        <template #status="{ row }">
-          <el-tag :type="(STATUS_MAP[row.status]?.type as any)" size="small" effect="light">
-            {{ STATUS_MAP[row.status]?.label }}
-          </el-tag>
+          <span class="st-pill" :style="{ color: statMeta(row.status).color, background: statMeta(row.status).bg }">
+            <span class="st-dot"></span>{{ statMeta(row.status).label }}
+          </span>
        </template>
-        <template #action="{ row }">
+        <template #createTime="{ row }">
+          {{ fmtDate(row.createDate) }}
+        </template>
+        <template #actions="{ row }">
          <TableActions
            :row="row"
            :actions="[
              { label: '修改', type: 'primary', onClick: onEdit },
-              { label: (r: any) => r.status === 0 ? '禁用' : '启用', type: (r: any) => r.status === 0 ? 'warning' : 'success', onClick: onToggleStatus },
-              { label: '删除', type: 'danger', onClick: onDelete }
+              { label: row.status === 0 ? '禁用' : '启用', type: row.status === 0 ? 'warning' : 'success', onClick: toggleStatus },
+              { label: '删除', type: 'danger', divided: true, onClick: onDelete }
            ]"
          />
        </template>
      </DataTable>
    </div>

-    <!-- 增改弹窗 -->
-    <el-dialog v-model="editVisible" :title="editMode === 'add' ? '新增标签' : '修改标签'" width="500px">
-      <el-form label-width="100px">
+    <!-- 新增/修改 弹窗 -->
+    <el-dialog v-model="editVisible" :title="editMode === 'add' ? '新增标签' : '修改标签'" width="500px" :close-on-click-modal="false" destroy-on-close>
+      <el-form label-width="100px" label-position="right">
        <el-form-item label="标签名称" required>
-          <el-input v-model="editForm.name" placeholder="请输入标签名" maxlength="20" show-word-limit />
+          <el-input v-model="editForm.name" placeholder="请输入标签名称" maxlength="30" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="editForm.status">
@ -182,5 +308,24 @@ onMounted(load)
 </template>

 <style scoped lang="scss">
-.rr-page { max-width: 1400px; }
+/* 顶部统计卡 */
+.stats-grid {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
+  margin-bottom: 16px;
+}
+.stat-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 16px 18px;
+  display: flex; align-items: center; gap: 12px;
+  transition: all .15s;
+  &:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
+}
+.stat-icon {
+  width: 40px; height: 40px; border-radius: 10px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 20px;
+}
+.stat-info { flex: 1; min-width: 0; }
+.stat-label { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
+.stat-value { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
 </style>