CJumpSelect 跳转选择组件

功能说明

CJumpSelect 是一个跳转选择组件，用于在表单中提供跨页面的选择功能。点击组件会触发回调函数，开发者可以在回调中实现跳转到选择页面的逻辑，并通过回调接收选择结果。

引用方式

import { CJumpSelect } from '@components/forms/select';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• placeholder (String，可选)：输入框占位提示文本
• onPageSelectCall (Function，必填)：跨页选择模式的回调函数，用于处理页面跳转和接收选择结果
• readOnly (Boolean，可选)：只读模式，默认为 false

使用示例

基础用法

<template>
  <CForm :form="form">
    <CFormItem name="department" label="部门">
      <CJumpSelect 
        placeholder="请选择部门" 
        :onPageSelectCall="handleDepartmentSelect" 
      />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CJumpSelect } from '@components/forms/select';

export default {
  components: {
    CForm,
    CFormItem,
    CJumpSelect
  },
  data() {
    return {
      form: {
        department: ''
      },
      // 保存回调函数
      selectCallback: null
    };
  },
  methods: {
    handleDepartmentSelect(callback) {
      if (callback === null) {
        // 组件销毁时会传入 null，清除回调
        this.selectCallback = null;
        return;
      }
      
      // 保存回调函数
      this.selectCallback = callback;
      
      // 跳转到部门选择页面
      this.$router.push({
        path: '/pages/department-selector/index'
      });
    },
    
    // 在部门选择页面选择完成后调用
    onDepartmentSelected(department) {
      if (this.selectCallback) {
        // 调用回调函数，传递选择结果
        this.selectCallback({
          name: department.name,
          value: department.id
        });
      }
    }
  }
};
</script>

只读模式

<CFormItem name="department" label="部门">
  <CJumpSelect 
    placeholder="请选择部门" 
    :onPageSelectCall="handleDepartmentSelect" 
    :readOnly="true" 
  />
</CFormItem>

注意事项

1. CJumpSelect 组件主要用于需要跳转到其他页面进行选择的场景，如选择复杂的组织架构、多级分类等
2. onPageSelectCall 回调函数会在组件点击时被调用，并传入一个回调函数，用于接收选择结果
3. 选择结果应包含 name 和 value 两个属性，分别表示选项的显示名称和值
4. 组件在销毁时会调用 onPageSelectCall(null)，开发者应在回调函数中处理这种情况，清除相关状态
5. 在只读模式下，下拉箭头图标将被隐藏，且无法触发选择操作