gubersail-platform-ui/src/mixins/survey/surveyCrudMixin.js

/**
 * Survey模块avue-crud配置mixin
 * @fileoverview 提供基于avue-crud的调查问卷管理功能
 * @author 开发者
 * @date 2024-XX-XX
 */

import {
  getList,
  add,
  update,
  getDetail
} from '@/api/survey/survey'
import {
  SURVEY_STATUS_OPTIONS,
  SURVEY_TEMPLATE_OPTIONS,
  getSurveyStatusLabel,
  getSurveyStatusType,
  getSurveyTemplateLabel,
  getSurveyTemplateType
} from '@/constants/survey'

export default {
  data() {
    return {
      // avue-crud标准配置
      option: {
        height: 'auto',
        calcHeight: 80,
        tip: false,
        searchShow: true,
        searchMenuSpan: 12,
        searchIndex: 3,
        border: true,
        index: true,
        viewBtn: true,
        editBtn: true,
        delBtn: false, // 暂时禁用删除
        addBtn: true,
        selection: false,
        dialogClickModal: false,
        menu: true,
        menuWidth: 200,
        column: [
          // 问卷编码列
          {
            label: '问卷编码',
            prop: 'surveyCode',
            width: 150,
            search: true,
            rules: [{
              required: true,
              message: '请输入问卷编码',
              trigger: 'blur'
            }, {
              min: 3,
              max: 50,
              message: '长度在 3 到 50 个字符',
              trigger: 'blur'
            }, {
              pattern: /^[A-Za-z0-9_-]+$/,
              message: '只能包含字母、数字、下划线和横线',
              trigger: 'blur'
            }]
          },
          // 问卷标题列
          {
            label: '问卷标题',
            prop: 'title',
            minWidth: 200,
            search: true,
            overHidden: true,
            rules: [{
              required: true,
              message: '请输入问卷标题',
              trigger: 'blur'
            }, {
              min: 2,
              max: 100,
              message: '长度在 2 到 100 个字符',
              trigger: 'blur'
            }]
          },
          // 问卷描述列
          {
            label: '问卷描述',
            prop: 'description',
            minWidth: 250,
            search: false,
            overHidden: true,
            type: 'textarea',
            span: 24,
            minRows: 3,
            maxRows: 6,
            rules: [{
              required: true,
              message: '请输入问卷描述',
              trigger: 'blur'
            }, {
              min: 5,
              max: 500,
              message: '长度在 5 到 500 个字符',
              trigger: 'blur'
            }]
          },
          // 状态列
          {
            label: '状态',
            prop: 'status',
            width: 100,
            search: true,
            type: 'select',
            dicData: SURVEY_STATUS_OPTIONS,
            slot: true,
            rules: [{
              required: true,
              message: '请选择状态',
              trigger: 'change'
            }]
          },
          // 是否模板列
          {
            label: '是否模板',
            prop: 'isTemplate',
            width: 100,
            search: true,
            type: 'select',
            dicData: SURVEY_TEMPLATE_OPTIONS,
            slot: true
          },
          // 开始时间列
          {
            label: '开始时间',
            prop: 'startTime',
            width: 160,
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            searchRange: true,
            search: true,
            rules: [{
              required: true,
              message: '请选择开始时间',
              trigger: 'change'
            }]
          },
          // 结束时间列
          {
            label: '结束时间',
            prop: 'endTime',
            width: 160,
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            searchRange: true,
            search: true,
            rules: [{
              required: true,
              message: '请选择结束时间',
              trigger: 'change'
            }]
          },
          // 创建时间列
          {
            label: '创建时间',
            prop: 'createTime',
            width: 160,
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            addDisplay: false,
            editDisplay: false,
            search: false
          }
        ]
      },

      // 数据和分页
      data: [],
      page: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      },

      // 查询和表单
      query: {},
      form: {},
      loading: true,

      // 题目编辑相关
      questionEditorVisible: false,
      currentSurveyId: null,

      // 权限配置
      permissionList: {
        addBtn: true,
        viewBtn: true,
        editBtn: true,
        delBtn: false
      }
    }
  },


  mounted() {
    this.onLoad(this.page)
  },

  methods: {
    // 导入工具函数
    getSurveyStatusLabel,
    getSurveyStatusType,
    getSurveyTemplateLabel,
    getSurveyTemplateType,

    // avue-crud标准方法
    async onLoad(page, params = {}) {
      this.loading = true
      try {
        // 处理时间范围查询
        const queryParams = { ...params }
        if (queryParams.startTime && Array.isArray(queryParams.startTime)) {
          queryParams.startTimeStart = queryParams.startTime[0]
          queryParams.startTimeEnd = queryParams.startTime[1]
          delete queryParams.startTime
        }
        if (queryParams.endTime && Array.isArray(queryParams.endTime)) {
          queryParams.endTimeStart = queryParams.endTime[0]
          queryParams.endTimeEnd = queryParams.endTime[1]
          delete queryParams.endTime
        }

        const response = await getList(
          page.currentPage,
          page.pageSize,
          queryParams
        )

        if (response.data && response.data.success) {
          const { records, total } = response.data.data
          this.data = records || []
          this.page.total = total || 0
        } else {
          this.$message.error(response.data?.msg || '获取数据失败')
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message.error('加载数据失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },

    searchChange(params, done) {
      this.query = params
      this.onLoad(this.page, params)
      done()
    },

    searchReset(done) {
      this.query = {}
      this.onLoad(this.page)
      done()
    },


    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },

    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    refreshChange() {
      this.onLoad(this.page, this.query)
    },

    // CRUD操作
    async beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
        try {
          const response = await getDetail(this.form.id)
          if (response.data && response.data.success) {
            this.form = response.data.data
          } else {
            this.$message.error('获取详情失败')
            return
          }
        } catch (error) {
          console.error('获取详情失败:', error)
          this.$message.error('获取详情失败')
          return
        }
      }
      done()
    },

    async rowSave(row, done, loading) {
      try {
        // 时间验证
        if (new Date(row.startTime) >= new Date(row.endTime)) {
          this.$message.error('开始时间必须小于结束时间')
          loading()
          return
        }

        const response = await add(row)
        if (response.data && response.data.success) {
          this.$message.success('新增问卷成功')
          this.onLoad(this.page)
          done()
        } else {
          this.$message.error(response.data?.msg || '新增失败')
          loading()
        }
      } catch (error) {
        console.error('新增失败:', error)
        this.$message.error('新增失败，请稍后重试')
        loading()
      }
    },

    async rowUpdate(row, index, done, loading) {
      try {
        // 时间验证
        if (new Date(row.startTime) >= new Date(row.endTime)) {
          this.$message.error('开始时间必须小于结束时间')
          loading()
          return
        }

        const response = await update(row)
        if (response.data && response.data.success) {
          this.$message.success('更新问卷成功')
          this.onLoad(this.page)
          done()
        } else {
          this.$message.error(response.data?.msg || '更新失败')
          loading()
        }
      } catch (error) {
        console.error('更新失败:', error)
        this.$message.error('更新失败，请稍后重试')
        loading()
      }
    },

    // 题目编辑功能
    handleEditQuestions(row) {
      this.currentSurveyId = row.id
      this.questionEditorVisible = true

      this.$nextTick(() => {
        if (this.$refs.questionEditor) {
          this.$refs.questionEditor.loadQuestionList()
        }
      })
    },

    handleCloseQuestionEditor() {
      this.questionEditorVisible = false
      this.currentSurveyId = null

      this.$nextTick(() => {
        if (this.$refs.questionEditor) {
          this.$refs.questionEditor = null
        }
      })
    }

  }
}