设置随访时间节点1

src/views/followup/plan-manage/dialog/set-time-node.vue

 <template>
   <div>
-    <p><el-button plain icon="el-icon-plus" round @click="addNewNode(timeForm.formRef)">新增时间节点</el-button><br></p>
+    <p><el-button plain icon="el-icon-plus" round @click="addNewNode(timeForm.formRef)" :disabled="activeTab!=='setNewRef'">新增时间节点</el-button><br></p>
     <div class="add-time-content">
       <div class="time-line-scroll">
         <!--<el-button type="primary" size="mini" round>设置随访时间 <i class="el-icon-circle-close-outline"></i></el-button>-->
         <!--<el-button type="primary" @click="changeTab(item)" size="mini" round v-for="(item, index) in setTimeNodeList" :key="index">开始后{{item.followupTime}}{{item.followupMark}} <i class="el-icon-circle-close-outline"></i></el-button>-->
 
-        <el-radio-group v-model="activeTab" @change="changeTab" v-if="setTimeNodeList.length > 0">
-          <el-radio-button :key="item.formRef" v-for="(item, index) in setTimeNodeList" :label="index">开始后{{item.followupTime + item.followupMark}} <i class="el-icon-circle-close-outline" @click="deleteTimeNode(item, index)"></i></el-radio-button>
+        <el-radio-group v-model="activeTab" @change="changeTab">
+          <el-radio-button  v-if="setTimeNodeList.length > 0" :key="item.formRef" v-for="(item, index) in setTimeNodeList" :label="index">开始后{{item.followupTime + item.followupMark}} <i class="el-icon-circle-close-outline" @click="deleteTimeNode(item, index)"></i></el-radio-button>
+          <el-radio-button label="setNewRef">设置随访时间</el-radio-button>
         </el-radio-group>
-        <el-button type="primary" :class="(activeTab || activeTab==0)  ? 'blur-btn' : ''" @click="setTimeForm()">设置随访时间</el-button>
+        <!--<el-button type="primary" :class="(activeTab || activeTab==0)  ? 'blur-btn' : ''" @click="setTimeForm()">设置随访时间</el-button>-->
       </div>
       <div class="form-div">
         <el-form :ref="timeForm.formRef" :model="timeForm" :rules="timeFormRules" label-suffix=":" label-width="140px" :inline-message="true">
@@ -68,15 +69,15 @@
                   :value="item.value">
                 </el-option>
               </el-select>
-              <el-button  plain class="ml20" @click="goSelectCartoon"  v-if="!hasSelected">选择健康漫画</el-button>
-              <div class="selected-div ml20" v-if="hasSelected">
+              <el-button  plain class="ml20" @click="goSelectCartoon"  v-if="!timeForm.hasSelected">选择健康漫画</el-button>
+              <div class="selected-div ml20" v-if="timeForm.hasSelected">
                 <span>《健康漫画名称》</span>
                 <el-button type="text" @click="goSelectCartoon">重选</el-button>
                 <el-button type="text" @click="deleteClick">删除</el-button>
               </div>
             </div>
           </el-form-item>
-          <div class="tips-contnt" v-if="hasSelected">
+          <div class="tips-contnt" v-if="timeForm.hasSelected">
             <p class="yellow-font">当前计划中共500位居民（微信：300位，短信：200位），本次定时推送任务在发送当日预计需要200条短信额度（微信推送不消耗额度，建议您让居民关注云鹊健康微信公众号），务必提前确保短信额度的充足。</p>
             <p>需要更多额度，请前往「云鹊医App-个人中心-啾啾币中心」兑换短信额度后再进行预约，您也可以联系云鹊医客服购买短信额度，客服电话：400-920-8877</p>
           </div>
@@ -112,6 +113,7 @@
     pushTime: '',
     remindTime: [],
     followupForm: [],
+    hasSelected: '',
   };
 
   export default {
@@ -120,7 +122,6 @@
     data() {
       return {
         isSelectCartoon: false,
-        hasSelected: '',
         activeTab: null,
         setTimeNodeList: [],
         currentFormRef: 1,
@@ -134,15 +135,6 @@
         //   remindTime: [],
         //   followupForm: [],
         // },
-        // timeFormConst: {
-        //   formRef: '',
-        //   followupTime: '',
-        //   followupMark: '',
-        //   followupWay: '',
-        //   pushTime: '',
-        //   remindTime: [],
-        //   followupForm: [],
-        // },
         indexOptions: [
           {
             value: '0',
@@ -219,9 +211,20 @@
     created() {
       //初始化一个随访时间节点
       if(this.setTimeNodeList.length === 0){
+        this.activeTab = 'setNewRef';
         this.timeForm.formRef = this.getNowTime();
       }
     },
+    watch: {
+      activeTab(newVal, oldVal) {
+        console.log('tab变化',newVal,oldVal)
+        if(oldVal == 'setNewRef') {
+          return
+        }else {
+          this.setTimeNodeList[oldVal] = this.timeForm;
+        }
+      }
+    },
     methods: {
       getNowTime() {
         const date = new Date();
@@ -256,14 +259,21 @@
       },
       closeSelectCartoon(val) {
         this.isSelectCartoon = val.closeStatus;
-        this.hasSelected = val.hasSelected;
+        this.timeForm.hasSelected = val.hasSelected;
       },
       deleteClick() {
-        this.hasSelected = '';
+        this.timeForm.hasSelected = '';
       },
       changeTab(val){
+        console.log('tab切换',val)
         this.activeTab = val;
-        this.timeForm =  _.cloneDeep(this.setTimeNodeList[val]);
+        if(val == 'setNewRef') {
+          this.timeForm = _.cloneDeep(timeFormInit);
+          this.timeForm.formRef = this.getNowTime();
+        }else {
+          this.timeForm =  _.cloneDeep(this.setTimeNodeList[val]);
+        }
+
         // for(let i=0; i<this.setTimeNodeList.length; i++) {
         //   if(this.setTimeNodeList[i].formRef === val) {
         //     this.timeForm =  this.setTimeNodeList[i];