gubersail-platform-ui/src/components/survey-question-editor/index.vue

<template>
  <div class="survey-question-editor">
    <!-- 题目列表 -->
    <div class="question-list">
      <div class="toolbar">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAddQuestion"
          :loading="loading"
        >
          新增题目
        </el-button>
      </div>

      <div class="question-items" v-loading="loading">
        <div
          v-for="(question) in questionList"
          :key="question.id"
          class="question-item"
        >
          <div class="question-header">
            <div class="question-info">
              <span class="question-no">{{ question.questionNo }}.</span>
              <span class="question-title">{{ question.title }}</span>
              <div style="margin-right: 20px;">
              <el-tag
                :type="getQuestionTypeType(question.questionType)"
                size="mini"
                class="question-type-tag"
                style="margin-right: 10px;"
              >
                <i :class="getQuestionTypeIcon(question.questionType)"></i>
                {{ getQuestionTypeLabel(question.questionType) }}
              </el-tag>
              <el-tag
                v-if="question.isRequired"
                type="danger"
                size="mini"
                class="required-tag"
              >
                必填
              </el-tag>
              </div>
            </div>
            <div class="question-actions">
              <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEditQuestion(question)"
                :loading="loading"
              >
                编辑
              </el-button>
              <el-button
                v-if="isQuestionTypeNeedOptions(question.questionType)"
                type="text"
                icon="el-icon-setting"
                @click="handleAddOption(question)"
                :loading="loading"
              >
                新增选项
              </el-button>
            </div>
          </div>

          <!-- 选项列表 -->
          <div
            v-if="question.options && question.options.length > 0"
            class="question-options"
          >
            <div
              v-for="option in question.options"
              :key="option.id"
              class="option-item"
            >
              <span class="option-no">{{ option.optionNo }}.</span>
              <span class="option-text">{{ option.optionText }}</span>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-edit"
                @click="handleEditOption(option)"
                class="option-edit-btn"
              >
                编辑
              </el-button>
            </div>
          </div>
        </div>

        <div v-if="questionList.length === 0" class="empty-state">
          <i class="el-icon-document"></i>
          <p>暂无题目，点击上方按钮添加题目</p>
        </div>
      </div>
    </div>

    <!-- 题目编辑对话框 -->
    <el-dialog
      :title="questionDialogTitle"
      :visible.sync="questionDialogVisible"
      append-to-body
      width="600px"
      :close-on-click-modal="false"
      @close="handleCloseQuestionDialog"
    >
      <el-form
        ref="questionForm"
        :model="questionForm"
        :rules="questionFormRules"
        label-width="100px"
        class="question-form"
      >
        <el-form-item label="题目序号" prop="questionNo">
          <el-input-number
            v-model="questionForm.questionNo"
            :min="1"
            :max="999"
            placeholder="请输入题目序号"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="题目标题" prop="title">
          <el-input
            v-model="questionForm.title"
            type="textarea"
            :rows="3"
            placeholder="请输入题目标题"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="题目类型" prop="questionType">
          <el-select
            v-model="questionForm.questionType"
            placeholder="请选择题目类型"
            style="width: 100%"
          >
            <el-option
              v-for="option in questionTypeOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            >
              <i :class="getQuestionTypeIcon(option.value)"></i>
              {{ option.label }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否必填" prop="isRequired">
          <el-radio-group v-model="questionForm.isRequired">
            <el-radio
              v-for="option in questionRequiredOptions"
              :key="option.value"
              :label="option.value"
            >
              {{ option.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseQuestionDialog">取消</el-button>
        <el-button
          type="primary"
          @click="handleSubmitQuestion"
          :loading="loading"
        >
          确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 选项管理对话框 -->
    <el-dialog
      title="管理选项"
      :visible.sync="optionDialogVisible"
      append-to-body
      width="800px"
      :close-on-click-modal="false"
      @close="currentQuestionOptions = []"
    >
      <div class="option-management">
        <div class="option-toolbar">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="handleAddOption"
            :loading="loading"
          >
            新增选项
          </el-button>
        </div>

        <div class="option-list">
          <div
            v-for="option in currentQuestionOptions"
            :key="option.id"
            class="option-item-manage"
          >
            <div class="option-content">
              <span class="option-no">{{ option.optionNo }}.</span>
              <span class="option-text">{{ option.optionText }}</span>
            </div>
            <div class="option-actions">
              <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEditOption(option)"
                :loading="loading"
              >
                编辑
              </el-button>
            </div>
          </div>

          <div v-if="currentQuestionOptions.length === 0" class="empty-options">
            <i class="el-icon-info"></i>
            <p>暂无选项，点击上方按钮添加选项</p>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 选项编辑对话框 -->
    <el-dialog
      :title="optionDialogTitle"
      :visible.sync="optionAddDialogVisible"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
      @close="handleCloseOptionDialog"
    >
      <el-form
        ref="optionForm"
        :model="optionForm"
        :rules="optionFormRules"
        label-width="100px"
        class="option-form"
      >
        <el-form-item label="选项序号" prop="optionNo">
          <el-input-number
            v-model="optionForm.optionNo"
            :min="1"
            :max="999"
            placeholder="请输入选项序号"
            style="width: 100%"
          />
        </el-form-item>


        <el-form-item label="选项内容" prop="optionText">
          <el-input
            v-model="optionForm.optionText"
            type="textarea"
            :rows="2"
            placeholder="请输入选项内容"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseOptionDialog">取消</el-button>
        <el-button
          type="primary"
          @click="handleSubmitOption"
          :loading="loading"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import questionEditorMixin from '@/mixins/survey/questionEditor'

export default {
  name: 'SurveyQuestionEditor',
  mixins: [questionEditorMixin]
}
</script>

<style lang="scss" scoped>
@import './index.scss';

</style>