WXL (wul)
2 天以前 e0909a604449641ebcc6ed15495e6f28515f437c
src/components/SortCheckbox/index.vue
@@ -48,17 +48,28 @@
  name: "OrderedCheckboxGroup",
  props: {
    options: {
      type: Array,
      default: () => [],
        type: Array,
        default: () => [],
        validator: (value) => {
            return Array.isArray(value);
        }
    },
    value: {
        type: Array,
        default: () => [],
        validator: (value) => {
            // 允许空数组,但如果是非数组值则发出警告
            if (!Array.isArray(value) && value !== null && value !== undefined) {
                console.warn('value prop should be an array, received:', typeof value);
                return false;
            }
            return true;
        }
    },
    initialselectedOrder: {
      type: Array,
      default: () => [],
    },
    // selectedOrder: {
    //   type: Array,
    //   default: () => [],
    // },
    valueKey: {
      type: String,
      default: "value",
@@ -83,14 +94,21 @@
    value: {
      immediate: true,
      handler(newVal) {
        if (
          Array.isArray(newVal) &&
          newVal.length > 0 &&
          typeof newVal[0] === "object"
        ) {
        // 首先确保newVal是数组,如果不是则转换为空数组
        if (!Array.isArray(newVal)) {
          console.warn(
            "Expected array for value prop, received:",
            typeof newVal
          );
          this.checkedValues = [];
          this.selectedOrder = [];
          return;
        }
        if (newVal.length > 0 && typeof newVal[0] === "object") {
          console.log(this.selectedOrder, "111");
          // 1. 传入的是对象数组 [{ sort, preachform, compensateTime }]
          this.checkedValues = newVal.map((item) => item.preachform); // 提取 preachform 组成选中值数组
          // 构建 selectedOrder,优先使用传入的 compensateTime,否则用默认值
          this.checkedValues = newVal.map((item) => item.preachform);
          this.selectedOrder = newVal.map((item) => ({
            value: item.preachform,
            compensateTime: item.hasOwnProperty("compensateTime")
@@ -98,10 +116,11 @@
              : this.defaultCompensateTime,
          }));
        } else {
          // 2. 传入的是字符串数组 (如 ["1", "3", "4"],兼容之前的用法)
          // 2. 传入的是字符串数组
          if (JSON.stringify(newVal) !== JSON.stringify(this.checkedValues)) {
            this.checkedValues = [...newVal];
            // 构建或更新 selectedOrder,保留已有的 compensateTime
            console.log(this.selectedOrder, "222");
            const newOrder = [];
            newVal.forEach((value) => {
              const existingItem = this.selectedOrder.find(
@@ -110,9 +129,14 @@
              if (existingItem) {
                newOrder.push(existingItem);
              } else {
                // 修复hasOwnProperty方法调用
                const existingCompensateTime = this.hasOwnProperty(value);
                newOrder.push({
                  value,
                  compensateTime: this.defaultCompensateTime,
                  compensateTime:
                    existingCompensateTime !== false
                      ? existingCompensateTime
                      : this.defaultCompensateTime,
                });
              }
            });
@@ -120,9 +144,10 @@
          }
        }
      },
        deep: true // 建议添加 deep: true 以确保对象数组内的变化能被捕获
      deep: true,
    },
    checkedValues(newVal, oldVal) {
      console.log(this.selectedOrder, "333");
      // 处理选中项的变化
      const added = newVal.filter((item) => !oldVal.includes(item));
      const removed = oldVal.filter((item) => !newVal.includes(item));
@@ -178,6 +203,19 @@
        this.emitChangeEvent();
      }
    },
    hasOwnProperty(patfrom) {
      if (!this.initialselectedOrder || !Array.isArray(this.initialselectedOrder)) {
        return false;
    }
    // 使用find方法查找匹配的对象
    const foundObject = this.initialselectedOrder.find(
        (item) => item.preachform === patfrom
    );
    // 如果找到对象,返回其compensateTime;否则返回false
    return foundObject ? foundObject.compensateTime : false;
    },
    // 发射变化事件
    emitChangeEvent() {
      // 转换数据格式为父组件需要的格式