ssti-CollegeManage/src/views/projectManage/ProjectManagement3_1.vue

<template>
  <!-- 项目管理 活动开展 查看详细-->
    <div class="ProjectManagement3_1" v-loading="loading">
      <div class="vfpHeader">
      <!-- 详情页 -->
          <div class="titleOne">项目管理</div>
          <span class="smallTitle" style="left: 100px;">项目进展详情</span>
    </div>
      <hr>
         <!-- 跳转导航开始 -->
         <div class="AppBar" style="position: relative;">
            <div @click="content">项目基本内容</div>
            <div @click="remark">项目详情</div>
            <div @click="remark2" class="AppBarActive">活动开展</div>
            <div @click="remark4">项目附件</div>
            <div @click="remark5">项目结题附件</div>
            <el-button type="primary" style="position: absolute;right: 0;top: -5px; width: 100px;font-size: 16px;" 
            @click="$router.back()"
             size="mini">返回</el-button>
          </div>
          <!-- 跳转导航结束 -->

     <!-- 活动申请填写信息区域开始 -->
      <div class="select">
                <div class="selectTop">
                  <div class="label">项目名称</div>
                  <el-input v-model="selects.projectName" placeholder="请输入内容"></el-input>
                </div>
                <div class="selectMid">
                  <div class="selectLeft">
                      <div class="inpBlock" style="position: relative;">
                          <div class="label">预算经费</div>
                          <el-input v-model="selects.fund" placeholder="请输入内容"></el-input>
                          <div style="position: absolute;top: 8px;right: -30px;">(万)</div>
                      </div>
                      <div class="inpBlock">
                          <div class="label">负责人</div>
                          <el-input v-model="selects.leader" placeholder="请输入内容"></el-input>
                      </div>
                      <div class="inpBlock">
                          <div class="label">所在部门</div>
                          <el-select v-model="selects.department" style="width: 100%;" placeholder="请选择">
                            <el-option
                              v-for="item in selectInput"
                              :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="selects.tel" placeholder="请输入内容"></el-input>
                      </div>
                  </div>

                  <div class="selectRight">
                    <div class="inpBlock">
                          <div class="label">项目开始时间</div>
                          <el-date-picker
                            v-model="selects.beginDate"
                            type="datetime"
                            style="width: 100%;"
                            placeholder="选择日期">
                          </el-date-picker>
                      </div>
                      <div class="inpBlock">
                          <div class="label">参与学生人数</div>
                          <el-input v-model="selects.studentNum" placeholder="请输入内容"></el-input>
                      </div>
                      
                  </div>
                </div>
      </div>
      <!-- 活动申请填写信息区域结束 -->



   <!-- 活动指导老师开始 -->
   <div class="tabTit">
                <div>
                  <p>活动指导老师</p>
                </div>
                <el-button type="primary" @click="addTeacher" size="mini">添加教师</el-button>
              </div>
              <hr>
              <el-table
                :data="tableData"
                tooltip-effect="dark"
                stripe
                class="fontSize"
                :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
                >
                <!-- 数据根据prop进行遍历填充 -->
                <el-table-column
                  prop="Name"
                  label="姓名"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  prop="work"
                  label="工作单位"
                  align="center"
                  >
                </el-table-column>
  
                <el-table-column
                  prop="takeCharge"
                  label="活动分工"
                  align="center"
                  >
                </el-table-column>
                
                <el-table-column
                  prop="operation"
                  align="center"
                  label="操作"
                  >
                  <template #default="scope">
                      <div class="operations">
                              <el-button type="primary" size="mini" @click="updateTeacher(scope.$index)" style="font-size: 14px;">修改</el-button>
                              <el-button type="primary" size="mini" style="font-size: 14px;" @click="deleteRow(scope.$index)">删除</el-button>
                      </div>
                  </template>
                </el-table-column>
              </el-table>
            <!-- 活动指导老师结束 -->


    <!-- 多行文本框区域开始 -->
      
    <div class="tabTit">
                 <div><p>活动介绍</p></div>
            </div>
              <el-input
                type="textarea"
                :rows="6"
                resize="none"
                style="color: black;font-size: 16px;font-weight: 600;"
                placeholder="请输入内容"
                v-model="selects.brief">
              </el-input>
      <div class="tabTit">
            <div><p>活动计划</p></div>
      </div>
      <div class="textArea">
        <vue-editor  :editorToolbar="customToolbar" v-model="textareaS[0]"></vue-editor>
      </div>
      <div class="tabTit">
            <div><p>预期目标</p></div>
      </div>
      <div class="textArea">
        <vue-editor  :editorToolbar="customToolbar" v-model="textareaS[1]"></vue-editor>

      </div>
      <div class="tabTit">
            <div><p>活动受面</p></div>
      </div>
      <div class="textArea">
        <vue-editor  :editorToolbar="customToolbar" v-model="textareaS[2]"></vue-editor>

      </div>
      <div class="tabTit">
            <div><p>经费支出计划</p></div>
      </div>
      <div class="textArea">
        <vue-editor  :editorToolbar="customToolbar" v-model="textareaS[3]"></vue-editor>
      </div>
    <!-- 多行文本框区域结束 -->
    <div class="baseBtn">
            <div class="blockWidth">
              <el-button v-show="state==0" type="primary" class="backBtn"  @click="updateActivityDialog" >上传修改</el-button>
              <el-button v-show="state==1" type="primary" class="backBtn"  @click="updateActivityDialog" >上传修改</el-button>
              <el-button v-show="state==2" disabled style="background: #ccc !important;border: 0;" type="primary" class="backBtn"  @click="updateActivityDialog" >上传修改</el-button>
            </div>
          </div>

     <!--添加成员dialog对话框开始 -->
     <el-dialog
            :title="isAddMember?'添加指导老师':'修改指导老师'"
            :visible.sync="addMemberDialog"
            class="AddMember"
            :before-close="handleClose">

              <div class="littleBlock">
                <div class="dialogLabel">姓名</div>
                <div>
                  <el-input v-model="Member.Name"></el-input>
                </div>
              </div>

              <div class="littleBlock">
                <div class="dialogLabel">工作单位</div>
                <div>
                  <el-input v-model="Member.work"></el-input>
                </div>
              </div>

              <div class="littleBlock">
                <div class="dialogLabel">活动分工</div>
                <div>
                  <el-input v-model="Member.takeCharge"></el-input>
                </div>
              </div>
              <div slot="footer" class="footer">
                <el-button v-show="isAddMember" type="primary" @click="commit" class="AllDialogBtn" >确认提交</el-button>
                <el-button v-show="!isAddMember"  type="primary" @click="change" class="AllDialogBtn" >确认修改</el-button>
                <el-button @click="handleClose" class="AllDialogBtn">取消</el-button>
              </div>
        </el-dialog>
      <!--添加成员dialog对话框结束 -->
      <!-- 修改对话框框开始 -->
      <el-dialog
          title="提示"
          :visible.sync="updateActivity"
          width="600px"
          class="projectApplicationfundAddDialog"
          :before-close="handleClose">
          <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="handleClose"  class="AllDialogBtn">取消</el-button>
          </span>
        </el-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="handleClose" class="AllDialogBtn" >取消</el-button>
              </span>
            </el-dialog>
      <!-- 删除成员对话框结束 -->




    </div>
