File was renamed from PAMapp/components/QuickFilter/QuickFilterDrawer.vue |
| | |
| | | <template> |
| | | <Ui-Drawer |
| | | :isVisible.sync="isVisible" |
| | | :size="questionOption.name === 'style' ? '50%' : '30%'" |
| | | @close="closeDrawer" |
| | | > |
| | | <div> |
| | | <div class="mb-10" v-if="questionOption.title !== '顧問性別'"> |
| | | <span class="mdTxt">{{questionOption.title === '顧問滿意度' ? '保險顧問滿意度' : questionOption.title}}</span> |
| | | <span class="mdTxt" |
| | | >{{questionOption.title === '顧問滿意度' ? '保險顧問滿意度' : questionOption.title}} |
| | | </span> |
| | | <span |
| | | class="smTxt_bold text--primary" |
| | | v-if="questionOption.name === 'style'" |
| | |
| | | </div> |
| | | |
| | | <div class="quickBtnBlock" v-if="questionOption.name === 'style'"> |
| | | <el-checkbox-group class="pam-quickFilter-checkbox" v-model="style"> |
| | | <el-checkbox-group class="pam-quickFilter-checkbox" v-model="pickedItem.style"> |
| | | <el-checkbox |
| | | v-for="(i, index) in questionOption.detail" |
| | | :key="index" |
| | |
| | | </div> |
| | | |
| | | <div class="quickBtnBlock" v-else-if="questionOption.name === 'gender'"> |
| | | <el-radio-group class="pam-quickFilter-radio" v-model="gender"> |
| | | <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.gender"> |
| | | <el-radio |
| | | v-for="(i, index) in questionOption.detail" |
| | | :key="index" |
| | |
| | | </div> |
| | | |
| | | <div class="quickBtnBlock" v-else-if="questionOption.name === 'loginState'"> |
| | | <el-radio-group class="pam-quickFilter-radio" v-model="loginState"> |
| | | <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.loginState"> |
| | | <el-radio |
| | | v-for="(i, index) in QuestionOption.detail" |
| | | :key="index" |
| | |
| | | </div> |
| | | |
| | | <div v-else> |
| | | <el-rate class="pam-quickFilter-rate" v-model="satisfaction"></el-rate> |
| | | <el-rate class="pam-quickFilter-rate" v-model="pickedItem.satisfaction"></el-rate> |
| | | </div> |
| | | </Ui-Drawer> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | |
| | | |
| | | @Component |
| | | export default class QuickFilterDrawer extends Vue { |
| | | style: string[] = []; |
| | | loginState: string = ''; |
| | | gender: string = ''; |
| | | satisfaction: number = 0; |
| | | |
| | | pickedItem: selectedItem = { |
| | | style: [], |
| | | onlineState: '', |
| | | gender: '', |
| | | satisfaction: 0 |
| | | } |
| | | |
| | | @PropSync('drawerVisible') isVisible!: boolean; |
| | | @Prop() selectedItem!: selectedItem; |
| | | @Prop() questionOption!: QuestionOption; |
| | | |
| | | @Emit('selected') emitSelected() { |
| | | return ({ |
| | | name: this.questionOption.name, |
| | | gender: this.gender, |
| | | style: this.style, |
| | | satisfaction: this.satisfaction, |
| | | loginState: this.loginState |
| | | }); |
| | | } |
| | | |
| | | closeDrawer() { |
| | | this.emitSelected() |
| | | } |
| | | |
| | | @Watch('selectedItem', {deep: true, immediate: true}) watchSelected(newValue: selectedItem) { |
| | | if (newValue) { |
| | | this.gender = newValue.gender; |
| | | this.style = newValue.style; |
| | | this.satisfaction = newValue.satisfaction; |
| | | this.pickedItem = JSON.parse(JSON.stringify(this.selectedItem)) |
| | | } |
| | | } |
| | | } |