基于vue+MySQL的外包项目信息系统

目录
一、需求说明 1
二、系统功能说明 1
三.数据库设计 2
用户表user： 2
项目表projects： 3
任务表task： 3
四、功能截图 4

一、需求说明
外包比赛项目发布与任务管理系统：
1、 系统账号分为三类，均允许自行注册：发包方（发布项目、查看当前账号的项目详情与开发任务进度、验收项目）、承包方管理员（承包项目、查看已经承包的项目详情与开发任务进度、设置项目开发任务、分配任务）、承包方开发人员（查看当前分配的开发任务、完成任务、注：此类账号由承包方管理员创建）
2、 关于项目：创建时至少包含名称、项目说明、期望完成时间、项目需求文档（附件形式）等内容，此时状态为初始化，发布后改变为已发布，即允许承包方管理员在已发布项目列表中选择承包。一个项目只允许一个承包方承包。
3、 承包后，承包方管理员可创建开发人员账号，在承包项目中根据项目需求文档分解并创建开发任务，包含任务名称、开发内容、设计文档(附件形式)、预计人天、实际人天、开始时间、结束时间，状态为初始化。分配给开发人员后任务状态为已分配，并设置开始时间。
4、 开发人员完成开发后即可完成任务，需要设置任务状态为已完成，并设置结束时间，并计算实际人天（按照每日8小时计算，去掉周末）。
5、 当所有开发任务均已完成，承包方管理员可发起验收（项目状态改为待验收），发包方验证通过后项目即可验收通过（项目状态改为已验收）
6、 项目与开发任务查看功能：可查看所有项目信息（加入汇总字段：开发人数、实际人天数、项目开发开始与结束时间等）与其下的所有开发任务情况，并展示每个任务预计人天与实际人天对比，建议任务以卡片列表的形式展现。

发包方创建并发布项目，本文转载自http://www.biyezuopin.vip/onews.asp?id=15225承包方承包项目后对开发人员进行任务分配，开发人员上传任务结果并填写任务完成时间完成任务，所有任务完成后承包方管理员对任务进行检查后上传项目工程发起验收，最后发包方验收项目。

二、系统功能说明
用户管理：
管理员类用户注册
找回密码
开发人员用户注册（承包方管理员进行开发人员的注册）

发包方管理员sendadmin：
1.注册、找回、登录
2.创建项目、发布项目
3.未发布的项目可以删除、已发布但未被承包的项目可以撤回
4.查看未发布、已发布未被承包、开发中、待验收、已验收项目列表
5.以上各项目列表页均可根据项目名进行模糊查找
6.开发中项目列表页可查看项目开发进度
7.验收项目和已验收项目列表页可查看发人员名单、下载项目工程
8.验收项目功能

承包方管理员readmin：
1.注册、找回、登录
2.承包项目
3.对承包的项目进行任务分配与开发人员的设置
4.查看待开发、开发中、等待检查、待验收、已验收项目列表
5.以上各项目列表页均可根据项目名进行模糊查找
6.开发中项目列表页可通过查看开发人员任务信息查看项目开发进度
7.待检查项目列表页可查看任务信息下载任务工程，上传项目工程并发起验收
8.待验收和已验收项目列表页可查看发人员名单、下载项目工程

开发人员reuser：
1.登录
2.查看项目详情可下载项目需求文档
3.查看任务详情并可下载任务需求文档
3.完成任务后上传任务工程填写任务完成时间
4.查看已完成的任务并可下载任务工程

<template>
  <div class="login" :model="form">
      <el-row class="row1">
      </el-row>

    <el-row class="login_title">
    <el-col :span="7" :offset="13">
        
    <h1>&nbsp;&nbsp;项目外包信息系统</h1>
    </el-col>
    </el-row>

    <el-row class="row2" :gutter="10">
      
            <el-form  :model="form" status-icon ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="" prop="name" >
            <el-row>
                <!-- <el-col :span="1" :offset="14" > 用 户 名： </el-col> -->
                <el-col :span="4" :offset="14"> 
                    <el-input v-model="form.name" placeholder="请输入用户名" prefix-icon="el-icon-user" style="width:330px" ></el-input>
                </el-col>
            </el-row>
        </el-form-item>
            
        <el-form-item label="" prop="password" >
            <el-row>
                <!-- <el-col :span="1" :offset="14"> 密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码： </el-col> -->
                <el-col :span="4" :offset="14"> 
                    <el-input  v-model="form.password" placeholder="请 输 入 密 码" prefix-icon="el-icon-unlock" style="width:330px" show-password> </el-input>
                </el-col>
                <el-col :span="1" :offset="13"> &nbsp; </el-col>
                <el-col :span="1"> 
                    <el-link  @click.prevent="register('form1')" type="primary" >用 户 注 册</el-link>
                </el-col>
                <el-col :span="2">
                     &nbsp; 
                </el-col>
                <el-col :span="2"> 
                    <el-link @click.prevent="changepassword1('form2')" type="primary" >忘记密码？</el-link>
                </el-col>
            </el-row>
        </el-form-item>

        <el-form-item label="">
            <el-row>
                <el-col :span="1" :offset="13"> &nbsp;
                </el-col>
                <el-col :span="4"> 
                    <el-button @click.prevent ="handleLogin()"  type="primary" round> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;陆 
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
                </el-col>
            </el-row>
        </el-form-item>
    </el-form>

    <!-- ------------------------------------用 户 注 册-------------------------------- -->
