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

<template>
  <!-- 项目管理 项目基本内容 -->
  <div class="ProjectManagement1">
    <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="select">
              <div class="selectTop">
                <div class="label">项目名称</div>
                <el-input v-model="select.project" disabled placeholder="请输入内容"></el-input>
              </div>
              <div class="selectMid">
                <div class="selectLeft">
               
                    <div class="inpBlock">
                        <div class="label">负责人</div>
                        <el-input v-model="select.person" disabled placeholder="请输入内容"></el-input>
                    </div>
                    <div class="inpBlock">
                        <div class="label">所在部门</div>
                        <el-select v-model="select.departmentData" disabled 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" disabled 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 v-model="select.Fund" disabled 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" disabled 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 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="操作"
          >
              <div class="operations">
                      <el-button type="primary" class="bt1" size="mini" style="background: #477edd">查看详情</el-button>
              </div>
        </el-table-column> -->
      </el-table>
    <!-- 项目成员区域结束 -->

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

<script>
    export default {
      data() {
        return {
          select:{    //数据详情框数据
            project:'',   
            person:'',
            departmentData:"",  //部门框值
            sort:'',     //分类值
            tel:'',
            Date:'',
            Fund:'',
            sortOptions: [], //分类下拉框
            department:[],
          },
          input:'',
          textarea:'',     //项目简介
          tableData:[],   //项目成员列表
        }
      },
      methods:{
        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.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=>{
                        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);
                  })
        },
          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')
          },
          back(){
            this.$router.push('/ProjectManagement')
          },
       
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
       
      },
      mounted(){
        this.getData();
        this.getProjectDepartmentData();
        this.getProjectTypeData();
        // this.$route.query["Id"]
        // console.log(this.$route.query["Id"])  //获取传递过来的项目id方法
      }
    }
</script>

<style lang="less">
.ProjectManagement1{


  .pm1footer{
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      height: 50px;
      
      .backBtn{
          background: #169bd5;
          float: right;
          width: 100px;
      }
  }
  .pmProgressTextArea{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    
  }

 
}
</style>