refactor component: Consultant-ques

Tomas

2021-12-28 79608db66534dfba631c8130915df2b33021e9c5

refactor component: Consultant-ques

 PAMapp/components/Consultant-ques.vue

@@ -8,59 +8,38 @@
                </el-button>
            </div>
        </div>

    </div>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop} from 'vue-property-decorator';

import { consultantQuestions } from '~/shared/const/consult-questions';

@Component
    export default class ConsultantQues extends Vue{

        showDialog = false;
        other = '';
        otherQuestion = '';
      @Prop({ default: () => []})
      selectedQuestions!: string[];

        @Prop({ default: () => []}) selectedQuestions!: string[];
      other         : string = '';
      otherQuestion : string = '';

        get questionList(): any[] {
          return this.defaultQuestionList.map((question) => {
            const isSeleted = (quesName: string): boolean => this.selectedQuestions.some((question) => question === quesName);
            if (isSeleted(question.name)) {
                question.selected = true;
      questionList: ConsultQuestionWithSelect[] = [];

      //////////////////////////////////////////////////////////////////////

      mounted() {
        const isSelected = (quesName: string): boolean => this.selectedQuestions.some((question) => question === quesName);
        this.questionList = consultantQuestions.map((consultQuestion) => {
          return {
            name: consultQuestion,
            selected: isSelected(consultQuestion)
              }
            return question;
            }
          );
        })
        }

        defaultQuestionList = [
          {
            name:'健康與保障',
            selected:false
          },
          {
            name:'子女教育',
            selected:false
          },
          {
            name:'資產規劃',
            selected:false
          },
          {
            name:'樂活退休',
            selected:false
          },
          {
            name:'保單健檢/規劃',
            selected:false
          },
          {
            name:'分紅保單',
            selected:false
          }
        ];
      //////////////////////////////////////////////////////////////////////

        @Emit('change')
        selectQuestion(questionIndex: number): any[] {
@@ -68,6 +47,11 @@
            return this.questionList;
        }

    }

    interface ConsultQuestionWithSelect {
      name    : string;
      selected: boolean;
    }
</script>
<style lang="scss">
@@ -129,7 +113,6 @@
  .pam-tags{
      display:flex;
      flex-wrap:wrap;

  }
  .tags{
      margin-right: 10px;

 PAMapp/shared/const/consult-questions.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1 @@
export const consultantQuestions = ['健康與保障', '子女教育', '資產規劃', '樂活退休', '保單健檢/規劃', '分紅保單'];