update TODO#133355 顧問-增加註記客戶備忘

Mila

2022-01-04 5e5dd294d6f7b90940ca9e117c4254ab413b4ad8

update TODO#133355 顧問-增加註記客戶備忘

 PAMapp/assets/scss/utilities/_heading.scss

@@ -55,6 +55,10 @@
  text-align: left;
}

.text--right {
  text-align: right;
}

.text--primary {
  color: $PRIMARY_RED;
}
@@ -96,10 +100,6 @@
  font-size: 18px;
  color: $ORANGE;
  cursor: pointer;
}

.text--center {
  text-align: center;
}

.text--underline {

 PAMapp/assets/scss/utilities/_utilities.scss

@@ -44,6 +44,10 @@
  margin-right: 30px;
}

.my-10 {
  margin:10px 0;
}

.pt-30 {
  padding-top: 30px;
}

 PAMapp/assets/scss/vendors/elementUI/_input.scss

@@ -4,4 +4,19 @@

.input-radius > .el-input__inner {
  border-radius: 10px;
}

.pam-appointment-textarea {
  .el-textarea__inner {
      border: 1px solid #DCDFE6;
      padding: 10px 20px;
      box-sizing: border-box;
      border-radius: 5px;
      font-size: 18px;

      &:focus {
          outline: none;
          border: solid 1px $SKY_BLUE;
      }
  }
}

 PAMapp/components/Client/ClientCard.vue

@@ -28,7 +28,7 @@
            </el-col>
            <el-col :xs="14" :sm="14" class="pl-10">
                <div class="smTxt_bold name">{{ client.name }}</div>
                <div class="message">預約成功</div>
                <div class="my-10">預約成功</div>
                <div class="professionals">
                    <template v-if="client.requirement">
                        <span
@@ -67,11 +67,11 @@
            >{{isReserved ? '預約資訊' : '已聯絡資訊'}}</h5>

            <p v-if='isReserved'
                class="smTxt text-right"
                class="smTxt text--right"
            ><span v-if="isRead">{{client.consultantReadTime | formatDate}}</span> 已讀</p>
            <p
                v-if="!isReserved"
                class="smTxt text-right"
                class="smTxt text--right"
            >{{client.contactTime | formatDate}} 聯絡</p>
            <p class="smTxt">{{client.appointmentDate | formatDate}} 預約</p>

@@ -86,10 +86,37 @@
                <p v-for="(item, index) in hopeContactTime"
                    :key="index"
                >連絡時段{{index + 1 | formatNumber}}：<span>{{ item | formatHopeContactTime}}</span></p>
            </div>
            <div class="memoStyle">
                <div class="header">
                    <div class="mdTxt">內容描述</div>
                    <div
                        class="smTxt text--bold text--primary edit cursor--pointer text--underline"
                        @click='isEdit = !isEdit'
                    >編輯</div>
                </div>
                <div class="mt-30 text--center" v-if="isReserved">
                    <el-button @click="markAppointment">標註為已連絡</el-button>

                <el-input
                    class="mt-10 pam-appointment-textarea"
                    type="textarea"
                    :rows="3"
                    maxlength="100"
                    placeholder="請輸入，限100字。"
                    :disabled="!isEdit"
                    v-model="memo"
                >
                </el-input>

                <div class="mt-10 smTxt text--bold text--primary text--right fixed-Height">
                    <template v-if="isEdit">
                        <span class="cursor--pointer" @click="cancelEditMemo">取消</span>
                        <span class="pl-20 cursor--pointer" @click="saveMemo">儲存</span>
                    </template>
                </div>
            </div>
            <div class="mt-30 text--center" v-if="isReserved">
                <el-button @click="markAppointment">標註為已連絡</el-button>
            </div>
        </Ui-Dialog>
    </div>
</template>
@@ -100,7 +127,7 @@
import appointmentService from '~/shared/services/appointment.service';
import UtilsService from '~/shared/services/utils.service';
import { hideReviews } from '~/shared/const/hide-reviews';
import { ClientInfo } from '~/shared/models/client.model';
import { AppointmentMemoInfo, ClientInfo } from '~/shared/models/client.model';
import myConsultantService from '~/shared/services/my-consultant.service';
import { ElRow } from 'element-ui/types/row';

@@ -138,6 +165,14 @@
    dialogWidth = '';
    hideReviews = hideReviews;

    isEdit = false;
    memoInfo: AppointmentMemoInfo = {
        appointmentId: 0,
        content: '',
        id: 0
    }
    memo = '';

    //////////////////////////////////////////////////////////////////////

    @Watch('$route', {immediate: true})
@@ -149,6 +184,13 @@
    }

    //////////////////////////////////////////////////////////////////////

    mounted() {
        this.memoInfo = this.client.appointmentMemoList.length > 0
            ? JSON.parse(JSON.stringify(this.client.appointmentMemoList[0]))
            : {appointmentId: 0, content: '', id: 0};
        this.memo = this.memoInfo.content;
    }

    get newAppointment(): boolean {
      return !this.client.consultantViewTime
@@ -209,7 +251,6 @@
        setTimeout(() => {
            (this.$refs.clientCardRef as any).$el.classList.add('currentShowStyle');
        }, 0)

        this.dialogWidth = UtilsService.isMobileDevice() ? '80%' : '';
        this.isVisibleDialog = true;
    }
@@ -235,6 +276,7 @@
                this.updateMyAppointment(updatedClient);
            });
        };
        this.isEdit = false;
        this.clearAppointmentIdFromMsg();
    }

