ssti-CollegeManage/src/views/activityManage/makerActvityDetails.vue

<template>
  <!-- 创客创新-查看详细 -->
     <div class="makerActvityDetails">

            <div class="vfpHeader">
              <div class="titleOne">活动详情</div>
              <el-button type="primary" @click="backBtn">返回</el-button>
            </div>
            <hr>
            <!-- 活动基本信息开始 -->
            <div class="tabTit">
              <div><p>活动基本信息</p></div>
            </div>
          <!-- 活动申请填写信息区域开始 -->
          <div class="select">
                    <div class="selectTop">
                      <div class="label">活动名称</div>
                      <el-input v-model="tableData.title" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="selectMid">
                      <div class="selectLeft">
                          <div class="inpBlock" style="position: relative;">
                              <div class="label">所属项目</div>
                              <el-select v-model="tableData.pid" @change="checkProjectMoney(tableData.pid,tableData.money)" style="width: 100%;" placeholder="请选择">
                                <el-option
                                  v-for="item in selectInput.project"
                                  :key="item.courseId"
                                  :label="item.title"
                                  :value="item.courseId">
                                </el-option>
                              </el-select>
                          </div>
                          <div class="inpBlock">
                              <div class="label">预算经费</div>
                              <el-input type="number" v-model.number="tableData.money" @blur="checkProjectMoney(tableData.pid,tableData.money)" placeholder="请输入预算经费"></el-input>
                              <div style="position: absolute;right: -28px;top:8px">(元)</div>
                          </div>
                          <div class="inpBlock">
                              <div class="label">负责人</div>
                              <el-input v-model="tableData.pro_leader"></el-input>
                          </div>
                          <div class="inpBlock">
                              <div class="label">所在部门</div>
                               <el-select v-model="tableData.classid" style="width: 100%;" placeholder="请选择">
                                <el-option
                                  v-for="item in selectInput.class"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id">
                                </el-option>
                              </el-select>
                          </div>
                      </div>

                      <div class="selectRight">
                        <div class="inpBlock" style="position: relative;">
                              <div class="label">活动时间</div>
                              <el-date-picker
                                v-model="tableData.begin_at"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                              </el-date-picker>
                              <!-- <el-input v-model="data.fund" placeholder="请输入内容"></el-input>
                              <div style="position: absolute;right: -28px;top:8px">(元)</div> -->
                          </div>
                          <div class="inpBlock">
                              <div class="label">参与学生人数</div>
                              <el-input type="number" v-model.number="tableData.students" placeholder="请输入内容"></el-input>
                          </div>
                          <div class="inpBlock">
                              <div class="label">联系电话</div>
                              <el-input @blur="checkPhone(tableData.phone)" v-model="tableData.phone" placeholder="请输入内容"></el-input>
                          </div>
                      </div>
                    </div>
                   
          </div>
             
            <!-- 活动完结报告开始 -->
            <div class="tabTit">
                <div><p>活动完结报告</p></div>
            </div>
            <div style="width: 85%" v-loading="downloadNow" element-loading-text="文件正在下载中">
              <div style="display: flex;width: 100%;flex-direction: column;" >
                  <div class="download" v-for="item in tableData.reportFile" :key="item.url">
                      <span>{{ item.fileName }}</span>
                      <div class="downloadBtn">
                        <el-button type="primary" size="mini" @click="download(item)">下载文件</el-button>
                        <el-button type="primary" @click="checkDelFile(item.url)" size="mini">删除文件</el-button>
                      </div>
                  </div>
                  <el-progress style="margin-top:20px" v-show="progress.show" :percentage="progress.value" :format="ProgressFormat"></el-progress>
                  <div class="addMoneyBtn">
                      <div class="jia">+</div>添加
                      <div id="upFile">
                        <beUpload @getFile="getFile" :navName="'上传文件'" :accept="accept" :progress="progress"> </beUpload>
                      </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.course_teacher"
                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" > -->
                              <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="DeleteS(scope.$index)">删除</el-button>
                          <!-- </el-button> -->
                      </div>
                  </template>
                </el-table-column>
              </el-table>
            <!-- 活动指导老师结束 -->

            <!-- 多行文本框部分开始 -->
            <div class="tabTit">
                 <div><p>活动介绍</p></div>
            </div>
              <el-input
                type="textarea"
                :rows="6"
                placeholder="请输入内容"
                v-model="tableData.brief">
              </el-input>
              <!-- <vue-editor  :editorToolbar="customToolbar" v-model="tableData.brief"></vue-editor> -->
            <div class="tabTit">
                 <div><p>活动计划</p></div>
            </div>
             
              <vue-editor  :editorToolbar="customToolbar" v-model="tableData.chapters[0]"></vue-editor>
            <div class="tabTit">
                 <div><p>预期目标</p></div>
            </div>
            
                <vue-editor  :editorToolbar="customToolbar" v-model="tableData.chapters[1]"></vue-editor>
              
            <div class="tabTit">
                 <div><p>活动受面</p></div>
            </div>
            
              <vue-editor  :editorToolbar="customToolbar" v-model="tableData.chapters[2]"></vue-editor>
            <div class="tabTit">
                 <div><p>经费支出计划</p></div>
            </div>
             
              <vue-editor  :editorToolbar="customToolbar" v-model="tableData.chapters[3]"></vue-editor>
            <!-- 多行文本框部分结束 -->

            <div class="baseBtn">
              <div class="BtnStyle">
                <el-button type="primary" @click="submit" size='small'>保存</el-button>
                <el-button type="primary"  @click="getData" size='small'>重置</el-button>
                <el-button v-if="tableData.state==0" type="primary" @click="processDialog = true" size='small'>立即审核</el-button>
                <el-button v-if="tableData.state==1" type="info" style="background-color: gray;" disabled size='small'>立即审核</el-button>
              </div>
            </div>


            <!--添加成员dialog对话框开始 -->
              <el-dialog
                  :title="isAddTeacher?'添加指导老师':'修改指导老师信息'"
                  :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-if="isAddTeacher" type="primary" @click="commit" class="diaBtn"  size="small">确认提交</el-button>
                      <el-button v-if="!isAddTeacher" type="primary" @click="change" class="diaBtn"  size="small">确认修改</el-button>
                      <el-button @click="handleClose" class="diaBtn" size="small">取消</el-button>
                    </div>
              </el-dialog>
            <!--添加成员dialog对话框结束 -->
                  <!-- 提交对话框开始 -->
                  <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible1"
                    width="600px"
                    class="MAputIn AddMember">
                    <div class="addDialogLogo">LOGO</div>
                    <div class="deleteContent">是否修改“{{ tableData.title}}”项目活动？</div>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="save" class="AllDialogBtn" size="small">确认提交</el-button>
                        <el-button @click="dialogVisible1=false;" class="AllDialogBtn" style="background:#cccccc" size="small">取消</el-button>
                    </span>
                  </el-dialog>
                  <!-- 删除文件对话框结束 -->
                  <el-dialog
                    title="提示"
                    :visible.sync="DelFileDialog"
                    width="600px"
                    class="MAputIn AddMember">
                    <div class="addDialogLogo">LOGO</div>
                    <div class="deleteContent" >是否删除“{{DelFileData.fileName}}”文件？</div>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="DelFileYes" class="AllDialogBtn" size="small">确认删除</el-button>
                        <el-button @click="DelFileDialog=false;" class="AllDialogBtn" style="background:#cccccc" size="small">取消</el-button>
                    </span>
                  </el-dialog>
                  <!-- 删除文件对话框结束 -->
                  <!-- 审核对话框开始 -->
                  <el-dialog
                    title="提示"
                    :visible.sync="processDialog"
                    width="600px"
                    class="MAputIn AddMember">
                    <div class="addDialogLogo">LOGO</div>
                    <div class="deleteContent">是否审核“{{ tableData.title}}”项目活动？</div>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="process" class="AllDialogBtn" size="small">确认审核</el-button>
                        <el-button @click="processDialog=false;" class="AllDialogBtn" style="background:#cccccc" size="small">取消</el-button>
                    </span>
                  </el-dialog>
                  <!-- 审核对话框结束 -->
                  <!-- 删除老师对话框开始 -->
                  <el-dialog
                    title="提示"
                    :visible.sync="DelTeacherDialog"
                    width="600px"
                    class="MAputIn AddMember">
                    <!-- <div class="addDialogLogo">LOGO</div> -->
                    <div class="deleteContent">是否删除“{{ delTeacherTable.Name}}”指导老师？</div>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="DelTeacherYes" class="AllDialogBtn" size="small">确认删除</el-button>
                        <el-button @click="DelTeacherDialog=false;" class="AllDialogBtn" size="small">取消</el-button>
                    </span>
                  </el-dialog>
                  <!-- 删除老师对话框结束 -->
      </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import BeUpload from '../../components/tool/beUpload.vue'
