1

1

src/router/index.js

@@ -438,7 +438,10 @@ export const asyncRoutes = {
   // 报表中心 下载列表
   downList:()=>import('@/views/reportForm/downList'),
   // 乐器置换
-  reaplceMusicPlayer:()=>import('@/views/reaplceMusicPlayer')
+  reaplceMusicPlayer:()=>import('@/views/reaplceMusicPlayer'),
+  // 问卷管理
+  setQuestions: () => import('@/views/setQuestions'),
+  questionOperation: () => import('@/views/setQuestions/operation'),
 }
 
 export default router

src/views/setQuestions/api.js

@@ -0,0 +1,25 @@
+import request2 from '@/utils/request2'
+
+export const questionnaireTopicQueryPage = data => request2({
+    url: '/api-web/questionnaireTopic/queryPage',
+    params: data,
+    method: 'get',
+})
+
+export const questionnaireTopicGetDetail = data => request2({
+    url: '/api-web/questionnaireTopic/getDetail',
+    params: data,
+    method: 'get',
+})
+
+export const questionnaireTopicAdd = data => request2({
+    url: '/api-web/questionnaireTopic/add',
+    data,
+    method: 'post'
+})
+
+export const questionnaireTopicUpdate = data => request2({
+    url: '/api-web/questionnaireTopic/update',
+    data,
+    method: 'post'
+})

src/views/setQuestions/components/questionList.vue

