Merge branch 'master' of https://192.168.0.10:8443/r/pcalife/PAM

Mila

2021-12-22 bdae23a40c461c2c6b6ee614f661eac731c949c8

 PAMapp/pages/quickFilter/index.vue

@@ -17,6 +17,10 @@
                    @removeTag="removeTag(item.value)"
                >
                    <span v-if="item.option === 'gender'">{{item.value === 'male' ? '男性' : '女性'}}</span>
                    <span v-else-if="item.option === 'seniority'" class="mdTxt lighter">
                        {{item.value | formatSeniorityTitle}}
                        <span class="smTxt">{{item.value | formatSenioritySubTitle}}</span>
                    </span>
                    <!-- TODO:隱藏滿意度 -->
                    <!-- <span v-else-if="item.option === 'avgScore'">{{item.value + '星以上滿意度'}}</span> -->
                    <span v-else>{{item.value}}</span>
@@ -66,13 +70,26 @@

<script lang="ts">
import { Vue, Component, namespace } from 'nuxt-property-decorator';
import { FastQueryParams } from '~/assets/ts/api/consultant';
import { Consultant } from '~/assets/ts/models/consultant.model';
import { Selected } from '~/components/QuickFilter/QuickFilterSelector.vue';
import { fastQuery } from '~/assets/ts/api/consultant';
import { Consultant } from '~/shared/models/consultant.model';
import { FastQueryParams, QuestionOption, Selected } from '~/shared/models/quick-filter.model';
import queryConsultantService from '~/shared/services/query-consultant.service';
import { questionList } from '~/shared/const/quickFilter-questionList';

const localStorage = namespace('localStorage');
@Component
@Component({
    filters: {
        formatSeniorityTitle(value) {
            if (value === 'SENIOR') return '資深';
            if (value === 'YOUNG') return '年輕';
            return '不限';
        },
        formatSenioritySubTitle(value) {
            if (value === 'SENIOR') return '薑是老的辣';
            if (value === 'YOUNG') return '給年輕人一個機會';
            return '年齡不是問題';
        }
    }
})
export default class QuickFilter extends Vue {
    @localStorage.Mutation storageQuickFilter!: (token: string) => void;
    @localStorage.Getter quickFilterSelectedData!: Selected[];
@@ -81,41 +98,9 @@
    consultantList: Consultant[] = [];
    questionOption = {};
    confirmItem: Selected[] = [];
    questionList: QuestionOption[] = [
        {
            name: 'gender',
            title: '顧問性別',
            detail: [
                { name: '男性', value: 'male', className: 'btn_man'},
                { name: '女性', value: 'female', className: 'btn_woman'}
            ],
            type: 'radio'
        },
        // { TODO:隱藏滿意度
        //     name: 'avgScore',
        //     title: '顧問滿意度',
        //     detail: [],
        //     type: ''
        // },
        {
            name: 'communicationStyles',
            title: '溝通風格',
            detail: [
                { value: '謹慎務實', className: 'btn_owl'},
                { value: '明快主動', className: 'btn_tiger'},
                { value: '耐心傾聽', className: 'btn_koala'},
                { value: '健談風趣', className: 'btn_peacock'}
            ],
            type: 'checkbox'
        },
        // {
        //     name: 'status',
        //     title: '上線狀態',
        //     detail: [],
        //     type: 'radio'
        // }
    ];
    questionList = questionList;

    //////////////// lifecycle ////////////////
    mounted() {
        if (this.quickFilterSelectedData && this.quickFilterSelectedData.length > 0) {
            this.confirmItem = this.quickFilterSelectedData;
@@ -123,26 +108,8 @@
        }
    }

    gender(): string {
        const filter = this.confirmItem.filter(item => item.option === 'gender').map(i => i.value);
        return filter.length === 0 ? '' : filter[0];
    }

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

    communicationStyles(): string[] {
        return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
    }

    isActive(name: string) {
        return name === 'gender' && !!this.gender()
            || name === 'avgScore' && !!this.avgScore()
            || name === 'communicationStyles' && !!this.communicationStyles().length
    }

    //////////////////////////////////////////
    openPopUp(question: QuestionOption) {
        this.questionOption = question;
        this.isOpenQuestionPopUp =true;
@@ -159,7 +126,39 @@
        this.isOpenQuestionPopUp = false;
    }

    setConfirmData(event: Selected) {
    isActive(name: string) {
        return name === 'gender' && !!this.getGender()
            || name === 'avgScore' && !!this.getAvgScore()
            || name === 'communicationStyles' && !!this.getCommunicationStyles().length
            || name === 'seniority' && !!this.getSeniority()
    }


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

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

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

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

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

    private setConfirmData(event: Selected) {
        if (event.option === 'communicationStyles') {
            this.filterCommunicationStyles(event);
        } else {
@@ -168,7 +167,7 @@
        }
    }

    filterCommunicationStyles(event: Selected) {
    private filterCommunicationStyles(event: Selected) {
        const confirmValue = this.confirmItem
            .filter(item => item.option === 'communicationStyles')
            .map(i => i.value);
@@ -188,33 +187,21 @@
        }
    }

    getRecommendList() {
    private getRecommendList() {
        const data: FastQueryParams = {
            gender: this.gender(),
            communicationStyles: this.communicationStyles(),
            avgScore: this.avgScore(),
            status: ''
            gender: this.getGender(),
            communicationStyles: this.getCommunicationStyles(),
            avgScore: this.getAvgScore(),
            status: '',
            seniority: this.getSeniority()
        }

        fastQuery(data).then((res) => {
            this.consultantList = res.data;
        queryConsultantService.fastQuery(data).then((consultantList) => {
            this.consultantList = consultantList;
            this.storageQuickFilter(JSON.stringify(this.confirmItem))
        })
    }

}

export interface QuestionOption {
    title: string;
    detail: Detail[];
    type: string;
    name: string;
}

interface Detail {
    value: string;
    name?: string;
    className: string;
}

</script>
@@ -273,4 +260,4 @@
        }
    }

</style>
</style>