HtUI使用文档

---

一、HtUI是什么

HtUI是基于ElementUI@2.14进行二次开发的一套UI库 并且该文档中的HtUI版本是大于等于@1.3.58。
HtUI源码库请移步这里

---

二、使用步骤

1.引入库

代码如下：

yarn add htui-yllkbz
import Htui from "htui-yllkbz"
import "htui-yllkbz/lib/htui.css";
Vue.use(Htui);

2.组件库

1.HtExport–导出文件

组件使用说明:主要用于附件的导出 将主要的导出方法进行了统一封装处理

 <ht-export method="method" :url="url" :exportBefore="exportBeforeFunc" :fileName="fileName"></ht-export>

Attributes/Events:

参数名	说明	类型	可选值	默认值
method	请求方式(必填)	string	get,post	-
url	请求地址(必填)	string	-	-
file-name	导出文件名,如果不传则取后端传过来的文件名	string	-	-
export-before	是否允许导,默认允许导出	boolean	-	true

Slot:

名称	说明
-	自定义导出按钮

---

2.HtDrawer–抽屉

组件使用说明:对el-drawer进行了优化和封装 ,默认添加了foot以及对body内容进行滚动条处理

 
    <ht-drawer
      v-model="state.visible"
      :title="title"
      @onOk="onOk"
      @onCancel="onCancel"
    >
     ...
     body
     ...
    </ht-drawer>

Attributes/Events:

参数名	说明	类型	可选值	默认值
value	是否打开弹窗	boolean	true	false
loading	按钮的加载状态	boolean	true	false
title	抽屉名称	string	-	-
size	尺寸	string	-	50%
direction	弹出方向	string	-	参考element-drawer
append-to-body	Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true	boolean	true,false	true
wrapper-closable	是否可以通过按下 ESC 关闭 Drawer	boolean	-	false
close-on-press-escape	是否可以通过按下 ESC 关闭 Drawerr	boolean	-	false
destroy–on-close	控制是否在关闭 Drawer 之后将子元素全部销毁	boolean	-	false
modal	是否需要遮罩层	boolean	-	true
custom-class	Drawer 的自定义类名	string	-	-
modal-append-to-body	遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上	boolean	-	true
show-close	是否展示右上角的关闭图标	boolean	-	true
with-header	控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效	boolean	-	true
with-footer	控制是否显示 foot 栏, 默认为 true, 当此项为 false 时, foot attribute 和 foot slot 均不生效	boolean	-	true
@onOk	用户点击foot里面的确定按钮时候调用该方法	Function	-	-
@onCancel	用户点击foot里面的确定按钮时候调用该方法	Function	-	-

Slot:

名称	说明
-	Drawer中body的内容
title	Drawer 标题区的内容
foot	Drawer中foo的内容

---

3.HtSelectUser–选择用户

组件使用说明:主要用于在系统中需要选择部门下用户时候或者查看用户时候使用

 <ht-select-user v-model="value"></ht-select-user>

Attributes/Events:

参数名	说明	类型	可选值	默认值
value/v-model	人员ID	string	-	-
org	部门id,传入值之后就会根据该值自动过滤成该部门下的用户	string	-	-
size	尺寸	string	medium / small / mini-	-
placeholder	输入框占位文本	string	-	-
disabled	是否禁用	boolean	-	false
clearable	是否可以清除	boolean	-	false
multiple	是否可以多选	boolean	-	false
check-strictly	是否严格的遵守父子节点不互相关联	boolean	-	true
readonly	是否只读	boolean	-	false
show-all-levels	输入框中是否显示选中值的完整路径	boolean	-	true
collapse-tags	多选模式下是否折叠Tag	boolean	-	false
@change	改变数值时候的回调	Function	-	默认会代入当前id

---

4.HtSelectOrg–选择部门

组件使用说明:主要用于在系统中需要选择部门或者查看部门时候使用

 <ht-select-org v-model="value"></ht-select-org>

Attributes/Events:

参数名	说明	类型	可选值	默认值
value/v-model	部门ID	string	-	-
org	部门id,传入值之后就会根据该值自动过滤成该部门以及该部门的子部门	string	-	-
size	尺寸	string	medium / small / mini-	-
placeholder	输入框占位文本	string	-	-
disabled	是否禁用	boolean	-	false
clearable	是否可以清除	boolean	-	false
multiple	是否可以多选	boolean	-	false
check-strictly	是否严格的遵守父子节点不互相关联	boolean	-	true
readonly	是否只读	boolean	-	false
show-all-levels	输入框中是否显示选中值的完整路径	boolean	-	true
collapse-tags	多选模式下是否折叠Tag	boolean	-	false
@change	改变数值时候的回调	Function	-	默认会代入当前id

