| | |
| | | <span |
| | | class="smTxt_bold text--primary" |
| | | v-if="questionOption.name === 'communicationStyles'" |
| | | >(可複選)</span> |
| | | >(最多選擇兩種)</span> |
| | | <span |
| | | class="smTxt_bold text--primary" |
| | | v-if="questionOption.name === 'avgScore'" |
| | |
| | | :label="i.value" |
| | | :name="i.value" |
| | | :class="i.className" |
| | | @change="selectedCommunicationStyles" |
| | | ></el-checkbox> |
| | | </el-checkbox-group> |
| | | </div> |
| | |
| | | |
| | | <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 { FastQueryParams } from '~/assets/ts/models/fast-query-params.model'; |
| | | import { Selected } from '~/assets/ts/models/selected.model'; |
| | | import { QuestionOption } from '~/assets/ts/models/question-option.model'; |
| | | |
| | | @Component |
| | | export default class QuickFilterDrawer extends Vue { |
| | |
| | | @Prop() isOpenQuestionPopUp!: boolean; |
| | | @Prop() confirmItem!: Selected[]; |
| | | |
| | | @Watch('isOpenQuestionPopUp') onPopUpChange() { |
| | | @Watch('isOpenQuestionPopUp', {immediate: true}) onPopUpChange() { |
| | | this.pickedItem = { |
| | | communicationStyles: this.communicationStyles, |
| | | status: '', |
| | |
| | | || name === 'communicationStyles' && !this.pickedItem[name].length |
| | | } |
| | | |
| | | selectedCommunicationStyles() { |
| | | if (this.pickedItem.communicationStyles.length > 2) { |
| | | this.pickedItem.communicationStyles.shift(); |
| | | } |
| | | } |
| | | |
| | | @Emit('confirm') |
| | | confirm() { |
| | | const name = this.questionOption.name; |
| | |
| | | |
| | | } |
| | | |
| | | export interface Selected { |
| | | option: string; |
| | | value: any; |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | </style> |
| | | </style> |