gubersail-platform-ui/src/views/survey/index.vue

<template>
  <basic-container>
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :model="searchForm" ref="searchForm" :inline="true" class="search-form">
        <el-form-item label="问卷编码" prop="surveyCode">
          <el-input
            v-model="searchForm.surveyCode"
            placeholder="请输入问卷编码"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="问卷标题" prop="title">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入问卷标题"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否模板" prop="isTemplate">
          <el-select
            v-model="searchForm.isTemplate"
            placeholder="请选择是否模板"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in templateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="searchForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="searchForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :loading="loading">
            <i class="el-icon-search"></i> 搜索
          </el-button>
          <el-button @click="handleResetSearch">
            <i class="el-icon-refresh"></i> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="toolbar">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleAdd"
      >
        新增问卷
      </el-button>
    </div>

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="60" align="center" />
      
      <el-table-column prop="surveyCode" label="问卷编码" width="150" show-overflow-tooltip />
      <el-table-column prop="title" label="问卷标题" width="200" show-overflow-tooltip />
      <el-table-column prop="description" label="问卷描述" width="250" show-overflow-tooltip />
      
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template slot-scope="{row}">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusLabel(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="isTemplate" label="是否模板" width="100" align="center">
        <template slot-scope="{row}">
          <el-tag :type="getTemplateType(row.isTemplate)">
            {{ getTemplateLabel(row.isTemplate) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="startTime" label="开始时间" width="160" show-overflow-tooltip />
      <el-table-column prop="endTime" label="结束时间" width="160" show-overflow-tooltip />
      <el-table-column prop="createTime" label="创建时间" width="160" show-overflow-tooltip />
      
      <el-table-column label="操作"  align="center" fixed="right">
        <template slot-scope="{row}">
          <el-button
            type="text"
            size="small"
            icon="el-icon-view"
            @click="handleView(row)"
          >
            查看
          </el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      />
    </div>

    <!-- 问卷表单弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="survey-form-dialog"
      @close="handleDialogClose"
    >
      <el-form
        :model="surveyForm"
        :rules="formRules"
        ref="surveyForm"
        label-width="120px"
        class="survey-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="问卷编码" prop="surveyCode">
              <el-input
                v-model="surveyForm.surveyCode"
                placeholder="请输入问卷编码"
                :disabled="isViewMode"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="surveyForm.status"
                placeholder="请选择状态"
                :disabled="isViewMode"
                style="width: 100%"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="24">
            <el-form-item label="问卷标题" prop="title">
              <el-input
                v-model="surveyForm.title"
                placeholder="请输入问卷标题"
                :disabled="isViewMode"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="24">
            <el-form-item label="问卷描述" prop="description">
              <el-input
                v-model="surveyForm.description"
                type="textarea"
                :rows="4"
                placeholder="请输入问卷描述"
                :disabled="isViewMode"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                v-model="surveyForm.startTime"
                type="datetime"
                placeholder="选择开始时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled="isViewMode"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="surveyForm.endTime"
                type="datetime"
                placeholder="选择结束时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled="isViewMode"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="是否模板" prop="isTemplate">
              <el-select
                v-model="surveyForm.isTemplate"
                placeholder="请选择是否模板"
                :disabled="isViewMode"
                style="width: 100%"
              >
                <el-option
                  v-for="item in templateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <div slot="footer" class="dialog-footer" v-if="!isViewMode">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
          :loading="submitLoading"
        >
          确定
        </el-button>
      </div>
      
      <div slot="footer" class="dialog-footer" v-else>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import surveyIndexMixin from '@/mixins/survey/surveyIndex'

export default {
  name: 'SurveyManagement',
  
  mixins: [surveyIndexMixin]
}
</script>

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