import downloadFile from '@/components/tool/downloadFile.js'
export default {
  components:{
    VueEditor,
    BeUpload
  },
  data() {
    return {
      downloadNow:false,
      accept:"*",
      loading:false,
      DelFileDialog:false,
      dialogVisible1:false,
      addMemberDialog:false,
      processDialog:false,
      DelTeacherDialog:false,
      customToolbar: [
        ["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }],
        [{ align: "" }, { align: "center" }, { align: "right"}, { align: "justify"}],
        [{header:[false,1,2,3,4]}]
      ],
      tableData:{
        acId:"",
        title:"",
        pid:"",
        userid:"",
        money:0,
        pro_leader:"",
        classid:"",
        begin_at:[],
        students:0,
        state:0,
        phone:"",
        course_teacher:[],
        brief:"",
        chapters:["","","",""],
        reportFile:"",
      },
      oldMoney:0,
      selectInput:{
        project:[],
        class:[]
      },
      DelFileData:{
        fid:"",
        fileName:"",
      },
      delTeacherTable:{
        Id:"",
        name:"",
      },
      Member:{
        Name:'',
        work:'',
        takeCharge:''
      },
      isAddTeacher:true,
      progress:{
        value:0,
        show:false
      }
      }
      
  },
  methods:{
    download(item){
      downloadFile(item['url'],item['fileName'],(_b)=>this.downloadNow = _b);
    },
    DelFileYes(){
      let newFile = this.tableData.reportFile.filter(item=>item.url!=this.DelFileData.url);
      this.ajax.post(this.$store.state.api+"/UploadActivityFile",{
        uid:this.$store.state.userInfo.userid,
        aid:this.$route.query['Id'],
        file:JSON.stringify(newFile)
      }).then(res=>{
        if(res.data==1){
          this.$message.success("删除成功");
        }else{
          this.$message.error("删除失败")
        }
        this.getData();
        this.DelFileDialog = false;
      }).catch(err=>{
        this.$message.error(err.message)
      })
    },
    checkDelFile(url){
      this.DelFileData = this.tableData.reportFile.filter(item=>item.url==url)[0];
      this.DelFileDialog = true;
    },
    getFile(val) {//上传文件
      let newData = [...this.tableData.reportFile,val];
      this.ajax.post(this.$store.state.api+"/UploadActivityFile",{
        uid:this.$store.state.userInfo.userid,
        aid:this.$route.query['Id'],
        file:JSON.stringify(newData)
      }).then(res=>{
        if(res.data==1){
          this.$message.success("添加成功");
          this.getData();
        }else{
          this.$message.error("添加失败")
        }
      }).catch(err=>{
        this.$message.error(err.message);
      })
    },
    submit(){
      if(this.check()!=1)return;
      this.dialogVisible1 = true;
    },
    DeleteS(index){
      this.delTeacherTable = this.tableData.course_teacher[index];
      this.delTeacherTable.index = index;
      this.DelTeacherDialog = true;
    },
    DelTeacherYes(){
      this.tableData.course_teacher.splice(this.delTeacherTable.index);
      this.DelTeacherDialog = false;

    },
    //保存修改
    save(){
      const data = this.tableData;

      const param = {
        uid:this.$store.state.userInfo.userid,
        aid:data.acId,
        tit:data.title,
        con:data.brief,
        leader:data.pro_leader,
        mon:data.money,
        stu:data.students,
        teacher:JSON.stringify(data.course_teacher),
        chap:JSON.stringify(data.chapters),
        pid:data.pid,
        cid:data.classid,
        ph:data.phone,
        beginTime:JSON.stringify(data.begin_at)
      }
      this.ajax.post(this.$store.state.api+"/UpdateActivity",param).then(res=>{
        if(res.data==1){
          this.$message.success("修改成功");
          this.dialogVisible1=false
          this.getData();
        }else{
          this.$message.error("修改失败"+res.data);
        }
      }).catch(err=>{
        this.$message.error(err.message)
      })
    },
    change(){
      if(this.isAddTeacher)return this.$message.error("错误");
      for(let a in this.Member)if(/^\s*$/g.test(this.Member[a]))return this.$message.error("请不要留空")
      Object.assign(this.tableData.course_teacher[this.Member.index],this.Member)
      for(let i in this.Member)this.Member[i]='';
      this.addMemberDialog = false;
    },
    updateTeacher(index){
      Object.assign(this.Member,this.tableData.course_teacher[index])
      this.Member.index = index;
      this.isAddTeacher = false;
      this.addMemberDialog = true;
    },
    //检查整个表单
    check(){
        let checkData = this.tableData;
        const cEmpty = /^\s*$/g;
        for(let i in checkData){
            switch(i){
                // case "chapters":
                //   for(let a in checkData[i]){
                //     switch(a){
                //         case "0":
                //           if(cEmpty.test(checkData[i][a]))return this.$message.error("活动计划不能为空");  
                //           break;
                //         case "1":
                //           if(cEmpty.test(checkData[i][a]))return this.$message.error("预期目标不能为空");
                //           break;
                //         case "2":
                //           if(cEmpty.test(checkData[i][a]))return this.$message.error("活动受面不能为空");
                //           break;
                //         case "3":
                //           if(cEmpty.test(checkData[i][a]))return this.$message.error("经费支出计划不能为空");
                //           break;
                //     }
                //   }
                //     break;
                case "title":
                    if(cEmpty.test(checkData[i]))return this.$message.error("活动名称不能为空");
                    break;
                case "course_teacher":
                    if(checkData[i].length==0)return this.$message.error("请添加至少一名指导老师")
                    break;
                case "fund":
                    break;
                case "people":
                    break;
                case "pro_leader":
                    if(cEmpty.test(checkData[i]))return this.$message.error("负责人不能为空");
                    break;
                case "pid":
                    if(cEmpty.test(checkData[i]))return this.$message.error("请选择所属项目");
                    break;
                case "phone":
                    if(cEmpty.test(checkData[i]))return this.$message.error("电话号码不能为空");
                    if(!this.checkPhone(checkData[i]))return;
                    break;
                case "begin_at":
                    if(checkData[i]==null||checkData[i].length<2)return this.$message.error("请选择项目开始时间");
                    break;
                case "classid":
                    if(cEmpty.test(checkData[i]))return this.$message.error("请选择所在部门");
                    break;
                // case "brief":
                //     if(cEmpty.test(checkData[i]))return this.$message.error("活动介绍不能为空");
                //     break;
            }
        }
        return 1;
    },
    //检查手机号
    checkPhone(val){
        if(/^\s*$/g.test(val))return;
        const cPhone = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
        if(!cPhone.test(val)){
            this.$message.error("电话号码格式不正确");
            return false;
        }
        return true;
    },
    commit(){
      //判断是否全部填写
      for(let a in this.Member)if(/^\s*$/g.test(this.Member[a]))return this.$message.error("请不要留空")
      let pushData={};
      delete this.Member.index
      Object.assign(pushData,this.Member)
      this.tableData.course_teacher.push(pushData);
      for(let i in this.Member)this.Member[i] = '';
      this.addMemberDialog=false;
    },
    handleClose(){
      this.addMemberDialog=false;
    },
    backBtn(){
      this.$router.push('/makerActvity')
    },
    addTeacher(){
      this.isAddTeacher = true;
      this.addMemberDialog=true;
    },
    getAllClass(){
        this.ajax.get(this.$store.state.api+"/SelectAllDepartment",{
            uid:this.$store.state.userInfo.userid,
        }).then(res=>{
            this.selectInput.class = res.data[0];
        }).catch(err=>{
            this.$message.error(err.message)
        })
    },
    getProject(){
        this.ajax.get(this.$store.state.api+"/GetAllProjectName",{
            uid:this.$store.state.userInfo.userid,
        }).then(res=>{
            this.selectInput.project = res.data[0];
        }).catch(err=>{
            this.$message.error(err.message)
        })
    },
    getData(){
      this.ajax.get(this.$store.state.api+"/GetActivityDetail",{
        uid:this.$store.state.userInfo.userid,
        aId:this.$route.query["Id"]
      }).then(res=>{
        if(!res.data[0][0])return this.$message.error("错误")
        console.log(res)
        let data = res.data[0][0];
        data.begin_at = JSON.parse(data.begin_at);
        data.course_teacher = JSON.parse(data.course_teacher);
        data.chapters = JSON.parse(data.chapters)
        data.reportFile = data.reportFile==''||data.reportFile==null?[]:JSON.parse(data.reportFile)
        this.tableData = data;
        this.oldMoney += Number(this.tableData.money)
      }).catch(err=>{
        this.$message.error(err.message)
      })
    },
    //立项审核
    process(){
      this.ajax.post(this.$store.state.api+"/UpdateActivityState",{
        uid:this.$store.state.userInfo.userid,
        aid:this.$route.query["Id"],
        st:1,
      }).then(res=>{
        if(res.data==1){
          this.$message.success("审核成功");
          this.processDialog = false;
        }else{
          this.$message.error("审核失败")
        }
        this.getData();
      }).catch(err=>{
        this.$message.error(err.message)
      })
    },
    //检查经费是否超出
    checkProjectMoney(pid,aMoney){
      if(aMoney==0){
        return 1;
      }else if(/^\s*$/g.test(pid) && aMoney!=0){
        this.tableData.money = 0;
        return this.$message.info("请先选择所属项目");
      } else if(!/^\s*$/g.test(pid) && aMoney!=0){
        this.ajax.get(this.$store.state.api+"/GetAllActivityMoneyByProjectId",{
          uid:this.$store.state.userInfo.userid,
          projectid:pid
        }).then(res=>{
          let PMoney = res.data[0][0]['PMoney'];
          let AMoney = res.data[1][0]["AMoney"];
          if(PMoney<((AMoney-this.oldMoney)+aMoney)){
            this.tableData.money = PMoney-AMoney+this.oldMoney;
            return this.$message.warning(`项目预算不足,项目预算只剩：${PMoney-AMoney+this.oldMoney}`);
          }else{
            return 1;
          }
        }).catch(err=>{
          console.log(err)
        })
      }
    },
    ProgressFormat(value){
      return value ==100?this.progress.show = false :`${value}%`
    }
  },
  mounted(){
    this.getAllClass();
    this.getProject();
    this.getData();
  }
}
</script>

<style lang="less">
.makerActvityDetails{

    
  .download{   //pdf下载
    margin: 10px 10px;
    width: 500px;
    line-height: 35px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: #5391fd;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    span{
      display: block;
      max-width: 250px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

    
  textarea{
    font-size: 16px;
    resize: none;
  }

  }
  .MAputIn{   //提交对话框样式
  .deleteContent{
    width: 100%;
    text-align: center;
    font-size: 22px;
    color: #000;
  }
  .addDialogLogo{
    width: 60px;
        height: 30px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        border-radius: 5px;
        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;
  }
  
  .dialog-footer{
    display: flex;
    justify-content: center;
  }
}
.BtnStyle{
  display: flex;
  justify-content:space-between;
  [type='button']{
      color: #fff !important;
      display: flex;
      justify-content: center;
      font-size: 16px;
      width: 120px;
      margin-left: 20px;
      height: 40px;
      align-items: center;
    }
}
</style>