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

<template>
  <div class="survey-templates admin-page">
    <el-card>
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">调研模板管理</span>
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="openCreate">新增模板</el-button>
        <el-button type="success" size="mini" icon="el-icon-magic-stick" @click="openAiGenerate">AI生成调研</el-button>
      </div>

      <el-table :data="templates" v-loading="loading" border stripe>
        <el-table-column prop="title" label="标题" min-width="150">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('title', $event)">标题<span v-if="sortIndex('title') !== null" class="sort-index" :class="sortClass('title') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('title') }}</span>{{ sortIcon('title') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dimension" label="维度" width="80">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('dimension', $event)">维度<span v-if="sortIndex('dimension') !== null" class="sort-index" :class="sortClass('dimension') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('dimension') }}</span>{{ sortIcon('dimension') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cycleType" label="周期" width="100">
          <template slot-scope="scope">
            {{ cycleLabel(scope.row.cycleType) }}
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('cycleType', $event)">周期<span v-if="sortIndex('cycleType') !== null" class="sort-index" :class="sortClass('cycleType') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('cycleType') }}</span>{{ sortIcon('cycleType') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="aiGenerated" label="AI生成" width="80">
          <template slot-scope="scope">
            {{ scope.row.aiGenerated === 1 ? '是' : '否' }}
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('aiGenerated', $event)">AI生成<span v-if="sortIndex('aiGenerated') !== null" class="sort-index" :class="sortClass('aiGenerated') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('aiGenerated') }}</span>{{ sortIcon('aiGenerated') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="启用" width="80" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enabled"
              :active-value="1"
              :inactive-value="0"
              @change="toggleEnabled(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="160">
          <template slot-scope="scope">
            {{ scope.row.createdAt && scope.row.createdAt.substring(0, 10) }}
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('createdAt', $event)">创建时间<span v-if="sortIndex('createdAt') !== null" class="sort-index" :class="sortClass('createdAt') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('createdAt') }}</span>{{ sortIcon('createdAt') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="openEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" style="color:#f56c6c" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="新增/编辑调研模板" :visible.sync="editDialogVisible" width="600px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="form.title" placeholder="调研标题" />
        </el-form-item>
        <el-form-item label="维度">
          <el-select v-model="form.dimension" placeholder="适用维度" style="width:120px">
            <el-option label="身" value="body" />
            <el-option label="智" value="wisdom" />
            <el-option label="富" value="wealth" />
            <el-option label="行" value="action" />
            <el-option label="心" value="mind" />
          </el-select>
        </el-form-item>
        <el-form-item label="周期">
          <el-select v-model="form.cycleType" placeholder="周期" style="width:120px">
            <el-option label="每周" value="weekly" />
            <el-option label="两周" value="biweekly" />
            <el-option label="每月" value="monthly" />
          </el-select>
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="form.enabled" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="题目">
          <div style="width:100%">
            <div v-for="(q, qIdx) in form.questions" :key="qIdx" style="margin-bottom:12px;padding:10px;border:1px solid #eee;border-radius:4px;">
              <el-input v-model="q.text" placeholder="题目文本" style="margin-bottom:8px" />
              <el-tag
                v-for="(opt, oIdx) in q.options"
                :key="oIdx"
                closable
                @close="removeOption(q, oIdx)"
                style="margin-right:4px;margin-bottom:4px"
              >{{ opt }}</el-tag>
              <el-input
                v-if="addOptionText[qIdx]"
                v-model="addOptionText[qIdx]"
                placeholder="输入选项后回车添加"
                size="mini"
                style="width:200px;margin-top:4px"
                @keyup.enter.native="addOption(q, qIdx)"
                @blur="addOption(q, qIdx)"
              />
              <el-button type="text" size="mini" @click="addOptionInput(qIdx)">+ 添加选项</el-button>
              <el-button type="text" size="mini" style="color:#f56c6c" @click="removeQuestion(qIdx)">删除题目</el-button>
            </div>
            <el-button type="primary" size="mini" plain @click="addQuestion">+ 添加题目</el-button>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </span>
    </el-dialog>

    <el-dialog title="AI生成调研题目" :visible.sync="aiDialogVisible" width="500px">
      <el-form :model="aiForm" label-width="60px">
        <el-form-item label="维度">
          <el-select v-model="aiForm.dimension" placeholder="适用维度" style="width:120px">
            <el-option label="身" value="body" />
            <el-option label="智" value="wisdom" />
            <el-option label="富" value="wealth" />
            <el-option label="行" value="action" />
            <el-option label="心" value="mind" />
          </el-select>
        </el-form-item>
        <el-form-item label="主题">
          <el-input v-model="aiForm.topic" placeholder="如：饮食习惯、睡眠质量" />
        </el-form-item>
      </el-form>
      <div v-if="aiResult" style="margin-top:12px;padding:10px;background:#f5f5f5;border-radius:4px;max-height:300px;overflow-y:auto;">
        <pre>{{ aiResult }}</pre>
      </div>
      <span slot="footer">
        <el-button @click="aiDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAiGenerate" :loading="aiLoading">生成</el-button>
        <el-button type="success" @click="saveAiResult" :disabled="!aiResult">保存为模板</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SortMixin from '@/mixins/SortMixin'
import { getSurveyTemplates, saveSurveyTemplate, deleteSurveyTemplate, aiGenerateSurveyQuestions } from '@/api/survey'

export default {
  name: 'SurveyTemplates',
  mixins: [SortMixin],
  data() {
    return {
      loading: false,
      templates: [],
      editDialogVisible: false,
      aiDialogVisible: false,
      aiLoading: false,
      aiResult: null,
      form: this.emptyForm(),
      aiForm: { dimension: '', topic: '' },
      addOptionText: {},
      sortableColumns: { title: '标题', dimension: '维度', cycleType: '周期', aiGenerated: 'AI生成', createdAt: '创建时间' }
    }
  },
  created() {
    this.loadTemplates()
  },
  methods: {
    loadList() { this.loadTemplates() },
    cycleLabel(type) {
      var map = { weekly: '每周', biweekly: '两周', monthly: '每月' }
      return map[type] || type || '-'
    },
    emptyForm() {
      return { id: null, title: '', dimension: '', cycleType: 'weekly', enabled: 1, questions: [] }
    },
    async loadTemplates() {
      this.loading = true
      try {
        const params = {}
        if (this.sortState.length > 0) params.sort = this.sortState
        var res = await getSurveyTemplates(params)
        this.templates = res.data || []
      } catch (e) {
        this.$message.error('加载失败: ' + (e.message || '未知错误'))
      } finally {
        this.loading = false
      }
    },
    openCreate() {
      this.form = this.emptyForm()
      this.form.questions = [{ text: '', options: [] }]
      this.editDialogVisible = true
    },
    openEdit(row) {
      this.form = Object.assign({}, row)
      if (row.questionsJson) {
        try { this.form.questions = JSON.parse(row.questionsJson) } catch (e) { this.form.questions = [] }
      } else {
        this.form.questions = []
      }
      this.editDialogVisible = true
    },
    addQuestion() {
      this.form.questions.push({ text: '', options: [] })
    },
    removeQuestion(idx) {
      this.form.questions.splice(idx, 1)
    },
    addOptionInput(idx) {
      this.$set(this.addOptionText, idx, '')
    },
    addOption(q, qIdx) {
      var txt = this.addOptionText[qIdx]
      if (txt) {
        q.options.push(txt)
        this.$set(this.addOptionText, qIdx, '')
      }
    },
    removeOption(q, oIdx) {
      q.options.splice(oIdx, 1)
    },
    async handleSave() {
      if (!this.form.title) { this.$message.warning('请输入标题'); return }
      var questionsJson = JSON.stringify(this.form.questions)
      var data = {
        title: this.form.title,
        dimension: this.form.dimension,
        cycleType: this.form.cycleType,
        enabled: this.form.enabled,
        questionsJson: questionsJson,
        aiGenerated: 0
      }
      if (this.form.id) data.id = this.form.id
      try {
        await saveSurveyTemplate(data)
        this.$message.success('保存成功')
        this.editDialogVisible = false
        this.loadTemplates()
      } catch (e) {
        this.$message.error('保存失败: ' + (e.message || '未知错误'))
      }
    },
    async toggleEnabled(row) {
      try {
        await saveSurveyTemplate({ id: row.id, enabled: row.enabled, title: row.title, dimension: row.dimension, cycleType: row.cycleType, questionsJson: row.questionsJson, aiGenerated: row.aiGenerated })
        this.$message.success('状态已更新')
      } catch (e) {
        row.enabled = row.enabled === 1 ? 0 : 1
        this.$message.error('更新失败')
      }
    },
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除此模板？', '提示', { type: 'warning' })
        await deleteSurveyTemplate({ id: row.id })
        this.$message.success('删除成功')
        this.loadTemplates()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('删除失败')
      }
    },
    openAiGenerate() {
      this.aiForm = { dimension: '', topic: '' }
      this.aiResult = null
      this.aiDialogVisible = true
    },
    async handleAiGenerate() {
      if (!this.aiForm.dimension || !this.aiForm.topic) {
        this.$message.warning('请选择维度并输入主题')
        return
      }
      this.aiLoading = true
      this.aiResult = null
      try {
        var res = await aiGenerateSurveyQuestions({ dimension: this.aiForm.dimension, topic: this.aiForm.topic })
        this.aiResult = typeof res.data === 'string' ? res.data : JSON.stringify(res.data, null, 2)
      } catch (e) {
        this.$message.error('AI生成失败: ' + (e.message || '未知错误'))
      } finally {
        this.aiLoading = false
      }
    },
    saveAiResult() {
      if (!this.aiResult) return
      try {
        var questions = typeof this.aiResult === 'string' ? JSON.parse(this.aiResult) : this.aiResult
        this.form = this.emptyForm()
        this.form.title = this.aiForm.topic + '调研'
        this.form.dimension = this.aiForm.dimension
        this.form.questions = questions
        this.form.aiGenerated = 1
        this.aiDialogVisible = false
        this.editDialogVisible = true
      } catch (e) {
        this.$message.error('解析AI结果失败，请检查格式')
      }
    }
  }
}
</script>

<style scoped>
.admin-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-page-title {
  font-size: 16px;
  font-weight: bold;
  margin-right: auto;
}
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
.sort-tag {
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
}
</style>