商机跟进

src/app/my/my-business-detail/my-business-detail.component.html

@@ -94,16 +94,35 @@
     <div>暂无方案</div>
   </div>
   <div class="content" *ngIf="selectedId===3">
-    <div class="add">+</div>
-    <ul class="record" style="margin-top: 15px;">
-      <li>日期</li>
-      <li>商机状态</li>
-      <li>备注</li>
-    </ul>
-    <ul class="record" *ngFor="let opportunityRecordItem of opportunityRecordInfos">
-      <li>{{(opportunityRecordItem.updatedAt).substr(0,10)}}</li>
-      <li>{{lifeCommonService.checkStr(opportunityRecordItem.mdDropOptionId)}}</li>
-      <li>{{opportunityRecordItem.salesNotice}}</li>
+    <!--编辑框-->
+    <div class="editContainer">
+      <div>
+        <div>跟进状态</div>
+        <div>
+          <select name="businessStatus" id="businessStatus" class="form-control" [(ngModel)]="opportunityRecordId">
+            <option value="null">请选择</option>
+            <option *ngFor="let businessStatusItem of businessStatusList" value="{{businessStatusItem.id}}">{{businessStatusItem.dropOptionName}}</option>
+          </select>
+        </div>
+      </div>
+      <div>
+        <div>备注</div>
+        <div><input type="text" class="form-control" placeholder="输入备注信息" [(ngModel)]="salesNotice"></div>
+      </div>
+      <div>
+        <div>跟进时间</div>
+        <div><input type="date" class="form-control" [(ngModel)]="opportunityRecordNoticeDate"></div>
+      </div>
+      <div class="add">
+        <i class="iconfont icon-jia" (click)="ownOpportunityRecordSave()"></i>
+      </div>
+    </div>
+    <ul class="recordLists">
+      <li *ngFor="let opportunityRecordItem of opportunityRecordInfos">
+        <div class="opportunityRecordItem">{{lifeCommonService.checkStr(opportunityRecordItem.mdDropOptionId)}}</div>
+        <div class="salesNotice">{{opportunityRecordItem.salesNotice}}</div>
+        <div class="updatedAt">{{opportunityRecordItem.noticeDate}}</div>
+      </li>
     </ul>
   </div>
 </div>

src/app/my/my-business-detail/my-business-detail.component.scss

