辣评管理员代替投稿功能（二十）

<template>
  <el-dialog
    v-model="visible"
    title="代替用户投稿"
    width="800px"
    :close-on-click-modal="false"
  >
    <el-alert
      title="提示"
      type="warning"
      :closable="false"
      show-icon
      style="margin-bottom: 20px"
    >
      您正在以管理员身份代替用户创建投稿，此操作将被记录。
    </el-alert>

    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="目标用户" prop="userId">
        <el-select
          v-model="form.userId"
          placeholder="选择用户"
          filterable
          remote
          :remote-method="searchUsers"
          :loading="userLoading"
          style="width: 100%"
        >
          <el-option
            v-for="user in users"
            :key="user.id"
            :label="`${user.username} (${user.email})`"
            :value="user.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="比赛届次" prop="competitionId">
        <el-select
          v-model="form.competitionId"
          placeholder="选择届次"
          style="width: 100%"
        >
          <el-option
            v-for="comp in competitions"
            :key="comp.id"
            :label="`第${comp.number}届`"
            :value="comp.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="作品标题" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入作品标题"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="小说类型" prop="novelType">
        <el-select
          v-model="form.novelType"
          placeholder="选择类型"
          style="width: 100%"
        >
          <el-option label="科幻" value="sci-fi" />
          <el-option label="悬疑" value="mystery" />
          <el-option label="奇幻" value="fantasy" />
          <el-option label="其他" value="other" />
        </el-select>
      </el-form-item>

      <el-form-item label="作品内容" prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
          :rows="10"
          placeholder="请输入作品内容"
          maxlength="50000"
          show-word-limit
        />
        <div class="word-count">
          字数：
        </div>
      </el-form-item>

      <el-form-item label="作者自述" prop="authorBio">
        <el-input
          v-model="form.authorBio"
          type="textarea"
          :rows="4"
          placeholder="请输入作者自述（可选）"
          maxlength="1000"
          show-word-limit
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          确认创建
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { searchUsers, getCompetitions } from '@/api'
import { createSubmissionForUser } from '@/api/admin'

const props = defineProps({
  modelValue: Boolean
})

const emit = defineEmits(['update:modelValue', 'success'])

const visible = ref(props.modelValue)
const formRef = ref(null)
const submitting = ref(false)
const userLoading = ref(false)

const form = ref({
  userId: null,
  competitionId: null,
  title: '',
  content: '',
  novelType: '',
  authorBio: ''
})

const users = ref([])
const competitions = ref([])

const rules = {
  userId: [
    { required: true, message: '请选择目标用户', trigger: 'change' }
  ],
  competitionId: [
    { required: true, message: '请选择比赛届次', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请输入作品标题', trigger: 'blur' },
    { min: 2, max: 100, message: '标题长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入作品内容', trigger: 'blur' },
    { min: 100, message: '内容至少 100 字', trigger: 'blur' }
  ],
  novelType: [
    { required: true, message: '请选择小说类型', trigger: 'change' }
  ]
}

// 计算字数
const wordCount = computed(() => {
  return form.value.content.length
})

watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val) {
    loadCompetitions()
  }
})

watch(visible, (val) => {
  emit('update:modelValue', val)
  if (!val) {
    resetForm()
  }
})

// 搜索用户
const searchUsers = async (query) => {
  if (!query) {
    users.value = []
    return
  }

  userLoading.value = true
  try {
    const res = await searchUsers({ keyword: query })
    users.value = res.data
  } catch (error) {
    ElMessage.error('搜索用户失败')
  } finally {
    userLoading.value = false
  }
}

// 加载比赛列表
const loadCompetitions = async () => {
  try {
    const res = await getCompetitions()
    competitions.value = res.data
  } catch (error) {
    ElMessage.error('加载比赛列表失败')
  }
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value.validate()

    // 二次确认
    await ElMessageBox.confirm(
      `确认代替用户创建投稿吗？此操作将被记录。`,
      '确认操作',
      {
        type: 'warning',
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }
    )

    submitting.value = true

    await createSubmissionForUser(form.value)

    ElMessage.success('投稿创建成功')
    visible.value = false
    emit('success')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '创建失败')
    }
  } finally {
    submitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
  form.value = {
    userId: null,
    competitionId: null,
    title: '',
    content: '',
    novelType: '',
    authorBio: ''
  }
}
</script>

<style scoped>
.word-count {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
  text-align: right;
}
</style>

<template>
  <el-table :data="submissions">
    <el-table-column prop="title" label="标题">
      <template #default="{ row }">
        <div class="title-cell">
          <span></span>
          <el-tag
            v-if="row.isProxySubmit"
            type="warning"
            size="small"
            style="margin-left: 8px"
          >
            代投
          </el-tag>
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="createdBy" label="创建者">
      <template #default="{ row }">
        <span v-if="row.isProxySubmit">
           (管理员代投)
        </span>
        <span v-else>
          
        </span>
      </template>
    </el-table-column>

    <!-- 其他列 -->
  </el-table>
</template>

<template>
  <el-card class="submission-detail">
    <el-alert
      v-if="submission.isProxySubmit"
      title="此投稿由管理员代为创建"
      type="info"
      :closable="false"
      show-icon
      style="margin-bottom: 16px"
    >
      <template #default>
        <div>
          创建者：
        </div>
        <div>
          创建时间：
        </div>
      </template>
    </el-alert>

    <!-- 投稿内容 -->
  </el-card>
</template>