wigemUiBusiness

wigemUiBusiness 组件库

一款基于 wigem_ui 进行开发的业务组件库

此组件供内部使用，要想使用组件，详细文档请见上述链接

下载方式

npm install wigem_ui_business 或者 yarn add wigem_ui_business

从项目中引用

在 main.ts 中引用

这里指展示此组件引用，element 组件需要自行引用

import { createApp } from 'vue'
import wigemModule from 'wigem_ui'
import 'wigem_ui/dist/style.css'
import wigemBusiness from 'wigem_ui_business'
createApp(App).use(wigemModule).use(wigemBusiness).mount('#app')

组件

wgPicker 日期选择器

<wg-picker></wg-picker>

属性

属性名	说明	类型	可选值	默认值
model-value/v-model	绑定值	string	--	--
showValue	返回转换日期值	string	--	--
disabled	是否禁用状态	boolean	true/false	false

方法

方法名	说明	参数
handelClick	获取转换日期格式	--
monthStr	获取月份	--
yearStr	获取年份	--
initDataTime	获取当前日期	--

Table 表格组件

<wg-table></wg-table>

属性

属性名	说明	类型	可选值	默认值
url	请求 url	string	--	--
data	数据 data	Array	--	--
headerTitle	表格标题	string	--	--
columns	需要展示的列，prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽	Array	--	--
where	排序条件	Object	--	--
isPage	是否分页	boolean	true/false	true
param	分页参数{pageNo: 1, pageSize: 20, count: 0,}	Object	--	{pageNo: 1, pageSize: 20, count: 0,}
isTableTitle	是否展示标题	boolean	true/false	false
timeOut	延时加载	Number	--	100
isShowSummary	是否在表尾显示合计行	boolean	true/false	false
border	是否带边框	boolean	true/false	true
selection	是否开启多选	boolean	true/false	false
type	选择方式（仅用于多选时）	string	select(多选)/radio(单选)	select
tableHeight	表格高度	Number	--	330
dataTime	时间	string	--	--
highlight	是否高亮	boolean	true/false	false

方法

方法名	说明	参数
_tableInit	加载默认表格配置信息	--
load	重新加载	--

插槽

名称	说明
--	自定义列的内容 作用域参数为 { row, column, $index }

wg-dictionary 下拉框字典组件

<wg-dictionary></wg-dictionary>

属性

属性名	说明	类型	可选值	默认值
modelValue	绑定值	string	--	--
code	字典键值	string	--	--
placeholder	输入框占位文本	string	--	'请选择'
multiple	是否开启多选	boolean	true/false	false
multipleLimit	最大选择数量	Number	--	--
collapseTags	多选时是否将选中值按文字的形式展示	boolean	true/false	false

封装请求方法

新建 utils 文件夹，新增 request 文件

import request from 'wigem_ui_business'
// 导出 axios 实例
export default request.common

在文件中使用

import request from '/@/utils/request'

export function 方法名(params: object) {
  return request({
    url: url,
    method: ' 请求方式（get、post）等',
    data: params,
  })
}