| | |
| | | class="rowStyle cursor--pointer" |
| | | justify="space-between" |
| | | :class="{'new': newAppointment }" |
| | | @click.native="openDetail" |
| | | @click.native="viewDetail" |
| | | > |
| | | <el-col :xs="1" :sm="1" class="unread" align="middle" v-if="isReserved"> |
| | | <div class="test"> |
| | | <div class="unread" v-if="isReserved"> |
| | | <div class="circle" v-if="!isRead"></div> |
| | | </el-col> |
| | | <el-col :xs="5" :sm="3" align="middle"> |
| | | <el-avatar |
| | | :size="50" |
| | | ></el-avatar> |
| | | <div class="satisfaction" v-if="!hideReviews"> |
| | | <template v-if="client.satisfactionScore"> |
| | | TODO:隱藏滿意度 |
| | | <i class="icon-star pam-icon icon--yellow satisfaction"></i> |
| | | <span>{{client.satisfactionScore}}</span> |
| | | </template> |
| | | <template v-else> |
| | | <div class="unfilled">未填滿意度</div> |
| | | </template> |
| | | </div> |
| | | </el-col> |
| | | <el-col :xs="14" :sm="14" class="pl-10"> |
| | | </div> |
| | | |
| | | <div class="pl-10"> |
| | | <div class="smTxt_bold name">{{ client.name }}</div> |
| | | <div class="my-10">預約成功</div> |
| | | <div class="my-10 xsTxt">預約成功</div> |
| | | <div class="professionals"> |
| | | <template v-if="client.requirement"> |
| | | <span |
| | |
| | | >(客戶未提供需求項目)</span> |
| | | </template> |
| | | </div> |
| | | </el-col> |
| | | <el-col class="flex-column contactInfo" :xs="4" :sm="6"> |
| | | <div |
| | | <AppointmentProgress |
| | | :currentStep="'contacted'" |
| | | ></AppointmentProgress> |
| | | </div> |
| | | </div> |
| | | <!-- <el-col :xs="5" :sm="3" align="middle"> |
| | | <el-avatar |
| | | :size="50" |
| | | ></el-avatar> |
| | | <div class="satisfaction" v-if="!hideReviews"> |
| | | <template v-if="client.satisfactionScore"> |
| | | TODO:隱藏滿意度 |
| | | <i class="icon-star pam-icon icon--yellow satisfaction"></i> |
| | | <span>{{client.satisfactionScore}}</span> |
| | | </template> |
| | | <template v-else> |
| | | <div class="unfilled">未填滿意度</div> |
| | | </template> |
| | | </div> |
| | | </el-col> --> |
| | | |
| | | <div class="flex-column contactInfo" :xs="4" :sm="6"> |
| | | <!-- <div |
| | | class="smTxt_bold fix-chrome-click--issue" |
| | | :class="{'unread-txt': reservedTxt === '未讀', 'read-txt': reservedTxt !== '未讀'}" |
| | | >{{ reservedTxt }}</div> |
| | | >{{ reservedTxt }}</div> --> |
| | | <div class="invite-msg smTxt_bold"> |
| | | 傳送約訪通知 |
| | | </div> |
| | | <div |
| | | class="date xsTxt text--mid_grey" |
| | | class="date xsTxt text--black" |
| | | >{{ date }}</div> |
| | | <div |
| | | class="xsTxt text--mid_grey" |
| | | >{{ time }}</div> |
| | | </el-col> |
| | | </div> |
| | | </el-row> |
| | | |
| | | <Ui-Dialog |
| | |
| | | <div class="mdTxt">內容描述</div> |
| | | <div |
| | | class="smTxt text--bold text--primary cursor--pointer text--underline edit" |
| | | @click='isEdit = !isEdit' |
| | | @click='editMemo' |
| | | >編輯</div> |
| | | </div> |
| | | |
| | |
| | | import appointmentService from '~/shared/services/appointment.service'; |
| | | import UtilsService from '~/shared/services/utils.service'; |
| | | import { hideReviews } from '~/shared/const/hide-reviews'; |
| | | import { AppointmentMemoInfo, ClientInfo } from '~/shared/models/client.model'; |
| | | import myConsultantService from '~/shared/services/my-consultant.service'; |
| | | import { ElRow } from 'element-ui/types/row'; |
| | | import { Appointment, AppointmentMemoInfo } from '~/shared/models/appointment.model'; |
| | | |
| | | const localStorage = namespace('localStorage'); |
| | | @Component({ |
| | |
| | | }) |
| | | export default class ClientList extends Vue { |
| | | @Action |
| | | updateMyAppointment!: (data: ClientInfo) => void; |
| | | updateMyAppointment!: (data: Appointment) => void; |
| | | |
| | | @Prop() |
| | | client!: ClientInfo; |
| | | client!: Appointment; |
| | | |
| | | @localStorage.Mutation |
| | | storageClearAppointmentIdFromMsg!: () => void; |
| | |
| | | ? JSON.parse(JSON.stringify(this.client.appointmentMemoList[0])) |
| | | : {appointmentId: 0, content: '', id: 0}; |
| | | this.memo = this.memoInfo.content; |
| | | } |
| | | |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | | viewDetail(): void { |
| | | this.$router.push(`/appointment/${this.client.id}`); |
| | | } |
| | | |
| | | get newAppointment(): boolean { |
| | |
| | | |
| | | markAppointment() { |
| | | myConsultantService.markAsContact(this.client.id).then(data => { |
| | | // TODO: 要接後台傳回的 updated client 資料 - Ben 2021/11/16 |
| | | const updatedClient = {...this.client}; |
| | | updatedClient.communicateStatus = 'contacted'; |
| | | updatedClient.contactTime = new Date().toString(); |
| | | |
| | | this.updateMyAppointment(updatedClient); |
| | | this.updateMyAppointment(data); |
| | | this.isVisibleDialog = false; |
| | | }) |
| | | } |
| | |
| | | |
| | | private createMemo(params) { |
| | | appointmentService.createMemo(params).then(memoRes => { |
| | | this.updateStoreMemo(memoRes); |
| | | this.storeMemo(memoRes); |
| | | }); |
| | | } |
| | | |
| | | private updateMemo(params) { |
| | | appointmentService.updateMemo(params).then(memoRes => { |
| | | this.updateStoreMemo(memoRes); |
| | | this.storeMemo(memoRes); |
| | | }); |
| | | } |
| | | |
| | | private updateStoreMemo(memoRes) { |
| | | private storeMemo(memoRes) { |
| | | this.memoInfo = memoRes; |
| | | this.memo = this.memoInfo.content; |
| | | this.client.appointmentMemoList[0] = this.memoInfo; |
| | | this.isEdit = false; |
| | | } |
| | | |
| | | editMemo() { |
| | | this.isEdit = !this.isEdit; |
| | | this.memo = this.memoInfo.content; |
| | | } |
| | | |
| | | cancelEditMemo() { |
| | |
| | | margin-bottom: 10px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | |
| | | transition: background-color 0.5s; |
| | | &.new { |
| | | border-left: solid 4px $YELLOW; |
| | |
| | | .circle { |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 50px; |
| | | border-radius: 50%; |
| | | background-color: $PRIMARY_RED; |
| | | margin: auto; |
| | | } |
| | |
| | | text-overflow: ellipsis; |
| | | .professionalsTxt { |
| | | font-size: 12px; |
| | | font-weight: bold; |
| | | margin-right: 5px; |
| | | } |
| | | .noProfessionalsTxt { |
| | |
| | | .fixed-Height { |
| | | height: 16px; |
| | | } |
| | | .test{ |
| | | display: flex; |
| | | } |
| | | .invite-msg{ |
| | | color: #ED1B2E; |
| | | border-bottom: 1px solid #ED1B2E; |
| | | width: 97px; |
| | | } |
| | | .line{ |
| | | height: 4px; |
| | | width: 10px; |
| | | background-color: $PRUDENTIAL_GREY; |
| | | |
| | | } |
| | | </style> |