ssti-CollegeManage/src/views/projectApply/components/projectApplicationMakerSpaceDetails.vue

<template>
  <!-- 项目立项申请查看详细项目基本内容 -->
  <div class="projectApplication1" v-loading="loading">
     <!-- 活动申请填写信息区域开始 -->
     <div class="select">
              <div class="selectTop">
                <div class="label">项目名称</div>
                <el-input v-model="select.project" placeholder="请输入内容"></el-input>
              </div>
              <div class="selectMid">
                <div class="selectLeft">
                 
                    <div class="inpBlock">
                        <div class="label">负责人</div>
                        <el-input v-model="select.person" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="inpBlock">
                        <div class="label">所在部门</div>
                        <el-select v-model="select.departmentData" style="width: 100%;" placeholder="请选择">
                          <el-option
                            v-for="item in select.department"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                    </div>
                    <div class="inpBlock">
                        <div class="label">学院牵头领导</div>
                        <el-input v-model="select.lead_leader" placeholder="请输入学院牵头领导"></el-input>
                    </div>
                </div>

                <div class="selectRight">
                  <div class="inpBlock">
                        <div class="label">项目时间</div>
                        <el-date-picker
                          v-model="select.Date"
                          type="daterange"
                          style="width: 100%;"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          range-separator="至"
                          start-placeholder="项目起始时间"
                          end-placeholder="项目完成时间">
                          
                        </el-date-picker>
                        <!-- <el-date-picker
                          v-model="select.Date"
                          type="datetime"
                          style="width: 100%;"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择日期">
                        </el-date-picker> -->
                    </div>
                    <div class="inpBlock">
                        <div class="label">预算总经费</div>
                        <el-input type="number" v-model.number="select.Fund" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="inpBlock">
                        <div class="label">选择分类</div>
                        <el-cascader disabled="" v-model="select.sort" :options="select.sortOptions" clearable></el-cascader>

                    </div>
                </div>
              </div>
              
        </div>
        <!-- 活动申请填写信息区域结束 -->


         <!-- 项目封面修改上传开始 -->
         <div style="height: 260px;">
              <div class="tabTit">
                <div><p>封面上传</p></div>
              </div>
              <hr>
              <div style="margin-bottom: 10px;">修改项目封面</div>
              <el-progress v-show="progress.show" :percentage="progress.value" :format="ProgressFormat"></el-progress>

              <el-upload
                class="avatar-uploader"
                action="#"
                disabled
                style="position: relative;"
                :show-file-list="false"
                >
                <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <BeUpload :progress="progress" style="position:absolute; width: 301px;height: 180px; opacity: 0;z-index:333;left: 0px;top: 0;" @getFile="getFile" class="uploadPic" :navName="'上传封面'" :accept="accept"></BeUpload>
              </el-upload>
            </div>

          <!-- 项目封面修改上传开始结束 -->




      <!-- 项目教师开始 -->
      <div class="tabTit">
          <div><p>项目组-教师团队</p><span>（团队3人以上，至少应包含1名教研室主任）</span></div>
          <el-button type="primary" @click="addMember"  size="mini">添加教师</el-button>
      </div>
      <hr>
      <el-table
        :data="teacherData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="speciality"
          label="专业"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="title"
          label="职称"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="education"
          label="学历"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="section"
          label="所在教研室"
          align="center"
          >
        </el-table-column>

        <el-table-column
          prop="work"
          label="项目组任务分工"
          align="center"
          >
        </el-table-column>
        
        <el-table-column
          prop="operation"
          align="center"
          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                      <!-- <el-button type="primary" @click="lookDetail(scope)" size="mini">查看详情</el-button> -->
                      <el-button type="primary" @click="amendDialogData(scope.$index)" size="mini">修改</el-button>
                      <el-button type="primary" @click="Del(scope.$index)" size="mini">删除</el-button>
              </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 项目教师结束 -->

      <!-- 项目学生开始 -->
      <div class="tabTit">
        <div><p>项目组-学生团队</p><span>（团队5人以上，学生团队年级结构安排合理）</span></div>
          <el-button type="primary" @click="addMemberStudent"  size="mini">添加学生</el-button>
      </div>
      <hr>
      <el-table
        :data="studentData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="class"
          label="班级"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="work"
          label="项目组任务分工"
          align="center"
          >
        </el-table-column>
        
        <el-table-column
          prop="operation"
          align="center"
          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                      <el-button type="primary" @click="updateStudent(scope.$index)" size="mini">修改</el-button>
                      <el-button type="primary" @click="DelStudent(scope.$index)" size="mini">删除</el-button>
              </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 项目学生结束 -->


      <!-- 项目简介开始 -->
    <div class="tabTit">
          <div><p>项目简介</p></div>
    </div>
    <hr>
      <el-input
        type="textarea"
        :rows="6"
        resize="none"
        class="textArea"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
    <!-- 项目简介结束 -->


    <div class="baseBtn">
      <div class="blockWidth">
        <!-- <el-button type="primary" class="backBtn" @click="audit">立即修改</el-button> -->

        <el-button v-show="isUpload==0" type="primary" class="backBtn" @click="submitHint=true">立即修改</el-button>
        <el-button v-show="isUpload==1" type="primary" class="backBtn" disabled style="background: #ccc !important;border: none;">立即修改</el-button>
        <el-button v-show="isUpload==2" type="primary" class="backBtn" disabled style="background: #ccc !important;border: none;">立即修改</el-button>

      </div>
    </div>
      <!--添加教师dialog对话框开始 -->
      <el-dialog
          :title= "isAddMember==1?'添加教师':'修改教师'"
          :visible.sync="addMemberDialog"
          :modal="true"
          :close-on-click-modal="true"
          class="AddMember">
            <div class="littleBlock">
              <div class="dialogLabel">姓名</div>
              <div>
                <el-input v-model="teacher.name" placeholder="请输入教师姓名"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">专业</div>
              <div>
                <el-input v-model="teacher.speciality" placeholder="请输入教师专业"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">职称</div>
              <div>
                <el-input v-model="teacher.title" placeholder="请输入教师职称"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">学历</div>
              <div>
                <el-input v-model="teacher.education" placeholder="请输入教师学历"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel" style="transform: translate(0,0);">所在教研室</div>
              <div>
                <el-input v-model="teacher.section" placeholder="请输入所在教研室"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel" style="transform: translate(0,0);">项目组角色分工</div>
              <div>
                <el-input v-model="teacher.work" placeholder="请输入项目组角色分工"></el-input>
              </div>
            </div>


            <div slot="footer" class="footer">
              <el-button v-show="isAddMember==1" type="primary" @click="commit" class="AllDialogBtn" >确认提交</el-button>
              <el-button v-show="isAddMember==2" type="primary" @click="commit2" class="AllDialogBtn" >确认修改</el-button>

              <el-button @click="addMemberDialog = false" class="AllDialogBtn">取消</el-button>
            </div>
      </el-dialog>
      <!--添加教师dialog对话框结束 -->

      <!-- 添加学生dialog对话框开始 -->
      <el-dialog
          :title= "isAddStudent==1?'添加学生':'修改学生'"
          :visible.sync="addStudentDialog"
          :modal="true"
          :close-on-click-modal="true"
          class="AddMember">
            <div class="littleBlock">
              <div class="dialogLabel">姓名</div>
              <div>
                <el-input v-model="student.name" placeholder="请输入学生姓名"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">班级</div>
              <div>
                <el-input v-model="student.class" placeholder="请输入学生班级"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">年龄</div>
              <div>
                <el-input v-model="student.age" placeholder="请输入学生年龄"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel" style="transform: translate(0,0);">项目组角色分工</div>
              <div>
                <el-input v-model="student.work" placeholder="请输入项目组角色分工"></el-input>
              </div>
            </div>


            <div slot="footer" class="footer">
              <el-button v-show="isAddStudent==1" type="primary" @click="commitStudent" class="AllDialogBtn" >确认提交</el-button>
              <el-button v-show="isAddStudent==2" type="primary" @click="commitStudent2" class="AllDialogBtn" >确认修改</el-button>

              <el-button @click="addStudentDialog=false" class="AllDialogBtn">取消</el-button>
            </div>
      </el-dialog>
      <!-- 添加学生dialog对话框结束 -->
       <!-- 删除教师对话框开始 -->
      <el-dialog
              title="删除教师"
              :visible.sync="delMember"
              width="600px"
              class="delMemberDialog">
              <span class="deleteContent">确定删除该教师?</span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="commitDelMember" class="AllDialogBtn">确认删除</el-button>
                <el-button @click="delMember=false" class="AllDialogBtn" >取消</el-button>
              </span>
      </el-dialog>
      <!-- 删除教师对话框结束 -->
      <!-- 删除学生成员对话框开始 -->
            <el-dialog
              title="删除学生成员"
              :visible.sync="DelStudentDialog"
              width="600px"
              class="delMemberDialog">
              <span class="deleteContent">确定删除该学生成员?</span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="commitDelStudent" class="AllDialogBtn">确认删除</el-button>
                <el-button @click="DelStudentDialog = false" class="AllDialogBtn" >取消</el-button>
              </span>
            </el-dialog>
      <!-- 删除学生成员对话框结束 -->

       <!-- 修改对话框开始 -->
       <el-dialog
          title="提示"
          :visible.sync="submitHint"
          width="600px"
          class="projectApplicationfundAddDialog">
          <div class="addDialogLogo">LOGO</div>
          <div class="deleteContent">确定修改项目基本信息?</div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitAll" class="AllDialogBtn">确认提交</el-button>
            <el-button @click="submitHint = false" size="small" class="AllDialogBtn">取消</el-button>
          </span>
        </el-dialog>
      <!-- 修改对话框结束 -->
  </div>