---

4.HtSelectBaseData–选择基础数据

组件使用说明:主要用于在系统中需要选择基础数据时候使用

 <ht-select-base-data v-model="value"></ht-select-base-data>

Attributes/Events:

参数名	说明	类型	可选值	默认值
value/v-model	部门ID	string	-	-
dataTypeId	基础数据的Value值(必填)	string	参考基础数据页面的Value	-
org	部门id,传入值之后就会根据该值自动过滤成该部门下面的基础数据	string	-	-
size	尺寸	string	medium / small / mini-	-
placeholder	输入框占位文本	string	-	-
disabled	是否禁用	boolean	-	false
clearable	是否可以清除	boolean	-	false
multiple	是否可以多选	boolean	-	false
check-strictly	是否严格的遵守父子节点不互相关联	boolean	-	true
readonly	是否只读	boolean	-	false
hide-code	是否隐藏数据展示或选中时候的value值	boolean	-	false
show-all-levels	输入框中是否显示选中值的完整路径	boolean	-	true
collapse-tags	多选模式下是否折叠Tag	boolean	-	false
by-code	是否通过基础数据的value值来做唯一key,当前默认是通过id来选择值.当选择严重等级或响应等级时候必须传入true	boolean	-	false
@change	改变数值时候的回调	Function	-	默认会代入当前id

---

5.HtTable–table表格

组件使用说明:在系统中表格样式和功能统一封装(基于Element UI具体文档也可以参考https://element.eleme.cn/#/zh-CN/component/table),该组件主要提供了分页功能,列的自定义展示功能,列的拖动排序功能

 <ht-table
      :data="state.dataSource"
      @onchange="changePage"
      border
      height="calc(100vh - 200px)"
      highlight-current-row
      :page-info="{
        currentPage: state.currentPage,
        pageSize: state.maxResultCount,
        skipCount: state.skipCount,
        totalCount: state.totalCount,
      }"
      :columns="state.columns"
    >
      <template slot-scope="{ row }" slot="handel">
        <el-button type="text" style="margin-left:12px" @click="edit(row)"
          >编辑</el-button
        >
      </template>
    </ht-table>

Table Attributes:

参数名	说明	类型	可选值	默认值
data	显示的数据	array	-	-
columns	详情见Column属性	Column[]	-	-
height	Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。)	string/number	-	-
max-height	Table 的最大高度。合法的值为数字或者单位为 px 的高度。	string/number	-	-
stripe	是否为斑马纹 table	boolean-	true
border	是否带有纵向边框	boolean	-	true
fit	列的宽度是否自撑开禁用	boolean	-	true
show-header	是否显示表头	boolean	-	true
highlight-current-row	是否要高亮当前行	boolean	-	true
current-row-key	当前行的 key，只写属性	String,Number	-	-
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function({row, rowIndex})/String	-	-
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	Function({row, rowIndex})/Object	-	-
header-row-class-name	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className	Function({row, rowIndex})/String	-	-
header-row-style	表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。	Function({row, rowIndex})/Object	-	{ background: ‘var(–primary-92)’ }
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className	Function({row, column, rowIndex, columnIndex})/String	-	-
header-cell-style	表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex})/Object	-	-
row-key	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。	Function(row)/String	-	id
empty-text	空数据时显示的文本内容，也可以通过 slot=“empty” 设置(开发中)	string	-	暂无数据
checked	是否启用复选框	boolean	-	false
selectKey	设置禁用check行的字段 ,通过该字段来判断改行是否禁用,所以data数据中也必须包含该字段	string	-	selectable
show-filter	是否启用自定义列展示排序功能	boolean	-	false
draggable	是否可以拖动排序	boolean	-	true
config-show	为true时候默认表头就为空,否则就为初始的全部,需配合show-filter一起使用	boolean	-	false
show-filter	是否启用自定义列展示排序功能	boolean	-	false
uu-id	table的唯一key用于缓存自定义列功能,推荐使用UUID格式	string	-	-
hide-order	是否隐藏序号那一列	boolean	-	false
key-name	序号那列的头名称	string	-	序号
hide-page	是否隐藏分页	boolean	-	false
page-info	详情见pageInfo属性	PageInfoType	-	-
pagination	分页的一些额外属性(如:hideOnSinglePage,small)	object	-	-
is-expand	是否启用expand展开行	boolean	-	false
span-method	合并行或列的计算方法	Function({ row, column, rowIndex, columnIndex })	-	-
show-summary	是否在表尾显示合计行	boolean	-	false
sumText	合计行第一列的文本	string	-	合计
summaryMethod	自定义合并方法	Function({ columns, data })	-	-

