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

Mila

2022-01-04 5e5dd294d6f7b90940ca9e117c4254ab413b4ad8

 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>