@@ -0,0 +1,96 @@
+<template>
+<el-form :model="form" ref="form" label-width="100px" class="question">
+    <el-row>
+        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+            <el-form-item label="题目类型" prop="type" :rules="[{ required: true, message: '请选择题目类型', trigger: 'change' }]">
+                    <el-select v-model="form.type" placeholder="请选择题目类型">
+                        <el-option label="单选" value="radio"></el-option>
+                        <el-option label="多选" value="checkbox"></el-option>
+                        <el-option label="问答" value="textarea"></el-option>
+                    </el-select>
+                </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+            <el-form-item label="是否必填" prop="isRequire" :rules="[{ required: true, message: '请选择是否必填', trigger: 'change' }]">
+                <el-select v-model="form.isRequire" placeholder="请选择是否必填">
+                    <el-option label="是" :value="1"></el-option>
+                    <el-option label="否" :value="0"></el-option>
+                </el-select>
+            </el-form-item>
+        </el-col>
+    </el-row>
+    <el-form-item label="题目" prop="content" :rules="[{ required: true, message: '请输入题目', trigger: 'blur' }]">
+        <el-input type="textarea" placeholder="请输入题目" v-model="form.content" show-word-limit maxlength="200" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
+    </el-form-item>
+
+    <template v-if="form.type != 'textarea'">
+        <div v-for="(questionnaireQuestionItemList, index) in form.questionnaireQuestionItemList" :key="index">
+            <el-form-item :label="'选项' + (index + 1)"
+                style="display: inline-block;"
+                :prop="'questionnaireQuestionItemList.' + index + '.answerValue'"
+                :rules="[{ required: true, message: '请输入选项内容', trigger: 'change' }]">
+                <el-input type="text" placeholder="请输入选项内容" v-model="questionnaireQuestionItemList.answerValue"></el-input>
+            </el-form-item>
+            <el-form-item label="是否终止答题"
+                style="display: inline-block;"
+                label-width="120px"
+                :prop="'questionnaireQuestionItemList.' + index + '.isOver'"
+                :rules="[{ required: true, message: '请选择是否终止答题', trigger: 'change' }]">
+                <el-radio-group v-model="questionnaireQuestionItemList.isOver" style="margin-right: 20px">
+                    <el-radio :label="1">是</el-radio>
+                    <el-radio :label="0">否</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <div style="display: inline-block;">
+                <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
+                    <el-button icon="el-icon-top" circle size="small" @click="moveDown(form.questionnaireQuestionItemList, index)" :disabled="index == 0"></el-button>
+                </el-tooltip>
+                <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
+                    <el-button icon="el-icon-bottom" circle size="small" @click="moveUp(form.questionnaireQuestionItemList, index)" :disabled="form.questionnaireQuestionItemList.length <= 1 || form.questionnaireQuestionItemList.length == (index + 1)"></el-button>
+                </el-tooltip>
+                <el-tooltip class="item" effect="dark" content="删除" placement="top">
+                    <el-button icon="el-icon-delete" circle size="small" @click="onDelete(form.questionnaireQuestionItemList, index)" :disabled="form.questionnaireQuestionItemList.length <= 1"></el-button>
+                </el-tooltip>
+            </div>
+        </div>
+        <el-form-item>
+            <el-button style="width: 200px" type="default" icon="el-icon-plus" :disabled="form.questionnaireQuestionItemList.length >= 10" @click="addQuestionItem(form.questionnaireQuestionItemList)">新增选项</el-button>
+        </el-form-item>
+    </template>
+</el-form>
+</template>
+<script>
+export default {
+    props: ['form'],
+    data () {
+        return {
+        }
+    },
+    mounted () {
+    },
+    methods: {
+        // 添加题目选项
+        addQuestionItem(questionnaireQuestionItemLists) {
+            questionnaireQuestionItemLists.push({})
+        },
+        // 向上移动
+        moveUp(arr, index) {
+            arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
+        },
+        // 向下移动
+        moveDown(arr, index) {
+            arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
+
+        },
+        // 删除选项
+        onDelete(arr, index) {
+            arr.splice(index, 1)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.question .el-select {
+    width: 100% !important;
+}
+</style>

src/views/setQuestions/index.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class='m-container'>
+    <h2>
+      <div class="squrt"></div>问卷管理
+    </h2>
+    <div class="m-core">
+        <el-button type="primary" @click="onQuestionOperation('create')"
+           v-permission="'organization/add'"
+           class='newBand'>添加问卷</el-button>
+        <save-form :inline="true"
+               @submit="search"
+               @reset="onReSet"
+               ref="searchForm"
+               :model="searchForm">
+        <el-form-item prop="search">
+            <el-input
+                type="text"
+                clearable
+                v-model="searchForm.search"
+                placeholder="问卷编号或编号"
+            ></el-input>
+        </el-form-item>
+        <el-form-item prop="status">
+          <el-select v-model="searchForm.status"
+                     filterable
+                     placeholder="请选择收费类型"
+                     clearable>
+            <el-option label="启用" :value="1"></el-option>
+            <el-option label="停用" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="danger" native-type="submit">搜索</el-button>
+          <el-button native-type="reset" type="primary">重置</el-button>
+        </el-form-item>
+      </save-form>
+      <!-- 列表 -->
+      <div class="tableWrap">
+        <el-table :data='tableList'
+                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+          <el-table-column align='center'
+                           prop="id"
+                           label="问卷编号">
+            <template slot-scope="scope">
+              <copy-text>{{ scope.row.id }}</copy-text>
+            </template>
+          </el-table-column>
+          <el-table-column align='center'
+                           prop="title"
+                           label="问卷名称">
+            <template slot-scope="scope">
+              <!-- <copy-text>{{ scope.row.title }}</copy-text> -->
+              <overflow-text :text="scope.row.title" ></overflow-text>
+            </template>
+          </el-table-column>
+          <el-table-column align='center'
+                           prop="status"
+                           label="状态">
+            <template slot-scope="scope">
+              {{ scope.row.status ? '开启' : '关闭' }}
+            </template>
+          </el-table-column>
+          <el-table-column align='center'
+                           label="操作">
+            <template slot-scope="scope">
+              <el-button @click="onOperation(scope.row)"
+                         type="text">{{ scope.row.status ? '停用' : '启用' }}</el-button>
+              <el-button @click="onQuestionOperation('update', scope.row)"
+                         v-permission="'organization/update'"
+                         type="text">修改</el-button>
+              <el-button @click="onOperation(scope.row, 'del')"
+                         type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination sync :total.sync="pageInfo.total"
+                    :page.sync="pageInfo.page"
+                    :limit.sync="pageInfo.limit"
+                    :page-sizes="pageInfo.page_size"
+                    @pagination="getList" />
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import pagination from '@/components/Pagination/index'
+import { questionnaireTopicQueryPage, questionnaireTopicUpdate } from './api'
+export default {
+  name: 'branchSetting',
+  components: { pagination },
+  data () {
+    return {
+        searchForm: {
+            search: null,
+            status: null
+        },
+        tableList: [],
+        pageInfo: {
+            // 分页规则
+            limit: 10, // 限制显示条数
+            page: 1, // 当前页
+            total: 0, // 总条数
+            page_size: [10, 20, 40, 50] // 选择限制显示条数
+        },
+        organId: null,
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    getList () {
+      questionnaireTopicQueryPage({
+        rows: this.pageInfo.limit,
+        page: this.pageInfo.page,
+        ...this.searchForm
+      }).then(res => {
+        if (res.code == 200 && res.data) {
+          this.tableList = res.data.rows
+          this.pageInfo.total = res.data.total
+        }
+      })
+    },
+    onQuestionOperation(type, row) {
+        let str = '问卷'
+        str = (type == 'create' ? '添加' : '修改') + str
+        let params = {
+          type
+        }
+        if(type == 'update') {
+          params.id = row.id
+        }
+        this.$router.push({
+            path: '/operateManager/questionOperation',
+            query: params
+        }, (router) => {
+            router.meta.title = str;
+        })
+    },
+    async onOperation(row, type) {
+      let str = row.status ? '停用' : '启用'
+      if(type == 'del') {
+        str = '删除'
+      }
+      this.$confirm(`是否${str}该问卷？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+            if(type == 'del') {
+              await questionnaireTopicUpdate({ id: row.id, delFlag: 1 })
+            } else {
+              let status = row.status
+              await questionnaireTopicUpdate({ id: row.id, status: !status })
+            }
+            this.$message.success(str + '成功')
+            this.getList()
+        } catch {
+          //
+        }
+      })
+    },
+    search() {
+      this.pageInfo.page = 1;
+      this.getList();
+    },
+    onReSet() {
+      this.$refs['searchForm'].resetFields();
+      this.search();
+    },
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+/deep/.el-button--primary {
+  background: #14928a;
+  border-color: #14928a;
+  color: #fff;
+  &:hover,
+  &:active,
+  &:focus {
+    background: #14928a;
+    border-color: #14928a;
+    color: #fff;
+  }
+}
+/deep/.el-date-editor.el-input {
+  width: 100% !important;
+}
+/deep/.el-select {
+  width: 98% !important;
+}
+</style>

src/views/setQuestions/operation.vue

@@ -0,0 +1,186 @@
+<template>
+<div class='m-container'>
+    <h2>
+      <el-page-header @back="onCancel" :content="type == 'create' ? '添加问卷' : '修改问卷'"></el-page-header>
+    </h2>
+    <div class="m-core">
+        <el-row>
+            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
+                <el-form ref="form" :model="form" label-width="80px">
+                    <el-form-item label="问卷名称" prop="title" :rules="[{ required: true, message: '请输入问卷名称', trigger: 'blur' }]">
+                        <el-input v-model="form.title" placeholder="请输入问卷名称"></el-input>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18" v-for="(item, index) in form.questionnaireQuestionList" :key="index" style="padding: 22px; background-color: #eef4f9; margin-bottom: 10px;">
+                <el-row type="flex" align="middle" style="padding-bottom: 15px;">
+                    <el-col :span="12">
+                        <span style="width: 80px; text-align: right;display: inline-block;">问题{{ index + 1 }}</span>
+                    </el-col>
+                    <el-col :span="12" style="text-align: right; padding-right: 15px;">
+                        <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
+                            <el-button icon="el-icon-top" circle size="small" @click="moveDown(form.questionnaireQuestionList, index)" :disabled="index == 0"></el-button>
+                        </el-tooltip>
+                        <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
+                            <el-button icon="el-icon-bottom" circle size="small" @click="moveUp(form.questionnaireQuestionList, index)" :disabled="form.questionnaireQuestionList.length <= 1 || form.questionnaireQuestionList.length == (index + 1)"></el-button>
+                        </el-tooltip>
+                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
+                            <el-button icon="el-icon-delete" circle size="small" @click="onDelete(form.questionnaireQuestionList, index)" :disabled="form.questionnaireQuestionList.length <= 1"></el-button>
+                        </el-tooltip>
+                    </el-col>
+                </el-row>
+                <question-list ref="questions" :form="item" />
+            </el-col>
+        </el-row>
+        <el-row style="padding-bottom: 15px;">
+            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18" style="text-align: center;">
+                <el-button style="width: 100%" type="default" @click="addQuestionItem(form.questionnaireQuestionList)" icon="el-icon-plus">新增问题</el-button>
+            </el-col>
+        </el-row>
+        <el-button type="primary" @click="onSubmit">提交问卷</el-button>
+        <el-button @click="onReset">重置</el-button>
+    </div>
+
+</div>
+</template>
+<script>
+import questionList from './components/questionList'
+import { questionnaireTopicAdd, questionnaireTopicGetDetail, questionnaireTopicUpdate } from './api'
+export default {
+    name: 'operationQuestion',
+    components: { questionList },
+    data () {
+        let query = this.$route.query
+        return {
+            type: query.type,
+            id: query.id,
+            form: {
+                title: null,
+                questionnaireQuestionList: [{questionnaireQuestionItemList: [{ }]}],
+            }
+        }
+    },
+    async mounted () {
+        if(this.type == 'update') {
+            try {
+                let res = await questionnaireTopicGetDetail({ id: this.id })
+                console.log(res)
+                this.form = res.data
+            } catch {
+                //
+            }
+        }
+    },
+    methods: {
+        getForms() {
+            const { $refs: refs } = this;
+            return [
+                refs.form,
+                ...(refs.questions || []),
+            ].filter((item) => !!item).map((item) => item.$refs.form || item);
+        },
+        setResultSort() { // 给问答结果排序
+            let form = this.form
+            form.questionnaireQuestionList.forEach((item, index) => {
+                item.sort = index
+                let itemList = item.questionnaireQuestionItemList
+                if(item.type != 'textarea') {
+                    itemList.forEach((child, index) => {
+                        child.sort = index
+                    })
+                } else {
+                    itemList = []
+                }
+            })
+        },
+        onSubmit() {
+            const forms = this.getForms();
+            Promise.all(forms.map(this.getFormPromise)).then(async (res) => {
+                const validateResult = res.every(item => !!item)
+                console.log(validateResult)
+                if(validateResult) {
+                    this.setResultSort()
+                    console.log(this.form)
+                    try {
+                        if(this.type == 'create') {
+                            await questionnaireTopicAdd(this.form)
+                            this.$message.success('添加成功')
+                        } else {
+                            await questionnaireTopicUpdate(this.form)
+                            this.$message.success('修改成功')
+                        }
+                        this.onCancel()
+                    } catch {
+                        //
+                    }
+                } else {
+                    this.$nextTick(() => {
+                        let isError = document.getElementsByClassName('is-error')
+                        isError[0].scrollIntoView({
+                            block: 'center',
+                            behavior: 'smooth',
+                        })
+                    })
+                    return false
+                }
+            })
+        },
+        getFormPromise(form) {
+            return new Promise(resolve => {
+                form.validate(res => {
+                    resolve(res);
+                })
+            })
+        },
+        onReset() {
+            const forms = this.getForms();
+            for(let form of forms) {
+                form.resetFields()
+            }
+        },
+        // 添加题目选项
+        addQuestionItem(questionnaireQuestionList) {
+            questionnaireQuestionList.push({questionnaireQuestionItemList: [{}]})
+        },
+        // 向上移动
+        moveUp(arr, index) {
+            arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
+        },
+        // 向下移动
+        moveDown(arr, index) {
+            arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
+
+        },
+        // 删除选项
+        onDelete(arr, index) {
+            arr.splice(index, 1)
+        },
+        onCancel () {
+            this.$store.dispatch('delVisitedViews', this.$route)
+            this.$router.push({ path: '/operateManager/setQuestions' })
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+/deep/.el-button--primary {
+  background: #14928a;
+  border-color: #14928a;
+  color: #fff;
+  &:hover,
+  &:active,
+  &:focus {
+    background: #14928a;
+    border-color: #14928a;
+    color: #fff;
+  }
+}
+/deep/.el-date-editor.el-input {
+  width: 100% !important;
+}
+/deep/.el-select {
+  width: 98% !important;
+}
+</style>

vue.config.js

@@ -55,7 +55,7 @@ module.exports = {
     //   warnings: false,
     //   errors: true
     // },
-    https: true,
+    https: false,
     proxy: {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy