Merge branch 'sit' into uat

wayne

2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b

 PAMapp/components/QuickFilter/QuickFilterSelector.vue

@@ -2,7 +2,7 @@
    <div>
        <div class="mb-10" v-if="questionOption.title !== '顧問性別'">
            <span class="mdTxt"
            >{{questionOption.title === '顧問滿意度' ? '保險顧問滿意度' : questionOption.title}}
            >{{questionOption.title}}
            </span>
            <span
                class="smTxt_bold text--primary"
@@ -14,7 +14,10 @@
            >選取星星</span>
        </div>

        <div class="quickBtnBlock" v-if="questionOption.name === 'communicationStyles'">
        <!-------------------- 溝通風格 -------------------->
        <div class="quickBtnBlock"
            v-if="questionOption.name === 'communicationStyles'"
        >
            <el-checkbox-group
                class="pam-quickFilter-checkbox"
                v-model="pickedItem.communicationStyles"
@@ -29,8 +32,29 @@
                ></el-checkbox>
            </el-checkbox-group>
        </div>

        <div class="quickBtnBlock" v-else-if="questionOption.name === 'gender'">
        <!-------------------- 年資 -------------------->
        <div class="quickBtnBlock"
            v-else-if="questionOption.name === 'seniority'"
        >
            <el-radio-group
                class="pam-quickFilter-radio pam-radio-group"
                v-model="pickedItem.seniority"
            >
                <el-radio
                    v-for="(i, index) in questionOption.detail"
                    :key="index"
                    :label="i.value"
                    :class="i.className"
                >
                    <div>{{i.name}}</div>
                    <div class="subtitle">{{i.subTitle}}</div>
                </el-radio>
            </el-radio-group>
        </div>
        <!-------------------- 性別 -------------------->
        <div class="quickBtnBlock"
            v-else-if="questionOption.name === 'gender'"
        >
            <el-radio-group
                class="pam-quickFilter-radio"
                v-model="pickedItem.gender"
@@ -43,10 +67,11 @@
                >{{i.name}}</el-radio>
            </el-radio-group>
        </div>

        <!-------------------- 滿意度 -------------------->
        <div v-else>
            <el-rate
                class="pam-quickFilter-rate"
            v-if="!hideReviews"
                class="pam-rate mt-30"
                v-model="pickedItem.avgScore"
            ></el-rate>
        </div>
@@ -65,53 +90,58 @@

<script lang="ts">
import { Vue, Component, Prop, Watch, Emit } from 'nuxt-property-decorator';
import { FastQueryParams } from '~/assets/ts/api/consultant';
import { QuestionOption } from '~/pages/quickFilter/index.vue';

import { hideReviews } from '~/shared/const/hide-reviews';
import { FastQueryParams, QuestionOption, Selected } from '~/shared/models/quick-filter.model';
@Component
export default class QuickFilterDrawer extends Vue {
    @Prop()
    questionOption!: QuestionOption;

    @Prop()
    isOpenQuestionPopUp!: boolean;

    @Prop()
    confirmItem!: Selected[];

    pickedItem: FastQueryParams = {
        communicationStyles: [],
        status: '',
        gender: '',
        avgScore: 0
        avgScore: 0,
        seniority: ''
    }
    hideReviews = hideReviews ;

    @Prop() questionOption!: QuestionOption;
    @Prop() isOpenQuestionPopUp!: boolean;
    @Prop() confirmItem!: Selected[];
    //////////////////////////////////////////////////////////////////

    @Watch('isOpenQuestionPopUp', {immediate: true}) onPopUpChange() {
    @Watch('isOpenQuestionPopUp', {immediate: true})
    onPopUpChange() {
        this.pickedItem = {
            communicationStyles: this.communicationStyles,
            communicationStyles: this.getCommunicationStyles(),
            status: '',
            gender: this.gender,
            avgScore: this.avgScore
            gender: this.getGender(),
            avgScore: this.getAvgScore(),
            seniority: this.getSeniority()
        }
    }

    get gender() {
        const filter = this.confirmItem.filter(item => item.option === 'gender');
        return filter.length > 0 ? filter[0].value : '';
    @Emit('confirm')
    confirm() {
        const name = this.questionOption.name;
        return {
            option: name,
            value: this.pickedItem[name]
        }
    }

    get avgScore() {
        const filter = this.confirmItem.filter(item => item.option === 'avgScore');
        return filter.length > 0 ? filter[0].value : 0;
    }

    get communicationStyles() {
        return this.confirmItem
            .filter(item => item.option === 'communicationStyles')
            .map(item => item.value);
    }
    //////////////////////////////////////////////////////////////////

    get isDisabled() {
        const name = this.questionOption.name;
        return name === 'gender' && !this.pickedItem[name]
            || name === 'avgScore' && !this.pickedItem[name]
            || name === 'communicationStyles' && !this.pickedItem[name].length
            || name === 'seniority' && !this.pickedItem[name]
    }

    selectedCommunicationStyles() {
@@ -120,20 +150,32 @@
        }
    }

    @Emit('confirm')
    confirm() {
        const name = this.questionOption.name;
        return {
            option: this.questionOption.name,
            value: this.pickedItem[name]
        }
    //////////////////////////////////////////////////////////////////

    private getGender(): string {
        return this.filterSingleSelected('gender');
    }

}
    private getAvgScore(): number {
        return this.filterSingleSelected('avgScore');
    }

export interface Selected {
    option: string;
    value: any;
    private getCommunicationStyles(): string[] {
        return this.confirmItem
            .filter(item => item.option === 'communicationStyles')
            .map(item => item.value);
    }

    private getSeniority(): string {
        return this.filterSingleSelected('seniority');
    }

    private filterSingleSelected(name: string) {
        const filter = this.confirmItem.filter(item => item.option === name);
        return filter.length > 0
            ? filter[0].value
            : (name === 'avgScore' ? 0 : '');
    }
}
</script>

@@ -142,8 +184,12 @@
    .quickBtnBlock {
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;
    }

</style>
    .pam-radio-group {
        height: 240px;
        flex-wrap: wrap;
    }

</style>