HUIBUR_ANTD-VUE说明文档

• HUIBUR_ANTD-VUE说明文档
  • 前言
    • 基本说明
    • 核心原理
    • 使用说明
  • const.js
    • TYPE_ENUM
    • OPERATION_TYPE
  • 组件
    • Confirm
      • 公共方法
      • 示例
    • Header
    • Form
      • 属性
      • Form-Item
      • SelectItem
      • Form-Button-Item
      • Input-Label-Item
      • 回调事件
      • 公共方法
    • Table
      • 属性
      • 回调事件
      • 公共方法
      • column
    • Upload
      • 属性
      • 回调事件
    • Page
      • 组件描述
      • 属性
      • BtnItem
      • DetailItem
      • DictApiItem
      • 回调事件
    • Detail
      • 组件描述
      • 属性
      • 回调事件
    • API
      • 组件描述
      • 引入方式
      • 接口
      • 参数说明
  • 接口规范
    • 说明
    • 列表
    • 详情
    • 增加
    • 修改
    • 删除
  • 说明
  • 关注我们

前言

基本说明

huibur-antd-vue是天津汇柏科技有限公司基于Ant Design Vue 框架进行开发，旨在简化开发过程中大量无意义的重复代码工作。该组件是根据公司项目场景中出现的各类问题，进行统一规范化封装处理，以减少非必要的一些编码及BUG修改工作。如果不能满足现有需求的话，可以关注公众号进行留言以便于进行组件扩展。 演示demo地址：http://antd.vue.huibur.com demo源码地址：https://github.com/huiburtech/huibur_ant_vue_demo.git

核心原理

数据驱动页面, 即所有页面的渲染均是通过数据参数的配置完成，几乎不需要写html、css以及一些紧要且耽误功夫的重复性逻辑校验代码

使用说明

• 组件包下载方式：npm i huibur-antd-vue
• npm导入方式：import {hSearch, hPage} from 'huibur-antd-vue' Vue.use(hSearch); Vue.use(hList);
• 禁止外部组件直接操作组件中data的属性值，所有data属性均通过方法进行驱动
• 外部组件仅可调用props的属性，以及公共部分的方法，禁止调用非公共部分的方法。
• 所有的公共方法均以 “” 开头,即父组件禁止调用非 “” 开头的方法
• 组件统一入口为@/components/HB/index.js
• const.js 中放置组件中使用的常量数据
• 该组件的构建文件中，未进行Ant Design of Vue组件的引入操作，需自行引入

const.js

TYPE_ENUM

组件中控件的枚举值

| 参数 | 说明 | | ---- | ---- |
| INPUT | 输入框 | | INPUT_NUMBER | 数字输入框 | | INPUT_TEXT_AREA | 输入框 | | SELECT | 选择框 | | SELECT_FILTER | 选择框—本地过滤 | | SELECT_SEARCH | 选择框—搜索 | | DATEPICKER | 日期 | | MONTHPICKER | 月度日期 | 1.0.16 | | DATERANGEPICKER | 时间范围 | 1.0.16 | | TIMEPICKER | 时间 | 1.0.16 | | LINK | 超链接,即a标签 | | TEXT | 文本 | | CHECKBOX | CHECKBOX | | CHECKBOX_GROUP | CHECKBOX_GROUP | 1.1.0 | | CHANGE | 需要转换的数据 | | OPERATION | 操作 | | IMG | 单图片 | | IMG_MULTI | 多图片 | 1.2.14 | | FILE | 文件 | 1.2.14 | | FILE_MULTI | 多文件 | 1.2.14 | | BUTTON | 按钮 | 1.0.14 | | BUTTONGROUP | 按钮组:selectItems: [{ value: '', label: '' }]
| DROPDOWN | 下拉框: selectItems: [{ value: '', label: '' }] | ACTION | 组合操作(可嵌套两层): selectItems: [{ value: '', label: '', selectItems: [] }] | RADIO | 单选 | 1.1.0 | | SWITCH | 开关 | 1.1.8 | | TIMESTAMP | 时间戳 | 1.3.9 | | DATERANGEPICKER | 日期区间选择 | 1.3.9 | | SLOT | 插槽类型 | 1.3.9 | | UPLOAD_IMG | 单图片上传 | 1.3.9 |
| UPLOAD_IMG_MULTI | 多图片上传 | 1.3.9 |
| UPLOAD_FILE | 单文件上传 | 1.3.9 |
| UPLOAD_FILE_MULTI | 多文件上传 | 1.3.9 |

