shinnosuke
2026-08-03 98d1455efaa4cd3d5d3213e047ccc0ac187ba05c
talent-card-admin/src/views/TalentPolicyEditView.vue
@@ -1,102 +1,19 @@
<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>