-.wrapper{
-    .tab{
+.wrapper {
+  .tab {
     display: flex;
     list-style: none;
     margin: 10px 0px;
@@ -12,70 +12,70 @@
       text-align: center;
       border: 1px #a9aabb solid;
       border-radius: 20px;
-          h3{
+      h3 {
         font-weight: normal;
         font-size: 16px;
       }
     }
-        li.selected{
+    li.selected {
       background-color: #ff5a32;
       color: #fff;
       border: 1px #f0f0f0 solid;
     }
   }
-      .content{
+  .content {
     padding: 10px 5px;
     position: relative;
-          .iconfont{
+    > .iconfont {
       position: absolute;
       right: 10px;
       font-size: 24px;
       top: -5px;
     }
-          .contentDetail{
+    .contentDetail {
       margin-top: 15px;
-            .contentItem{
+      .contentItem {
         display: flex;
         margin-bottom: 10px;
         justify-content: space-between;
         align-items: center;
         // border-bottom: 1px #ddd solid;
         margin: 0 8px 8px 8px;
-              input.form-control{
+        input.form-control {
           display: inline-block;
           width: 60%;
           margin: 0 5px;
-                background:none;  
-                outline:none;  
-                border:none;
+          background: none;
+          outline: none;
+          border: none;
           text-align: right;
           box-shadow: none;
         }
 
-              .sexWrapper{
+        .sexWrapper {
           display: flex;
           width: 60%;
           justify-content: flex-end;
           padding-right: 16px;
-                .form-control.sex{
+          .form-control.sex {
             width: 20%;
             margin-left: 5px;
           }
-                .form-control.sex.sexBtn{
+          .form-control.sex.sexBtn {
             background-color: #5cb85c;
             color: #fff;
           }
         }
       }
-            .contentItem:last-child{
+      .contentItem:last-child {
         border-bottom: none;
       }
     }
-          .tagWrapper{
+    .tagWrapper {
       display: flex;
       flex-wrap: wrap;
       padding-left: 8px;
-            div.tagContent{
+      div.tagContent {
         width: 25%;
         margin: 10px 3px 0 3px;
         height: 30px;
@@ -85,43 +85,40 @@
         border-radius: 12px;
         cursor: pointer;
       }
-            div.selected{
+      div.selected {
         color: #5cb85c;
         background: rgba(91, 184, 92, 0.1);
       }
     }
 
-        .answerContent{
+    .answerContent {
       border-bottom: 1px #ddd solid;
       margin-bottom: 5px;
       padding: 5px 0;
-          .questionTitle{
+      .questionTitle {
         font-weight: 700;
         font-size: 13px;
       }
-          .questionContent{
+      .questionContent {
         font-size: 16px;
       }
     }
-        .answerContent:last-child{
+    .answerContent:last-child {
       border-bottom: 0;
     }
-        .add{
-          width: 30px;
-          height: 30px;
-          line-height: 30px;
-          border-radius: 50%;
-          text-align: center;
-          border: 1px #ddd solid;
-          position: absolute;
-          right: 10px;
-          top: -5px;
+    .add {
+      justify-content: center;
+      .iconfont {
+        font-size: 28px;
+        color: #ff5933;
+        font-weight: bold;
       }
-        .record{
+    }
+    .record {
       display: flex;
       list-style: none;
       justify-content: space-between;
-          li{
+      li {
         width: 30%;
         text-align: center;
         height: 30px;
@@ -129,4 +126,56 @@
       }
     }
   }
+
+  .editContainer {
+    margin-top: 15px;
+    background: #ffffff;
+    padding-left: 10px;
+    > div {
+      height: 50px;
+      border-bottom: 1px solid #dbdbdb;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      > div:first-child {
+        width: 100px;
+        font-size: 15px;
+      }
+      > div:last-child {
+        flex: 1;
+      }
+      .form-control {
+        border: none;
+        box-shadow: none;
+      }
+    }
+    > div:last-child {
+      border: none;
+    }
+  }
+  .recordLists {
+    li {
+      border-bottom: 1px solid #f0f0f0;
+      padding: 5px 10px;
+      background: rgb(251, 251, 251);
+    }
+    li:last-child {
+      border: none;
+    }
+    .opportunityRecordItem {
+      font-size: 15px;
+    }
+    .salesNotice {
+      font-size: 14px;
+      color: #8a8a8a;
+      line-height: 1.1;
+      margin-bottom: 5px;
+    }
+    .updatedAt {
+      font-size: 12px;
+      color: #8a8a8a;
+      text-align: right;
+    }
+  }
+
 }

src/app/my/my-business-detail/my-business-detail.component.ts

-import { Component, OnInit } from '@angular/core';
-import { MyService } from '../my.service';
-import { ActivatedRoute } from "@angular/router";
-import { BusinessQuery } from '../../domain/businessQuery';
-import { LifeCommonService } from '../../common/life-common.service';
+import {Component, OnInit} from '@angular/core';
+import {MyService} from '../my.service';
+import {ActivatedRoute} from "@angular/router";
+import {BusinessQuery} from '../../domain/businessQuery';
+import {LifeCommonService} from '../../common/life-common.service';
 @Component({
   selector: 'ydlife-my-business-detail',
   templateUrl: './my-business-detail.component.html',
@@ -30,13 +30,22 @@ export class MyBusinessDetailComponent implements OnInit {
   //控制弹框
   toastDialog: boolean;
   toastInfo: any;
+  // 增加还是保存
+  addStatus: boolean;
+  // 备注信息
+  salesNotice: string;
+  // 跟进时间
+  opportunityRecordNoticeDate: Date;
+  // 跟进状态
+  opportunityRecordId: number = null;
+
   constructor(private activateRoute: ActivatedRoute, private myService: MyService,
               public lifeCommonService: LifeCommonService) {
     this.titleList = [
-      { id: 1, name: '基本信息' },
-      { id: 2, name: '咨询问卷' },
-      { id: 4, name: '咨询预览' },
-      { id: 3, name: '商机跟进' }
+      {id: 1, name: '基本信息'},
+      {id: 2, name: '咨询问卷'},
+      {id: 4, name: '咨询预览'},
+      {id: 3, name: '商机跟进'}
 
     ]
   }
@@ -45,7 +54,7 @@ export class MyBusinessDetailComponent implements OnInit {
     this.orderId = this.activateRoute.snapshot.queryParams['orderId'];
     this.opportunityId = this.activateRoute.snapshot.paramMap.get('id');
     this.tagQuery();
-    this.selectTab(1);
+    this.selectTab(3);
     this.ownOpportunityDetailQuery();
 
     this.dropOptionsQuery();
@@ -67,16 +76,16 @@ export class MyBusinessDetailComponent implements OnInit {
   }
 
   ownOpportunityDetailQuery() {
-    // const detailParam = {
-    //   opportunityId: this.opportunityId,
-    //   orderId: this.orderId,
-    //   practitionerId: JSON.parse(localStorage.getItem('lifeCustomerInfo'))['practitionerId']
-    // }
     const detailParam = {
-      opportunityId: 2,
-      orderId: 8373,
-      practitionerId: 1
+      opportunityId: this.opportunityId,
+      orderId: this.orderId,
+      practitionerId: JSON.parse(localStorage.getItem('lifeCustomerInfo'))['practitionerId']
     }
+    // const detailParam = {
+    //   opportunityId: 2,
+    //   orderId: 8373,
+    //   practitionerId: 1
+    // }
     this.myService.ownOpportunityDetailQuery(detailParam).subscribe((res) => {
       if (res['success']) {
         this.opportunitySurveyAnswersList = res['data']['opportunityConsultationInfo']['opportunitySurveyAnswersList']
@@ -103,7 +112,7 @@ export class MyBusinessDetailComponent implements OnInit {
   }
 
   tagQuery() {
-    this.myService.tagQuery({ tagType: 2, isActive: 1 }).subscribe((res) => {
+    this.myService.tagQuery({tagType: 2, isActive: 1}).subscribe((res) => {
       if (res['success']) {
         this.tagList = res['data']['tagVOs'];
 
@@ -128,9 +137,10 @@ export class MyBusinessDetailComponent implements OnInit {
   selectedGender(e) {
     this.editBusiness.gender = e;
   }
+
   //商机状态
   dropOptionsQuery() {
-    this.myService.dropOptionsQuery({ code: 'bizchance_promotion_action' }).subscribe((res) => {
+    this.myService.dropOptionsQuery({code: 'bizchance_promotion_action'}).subscribe((res) => {
       if (res['success']) {
         this.businessStatusList = res['data']['dropMasterInfoList']['0']['dropOptionsInfoList'];
       }
@@ -163,4 +173,49 @@ export class MyBusinessDetailComponent implements OnInit {
       }
     })
   }
+
+
+  ownOpportunityRecordSave() {
+    if (!this.opportunityRecordId && !this.salesNotice) {
+      this.toastDialog = true;
+      this.toastInfo = {
+        status: 1,
+        msg: '跟进状态和备注不能同时为空！',
+        timeout: 3000,
+        align: 'center'
+      };
+      return;
+    }
+    const param = {
+      id: '',
+      salesNotice: this.salesNotice,
+      isActive: 1,
+      practitionerId: JSON.parse(localStorage.getItem('lifeCustomerInfo'))['practitionerId'],
+      opportunityId: this.opportunityId,
+      mdDropOptionId: this.opportunityRecordId,
+      noticeDate: this.opportunityRecordNoticeDate
+    }
+    this.myService.ownOpportunityRecordSave(param).subscribe(res => {
+      console.log(res);
+      if (res['success']) {
+        this.toastDialog = true;
+        this.toastInfo = {
+          status: 1,
+          msg: '修改成功！',
+          timeout: 3000,
+          align: 'center'
+        };
+        this.ownOpportunityDetailQuery();
+      } else {
+        this.toastDialog = true;
+        this.toastInfo = {
+          status: 1,
+          msg: res['message'],
+          timeout: 3000,
+          align: 'center'
+        };
+      }
+
+    })
+  }
 }

src/app/my/my.service.ts

@@ -83,6 +83,13 @@ export class MyService {
       return res;
     });
   }
+  //经纪人修改商机跟进信息
+  ownOpportunityRecordSave(param){
+    const url = this.API + "/practitioner/ownOpportunityRecordSave";
+    return this.http.post(url, JSON.stringify(param)).pipe(res => {
+      return res;
+    });
+  }
 
   //标签列表查询
   tagQuery(param) {