fix(admin): 支持上传政策封面图 (bug #24053)

shinnosuke

2026-08-06 558c8e63b28d2a1bb5b851af4c3f51e76f5f7e2e

fix(admin): 支持上传政策封面图 (bug #24053)

 talent-card-admin/src/style.css

@@ -3511,6 +3511,15 @@
  border-radius: 4px;
}

.policy-cover-preview {
  width: 120px;
  height: 72px;
  margin-left: 12px;
  vertical-align: middle;
  border: 1px solid #d9dee8;
  border-radius: 4px;
}

.news-editor-file-input {
  display: none;
}

 talent-card-admin/src/views/TalentPolicyEditView.vue

@@ -2,10 +2,12 @@
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getAdminPolicyDetail, updateAdminPolicy } from '../api/admin'
import type { UploadFile } from 'element-plus'
import { getAdminPolicyDetail, updateAdminPolicy, uploadAdminImage } from '../api/admin'

const route = useRoute(); const router = useRouter(); const loading = ref(false)
const form = reactive({ title: '', subtitle: '', author: '', source: '', content: '', coverUrl: '', isTop: false, sortNo: 0, status: 1 })
async function uploadCover(file: UploadFile) { if (!file.raw) return; const result = await uploadAdminImage(file.raw); form.coverUrl = result.url; ElMessage.success('封面图上传成功') }
function formatTime(value?: string) { return value ? value.replace('T', ' ').slice(0, 19) : '-' }
const createdAt = ref('-'); const updatedAt = ref('-')
async function load() { loading.value = true; try { const item = await getAdminPolicyDetail(String(route.params.id)); form.title = item.title; form.subtitle = item.subtitle || ''; form.author = item.author || ''; form.source = item.source || ''; form.content = item.content || ''; form.coverUrl = item.coverUrl || ''; form.isTop = Boolean(item.isTop); form.sortNo = Number(item.sortNo || 0); form.status = Number(item.status ?? 0); createdAt.value = formatTime(item.createdAt); updatedAt.value = formatTime(item.updatedAt) } finally { loading.value = false } }
@@ -14,6 +16,6 @@
</script>
<template>
  <div class="policy-edit-page" v-loading="loading"><section class="news-meta-panel"><h3>发布信息</h3><div class="news-meta-grid"><div><span>发布时间</span><strong>{{ createdAt }}</strong></div><div><span>修改时间</span><strong>{{ updatedAt }}</strong></div></div></section><section class="policy-publish-panel"><h3>政策内容</h3><el-form class="policy-publish-form" :model="form" label-width="88px">
    <el-form-item label="政策标题"><el-input v-model="form.title" /></el-form-item><el-form-item label="政策标签"><el-input v-model="form.subtitle" placeholder="请输入政策标签" /></el-form-item><el-form-item label="政策详情"><el-input v-model="form.content" type="textarea" :rows="10" /></el-form-item><el-form-item label="封面图 URL"><el-input v-model="form.coverUrl" /></el-form-item><el-form-item label="排序"><el-input v-model.number="form.sortNo" type="number" min="0" max="9999" /></el-form-item><el-form-item><el-button type="primary" @click="save">保存</el-button></el-form-item>
    <el-form-item label="政策标题"><el-input v-model="form.title" /></el-form-item><el-form-item label="政策标签"><el-input v-model="form.subtitle" placeholder="请输入政策标签" /></el-form-item><el-form-item label="政策详情"><el-input v-model="form.content" type="textarea" :rows="10" /></el-form-item><el-form-item label="封面图"><el-upload accept="image/*" :auto-upload="false" :show-file-list="false" :on-change="uploadCover"><el-button>上传图片</el-button></el-upload><el-image v-if="form.coverUrl" class="policy-cover-preview" :src="form.coverUrl" fit="cover" /></el-form-item><el-form-item label="排序"><el-input v-model.number="form.sortNo" type="number" min="0" max="9999" /></el-form-item><el-form-item><el-button type="primary" @click="save">保存</el-button></el-form-item>
  </el-form></section></div>
</template>

 talent-card-admin/src/views/TalentPolicyPublishView.vue

@@ -2,10 +2,17 @@
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { createAdminPolicy } from '../api/admin'
import type { UploadFile } from 'element-plus'
import { createAdminPolicy, uploadAdminImage } from '../api/admin'

const router = useRouter()
const form = reactive({ title: '', subtitle: '', author: '', source: '', content: '', coverUrl: '', isTop: false, sortNo: 0, status: 1 })
async function uploadCover(file: UploadFile) {
  if (!file.raw) return
  const result = await uploadAdminImage(file.raw)
  form.coverUrl = result.url
  ElMessage.success('封面图上传成功')
}
async function save() {
  if (!form.title.trim()) { ElMessage.warning('请填写政策标题'); return }
  if (!form.subtitle.trim()) { ElMessage.warning('请填写政策标签'); return }
@@ -22,7 +29,7 @@
    <el-form-item label="政策标题"><el-input v-model="form.title" placeholder="请输入政策标题" /></el-form-item>
    <el-form-item label="政策标签"><el-input v-model="form.subtitle" placeholder="请输入政策标签" /></el-form-item>
    <el-form-item label="政策详情"><el-input v-model="form.content" type="textarea" :rows="10" /></el-form-item>
    <el-form-item label="封面图 URL"><el-input v-model="form.coverUrl" placeholder="https://..." /></el-form-item>
    <el-form-item label="封面图"><el-upload accept="image/*" :auto-upload="false" :show-file-list="false" :on-change="uploadCover"><el-button>上传图片</el-button></el-upload><el-image v-if="form.coverUrl" class="policy-cover-preview" :src="form.coverUrl" fit="cover" /></el-form-item>
    <el-form-item label="排序"><el-input v-model.number="form.sortNo" type="number" min="0" max="9999" /></el-form-item>
    <el-form-item><el-button type="primary" @click="save">保存</el-button></el-form-item>
  </el-form></section></div>