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" 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" 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="loading" element-loading-text="文件正在上传中">
              <div style="display: flex;width: 100%;flex-direction: column;">
                  <div class="download" v-for="item in tableData.reportFile">
                      <span>{{ item.fileName }}</span>
                      <div class="downloadBtn">
                        <el-button type="primary" size="mini">下载文件</el-button>
                        <el-button type="primary" @click="checkDelFile(item.fid)" size="mini">删除文件</el-button>
                      </div>
                  </div>
                  <!-- <div  class="download" v-if="tableData.reportFile!=''&&tableData.reportFile!=null">{{ tableData.reportFile!=''&&tableData.reportFile!=null?JSON.parse(tableData.reportFile).fileName:'' }}</div> -->
                  <div class="addMoneyBtn">
                      <div class="jia">+</div>添加
                      <div id="upFile">
                        <beUpload @getFile="getFile" :navName="'上传文件'" :accept="accept"> </beUpload>
                      </div>
                  </div>
                  <!-- <div class="DelFile" v-if="tableData.reportFile!=''&&tableData.reportFile!=null">
                    <el-button type="danger" @click="DelFileDialog = true">删除文件</el-button>
                  </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.row.Id)" style="font-size: 14px;">修改</el-button>
                              <el-button type="primary" size="mini" style="font-size: 14px;" @click="DeleteS(scope.row.Id)">删除</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="Member.Id==''?'添加指导老师':'修改指导老师信息'"
                  :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="Member.Id==''" type="primary" @click="commit" class="diaBtn"  size="small">确认提交</el-button>
                      <el-button v-if="Member.Id!=''" 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="btn5" size="small">确认提交</el-button>
                        <el-button @click="dialogVisible1=false;" class="btn5" 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="danger" @click="DelFileYes" class="btn5" size="small">确认删除</el-button>
                        <el-button @click="DelFileDialog=false;" class="btn5" 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="btn5" size="small">确认审核</el-button>
                        <el-button @click="processDialog=false;" class="btn5" style="background:#cccccc" size="small">取消</el-button>
                    </span>
                  </el-dialog>
      </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import { uuid } from 'vue-uuid';
import BeUpload from '../../components/tool/beUpload.vue'
export default {
  components:{
    VueEditor,
    BeUpload
  },
  data() {
    return {
      accept:"*",
      loading:false,
      DelFileDialog:false,
      dialogVisible1:false,
      addMemberDialog:false,
      processDialog: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:"",
      },
      selectInput:{
        project:[],
        class:[]
      },
      DelFileData:{
        fid:"",
        fileName:"",

      },
      Member:{
        Id:'',
        Name:'',
        work:'',
        takeCharge:''
      },
      }
  },
  methods:{
    DelFileYes(){
      let newFile = this.tableData.reportFile.filter(item=>item.fid!=this.DelFileData.fid);
      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(Id){
      this.DelFileData = this.tableData.reportFile.filter(item=>item.fid==Id)[0];
      this.DelFileDialog = true;
    },
    // delFile(Id){
    //   let file = this.tableData.reportFile.filter(item=>item.fid==Id)[0];
    //   this.$confirm(`确定删除${file.fileName}这个文件吗?`, '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     let newFile = this.tableData.reportFile.filter(item=>item.fid!=Id);
    //     console.log(newFile);
    //   })
    // },
    getFile(val) {//上传文件
      val.fid = uuid.v1()
      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);
      })
        // console.log(val);
    },
    submit(){
      if(this.check()!=1)return;
      this.dialogVisible1 = true;
    },
    DeleteS(Id){
      this.tableData.course_teacher = this.tableData.course_teacher.filter(item=>item.Id!=Id);
    },
    //保存修改
    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)
      }
      // console.log(param)
      // return;
      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)
      })
      console.log(this.tableData)
    },
    change(){
      if(this.Member.Id=='')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.filter(item=>item.Id==this.Member.Id)[0],this.Member)
      for(let i in this.Member)this.Member[i]='';
      this.addMemberDialog = true;
      this.addMemberDialog = false;
    },
    updateTeacher(Id){
      Object.assign(this.Member,this.tableData.course_teacher.filter(item=>item.Id==Id)[0])
      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(a!='Id'&&/^\s*$/g.test(this.Member[a]))return this.$message.error("请不要留空")
      this.Member.Id = uuid.v1();
      let pushData={};
      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.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("错误")
        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)
        // console.log(data.reportFile)
        // console.log(data.reportFile==''||data.reportFile==null?[]:JSON.parse(data.reportFile))
        data.reportFile = data.reportFile==''||data.reportFile==null?[]:JSON.parse(data.reportFile)
        // data.reportFile = data.reportFile==''||data.reportFile==null?[]:JSON.parse(data.reportFile);
        this.tableData = data;
        console.log(this.tableData)
        // this.$message.success("获取数据成功")
      }).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)
      })
    }
  },
  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: 25px;
    color: #000;
  }
  .addDialogLogo{
    width: 60px;
    height: 30px;
    line-height: 30px;
    background: #f2f2f2;
    position: absolute;
    left: 10px;
    top: 10px;
    text-align: center;
  }
 
  .el-dialog__title{
    // margin-left:250px;
    display: flex;
    justify-content: center;
    color:rgb(246, 247, 246);
  }
  
  .dialog-footer{
    display: flex;
    justify-content: center;
    .btn5{
      // background: #0e72e6;
      height: 40px;
      width: 200px;
      font-size: 16px;
    }
  }
}
.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>