/** * 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 } }) } } }