活动申请前端完成

src/views/activityManage/makerActvityApply.vue

@@ -26,16 +26,28 @@
 
               
               <!-- 活动申请填写信息区域开始 -->
-              <div class="select">
+                  <div class="select">
                     <div class="selectTop">
-                      <div class="label">项目名称</div>
-                      <el-input v-model="data.select.projectName" placeholder="请输入内容"></el-input>
+                      <div class="label">活动名称</div>
+                      <el-input v-model="data.select.activityName" placeholder="请输入内容"></el-input>
                     </div>
                     <div class="selectMid">
                       <div class="selectLeft">
+                          <div class="inpBlock">
+                              <div class="label">所属项目</div>
+                              <el-select v-model="data.select.pid" style="width: 100%;" placeholder="请选择">
+                                <el-option
+                                  v-for="item in data.project"
+                                  :key="item.courseId"
+                                  :label="item.title"
+                                  :value="item.courseId">
+                                </el-option>
+                              </el-select>
+                          </div>
                           <div class="inpBlock">
                               <div class="label">预算经费</div>
-                              <el-input v-model="data.select.fund" placeholder="请输入内容"></el-input>
+                              <el-input type="number" v-model.number="data.select.fund" placeholder="请输入内容"></el-input>
+                              <div style="position: absolute;right: -30px;top: 10px;">(万)</div>
                           </div>
                           <div class="inpBlock">
                               <div class="label">负责人</div>
@@ -45,17 +57,14 @@
                               <div class="label">所在部门</div>
                               <el-select v-model="data.select.value" style="width: 100%;" placeholder="请选择">
                                 <el-option
-                                  v-for="item in data.options"
-                                  :key="item.value"
-                                  :label="item.label"
-                                  :value="item.value">
+                                  v-for="item in data.class"
+                                  :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="data.select.tel" placeholder="请输入内容"></el-input>
-                          </div>
+
                       </div>
 
                       <div class="selectRight">
@@ -63,14 +72,19 @@
                               <div class="label">项目开始时间</div>
                               <el-date-picker
                                 v-model="data.select.date"
-                                type="date"
+                                type="datetime"
+                                value-format="timestamp"
                                 style="width: 100%;"
                                 placeholder="选择日期">
                               </el-date-picker>
                           </div>
                           <div class="inpBlock">
-                              <div class="label">预算总经费</div>
-                              <el-input v-model="data.select.fund" placeholder="请输入内容"></el-input>
+                              <div class="label">参加学生人数</div>
+                              <el-input type="number" v-model.number="data.select.people" placeholder="请输入内容"></el-input>
+                          </div>
+                          <div class="inpBlock">
+                              <div class="label">联系电话</div>
+                              <el-input v-model="data.select.tel" placeholder="请输入内容"></el-input>
                           </div>
                           
                       </div>
@@ -86,7 +100,7 @@
               </div>
               <hr>
               <el-table
-                :data="tableData"
+                :data="data.select.teacher"
                 tooltip-effect="dark"
                 stripe
                 class="fontSize"
@@ -100,7 +114,7 @@
                   >
                 </el-table-column>
                 <el-table-column
-                  prop="class"
+                  prop="work"
                   label="工作单位"
                   align="center"
                   >
@@ -120,8 +134,8 @@
                   >
                   <template #default="scope">
                       <div class="operations">
-                              <el-button type="primary" size="mini" >修改</el-button>
-                              <el-button type="primary" size="mini" @click="deleteRow(scope)">删除</el-button>
+                              <el-button type="primary" size="mini" @click="updateTeacher(scope.row.Id)">修改</el-button>
+                              <el-button type="primary" size="mini" @click="deleteRow(scope.row.Id)">删除</el-button>
                       </div>
                   </template>
                 </el-table-column>
@@ -158,10 +172,8 @@
   
         <!--添加成员dialog对话框开始 -->
          <el-dialog
-            title="添加成员"
+            :title="Member.Id==''?'添加指导老师':'修改指导老师'"
             :visible.sync="addMemberDialog"
