修改活动管理详情

src/views/activityManage/makerActvityDetails.vue

@@ -15,7 +15,7 @@
           <div class="select">
                     <div class="selectTop">
                       <div class="label">活动名称</div>
-                      <el-input v-model="tableData.ActiveName" placeholder="请输入内容"></el-input>
+                      <el-input v-model="tableData.title" placeholder="请输入内容"></el-input>
                     </div>
                     <div class="selectMid">
                       <div class="selectLeft">
@@ -37,7 +37,7 @@
                           </div>
                           <div class="inpBlock">
                               <div class="label">负责人</div>
-                              <el-input v-model="tableData.leader"></el-input>
+                              <el-input v-model="tableData.pro_leader"></el-input>
                           </div>
                           <div class="inpBlock">
                               <div class="label">所在部门</div>
@@ -69,11 +69,11 @@
                           </div>
                           <div class="inpBlock">
                               <div class="label">参与学生人数</div>
-                              <el-input type="number" v-model.number="tableData.student" placeholder="请输入内容"></el-input>
+                              <el-input type="number" v-model.number="tableData.students" placeholder="请输入内容"></el-input>
                           </div>
                           <div class="inpBlock">
                               <div class="label">联系电话</div>
-                              <el-input v-model="tableData.phone" placeholder="请输入内容"></el-input>
+                              <el-input @blur="checkPhone(tableData.phone)" v-model="tableData.phone" placeholder="请输入内容"></el-input>
                           </div>
                       </div>
                     </div>
@@ -81,7 +81,7 @@
           </div>
              
             <!-- 活动完结报告开始 -->
-            <div class="tabTit">
+            <!-- <div class="tabTit">
                 <div><p>活动完结报告</p></div>
             </div>
             <div style="width: 85%;float: left;">
@@ -91,7 +91,7 @@
                       <div class="jia">+</div>添加
                   </div>
               </div>
-            </div>
+            </div> -->
             <!-- 活动完结报告结束 -->
 
             <!-- 活动指导老师开始 -->
@@ -103,7 +103,7 @@
               </div>
               <hr>
               <el-table
-                :data="tableData.teacher"
+                :data="tableData.course_teacher"
                 tooltip-effect="dark"
                 stripe
                 class="fontSize"
@@ -138,8 +138,8 @@
                   <template #default="scope">
                       <div class="operations">
                           <!-- <el-button type="primary" > -->
-                              <el-button type="primary" size="mini" style="font-size: 14px;">修改</el-button>
-                              <el-button type="danger" size="mini" style="font-size: 14px;" @click="DeleteS(scope.rows.id)">删除</el-button>
+                              <el-button type="primary" size="mini" @click="updateTeacher(scope.row.Id)" style="font-size: 14px;">修改</el-button>
+                              <el-button type="danger" size="mini" style="font-size: 14px;" @click="DeleteS(scope.row.Id)">删除</el-button>
                           <!-- </el-button> -->
                       </div>
                   </template>
@@ -157,48 +157,55 @@
                 placeholder="请输入内容"
                 v-model="tableData.brief">
               </el-input>
+              <!-- <vue-editor  :editorToolbar="customToolbar" v-model="tableData.brief"></vue-editor> -->
             <div class="tabTit">
                  <div><p>活动计划</p></div>
             </div>
-              <el-input
+              <!-- <el-input
                 type="textarea"
                 :rows="6"
                 placeholder="请输入内容"
                 v-model="tableData.chapters[0]">
-              </el-input>
+              </el-input> -->
+              <vue-editor  :editorToolbar="customToolbar" v-model="tableData.chapters[0]"></vue-editor>
             <div class="tabTit">
                  <div><p>预期目标</p></div>
             </div>
-              <el-input
+              <!-- <el-input
                 type="textarea"
                 :rows="6"
                 placeholder="请输入内容"
                 v-model="tableData.chapters[1]">
-              </el-input>
+              </el-input> -->
+                <vue-editor  :editorToolbar="customToolbar" v-model="tableData.chapters[1]"></vue-editor>
+              
             <div class="tabTit">
                  <div><p>活动受面</p></div>
             </div>
-              <el-input
+              <!-- <el-input
                 type="textarea"
                 :rows="6"
                 placeholder="请输入内容"
                 v-model="tableData.chapters[2]">