<el-dialog title="用 户 注 册 " :visible.sync="dialogFormVisibleEdit" width="35%">
      <el-form :model="form1" status-icon  ref="form1" label-width="100px" class="form1" >
        <el-form-item  label="" label-width="100px" prop="name">
            <el-row>
            <el-col :span="0"> &nbsp; </el-col>
            <el-col :span="4"> 用&nbsp;&nbsp;户&nbsp;&nbsp;名： </el-col>
            <el-col :span="13"> 
                <el-input  v-model="form1.name" autocomplete="off" placeholder="请输入用户名"></el-input>
            </el-col>
        </el-row>
        </el-form-item>
        <el-form-item  label="" label-width="100px" prop="password" >
            <el-row>
            <el-col :span="0"> &nbsp; </el-col>
            <el-col :span="4"> 密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码： </el-col>
            <el-col :span="13"> 
                <el-input  v-model="form1.password"  autocomplete="off" placeholder="请输入密码" show-password> </el-input>
            </el-col>
        </el-row>
        </el-form-item>
        <el-form-item label="" label-width="100px" prop="repassword">
            <el-row>
            <el-col :span="0"> &nbsp; </el-col>
            <el-col :span="4"> 确认密码： </el-col>
            <el-col :span="13"> 
                <el-input   v-model="form1.repassword" autocomplete="off" placeholder="请确认密码" show-password></el-input>
            </el-col>
        </el-row>
        </el-form-item>
        <el-form-item  label="" label-width="100px" prop="cardid">
            <el-row>
            <el-col :span="0"> &nbsp; </el-col>
            <el-col :span="4"> 身份证号： </el-col>
            <el-col :span="13"> 
                <el-input  v-model="form1.cardid"  autocomplete="off" placeholder="请输入身份证号"> </el-input>
            </el-col>
        </el-row>
        </el-form-item>
        <el-form-item label="" label-width="100px" prop="role">
          <el-row>
          <el-col :span="0"> &nbsp; </el-col>
          <el-col :span="4"> 用户类型： </el-col>
          <el-col :span="9"> 
          <el-select v-model="form1.role" placeholder="请选择用户类型">
          <el-option label="发包方" value="sendadmin"></el-option>
          <el-option label="承包方" value="readmin"></el-option>
          </el-select>
          </el-col>
        </el-row>
        </el-form-item>
        <el-form-item label="" label-width="100px">
            <el-col :span="3"> &nbsp; </el-col>
            <el-col :span="5"> 
            <el-button type="primary" @click="submitForm('form1')" round>确 认</el-button>
            </el-col>

            <el-col :span="4"> &nbsp; </el-col>
            <el-col :span="5"> 
            <el-button  type="primary" @click="resetForm('form1')" round>返 回</el-button>
            </el-col>
        </el-form-item>
      </el-form>
    </el-dialog>
<!-- ------------------------------------身 份 认 证-------------------------------- -->
    <el-dialog title="身 份 认 证" :visible.sync="dialogFormVisiblea" width="35%">
      <br><br><br><br><br><br><br><br><br>
      <el-form :model="form2" status-icon ref="form2" label-width="100px" class="form2" >
        <el-form-item  label="" label-width="100px" prop="cardid">
            <el-row>
            <el-col :span="0"> &nbsp; </el-col>
            <el-col :span="4"> 身份证号： </el-col>
            <el-col :span="13"> 
                <el-input  v-model="form2.cardid"  autocomplete="off" placeholder="请输入身份证号"> </el-input>
            </el-col>
        </el-row>
        </el-form-item>
        <br><br><br><br><br><br><br>
        <el-form-item label="" label-width="100px">
            <el-col :span="7"> &nbsp; </el-col>
            <el-col :span="5"> 
            <el-button type="primary" @click="nextstep('form3')" round>下 一 步</el-button>
            </el-col>
        </el-form-item>
        <br><br>
      </el-form>
    </el-dialog>
     <!-- ------------------------------------重置密码-------------------------------- -->
     <el-dialog title="重 置 密 码" :visible.sync="dialogFormVisibleb" width="35%">
      <br><br><br><br><br>
      <el-form :model="form3" status-icon ref="form3" label-width="100px" class="form3" >
          <br><br>
        <el-form-item  label="" label-width="100px" prop="password">
            <el-row>
            <el-col :span="1"> &nbsp; </el-col>
            <el-col :span="4"> 重置密码： </el-col>
            <el-col :span="13"> 
                <el-input  v-model="form3.password"  autocomplete="off" placeholder="请输入新密码" show-password> </el-input>
            </el-col>
        </el-row>
        </el-form-item>
        <br><br>
        <el-form-item  label="" label-width="100px" prop="repassword">
            <el-row>
            <el-col :span="1"> &nbsp; </el-col>
            <el-col :span="4"> 确认密码： </el-col>
            <el-col :span="13"> 
                <el-input  v-model="form3.repassword"  autocomplete="off" placeholder="请确认新密码" show-password> </el-input>
            </el-col>
        </el-row>
        </el-form-item>
        <br><br><br><br>
        <el-form-item label="" label-width="100px">
            <el-col :span="4"> &nbsp; </el-col>
            <el-col :span="5"> 
            <el-button type="primary" @click="confirm('form3')" round>确 认</el-button>
            </el-col>
            <el-col :span="4"> &nbsp; </el-col>
            <el-col :span="5"> 
            <el-button  type="primary" @click="cancel('form3')" round>取 消</el-button>
            </el-col>
        </el-form-item>
        <br>
      </el-form>
    </el-dialog>

    </el-row>
    <el-row class="row5">
    </el-row>
  </div>

