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、问卷表
2、问题表
3、选项表
4、答案表
5、回答记录表
6、java代码,根据表结构做对应的代码,代码过于多,自我完成