admin_new/src/modules/other/label/LabelListView.vue

<script setup lang="ts">
/**
 * F006 标签管理 - W10 A1 标准化
 *
 * W10 A1: 套 PageHeader/SearchBar 标准化模板
 *
 * 沿用老 vue other/label.vue 173 行:
 *   - 搜索: 标签名
 *   - 表格列: ID (自增序号) / 标签名 / 创建时间 / 状态 (启用/禁用)
 *   - 操作: 修改 / 启用禁用 / 删除
 *   - 树形结构 (children)
 *   - 增改弹窗
 *
 * 字段: id/name/status/createDate
 */
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { httpGet } from '@/utils/request'
import DataTable from '@/components/DataTable/DataTable.vue'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
import TableActions from '@/components/TableActions/TableActions.vue'

interface Label {
  id: string
  name: string
  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' }
}

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 loading = ref(false)
const error = ref<string | null>(null)
const page = ref(1)
const limit = ref(20)
const filters = reactive({ name: '' })

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: {} })

async function load() {
  loading.value = true
  error.value = null
  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
  } catch (e: any) {
    error.value = e?.msg || e?.message || '加载失败'
    list.value = FALLBACK.map((r, i) => ({ ...r, _index: i + 1 }))
    total.value = FALLBACK.length
  } 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)')
  editVisible.value = false
  load()
}
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)`)
    load()
  }).catch(() => {})
}
function onDelete(row: Label) {
  ElMessageBox.confirm(`确认删除「${row.name}」?`, '提示', { type: 'warning' }).then(() => {
    ElMessage.success('已删除 (mock)')
    load()
  }).catch(() => {})
}

onMounted(load)
</script>

<template>
  <div class="rr-page">
    <PageHeader title="标签管理" :sub="`商品/活动/服务标签分类管理 (共 ${total} 个)`">
      <el-button type="primary" @click="onAdd">新增标签</el-button>
    </PageHeader>

    <SearchBar
      v-model:filters="filters"
      :fields="[
        { key: 'name', label: '标签名称', type: 'text', placeholder: '请输入标签名' }
      ]"
      @search="onSearch"
      @reset="onReset"
    />

    <div class="rr-card">
      <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"
        :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"
      >
        <template #status="{ row }">
          <el-tag :type="(STATUS_MAP[row.status]?.type as any)" size="small" effect="light">
            {{ STATUS_MAP[row.status]?.label }}
          </el-tag>
        </template>
        <template #action="{ 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 }
            ]"
          />
        </template>
      </DataTable>
    </div>

    <!-- 增改弹窗 -->
    <el-dialog v-model="editVisible" :title="editMode === 'add' ? '新增标签' : '修改标签'" width="500px">
      <el-form label-width="100px">
        <el-form-item label="标签名称" required>
          <el-input v-model="editForm.name" placeholder="请输入标签名" maxlength="20" show-word-limit />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="editForm.status">
            <el-radio :value="0">启用</el-radio>
            <el-radio :value="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmitEdit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.rr-page { max-width: 1400px; }
</style>