-              </el-input>
+              </el-input> -->
+              <vue-editor  :editorToolbar="customToolbar" v-model="tableData.chapters[2]"></vue-editor>
             <div class="tabTit">
                  <div><p>经费支出计划</p></div>
             </div>
-              <el-input
+              <!-- <el-input
                 type="textarea"
                 :rows="6"
                 class="textArea"
                 placeholder="请输入内容"
                 v-model="tableData.chapters[3]">
-              </el-input>
+              </el-input> -->
+              <vue-editor  :editorToolbar="customToolbar" v-model="tableData.chapters[3]"></vue-editor>
             <!-- 多行文本框部分结束 -->
 
             <div class="baseBtn">
               <div class="blockWidth">
-                <el-button type="primary" class="makerActvity1backBtn" @click="check" size:small>保存</el-button>
+                <el-button type="primary" class="makerActvity1backBtn" @click="save" size:small>保存</el-button>
+                <el-button type="primary" class="makerActvity1backBtn" @click="getData" size:small>重置</el-button>
                 <el-button type="primary" class="makerActvity1backBtn" @click="check" size:small>立即审核</el-button>
               </div>
             </div>
@@ -206,10 +213,8 @@
 
             <!--添加成员dialog对话框开始 -->
               <el-dialog
-                  title="添加指导老师"
+                  :title="Member.Id==''?'添加指导老师':'修改指导老师信息'"
                   :visible.sync="addMemberDialog"
-                  :modal="false"
-                  :close-on-click-modal="false"
                   class="AddMember"
                   :before-close="handleClose">
 
@@ -234,8 +239,9 @@
                       </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对话框结束 -->
@@ -243,50 +249,147 @@
 </template>
 
 <script>
