From d0ec9165edd35e56fbed20eccee9143e835163f3 Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期三, 24 九月 2025 16:18:20 +0800
Subject: [PATCH] 测试完成
---
src/components/SortCheckbox/index.vue | 138 ++++++++++++++++++++++++++++++++++++++++------
1 files changed, 120 insertions(+), 18 deletions(-)
diff --git a/src/components/SortCheckbox/index.vue b/src/components/SortCheckbox/index.vue
index 1a93e31..19f8c9a 100644
--- a/src/components/SortCheckbox/index.vue
+++ b/src/components/SortCheckbox/index.vue
@@ -18,11 +18,22 @@
<div v-if="selectedOrder.length > 0" class="selection-order-display">
<span class="order-label">鏈嶅姟鎵ц椤哄簭锛�</span>
<span
- v-for="(value, index) in selectedOrder"
- :key="value"
+ v-for="(item, index) in selectedOrder"
+ :key="item.value"
class="order-item"
>
- {{ getSelectedIndex(index) }}.{{ getLabelByValue(value) }}
+ {{ getSelectedIndex(index) }}.{{ getLabelByValue(item.value) }}
+ <el-tooltip content="璁剧疆琛ュ伩鏃堕棿" placement="top">
+ <el-input-number
+ v-model="item.compensateTime"
+ :min="0"
+ :max="60"
+ size="mini"
+ controls-position="right"
+ class="compensate-time-input"
+ @change="handleCompensateTimeChange(item.value, $event)"
+ />
+ </el-tooltip>
<span v-if="index < selectedOrder.length - 1">銆�</span>
</span>
</div>
@@ -52,42 +63,88 @@
type: String,
default: "label",
},
+ // 鏂板锛氶粯璁よˉ鍋挎椂闂�
+ defaultCompensateTime: {
+ type: Number,
+ default: 0,
+ },
},
data() {
return {
checkedValues: [],
- selectedOrder: [],
+ selectedOrder: [], // 鐜板湪鏍煎紡涓� [{value, compensateTime}]
};
},
watch: {
value: {
immediate: true,
handler(newVal) {
- if (JSON.stringify(newVal) !== JSON.stringify(this.checkedValues)) {
- this.checkedValues = [...newVal];
- this.selectedOrder = [...newVal];
+ if (
+ Array.isArray(newVal) &&
+ newVal.length > 0 &&
+ typeof newVal[0] === "object"
+ ) {
+ // 1. 浼犲叆鐨勬槸瀵硅薄鏁扮粍 [{ sort, preachform, compensateTime }]
+ this.checkedValues = newVal.map((item) => item.preachform); // 鎻愬彇 preachform 缁勬垚閫変腑鍊兼暟缁�
+ // 鏋勫缓 selectedOrder锛屼紭鍏堜娇鐢ㄤ紶鍏ョ殑 compensateTime锛屽惁鍒欑敤榛樿鍊�
+ this.selectedOrder = newVal.map((item) => ({
+ value: item.preachform,
+ compensateTime: item.hasOwnProperty("compensateTime")
+ ? item.compensateTime
+ : this.defaultCompensateTime,
+ }));
+ } else {
+ // 2. 浼犲叆鐨勬槸瀛楃涓叉暟缁� (濡� ["1", "3", "4"]锛屽吋瀹逛箣鍓嶇殑鐢ㄦ硶)
+ if (JSON.stringify(newVal) !== JSON.stringify(this.checkedValues)) {
+ this.checkedValues = [...newVal];
+ // 鏋勫缓鎴栨洿鏂� selectedOrder锛屼繚鐣欏凡鏈夌殑 compensateTime
+ const newOrder = [];
+ newVal.forEach((value) => {
+ const existingItem = this.selectedOrder.find(
+ (item) => item.value === value
+ );
+ if (existingItem) {
+ newOrder.push(existingItem);
+ } else {
+ newOrder.push({
+ value,
+ compensateTime: this.defaultCompensateTime,
+ });
+ }
+ });
+ this.selectedOrder = newOrder;
+ }
}
},
+ deep: true // 寤鸿娣诲姞 deep: true 浠ョ‘淇濆璞℃暟缁勫唴鐨勫彉鍖栬兘琚崟鑾�
},
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);
+ if (!this.selectedOrder.find((item) => item.value === value)) {
+ this.selectedOrder.push({
+ value,
+ compensateTime: this.defaultCompensateTime,
+ });
}
});
removed.forEach((value) => {
- const index = this.selectedOrder.indexOf(value);
+ const index = this.selectedOrder.findIndex(
+ (item) => item.value === value
+ );
if (index > -1) {
this.selectedOrder.splice(index, 1);
}
});
+ // 鏇存柊鐖剁粍浠剁殑 v-model 缁戝畾鍊硷紙閫変腑鍊兼暟缁勶級
this.$emit("input", [...newVal]);
- this.$emit("change", [...newVal], [...this.selectedOrder]);
+ // 瑙﹀彂 change 浜嬩欢锛屼紶閫掑畬鏁寸殑涓氬姟鏁版嵁
+ this.emitChangeEvent();
},
},
methods: {
@@ -98,9 +155,7 @@
return typeof option === "object" ? option[this.labelKey] : option;
},
getLabelByValue(value) {
- const option = this.options.find(
- (opt) => this.getValue(opt) === value
- );
+ const option = this.options.find((opt) => this.getValue(opt) === value);
return option ? this.getLabel(option) : value;
},
getSelectedIndex(index) {
@@ -110,12 +165,42 @@
return `(${index + 1})`;
}
},
- getSelectionOrder() {
- return [...this.selectedOrder];
+ // 澶勭悊琛ュ伩鏃堕棿鍙樺寲
+ handleCompensateTimeChange(value, newTime) {
+ const item = this.selectedOrder.find((item) => item.value === value);
+ if (item) {
+ item.compensateTime = newTime;
+ // 琛ュ伩鏃堕棿鍙樺寲鏃讹紝鍙Е鍙� change 浜嬩欢锛屼笉瑙﹀姩 v-model
+ this.emitChangeEvent();
+ }
},
+ // 鍙戝皠鍙樺寲浜嬩欢
+ emitChangeEvent() {
+ // 杞崲鏁版嵁鏍煎紡涓虹埗缁勪欢闇�瑕佺殑鏍煎紡
+ const outputData = this.selectedOrder.map((item, index) => ({
+ sort: index + 1,
+ preachform: item.value,
+ compensateTime: item.compensateTime,
+ }));
+ this.$emit("change", outputData); // 鍙戝皠 change 浜嬩欢锛屼紶閫掑畬鏁存暟鎹�
+ },
+ // 鑾峰彇褰撳墠閫夋嫨椤哄簭鍜岃ˉ鍋挎椂闂�
+ getSelectionOrder() {
+ return this.selectedOrder.map((item, index) => ({
+ sort: index + 1,
+ preachform: item.value,
+ compensateTime: item.compensateTime,
+ }));
+ },
+ // 璁剧疆閫夋嫨椤哄簭鍜岃ˉ鍋挎椂闂�
setSelectionOrder(orderedValues) {
- this.selectedOrder = [...orderedValues];
- this.checkedValues = [...orderedValues];
+ this.selectedOrder = orderedValues.map((item) => ({
+ value: item.preachform,
+ compensateTime: item.compensateTime || this.defaultCompensateTime,
+ }));
+
+ this.checkedValues = orderedValues.map((item) => item.preachform);
+ this.emitChangeEvent();
},
},
};
@@ -139,6 +224,9 @@
background-color: #f5f7fa;
border-radius: 4px;
border: 1px solid #ebeef5;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
}
.order-label {
@@ -150,6 +238,14 @@
.order-item {
color: #409eff;
font-weight: 500;
+ display: inline-flex;
+ align-items: center;
+ margin-right: 8px;
+}
+
+.compensate-time-input {
+ width: 90px;
+ margin-left: 8px;
}
/* 鍝嶅簲寮忚璁★細灏忓睆骞曟椂鎹㈣ */
@@ -160,6 +256,12 @@
.selection-order-display {
padding: 8px;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .order-item {
+ margin-bottom: 8px;
}
}
</style>
--
Gitblit v1.9.3