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

<template>
  <!-- 项目立项申请查看详细项目详细 -->
    <div class="projectApplication2">

        <div class="vfpHeader">
            <div class="titleOne">项目立项申请</div>
            <div class="smallTitle">项目进展详情</div>
            <el-button type="primary" @click="$router.back()">返回</el-button>
        </div>

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

      <div class="PA2textArea">
        <div class="PA2textAreaTit">项目创新点</div>
        <vue-editor  :editorToolbar="customToolbar" v-model="data[0][0]"></vue-editor>
      </div>

      <div class="PA2mid">
        预期取得成果
      </div>
      <div class="PA2textArea">
        <div class="PA2textAreaTit PA2textAreaTit2">一、项目预期成果、数量及形式</div>
        <vue-editor  :editorToolbar="customToolbar" v-model="data[0][1]"></vue-editor>
        
      </div>
      <div class="PA2textArea">
        <div class="PA2textAreaTit PA2textAreaTit2">二、创客人才培养预期成果、数量</div>
        <vue-editor  :editorToolbar="customToolbar" v-model="data[0][2]"></vue-editor>
       
      </div>
      <div class="PA2textArea">
        <div class="PA2textAreaTit PA2textAreaTit2">三、项目预期孵化、转化创业项目情况</div>
        <vue-editor  :editorToolbar="customToolbar" v-model="data[0][3]"></vue-editor>
        
      </div>
      <div class="PA2textArea">
        <div class="PA2textAreaTit">项目实施计划</div>
        <vue-editor  :editorToolbar="customToolbar" v-model="data[0][4]"></vue-editor>
        
      </div>
      <div class="baseBtn">
        <div class="blockWidth">
          <el-button type="primary"  @click="audit">立即修改</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="btn5">确认提交</el-button>
            <el-button @click="init" class="btn5" style="background:#cccccc" size="small">取消</el-button>
          </span>
        </el-dialog>
      <!-- 修改对话框结束 -->
    </div>
  </template>
  
  <script>
import { VueEditor } from "vue2-editor";

      export default {
        components:{
          VueEditor
        },
        data() {
          return {
            data:[["","","","",""],[]],
            submitHint:false,
            customToolbar: [
              ["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }],
              [{ align: "" }, { align: "center" }, { align: "right"}, { align: "justify"}],
              [{header:[false,1,2,3,4]}]
            ],
          }
        },
        methods:{
          content(){      //导航栏项目详情跳转
            this.$router.push('/projectApplicationDetails')
          },
         
          backBtn(){
            this.$router.push('/projectApplicationApply2')
          },
          audit(){   //立即修改按钮
            this.submitHint=true
          },
          submitAll(){
            let param={
              uid:this.$store.state.userInfo.userid,
              pid:JSON.parse(localStorage.getItem('pid')),
              message:JSON.stringify(this.data)
            }
              this.ajax
                  .post(this.$store.state.api+'/UpdateProjectDetail',param)
                  .then(res=>{
                    // console.log(res);
                    this.$message.success('修改成功')
                    this.init()
                  },err=>{
                    console.log(err);
                  })
          },
          init(){
            this.submitHint=false
          },
          getData(){   //初始化完成获取基本数据进行填充
            let param={
              uid:this.$store.state.userInfo.userid,
              pid:JSON.parse(localStorage.getItem('pid'))
            }
              this.ajax
                    .get(this.$store.state.api+'/GetProjectDetailMessage',param)
                    .then(res=>{
                      // console.log(res);
                      let GetData=JSON.parse(res.data[0][0].chapters)
                      console.log(GetData);
                      this.data=GetData
                    },err=>{
                      console.log(err);
                    })
          },
        },
        mounted(){
          this.getData();
        }
      }
  </script>
  
  <style lang="less">
  .projectApplication2{

 .projectApplicationfundAddDialog{    //项目修改对话框开始
 

 .el-dialog{
   border-radius:5px ;
   overflow: hidden;
 }
 
 .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__header{
 background: #32455b;
 }
 .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;
 }
}
}
//项目修改对话框结束
    .PA2textArea{     //标题栏
        margin: 15px 0;
        .PA2textAreaTit{
            width: 80%;
            text-align: left;
            font-size: 18px;
            font-weight: 550;
            margin-bottom: 15px;
            color: #2387ff;
        }
        .ql-toolbar.ql-snow{
          display: flex;
        }
        .PA2textAreaTit2{
            font-size: 16px;
        }
        .el-textarea__inner{
            background: #f2f2f2;
        }
    }
    
    .PA2mid{    //预期取得成果单独一栏
        width: 100%;
        text-align: left;
        font-size: 18px;
        font-weight: 550;
        margin-bottom: 10px;
        color: #2387ff;
    }
  }
  </style>