ssti-CollegeManage/src/views/projectApply/projectApplicationDetails.vue

<template>
  <!-- 项目立项申请查看详细项目基本内容 -->
  <div class="projectApplication1">
    <div class="vfpHeader">
      <!-- 详情页 -->
        <div class="titleOne">项目立项申请</div>
        <span class="smallTitle">项目进展详情</span>
        <el-button @click="back()" type="primary" size="mini">返回</el-button>
    </div>


    <hr>
    <!-- 跳转导航开始 -->
    <div class="AppBar">
      <div class="AppBarActive">项目基本内容</div>
      <div @click="remark">项目详情</div>
    </div>
    <!-- 跳转导航结束 -->

     <!-- 活动申请填写信息区域开始 -->
     <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.tel" placeholder="请输入内容"></el-input>
                    </div>
                </div>

                <div class="selectRight">
                  <div class="inpBlock">
                        <div class="label">项目开始时间</div>
                        <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 v-model="select.Fund" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="inpBlock">
                        <div class="label">选择分类</div>
                        <el-select v-model="select.sort" style="width: 100%;" placeholder="请选择">
                          <el-option
                            v-for="item in select.sortOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                    </div>
                </div>
              </div>
              
        </div>
        <!-- 活动申请填写信息区域结束 -->


         <!-- 项目封面修改上传开始 -->
         <div style="height: 260px;">
              <div class="tabTit">
                <div><p>封面上传</p></div>
              </div>
              <hr>
              <div style="margin-bottom: 10px;">修改项目封面</div>

              <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 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></div>
          <el-button type="primary" @click="addMember"  size="mini">添加成员</el-button>
      </div>
      <hr>
      <el-table
        :data="tableData"
        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="phone"
          label="电话"
          align="center"
         >
        </el-table-column>

        <el-table-column
          prop="score"
          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></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>
      </div>
    </div>
      <!--添加成员dialog对话框开始 -->
      <el-dialog
          :title="isAddMember==1?'添加成员':'修改成员'"
          :visible.sync="addMemberDialog"
          :modal="true"
          :close-on-click-modal="true"
          class="AddMember"
          :before-close="init">

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

            <div class="littleBlock">
              <div class="dialogLabel">班级</div>
              <div>
                <el-input v-model="addTabMember.class"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">电话</div>
              <div>
                <el-input class="inputNumber" type="number" v-model="addTabMember.phone" @blur="getText(addTabMember.phone)" ></el-input>
              </div>
            </div>
            <!-- <div class="littleBlock">
              <div class="dialogLabel">学分</div>
              <div>
                <el-input type="number" v-model="addTabMember.score" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" ></el-input>
              </div>
            </div> -->
            <div slot="footer" class="footer">
              <el-button v-show="isAddMember" type="primary" @click="commit" class="diaBtn" >确认提交</el-button>
              <el-button v-show="!isAddMember" type="primary" @click="commit2" class="diaBtn" >确认修改</el-button>

              <el-button @click="init" class="diaBtn">取消</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="btn5">确认删除</el-button>
                <el-button @click="init" class="btn5" >取消</el-button>
              </span>
        </el-dialog>
      <!-- 删除成员对话框结束 -->

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

