From c20a0f1a1dbaa23d1b073f9a9377cac5d572f277 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 23 十二月 2021 15:10:18 +0800
Subject: [PATCH] fixed TODO#131357 進行預約: 職業選擇畫面調整
---
PAMapp/components/QuickFilter/QuickFilterSelector.vue | 108 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 76 insertions(+), 32 deletions(-)
diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
index 8797fc0..f29930c 100644
--- a/PAMapp/components/QuickFilter/QuickFilterSelector.vue
+++ b/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,7 +67,7 @@
>{{i.name}}</el-radio>
</el-radio-group>
</div>
-
+ <!-------------------- 皛踵�漲 -------------------->
<div v-else>
<el-rate
v-if="!hideReviews"
@@ -67,14 +91,15 @@
<script lang="ts">
import { Vue, Component, Prop, Watch, Emit } from 'nuxt-property-decorator';
import { hideReviews } from '~/shared/const/hide-reviews';
-import { FastQueryParams, QuestionOption, Selected } from '~/shared/models/quickFilter.model';
+import { FastQueryParams, QuestionOption, Selected } from '~/shared/models/quick-filter.model';
@Component
export default class QuickFilterDrawer extends Vue {
pickedItem: FastQueryParams = {
communicationStyles: [],
status: '',
gender: '',
- avgScore: 0
+ avgScore: 0,
+ seniority: ''
}
hideReviews = hideReviews ;
@@ -82,36 +107,34 @@
@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,13 +143,30 @@
}
}
- @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');
+ }
+
+ 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>
@@ -136,7 +176,11 @@
.quickBtnBlock {
display: flex;
justify-content: space-between;
- align-content: space-between;
+ flex-wrap: wrap;
+ }
+
+ .pam-radio-group {
+ height: 240px;
flex-wrap: wrap;
}
--
Gitblit v1.8.0