|
|
@@ -0,0 +1,374 @@
|
|
|
+/**
|
|
|
+ * 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
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|