wuweihua
79 lines
1.6 KiB
Vue
79 lines
1.6 KiB
Vue
<template>
|
|
<div class="sc-count">
|
|
<el-popover
|
|
v-if="list.length"
|
|
placement="top"
|
|
:width="380"
|
|
trigger="hover"
|
|
:hide-after="120"
|
|
>
|
|
<template #default>
|
|
<div class="sc-count__pop-title">已纳入 {{ list.length }} 项附加费</div>
|
|
<div class="sc-count__tags">
|
|
<el-tag
|
|
v-for="s in list"
|
|
:key="s.relId || s.scId || s.scName"
|
|
size="small"
|
|
type="danger"
|
|
effect="plain"
|
|
closable
|
|
@click.stop
|
|
@close="onRemove(s)"
|
|
>{{ surchargeTagLabel(s) }}</el-tag>
|
|
</div>
|
|
</template>
|
|
<template #reference>
|
|
<span class="sc-count__text">{{ list.length }} 项</span>
|
|
</template>
|
|
</el-popover>
|
|
<span v-else class="sc-count__text is-empty">0</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="SurchargeCountCell">
|
|
/**
|
|
* Hover shows included surcharges; closable tag removes one item from the row.
|
|
*/
|
|
import { surchargeTagLabel } from '../../utils/priceSet'
|
|
|
|
defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['remove'])
|
|
|
|
function onRemove(s) {
|
|
emit('remove', s)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sc-count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.sc-count__text {
|
|
color: var(--el-color-primary);
|
|
cursor: default;
|
|
font-size: 13px;
|
|
}
|
|
.sc-count__text.is-empty {
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
.sc-count__pop-title {
|
|
margin-bottom: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #606266;
|
|
}
|
|
.sc-count__tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
</style>
|