</template>

  <script>
  import { VueEditor } from "vue2-editor";
  // import { uuid } from 'vue-uuid';
      export default {
        components:{
          VueEditor,
        },
        data() {
          return {
            updateActivity:false,
            loading:false,
            isAddMember:1,
            state:0,
            customToolbar: [
              ["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }],
              [{ align: "" }, { align: "center" }, { align: "right"}, { align: "justify"}],
              [{header:[false,1,2,3,4]}]
            ],
            iid:'',        //为删除框储存id
          delMember:false,   //删除对话框
          addMemberDialog:false,
          tableData:[],  //活动指导老师列表
          selects:{      //基础信息
            projectName:'',
            fund:'',
            leader:'',
            department:'',
            tel:'',
            beginDate:'',
            studentNum:'',
            brief:'',
            classid:"",

          },

          textareaS:[],
          selectInput: [], //部门下拉框
          Member:{
              // Id:"",
              Name:'',
              work:'',
              takeCharge:''
          },
          }
        },
        methods:{
        
              getData(){       //获取基础信息
                this.loading = true;
                this.ajax.get(this.$store.state.api+"/GetActivityDetail",{
                  uid:this.$store.state.userInfo.userid,
                  // aId:this.$route.query["Id"]
                  aId:this.$route.query["Id"]
                }).then(res=>{
                  if(!res.data[0][0])return this.$message.error("错误")
                  let data = res.data[0][0];
                  // console.log(data);
                  this.selects.projectName=data.title;
                  this.selects.fund=data.money;
                  this.selects.leader=data.pro_leader;
                  this.selects.tel=data.phone;
                  this.selects.brief=data.brief
                  this.selects.classid=data.classid
                  this.selects.beginDate=data.create_at;
                  this.selects.studentNum=data.students;
                  this.selects.department=data.classid;
                  this.tableData=JSON.parse(data.course_teacher)
                  this.textareaS=JSON.parse(data.chapters)
                  this.state=data.state
                  this.loading = false;
                }).catch(err=>{
                  this.$message.error(err.message)
                })
              },
              getAllClass(){
                    this.ajax.get(this.$store.state.api+"/SelectAllDepartment",{
                        uid:this.$store.state.userInfo.userid,
                    }).then(res=>{
                        this.selectInput = res.data[0];
                    }).catch(err=>{
                        this.$message.error(err.message)
                    })
                },
                handleClose(){
                    this.addMemberDialog=false
                    this.updateActivity=false
                    this.delMember=false
                    for(let i in this.Member)this.Member[i]='';
                },
                addTeacher(){    //添加老师对话框
                  this.isAddMember=1;
                  this.addMemberDialog=true;
                },
                commit(){  //确定添加老师
                    if(this.Member.Name=='')return this.$message.error('请输入姓名')
                    if(this.Member.work=='')return this.$message.error('请输入工作单位')
                    if(this.Member.takeCharge=='')return this.$message.error('请输入活动分工')
                    let k={}
                    this.addMemberDialog=false;
                    Object.assign(k,this.Member)
                    this.tableData.push(k);
                    this.$message.success('添加成功')
                    for(let i in this.Member)this.Member[i]='';
              },

              updateTeacher(index){    //修改对话框出现
                Object.assign(this.Member,this.tableData[index])
                this.Member['index']=index      //在data中赋值这样谁都可以取到了
                this.isAddMember=0;
                this.addMemberDialog = true;
              },
              change(){    //确定修改老师
                if(this.Member.Name=='')return this.$message.error('请输入姓名')
                if(this.Member.work=='')return this.$message.error('请输入工作单位')
                if(this.Member.takeCharge=='')return this.$message.error('请输入活动分工')

                Object.assign(this.tableData[this.Member['index']],this.Member)     //this.Member['index']在显示框出现的时候赋值了
                for(let i in this.Member)this.Member[i]='';
                this.addMemberDialog = true;
                this.$message({message:"修改成功",type:"success"})
                this.addMemberDialog = false;
              },

              deleteRow(index){   //删除对话框出现
                this.delMember=true
                this.iid=index
              },
              commitDelMember(){    //确定删除老师
                this.tableData.splice(this.iid,1)
                // this.tableData = this.tableData.filter(item=>item.Id!=this.iid);
                this.$message({message:"删除成功",type:"success"})
                this.delMember=false
              },
              updateActivityDialog(){   //显示修改提交对话框
                this.updateActivity=true
              },
              submitAll(){      //确定提交修改
                  //保存修改
                    const param = {
                      uid:this.$store.state.userInfo.userid,
                      aid:this.$route.query["Id"],
                      tit:this.selects.projectName,
                      con:this.selects.brief,
                      leader:this.selects.leader,
                      mon:this.selects.fund,
                      stu:this.selects.studentNum,
                      teacher:JSON.stringify(this.tableData),
                      chap:JSON.stringify(this.textareaS),
                      pid:this.$route.query['pid'],
                      cid:this.selects.classid,
                      ph:this.selects.tel,
                      beginTime:JSON.stringify(this.selects.beginDate)
                    }

                    this.ajax.post(this.$store.state.api+"/UpdateActivity",param).then(res=>{
                      if(res.data==1){
                        this.$message.success("修改成功");
                        this.updateActivity=false
                        this.getData();
                      }else{
                        this.$message.error("修改失败"+res.data);
                      }
                    }).catch(err=>{
                      this.$message.error(err.message)
                    })
                    console.log(this.tableData)
              },
              content(){
                this.$router.push('/ProjectManagement1')
              },
              remark(){
                this.$router.push('/ProjectManagement2')
              },
              remark2(){
                this.$router.push('/ProjectManagement3')
              },
              remark4(){
                this.$router.push('/ProjectManagement4')
              },
              remark5(){
                this.$router.push('/ProjectManagement5')
              },
              edit(){
      
              },
              backBtn2(){
                this.$router.push('/ProjectManagement1')
              },
              // handleSelectionChange(val) {
              //   this.multipleSelection = val;
              // },
         
        },
        mounted(){
          this.getData();
          this. getAllClass();
          // console.log(this.$route.query["Id"]);
        }
      }
  </script>

  <style lang="less">
   
    .projectApplicationfundAddDialog{  //提交对话框开始
 
      .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__header{
        background: #32455b;
      }
      .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;
      // .btn5{
      //   height: 40px;
      //   font-size: 16px;
      //   background: #0e72e6;
      //   width: 200px;
      // }
      }
      }

    .delMemberDialog{    //删除对话框
            font-size: 18px;
            .el-dialog{
              border-radius: 5px;
              overflow: hidden;
            }
            .deleteContent{
              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;
            }
            // .addDialogMid{
            //   box-sizing: border-box;
            //   padding:0 60px 0 10px;
            //   .addDialogTit{
            //     display: flex;
            //     span{
            //       width: 80px;
            //       font-size: 16px;
            //       line-height: 40px;
            //       text-align: left;
                  
            //     }
            //   }
 
            // }
            .dialog-footer{
              display: flex;
              justify-content: center;
              box-sizing: border-box;
              // .btn5{
              //   font-size: 16px;
              // }
            }
          }
  </style>