</template>

<script>
  import BeUpload from "@/components/tool/beUpload.vue";
    export default {
      components: {
        BeUpload,
      },
      data() {
        return {
          iid:'',
          isUpload:'',
          accept:"image/*",
          isAddMember:1,
          isAddStudent:1,
          progress:{   //进度条
                value:0,
                show:false
            },  
          dialogImageUrl:'',  //图片地址
          index:0,
          delMember:false,
          DelStudentDialog:false,
          amendMemberDialog:false,
          addMemberDialog:false,
          addStudentDialog:false,
          submitHint:false,
          loading:false,
          select:{    //数据详情框数据
            project:'',   
            person:'',
            departmentData:"",  //部门框值
            sort:[],     //分类值
            tel:'',
            Date:'',
            Fund:'',
            sortOptions: [
                    {
                      value:"",
                      label:'',
                      children: [{
                        value: 0,
                        label: '创意组',
                      },
                       {
                        value: 1,
                        label: '初创组',
                      }
                    ]}, 
                    {
                    value:"",
                    label:'',
                    children: [{
                      value: 0,
                      label: '已建设',
                    }, {
                      value: 1,
                      label: '待建设',
                    }]
                  }],
            department:[],
          },
          textarea:'周四福利大放送',   //项目简介

          teacherData:[],   //成员列表数据
          studentData:[],
          addTabMember:{       //添加项目成员
            // id:'',
            name:'',
            class:'',
            phone:'',
            score:0
          },
          teacher:{ //添加老师团队表
            name:"",  //姓名
            speciality:"",//专业
            title:"",//职称
            education:"",//学历
            section:"",//所在教研室
            work:"",//项目组角色分工
          },
          student:{ //添加学生团队表
            name:"",//姓名
            class:"",//班级
            age:"",//年龄
            work:'',//项目组任务分工
          }
        }
      },
      methods:{
        addMemberStudent(){//添加项目组-学生成员
          this.isAddStudent=1;
          this.addStudentDialog = true;
        },
        commitStudent(){//确定添加学生
            for(let i in this.student){if(this.student[i]==''||this.student[i]==undefined)return this.$message.error("请填完所有内容");}
            let newData={};
            for(let a in this.student)newData[a] = this.student[a];
            this.studentData.push(newData);
            this.$message.success("添加成功");
            this.addStudentDialog = false;
            //清空表单
            for(let j in this.student)this.student[j]='';
        },
        updateStudent(val){ //修改学生信息
          Object.assign(this.student,this.studentData[val]);
          this.isAddStudent=2;
          this.index=val;
          this.addStudentDialog = true;
        },
        commitStudent2(){//确定修改学生
            Object.assign(this.studentData[this.index],this.student)
            this.addStudentDialog=false;
            for(let k in this.student) this.student[k]=''
            this.$message.success('修改成功')
        },
        DelStudent(val){//删除学生对话框
          this.index = val;
          this.DelStudentDialog=true;
        },
        commitDelStudent(){ //对话框确定删除学生成员
          this.studentData.splice(this.index,1);
          this.$message.success('删除成功');
          this.DelStudentDialog=false;
        },
        addMember(){    //添加教师按钮，显示对话框
            this.addMemberDialog=true;
            this.isAddMember=1;
        },
        commit(){   //确定添加教师
              for(let i in this.teacher){if(this.teacher[i]==''||this.teacher[i]==undefined)return this.$message.error("请填完所有内容");}
              let newData = {};
              for(let a in this.teacher)newData[a] = this.teacher[a];
              this.teacherData.push(newData);
              this.$message.success('添加成功');
              this.addMemberDialog = false;
              for(let j in this.teacher)this.teacher[j]='';
        },
        amendDialogData(val){   //修改项目成员信息对话框显示
          Object.assign(this.teacher,this.teacherData[val])
          this.isAddMember=2;
          this.index=val;
          this.addMemberDialog=true;
        },
        commit2(){   //确定修改老师
            Object.assign(this.teacherData[this.index],this.teacher)
            for(let k in this.teacher) this.teacher[k]=''
            this.addMemberDialog=false;
            this.$message.success('修改成功')
        },
        Del(val){ //删除老师按钮
          this.index=val;   
          this.delMember=true;
        },
        commitDelMember(){  //确定删除老师按钮
          this.teacherData.splice(this.index,1)
          this.$message.success('删除成功')
          this.delMember=false;
        },

        ProgressFormat(value){        //进度条
          return value ==100?'100%':`${value}%`
        },
        getFile(val) {       //上传封面
            this.progress.show = false;
            this.dialogImageUrl=val.url
        },
        audit(){    //立即修改对话框显示
          this.submitHint=true
        },
        submitAll(){

          let param = {
            uid:this.$store.state.userInfo.userid,
            pid:JSON.parse(localStorage.getItem('pid')),
            title:this.select.project,
            pro_leader:this.select.person,
            lead_leader:this.select.lead_leader,
            startTime:this.select.Date[0],
            endTime:this.select.Date[1],
            cid:this.select.departmentData,
            fund:this.select.Fund,
            img:this.dialogImageUrl,
            teacher:JSON.stringify(this.teacherData),
            student:JSON.stringify(this.studentData),
            brief:this.textarea,
          }
          //判断数据
          const cEmpty = /^\s*$/g;
          for(let i in param){
            switch(i){
              case 'title':
                if(cEmpty.test(param[i]))return this.$message.error("项目名称不能为空")
                break;
              case 'pro_leader':
                if(cEmpty.test(param[i]))return this.$message.error("项目负责人不能为空")
                break;
              case 'startTime':
                if(cEmpty.test(param[i]))return this.$message.error("请选择项目开始时间")
                break;
              case 'endTime':
                if(cEmpty.test(param[i]))return this.$message.error("请选择项目计划结束时间")
                break
              case 'cid':
                if(cEmpty.test(param[i]))return this.$message.error("请选择项目所属部门")
                break;
              case "lead_leader":
                if(cEmpty.test(param[i]))return this.$message.error("请输入学院牵头领导")
                break;
              case 'img':
                if(cEmpty.test(param[i]))return this.$message.error("请选择项目封面图片")
                break;
              case 'teacher':
                if(JSON.parse(param[i]).length<3)return this.$message.error("需要教师团队3人以上，至少应包含1名教研室主任")
                break;
              case 'student':
                if(JSON.parse(param[i]).length<5)return this.$message.error("需要学生团队5人以上")
                break;
              case 'brief':
                if(param[i].length<200&&param[i]<=300)return this.$message.error("项目简介需要200-300字")
                break;
            }
          }
          this.ajax.post(this.$store.state.api+'/UpdateProjectMakerSpaceBase',param).then(res=>{
            if(res.data==1){
              this.$message.success("修改项目信息成功")
            }else{
              this.$message.error('修改项目信息失败')
            }
            this.getData();
          }).catch(err=>{
            console.log(err)
          })
        },
        getData(){   //初始化完成获取基本数据进行填充
          this.loading = true;
          let param={
            uid:this.$store.state.userInfo.userid,
            pid:JSON.parse(localStorage.getItem('pid'))
          }
            this.ajax
                  .get(this.$store.state.api+'/SelectProjectMakerSpace',param)
                  .then(res=>{
                    let data=res.data[0][0]
                    this.select.project=data.title;
                    this.select.Fund=data.fund;
                    this.select.person=data.pro_leader;
                    this.select.Date=[data.begintime,data.planTime];
                    this.textarea=data.brief;
                    this.dialogImageUrl=data.image;
                    this.select.departmentData = data['classid']
                    this.select.sort = [data['typeid'],data['typeName']]
                    this.isUpload=data['isupload']
                    this.select.lead_leader = data['lead_leader']
                    this.teacherData = JSON.parse(data['course_teacher'])
                    this.studentData = JSON.parse(data['course_student'])
                    this.loading = false;
                  },err=>{
                    console.log(err);
                  })
        },
        getProjectDepartmentData(){  //获取项目立项申请基础信息页面所在部门数据
              let param={
                uid:this.$store.state.userInfo.userid
              }
                this.ajax
                      .get(this.$store.state.api+'/SelectAllDepartment',param)
                      .then(res=>{
                        this.select.department=res.data[0]
                      },err=>{
                        console.log(err);
                      })
            },
        getProjectTypeData(){  //获取项目立项申请基础信息页面分类数据
          let param={
            uid:this.$store.state.userInfo.userid
          }
            this.ajax
                  .get(this.$store.state.api+'/SelectAllType',param)
                  .then(res=>{
                    this.select.sortOptions[0].value=res.data[0][0].id
                    this.select.sortOptions[0].label=res.data[0][0].name
                    this.select.sortOptions[1].value=res.data[0][1].id
                    this.select.sortOptions[1].label=res.data[0][1].name
                  },err=>{
                    console.log(err);
                  })
        },
      },
      mounted(){    //数据加载完成后触发
        this.getData();
        this.getProjectDepartmentData();
        this.getProjectTypeData();
      },
    }
