工作日志与问卷

我负责工作日志和问卷相关的样式设计，与后端数据库的交互交由队长负责。

一、工作日志

1.1工作日志

左边包括时间、编辑与删除按钮，右部分包括标题和详细内容。

部分样式如下，及效果图。

<view class="main"><view class="log" v-for="(item,index) in userList" :key="index"><view><view class="time">{{item.time}}</view><view class="btn"><view class="edit-btn" @tap="editlog(item.id,item.title,item.details)">编辑</view><view class="delete-btn" @tap="deletelog(item.id)">删除</view></view></view><view class="log-content"><view class="title">{{item.title}}</view><view class="details">{{item.details}}</view></view></view>
</view>.log-content{margin-top: 20rpx;.title{padding-left: 10rpx;border-left: 3px solid $uni-color-success;font-size: 40rpx;font-weight: 600;}.details{margin-top:10rpx;padding-left: 10rpx;border-left: 3px dotted $uni-color-success;display: flex;align-items: center;padding-bottom: 20rpx;font-size: 34rpx;margin-right: 20rpx;text-indent:2em;border-bottom: 1px solid $uni-border-color;}
}

1.2创建/修改工作日志

通过右上角添加日志的按钮和每个日志左边的的编辑按钮，会向创建/修改日志传递不同参数，加载时据此展示不同界面：

onLoad:function(e){console.log(e);this.logid=e.logid;this.userid = e.userid;if(this.logid > 0){this.logTitle=e.logTitle;this.logContent=e.logContent;}
},

主界面用uni组件简单布置了标题和内容：

<view class="main" ><uni-forms labelPosition="top"><uni-forms-item label="标题"><uni-easyinput v-model="logTitle" placeholder="请输入标题" /></uni-forms-item><uni-forms-item label="内容" ><uni-easyinput type="textarea" v-model="logContent" placeholder="请输入内容" /></uni-forms-item></uni-forms><view class="logconfirm"><view class="confirm-btn" @tap="logconfirm">确 定</view></view>
</view>

.main{padding-top: 88rpx;padding-left: 20rpx;padding-right: 20rpx;.logconfirm{display: flex;justify-content: center;width: 100%;font-size: 40rpx;color:white;.confirm-btn{padding: 10rpx 20rpx 10rpx 20rpx;background-color: $uni-color-success;border-radius: 30rpx;}}
}

1.3删除日志

点击删除按钮弹出提示框，点击确认后调用相应函数进行删除。

<view><uni-popup ref="deleteConfirmAsk" type="dialog"><uni-popup-dialog type="error" cancelText="取消" confirmText="确认" content="确认删除？" @confirm="deleteConfirm"></uni-popup-dialog></uni-popup>
</view>deletelog:function(id){this.$refs.deleteConfirmAsk.open();this.logidToDel=id;},

二、问卷

2.1设计问卷

根据项目内对问卷数据的设计，在首行放置了三个按钮点击添加相应题型，并可以增加、删除题目和选项，其中选择题选项至少要有两个，故当选项数量不大于2时，选项的“删除”按钮不出现。

<view class="choose" v-if="item.type!='Input'"><view class="title"><view class="questionid" v-if="item.type=='Radio'">{{index+1}}(单选)</view><view class="questionid" v-if="item.type=='Checkbox'">{{index+1}}(多选)</view><input placeholder="请输入题目" class="quextiontext"  v-model="item.text"></input><view class="deletequestion" @tap="deletequestion(index)">删除</view></view><view class="options" v-for="(optionitem,optionindex) in item.optionList" :key="optionindex"><input :placeholder="'请输入选项'+(optionindex+1)+'描述'" class="optiontext" v-model="optionitem.text"></input><view class="addoption" v-if="optionindex==item.optionList.length-1" @tap="addoption(index)">新增</view><view class="deleteoption" v-if="item.optionList.length>2" @tap="deleteoption(index,optionindex)">删除</view></view>
</view>

2.2填写问卷

考虑到问卷填写者的便利性，新建一个网页项目用以填写问卷。调用了uniapp的radio、checkbox和textarea组件。

 <view class="content"><view class="box-bg"><uni-nav-bar shadow left-icon="left" title="问卷填写" /></view><view class="questionnaireName">{{name}}</view><view v-for="(item,index) in questions" :key="index"><view class="choose" v-if="item.type=='Radio'"><view class="title"><view class="questionid" >{{index+1}}(单选)</view><view class="quextiontext"><view>{{item.text}}</view></view></view><radio-group @change="radioChange($event,index)"><label class="uni-list-cell" v-for="(optionitem,optionindex) in item.options" :key="optionindex" ><view><radio :value="optionitem.text"/></view><view>{{optionitem.text}}</view></label></radio-group></view><view class="choose" v-if="item.type=='Checkbox'"><view class="title"><view class="questionid">{{index+1}}(多选)</view><view class="quextiontext"><view>{{item.text}}</view></view></view><view class="uni-list"><checkbox-group @change="checkboxChange($event,index)"><label class="uni-list-cell" v-for="(optionitem,optionindex) in item.options" :key="optionindex"><view><checkbox :value="optionitem.text"/></view><view>{{optionitem.text}}</view></label></checkbox-group></view></view><view class="input" v-if="item.type=='Input'"><view class="title"><view class="questionid">{{index+1}}(主观)</view><view class="quextiontext">{{item.text}}</view></view><view class="textarea"><textarea placeholder="请输入答案" @input="inputChange($event,index)"/></view></view></view><view class="submit-btn" @tap="confirmQ"><view class="text">提交</view></view></view>

