vben admin drop-down box (type: select) to get background data (with search)

The drop-down box (type: select) gets background data

Using ApiSelect will cause the data to not be updated in time, and the entire page needs to be refreshed to obtain new data.

1. Update the drop-down box data in the form

1. View the official website
   Here we use to update the drop-down box in the from form
   

It can be seen from here that updateSchema can be used to assign values ​​to select

2. Code implementation (partly main)

//前端代码
export const formSchema: FormSchema[] = [
  
  {
    label: '敏感词分类',
    field: 'sensitiveType',
    required: true,
    component: 'Select',
  },
];
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
 const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
    labelWidth: 100,
    schemas: formSchema,
    showActionButtonGroup: false,
  });
//初始化弹框
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //从后端接口获取值（后端返回数据必须是{label：'',value:''}形式）
    stype.value = await getSensitiveType();
  //将数据放到下拉框上
    updateSchema({
      field: 'sensitiveType',
      componentProps: {
        options: unref(stype),
      },
    });

    resetFields();
    setModalProps({ confirmLoading: false });
    isUpdate.value = !!data?.isUpdate;
    if (unref(isUpdate)) {
      setFieldsValue({
        ...data.record,
      });
    }
  });

3. renderings
   

2. Update the drop-down box data in the table

1. View the official website
   Here we use to update the drop-down box in the table (the search area in the table updates data)
   
   The method provided by the official website is as follows
   
2. Code

// 初始化表格
  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, getForm }] = useTable({
    title: '敏感词列表',
    api: getSensitiveListByPage,
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    },
    rowSelection: {
      type: 'checkbox',
    },
  });
//注册一个回调函数，在组件挂载完成后执行。
 /* 
    组件在以下情况下被视为已挂载：
      其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
      其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
      这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户		    端执行。*/
  onMounted(async () => {
  //将数据放入下拉框中
    const { updateSchema } = getForm();
    const sOption = await getSensitiveType();
    await updateSchema({
      field: 'sensitiveType',
      componentProps: {
        options: unref(sOption),
      },
    });
  });

3. renderings
   

3. Drop-down box with search (single choice)

Refer to Ant Design Vue official website-Select selector: showSearch attribute in Select props
The single-select drop-down box has a search function, and slots are not used here.

1. The type is ApiSelect

Part of the code in front-end .ts
Note: The labelField and valueField in componentProps must have the same part, otherwise the data cannot be searched; the search is based on value or valueField . If the data returned by the background cannot be used directly, you can select the Select drop-down box.

 {
    
    
    field: 'productSeries',
    component: 'ApiSelect',
    label: '产品系列',
    required: true,
    componentProps: {
    
    
      showSearch: true,
      api: getProductTypeSelectList,
      labelField: 'value',
      valueField: 'code',
    },
  },

The effect is as follows:

2. The type is Select

The front-end code is as follows

Front-end .ts code

{
    
    
    field: 'customerId',
    component: 'Select',
    label: '客户姓名',
    colProps: {
    
    
      span: 12,
    },
  },

Front-end.vue (If you don’t understand here, look at the front)

  onMounted(async () => {
        const v = await getCustomerList();
        const optionCustomer = v.map((i) => {
          return {
            label: i.plmCustomerName,
            value: i.plmCustomerName + '-' + i.plmCustomerId,
          };
        });
        console.log('数据', optionCustomer);
        updateSchema(
          {
            field: 'customerId',
            componentProps: () => {
              return {
                showSearch: true,
                options: unref(optionCustomer),
              };
            },
          });
      });

The effect is as follows:

Fourth, the value of the drop-down box changes dynamically

A: Any component; B: AipSelect box (or other Api box)
Applicability: When A component changes value, B component is dynamically modified according to A component

2.A component code is as follows

{
    field: 'productName',
    component: 'ApiSelect',
    label: '产品名称',
    required: true,
    componentProps: ({ formModel, formActionType }) => {
      return {
        showSearch: true,
        api: getProductNameSelectList,
        labelField: 'label',
        valueField: 'value',
        //获取组件中的每一次修改的值
        onChange: (e) => {
          const { updateSchema } = formActionType;
          //重置变量
          formModel.productModel = undefined;
          getProductModelSelectList({ productName: e }).then((res) => {
            const list = res;
            updateSchema({
              field: 'productModel',
              componentProps: () => {
                return {
                //根据B组件类型赋值
                  options: list,
                };
              },
            });
          });
        },
      };
    },
  },

3. The B component code is as follows

  {
    field: 'productModel',
    component: 'Select',
    label: '产品型号',
    required: true,
  },

4. No posting

Hope you guys can correct me!!!