huibur-antd-vue

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

组件中控件的枚举值

OPERATION_TYPE

组件中的操作类型

组件

Confirm

公共方法

示例

	<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

属性

Form-Item

SelectItem

Form-Button-Item

回调事件

公共方法

示例

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

属性

回调事件

公共方法

column

示例

<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

属性

回调事件

Page

组件描述

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

属性

BtnItem

DetailItem

DictApiItem

回调事件

公共方法

Detail

组件描述

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

属性

回调事件

API

组件描述

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

引入方式

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

接口

参数说明

接口规范

说明

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

以User为例

列表

详情

增加

修改

删除

说明

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

关注我们