OPERATION_TYPE

组件中的操作类型

| 参数 | 说明 | 版本
| ---- | ---- | ---- | | ADD | 增加 | 2.0 | | EDIT | 编辑| 2.0 | | COPY | 拷贝 | 2.0 | | DETAIL | 详情 | 2.0 |

组件

Confirm

公共方法

| 事件名称 | 说明 | 参数 | 版本 | | ---- | ---- | ---- | ---- | | _show | 显示 | (title, content, cb)；title：标题，content：描述内容, cb：点确认的回调函数 |

示例

	<template>
	  <div class="contain">
		  <button @click="handleDeleteClick">删除</button>
		  
	      <h-confirm ref="confirm"/>
	  </div>
	</template>
	
	<script>
	import Vue from 'vue'
	import {hConfirm} from 'huibur-antd-vue'
	Vue.use(hConfirm)
	
	export default {
	  components: {
	    hConfirm
	  },

	  methods: {
		  handleDeleteClick() {
			   this.$refs.confirm._show("确认删除？", '删除后不可恢复，请谨慎操作', (res) => {
				// 执行删除操作
			  });
		  }
		  
	  }
	

Header

未写

Form

属性

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| ---- | ---- | ---- | ---- | ---- | | items | 控件组 | [Form-Item] | | 是 | | columnNum | 列的数量 | Number | 1 | | | buttonItems | 按钮组 | [Form-Button-Item] | | |
| form | 数据源对象 | Object | | | | layout | Form表单布局(同a-form-model中layout) | 'horizontal'、'vertical'、'inline' | inline | | | flexType | Form内控件的Flex布局 | 'flex'、'block'、'none' | 'block' |

Form-Item

| 参数 | 说明 | 类型 | 默认值 | 必须 | | ---- | ---- | ---- | ---- | ---- | | title | 标题 | String | - | | | key | 唯一标识，字段键值 | String | - | 是 | 1.0 | | dataIndex | 在 table 数据项中对应的 key，支持 a.b.c 的嵌套写法 (该字段与key相同时，可省略该字段，一般在与key不同的情况下使用) | string | - | | defaultValue | 默认值 | String | - | | 1.0 | | placeholder | 默认文字 | String | - | | 1.0 | | type | 控件类型 | TYPE_ENUM | - | 是 | 1.0 | | sort | 表单排序 | Number | - | 0 | 1.0 | | required | 是否必须 | Boolean | false | | 1.0 | | disabled | 是否禁用 | Boolean | false | | 1.0 | | rules | 表单验证规则（同antdesign 规则） | Array | | | 1.3.40 | | linkageApi | 下级联动接口API | [DictApiItem] | | | 1.0 | | allowClear | 允许被清空 | Boolean | false | | 1.0.15 | | columnSpan | 列宽（24栅格） | Number | 24 | | 1.0.16 | | labelAlign | label 标签的文本对齐方式 | 'left' ｜ 'right' | right | | 1.0.16 | | labelOffset | label 标签布局偏移量 | Number | 0 | | 1.0.16 | | labelSpan | label 标签宽度 | Number | 8 | | 1.0.16 | | wrapperOffset | 控件布局偏移量 | Number | 0 | | 1.0.16 | | wrapperSpan | 控件宽度 | Number | 12 | | 1.0.16 | | justify | 控件对齐方式 （start | space-between | center | end ）;对于checked等不完全填充控件有效 | String | 'space-between' | | 1.0.16 | | autosize | 自适应内容高度，可设置为 true|false 或对象：{ minRows: 2, maxRows: 6 } | Boolen ｜ Object | {minRows: 3, maxRows: 5} | | 1.0.16 | | before | 前置标签(INPUT有效) | Form-Item | | | 1.1.0 | | after | 后置标签(INPUT有效) | Form-Item | | | 1.1.0 | | hidden | 详情页隐藏该字段 | Boolean | false | | 1.3.12 | | tableHidden | table中隐藏该字段 | Boolean | false | | 1.3.12 | | dataType | 页面对应表格配置列；不填写时，默认为TEXT | TYPE_ENUM | - | 否 | 1.0 | | format | 日期格式 | String | "YYYY-MM-DD HH:mm:ss" | | 1.0 | | selectItems | 选择项 | [SelectItem] | | | 1.0 | | customRender | 自定义渲染字段【仅在before和after中适用】 | String | | | 1.3.40 | | imgW | 图片宽度 | String | '60px' | | 1.3.40 | | imgH | 图片高度 | String | '60px' | | 1.3.40 | | ... | 文件上传部分的参数（注：upload中的参数与以上参数同级追加即可） Upload | Object | | | 1.2.13 |

SelectItem

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | icon | 图标【可选】 | String | - | | label | 显示内容 | String | Number | - | | value | 唯一标识 | String | Number | - | | disabled | 是否禁用 | String | - | | color | 字体颜色 | String | - |
| background | 背景色 | String | - |

Form-Button-Item

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- |
| title | 标题 | String | - |
| icon | 图标【可选】 | String | - |
| value | 唯一标识，字段键值 | String | - |
| background | 背景色 | String | - |
| color | 字体颜色 | String | - |

回调事件

| 事件名称 | 说明 | 回调参数 | | ---- | ---- | ---- | | change | 表单控件的改变事件（具体数据需自行核对） | Function(info); info:{value, item}; value:表单控件的数据源，item: 表单控件 | | select | 表单控件的选择事件（select类型控件支持） | Function(info); info:{value, item}; value:表单控件的数据源，item: 表单控件 | | search | 表单控件的搜索事件（SELECT_SEARCH类型控件支持） | Function(info); info:{value, item}; value:表单控件的数据源，item: 表单控件 | | click | 表单控件的点击事件（具体数据需自行核对） | Function(info); info:{value, item}; value:表单控件的数据源，item: 表单控件 | | btnClick | 操作按钮的点击事件（具体数据需自行核对） | Function(info); info:{val, item}; val:表单控件的数据源，item: 表单控件 |

公共方法

| 事件名称 | 说明 | 参数 | | ---- | ---- | ---- | | _validate | 校验/数据获取 | res:(valid: 是否校验通过，form:表单模型数据) |
| _setFormItem | 设置form中的键值 | (key, value);key:需要被设置的键，value：需要被设置的值 | | _refresh | 刷新表单 | |
| _assignSelectItems | 为selectItems赋值(针对items) | (target, key, selectItems) ; target即items， key， 被设置的项的key，selectItems：选项 |
| _getFormObject | 将单体模型对象转换为嵌套对象 | |

示例

form表单示例

<template>
  <a-modal
      v-model="visible"
      ok-text="确认"
      cancel-text="取消"
      centered
      :closable="false"
      :maskClosable="false"
      :destroyOnClose="true"
      @cancel="handleCancel"
      @ok="handleOk"
    >

     <template slot="title">
            <div class="title">{{ form.id == null || form.id == '' ? '新增' : '编辑' }}</div>
     </template>

    <h-form
      :items="items"
      ref="hForm"
      :form="form"
    ></h-form>
  </a-modal>
</template>

<script>
import Vue from "vue";
import { TYPE_ENUM, hForm } from "huibur-antd-vue";

Vue.use(hForm);

const items = 
[{
    title: "姓名",
    key: "name",
    placeholder: "请输入姓名",
    type: TYPE_ENUM.INPUT,
    required: true,
    disabled: false,
    length: 20,
    before: {
      key: 'beforeName',
      width: '80px',
      icon: 'user'
    },
  },
  {
    title: "省/市",
    key: "city",
    placeholder: "请选择住址",
    type: TYPE_ENUM.SELECT,
    required: true,
    disabled: false,
    selectItems: [
      {
        value: 0,
        label: "天津",
        selectItems: [
          {
            title: "区",
            key: "region",
            required: true,
            disabled: false,
            type: TYPE_ENUM.INPUT,
          }
        ]
      },
      {
        value: 1,
        label: "北京",
      }
    ]
  },
]

export default {
  components: {
  },

  data() {
    return {
      visible: false,
      items,
      form: {}
    };
  },

  methods: {
    //---------------事件----------------
    // 取消
    handleCancel() {
      this.visible = false
    },

    // 确认
    handleOk() {
      this.$refs.hForm._validate((valid, form) => {
        console.log(valid);
        console.log(form);
      });
    },    
  },
};
</script>

Search搜索示例

<template>
  <div class="contain">

    <h-form ref="search" :items="searchItems" :column-num=3 :button-items="btnItems" @btnClick="handleSearchClick"></h-form> 
  </div>
</template>

<script>
import Vue from 'vue'
import {TYPE_ENUM, hForm} from 'huibur-antd-vue'
Vue.use(hForm)

const btnItems = [
  {
    title: '搜索',
    icon: 'search',
    color: 'red',
    value: 'search'
  },
  {
    title: '重置',
    value: 'reset'
  }
]

const searchItems =
[{
  title: "关键字",
  key: "kw",
  type: TYPE_ENUM.INPUT,
  required: false,
},
{
  title: "省",
  key: "province",
  placeholder: "请选择省",
  type: TYPE_ENUM.SELECT,
  required: false,
  selectItems: [
	{
	  label: '河北',
	  value: 'hebei'
	},
	{
	  label: '河南',
	  value: 'henan'
	}
  ]  
},


export default {
  components: {

  },

  data() {
    return {
      TYPE_ENUM,
      btnItems,
      searchItems
  },

  methods: {


    //-------------------------------------回调通知--------------------------------------

    // 搜索框-搜索按钮点击事件
    handleSearchClick(info) {
		if (info.item.value == 'search') { // 搜索按钮点击
      
		} else if (info.item.value == 'reset') { // 重置按钮点击
		  
		}
    },
	
  },
}
</script>

Table

属性

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- |
| columns | 表格列的配置描述，具体项见下表 | [column] | - | | pageSize | 页大小 | Number | 10 | | total | 数据总数 | Number | 10 | | isPagination | 是否需要分页 | Boolean | true | | list | 数据数组 | Array | - | | rowSelection | 列表项是否可选择，配置项 | Object | null | 1.0.19 | | expandedRowItems | 扩展行操作项 | [SelectItem] | null | 1.1.5 |

回调事件

| 事件名称 | 说明 | 回调参数 |
| ---- | ---- | ---- | | pageChange | 分页事件触发 | Function(current) ；current：被选中的页码 | | change | 表单控件的改变事件（具体数据需自行核对） | Function(info); info:{value, item}; value:表单控件的数据源，item: 表单控件 | | select | 表单控件的选择事件（select类型控件支持） | Function(info); info:{value, item}; value:表单控件的数据源，item: 表单控件 | | search | 表单控件的搜索事件（SELECT_SEARCH类型控件支持） | Function(info); info:{value, item}; value:表单控件的数据源，item: 表单控件 | | buttonClick | 操作按钮的点击事件（具体数据需自行核对） | Function(info); info:{info, val}; val:表单控件的数据源，info: 表单控件 |

公共方法

| 事件名称 | 说明 | 参数 |
| ---- | ---- | ---- | | _startLoading | 开始页面加载中动画 | - | | _stopLoading | 停止页面加载中动画 | - |

column

| 参数 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- | | title | 标题 | array | - | | dataIndex | 列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法 | string | - | | align | 设置列内容的对齐方式 | 'left' | 'right' | 'center' | 'left' | | customRender | 生成复杂数据的渲染函数，同AntDesign，dataIndex='index'，时， 该值默认为index + 1 | Function(text, record, index) {}|slot-scope | - | | dataType | 数据展示类型 | TYPE_ENUM | TEXT | | selectItems | 选择项数据 | [SelectItem] | - | | format | 日期格式 | String | | | 1.2.13 | | imgW | 图片宽度 | String | 60px | | 1.2.13 | | imgH | 图片高度 | String | 60px | | 1.2.13 |

示例

<template>
  <div class="contain">

    <h-Table 
      ref="list" 
      :pageSize=5
      :total=10
      :isPagination=true
      :columns="columns"
      :list="list"
      :rowSelection="rowSelection"
      :expandedRowItems="expandedRowItems"
      @pageChange="handleListPageChange"
      @buttonClick="handleListButtonClick"
      ></h-Table>
  </div>
</template>

<script>
import Vue from 'vue'
import {TYPE_ENUM, hTable} from 'huibur-antd-vue'
Vue.use(hTable)

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    align: 'center'
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
    align: 'center',
    selectItems: [
		{label: '男', value: 0},
		{label: '女', value: 1}
	],
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    align: 'center',
    selectItems: [{label: '删除', value: 'delete', icon: 'delete', background: 'red', color: 'yellow'}, {label: '编辑', value: 'edit'}, {label: '操作', value: 'operat', selectItems: [{label: '删除', value: 'delete', icon: 'delete'}, {label: '编辑', value: 'edit', icon: 'delete'}]}],
    dataType: TYPE_ENUM.ACTION,
  }
]

const expandedRowItems = [{label: '删除', value: 'delete', icon: 'delete'}, {label: '编辑', icon: 'edit', value: 'edit'}]

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

const list = 
	[{name: '张三', age: 18, gender: 0},
	{name: '李四', age: 19, gender: 1}]

export default {
  data() {
    return {
      rowSelection,
      expandedRowItems,
      TYPE_ENUM,
      columns,
     
    }
  },

  created() {
  },
  mounted() {
  },
  methods: {
   
    // ------------------------------回调通知----------------------------------
    // list 分页
    handleListPageChange(val) {

      this.$refs.list._startLoading()
      setTimeout(()=>{   //设置延迟执行
        this.list = [{name: '张三2', age: 18, gender: 0},
					{name: '李四2', age: 19, gender: 1}]
        this.$refs.list._stopLoading()
      }, 1000)
    },

    // 按钮点击事件
    handleListButtonClick (val) {
      if (val.val.value == 'edit') {
   
      } else if (val.val.value == 'delete') {
     
      }
    },

  },
}
</script>

Upload

属性

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- |
| fileData | 文件数据 | [String, Object, Array] | - | 1.2.14 | | fileNum | 文件数量(0: 表示不限制) | Number | 1 | 1.2.14 | | multiple | 是否支持多选文件，开启后按住 ctrl 可选择多个文件。fileNum != 1时有效 | Boolean | false | 1.2.14 | | listType | 上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card | String | text | 1.2.14 | | action | 上传的地址 | String | 'https://upload.qiniup.com'' | 1.2.14 | | accept | 接受上传的文件类型 | String | | 1.2.14 | | formData | 上传所需参数或返回上传参数的方法 | Object | {token: '', domain: '七牛云domain || 接口访问地址', region: '', uploadURL: ''} | 1.2.14 | | qnTokenApi | 七牛云请求的API。 | Object | {method: 'GET',url: 'qnToken', params: {}, data: {}} | 1.2.14 | | title | 上传按钮的标题 | String | 上传 | 1.2.14 | | icon | 上传按钮的图标 | String | upload | 1.2.14 |

回调事件

| 事件名称 | 说明 | 回调参数 |
| ---- | ---- | ---- | | change | 文件上传事件回调处理：返回文件列表 | | 1.2.14 | | ok | 确认事件 | |

Page

组件描述

该组件封装了中后台页面基本的常规操作，主要由表头、搜索、列表、详情组件构成，该组件涵盖列表的网络请求，增、删、改、查等基本操作。在此之上也开放了一些回调事件，来支持一些组件无法支持的一些操作。支持：（add、edit、copy）操作

属性

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| ---- | ---- | ---- | ---- | ---- | | title | 标题 | String | | | 1.3.51 | header | 请求头 | Object | | | 1.2.16 | apiName | 基于ResetFul 接口风格的统一资源名称（若没有对网络请求进行封装处理，此处为接口全路径）；（该字段为空则需要自己手动处理API接口请求及逻辑） | String | - | 不建议为空 | 1.2.10 | extParams | API请求时的扩展参数 | Object | | | 1.2.10 | succCode | 接口返回的成功状态码 | String | "200" | | 1.2.10 | idKey | 模型对象对应的唯一标识字段 | String | "id" | | 1.2.10 | headerButtonItems | header组件中按钮组 | [BtnItem] | | | 1.2.10 | searchItems | 搜索控件组（为空，不显示搜索组件） | [Form-Item] | | | 1.2.10 | searchBtnItems | 搜索按钮组 | [BtnItem] | [{title: '查询',icon: 'search',value: 'search'},{title: '重置',icon: 'reload',value: 'reset'}] | | 1.2.10 | searchColumnNum | 搜索组件中每行显示的组件数 | Number | 4 | | 1.2.10 | detailColumnNum | 详情组件中每行显示的组件数 | Number | 4 | | 1.2.10 | detailWidth | 详情组件弹框宽度 | String | 50% | | 1.2.10 | columns | table上列的配置项 | [column]； 为空时与detailItems数据一致 | | 否 | 1.2.10 | isPagination | table是否支持分页 | Boolean | false | | 1.2.10 | pagination | table分页配置（isPagination=true 时有效） | Object | {pageNum: 1, pageSize: 10, total: 10} | | 1.2.10 | rowSelected | table是否支持行选择 | Boolean | false | | 1.2.10 | detailItems | 详情页控件配置项目 | [DetailItem] | | 是 | 1.2.10 | dividerOrientation | 详情页一级控件组所在分割线 enum:left righ center ;为空不显示分割头 | String | null | 是 | 1.2.10 | requestDetail | 详情页面是否需要请求详情接口获取数据 | Boolean | false | | 1.2.10 | dictApi | 需要通过接口获取的选择项数据或者字典数据接口（用于下拉框，列表反显等） | [DictApiItem] | | | 1.2.10

BtnItem

| 参数 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| title | 显示的名称 | String | - | 1.2.0 | | icon | 显示的图标 | String | - | 1.2.0 | | value | 唯一标识项 | String | - | 1.2.0 |

DetailItem

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | title | 当前组的名称 | String | - | 1.2.0 | | children | 该组下对应的子项 | [Form-Item] | - | 1.2.0 |

DictApiItem

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | header | 请求头 | Object | | | 1.2.16 | key | 需要进行结果数据渲染的配置项中的KEY | String | - | 1.2.0 | | url | URL地址 | String | - | 1.2.0 | | method | 请求方式 enum: GET POST | String | - | 1.2.0 | | | params参数 | Object | - | 1.2.0 | | valueKey | 选项数据中的唯一标识字段 | String | - | 1.2.0 | | labelKey | 选项中用来显示的标识字段 | String | - | 1.2.0 | | kwKey | 关键字搜索时，关键字对应的标识字段 | String | - | 1.2.0 |

回调事件

| 事件名称 | 说明 | 回调参数 | 版本 | | ---- | ---- | ---- | ---- | | tableRowChange | table的行选中事件 | | | tableBtnClick | table的按钮点击事件 | | | searchBtnClick | 搜索框的按钮点击事件 | | | delete | 被删除时间（api为空的情况下） | | | detailOk | 详情确认事件 | |

公共方法

| 事件名称 | 说明 | 参数 | | ---- | ---- | ---- | | _refreshTable | 刷新列表数据 | |
| _showEdit({record, operation_type}) | 显示编辑页面 | record: 被选择的一行数据对象；operation_type:操作类型（OPERATION_TYPE) |