Column Attributes/Events:

参数名	说明	类型	可选值	默认值
currentPage	唯一KEY	string	-	-
title	列名	string	-	-
width	列宽	string /number	-	-
minWidth	最小宽度	string/number	-	-
fixed	列是否固定在左侧或者右侧，true 表示固定在左侧	string, boolean	true, left, right	-
sortable	对应列是否可以排序，如果设置为 ‘custom’，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件	boolean, string	true, false, ‘custom’	false
resizable	对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）	boolean	-	true
align	对齐方式	string	left/center/right	left
headerAlign	表头对齐方式，若不设置该项，	string	left/center/right	left
className	列的 className	string	-	-
labelClassName	当前列标题的自定义类名	string	-	-
hide	是否隐藏当前列	boolean	-	false
deafaultShow	默认是否显示	boolean	-	-
spread	时间是否跨行显示(上下结构的时分秒-年月日)	boolean	-	false
type	数据自动解析时候的类型(人员ID,部门ID,时间,基础数据,布尔值,图片,附件)	userId /org/ time/ common/ boolean/ img / file	-	-
commonType	只有当type='common’时候有效	baseDataId /roleId/ baseDataName/baseDataValue	-	-
hideode	当type===common时候 设置是否隐藏基础数据的value	boolean	-	-
showOverflowTooltip	当内容过长被隐藏时显示 tooltip	boolean	-	true
hideCode	当type===common时候 设置是否隐藏基础数据的value	boolean	-	-
disabled	自定义列是否是否禁止操作该列	boolean	-	-
property	自定义列时候展示额外信息	string	-	-
checked	自定义列时候默认是否选中	boolean	-	-

PageInfo Attributes/Events:

参数名	说明	类型	可选值	默认值
currentPage	当前第几页	number	-	-
pageSize	每页最大条数	number	-	-
currentPage	当前第几页	number	-	-
skipCount	跳过多少条开始查询	number	-	-

Table Events:

主要的事件都可以参考Element UI官方 这里不在详细列出,只列出新增部分

参数名	说明	参数
onchange	分页回调	(data:PageType)
customColumn	自定义列的回调	(columns:Column[ ])

Table Slot:

name	说明
${item.key}	自定义列的内容，参数为 { row, column, $index },例如:当要修改column中key=age的内容,slot中name=age
header_${item.key}	处理重定义table头相关信息 header_key,参数为{ {column, $index }例如:当要修改column中key=age的头部内容,slot中name=header_age
footerLeft	自定义分页内容,当hidePage=true时候将失效,此处建议使用el-col
header_order	排序列的头信息,自定义之后自定义排序功能失效,默认显示序号
body_order	排序列的body信息,默认展示的是当前行所在的位置,参数为 { row, column, $index }
expand	启用展开行之后的自定义展开行内容(is-expand=true才生效)

6.HtSelectCron–选择CRON表达式

组件使用说明:主要用于在系统中需要选择cron表达式时候使用,自动解析表达式内容

 <ht-select-cron v-model="value"></ht-select-cron>

Attributes/Events:

参数名	说明	类型	可选值	默认值
value/v-model	cron表达式	string	-	-
disabled	是否禁用	boolean	-	false
readonly	是否只读	boolean	-	false
@change	改变数值时候的回调	Function	-	-

---

7.HtSelectTimeSlot–选择时间段(PT表达式)

组件使用说明:主要用于在系统中需要选择时间段(PT表达式)时候使用,自动解析表达式内容

 <ht-select-time-slot v-model="value"></ht-select-time-slot >

Attributes/Events:

参数名	说明	类型	可选值	默认值
value/v-model	cron表达式	string	-	-
disabled	是否禁用	boolean	-	false
readonly	是否只读	boolean	-	false
@change	改变数值时候的回调	Function	-	-

---

其他

如果发现什么bug可以在评论区留言,正在不断完善中