radioChange: function(e,index) {this.questions[index].answer=[];let ans = {content:e.detail.value,}this.questions[index].answer.push(ans);
},
checkboxChange: function(e,index) {this.questions[index].answer=[];for(let i=0;i<e.detail.value.length;i++){let ans = {content:e.detail.value[i],}this.questions[index].answer.push(ans);}
},
inputChange:function(e,index){this.questions[index].answer=[];let ans = {content:e.detail.value,}this.questions[index].answer.push(ans);
},

.questionnaireName{font-size: 50rpx;padding:10rpx 40rpx 10rpx 40rpx;text-align: center;
}.choose{padding: 10rpx 10rpx 20rpx 10rpx;border: 2px solid $uni-border-color;margin:20rpx 20rpx 10rpx 20rpx;.title{.questionid{text-align: center;width:120rpx;}.quextiontext{text-indent:2em;margin-left: 20rpx;}     }.options{padding-left: 30rpx;margin-top: 10rpx;display: flex;.optionid{padding-right: 20rpx;}}
}
.checkbox-btn{justify-content: flex-start;
}
.input{padding: 10rpx 10rpx 20rpx 10rpx;border: 2px solid $uni-border-color;margin:20rpx 20rpx 10rpx 20rpx;.title{.questionid{text-align: center;width:120rpx;}.quextiontext{text-indent:2em;margin-left: 20rpx;}       }.textarea{margin:10rpx 20rpx 0rpx 20rpx;padding: 10rpx 10rpx 10rpx 10rpx;border: 1px solid $uni-border-color;}input{width:100%;border-bottom: 1px solid grey;}
}

创新实训——飞讯（十）相关推荐

山东大学软件学院创新实训——飞讯（十二）
目录一.目标概述二.功能设计与实现问卷首页 (1)界面设计 (2)功能实现问卷详情页 (1)界面设计 (2)功能实现问卷二维码 (1)界面设计 (2)功能实现回答详情 (1)界面设计 (2 ...
山东大学软件学院创新实训——飞讯（四）
目录一.目标概述二.腾讯云im第三方回调二.回调分类三.回调示例 1.请求url 2.请求包示例 3.应答包示例四.回调的保存 1.分析 2.实体类 3.controller层 4.serv ...
山东大学软件学院创新实训——飞讯（一）
目录一.项目介绍二.docker的安装 1.服务器的配置 2.安装需要的包 3.添加GPG密匙,并添加Docker-ce软件源 4.安装Docker-ce 5.测试运行 6.添加当前用户到 doc ...
山东大学软件学院创新实训——飞讯（六）
目录一.突如起来的变化及内部调整二.uni-app的学习三.uni-app的搭建登录界面 (1)界面设计 (2)核心代码注册界面 (1)界面设计 (2)核心代码四.总结一.突如起来的变化 ...
山东大学软件学院创新实训——飞讯（八）
目录一.目标概述二.功能设计与实现搜索好友 (1)界面设计 (2)功能实现消息发送组件 (1)发送消息界面概览 (2)功能实现三.总结一.目标概述经过前面对uniapp的学习和飞讯项目的 ...
创新实训——飞讯（一）
一.项目简介飞讯是一款为使小型团队作业更加便捷而设计的软件,包括单聊.群聊等功能.本人负责Windows端的开发. 二.第一周工作采用QT开发,故第一周学习QT相关UI知识,包括可视化UI设计.代 ...
山东大学软件学院创新实训——飞讯（十）
目录一.目标概述二.功能设计与实现 1.配置配置文件 2.编写后端代码 3.前端代码三.总结一.目标概述这一次项目实施的目的是实现图片的上传和url的生成,因此,主要是前端上传图片代码和后端 ...
创新实训——飞讯（二）
因计划调整缘故,可直接从(五)看起. 目录一.设计登录.注册界面二.实现登录注册功能一.设计登录.注册界面利用所学的QT知识,利用可视化设计了一个基础的界面: 由于QT窗口自带一个较为丑陋的边 ...
创新实训——飞讯（四）
由于组内人员调动原因,组长找了一个可以实现web.小程序.Android.ios的跨平台运行的框架uni-app,考虑到便利性,移动端的制作很重要,且该框架可以实现较多运行方式,考虑到时间因素和经验因 ...

创新实训——飞讯（十）

目录