Detail

组件描述

该组件封装了中后台页面详情操作，包含基本表单的增加、编辑、拷贝、详情操作

属性

| 参数 | 说明 | 类型 | 默认值 | 必须 | 版本 | | ---- | ---- | ---- | ---- | ---- | ---- | | width | 弹框宽度 | String | 50% | | 1.2.16 | header | 请求头 | Object | | | 1.2.16 | apiName | 基于ResetFul 接口风格的统一资源名称（若没有对网络请求进行封装处理，此处为接口全路径）；（该字段为空则需要自己手动处理API接口请求及逻辑） | String | - | 不建议为空 | 1.2.10 | extParams | API请求时的扩展参数 | Object | | | 1.2.10 | succCode | 接口返回的成功状态码 | String | "200" | | 1.2.10 | idKey | 模型对象对应的唯一标识字段 | String | "id" | | 1.2.10 | items | 详情页控件配置项目 | [DetailItem] | | 是 | 1.2.10 | dividerOrientation | 详情页一级控件组所在分割线 enum:left righ center ;为空不显示分割头 | String | null | 是 | 1.2.10 | requestDetail | 详情页面是否需要请求详情接口获取数据 | Boolean | false | | 1.2.10 | dictApi | 需要通过接口获取的选择项数据或者字典数据接口（用于下拉框，列表反显等） | [DictApiItem] | | | 1.2.10 | selectDict | 某个下拉选项的字典数据 | [DictApiItem] | | | 1.2.10