</script>

<style lang="less">
.projectApplication1{

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    // position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    // height: 100%;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 300px;
    height:178px !important;
    display: block;
  }


  .delMemberDialog{      //删除对话框
      .el-dialog{
        border-radius: 5px;
        overflow: hidden;
      }
      .deleteContent{
        margin: 30px 0;
        font-size: 22px;
        color: #000;
      }
      .el-dialog__header{
        background: #32455b;
        display: flex;
        justify-content: center;
      }
      .el-dialog__title{
        color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
      }
      .el-dialog__body{
        display: flex;
        justify-content: center;
      }
      .dialog-footer{
        display: flex;
        justify-content: center;
        box-sizing: border-box;

      }
    }


  //项目修改对话框开始
  .projectApplicationfundAddDialog{  
 
        .el-dialog__header{
            background: #32455b;

        }
        .el-dialog{
          border-radius:5px ;
          overflow: hidden;
        }
        
        .deleteContent{
          width: 100%;
          text-align: center;
          font-size: 22px;
          color: #000;
        }
        .addDialogLogo{
                width: 60px;
                height: 30px;
                border-radius: 5px;
                display: flex;
                justify-content: center;
                line-height: 30px;
                background: #f2f2f2;
                position: absolute;
                left: 20px; top: 15px; 
        }

        .el-dialog__title{
                color:#fff;
                display: flex;
                justify-content: center;
                font-size: 18px;
                position: relative;
                top: -2px;
        }
        .addDialogMid{
          box-sizing: border-box;
          padding:0 60px 0 10px;
          .addDialogTit{
            display: flex;
            span{
              width: 80px;
              line-height: 40px;
              text-align: left;
            }
          }
        .addDialogTit1{
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
        }
        .addDialogTit2{
          margin-top: 10px;
          font-size: 18px;
          color: #000;
          text-indent: 2em;
        }
        .addDialogCon{
          margin-top: 20px;
        }
        }
        .dialog-footer{
        display: flex;
        justify-content: center;

        }
    }
}
</style>