+import { VueEditor } from "vue2-editor";
+import { uuid } from 'vue-uuid';
 export default {
+  components:{
+    VueEditor
+  },
   data() {
     return {
       addMemberDialog:false,
+      customToolbar: [
+        ["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }],
+        [{ align: "" }, { align: "center" }, { align: "right"}, { align: "justify"}],
+        [{header:[false,1,2,3,4]}]
+      ],
       tableData:{
-        ActiveName:"活动名称",
-        pid:"1",
-        money:9999999,
-        leader:"覃罡彤",
-        classid:"1",
+        acId:"",
+        title:"",
+        pid:"",
+        userid:"",
+        money:0,
+        pro_leader:"",
+        classid:"",
         begin_at:[],
-        student:0,
-        phone:"19128326542",
-        teacher:[{Id:"aofiowhff",Name:"覃罡彤",takeCharge:"睡觉",work:"工作单位"}],
-        brief:"awfawfawfga",
-        chapters:["1111","22222","333333","4444444"],
+        students:0,
+        state:0,
+        phone:"",
+        course_teacher:[],
+        brief:"",
+        chapters:["","","",""],
       },
       selectInput:{
-        project:[{
-          courseId:"1",
-          title:"所属项目"
-        }],
-        class:[{
-          id:"1",
-          name:"信息与通信学院"
-        }]
+        project:[],
+        class:[]
       },
       Member:{
-        Name:'袁一鸣',
-        work:'信通学院',
-        takeCharge:'ui'
+        Id:'',
+        Name:'',
+        work:'',
+        takeCharge:''
       },
       }
   },
   methods:{
-    DeleteS(){
-
+    DeleteS(Id){
+      this.tableData.course_teacher = this.tableData.course_teacher.filter(item=>item.Id!=Id);
     },
+    //保存修改
+    save(){
+      if(this.check()!=1)return;
+      this.$message.success("没问题")
+      console.log(this.tableData)
+    },
+    change(){
+      if(this.Member.Id=='')return this.$message.error("错误");
+      for(let a in this.Member)if(/^\s*$/g.test(this.Member[a]))return this.$message.error("请不要留空")
+      Object.assign(this.tableData.course_teacher.filter(item=>item.Id==this.Member.Id)[0],this.Member)
+      for(let i in this.Member)this.Member[i]='';
+      this.addMemberDialog = true;
+      this.addMemberDialog = false;
+    },
+    updateTeacher(Id){
+      Object.assign(this.Member,this.tableData.course_teacher.filter(item=>item.Id==Id)[0])
+      this.addMemberDialog = true;
+    },
+    //检查整个表单
     check(){
-      // alert('1111')
+        let checkData = this.tableData;
+        const cEmpty = /^\s*$/g;
+        for(let i in checkData){
+            switch(i){
+                case "chapters":
+                  for(let a in checkData[i]){
+                    switch(a){
+                        case "0":
+                          if(cEmpty.test(checkData[i][a]))return this.$message.error("活动计划不能为空");  
+                          break;
+                        case "1":
+                          if(cEmpty.test(checkData[i][a]))return this.$message.error("预期目标不能为空");
+                          break;
+                        case "2":
+                          if(cEmpty.test(checkData[i][a]))return this.$message.error("活动受面不能为空");
+                          break;
+                        case "3":
+                          if(cEmpty.test(checkData[i][a]))return this.$message.error("经费支出计划不能为空");
+                          break;
+                    }
+                  }
+                    break;
+                case "title":
+                    if(cEmpty.test(checkData[i]))return this.$message.error("活动名称不能为空");
+                    break;
+                case "course_teacher":
+                    if(checkData[i].length==0)return this.$message.error("请添加至少一名指导老师")
+                    break;
+                case "fund":
+                    break;
+                case "people":
+                    break;
+                case "pro_leader":
+                    if(cEmpty.test(checkData[i]))return this.$message.error("负责人不能为空");
+                    break;
+                case "pid":
+                    if(cEmpty.test(checkData[i]))return this.$message.error("请选择所属项目");
+                    break;
+                case "phone":
+                    if(cEmpty.test(checkData[i]))return this.$message.error("电话号码不能为空");
+                    if(!this.checkPhone(checkData[i]))return;
+                    break;
+                case "begin_at":
+                    console.log(checkData[i])
+                    if(checkData[i]==null||checkData[i].length<2)return this.$message.error("请选择项目开始时间");
+                    break;
+                case "classid":
+                    if(cEmpty.test(checkData[i]))return this.$message.error("请选择所在部门");
+                    break;
+                case "brief":
+                    if(cEmpty.test(checkData[i]))return this.$message.error("活动介绍不能为空");
+                    break;
+            }
+        }
+        return 1;
+    },
+    //检查手机号
+    checkPhone(val){
+        if(/^\s*$/g.test(val))return;
+        const cPhone = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
+        if(!cPhone.test(val)){
+            this.$message.error("电话号码格式不正确");
+            return false;
+        }
+        return true;
     },
     commit(){
+      //判断是否全部填写
+      for(let a in this.Member)if(a!='Id'&&/^\s*$/g.test(this.Member[a]))return this.$message.error("请不要留空")
+      this.Member.Id = uuid.v1();
+      let pushData={};
+      Object.assign(pushData,this.Member)
+      this.tableData.course_teacher.push(pushData);
+      for(let i in this.Member)this.Member[i] = '';
       this.addMemberDialog=false;
-      // this.tableData.push(this.Member)
     },
     handleClose(){
       this.addMemberDialog=false;
@@ -301,7 +404,7 @@ export default {
         this.ajax.get(this.$store.state.api+"/SelectAllDepartment",{
             uid:this.$store.state.userInfo.userid,
         }).then(res=>{
-            this.makerActvityApplyData.class = res.data[0];
+            this.selectInput.class = res.data[0];
         }).catch(err=>{
             this.$message.error(err.message)
         })
@@ -310,16 +413,31 @@ export default {
         this.ajax.get(this.$store.state.api+"/GetAllProjectName",{
             uid:this.$store.state.userInfo.userid,
         }).then(res=>{
-            this.makerActvityApplyData.project = res.data[0];
+            this.selectInput.project = res.data[0];
         }).catch(err=>{
             this.$message.error(err.message)
         })
     },
     getData(){
-      console.log(this.$route.query["Id"]);
+      this.ajax.get(this.$store.state.api+"/GetActivityDetail",{
+        uid:this.$store.state.userInfo.userid,
+        aId:this.$route.query["Id"]
+      }).then(res=>{
+        if(!res.data[0][0])return this.$message.error("错误")
+        let data = res.data[0][0];
+        data.begin_at = JSON.parse(data.begin_at);
+        data.course_teacher = JSON.parse(data.course_teacher);
+        data.chapters = JSON.parse(data.chapters)
+        this.tableData = data;
+        this.$message.success("获取数据成功")
+      }).catch(err=>{
+        this.$message.error(err.message)
+      })
     }
   },
   mounted(){
+    this.getAllClass();
+    this.getProject();
     this.getData();
   }
 }