回调事件

| 事件名称 | 说明 | 回调参数 | 版本 | | ---- | ---- | ---- | ---- | | addSucc | 新增成功 | | | editSucc | 编辑成功 | | | ok | 无接口操作时，确认事件 | |

API

组件描述

封装了常用的接口接口方式，基于resetFul。

引入方式

import { h_getList, h_getDetail, h_add, h_edit, h_delete, h_request } from 'huibur-antd-vue'

接口

| 方法名 | 描述 | | ---- | ---- | | h_add ({url, data, header}) | 增加 |
| h_edit ({url, data, id, header}) | 修改 | | h_delete ({url, id, header}) | 删除 | Object | | h_getList ({url, params, header}) | 获取列表 |
| h_getDetail ({url, id, header}) | 获取数据详情
| h_request ({method, url, params, data, header, id}) | 其他通用网络请求
| h_download ({method, url, params, data, header, timeout, filename, id}) | 下载

参数说明

| 名称 | 参数类型 | 描述 | | ---- | ---- | ---- | | method | String | 请求方式（POST、GET、PUT、DETETE） |
| url | String | 网络请求地址全路径（注：可以拼接参数，效果与params、id参数相同） |
| params | Object | 添加到url的请求字符串中的，用于get请求 | data | Object | 添加到请求体（body）中的， 用于post请求 | header | Object | 请求头 | | id | String | 拼接在路径之后的参数，即restful中的/{id} | | filename | String | 下载的文件名称 | | timeout | String | 下载超时时间(默认6000) |

