supervision-vue/src/components/query-select-row.vue

<template>
    <div class="query-select flex" :multiple="multiple">
        <label
            class="text-center query-select-label"
            :style="{ width: `${labelWidth}px` }"
            >{{ label }}</label
        >
        <div
            class="query-select-body"
            :style="{ width: `calc(100% - ${labelWidth}px)` }"
        >
            <div class="flex gap">
                <div class="query-select-content">
                    <el-checkbox-group v-model="checkList" class="flex wrap">
                        <template v-if="multiple">
                            <el-checkbox
                                size="small"
                                v-for="item in data"
                                :key="item.value"
                                :label="item.value"
                            >
                                <span class="text-primary mr-8">{{
                                    item.text
                                }}</span>
                                <span class="total">{{ item.total }}</span>
                            </el-checkbox>
                        </template>
                        <template v-else>
                            <div
                                class="flex v-center gap query-select-item pointer"
                                v-for="item in more? data : data.slice(0, 10)"
                                :key="item.value"
                                @click="check(item.value)"
                            >
                                <span class="text-primary">{{
                                    item.text
                                }}</span>
                                <span class="total">{{ item.total }}</span>
                            </div>
                        </template>
                    </el-checkbox-group>
                </div>
                <div class="flex end query-select-tools">
                    <el-button
                        size="small"
                        v-if="data.length > 13 && !multiple"
                        @click="more = !more"
                        class="more-btn"
                        :more="more"
                        >{{ more? '收起' : '更多' }}<icon name="el-icon-ArrowDown" class="ml-4" /></el-button>
                    <el-button
                        size="small"
                        @click="multiple = true"
                        v-if="!multiple"
                        ><icon
                            name="el-icon-plus"
                            class="mr-4"
                        />多选</el-button
                    >
                </div>
            </div>
            <div v-if="multiple" class="flex center">
                <el-button type="primary" size="small" @click="submit">确定</el-button>
                <el-button size="small" @click="multiple = false"
                    >取消</el-button
                >
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    label: {
        type: String,
        default: "",
    },
    labelWidth: {
        type: Number,
        default: 126,
    },
    data: {
        type: Array,
        default: [],
    },
    modelValue: {
        type: Array,
        default: [],
    },
});
const emit = defineEmits(["update:modelValue", "update"]);

const more = ref(false);
const multiple = ref(false);
watch(multiple, (val) => {
    more.value = val;
});
const checkList = ref([]);
function check(val) {
    if (!multiple.value) {
        emit("update:modelValue", [val]);
        emit("update");
    }
    const index = checkList.value.indexOf(val);
    if (index === -1) {
        checkList.value.push(val);
    } else {
        checkList.value.slice(index, 1);
    }
}

function submit() {
    emit("update:modelValue", checkList.value);
    emit("update");
    multiple.value = false
}
</script>
<style lang="scss" scoped>
.query-select {
    box-shadow: inset 0px -1px 0px 0px #ebebeb;
    &[multiple="true"] {
        border: 1px solid #19257d;
        .query-select-label {
            background: #e8ebfd;
        }
    }
    .query-select-label {
        padding: 8px 0;
    }
}
.query-select-body {
    padding: 8px 0;
    .query-select-tools {
        width: 140px;
    }
    .el-button + .el-button {
        margin-left: 8px;
    }
}
.query-select-content {
    width: calc(100% - 130px);
    .el-checkbox-group {
        font-size: inherit;
        line-height: inherit;
        padding: 0 20px;
        gap: 8px 20px;
        .el-checkbox {
            margin-right: 0;
        }
    }
    .text-primary {
        font-size: 14px;
    }
    .total {
        font-size: 12px;
        color: #666;
    }
}
.query-select-item {
    &:hover {
        .text-primary {
            font-weight: 700;
        }
    }
    
}
.more-btn {
    .el-icon {
        transition: .6s;
    }
    &[more=true] {
        .el-icon {
            transform: rotate(180deg);
        }
    }
}
</style>