外观

返回顶部
本页目录

作者：aschs
更新于：1/18/2023

ab-save 保存数据、ab-load 加载数据

介绍

ab-save和ab-load是系统封装好的一对用于保存和加载数据的组件，在系统中大部分编辑页的保存和加载数据功能都由它们配合完成。

使用

  • 示例写法:
html
<ab-save
  back-name="BizPatternList"
  :form-ref="formRef"
  :save-data="info.data"
  :url="BizPatternSave"
/>
<ab-load v-model="info.data" :url="BizPatternGet" />

ab-save参数和事件

js
props: {
  // 表单引用
  formRef: {
    required: false,
    default: null,
    type: Object as PropType<FormInstance>,
  },
  // 是否展示loading
  showLoading: { default: true, type: Boolean },
  // 保存的数据
  saveData: { required: true, type: Object },
  // url 地址
  url: { required: true, type: String },
  // 保存前置function
  beforeSaveFn: { required: false, type: Function, default: null },
  // 保存后 function，如果返回 false，则不继续关闭页面操作，可用于自定义保存提示，自定义页面跳转等逻辑
  afterSaveFn: { required: false, type: Function, default: null },
  //“保存的数据 saveData”的主键key
  idKey: {
    type: String,
    default: 'id',
  },
  //是否显示返回按钮
  backBtn: {
    type: Boolean,
    default: true,
  },
  /**
   * 返回的路由name
   */
  backName: {
    type: String,
    default: null,
  },
  /**
   * 编辑时是否刷新页面
   * 不刷新时只会弹框提示
   */
  editRefresh: {
    type: Boolean,
    default: false,
  },
  /**
   * 保存后停留在当前页
   */
  afterSaveStay: {
    type: Boolean,
    default: false,
  },
},
// 保存成功后事件
emits: ['afterSave'],

ab-load参数和事件

js
   const props = defineProps({
    /**
     * 获取数据请求的url
     */
    url: { required: true, type: String },
    /**
     * 赋值目标对象
     */
    modelValue: { required: true, type: Object },
    /**
     * 请求方式 get
     */
    getParam: { required: false, default: null, type: String },
    /**
     * 请求方式 默认post
     */
    postParam: { required: false, default: null, type: Object }, // 请求方式 默认post
    /**
     * document.querySelector以获取到对应 DOM 节点
     */
    loadingTarget: { default: 'section', type: String },
    /**
     * 加载数据为空时是否设值，默认否
     */
    dataNullable: { default: false, type: Boolean },
  })
  /**
  * 加载数据后置事件
  */
  const emit = defineEmits(['afterFn'])

ab-save的后端写法

  • ab-save中url对应的后端代码通常是基类com.dstz.base.web.controller.AbCrudController的save保存方法（根据需要可自行覆盖后端的基类实现，关于后端control层更详细的说明请查看相关文档）：
java
/**
 * 保存实体数据
 *
 * @param entity 实体
 * @return 接口响应-实体ID
 */
@RequestMapping(value = "save", produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
public ApiResponse<String> save(@Valid @RequestBody T entity) {
    invokeBeforeCheck("saveCheck", entity);
    String desc;
    if (StringUtils.hasLength(entity.getId())) {
        desc = "更新%s成功";
        Assert.isTrue(abBaseManager.update(entity) > 0, () -> new BusinessMessage(GlobalApiCodes.DATA_VERSION_OLD));
    } else {
        desc = "添加%s成功";
        abBaseManager.create(entity);
    }
    return ApiResponse.success(entity.getId()).withMessage(String.format(desc, getEntityDesc()));
}

ab-load的后端写法

  • ab-load中url对应的后端代码通常是基类com.dstz.base.web.controller.AbCrudController的get获取数据方法：
java
/**
 * 按实体ID获取实体记录
 *
 * @param id 实体ID
 * @return 接口响应-实体记录
 */
@RequestMapping(value = "get", produces = MediaType.APPLICATION_JSON_VALUE)
public ApiResponse<T> get(@RequestParam(name = "id") String id) {
    T entity = null;
    if (StringUtils.hasLength(id)) {
        entity = abBaseManager.getById(id);
    }
    return ApiResponse.success(entity);
}