ssti-CollegeManage/src/views/projectSettlement/projectSettlement1.vue

<template>
  <!-- 项目结项 项目基本内容 -->
    <div class="projectSettlement1" v-loading="loading">

        <!-- 详情页 -->
      <div class="vfpHeader">
          <div class="titleOne">项目管理</div>
          <div class="smallTitle" style="left: 100px;">项目详情</div>
          <el-button type="primary" @click="back">返回</el-button>
      </div>
      <hr>
      <div class="AppBar">
          <div @click="content" class="AppBarActive">项目基本内容</div>
          <div @click="remark">项目详情</div>
          <div @click="remark2">项目附件</div>
          <div @click="remark4">项目结题附件</div>
          <div @click="remark5">结项评语</div>
      </div>
      <div class="psSmallTit">
        <span style="margin-right: 10px;">结题时间:</span>{{ select.endTime }}
      </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"
                          disabled
                          style="width: 100%;"
                          placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="inpBlock" style="position: relative;">
                        <div class="label">预算总经费</div>
                        <el-input disabled v-model="select.Fund" placeholder="请输入内容"></el-input>
                        <span style="position: absolute;right: -20px;top: 9px;">万</span>
                    </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> -->
                        <el-cascader v-model="select.sort" :options="select.sortOptions" clearable></el-cascader>

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

        <!-- 项目成员区域开始 -->
        <div class="tabTit">
            <div><p>项目成员</p></div>
        </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.rows.id)" size="mini" style="background: #477edd">查看详情</el-button>
                </div>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 项目成员区域结束 -->

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

      <div class="baseBtn">
        <div class="blockWidth">
          <el-button type="primary" class="backBtn" @click="back">返回</el-button>
          <el-button type="primary" class="backBtn" @click="submitAmend">修改</el-button>
        </div>
      </div>
  

      <!-- 修改对话框开始 -->
      <el-dialog
          title="提示"
          :visible.sync="submitHint"
          width="600px"
          class="projectApplicationfundAddDialog"
          :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="AllDialogBtn">确认提交</el-button>
            <el-button @click="submitHint=false" size="small" class="AllDialogBtn">取消</el-button>
          </span>
        </el-dialog>
      <!-- 修改对话框结束 -->
    </div>
  </template>
  
  <script>
      export default {
        data() {
          return {
            submitHint:false,
            loading:false,
            select:{    //数据详情框数据
              project:'',   
              person:'',
              departmentData:"",  //部门框值
              sort:[],     //分类值
              tel:'',
              Date:'',
              Fund:'',
              // sortOptions: [], //分类下拉框
              sortOptions: [
                    {
                      value:"",
                      label:'',
                      children: [{
                        value: 0,
                        label: '创意组',
                      },
                       {
                        value: 1,
                        label: '初创组',
                      }
                    ]}, 
                    {
                    value:"",
                    label:'',
                    children: [{
                      value: 0,
                      label: '已建设',
                    }, {
                      value: 1,
                      label: '待建设',
                    }]
                  }],
              department:[],
              endTime:''

            },
            textarea:'',     //项目简介
            tableData:[],   //项目成员列表


            value: '中德学院',
            input:'',
            
          }
        },
        methods:{
          init(){
             this.submitHint=false
          },
          submitAmend(){
             this.submitHint=true
          },
          submitAll(){
            let tidId=this.select.sort[0];
            let typeName=this.select.sort[1];
            let param={
                  uid:this.$store.state.userInfo.userid,
                  pid:JSON.parse(localStorage.getItem('pid')),
                  projectName:this.select.project,
                  leader:this.select.person,
                  department:this.select.departmentData,
                  tel:this.select.tel,
                  tid:tidId,
                  tidName:typeName,
                  intro:this.textarea
              }
              this.ajax
                  .post(this.$store.state.api+'/UpdateSettlementDetail',param)
                  .then(res=>{
                    console.log(res);
                    this.submitHint=false
                    if (res.data==1) {
                      this.$message.success('修改成功')
                      this.getData()
                    }else{
                      this.$message.error('修改失败')
                      console.log(res.data);
                    }
                  },err=>{
                    console.log(err);
                  })
              console.log(param);
          },
          getData(){
            this.loading = true;
            let param={
            uid:this.$store.state.userInfo.userid,
            pid:JSON.parse(localStorage.getItem('pid'))
          }
          // console.log(param);
            this.ajax
                  .get(this.$store.state.api+'/GetProjectBase',param)
                  .then(res=>{
                    console.log(res);
                    let data=res.data[0][0]
                    // console.log(data);
                    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.select.endTime=data.endTime
                    this.select.departmentData = data['classid']
                    this.select.sort = [data['typeid'],data['typeName']]
                    console.log(this.select.sort);
                    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=res.data[0]
                      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
                      // console.log(this.select.sortOptions);
                    },err=>{
                      console.log(err);
                    })
          },
          lookDetail(){

          },
          content(){
              this.$router.push('/projectSettlement1')
            },
            remark(){
              this.$router.push('/projectSettlement2')
            },
            remark2(){
              this.$router.push('/projectSettlement3')
            },
            remark4(){
              this.$router.push('/projectSettlement4')
            },
            remark5(){
              this.$router.push('/projectSettlement5')
            },
         
            back(){
            this.$router.push('/projectSettlement')
          },
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
         
        },
        mounted(){
          this.getData();
          this.getProjectDepartmentData();
          this.getProjectTypeData();
          // this.value=(this.options[0].value)
        }
      }
  </script>
  
  <style lang="less">
  .projectSettlement1{
    .psSmallTit{
        width: 100%;
        margin: 15px 0px 20px 0px;
        text-align: left;
        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;

 }
}
  </style>