Merge branch 'sit' into uat

wayne

2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b

 PAMapp/components/Consultant-ques.vue

@@ -2,86 +2,70 @@
    <div>
        <div class="pam-tags">
            <div class="pb-10" v-for="(qaItem,index) in questionList" :key="index">
                <el-button  class="tags" :class="{'active': qaItem.selected}"
                <el-button  class="tags" :class="{ 'active': qaItem.selected }"
                @click="selectQuestion(index)">
                {{qaItem.name}}
                {{ qaItem.name }}
                </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;
              }
            return question;
            }
          );
        }
      questionList: ConsultQuestionWithSelect[] = [];

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

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

        @Emit('change')
        selectQuestion(questionIndex: number): any[] {
            this.questionList[questionIndex].selected = !this.questionList[questionIndex].selected;
            return this.questionList;
        }
      //////////////////////////////////////////////////////////////////////

      @Emit('change')
      selectQuestion(questionIndex: number): any[] {
          this.questionList[questionIndex].selected = !this.questionList[questionIndex].selected;
          return this.questionList;
      }

    }

    interface ConsultQuestionWithSelect {
      name    : string;
      selected: boolean;
    }
</script>
<style lang="scss">
.con-input{
    input:focus,textarea:focus {
    outline: none;
    border: 1px solid #ED1B2E;
    border : 1px solid #ED1B2E;
  }
}

.other-input{
    height: 50px;
    width:316px;
    border:1px solid #CCCCCC;
    height    : 50px;
    width     : 316px;
    border    : 1px solid #CCCCCC;
    margin-top: 10px;
}

@@ -90,10 +74,10 @@
}

.qa-dialog-footer{
    display: flex;
    display        : flex;
    justify-content: center;
    font-size: 20px;
    color: red;
    font-size      : 20px;
    color          : red;
}

.el-dialog__wrapper{
@@ -101,39 +85,38 @@
}

.qa-dialog{
    overflow:hidden;
    height: 500px;
    overflow  : hidden;
    height    : 500px;
    margin-top: 20px;
}

.qaTextTitle{
    font-size: 20px;
    font-family: bold;
    display: flex;
    font-size      : 20px;
    font-family    : bold;
    display        : flex;
    justify-content: center;
    align-items: center;
    margin-top: -15px;
    align-items    : center;
    margin-top     : -15px;

}
.qa-title{
    font-size: 20px;
    font-size    : 20px;
    margin-bottom: 10px;
}
.qa-content{
    font-size: 18px;
    font-size    : 18px;
    margin-bottom: 10px;
}

@include desktop
{
  .pam-tags{
      display:flex;
      flex-wrap:wrap;

      display  : flex;
      flex-wrap: wrap;
  }
  .tags{
      margin-right: 10px;
      height: 47px;
      height      : 47px;
  }
}
</style>