| | |
| | | name: "OrderedCheckboxGroup", |
| | | props: { |
| | | options: { |
| | | type: Array, |
| | | default: () => [], |
| | | type: Array, |
| | | default: () => [], |
| | | validator: (value) => { |
| | | return Array.isArray(value); |
| | | } |
| | | }, |
| | | value: { |
| | | type: Array, |
| | | default: () => [], |
| | | 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, |
| | |
| | | value: { |
| | | immediate: true, |
| | | handler(newVal) { |
| | | if ( |
| | | Array.isArray(newVal) && |
| | | newVal.length > 0 && |
| | | typeof newVal[0] === "object" |
| | | ) { |
| | | console.log(this.selectedOrder, "111"); |
| | | // 首先确保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") |
| | |
| | | : this.defaultCompensateTime, |
| | | })); |
| | | } else { |
| | | // 2. 传入的是字符串数组 (如 ["1", "3", "4"],兼容之前的用法) |
| | | // 2. 传入的是字符串数组 |
| | | if (JSON.stringify(newVal) !== JSON.stringify(this.checkedValues)) { |
| | | this.checkedValues = [...newVal]; |
| | | console.log(this.selectedOrder, "222"); |
| | | console.log(this.newVal, "22"); |
| | | // 构建或更新 selectedOrder,保留已有的 compensateTime |
| | | |
| | | const newOrder = []; |
| | | newVal.forEach((value) => { |
| | | const existingItem = this.selectedOrder.find( |
| | |
| | | if (existingItem) { |
| | | newOrder.push(existingItem); |
| | | } else { |
| | | // 修复hasOwnProperty方法调用 |
| | | const existingCompensateTime = this.hasOwnProperty(value); |
| | | newOrder.push({ |
| | | value, |
| | | compensateTime: this.hasOwnProperty(value) |
| | | ? this.hasOwnProperty(value) |
| | | : this.defaultCompensateTime, |
| | | compensateTime: |
| | | existingCompensateTime !== false |
| | | ? existingCompensateTime |
| | | : this.defaultCompensateTime, |
| | | }); |
| | | } |
| | | }); |
| | |
| | | } |
| | | } |
| | | }, |
| | | deep: true, // 建议添加 deep: true 以确保对象数组内的变化能被捕获 |
| | | deep: true, |
| | | }, |
| | | checkedValues(newVal, oldVal) { |
| | | console.log(this.selectedOrder, "333"); |
| | |
| | | } |
| | | }, |
| | | hasOwnProperty(patfrom) { |
| | | console.log(patfrom); |
| | | console.log(this.initialselectedOrder); |
| | | // 使用find方法查找匹配的对象 |
| | | const foundObject = this.initialselectedOrder.find( |
| | | (item) => item.preachform === patfrom |
| | | ); |
| | | if (!this.initialselectedOrder || !Array.isArray(this.initialselectedOrder)) { |
| | | return false; |
| | | } |
| | | |
| | | // 如果找到对象,返回其compensateTime;否则返回false |
| | | return foundObject ? foundObject.compensateTime : false; |
| | | // 使用find方法查找匹配的对象 |
| | | const foundObject = this.initialselectedOrder.find( |
| | | (item) => item.preachform === patfrom |
| | | ); |
| | | |
| | | // 如果找到对象,返回其compensateTime;否则返回false |
| | | return foundObject ? foundObject.compensateTime : false; |
| | | }, |
| | | // 发射变化事件 |
| | | emitChangeEvent() { |