-            :modal="false"
-            :close-on-click-modal="false"
             class="AddMember"
             :before-close="handleClose">
 
@@ -173,21 +185,22 @@
               </div>
 
               <div class="littleBlock">
-                <div class="dialogLabel">班级</div>
+                <div class="dialogLabel">工作单位</div>
                 <div>
-                  <el-input v-model="Member.class"></el-input>
+                  <el-input v-model="Member.work"></el-input>
                 </div>
               </div>
 
               <div class="littleBlock">
-                <div class="dialogLabel">电话</div>
+                <div class="dialogLabel">活动分工</div>
                 <div>
                   <el-input v-model="Member.takeCharge"></el-input>
                 </div>
               </div>
               <div slot="footer" class="footer">
-                <el-button @click="commit" class="diaBtn" style="background: #0e72e6;color: #fff;" size="small">确认提交</el-button>
-                <el-button @click="handleClose" class="diaBtn" style="background: #cccccc;color: #000;" size="small">取消</el-button>
+                <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对话框结束 -->
@@ -198,30 +211,18 @@
   </template>
   
   <script>
+  import { uuid } from 'vue-uuid';
       export default {
         props:["next","data"],
         data() {
           return {
             addMemberDialog:false,
-            value1:'',  //日期
-            options: [{
-              value: '选项1',
-              label: '黄金糕'
-            }],
             Member:{
-              Name:'袁一鸣',
-              class:'21通信',
-              takeCharge:'ui设计'
-            },
-            value: '中德学院',
-            input:'',
-            textarea:'',
-            tableData:[{
-              Name:'徐晓慧',
-              class:'22电子通信G5',
-              takeCharge:'UI设计',
+              Id:"",
+              Name:'',
+              work:'',
+              takeCharge:''
             },
-            ],
           }
         },
         methods:{
@@ -236,14 +237,36 @@
             this.$router.push('/makerActvity')
           },
           commit(){
+            this.Member.Id = uuid.v1();
+            let pushData={};
+            Object.assign(pushData,this.Member)
+            this.data.select.teacher.push(pushData);
+            for(let i in this.Member)this.Member[i] = '';
             this.addMemberDialog=false;
-            this.tableData.push(this.Member)
+            this.$message({
+              message:"添加成功",
+              type:"success"
+            });
+          },
+          change(){
+            if(this.Member.Id=='')return this.$message.error("错误");
+            Object.assign(this.data.select.teacher.filter(item=>item.Id==this.Member.Id)[0],this.Member)
+            for(let i in this.Member)this.Member[i]='';
+            this.addMemberDialog = true;
+            this.$message({message:"修改成功",type:"success"})
+            this.addMemberDialog = false;
           },
           handleClose(){
+            for(let i in this.Member)this.Member[i] = '';
             this.addMemberDialog=false;
           },
-          deleteRow(){
-            console.log(111);
+          updateTeacher(Id){
+            Object.assign(this.Member,this.data.select.teacher.filter(item=>item.Id==Id)[0])
+            this.addMemberDialog = true;
+          },
+          deleteRow(Id){
+            this.data.select.teacher = this.data.select.teacher.filter(item=>item.Id!=Id);
+            this.$message({message:"删除成功",type:"success"})
           },
           toPage(val){
             if (val==1) {
@@ -257,9 +280,9 @@
             }
           }
         },
-        created(){
-          this.value=(this.options[0].value)
-        }
+        // created(){
+          // this.value=(this.options[0].value)
+        // }
       }
   </script>
   

src/views/activityManage/makerActvityApply2.vue

@@ -30,27 +30,27 @@
             <div id="z">
               <p class="pTit">活动计划</p>
               <div class="editor">
-                <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
+                <vue-editor :editorToolbar="customToolbar" v-model="data[0]"></vue-editor>
               </div>
             </div>
 
             <div id="x">
                 <p class="pTit">预期目标</p>
                 <div class="editor">