@@ -244,6 +286,46 @@
        setTimeout(() => {
            (this.$refs.clientCardRef as ElRow).$el.classList.remove('currentShowStyle')
        },1000)
    }

    saveMemo() {
        if (this.client.appointmentMemoList.length > 0) {
            const params = {
                content: this.memo,
                id: this.client.appointmentMemoList[0].id
            };
            this.updateMemo(params);
            return;
        }

        const params = {
            content: this.memo,
            appointmentId: this.client.id,
        }
        this.createMemo(params);
    }

    private createMemo(params) {
        appointmentService.createMemo(params).then(memoRes => {
            this.updateStoreMemo(memoRes);
        });
    }

    private updateMemo(params) {
        appointmentService.updateMemo(params).then(memoRes => {
            this.updateStoreMemo(memoRes);
        });
    }

    private updateStoreMemo(memoRes) {
        this.memoInfo = memoRes;
        this.memo = this.memoInfo.content;
        this.isEdit = false;
    }

    cancelEditMemo() {
        this.isEdit = false;
        this.memo = this.memoInfo.content;
    }

}
@@ -257,19 +339,15 @@
        display: flex;
        justify-content: space-between;
        transition: background-color 0.5s;

        &.new {
            border-left: solid 4px $YELLOW;
        }

        &.currentShowStyle {
            background-color: rgba(236, 195, 178, 0.5);
            transition: background-color 0.5s;
        }

        .unread {
            align-self: center;

            .circle {
                width: 10px;
                height: 10px;
@@ -278,72 +356,65 @@
                margin: auto;
            }
        }

        .satisfaction {
            font-size: 12px;
            font-weight: bold;
            margin-top: 5px;

            .unfilled {
                font-weight: lighter;
                color: $MID_GREY;
            }
        }

        .message {
            margin:10px 0;
        }

        .professionals {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            .professionalsTxt {
                font-size: 12px;
                font-weight: bold;
                margin-right: 5px;
            }

            .noProfessionalsTxt {
                color: $PRUDENTIAL_GREY;
                font-weight: lighter;
            }
        }

        .contactInfo {
            text-align: right;
            .date {
                font-size: 12px;
            }
        }

        .unread-txt {
            @extend .text--primary;
        }

        .read-txt {
            color: $SKY_BLUE;
        }

    }

    .flex-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .dialogTxt {
        font-size: 20px;
        overflow-y:scroll;
        max-height: 45vh;
        max-height: 25vh;
        @include desktop {
            height: 400px;
        }
    }

    .text-right {
        text-align: right;
    .memoStyle {
        margin-top: 30px;
        .header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
        }
    }
    .fixed-Height {
        height: 16px;
    }
</style>

 PAMapp/shared/models/appointment.model.ts

@@ -93,3 +93,15 @@
selectWeekOptions : string[],
selectTimesOptions: string[]
}


export interface createdMemoInfo {
  content: string,
  appointmentId: number
}

export interface updatedMemoInfo {
  content: string,
  /** memo id */
  id: number
}

 PAMapp/shared/models/client.model.ts

@@ -1,22 +1,29 @@
export interface ClientInfo {
  age               : string,
  agentNo           : string,
  appointmentDate   : string,
  communicateStatus : string,
  consultantReadTime: string,
  consultantViewTime: string,
  contactTime       : string,
  contactType       : string,
  customerId        : number,
  email             : string,
  gender            : string,
  hopeContactTime   : string,
  id                : number,
  job               : string,
  lastModifiedDate  : string,
  name              : string,
  otherRequirement  : string,
  phone             : string,
  requirement       : string,
  satisfactionScore : number
  age                : string,
  agentNo            : string,
  appointmentDate    : string,
  communicateStatus  : string,
  consultantReadTime : string,
  consultantViewTime : string,
  contactTime        : string,
  contactType        : string,
  customerId         : number,
  email              : string,
  gender             : string,
  hopeContactTime    : string,
  id                 : number,
  job                : string,
  lastModifiedDate   : string,
  name               : string,
  otherRequirement   : string,
  phone              : string,
  requirement        : string,
  satisfactionScore  : number,
  appointmentMemoList: AppointmentMemoInfo[]
}

export interface AppointmentMemoInfo {
  appointmentId: number,
  content: string,
  id: number
}

 PAMapp/shared/services/appointment.service.ts

@@ -1,7 +1,7 @@
import { http } from "./httpClient";

import { ClientInfo } from "~/shared/models/client.model";
import { AppointmentDetail, EditAppointmentParams } from "~/shared/models/appointment.model";
import { AppointmentMemoInfo, ClientInfo } from "~/shared/models/client.model";
import { AppointmentDetail, createdMemoInfo, EditAppointmentParams, updatedMemoInfo } from "~/shared/models/appointment.model";

class AppointmentService {

@@ -41,6 +41,20 @@
    return http.put('/appointment', editAppointmentParams);
  }

  // 新增註記
  createMemo(memoInfo: createdMemoInfo): Promise<AppointmentMemoInfo> {
    return http.post('/appointment/memo/create', memoInfo).then(res => res.data);
  }

  // 編輯註記
  updateMemo(memoInfo: updatedMemoInfo): Promise<AppointmentMemoInfo> {
    return http.post('/appointment/memo/update', memoInfo).then(res => res.data);
  }

  // 刪除註記
  deleteMemo(appointmentMemoId: number) {
    return http.delete(`/appointment/memo/${appointmentMemoId}`)
  }
}

export default new AppointmentService();