Htui-yllkbz NPM

一、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|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--选择用户
>组件使用说明:主要用于在系统中需要选择部门下用户时候或者查看用户时候使用
```c
 <ht-select-user v-model="value"></ht-select-user>

|@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.info0.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| -|-|

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 }|

一、HtUI是什么

二、使用步骤

1.引入库

2.组件库

1.HtExport--导出文件

|-|自定义导出按钮|

2.HtDrawer--抽屉

|@change| 改变数值时候的回调|Function| -|默认会代入当前id|

4.HtSelectOrg--选择部门

|@change| 改变数值时候的回调|Function| -|默认会代入当前id|

4.HtSelectBaseData--选择基础数据

|@change| 改变数值时候的回调|Function| -|默认会代入当前id|

5.HtTable--table表格

其他