前端组件 ​

说明 ​

本文档对本项目经常使用的前端组件进行说明，关于组件的详细使用方法及更多组件的说明请参数官方文档 https://help.jeecg.com/ui/

JDictSelectTag ​

文档：https://help.jeecg.com/ui/component/JDictSelectTag

表单使用 ​

功能：表单中下拉显示数据字典选项

效果如下：

示例：下拉选择数据字典dict_item_status的选项

dictCode：指定数据字典code

表单下拉框中显示数据字典：

{
  label: '状态',
  field: 'status',
  component: 'JDictSelectTag',
  componentProps:{
    dictCode:"dict_item_status"
  },
  dynamicRules: ({model,schema}) => {
    return [
      { required: true, message: '请输入状态'},
    ];
  },
},

component: 'JDictSelectTag'：指定使用JDictSelectTag组件

dict_item_status：数据字典的名称

注意：状态字段在数据库使用java.lang.String类型

列表显示数据字典：

{
  title: '状态',
  align:"center",
  dataIndex: 'status',
  customRender: ({text}) => {
    return render.renderDict(text, 'dict_item_status');
  }
}

列表使用数据字典 ​

在查询列表显示数据字典名称时需要前后端结合。

首先在后端实体类中使用@Dict(dicCode = "dict_item_status") 指定数据字典名称

/**状态*/
@Excel(name = "状态", width = 15, dicCode = "dict_item_status")
@Dict(dicCode = "dict_item_status")
   @ApiModelProperty(value = "状态")
   private java.lang.String status;

在查询货主表时jeecgBoot会关联查询数据字典表得到字典名称，字段名称为“status_dictText”，即“原字段名称_dictText”，在前端就可以指定显示此字段名称的值即可。

{
  title: '状态',
  align:"center",
  dataIndex: 'status_dictText',
},
{
 title: '结算币种',
 align:"center",
 dataIndex: 'settlementCurrency_dictText'
},

ApiSelect ​

基于antd-design-vue的Select组件的二次封装，获取api数据生成Select组件所需的options。

文档：https://help.jeecg.com/ui/apiSelect

效果：

示例代码：

{
  label: '仓库',
  field: 'warehouseId',
  component: 'ApiSelect',
  componentProps: {
    api: list,
    resultField: 'records',
    labelField: 'warehouseName',
    valueField: 'id',
    disabled: true
  },
  dynamicRules: ({model,schema}) => {
    return [
      { required: true, message: '请输入仓库!'},
    ];
  },
},

参数配置：

JSearchSelect ​

功能：下拉+搜索

文档：https://help.jeecg.com/ui/component/JSearchSelectTag

效果：

示例：下拉选择货主

代码如下：

{
  label: '货主',
  field: 'ownerId',
  component: 'JSearchSelect',
  componentProps: {
    dict: "wms_cargo_owners,owner_name,id",
    //是否为搜索模式
    showSearch: true,
    //是否禁用
    disabled: false
  },
}

dict：指定表名、下拉框架显示名称及下拉框value值

注意：JDictSelectTag 、JSearchSelect 和 JTreeSelect 除了可以配置数据字典外还支持配置数据库表，直接通过表获取数据。

dictCode格式说明：表名,文本字段,取值字段

参数配置：

JTreeSelect ​

功能：下拉+树

文档：https://help.jeecg.com/ui/component/JTreeSelect

效果：

示例代码：

{
  label: '商品分类',
  field: 'categoryId',
  component: 'JTreeSelect',
  // helpMessage: ['component模式'],
  componentProps: {
    dict: 'wms_product_categories,category_name,id',
    pidField: 'parent_id',
    pidValue: '0'
  },
},

参数配置：

弹窗提示 ​

import {useMessage} from "@/hooks/web/useMessage";

const { createMessage } = useMessage();

/**
 * 审核入库单
 */
function handleAudit(record: Recordable) {
  //提交审核状态可以审核
  if(record.status != "SUBMITTED" ){
    createMessage.warn('提交审核状态可以审核')
    return;
  }
  openAuditModal(true, {
    record,
    isUpdate: true,
    showFooter: true,
  });
}

省市区联动 ​

{
  label: '收件人省市区',
  field: 'region',
  component: 'JAreaLinkage',
},

效果：

向后台提交省、市、区三级的编码，中间用逗号分隔，如：110000,110100,110101。

在后台处理建议：

首先保存收到省、市、区三级的编码，然后解析出省、市、区的编码，并使用JeecgBoot提供的ProvinceCityArea 获取编码对应的文本进行保存。