保誠-保戶業務員媒合平台
HelenHuang
2021-11-05 cf6803cd4f2c535afb1eaa935fd9e9735279656b
PAMapp/components/QuickFilter/QuickFilterSelector.vue
File was renamed from PAMapp/components/QuickFilter/QuickFilterDrawer.vue
@@ -1,11 +1,9 @@
<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'"
@@ -17,7 +15,7 @@
        </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"
@@ -28,7 +26,7 @@
        </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"
@@ -37,7 +35,7 @@
        </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"
@@ -46,9 +44,9 @@
        </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">
@@ -57,34 +55,21 @@
@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))
        }
    }
}