</template>


<script>
export default {
 
   data(){
      return{
        form:{
                name:'',
                password:''
            },
        dialogFormVisibleEdit:false,
        dialogFormVisiblea:false,
        dialogFormVisibleb:false,
        form1: {
            name: '',
            password: '',
            repassword: '',
            cardid: '',
            role: '',
        },
        form2:{
            cardid: '',
        },
        form3:{
            password: '',
            repassword: '',
        }
      }
    },

    methods:{
        //登陆请求
        handleLogin() {
            this.$http.post('http://localhost:8081/users/login',this.form)
            .then((res)=>{
                console.log(res)
                const {
                    code,
                    msg,
                    data
                } =res.data
                if(code === 200){                    
                    localStorage.setItem('token',data) //保存token数据
                    this.$router.push({path:'test2'})//登陆成功跳转首页                              
                    // this.$message.success(msg)//提示成功
                    this.$message.success({
                        message: msg,
                        center: true
                        });

                }else{                   
                    this.$message.error({
                        message: msg,
                        center: true
                    })//否则提示失败
                }
            })
        },
        refresh(formName) {
            this.$router.push({path:'Login'})
            this.$refs[formName].resetFields();
        },
        register(formName) {
            this.dialogFormVisibleEdit=true
            this.$refs[formName].resetFields();
        },
        changepassword1(formName){
            this.dialogFormVisiblea=true
            this.$refs[formName].resetFields();
        },
        nextstep(formName){
            this.$http.post('http://localhost:8081/users/checkcardids',this.form2)
            .then((res)=>{
                console.log(res)
                const {
                    code,
                    msg,
                    data
                } =res.data
                if(code === 200){  
                    //提示成功
                    this.$message.success({
                        message: msg,
                        center: true
                        });
                    this.dialogFormVisibleb=true;
                    this.dialogFormVisiblea=false;
                    this.$refs[formName].resetFields();
                }else{                   
                    this.$message.error({
                        message: msg,
                        center: true
                    })//否则提示失败
                }
            })
        },
        confirm(formName){
            this.$http.post('http://localhost:8081/users/resetpasswords',this.form3)
            .then((res)=>{
                console.log(res)
                const {
                    code,
                    msg,
                    data
                } =res.data
                if(code === 200){  
                    //提示成功
                    this.$message.success({
                        message: msg,
                        center: true
                        });
                    this.$refs[formName].resetFields();
                    this.dialogFormVisibleb=false;
                }else{                   
                    this.$message.error({
                        message: msg,
                        center: true
                    })//否则提示失败
                }
            })
        },
        cancel(formName){
            this.$refs[formName].resetFields();
            this.dialogFormVisibleb=false
        },
        submitForm(formName) {
        this.$http.post('http://localhost:8081/users/registeradmins',this.form1)
            .then((res)=>{
                console.log(res)
                const {
                    code,
                    msg,
                    data
                } =res.data
                if(code === 200){  
                    // this.$message.success(msg)//提示成功
                    this.$message.success({
                    message: msg,
                    center: true
                    });
                    this.$refs[formName].resetFields();
                }else{                   
                    this.$message.error({
                        message: msg,
                        center: true
                    })//否则提示失败
                }
            })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.dialogFormVisibleEdit=false
      },
  }
}
</script>

<style>
  .login{
      height: 800px;
       background-image: url('../assets/loginui.png');  
       background-Repeat: "no-repeat";
      background-size: 100% auto;
  }
   .row1{
      height: 34%;
  }
  .login_title{
      color:rgb(138, 174, 252);
    }
  /* .row2{@click.prevent=
      height: 20%;
  }
  .row3{
      height: 20%;
  }
  .row4{
      height: 20%;
  }
  .row5{
      height:20%;
  }  */
</style>