| | |
| | | <script setup lang="ts"> |
| | | import { reactive } from 'vue' |
| | | import { onMounted, reactive, ref } from 'vue' |
| | | import { useRoute, useRouter } from 'vue-router' |
| | | import { ElMessage } from 'element-plus' |
| | | import { ArrowLeftBold, ArrowRightBold, Link, Picture } from '@element-plus/icons-vue' |
| | | import { getAdminPolicyDetail, updateAdminPolicy } from '../api/admin' |
| | | |
| | | interface PolicyForm { |
| | | title: string |
| | | tag: string |
| | | detail: string |
| | | sort: string |
| | | } |
| | | |
| | | const form = reactive<PolicyForm>({ |
| | | title: '攀枝花市东区人才政策申报指南', |
| | | tag: '申报指南', |
| | | detail: '', |
| | | sort: '', |
| | | }) |
| | | |
| | | const toolbarItems = ['H', 'B', 'I', 'U', 'S', '笔', '刷', '链', '列', '齐', '引', '表', '图', '视'] |
| | | |
| | | function updateDetail(event: Event) { |
| | | form.detail = (event.target as HTMLElement).innerText |
| | | } |
| | | |
| | | function savePolicy() { |
| | | ElMessage.success('政策内容已保存') |
| | | } |
| | | 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 }) |
| | | 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 } } |
| | | async function save() { if (!form.title.trim()) { ElMessage.warning('请填写政策标题'); return }; await updateAdminPolicy(String(route.params.id), { ...form, title: form.title.trim(), subtitle: form.subtitle.trim(), author: form.author.trim(), source: form.source.trim(), coverUrl: form.coverUrl.trim() }); ElMessage.success('政策已保存'); router.push('/talent-policy-management') } |
| | | onMounted(() => void load()) |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="policy-edit-page"> |
| | | <section class="news-meta-panel"> |
| | | <h3>发布信息</h3> |
| | | <div class="news-meta-grid"> |
| | | <div> |
| | | <span>发布人</span> |
| | | <strong>赵四</strong> |
| | | </div> |
| | | <div> |
| | | <span>发布时间</span> |
| | | <strong>2026-06-30 18:05:19</strong> |
| | | </div> |
| | | <div> |
| | | <span>修改人</span> |
| | | <strong>赵四</strong> |
| | | </div> |
| | | <div> |
| | | <span>修改时间</span> |
| | | <strong>2026-06-30 18:05:19</strong> |
| | | </div> |
| | | </div> |
| | | </section> |
| | | |
| | | <section class="policy-publish-panel"> |
| | | <h3>政策内容</h3> |
| | | |
| | | <el-form class="policy-publish-form" :model="form" label-width="72px" label-position="left"> |
| | | <el-form-item label="政策标题"> |
| | | <el-input v-model="form.title" placeholder="政策标题" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="政策标签"> |
| | | <el-input v-model="form.tag" placeholder="政策标签" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item class="news-editor-form-item" label="政策详情"> |
| | | <div class="news-editor-shell"> |
| | | <div class="news-editor-toolbar"> |
| | | <button |
| | | v-for="item in toolbarItems" |
| | | :key="item" |
| | | class="news-editor-tool" |
| | | type="button" |
| | | :title="item" |
| | | > |
| | | <el-icon v-if="item === '链'"><Link /></el-icon> |
| | | <el-icon v-else-if="item === '图'"><Picture /></el-icon> |
| | | <span v-else>{{ item }}</span> |
| | | </button> |
| | | <button class="news-editor-tool" type="button" title="后退"> |
| | | <el-icon><ArrowLeftBold /></el-icon> |
| | | </button> |
| | | <button class="news-editor-tool" type="button" title="前进"> |
| | | <el-icon><ArrowRightBold /></el-icon> |
| | | </button> |
| | | </div> |
| | | <div class="news-editor-body" contenteditable="true" @input="updateDetail" /> |
| | | </div> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="排序"> |
| | | <el-input v-model="form.sort" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <el-button type="primary" @click="savePolicy">保存</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </section> |
| | | </div> |
| | | <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" /></el-form-item><el-form-item label="发布人"><el-input v-model="form.author" /></el-form-item><el-form-item label="发布来源"><el-input v-model="form.source" /></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-switch v-model="form.isTop" /></el-form-item><el-form-item label="排序值"><el-input-number v-model="form.sortNo" :min="0" :max="9999" /></el-form-item><el-form-item label="发布状态"><el-radio-group v-model="form.status"><el-radio :value="0">草稿</el-radio><el-radio :value="1">已发布</el-radio><el-radio :value="2">已下架</el-radio></el-radio-group></el-form-item><el-form-item><el-button type="primary" @click="save">保存</el-button></el-form-item> |
| | | </el-form></section></div> |
| | | </template> |