wxc
1 year ago
16 changed files with 745 additions and 562 deletions
@ -1,176 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -0,0 +1,86 @@ |
|||||||
|
<template> |
||||||
|
<div class="query-row flex v-center"> |
||||||
|
<label class="text-center">{{ label }}</label> |
||||||
|
<div class="flex gap query-check wrap"> |
||||||
|
<span v-for="item in data" :key="item" class="text-primary" @click="handleCheck(item.value)" :check="values.indexOf(item.value) > -1">{{ |
||||||
|
item.label |
||||||
|
}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
label: { |
||||||
|
type: String |
||||||
|
}, |
||||||
|
data: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
}, |
||||||
|
modelValue: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'change']) |
||||||
|
|
||||||
|
const values = ref(props.modelValue || []) |
||||||
|
|
||||||
|
watch(() => props.modelValue, (val) => { |
||||||
|
if (!val || val.length === 0) { |
||||||
|
values.value = [] |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
function handleCheck(val) { |
||||||
|
const index = values.value.indexOf(val); |
||||||
|
if (index === -1) { |
||||||
|
if (event.ctrlKey) { |
||||||
|
values.value.push(val) |
||||||
|
} else { |
||||||
|
values.value = [] |
||||||
|
values.value.push(val) |
||||||
|
} |
||||||
|
} else { |
||||||
|
values.value.splice(index, 1) |
||||||
|
|
||||||
|
} |
||||||
|
emit('update:modelValue', values.value) |
||||||
|
emit('change') |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.query-row { |
||||||
|
padding: 8px 0; |
||||||
|
box-shadow: inset 0px -1px 0px 0px #ebebeb; |
||||||
|
label { |
||||||
|
width: 126px; |
||||||
|
line-height: 24px; |
||||||
|
& + * { |
||||||
|
width: calc(100% - 126px); |
||||||
|
} |
||||||
|
} |
||||||
|
.el-form-item { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.query-check { |
||||||
|
gap: 4px; |
||||||
|
span { |
||||||
|
padding: 2px 4px; |
||||||
|
border: 1px solid transparent; |
||||||
|
border-radius: 4px; |
||||||
|
&:hover, &[check=true] { |
||||||
|
cursor: pointer; |
||||||
|
background-color: #e8e9f3; |
||||||
|
} |
||||||
|
&[check=true] { |
||||||
|
border-color: var(--primary-color); |
||||||
|
background-color: #e8e9f3; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue