cfc/cfc-web/src/views/admin/ActivityEdit.vue

<template>
  <div class="activity-edit admin-page">
    <el-card>
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">{{ readonly && activityStatus !== 'rejected' ? '活动详情' : (isEdit ? '编辑活动' : '创建活动') }}</span>
        <div class="admin-page-actions">
          <el-button @click="$router.push('/activities')">返回列表</el-button>
          <template v-if="!readonly && activityStatus !== 'rejected'">
            <el-button type="primary" @click="saveActivity(false)" :loading="saving">{{ activityStatus === 'published' ? '保存修改' : '保存草稿' }}</el-button>
            <el-button v-if="isEdit && activityStatus !== 'published'" type="success" @click="handleSubmitReview" :loading="reviewLoading">提交审核</el-button>
          </template>
          <template v-if="activityStatus === 'rejected'">
            <el-button type="primary" @click="handleReDraft" :loading="reDraftLoading">保存到草稿箱重新编辑</el-button>
          </template>
          <template v-if="readonly && activityStatus === 'draft' && !isEdit">
            <el-button type="primary" size="mini" @click="editFromReadonly">编辑</el-button>
          </template>
        </div>
      </div>

      <!-- 状态横幅 -->
      <el-alert
        v-if="statusLabel"
        :title="statusLabel"
        :type="statusType"
        :description="statusDescription"
        show-icon
        :closable="false"
        style="margin-bottom: 16px;"
      />

      <el-form label-width="120px" v-loading="loading" :model="form" :rules="formRules" ref="form">
        <el-form-item label="活动标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入活动标题" :disabled="readonly" />
        </el-form-item>

        <el-form-item label="活动类型" prop="activityType">
          <el-select v-model="form.activityType" placeholder="请选择活动类型" style="width:100%" :disabled="readonly">
            <el-option label="线下活动" value="offline" />
            <el-option label="线上活动" value="online" />
            <el-option label="主题活动" value="campaign" />
          </el-select>
        </el-form-item>

        <el-form-item label="活动描述" prop="description">
          <div class="rich-editor" :class="{ 'is-disabled': readonly }">
            <Toolbar :editor="editorInstance" :defaultConfig="toolbarConfig" />
            <Editor :defaultConfig="editorConfig" v-model="form.description" @onCreated="handleEditorCreated" :disabled="readonly" style="min-height: 300px;" />
          </div>
        </el-form-item>

        <el-form-item label="封面图片">
          <template v-if="!readonly">
            <el-upload
              :action="uploadActionUrl"
              :headers="uploadHeaders"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
              :before-upload="beforeUpload"
              :show-file-list="false"
              accept="image/jpeg,image/png,image/gif,image/webp"
            >
              <img v-if="form.coverImage" :src="form.coverImage" class="cover-preview" />
              <el-button v-else type="primary" plain>+ 上传封面</el-button>
            </el-upload>
            <el-button v-if="form.coverImage" size="mini" type="text" style="margin-left:10px;" @click="form.coverImage = ''">清除</el-button>
          </template>
          <img v-else-if="form.coverImage" :src="form.coverImage" class="cover-preview" />
          <span v-else style="color:#999">无封面</span>
        </el-form-item>

        <el-form-item label="五维权重">
          <dimension-weight-picker v-model="form.dimensionWeights" :show-presets="true" :readonly="readonly" />
        </el-form-item>

        <el-form-item label="活动地点">
          <el-input v-model="form.location" placeholder="请输入活动地点" :disabled="readonly" />
        </el-form-item>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="最大人数">
              <el-input-number v-model="form.maxParticipants" :min="0" :max="99999" placeholder="0表示不限" style="width:100%" :disabled="readonly" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格(元)">
              <el-input-number v-model="form.priceYuan" :min="0" :precision="2" :step="0.01" placeholder="0表示免费" style="width:100%" :disabled="readonly" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择开始时间" style="width:100%" :disabled="readonly" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束时间" style="width:100%" :disabled="readonly" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="可见范围">
              <el-select v-model="form.visibility" placeholder="请选择可见范围" style="width:100%" :disabled="readonly">
                <el-option label="公开" value="public" />
                <el-option label="受限" value="restricted" />
                <el-option label="全体" value="all" />
                <el-option label="会员" value="member" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可见对象">
              <el-select v-model="form.visibleScope" placeholder="请选择可见对象类型" style="width:100%" :disabled="readonly">
                <el-option label="不限" value="" />
                <el-option label="家庭" value="family" />
                <el-option label="角色" value="role" />
                <el-option label="用户" value="user" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="可见对象ID" v-if="form.visibleScope">
          <el-input v-model="form.visibleTo" placeholder="多个用逗号分隔，如: family_1,family_2" :disabled="readonly" />
        </el-form-item>

        <el-form-item label="签到积分">
          <el-input-number v-model="form.checkinPoints" :min="0" :max="9999" placeholder="0使用系统默认" style="width:200px" :disabled="readonly" />
          <span style="margin-left:8px;color:#999;font-size:12px;">0表示使用系统默认积分</span>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 创建成功弹窗 -->
    <el-dialog title="创建成功" :visible.sync="successDialogVisible" width="420px" :close-on-click-modal="false" :show-close="false">
      <div style="text-align:center;padding:10px 0;">
        <i class="el-icon-circle-check" style="font-size:48px;color:#67C23A;"></i>
        <p style="font-size:16px;margin-top:12px;">活动「{{ form.title }}」已创建成功</p>
      </div>
      <div slot="footer" style="text-align:center;">
        <el-button @click="handleContinueAdd">继续添加</el-button>
        <el-button @click="$router.push('/activities')">返回列表</el-button>
        <el-button type="primary" @click="handlePublishAndBack" :loading="publishing">直接发布</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DimensionWeightPicker from '@/components/DimensionWeightPicker.vue'
