From 6cfa3cb358433b250055802960aba8a7f7e9434d Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期四, 18 九月 2025 17:05:58 +0800
Subject: [PATCH] 机构管理维护
---
src/components/SortCheckbox/index.vue | 165 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 165 insertions(+), 0 deletions(-)
diff --git a/src/components/SortCheckbox/index.vue b/src/components/SortCheckbox/index.vue
new file mode 100644
index 0000000..1a93e31
--- /dev/null
+++ b/src/components/SortCheckbox/index.vue
@@ -0,0 +1,165 @@
+<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>
--
Gitblit v1.9.3