学生试卷，java,vue，mysql_vue3 100个问题调查表设计样式-优快云博客

本文链接：https://blog.youkuaiyun.com/wshhcsdn/article/details/143961974
pc端制定问卷，学生在手机上完成答题提交
 <!-- 添加或修改食堂问卷对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
      <el-form ref="CanteenSurveysRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="问卷标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入问卷标题" />
        </el-form-item>
        <el-form-item label="问卷说明" prop="contentDescription">
          <el-input type="textarea"   v-model="form.contentDescription" placeholder="请填写模板说明（200字以内）" />
        </el-form-item>
        <el-form-item label="题目列表" v-if="showQuestion" class="add-wt" prop="questionList">
          <el-button plain @click="clickDialogVisible">+新增问题</el-button>
          <ol>
            <li v-for="(item, index2) in questionList" :key="item.id">
              <dl>
                <dt >{{ item.content }}</dt>
                <el-radio v-model="radio" :label="index2" v-for="(item, index) in item.optionsList"
                          :key="index2">{{ item.content }}</el-radio>
              </dl>
              <div class="operation">
                <el-button size="mini" @click="handleEditQuestion(item)">编辑</el-button>
                <el-popconfirm title="您确定要删除吗" @confirm="deleteItem(item,index2)">
                  <template #reference>
                    <el-button size="mini" slot="reference">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </li>
          </ol>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
      <!-- 新增内容弹框 -->
      <el-dialog title="新增题目" v-model="dialogVisible"  width="40%" @close="cancelDialog2">
        <div style="margin-top: 10px;">
          <el-form :model="questionForm"  :rules="questionRules" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="问题内容：" prop="content">
              <el-input v-model="questionForm.content"></el-input>
            </el-form-item>
            <el-form-item label="选项：" prop="optionsList">
              <el-button plain size="mini" @click="addLine()" style="margin-bottom: 10px;">+新增选项</el-button>
              <el-table :data="questionForm.optionsList" style="width: 100%" border class="tableBB">
                <el-table-column label="序号" type="index" width="55" align="center">
                </el-table-column>
                <el-table-column prop="content" label="选项" min-width="60px" align="center">
                  <template #default="{ row, $index }">
                    <el-input
                      v-if="$index === editingIndex"
                      v-model="row.content"
                      placeholder="请输入选项内容"
                      size="small"
                    >
                    </el-input>
                    <span v-else>{{ row.content }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="150px">
                  <template #default="{ row, $index }">
                    <div class="flex flex-row justify-center items-center">
                      <template v-if="$index === editingIndex">
                        <el-button
                          type="success"
                          size="small"
                          plain
                          @click="handleSaveOP(row, $index)"
                        >保存</el-button
                        >
                        <el-button
                          type="info"
                          size="small"
                          plain
                          @click="handleCancelOP(row, $index)"
                        >取消</el-button
                        >
                      </template>
                      <template v-else>
                        <el-button
                          type="primary"
                          size="small"
                          plain
                          @click="handleEditOP(row, $index)"
                        >
                          修改
                        </el-button>
                        <el-popconfirm
                          title="是否确认删除？"
                          @confirm="handleDeleteOP(row, $index)"
                          style="margin-left: 10px"
                        >
                          <template #reference>
                            <el-button type="danger" size="small" plain>删除</el-button>
                          </template>
                        </el-popconfirm>
                      </template>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer" style="display:flex;justify-content: right;">
                <el-button @click="cancelDialog2">取 消</el-button>
                <el-button type="primary" @click="submitCanteenQuestionsForm">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog   width="750px" v-model="opendept" append-to-body>
      <el-form ref="numberRef"  label-width="80px"  label-position="top">
        <el-row :gutter="20" style="margin-top: 15px;">
          <el-col :span="10">
            <el-form-item label="部门" prop="companyId" v-loading="deptLoading">
              <div class="" style="overflow-y: scroll;height: 520px;" >
              <el-tree ref='deptTree' node-key='id' :data='qwDeptList' :props='defaultProps'
                       :expand-on-click-node='false' :filter-node-method='handlerFilterDept'
                       @node-click='handlerFilterUser' highlight-current default-expand-all/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="人员" prop="companyId">
              <el-table ref='userTable' :data='qwUserList' @selection-change="handleSelectionRowClick"  height="520">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column width="150" label="业微信用户ID" align="center" key="userid" prop="userid"/>
                <el-table-column label="企业微信用户名称" align="center" key="name" prop="name"/>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDeptUserForm">保 存</el-button>
          <el-button @click="cancelDeptUser">取 消</el-button>
        </div>
      </template>
    </el-dialog>

<script setup name="CanteenSurveys">


const showQuestion=ref(false)
const { proxy } = getCurrentInstance();
const editingIndex = ref(-1)
const CanteenSurveysList = ref([]);
const open = ref(false);
const loading = ref(true);
const deptLoading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dialogVisible=ref(false);
const surveyId=ref(null);
const questionId=ref(null);
const optionId=ref(null);
const opendept=ref(false)
const questionForm= ref({
  content:null,
  optionsList:[]
  },)
const  questionList=ref([])
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    title: null,
  },
  rules: {
    title: [{ required: true, message: '请输入问卷标题', trigger: 'blur' }]
  },
  questionRules: {
    content: [{ required: true, message: '请输入问题内容', trigger: 'blur' }]
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询食堂问卷列表 */
function getList() {
  loading.value = true;
  listCanteenSurveys(queryParams.value).then(response => {
    CanteenSurveysList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
  const qwDeptList=ref([]);
  const qwUserList=ref([]);
  function getQwDeptTree() {
    getQwDeptTreeApi({}).then(response => {
      qwDeptList.value = response.data;
      deptLoading.value = false;
    });
  }
  // 部门树组件默认参数
  const defaultProps = {
    children: 'children',
    label: 'name',
  }
  /** 部门过滤处理 */
  function handlerFilterDept (value, data){
    if (!value) return true
    return data.name.indexOf(value) !== -1
  }
  /** 用户过滤处理 */
  function handlerFilterUser (data){
    //queryParams.value.deptId = data.id
    getQwUserListByQwdeptIdApi({
      deptId: data.id
    }).then(response => {
      qwUserList.value = response.data;
    });
  }
  function getQwUserList() {
    getQwUserListByQwdeptIdApi({
    }).then(response => {
      qwUserList.value = response.data;
    });
  }
// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

  // 取消部门用户按钮
  function cancelDeptUser() {
    opendept.value = false;
  }

// 表单重置
function reset() {
  form.value = {
    id: null,
    title: null,
    createBy: null,
    createTime: null
  };
  proxy.resetForm("CanteenSurveysRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
const userids = ref([]);
  function handleSelectionRowClick(selection) {
    userids.value = selection.map(item => item.userid);
  }
/** 新增按钮操作 */
function handleAdd() {
  reset();
  showQuestion.value=false;
  form.value ={};
  questionForm.value={};
  open.value = true;
  title.value = "添加食堂问卷";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  surveyId.value = _id;
  showQuestion.value=true;
  getCanteenSurveys(_id).then(response => {
    form.value = response.data;
    questionList.value = response.data.questionsList
    open.value = true;
    title.value = "修改食堂问卷";
  });
}
/*发起问卷调查*/
  function handleInitiateSurveys(row) {
    reset();
    deptLoading.value=true;
    qwDeptList.value=[];
    qwUserList.value=[];
    getQwDeptTree();
    getQwUserList();
    const _id = row.id || ids.value
    surveyId.value=_id;
    judgeIssuedBySurveysIdApi({
      surveysId:_id
    }).then(response => {
      if(response.data){
        opendept.value = true;
      }
    });



  }
  /*选择人员发起问卷调查*/
  function submitDeptUserForm() {
    if(!userids){
      proxy.$modal.msgWarning("未选择下发人员！");
      return
    }
      initiateSurveysApi({
        userids:userids.value,
        id:surveyId.value
      }).then(response => {
        proxy.$modal.msgSuccess("发起成功");
        opendept.value = false;
        getList();
      });
  }
  /** 修改问题按钮操作 */
  function handleEditQuestion(item) {
    const _id = item.id;
    editingIndex.value=-1;
    getCanteenQuestionsApi(_id).then(response => {
      questionForm.value = response.data;
      dialogVisible.value=true;
    });
  }

/** 提交按钮 */
function submitForm() {
  proxy.$refs["CanteenSurveysRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateCanteenSurveys(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addCanteenSurveys(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          if(response.code==200 && response.data.id){
            handleUpdate(response.data)
            proxy.$modal.closeLoading();
          }else {
            getList();
          }

        });
      }
    }
  });
}

  function submitCanteenQuestionsForm() {
    questionForm.value.surveyId=surveyId.value;
    if(questionForm.value.id){
      updateQuestionsApi(questionForm.value).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        dialogVisible.value = false;
        //添加成功后回显
        getCanteenSurveys(surveyId.value).then(response => {
          form.value = response.data;
          questionList.value = response.data.questionsList
          open.value = true;
          title.value = "修改食堂问卷";
        });
      });
    }else {
      addCanteenQuestiosApi(questionForm.value).then(response => {
        proxy.$modal.msgSuccess("新增成功");
        dialogVisible.value = false;
        //添加成功后回显
        getCanteenSurveys(surveyId.value).then(response => {
          form.value = response.data;
          questionList.value = response.data.questionsList
          open.value = true;
          title.value = "修改食堂问卷";
        });
      });
    }

  }

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除食堂问卷编号为"' + _ids + '"的数据项？').then(function() {
    return delCanteenSurveys(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

  function handleDeleteOption(row) {
    const _ids = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除选项编号为"' + _ids + '"的数据项？').then(function() {
      return delCanteenOptionsApi(_ids);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }

/** 导出按钮操作 */
function handleExport() {
  proxy.download('sflcfgs/CanteenSurveys/export', {
    ...queryParams.value
  }, `CanteenSurveys_${new Date().getTime()}.xlsx`)
}
function clickDialogVisible() {
  questionForm.value={
    optionsList:[],
  };
  editingIndex.value=-1;
  dialogVisible.value=true;
}
  //删除内容
  function deleteItem(item,index) {
    this.questionList.splice(index, 1);
    if(item.id){
      delCanteenQuestionsApi(item.id);
    }
  }
  //编辑题目
  function editContent(item) {
/*    this.questionForm = { ...item }
    if (this.questionForm.require == true) {
      this.questionForm.require = '是'
    } else {
      this.questionForm.require = '否'
    }
    console.log(this.questionForm, '点击编辑查看当前表单')*/
    dialogVisible.value = true
  }
  function cancelDialog2() {
    dialogVisible.value = false
  }
  const addObj = ref({
    content:'',
    question_id:questionId.value,
    isRepulsion: false
  });
  const addContractRow={
    content:''
  }
  const beforeEditRow={
    content:''
  }
  /* 添加新的一行 (默认是可编辑状态)*/
  function addLine() {
    if (editingIndex.value > -1) {
      ElMessage.warning('请先完成修改中的行')
      return
    }
    //questionForm.value.optionsList.push(Object.assign({}, obj));
    editingIndex.value = questionForm.value.optionsList.length
    questionForm.value.optionsList.push({...addContractRow})
  }
  function handleSaveOP(row,index){
    if (!row.content) {
      ElMessage.warning('请填写所有必填字段再保存')
      return
    }
    questionForm.value.optionsList[index] = { ...row }
    resetTableOP()
  }

  const resetTableOP = () => {
    editingIndex.value = -1
    beforeEditRow.value = { ...addContractRow }
  }
  function handleEditOP (row, index)  {
    if (editingIndex.value > -1) {
      ElMessage.warning('请先完成修改中的行')
      return
    }
    beforeEditRow.value = { ...row }
    editingIndex.value = index
  }
  function handleCancelOP(row, index)  {
    if (Object.values(beforeEditRow.value).some((value) => value !== '')) {
      questionForm.value.optionsList[index] = { ...beforeEditRow.value }
    } else {
      questionForm.value.optionsList.splice(index, 1)
    }
    resetTableOP()
  }
  function handleDeleteOP(row, index) {
    questionForm.value.optionsList.splice(index, 1)
  }
getList();
</script>
mysql
1、问卷表