<template>
|
<div class="ordered-checkbox-container">
|
<!-- 横向排列的多选框组 -->
|
<el-checkbox-group
|
v-model="checkedValues"
|
class="horizontal-checkbox-group"
|
>
|
<el-checkbox
|
v-for="option in options"
|
:key="getValue(option)"
|
:label="getValue(option)"
|
>
|
{{ getLabel(option) }}
|
</el-checkbox>
|
</el-checkbox-group>
|
|
<!-- 选中顺序展示区域 -->
|
<div v-if="selectedOrder.length > 0" class="selection-order-display">
|
<span class="order-label">服务执行顺序：</span>
|
<span
|
v-for="(value, index) in selectedOrder"
|
:key="value"
|
class="order-item"
|
>
|
{{ getSelectedIndex(index) }}.{{ getLabelByValue(value) }}
|
<span v-if="index < selectedOrder.length - 1">、</span>
|
</span>
|
</div>
|
<div v-else class="selection-order-display">
|
<span class="order-label">暂无选中项</span>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "OrderedCheckboxGroup",
|
props: {
|
options: {
|
type: Array,
|
default: () => [],
|
},
|
value: {
|
type: Array,
|
default: () => [],
|
},
|
valueKey: {
|
type: String,
|
default: "value",
|
},
|
labelKey: {
|
type: String,
|
default: "label",
|
},
|
},
|
data() {
|
return {
|
checkedValues: [],
|
selectedOrder: [],
|
};
|
},
|
watch: {
|
value: {
|
immediate: true,
|
handler(newVal) {
|
if (JSON.stringify(newVal) !== JSON.stringify(this.checkedValues)) {
|
this.checkedValues = [...newVal];
|
this.selectedOrder = [...newVal];
|
}
|
},
|
},
|
checkedValues(newVal, oldVal) {
|
const added = newVal.filter((item) => !oldVal.includes(item));
|
const removed = oldVal.filter((item) => !newVal.includes(item));
|
|
added.forEach((value) => {
|
if (!this.selectedOrder.includes(value)) {
|
this.selectedOrder.push(value);
|
}
|
});
|
|
removed.forEach((value) => {
|
const index = this.selectedOrder.indexOf(value);
|
if (index > -1) {
|
this.selectedOrder.splice(index, 1);
|
}
|
});
|
|
this.$emit("input", [...newVal]);
|
this.$emit("change", [...newVal], [...this.selectedOrder]);
|
},
|
},
|
methods: {
|
getValue(option) {
|
return typeof option === "object" ? option[this.valueKey] : option;
|
},
|
getLabel(option) {
|
return typeof option === "object" ? option[this.labelKey] : option;
|
},
|
getLabelByValue(value) {
|
const option = this.options.find(
|
(opt) => this.getValue(opt) === value
|
);
|
return option ? this.getLabel(option) : value;
|
},
|
getSelectedIndex(index) {
|
if (index < 20) {
|
return String.fromCharCode(0x2460 + index);
|
} else {
|
return `(${index + 1})`;
|
}
|
},
|
getSelectionOrder() {
|
return [...this.selectedOrder];
|
},
|
setSelectionOrder(orderedValues) {
|
this.selectedOrder = [...orderedValues];
|
this.checkedValues = [...orderedValues];
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.ordered-checkbox-container {
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
}
|
|
.horizontal-checkbox-group {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20px;
|
}
|
|
.selection-order-display {
|
padding: 12px;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
border: 1px solid #ebeef5;
|
}
|
|
.order-label {
|
font-weight: bold;
|
color: #606266;
|
margin-right: 8px;
|
}
|
|
.order-item {
|
color: #409eff;
|
font-weight: 500;
|
}
|
|
/* 响应式设计：小屏幕时换行 */
|
@media (max-width: 768px) {
|
.horizontal-checkbox-group {
|
gap: 12px;
|
}
|
|
.selection-order-display {
|
padding: 8px;
|
}
|
}
|
</style>
|
