admin_new/src/modules/other/textconfig/TextconfigListView.vue

<script setup lang="ts">
/**
 * F006 常量配置 - W10 A1 标准化
 *
 * W10 A1: 套 PageHeader/SearchBar 标准化模板
 *
 * 沿用老 vue other/textconfig.vue 85 行:
 *   - 搜索: 描述
 *   - 表格列: 编码/描述/类型 (1=文本 2=富文本 3=单图) / 内容 (按类型显示) / 创建时间
 *   - 操作: 修改
 *   - 富文本查看弹窗
 *   - 图片预览
 *
 * 字段: code/descr/type/content/createDate
 */
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import DataTable from '@/components/DataTable/DataTable.vue'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'

interface TextConfig {
  id: string
  code: string
  descr: string
  type: number
  content: string
  createDate: string
  raw: any
}

const TYPE_MAP: Record<number, { label: string; type: string }> = {
  1: { label: '文本', type: 'primary' },
  2: { label: '富文本', type: 'success' },
  3: { label: '单图', type: 'warning' }
}

const FALLBACK: TextConfig[] = [
  { id: '1', code: 'system.title', descr: '系统标题', type: 1, content: '产品网络管理系统', createDate: '2026-01-15 10:00:00', raw: {} },
  { id: '2', code: 'system.copyright', descr: '页脚版权', type: 1, content: '© 2026 产品网络 版权所有', createDate: '2026-01-15 10:01:00', raw: {} },
  { id: '3', code: 'inquiry.expireHours', descr: '询价过期时间(小时)', type: 1, content: '72', createDate: '2026-02-20 14:00:00', raw: {} },
  { id: '4', code: 'order.autoConfirmDays', descr: '订单自动确认收货天数', type: 1, content: '15', createDate: '2026-02-20 14:01:00', raw: {} },
  { id: '5', code: 'commission.defaultRate', descr: '默认分佣比例', type: 1, content: '0.1', createDate: '2026-03-10 09:00:00', raw: {} },
  { id: '6', code: 'agreement.user', descr: '用户协议', type: 2, content: '<p>欢迎使用产品网络平台...</p>', createDate: '2026-01-20 10:00:00', raw: {} },
  { id: '7', code: 'agreement.privacy', descr: '隐私政策', type: 2, content: '<p>我们非常重视您的个人信息保护...</p>', createDate: '2026-01-20 10:01:00', raw: {} },
  { id: '8', code: 'banner.home', descr: '首页 Banner', type: 3, content: 'https://example.com/banner1.png', createDate: '2026-04-01 12:00:00', raw: {} }
]

const list = ref<TextConfig[]>([])
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({ descr: '' })

const editVisible = ref(false)
const editMode = ref<'add' | 'edit'>('add')
const editForm = reactive<TextConfig>({ id: '', code: '', descr: '', type: 1, content: '', createDate: '', raw: {} })
const richTextVisible = ref(false)
const richTextContent = ref('')

async function load() {
  loading.value = true
  error.value = null
  try {
    await new Promise(r => setTimeout(r, 200))
    let rows = [...FALLBACK]
    if (filters.descr) rows = rows.filter(r => r.descr.includes(filters.descr))
    list.value = rows
    total.value = rows.length
  } 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.descr = ''; load() }
function onPageChange(p: number) { page.value = p; load() }
function onLimitChange(l: number) { limit.value = l; load() }
function onAdd() { editMode.value = 'add'; Object.assign(editForm, { id: '', code: '', descr: '', type: 1, content: '', createDate: '' }); editVisible.value = true }
function onEdit(row: TextConfig) { editMode.value = 'edit'; Object.assign(editForm, JSON.parse(JSON.stringify(row))); editVisible.value = true }
function onSubmitEdit() {
  if (!editForm.code.trim() || !editForm.descr.trim()) { ElMessage.warning('请填写编码和描述'); return }
  ElMessage.success(editMode.value === 'add' ? '新增成功 (mock)' : '修改成功 (mock)')
  editVisible.value = false
  load()
}
function onShowRichText(content: string) { richTextContent.value = content; richTextVisible.value = true }
function onDelete(row: TextConfig) {
  ElMessageBox.confirm(`确认删除「${row.code}」?`, '提示', { 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: 'descr', label: '描述', type: 'text', placeholder: '请输入描述' }
      ]"
      @search="onSearch"
      @reset="onReset"
    />

    <div class="rr-card">
      <DataTable
        :columns="[
          { prop: 'code', label: '编码', minWidth: 200 },
          { prop: 'descr', label: '描述', minWidth: 200 },
          { prop: 'type', label: '类型', width: 100, slot: 'type' },
          { prop: 'content', label: '内容', minWidth: 280, slot: 'content' },
          { 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"
        :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 }}
          </el-tag>
        </template>
        <template #content="{ row }">
          <span v-if="row.type === 1" class="rr-content-text">{{ row.content }}</span>
          <el-button v-else-if="row.type === 2" text type="primary" size="small" @click="onShowRichText(row.content)">查看富文本</el-button>
          <el-image v-else-if="row.type === 3" :src="row.content" :preview-src-list="[row.content]" style="width: 60px; height: 60px; border-radius: 4px" fit="cover" />
        </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="richTextVisible" title="富文本内容" width="800px">
      <div v-html="richTextContent" class="rr-richtext" />
    </el-dialog>

    <!-- 增改弹窗 -->
    <el-dialog v-model="editVisible" :title="editMode === 'add' ? '新增常量' : '修改常量'" width="600px">
      <el-form label-width="100px">
        <el-form-item label="编码" required>
          <el-input v-model="editForm.code" placeholder="如 system.title" :disabled="editMode === 'edit'" />
        </el-form-item>
        <el-form-item label="描述" required>
          <el-input v-model="editForm.descr" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="类型" required>
          <el-radio-group v-model="editForm.type">
            <el-radio :value="1">文本</el-radio>
            <el-radio :value="2">富文本</el-radio>
            <el-radio :value="3">单图</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="editForm.type === 3 ? '图片 URL' : '内容'" required>
          <el-input v-if="editForm.type === 1" v-model="editForm.content" placeholder="请输入文本内容" />
          <el-input v-else-if="editForm.type === 2" v-model="editForm.content" type="textarea" :rows="6" placeholder="请输入 HTML 内容" />
          <el-input v-else v-model="editForm.content" placeholder="请输入图片 URL" />
        </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; }
.rr-content-text { color: var(--ink); font-size: 13px; }
.rr-richtext { line-height: 1.6; color: var(--ink); }
</style>