From b4d6944076f1df6eedaae35c4c2a7072fe988e8a Mon Sep 17 00:00:00 2001 From: Tomas <tomasysh@gmail.com> Date: 星期二, 30 四月 2024 15:34:02 +0800 Subject: [PATCH] update: package-lock.json --- PAMapp/components/QuickFilter/QuickFilterSelector.vue | 133 +++++++++++++++++++++++++++++--------------- 1 files changed, 88 insertions(+), 45 deletions(-) diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue index 558e338..5baa545 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,11 +67,11 @@ >{{i.name}}</el-radio> </el-radio-group> </div> - - <div v-else> + <!-------------------- 皛踵�漲 --------------------> + <div v-else> <el-rate v-if="!hideReviews" - class="pam-quickFilter-rate" + class="pam-rate mt-30" v-model="pickedItem.avgScore" ></el-rate> </div> @@ -66,55 +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 '~/assets/ts/const/hide-reviews'; +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() { @@ -123,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> @@ -145,8 +184,12 @@ .quickBtnBlock { display: flex; justify-content: space-between; - align-content: space-between; flex-wrap: wrap; } -</style> \ No newline at end of file + .pam-radio-group { + height: 240px; + flex-wrap: wrap; + } + +</style> -- Gitblit v1.8.0