检查w-form-select 组件是否正确透传了 visible-change 事件

• 点击关联识别点下拉框没有发送请求，应该检查 w-form-select 组件是否正确透传了 visible-change 事件。

        <el-select
          v-else
          v-model="val"
          :multiple="multiple"
          filterable
          clearable
          :placeholder="placeholder || label || tip"
          :allow-create="allowCreate"
          :default-first-option="defaultFirstOption"
          :style="inputWidth ? `width: ${inputWidth};` : `width: 100%;`"
          @input="value => $emit('input', value)"
          @change="value => $emit('change', value)"
          @visible-change="value => $emit('visible-change', value)"
        >

1. 下拉框的组件

“关联识别点”下拉框使用的是 w-form-select 组件，其定义如下：

<w-form-select
  v-model="form.relatedIds"
  label="关联识别点"
  label-width="120px"
  :operate-type="operateType"
  :list="identifies"
  option-label="id"
  option-value="id"
  :multiple="true"
  input-width="100%"
  @visible-change="handleVisibleChange"
  @change="onRelatedChange"
/>

• v-model="form.relatedIds"：绑定到 form.relatedIds，用于存储选择的关联识别点 ID。
• :list="identifies"：下拉框的选项数据来自 identifies 数组。
• @visible-change="handleVisibleChange"：当下拉框显示或隐藏时触发 handleVisibleChange 方法。
• @change="onRelatedChange"：当选择的值发生变化时触发 onRelatedChange 方法。

2. 点击下拉框时的逻辑

当点击“关联识别点”下拉框时，会触发以下逻辑：

（1）handleVisibleChange 方法

private handleVisibleChange(visible: boolean) {
  console.log('handleVisibleChange triggered', visible);
  if (visible) {
    console.log('calling getIdentifies with form.type:', this.form.type);
    this.getIdentifies();
  }
}

• 作用：当下拉框显示时（visible 为 true），调用 getIdentifies 方法加载关联识别点数据。
• 触发时机：每次点击下拉框时都会触发。

（2）getIdentifies 方法

private async getIdentifies() {
  const res: any = await qlistAll({
    type: this.form.type,
    page: 0,
    size: 3000
  });
  if (res?.data) {
    this.identifies = res.data.filter((item: any) => item.id !== this.form.id); // 过滤掉当前编辑的项
    // 如果有已选择的关联识别点，更新描述
    if (this.form.relatedIds && this.form.relatedIds.length > 0) {
      const lastSelectedId = this.form.relatedIds[this.form.relatedIds.length - 1];
      const selectedItem = this.identifies.find((item: any) => item.id === lastSelectedId);
      this.relatedDescription = selectedItem ? selectedItem.description : '';
    }
  }
}

• 作用：从后端获取关联识别点数据，并更新 identifies 数组。
• 过滤逻辑：过滤掉当前编辑的识别点（item.id !== this.form.id），避免选择自身。
• 更新描述：如果已有选择的关联识别点，更新 relatedDescription 显示描述。

3. 选择关联识别点时的逻辑

当从下拉框中选择一个或多个关联识别点时，会触发以下逻辑：

（1）onRelatedChange 方法

private onRelatedChange(value: any) {
  if (value && value.length > 0) {
    // 获取最后选择的识别点
    const lastSelectedId = value[value.length - 1];
    const selectedItem = this.identifies.find((item: any) => item.id === lastSelectedId);
    this.relatedDescription = selectedItem ? selectedItem.description : '';
  } else {
    this.relatedDescription = '';
  }
}

• 作用：当选择的值发生变化时，更新 relatedDescription 显示最后一个选择的识别点的描述。
• 逻辑：
  • 如果选择了识别点（value.length > 0），获取最后一个选择的识别点 ID，并从 identifies 数组中查找对应的描述。
  • 如果没有选择识别点（value.length === 0），清空 relatedDescription。

4. 相关 UI 更新

• 关联识别点描述：
  • 当选择关联识别点时，relatedDescription 会更新，并显示在 w-form-textarea 组件中。
  • 代码如下：

    <w-form-textarea
      v-model="relatedDescription"
      label="识别点描述"
      label-width="120px"
      :operate-type="'view'"
      input-width="100%"
      :disabled="true"
      :auto-size="{ minRows: 2, maxRows: 4 }"
      class="description-textarea"
    />
    

5. 总结

• 点击下拉框时：
  1. 触发 handleVisibleChange 方法。
  2. 调用 getIdentifies 方法，从后端加载关联识别点数据。
  3. 更新 identifies 数组，并过滤掉当前编辑的识别点。
• 选择关联识别点时：
  1. 触发 onRelatedChange 方法。
  2. 更新 relatedDescription，显示最后一个选择的识别点的描述。
• UI 更新：
  • 关联识别点描述会实时显示在文本框中。