<script setup lang="ts">
|
import { reactive, ref } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
import type { FormInstance, FormRules, UploadFile } from 'element-plus'
|
import { createAdminPolicy, uploadAdminImage } from '../api/admin'
|
import AdminRichTextEditor from '../components/AdminRichTextEditor.vue'
|
|
const router = useRouter()
|
const formRef = ref<FormInstance>()
|
const form = reactive({ title: '', subtitle: '', author: '', source: '', content: '', coverUrl: '', isTop: false, sortNo: 0, status: 1 })
|
const stripHtml = (value: string) => value.replace(/<[^>]*>/g, '').replace(/ /g, '').trim()
|
const rules: FormRules = {
|
title: [{ required: true, message: '请输入政策标题', trigger: 'blur' }],
|
subtitle: [{ required: true, message: '请输入政策标签', trigger: 'blur' }],
|
content: [{
|
required: true,
|
trigger: 'change',
|
validator: (_rule, value: string, callback) => {
|
if (!stripHtml(value || '')) callback(new Error('请输入政策内容'))
|
else callback()
|
},
|
}],
|
coverUrl: [{ required: true, message: '请上传封面图', trigger: 'change' }],
|
sortNo: [{
|
required: true,
|
trigger: ['blur', 'change'],
|
validator: (_rule, value: number, callback) => {
|
if (!Number.isInteger(value) || value < 0) callback(new Error('请输入有效的排序值'))
|
else callback()
|
},
|
}],
|
}
|
async function uploadCover(file: UploadFile) {
|
if (!file.raw) return
|
const result = await uploadAdminImage(file.raw)
|
form.coverUrl = result.url
|
await formRef.value?.validateField('coverUrl')
|
ElMessage.success('封面图上传成功')
|
}
|
function validateContent() {
|
void formRef.value?.validateField('content')
|
}
|
async function save() {
|
const valid = await formRef.value?.validate().catch(() => false)
|
if (!valid) return
|
await createAdminPolicy({ ...form, title: form.title.trim(), subtitle: form.subtitle.trim(), author: form.author.trim(), source: form.source.trim(), coverUrl: form.coverUrl.trim() })
|
ElMessage.success(form.status === 1 ? '政策已发布' : '草稿已保存')
|
router.push('/talent-policy-management')
|
}
|
</script>
|
<template>
|
<div class="policy-publish-page"><section class="policy-publish-panel"><h3>政策内容</h3><el-form ref="formRef" class="policy-publish-form" :model="form" :rules="rules" label-width="88px">
|
<el-form-item label="政策标题" prop="title" required><el-input v-model="form.title" placeholder="请输入政策标题" /></el-form-item>
|
<el-form-item label="政策标签" prop="subtitle" required><el-input v-model="form.subtitle" placeholder="请输入政策标签" /></el-form-item>
|
<el-form-item class="news-editor-form-item" label="政策内容" prop="content" required><AdminRichTextEditor v-model="form.content" @update:model-value="validateContent" /></el-form-item>
|
<el-form-item class="admin-image-size-form-item" label="封面图" prop="coverUrl" required><el-upload class="article-cover-upload" accept="image/*" :auto-upload="false" :show-file-list="false" :on-change="uploadCover"><el-image v-if="form.coverUrl" class="article-cover-preview" :src="form.coverUrl" fit="cover" /><div v-else class="article-cover-upload-card"><span>+</span><small>上传图片</small></div></el-upload><div class="admin-image-size-tip">推荐尺寸 750 × 320 px（小程序政策详情页顶部大图）</div></el-form-item>
|
<el-form-item label="是否置顶"><el-switch v-model="form.isTop" /></el-form-item>
|
<el-form-item label="排序" prop="sortNo" required><el-input v-model.number="form.sortNo" type="number" placeholder="请输入非负整数" /></el-form-item>
|
<el-form-item><el-button type="primary" @click="save">保存</el-button></el-form-item>
|
</el-form></section></div>
|
</template>
|
