refactor: pages component - separate vue files

Tomas

2021-12-08 b6661a090e8bcf8f45be24a01b6a7bb08e3aaff1

 PAMapp/components/Consultant-ques.vue

@@ -2,75 +2,93 @@
    <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}"      
                @click="qaItem.selected = !qaItem.selected">                    
                <el-button  class="tags" :class="{'active': qaItem.selected}"
                @click="selectQuestion(index)">
                {{qaItem.name}}
                </el-button>              
            </div>    
            <el-button class="tags" @click="other = !other" :class="{'active':other=other}">其他</el-button>
        </div>
        <div class="pb-10 pam-tags con-input"> 
            <input v-if="other" class="other-input" placeholder="請輸入,限X字" v-model="otherQuestion">      
                </el-button>
            </div>
        </div>

    </div>
</template>
<script>
import { Vue, Component} from 'vue-property-decorator';

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

@Component
    export default class ConsultantQues extends Vue{

        showDialog = false;
        other = '';
        otherQuestion = '';
        questionList=[
            {
                name:'健康與保障',
                selected:false
                },
            {
                name:'子女教育',
                selected:false
                },
            {
                name:'資產規劃',
                selected:false
                },
            {
                name:'樂活退休',
                selected:false
                },
            {
                name:'保單健檢/規劃',
                selected:false
                },
            {
                name:'防疫保單相關',
                selected:false
                }       

        @Prop({ default: () => []}) selectedQuestions!: 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;
            }
          );
        }

        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[] {
            this.questionList[questionIndex].selected = !this.questionList[questionIndex].selected;
            return this.questionList;
        }

    }
</script>
<style lang="scss">
.con-input{
    input:focus,textarea:focus {

    outline: none;

    border: 1px solid #ED1B2E;
  }
}

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

.tags{
    height: 47px;
}

.qa-dialog-footer{
    display: flex;
    justify-content: center;
@@ -108,14 +126,14 @@

@include desktop
{
    .pam-tags{
        display:flex;
        flex-wrap:wrap;
        
    }
    .tags{
        margin-right: 10px;
        height: 47px;
    }
  .pam-tags{
      display:flex;
      flex-wrap:wrap;

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