接口规范

说明

所有接口规范需严格遵循resetFul风格规范，即面向资源。列表、详情、新增、编辑等模型必须保持一致。

以User为例

列表

| 名称 | 说明 | 参数 | 版本 | | ---- | ---- | ---- | ---- | | url | /users | - | 1.2.10 | | method | GET | - | 1.2.10 | | 参数 | params {pageNum: 1, pageSize: 10} | - | 1.2.10 | | 返回数据 | {total: 10, pageNum: 1, list: [User]} 或 [User] | - | 1.2.10 |

详情

| 名称 | 说明 | 版本 | | ---- | ---- | ---- | | url | /users/{id} | 1.2.10 | | method | GET | 1.2.10 | | 参数 | path | 1.2.10 | | 返回数据 | User | 1.2.10 |

增加

| 名称 | 说明 | 版本 | | ---- | ---- | ---- | | url | /users | 1.2.10 | | method | POST | 1.2.10 | | 参数 | body (User) | 1.2.10 | | 返回数据 | User | 1.2.10 |

修改

| 名称 | 说明 | 版本 | | ---- | ---- | ---- | | url | /users/{id} | 1.2.10 | | method | PUT | 1.2.10 | | 参数 | body(User ) | 1.2.10 | | 返回数据 | User | 1.2.10 |

删除

| 名称 | 说明 | 版本 | | ---- | ---- | ---- | | url | /users/{id} | 1.2.10 | | method | DELETE | 1.2.10 | | 参数 | path | 1.2.10 |

说明

1.4.0版本以后将hList 组件改名为 hPage

关注我们