-                  <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
+                  <vue-editor :editorToolbar="customToolbar" v-model="data[1]"></vue-editor>
                 </div>
               </div>
 
               <div id="c">
                 <p class="pTit">活动受面</p>
                 <div class="editor">
-                  <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
+                  <vue-editor :editorToolbar="customToolbar" v-model="data[2]"></vue-editor>
                 </div>
               </div>
               <div id="v">
                 <p class="pTit">经费支出计划</p>
                 <div class="editor">
-                  <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
+                  <vue-editor :editorToolbar="customToolbar" v-model="data[3]"></vue-editor>
                 </div>
               </div>
               
@@ -74,9 +74,9 @@
         class="MAputIn"
         :before-close="init">
         <div class="addDialogLogo">LOGO</div>
-        <div class="deleteContent">是否提交“×××”项目活动？</div>
+        <div class="deleteContent">是否提交“{{activityName}}”项目活动？</div>
         <span slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="init" class="btn5" size="small">确认提交</el-button>
+            <el-button type="primary" @click="submit" class="btn5" size="small">确认提交</el-button>
             <el-button @click="init" class="btn5" style="background:#cccccc" size="small">取消</el-button>
         </span>
       </el-dialog>
@@ -88,7 +88,7 @@
   <script>
   import { VueEditor } from "vue2-editor";
       export default {
-        props:["back"],
+        props:["back","submit","activityName","data"],
         components:{
           VueEditor
         },
@@ -134,6 +134,8 @@
               document.getElementById("b").scrollIntoView({ behavior: "smooth" });
             }
           }
+        },
+        mounted(){
         }
       }
   </script>

src/views/activityManage/makerActvityApplyMain.vue

@@ -1,8 +1,8 @@
 <template>
     <!-- 创客创新-活动申请 -->
   <div class="core_dialogue">
-        <makerActvityApply :data="makerActvityApply" :next="next"  v-show="status==0" />
-        <makerActvityApply2 :data="makerActvityApply2" :next="next" :back="back" v-show="status==1" />
+        <makerActvityApply :data="makerActvityApplyData"  :next="next"  v-if="status==0" />
+        <makerActvityApply2 :data="makerActvityApply2Data" :activityName="makerActvityApplyData.select.activityName" :next="next" :submit="submit" :back="back" v-if="status==1" />
   </div>
 </template>
 
@@ -14,27 +14,23 @@ import makerActvityApply2 from './makerActvityApply2.vue';
         data() {
             return {
                 status:0,
-                makerActvityApply:{
+                makerActvityApplyData:{
                     select:{
-                        projectName:'人工智能分链机器',
+                        activityName:'',
+                        pid:"",
                         person:'',
                         tel:'',
-                        date:'2023-11-12',
-                        fund:'300000',
-                        value:''
+                        date:'',
+                        fund:0,
+                        people:0,
+                        value:'',
+                        teacher:[],
                     },
-                    introduce:'福利大放送',
-
-                    options:[
-                        {
-                            value: '选项1',
-                            label: '黄金糕'
-                        }
-                    ]
+                    introduce:'',
+                    class:[],
+                    project:[],
                 },
-                makerActvityApply2:{
-
-                }
+                makerActvityApply2Data:["","","","",]
             }
         },
         methods:{
@@ -47,9 +43,34 @@ import makerActvityApply2 from './makerActvityApply2.vue';
                 this.status--
             },
             submit(){
-
+                console.log(this.makerActvityApplyData)
+                console.log(this.makerActvityApply2Data)
+            },
+            getAllClass(){
+                this.ajax.get(this.$store.state.api+"/SelectAllDepartment",{
+                    uid:this.$store.state.userInfo.userid,
+                }).then(res=>{
+                    this.makerActvityApplyData.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.makerActvityApplyData.project = res.data[0];
+                }).catch(err=>{
+                    this.$message.error(err.message)
+                })
             }
-        }
+        },
+        mounted() {
+            //获取部门
+            this.getAllClass();
+            //获取项目
+            this.getProject();
+        },
     }
 </script>