<script>
  // import { uuid } from 'vue-uuid';
  import BeUpload from "../../components/tool/beUpload.vue";
    export default {
      components: {
        BeUpload,
      },
      data() {
        return {
          iid:'',
          accept:"image/*",
          isAddMember:1,
          dialogImageUrl:'',  //图片地址
          delMember:false,
          amendMemberDialog:false,
          addMemberDialog:false,
          submitHint:false,
          select:{    //数据详情框数据
            project:'',   
            person:'',
            departmentData:"",  //部门框值
            sort:'',     //分类值
            tel:'',
            Date:'',
            Fund:'',
            sortOptions: [], //分类下拉框
            department:[],
          },
          textarea:'周四福利大放送',   //项目简介

          tableData:[],   //成员列表数据
          
          addTabMember:{       //添加项目成员
            // id:'',
            name:'',
            class:'',
            phone:'',
            score:0
          }
        }
      },
      methods:{
        getText(value) {     //电话验证
          let verify = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/; //获取正则表达式 存放到verify变量中
          let result = verify.test(value.trim()); //判断输入框内容是否符合 正则表达式
          if(result){
            return result;
          }else{
            this.$message.error("请输入正确的手机号格式")
            return false;
          }
          // if()
          // return verify.test(value.trim())
          // if(!result && value != "") {
          // if(!result) {
          //       return false;
          // }else{
          //   return true;
          // }
        },
        getFile(val) {       //上传封面
            console.log(val);
            this.dialogImageUrl=val.url
        },
        addMember(){       //添加成员按钮，显示对话框
            this.addMemberDialog=true;
            this.isAddMember=1;
        },
        commit(){         //对话框确认添加成员按钮 
          // console.log(this.addTabMember.name);
            let newMember={name:'',class:'',phone:'',score:''};
            if (this.addTabMember.name == undefined || this.addTabMember.name=='') return this.$message.error('请输入姓名')
            if (this.addTabMember.class == undefined || this.addTabMember.name=='') return this.$message.error('请输入班级')
            if (this.addTabMember.phone == undefined || this.addTabMember.name=='') return this.$message.error('请输入电话') 
            if (!this.getText(this.addTabMember.phone))return;
            Object.assign(newMember,this.addTabMember)
            this.tableData.push(newMember)
            this.$message.success('添加人员成功')
            for(let k in this.addTabMember){
              if (k !== 'score') {
                  this.addTabMember[k]=''
              }
            }
            
            this.addMemberDialog=false;
        },
        amendDialogData(index){   //人员信息列表修改按钮
          Object.assign(this.addTabMember,this.tableData[index])
          this.addTabMember['index']=index
          this.isAddMember=0
          this.addMemberDialog=true
        },
        commit2(){       //人员信息对话框确定修改按钮
          if (this.addTabMember.name == undefined || this.addTabMember.name=='') return this.$message.error('请输入姓名')
          if (this.addTabMember.class == undefined || this.addTabMember.name=='') return this.$message.error('请输入班级')
          if (this.addTabMember.phone == undefined || this.addTabMember.name=='') return this.$message.error('请输入电话')
          if (!this.getText(this.addTabMember.phone)) return;
          Object.assign(this.tableData[this.addTabMember['index']],this.addTabMember)
          this.addMemberDialog=false;
          this.$message.success('修改信息成功')
          for(let k in this.addTabMember){
              if (k!=='score') {
                  this.addTabMember[k]=''
              }
            }
        },
        Del(val){
          this.iid=val;             //列表删除按钮
          this.delMember=true;
        },
        commitDelMember(){    //对话框确定删除按钮
          this.tableData.splice(this.iid,1)
          this.$message.success('删除成功')
          this.delMember=false;
        },
        audit(){    //立即修改对话框显示
          this.submitHint=true
        },
        submitAll(){
          let param={
            uid:this.$store.state.userInfo.userid,
            pid:JSON.parse(localStorage.getItem('pid')),
            tit:this.select.project,
            leader:this.select.person,
            beginTime:this.select.Date,
            cid:this.select.departmentData,
            mon:this.select.Fund,
            phone:this.select.tel,
            tid:this.select.sort,
            student:JSON.stringify(this.tableData),
            con:this.textarea,
            imgsrc:this.dialogImageUrl
          }
            this.ajax
                  .post(this.$store.state.api+'/UpdateProjectBase',param)
                  .then(res=>{
                    // console.log(res);
                    if (res.data==1) {
                      this.$message.success('修改成功')
                      this.submitHint=false
                      this.getData()
                      return
                    }
                    this.$message.error('修改失败')
                   

                  },err=>{
                    console.log(err);
                  })
        },
        init(){
          this.addMemberDialog=false;
          this.amendMemberDialog=false;
          this.delMember=false;
          this.submitHint=false;
        },

        remark(){    //导航栏项目详情按钮
          this.$router.push('/projectApplication2')
        },

        back(){     //返回按钮
          this.$router.push('/projectApplication')
        },
        getData(){   //初始化完成获取基本数据进行填充
          let param={
            uid:this.$store.state.userInfo.userid,
            pid:JSON.parse(localStorage.getItem('pid'))
          }
            this.ajax
                  .get(this.$store.state.api+'/GetProjectBase',param)
                  .then(res=>{
                    // console.log(res);
                    let data=res.data[0][0]
                    this.select.project=data.title;
                    this.select.Fund=data.money;
                    this.select.person=data.pro_leader;
                    this.select.Date=data.begintime;
                    this.textarea=data.brief;
                    this.tableData=JSON.parse(data.course_student) 
                    this.select.tel=data.phone;
                    this.dialogImageUrl=data.image
                    this.select.departmentData = data['classid']
                    this.select.sort = data['typeid']
                  },err=>{
                    console.log(err);
                  })
        },
        getProjectDepartmentData(){  //获取项目立项申请基础信息页面所在部门数据
              let param={
                uid:this.$store.state.userInfo.userid
              }
                this.ajax
                      .get(this.$store.state.api+'/SelectAllDepartment',param)
                      .then(res=>{
                        // console.log(res.data);
                        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=res.data[0]
                  },err=>{
                    console.log(err);
                  })
        },
      },
      created(){    //数据加载完成后触发
        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;
        font-size: 22px;
        position: relative;
        top: -5px;
      }
      .el-dialog__body{
        display: flex;
        justify-content: center;
      }
      .dialog-footer{
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        .btn5{
          font-size: 16px;
        }
      }
    }


  //项目修改对话框开始
  .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;
 .btn5{
   height: 40px;
   font-size: 16px;
   background: #0e72e6;
   width: 200px;
 }
}
}
}
</style>