h;"></div>
<div class="task-footer-container">
<div class="task-footer" @click="createTask" v-if="!iscreateTask">
<i class="glyphicon glyphicon-plus-sign"></i>
新建任务
</div>
<div class="form" v-else>
<div class="form-group">
<textarea class="form-control" rows="3" v-model="taskName" placeholder="请输入任务内容"></textarea>
</div>
<div class="form-group">
<button class="btn btn-success" @click.stop="postTask">保存</button>
<button class="btn btn-default" @click.stop="cancelCreateTask">取消</button>
</div>
</div>
</div>
</div>
</template>
<script>
import missionTask from './mission-task'
export default {
created (){
this.$filterGet('/api/Tasks',{task_group_id:this.taskGroup.id})
.then(body=>{
this.tasks=body
})
},
data (){
return {
iscreateTask:false,
taskName:'',
tasks:[]
}
},
methods:{
createTask (){
this.iscreateTask=true
},
cancelCreateTask (){
this.iscreateTask=false
},
postTask (){
if(this.taskName!==''){
let infoObj={
task_group_id:this.taskGroup.id,
task_group_name:this.taskGroup.name,
project_id:this.taskGroup.project_id,
project_name:this.taskGroup.project_name,
focus_person_info:[{id:this.$getFromSession('userInfo','id'),headName:this.$getFromSession('userInfo','headName')}],
name:this.taskName,
create_time:Date.now(),
create_person_id:this.$getFromSession('userInfo','id'),
is_solved:false
}
this.$post('/api/Tasks',infoObj)
.then(body=>{
this.iscreateTask=false
this.taskName=''
this.tasks.push(body)
})
}
}
},
components:{missionTask},
props:['taskGroup']
}
</script>
以上是中期进度报告，接下来的时间本人将完成上文中提到的未完成的内容。
, 北京联合大学毕业设计（论文）期中报告
题目： 团队协同办公系统
一、功能模块图
二、已完成的主要内容及所占比重：70%
1、完成数据流图；
3、完成详细设计（前端界面、数据库）；
4、完成了前后端代码核心功能的编写，调试；
5、完成了部分论文的撰写。
三、待完成主要内容及所占比重：30%
1、软件测试，完善代码。
2、完成论文的撰写。
四、存在的问题：
1、功能还不够丰富，很多细节还有丰富的空间
五、完成内容：
数据库表结构图
1.用户注册、登录
1.1登录效果图：
1.2 注册效果图
1.3相关说明：
点击下方的按钮在注册以及登录之间切换，提交前会进行字段信息校验
1.4关键代码实现：
<template lang="html">
<log :err-msg="errMsg">
<div class="form-group">
<input type="text" class="form-control" v-model="formInfo.phone" placeholder="电话号码">
</div>
<div class="form-group">
<input type="password" class="form-control" v-model="formInfo.password" placeholder="密码">
</div>
<div class="form-group">
<button class="btn btn-block btn-lg btn-success" @click="submit()">登录</button>
</div>
<div class="panel-footer">
<router-link :to="{name:'regist'}">去注册</router-link>
</div>
</log>
</template>
<script>
import log from './log'
export default {
data (){
return {
errMsg:'',
formInfo:{
phone:'',
password:''
}
}
},
methods:{
isEmpty (){
const result=this.$isFormEmpty(this.formInfo)
if(!result){
this.errMsg='请填写全所有的字段'
}
return result
},
submit (){
if(this.isEmpty()){
let filter={where:this.formInfo}
this.$http.get('/api/People',{params:{filter}})
.then(({status,body})=>{
if(status===200){
if(body.length===1){//已注册
// this.$store.dispatch('login',body[0])
let infoObj=body[0]
this.$saveLoginInfo(infoObj)
this.$router.push({name:'main'})
}else{
this.errMsg='用户名或密码错误'
}
}else{
this.errMsg='服务器出错鸟！'
}
})
.catch(err=>{
console.error(err)
})
}
}
},
components:{log}
}
</script>
<style lang="scss" scoped>
</style>
2创建团队功能实现
2.1效果图
2.2说明：
点击主界面左上角的Logo后点击创建团队按钮后进入创建团队弹窗操作流程
2.3关键代码实现：
<template lang="html">
<modal :hook="hook">
<template slot="title">新建团队</template>
<template>
<ul class="modal-ul">
<li :class="{step_cursor:stepIndex==index}" v-for="(modelRowInfo,index) in modelRowInfoArr">
{{ modelRowInfo }}
</li>
</ul>
<alert-danger :message="errMsg" type="danger"></alert-danger>
<div class="form modal-form-container">
<div v-if="stepIndex===0">
<div class="form-group">
<label>团队名称</label>
<input type="text" class="form-control" v-model="groupName" placeholder="输入团队名称">
</div>
<div class="form-group">
<label>队长</label>
<input type="text" class="form-control" v-model="leaderName" placeholder="输入队长姓名" disabled>
</div>
<div class="form-group">
<label>队长手机号</label>
<input type="text" class="form-control" v-model="leaderPhone" placeholder="输入队长手机号" disabled>
</div>
</div>
<div v-else-if="stepIndex===1">
<label>成员手机号</label>
<div class="form-group" v-for="(phone,index) in phoneGroup" :class="{'has-error':phone.isInValid}">
<input type="phone" class="form-control" v-model="phoneGroup[index].phoneNum" >
</div>
<div class="form-group row">
<button class="btn btn-link" @click="addPhoneGroup()">+ 添加</button>
<button class="btn btn-link" @click="reducePhoneGroup()">- 减少</button>
</div>
</div>
<div v-else-if="stepIndex===2">
<div class="team_create_info_show">
<div class="info">
请确认以下信息
</div>
<div class="mt_30 group-name">
{{ groupName }}
</div>
<div class="mt_20">
<span class="g-user-head-default group-member" v-for="groupMember in groupMembers">{{ groupMember }}</span>
</div>
</div>
</div>
</div>
</template>
<template slot="footer">
<button type="button" class="btn btn-default" data-dismiss="modal" @click="cancelCreate()">取消</button>
<button type="button" class="btn btn-default" v-if="stepIndex>0" @click="prvStep()">上一步</button>
<button type="button" class="btn btn-primary" @click="nextStep()" v-if="stepIndex!==2">下一步</button>
<button type="button" class="btn btn-primary" @click="postGroupInfo()" v-if="stepIndex===2">创建</button>
</template>
</modal>
</template>
<script>
import modal from '@pub/modal'
import alert from '@pub/alert'
export default {
data(){
return {
modelRowInfoArr:['1 基本信息','2 邀请成员','3 完成'],
stepIndex:0,
groupName:'',
errMsg:'',
phoneGroup:[{phoneNum:'',isInValid:false,id:'',headName:''}]
}
},
computed:{
leaderId (){
return this.$getFromSession('userInfo','id')
},
leaderHead (){
return this.$getFromSession('userInfo','headName')
},
leaderName (){
return this.$getFromSession('userInfo','name')
},
leaderPhone (){
return this.$getFromSession('userInfo','phone')
},
groupMembers (){
return this.phoneGroup.map(item=>{
return item.headName
})
.filter(headName=>{
return headName!==this.leaderHead
})
.concat(this.leaderHead)
},
user_ids (){
return this.phoneGroup.map(item=>{
return item.id
})
.filter(id=>{
return id!==this.leaderId
})
.concat(this.leaderId)
}
},
methods:{
cancelCreate (){
this.stepIndex=0
},
prvStep (){
this.stepIndex-=1
},
addStep (){
this.stepIndex+=1
},
nextStep (){
this.errMsg=''
switch(this.stepIndex){
case 0:
if(!this.groupName){
this.errMsg='请填写团队名称'
}else{
this.addStep()
}
break;
case 1:
let result=true
let promiseArr=[]
for(let i=0;i<this.phoneGroup.length;i++){
const phone=this.phoneGroup[i].phoneNum
const filter={phone}
if(phone===''){
this.errMsg='请填写全所有手机号'
return
}
let p=this.$filterGet('/api/People',filter)//检测用户是否存在
promiseArr.push(p)
}
Promise.all(promiseArr)
.then(bodys=>{
let result=true
bodys.forEach((body,index)=>{
if(body.length===0){
this.errMsg='用户不存在'
this.phoneGroup[index].isInValid=true
result=false
}else{
this.phoneGroup[index].id=body[0].id
this.phoneGroup[index].headName=body[0].headName
this.phoneGroup[index].isInValid=false
}
})
if(result){
this.addStep()
}
})
break;
}
},
postGroupInfo (){
let groupInfo={
leader_id:this.$getFromSession('userInfo','id'),
leader_phone:this.$getFromSession('userInfo','phone'),
create_time:String(Date.now()),
user_ids:this.user_ids,
name:this.groupName
}
this.$post('/api/Groups',groupInfo)
.then(({id})=>{
let promiseArr=[]
this.user_ids.forEach(userId=>{
let postInfo={
person_id:userId,
group_id:id
}
promiseArr.push(this.$post('/api/Person_has_groups',postInfo))
})
Promise.all(promiseArr)
.then(()=>{
this.$emit('createdGroup',groupInfo)
this.$hideModal()
this.stepIndex=0
this.groupName=''
this.phoneGroup=[{phoneNum:'',isInValid:false,id:'',headName:''}]
})
})
},
addPhoneGroup (){
this.phoneGroup.push({phoneNum:'',isInValid:false})
},
reducePhoneGroup (){
if(this.phoneGroup.length>1){
this.phoneGroup.pop()
}
}
},
components:{modal,alertDanger:alert},
props:['hook']
}
</script>
3创建任务组及任务功能实现
3.1效果图：
3.2说明：
在已经添加的列表下方可以点击新建任务为当前列表添加任务，可以通过点击任务的表单元素来更改任务已完成状态，通过新建任务列表按钮可以添加新的任务列表
3.3关键代码实现：
<template lang="html">
<div class="mission-group-item">
<div class="mission-group-header clearfix">
<div class="mission-group-title-container pull-left">
<div class="mission-group-title">
{{ taskGroup.name }}
</div>
</div>
<div class="item-num-container pull-right">
<div class="item-num">{{ tasks.length }}</div>
</div>
</div>
<div class="task-main-container">
<div class="task-container">
<mission-task :tasks="tasks"></mission-task>
</div>
全套毕业设计论文现成成品资料请咨询
