@

src/components/MakerSpaceWord.vue

@@ -8,12 +8,23 @@
     <div id="table">
         <div class="han">
           <div class="label">项目名称</div><div class="value">
+            <editableDiv v-model="wordData['projectName']"/>
             <!-- {{wordData['projectName']}} -->
-            <el-input v-model="wordData['projectName']"></el-input>
+            <!-- <div class="InputDiv" contenteditable="true" v-text="wordData['projectName']" v-editableDiv="wordData['projectName']"></div> -->
+            <!-- <el-input v-model="wordData['projectName']"></el-input> -->
         </div>
           <div class="label">所在学院</div><div class="value">
-            <el-input v-model="wordData['college']"></el-input>
+            <!-- <div class="InputDiv" contenteditable="true" v-text="wordData['college']"></div> -->
+            <!-- <el-input v-model="wordData['college']"></el-input> -->
             <!-- {{wordData['college']}} -->
+            <el-select v-model="wordData['college']" style="width: 100%;" placeholder="请选择所在学院">
+              <el-option
+                v-for="item in DepartmentData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
         </div>
         </div>
         <div class="status">
@@ -34,12 +45,37 @@
           </div>
         </div>
         <div class="han">
-          <div class="label">项目起始时间</div><div class="value">{{wordData['begin_at']}}</div>
-          <div class="label">计划完成时间</div><div class="value">{{wordData['plannedEnd_at']}}</div>
+          <div class="label">项目起始时间</div><div class="value">
+            <el-date-picker
+              v-model="wordData['begin_at']"
+              type="date"
+              prefix-icon="none"
+              placeholder="请选择项目开始时间"
+              value-format="yyyy-MM-dd HH:mm:ss">
+            </el-date-picker>
+            <!-- <div class="InputDiv" contenteditable="true" v-text="wordData['begin_at']"></div> -->
+            <!-- {{wordData['begin_at']}} -->
+          </div>
+          <div class="label">计划完成时间</div><div class="value">
+            <el-date-picker
+              v-model="wordData['plannedEnd_at']"
+              type="date"
+              placeholder="请选择项目计划完成时间"
+              prefix-icon="none"
+              value-format="yyyy-MM-dd HH:mm:ss">
+            </el-date-picker>
+            <!-- {{wordData['plannedEnd_at']}} -->
+          </div>
         </div>
         <div class="han">
-          <div class="label">项目负责人</div><div class="value">{{wordData['pro_leader']}}</div>
-          <div class="label">学院牵头领导</div><div class="value">{{wordData['lead_leader']}}</div>
+          <div class="label">项目负责人</div><div class="value">
+            <!-- {{wordData['pro_leader']}} -->
+            <div class="InputDiv" contenteditable="true" v-text="wordData['pro_leader']"></div>
+          </div>
+          <div class="label">学院牵头领导</div><div class="value">
+            <div class="InputDiv" contenteditable="true" v-text="wordData['lead_leader']"></div>
+            <!-- {{wordData['lead_leader']}} -->
+          </div>
         </div>
         <div class="han">
           <div class="label">项目组人数</div><div class="value">{{ wordData['teacher'].length+wordData['student'].length }}</div>
@@ -65,12 +101,30 @@
               <div class="memberValue">项目组角色分工</div>
             </div>
             <div class="memberHan" v-for="(item,index) in wordData['teacher']" :key="index">
-              <div class="memberValue">{{item['name']}}</div>
-              <div class="memberValue">{{item['speciality']}}</div>
-              <div class="memberValue">{{item['title']}}</div>
-              <div class="memberValue">{{ item['education'] }}</div>
-              <div class="memberValue">{{ item['section'] }}</div>
-              <div class="memberValue">{{ item['work'] }}</div>
+              <div class="memberValue">
+                <div class="InputDiv" contenteditable="true">{{ item['name'] }}</div>
+                <!-- {{item['name']}} -->
+              </div>
+              <div class="memberValue">
+                <div class="InputDiv" contenteditable="true">{{ item['speciality'] }}</div>
+                <!-- {{item['speciality']}} -->
+              </div>
+              <div class="memberValue">
+                <div class="InputDiv" contenteditable="true" v-text="item['title']"></div>
+                <!-- {{item['title']}} -->
+              </div>
+              <div class="memberValue">
+                <div class="InputDiv" contenteditable="true" v-text="item['education']"></div>
+                <!-- {{ item['education'] }} -->
+              </div>
+              <div class="memberValue">
+                <div class="InputDiv" contenteditable="true" v-text="item['section']"></div>
+                <!-- {{ item['section'] }} -->
+              </div>
+              <div class="memberValue">
+                <div class="InputDiv" contenteditable="true" v-text="item['work']"></div>
+                <!-- {{ item['work'] }} -->
+              </div>
             </div>
           </div>
         </div>
