From bdae23a40c461c2c6b6ee614f661eac731c949c8 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期三, 22 十二月 2021 14:12:05 +0800
Subject: [PATCH] Merge branch 'master' of https://192.168.0.10:8443/r/pcalife/PAM
---
PAMapp/pages/quickFilter/index.vue | 264 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 262 insertions(+), 2 deletions(-)
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index 24a38fa..6e6444e 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -1,3 +1,263 @@
<template>
- <div>quickFilter-敹恍�祟�</div>
-</template>
\ No newline at end of file
+ <div>
+ <div class="quickBtnBlock">
+ <el-button
+ v-for="(question, index) in questionList"
+ :key="index"
+ class="subTitle quickBtn"
+ :class="{'isActive': isActive(question.name)}"
+ @click="openPopUp(question)"
+ >{{question.title}}</el-button>
+ </div>
+ <h5 class="mdTxt mb-10 mt-30">蝭拚璇辣</h5>
+ <div>
+ <template v-if="confirmItem.length > 0">
+ <UiTags
+ v-for="(item, index) in confirmItem" :key="index"
+ @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>
+ </UiTags>
+ </template>
+ <div
+ v-else
+ class="emptyBox text--mid_grey"
+ >
+ <p class="smTxt">撠蝭拚</p>
+ </div>
+ </div>
+
+ <div class="mb-10 mt-30">
+ <span class="mdTxt">敹恍�祟���</span>
+ <span class="smTxt_bold text--prudential_grey ml-10">� {{consultantList.length}} 蝑�</span>
+ </div>
+ <div class="recommend pam-paragraph">
+ <img class="img" src="~/assets/images/quickFilter/recommend.svg" alt="">
+
+ <template v-if="consultantList.length > 0">
+ <QuickFilterConsultantList :consultantList="consultantList"></QuickFilterConsultantList>
+ </template>
+
+ <template v-else>
+ <div class="emptyBox text--mid_grey recommendStyle">
+ <p class="smTxt">撠��鞈��</p>
+ </div>
+ </template>
+ </div>
+
+ <PopUpFrame
+ :isOpen.sync="isOpenQuestionPopUp"
+ :dialogWidth="'400px'"
+ class="pam-myDemand-dialog"
+ >
+ <QuickFilterSelector
+ ref="quickFilterRef"
+ :isOpenQuestionPopUp="isOpenQuestionPopUp"
+ :questionOption="questionOption"
+ @confirm="confirm"
+ :confirmItem="confirmItem"
+ ></QuickFilterSelector>
+ </PopUpFrame>
+ </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, namespace } from 'nuxt-property-decorator';
+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({
+ 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[];
+
+ isOpenQuestionPopUp = false;
+ consultantList: Consultant[] = [];
+ questionOption = {};
+ confirmItem: Selected[] = [];
+ questionList = questionList;
+
+ //////////////// lifecycle ////////////////
+ mounted() {
+ if (this.quickFilterSelectedData && this.quickFilterSelectedData.length > 0) {
+ this.confirmItem = this.quickFilterSelectedData;
+ this.getRecommendList();
+ }
+ }
+
+
+ //////////////////////////////////////////
+ openPopUp(question: QuestionOption) {
+ this.questionOption = question;
+ this.isOpenQuestionPopUp =true;
+ }
+
+ removeTag(value: string) {
+ this.confirmItem = this.confirmItem.filter(item => item.value !== value);
+ this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
+ }
+
+ confirm(event: Selected) {
+ this.setConfirmData(event);
+ this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
+ this.isOpenQuestionPopUp = false;
+ }
+
+ 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 {
+ const findIndex = this.confirmItem.findIndex(item => item.option === event.option);
+ findIndex === -1 ? this.confirmItem.push(event) : this.confirmItem[findIndex] = event;
+ }
+ }
+
+ private filterCommunicationStyles(event: Selected) {
+ const confirmValue = this.confirmItem
+ .filter(item => item.option === 'communicationStyles')
+ .map(i => i.value);
+ const pickerValue = event.value;
+
+ this.confirmItem = this.confirmItem
+ .filter(item => pickerValue.includes(item.value) || item.option !== 'communicationStyles');
+
+ const addValue = pickerValue.filter(item => !confirmValue.includes(item)).map(i => {
+ return {
+ option: 'communicationStyles',
+ value: i
+ }
+ })
+ if (addValue.length > 0) {
+ this.confirmItem.push(...addValue);
+ }
+ }
+
+ private getRecommendList() {
+ const data: FastQueryParams = {
+ gender: this.getGender(),
+ communicationStyles: this.getCommunicationStyles(),
+ avgScore: this.getAvgScore(),
+ status: '',
+ seniority: this.getSeniority()
+ }
+
+ queryConsultantService.fastQuery(data).then((consultantList) => {
+ this.consultantList = consultantList;
+ this.storageQuickFilter(JSON.stringify(this.confirmItem))
+ })
+ }
+
+}
+
+</script>
+
+<style lang="scss" scoped>
+ .emptyBox {
+ width: 100%;
+ height: 100px;
+ border: solid 1px $LIGHT_GREY;
+ text-align: center;
+ border-radius: 10px;
+
+ .smTxt {
+ line-height: 100px;
+ }
+ }
+
+ .recommendStyle {
+ box-shadow: 0 0 6px #00000029;
+ background-color: $PRIMARY_WHITE;
+ }
+
+ .quickBtnBlock {
+ display: flex;
+ width: 100%;
+ height: 132px;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .quickBtn {
+ width: 48%;
+ height: 56px;
+ text-align: center;
+ box-shadow: 0 0 6px #22222229;
+ border-radius: 10px;
+ border-color: $CORAL;
+
+ &.isActive {
+ background-color: $CORAL;
+ color: $PRIMARY_WHITE;
+ }
+ }
+ .quickBtn+.quickBtn {
+ margin-left: 0;
+ }
+
+ }
+
+ .recommend {
+ position: relative;
+
+ .img {
+ position: absolute;
+ top: -50px;
+ right: 10px;
+ }
+ }
+
+</style>
--
Gitblit v1.8.0