From 921e56017c29cf97c0ffe90c879243d5fd79a19b Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期一, 06 十二月 2021 14:00:42 +0800
Subject: [PATCH] fixed TODO#131490 [預約清單] 資料排序
---
PAMapp/components/Consultant-ques.vue | 118 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 68 insertions(+), 50 deletions(-)
diff --git a/PAMapp/components/Consultant-ques.vue b/PAMapp/components/Consultant-ques.vue
index f676555..6c3c6c0 100644
--- a/PAMapp/components/Consultant-ques.vue
+++ b/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="隢撓�,��摮�" 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>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0