@@ -91,10 +145,22 @@
               <div class="memberValue">项目组角色分工</div>
             </div>
             <div class="memberHan" v-for="(item,index) in wordData['student']" :key="index">
-              <div class="memberValue">{{item['name']}}</div>
-              <div class="memberValue">{{ item['class'] }}</div>
-              <div class="memberValue">{{ item['age'] }}</div>
-              <div class="memberValue">{{item['work']}}</div>
+              <div class="memberValue">
+                <div class="InputDiv" contenteditable="true">{{item['name']}}</div>
+                <!-- {{item['name']}} -->
+              </div>
+              <div class="memberValue">
+                <div class="InputDiv" contenteditable="true" v-text="item['class']"></div>
+                <!-- {{ item['class'] }} -->
+              </div>
+              <div class="memberValue">
+                <div class="InputDiv" contenteditable="true" v-text="item['age']"></div>
+                <!-- {{ item['age'] }} -->
+              </div>
+              <div class="memberValue">
+                <div class="InputDiv" contenteditable="true" v-text="item['work']"></div>
+                <!-- {{item['work']}} -->
+              </div>
             </div>
           </div>
         </div>
@@ -286,6 +352,7 @@
         <span>1.表格可顺延或另附页。</span>
         <span>2.项目申报需附相关佐证材料。</span>
       </div>
+      <el-button @click="test">测试</el-button>
     <!-- <table id="tableData" border="1px" cellpadding="7" cellspacing="0">
         <tr>
             <td width="15%" colspan="1">项目名称</td>
@@ -307,64 +374,107 @@
 </template>
   
 <script>
