admin_new/src/modules/api/lunbo/LunboListView.vue

<script setup lang="ts">
/**
 * F006 轮播图管理 - W10 A1 标准化
 *
 * W10 A1: 套 PageHeader/SearchBar 标准化模板
 *
 * 沿用老 vue api/lunbo.vue 88 行:
 *   - 搜索: 标题 / 展示位置
 *   - 表格列: title/type(1图文/2url/3政策/4商品/5无)/image(80px缩略)/position(1首页/2商城)/sort/createDate
 *   - 操作: 修改 / 删除
 *   - /api/lunbo 后端 404 → FALLBACK mock
 */
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'

interface Lunbo {
  id: string
  title: string
  type: number
  image: string
  position: number
  sort: number
  createDate: string
  raw: any
}

const TYPE_MAP: Record<number, { label: string; type: string }> = {
  1: { label: '图文', type: 'primary' },
  2: { label: 'URL', type: 'success' },
  3: { label: '政策公告', type: 'warning' },
  4: { label: '商品详情', type: 'info' },
  5: { label: '无跳转', type: '' }
}

const POS_MAP: Record<number, { label: string; type: string }> = {
  1: { label: '首页', type: 'primary' },
  2: { label: '在线商城', type: 'success' }
}

const FALLBACK: Lunbo[] = [
  { id: 'L001', title: '7月采购节主推', type: 1, image: 'https://placehold.co/120x80/2563EB/fff?text=Banner+1', position: 1, sort: 100, createDate: '2026-07-01 10:00:00', raw: {} },
  { id: 'L002', title: '政策公告-新规上线', type: 3, image: 'https://placehold.co/120x80/DC2626/fff?text=Policy', position: 1, sort: 95, createDate: '2026-07-02 09:00:00', raw: {} },
  { id: 'L003', title: '商城精选商品', type: 4, image: 'https://placehold.co/120x80/5645D4/fff?text=Shop', position: 2, sort: 90, createDate: '2026-07-02 14:00:00', raw: {} },
  { id: 'L004', title: '钢材特惠专场', type: 2, image: 'https://placehold.co/120x80/059669/fff?text=Steel', position: 1, sort: 88, createDate: '2026-07-03 11:20:00', raw: {} },
  { id: 'L005', title: '企业入驻指南', type: 5, image: 'https://placehold.co/120x80/F59E0B/fff?text=Guide', position: 2, sort: 80, createDate: '2026-07-03 16:00:00', raw: {} },
  { id: 'L006', title: '建材采购季', type: 1, image: 'https://placehold.co/120x80/8B5CF6/fff?text=Build', position: 1, sort: 75, createDate: '2026-07-04 10:30:00', raw: {} }
]

const list = ref<Lunbo[]>([])
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({ title: '', position: '' })

const editVisible = ref(false)
const editMode = ref<'add' | 'edit'>('add')
const editForm = reactive<Lunbo>({ id: '', title: '', type: 1, image: '', position: 1, sort: 0, createDate: '', raw: {} })

async function load() {
  loading.value = true
  error.value = null
  try {
    const resp: any = await httpGet('/other/lunbo/page', { page: page.value, limit: limit.value })
    list.value = resp?.list || FALLBACK
    total.value = Number(resp?.total || 0)
  } catch (e: any) {
    error.value = e?.msg || e?.message || '加载失败'
    list.value = FALLBACK
    total.value = FALLBACK.length
  } finally { loading.value = false }
}

function onSearch() { page.value = 1; load() }
function onReset() { filters.title = ''; filters.position = ''; 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.title = ''; editForm.type = 1; editForm.image = ''; editForm.position = 1; editForm.sort = 0; editForm.createDate = ''; editVisible.value = true }
function onEdit(row: Lunbo) { editMode.value = 'edit'; Object.assign(editForm, JSON.parse(JSON.stringify(row))); editVisible.value = true }
function onSubmitEdit() {
  if (!editForm.title.trim()) { ElMessage.warning('请填写标题'); return }
  if (!editForm.image.trim()) { ElMessage.warning('请填写图片URL'); return }
  ElMessage.success(editMode.value === 'add' ? '新增成功 (mock)' : '修改成功 (mock)')
  editVisible.value = false
  load()
}
function onDelete(row: Lunbo) {
  ElMessageBox.confirm(`确认删除「${row.title}」?`, '提示', { type: 'warning' }).then(() => {
    ElMessage.success('已删除 (mock)')
    load()
  }).catch(() => {})
}

onMounted(load)
</script>

<template>
  <div class="rr-page">
    <PageHeader title="轮播图管理" :sub="`App/小程序首页与商城轮播图配置 (共 ${total} 张)`">
      <el-button type="primary" @click="onAdd">新增轮播</el-button>
    </PageHeader>

    <SearchBar
      v-model:filters="filters"
      :fields="[
        { key: 'title', label: '标题', type: 'text', placeholder: '请输入标题' },
        { key: 'position', label: '展示位置', type: 'select', options: [
          { value: 1, label: '首页' },
          { value: 2, label: '在线商城' }
        ] }
      ]"
      @search="onSearch"
      @reset="onReset"
    />

    <div class="rr-card">
      <DataTable
        :columns="[
          { prop: 'title', label: '标题', minWidth: 200 },
          { prop: 'type', label: '类型', width: 110, align: 'center', slot: 'type' },
          { prop: 'image', label: '图片', width: 140, align: 'center', slot: 'image' },
          { prop: 'position', label: '展示位置', width: 120, align: 'center', slot: 'position' },
          { prop: 'sort', label: '排序', width: 90, align: 'center' },
          { prop: 'createDate', label: '创建时间', width: 180 },
          { label: '操作', width: 160, 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 #type="{ row }">
          <el-tag :type="(TYPE_MAP[row.type]?.type as any)" size="small" effect="light">{{ TYPE_MAP[row.type]?.label || `类型${row.type}` }}</el-tag>
        </template>
        <template #image="{ row }">
          <el-image :src="row.image" fit="cover" class="lunbo-thumb" :preview-src-list="[row.image]" />
        </template>
        <template #position="{ row }">
          <el-tag :type="(POS_MAP[row.position]?.type as any)" size="small" effect="plain">{{ POS_MAP[row.position]?.label || `位置${row.position}` }}</el-tag>
        </template>
        <template #action="{ row }">
          <el-button text type="primary" size="small" @click="onEdit(row)">修改</el-button>
          <el-button text type="danger" size="small" @click="onDelete(row)">删除</el-button>
        </template>
      </DataTable>
    </div>

    <el-dialog v-model="editVisible" :title="editMode === 'add' ? '新增轮播' : '修改轮播'" width="560px">
      <el-form label-width="100px">
        <el-form-item label="标题" required>
          <el-input v-model="editForm.title" placeholder="请输入标题" maxlength="30" show-word-limit />
        </el-form-item>
        <el-form-item label="类型" required>
          <el-select v-model="editForm.type" style="width: 100%">
            <el-option label="图文" :value="1" />
            <el-option label="URL" :value="2" />
            <el-option label="政策公告" :value="3" />
            <el-option label="商品详情" :value="4" />
            <el-option label="无跳转" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="图片URL" required>
          <el-input v-model="editForm.image" placeholder="请输入图片地址" />
        </el-form-item>
        <el-form-item label="展示位置" required>
          <el-radio-group v-model="editForm.position">
            <el-radio :value="1">首页</el-radio>
            <el-radio :value="2">在线商城</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="editForm.sort" :min="0" :max="999" />
        </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; }
.lunbo-thumb { width: 80px; height: 60px; border-radius: 4px; border: 1px solid var(--border); }
</style>