import { getActivityDetail, createActivity, updateActivity, publishActivity, submitActivityReview, reDraftActivity } from '@/api/activity'
import { saveDimensionWeights, getDimensionWeights } from '@/api/dimension-weight.js'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'

export default {
  name: 'ActivityEdit',
  components: { DimensionWeightPicker, Editor, Toolbar },
  data() {
    return {
      isEdit: false,
      loading: false,
      saving: false,
      publishing: false,
      readonly: false,
      activityStatus: '',
      auditReason: '',
      reviewLoading: false,
      reDraftLoading: false,
      successDialogVisible: false,
      createdActivityId: null,
      form: {
        title: '',
        coverImage: '',
        activityType: '',
        description: '',
        dimensionCode: '',
        dimensionWeights: [],
        location: '',
        maxParticipants: null,
        priceYuan: null,
        startTime: null,
        endTime: null,
        visibility: 'public',
        visibleScope: '',
        visibleTo: '',
        checkinPoints: 0
      },
      formRules: {
        title: [
          { required: true, message: '请填写活动标题', trigger: 'blur' }
        ],
        activityType: [
          { required: true, message: '请选择活动类型', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请填写活动描述', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ]
      },
      editorConfig: null,
      toolbarConfig: {},
      editorInstance: null
    }
  },
  computed: {
    statusLabel() {
      const map = { draft: '当前状态：草稿箱', pending: '当前状态：待审核（等待管理员审核）', rejected: '当前状态：已驳回', published: '当前状态：发布中', withdrawn: '当前状态：已撤回' }
      return map[this.activityStatus] || ''
    },
    statusType() {
      const map = { draft: 'info', pending: 'warning', rejected: 'error', published: 'success', withdrawn: 'info' }
      return map[this.activityStatus] || 'info'
    },
    statusDescription() {
      if (this.activityStatus === 'rejected' && this.auditReason) return '原因：' + this.auditReason
      return ''
    },
    uploadActionUrl() {
      const baseURL = process.env.VUE_APP_BASE_API || ''
      return baseURL + '/api/admin/articles/upload/image'
    },
    uploadHeaders() {
      const token = localStorage.getItem('token')
      return token ? { Authorization: 'Bearer ' + token } : {}
    }
  },
  created() {
    this.initEditorConfig()
    const id = this.$route.query.id
    this.readonly = this.$route.query.readonly === '1'
    if (id) {
      this.isEdit = true
      this.loadDetail(id)
    }
  },
  methods: {
    initEditorConfig() {
      const baseURL = process.env.VUE_APP_BASE_API || ''
      const token = localStorage.getItem('token')
      this.editorConfig = {
        MENU_CONF: {
          uploadImage: {
            server: baseURL + '/api/admin/articles/upload/image',
            headers: token ? { Authorization: 'Bearer ' + token } : {},
            maxNumberOfFiles: 1,
            fieldName: 'file',
            customAlert: (msg, type) => {
              this.$message && this.$message({ message: msg, type: type || 'error' })
            },
            onSuccess(res, insertFn) {
              if (res.code === 200) {
                const url = res.data.url || res.data
                insertFn(baseURL + url)
              }
            }
          }
        }
      }
    },
    handleEditorCreated(editor) {
      this.editorInstance = editor
    },
    async loadDetail(id) {
      this.loading = true
      try {
        const res = await getActivityDetail({ id })
        if (res.data) {
          const d = res.data
          this.activityStatus = d.status || ''
          this.auditReason = d.auditReason || ''
          // Set readonly based on workflow status
          if (d.status === 'pending' || d.status === 'rejected' || d.status === 'withdrawn') {
            this.readonly = true
          } else if (this.$route.query.readonly === '1') {
            this.readonly = true
          } else {
            this.readonly = false
          }
          this.form = {
            title: d.title || '',
            coverImage: d.coverImage || '',
            activityType: d.activityType || '',
            description: d.description || '',
            dimensionCode: d.dimensionCode || '',
            dimensionWeights: [],
            location: d.location || '',
            maxParticipants: d.maxParticipants || null,
            priceYuan: d.price ? d.price / 100 : null,
            startTime: d.startTime || null,
            endTime: d.endTime || null,
            visibility: d.visibility || 'public',
            visibleScope: d.visibleScope || '',
            visibleTo: d.visibleTo || '',
            checkinPoints: d.checkinPoints || 0
          }
          try {
            const dwRes = await getDimensionWeights('activity', d.id)
            if (dwRes.data) {
              this.form.dimensionWeights = dwRes.data
            }
          } catch (e) {
          }
        }
      } catch (e) {
        this.$message.error('加载活动详情失败')
      } finally {
        this.loading = false
      }
    },
    beforeUpload(file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png' ||
        file.type === 'image/gif' || file.type === 'image/webp'
      if (!isImage) {
        this.$message.error('只能上传 JPG/PNG/GIF/WebP 格式图片')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('图片大小不能超过 5MB')
        return false
      }
      return true
    },
    handleUploadSuccess(resp) {
      if (resp.code === 0 || resp.code === 200) {
        this.form.coverImage = resp.data || resp
        this.$message.success('封面上传成功')
      } else {
        this.$message.error((resp && resp.message) || '封面上传失败')
      }
    },
    handleUploadError() {
      this.$message.error('封面上传失败，请重试')
    },
    async saveActivity(publishNow) {
      // 表单验证
      try {
        await this.$refs.form.validate()
      } catch (e) {
        return
      }
      if (publishNow) {
        this.publishing = true
      } else {
        this.saving = true
      }
      try {
        const payload = {
          title: this.form.title,
          coverImage: this.form.coverImage,
          activityType: this.form.activityType,
          description: this.form.description,
          dimensionCode: this.form.dimensionCode,
          location: this.form.location,
          maxParticipants: this.form.maxParticipants,
          price: this.form.priceYuan != null ? Math.round(this.form.priceYuan * 100) : 0,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          visibility: this.form.visibility,
          visibleScope: this.form.visibleScope,
          visibleTo: this.form.visibleTo,
          checkinPoints: this.form.checkinPoints || 0
        }
        if (this.isEdit) {
          // 编辑模式：保存后直接返回列表
          payload.id = this.form._activityId || this.$route.query.id
          await updateActivity(payload)
          if (this.form.dimensionWeights && this.form.dimensionWeights.length) {
            try {
              await saveDimensionWeights('activity', payload.id, this.form.dimensionWeights)
            } catch (e) {
              console.error('保存维度权重失败', e)
            }
          }
          this.$message.success('更新成功')
          this.$router.push('/activities')
        } else {
          // 创建模式：保存后弹窗
          const res = await createActivity(payload)
          if (res.data && res.data.id) {
            this.createdActivityId = res.data.id
          }
          this.isEdit = true
          this.saving = false
          this.successDialogVisible = true
        }
      } catch (e) {
        this.$message.error('保存失败')
      } finally {
        this.saving = false
        this.publishing = false
      }
    },
    handleContinueAdd() {
      this.successDialogVisible = false
      this.form = {
        title: '',
        coverImage: '',
        activityType: '',
        description: '',
        dimensionCode: '',
        dimensionWeights: [],
        location: '',
        maxParticipants: null,
        priceYuan: null,
        startTime: null,
        endTime: null,
        visibility: 'public',
        visibleScope: '',
        visibleTo: '',
        checkinPoints: 0
      }
      this.isEdit = false
      this.createdActivityId = null
      this.$refs.form && this.$refs.form.clearValidate()
    },
    async handlePublishAndBack() {
      this.successDialogVisible = false
      const activityId = this.createdActivityId
      if (!activityId) {
        this.$router.push('/activities')
        return
      }
      // 先保存维度权重
      if (this.form.dimensionWeights && this.form.dimensionWeights.length) {
        try {
          await saveDimensionWeights('activity', activityId, this.form.dimensionWeights)
        } catch (e) {
          console.error('保存维度权重失败', e)
        }
      }
      // 发布
      try {
        this.publishing = true
        await publishActivity(activityId)
        this.$message.success('发布成功')
      } catch (e) {
        this.$message.error('发布失败')
      } finally {
        this.publishing = false
      }
      this.$router.push('/activities')
    },
    editFromReadonly() {
      this.readonly = false
    },
    async handleSubmitReview() {
      this.reviewLoading = true
      try {
        // Save activity first
        const payload = {
          title: this.form.title,
          coverImage: this.form.coverImage,
          activityType: this.form.activityType,
          description: this.form.description,
          dimensionCode: this.form.dimensionCode,
          location: this.form.location,
          maxParticipants: this.form.maxParticipants,
          price: this.form.priceYuan != null ? Math.round(this.form.priceYuan * 100) : 0,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          visibility: this.form.visibility,
          visibleScope: this.form.visibleScope,
          visibleTo: this.form.visibleTo,
          checkinPoints: this.form.checkinPoints || 0
        }
        const activityId = this.form._activityId || this.$route.query.id
        if (
activityId
) {
          payload.id = activityId
          await updateActivity(payload)
        } else {
          const res = await createActivity(payload)
          if (res.data && res.data.id) {
            payload.id = res.data.id
            this.form._activityId = res.data.id
            this.isEdit = true
          }
        }
        if (payload.id && this.form.dimensionWeights && this.form.dimensionWeights.length) {
          try { await saveDimensionWeights('activity', payload.id, this.form.dimensionWeights) } catch (e) {}
        }
        // Submit for review
        await submitActivityReview({ id: payload.id })
        this.$message.success('已提交审核')
        this.$router.push('/activities')
      } catch (e) {
        this.$message.error(e.message || '提交审核失败')
      } finally {
        this.reviewLoading = false
      }
    },
    async handleReDraft() {
      this.reDraftLoading = true
      try {
        await reDraftActivity({ id: this.$route.query.id })
        this.$message.success('已保存到草稿箱')
        this.activityStatus = 'draft'
        this.readonly = false
      } catch (e) {
        this.$message.error(e.message || '操作失败')
      } finally {
        this.reDraftLoading = false
      }
    }
  }
}
</script>

<style scoped>
.activity-edit {
  padding: 20px;
  display: block;
  min-height: auto;
}
.activity-edit > .el-card {
  display: block;
  min-height: auto;
  width: 100%;
}
.activity-edit > .el-card /deep/ .el-card__body {
  display: block;
  min-height: auto;
  overflow: visible;
}
.activity-edit /deep/ .el-form {
  width: 100%;
}
.activity-edit /deep/ .admin-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.activity-edit /deep/ .admin-page-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
}
.activity-edit /deep/ .admin-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.cover-preview {
  width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.rich-editor {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.rich-editor /deep/ .w-e-toolbar {
  flex-wrap: wrap;
}
.rich-editor /deep/ .w-e-text-container {
  min-height: 300px;
}
</style>