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