+// import VueContenteditable from 'vue-contenteditable';
+import editableDiv from '@/components/editableDiv.vue'
   export default {
+    components:{editableDiv},
     data() {
       return {
         wordData:{
-        year:"",  //申请日期年
-        month:"",   //申请日期月
-        day:"",     //申请日期日
-        ing:false, //待建设
-        ed:false,  //已建设
-        state:"",
-        projectName:"",//项目名称
-        college:"",//
-        begin_at:"",//项目开始时间
-        plannedEnd_at:"",//计划完成时间
-        pro_leader:"",//项目负责人
-        lead_leader:"",//学院牵头领导
-        people:"",//项目组人数
-        teacherNum:"",//参与教师人数
-        studentNum:"",//参与学生人数
-        teacher:[
-            {name:"",speciality:"",title:"",education:"",section:"",work:""},
-            {name:"",speciality:"",title:"",education:"",section:"",work:""},
-            {name:"",speciality:"",title:"",education:"",section:"",work:""},
-            {name:"",speciality:"",title:"",education:"",section:"",work:""},
-            // {name:"",speciality:"",title:"",education:"",section:"",work:""},
-        ],   //教师组//name：姓名  speciality：专业  title：职称 education：学历    section：所在教研室    work：项目组角色分工
-        student:[
-            {name:"",class:"",age:"",work:""},
-            {name:"",class:"",age:"",work:""},
-            {name:"",class:"",age:"",work:""},
-            {name:"",class:"",age:"",work:""},
-            // {name:"",class:"",age:"",work:""},
-        ],   //学生组//name：姓名    class：班级 age：年龄   work：项目组任务分工
-        brief:"",//项目简介
-        Construction:"",//建设内容
-        ProjectBasis:"",//立项依据
-        development:"",//创客空间物理环境、制度建设及软件设施建设情况
-        studio:"",//学生创客工作室建设情况
-        studentTeam:"",//学生创客团队（人才）培养预期成果、数量
-        studentActivities:"",//学生创客活动组织实施情况
-        Transforming:"",//学生创客团队孵化、转化创业项目情况
-        condition:"",//立 项基 础及条 件
-        fund:[],//预算经费
-        //total：总经费     
-        //小型仪器设备费：device        deviceRemarks
-        //材料费：Material             MaterialRemarks
-        //测试化验加工费：processing    processingRemarks
-        //项目协作费：Collaboration     CollaborationRemarks
-        //项目成果鉴定费：APPRAISAL     APPRAISALRemarks
-        //参展参赛费：entery            enteryRemarks
-        //创客交流活动费：activities    activitiesRemarks
-        //知识产权事务费：Transaction   TransactionRemarks
-        }
+          year:"",  //申请日期年
+          month:"",   //申请日期月
+          day:"",     //申请日期日
+          ing:false, //待建设
+          ed:false,  //已建设
+          state:"",
+          projectName:"",//项目名称
+          college:"",//所在学院
+          begin_at:"",//项目开始时间
+          plannedEnd_at:"",//计划完成时间
+          pro_leader:"",//项目负责人
+          lead_leader:"",//学院牵头领导
+          people:"",//项目组人数
+          teacherNum:"",//参与教师人数
+          studentNum:"",//参与学生人数
+          teacher:[
+              {name:"",speciality:"",title:"",education:"",section:"",work:""},
+              {name:"",speciality:"",title:"",education:"",section:"",work:""},
+              {name:"",speciality:"",title:"",education:"",section:"",work:""},
+              {name:"",speciality:"",title:"",education:"",section:"",work:""},
+              // {name:"",speciality:"",title:"",education:"",section:"",work:""},
+          ],   //教师组//name：姓名  speciality：专业  title：职称 education：学历    section：所在教研室    work：项目组角色分工
+          student:[
+              {name:"",class:"",age:"",work:""},
+              {name:"",class:"",age:"",work:""},
+              {name:"",class:"",age:"",work:""},
+              {name:"",class:"",age:"",work:""},
+              // {name:"",class:"",age:"",work:""},
+          ],   //学生组//name：姓名    class：班级 age：年龄   work：项目组任务分工
+          brief:"",//项目简介
+          Construction:"",//建设内容
+          ProjectBasis:"",//立项依据
+          development:"",//创客空间物理环境、制度建设及软件设施建设情况
+          studio:"",//学生创客工作室建设情况
+          studentTeam:"",//学生创客团队（人才）培养预期成果、数量
+          studentActivities:"",//学生创客活动组织实施情况
+          Transforming:"",//学生创客团队孵化、转化创业项目情况
+          condition:"",//立 项基 础及条 件
+          fund:[],//预算经费
+          //total：总经费     
+          //小型仪器设备费：device        deviceRemarks
+          //材料费：Material             MaterialRemarks
+          //测试化验加工费：processing    processingRemarks
+          //项目协作费：Collaboration     CollaborationRemarks
+          //项目成果鉴定费：APPRAISAL     APPRAISALRemarks
+          //参展参赛费：entery            enteryRemarks
+          //创客交流活动费：activities    activitiesRemarks
+          //知识产权事务费：Transaction   TransactionRemarks
+        },
+        DepartmentData:[],
       };
     },
     methods: {
-
+      getProjectDepartmentData(){  //获取项目立项申请基础信息页面所在部门数据
+        this.ajax.get(this.$store.state.api+'/SelectAllDepartment',{
+          uid:this.$store.state.userInfo.userid
+        }).then(res=>{
+          this.DepartmentData = res.data[0]
+        },err=>{
+          console.log(err);
+        })
+      },
+      test(){
+        console.log(this.wordData)
+      }
     },
+    directives:{
+      editableDiv:{
+        bind(el,binding){
+          // 将初始数据赋值给元素的innerHTML
+          // el.innerText = binding.value;
+          // 监听元素的input事件，在输入时更新数据
+          console.log(this)
+          el.addEventListener('input',(event)=>{
+            console.log(el.innerText)
+            console.log(binding.value)
+            if (el.innerText !== binding.value) {
+              binding.value = el.innerText;
+              // this.wordData['projectName'] = el.innerText
+              el.dispatchEvent(new Event('input'));
+            }
+          });
+        },
+        update(el,binding){
+          //更新数据时更新元素的innerText
+          if(binding.value!==el.innerText){
+            el.innerText = binding.value;
+          }
+        }
+      }
+    },
+    mounted(){
+      this.getProjectDepartmentData();
+    }
   };
 </script>
   
@@ -374,7 +484,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: #eaeef1;
+    background-color: white;
     #title{
         width: 100%;
         display: flex;
@@ -401,10 +511,6 @@
             font-weight: bold;
         }
     }
-    // #tableData{
-    //   width: 100%;
-
-    // }
     #table{
     box-sizing: border-box;
     border: solid 1px black;
@@ -439,11 +545,9 @@
       &:nth-child(5){
         .label{
           flex: 1;
-        //   padding: 10px 12px;
         }
         .value{
           flex: 1;
-        //   padding: 5px;
         }
       }
     }
@@ -487,9 +591,6 @@
           }
           .DescribeValue{
             flex: 5;
-            // display: flex;
-            // justify-content: center;
-            // align-items: center;
             box-sizing: border-box;
             padding: 15px;
           }
@@ -526,7 +627,7 @@
             justify-content: center;
             align-items: center;
             border-right: solid 1px black;
-            min-height: 40px;
+            min-height: 45px;
             &:nth-last-child(1){
               border-right: none;
               flex: 3;
@@ -705,6 +806,27 @@
     width: 100%;
     background: none;
     color: black;
+    text-align: center;
+    font-size: 16px;
+    box-sizing: border-box;
+  }
+  :deep(.el-date-editor){
+    width: 100%;
+    height: 100%;
+  }
+  .InputDiv{
+    width: 100%;
+    height: 100%;
+    word-break: break-all;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 10px;
+    outline: none;
+    &:focus{
+      border:solid 1px #409eff ;
+    }
   }
 }
 </style>

src/components/editableDiv.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="editable" contenteditable="true"
+         v-html="innerText"
+         @input="changeText"></div>
+</template>
+<script>
+    export default {
+        props: ['value'],
+        data(){
+            return {innerText:this.value}
+        },
+        methods:{
+            changeText(){
+                this.innerText = this.$el.innerHTML;
+                this.$emit('input',this.innerText);
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+.editable{
+    width: 100%;
+    height: 100%;
+    word-break: break-all;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 10px;
+    outline: none;
+    &:focus{
+      border:solid 1px #409eff ;
+    }
+}
+</style>

src/main.js

@@ -8,8 +8,6 @@ import './assets/sc/iconfont.css'
 import ajax from './api/userApi' //封装axios
 Vue.prototype.ajax = ajax
 
-
-
 Vue.config.productionTip = false
 
 new Vue({

src/views/home.vue

@@ -18,7 +18,7 @@
                   @close="handleClose"
                   :unique-opened="true">
                   <div v-for="(item,ind) in navList" :key="ind">
-                    <el-submenu v-if="item.group.length" :index='ind.toString()'>
+                    <el-submenu v-if="item.group.length" :index='ind'>
                       <template slot="title">
                         <i :class="item.icon" style="margin-right: 15px;width: 15px;"></i>
                         {{ item.label }}
@@ -30,7 +30,7 @@
                         </el-menu-item>
                       </el-menu-item-group>
                     </el-submenu>
-                    <el-menu-item :index="ind.toString()" v-else @click="goto(item.goto)">
+                    <el-menu-item :index="ind" v-else @click="goto(item.goto)">
                       <template slot="title">
                           <i :class="item.icon" style="margin-right: 15px;width: 15px;"></i>
                           {{ item.label }}

src/views/projectApply/components/projectApplicationApplyMakerSpace.vue

@@ -66,7 +66,6 @@
                                 range-separator="至"
                                 start-placeholder="项目起始时间"
                                 end-placeholder="项目完成时间">
-                                
                               </el-date-picker>
                           </div>
                           <div class="inpBlock" style="position: relative;">