loit-web-component-gx前端组件库

介绍

[loit-web-component-gx]是一个前端组件库，默认蓝色主题风格。

中文文档

网址

Github 仓库 | [预览地址] [应用地址]http://bba.loiot.com:8303/api-portal/cas/login

本项目不支持低版本浏览器(如 ie)

注意：该项目使用 [email protected]+ 版本，所以最低兼容 [email protected]+

修订记录

2024.08.52 V0.5.4

###不做功能修改，仅测试发布流程

2024.08.52 V0.5.3

###1.表单EXForm，增加默认的多选样式checkbox，提供赋值勾选和配置隐藏选项hideOptions、显示选项showOptions的功能

2024.07.17 V0.5.0

###1.表单EXForm，文本输入框添加参数rows配置高度

2023.11.23 V0.4.2

###1.去掉组件内的大部分字号设置，在ex.scss设置统一字号 ###2.完善搜索栏行间距 ###3.完善表单不同尺寸的样式

2023.11.2 V0.3.36

###1.树EXTree，修改树根节点代码用root表示

2023.10.27 V0.3.35

###1.表单EXForm，增加size参数设置尺寸大小 ###2.表单EXForm，表单行间距根据size自适应

2023.10.19 V0.3.30

###1.优化表单样式，使得行内占比默认100%

2023.10.11 V0.3.24

###1.树EXTree：增加属性treeData直接赋值 ###2.树EXTree：defaultProps增加useKey属性，用于配置点击节点时需要获取数据对象的字段名字符串数组集合

2023.09.28 V0.3.15

###1.地图EXGis：修改jquery声明

2023.09.18 V0.3.6

###1.搜索栏EXSearchHead：筛选功能默认收起，示例页面的导出按钮从筛选栏挪到表格操作行 ###2.树EXTree：可自定义修改叶子节点的图标

2023.09.15 V0.3.5

###1.人员选择组件EXChoosePerson：添加(personOrgCode|personId|personName)参数来实现初始化已选人员，兼容自定义查询人员的方法和默认自动查询系统用户两种

2023.09.12 V0.3.3

###1.表单组件EXForm：封装底部多个操作按钮bottomBtnProps(width|align|operationHandle)，可设置行宽度、对齐方式、按钮属性和事件

2023.09.08 V0.3.2

###1.表单组件EXForm、下拉框组件EXSelect：添加远程搜索

2023.09.07 V0.3.1

###1.选择人员组件EXChoosePerson：添加clickUnit事件传参，兼容自定义响应部门点击事件，从而自定义查询人员列表

2023.09.04 V0.2.31

###1.搜索栏EXSearchHead：增加单选框类型

2023.09.01 V0.2.30

###1.搜索栏EXSearchHead：元素增加show(*true|false)参数配置是否隐藏，默认是显示

2023.08.30 V0.2.26

###1.表单EXForm：下拉框的选项可添加自定义的按钮和事件，添加示例到编辑页面的字典下拉框

2023.08.28 V0.2.23

###1.表格EXTable：添加iconSlotName配置自定义图标

2023.08.22 V0.2.10

###1.添加EXCheckButton 多选框独立组件

2023.08.18 V0.2.9

###1.优化流转信息EXProcess：更新样式、添加自定义操作按钮数组、添加自定义文字行

###2.添加EXAttachDialog附件列表弹窗组件

###3.EXDetailContent详情：添加labelWidth传参自定义标签宽度

2023.08.17 V0.2.7

###1.完善EXChooseDepartment/EXChoosePerson：

参数兼容：1.orgCode传递父部门编码，组件内自己查询构造树；2.treeData传递树，组件内直接赋值，解决渲染速度慢的问题

2023.08.15 V0.2.2

###1.完善EXChooseAddress地图选择：修复返回地址时对于直辖市重复拼接的问题

2023.08.09 V0.2.0

###1.新增EXStageBox 进度状态组件

###2.完善EXProcess 添加阶段名称和操作类型的显示、样式调整

2023.08.01 V0.1.34

###1.EXForm/EXSearchHead：响应日期事件由focus改成change

2023.07.26 V0.1.30~33

###1.EXDetailContent详情：添加对非附件的图片的显示

###2.EXStatDateSearch：添加统计周期组件，提供常用统计周期(本日、本周、本月、本季度、本年)的勾选和选择时间控件的初始化，支持自定义展示

###3.EXSearchHead搜索栏：新增类型checkstatdate显示EXStatDateSearch组件

###4.EXSearchHead/EXForm/EXSelect：添加showOptions/hideOptions(Array)参数配置显示/隐藏指定选项数组

2023.07.20 V0.1.27~28

###1.EXTable：添加hasTotalRow和totalRowText属性实现带有序号的表格的合计行的序号列的文字显示为“合计”，可修改文字内容 tableHeadConfig添加show属性切换表头列的显示/隐藏

2023.07.19 V0.1.25~26

###1.添加EXMultiTable组件和示例页面“多个表格”：适应一个页面多个分页表格组件的场景

2023.07.18 V0.1.24

###1.EXSearchHead：添加hasSearchResetBtn(*true|false)属性控制重置按钮的显示；调整关键字输入框的位置样式，根据右侧是否显示收起筛选、重置而变化

###2.EXDetailContent：修复添加了支持对象关联多级属性方法后，覆盖业务默认值的问题

2023.07.11 V0.1.19

###1.EXDetailContent：支持对象关联多级属性

2023.07.10 V0.1.16~18

###1.EXSearchHead组件：添加resetEXSTree重置和修改树选项的方法；添加openSearchForm(*true|false)默认展开操作栏；调整查询按钮占位宽度

###2.EXTableTopBtnDesc组件：添加slotName(String)设置文字描述行使用slot方式时的slot名称，与业务页面的slot模板名称一致

###3.EXForm组件：添加resetEXSTree重置树选项的方法

2023.07.05 V0.1.15

###1.EXForm组件：下拉框选择回调函数的第二个参数返回选中的文本内容

2023.06.30 V0.1.9

###1.添加EXImportDialog组件：封装文件导入的弹窗和上传到后端功能

2023.06.28 V0.1.7-15

###1.树形下拉框EXSelectTree：限制最大高度、添加滚动条；回调函数回传值对象

2023.06.21 V0.1.7-7~12

###1.表格EXTable：添加嵌套表头功能

###2.树EXTree：

1）点击树节点回传当前点击的值对象fetchTableData(codeStr,item,containsNull)

2）添加ref值exTree，方便使用原生方法

3）添加多选树节点的回传函数checkTreeData(item)

2023.06.20 V0.1.7-4~6

###1.搜索栏EXSearchHeand：

1）添加参数hasHeadTop(*true|false)配置是否显示顶部标题栏

2）添加参数hasCloseSearch(*true|false) 是否显示展开收起操作栏

3）添加参数showDivider(*true|false)是否显示顶部下划线样式

4）操作按钮operationHandleBtn添加event属性自定义响应函数名

2023.06.15 V0.1.7-3

###1.添加“选项卡表格-下”页面规范

###2.搜索栏EXSearchHeand：未配置参数title时不显示左侧图标；添加参数hasSearchWords(*true|false)配置是否显示模糊查询输入框

###3.选项卡EXTabs：添加参数align(*left|right )配置对齐方式

2023.06.14 V0.1.7-1~0.1.7-2

###1.搜索栏EXSearchHeand样式调整

2023.06.14 V0.1.7

###1.添加“选项卡表格-上”页面规范；折叠菜单颜色调整；恢复一级导航栏

###2.搜索栏EXSearchHeand添加插槽slot；选项卡EXTabs添加cssStyle配置自定义样式

###3.搜索栏EXSearchHeand、表单EXForm添加默认placeholder

2023.06.09 V0.1.6

###1.添加EXArticle、EXManTitle组件

###2.系统瘦身

2023.06.08 V0.1.1~0.1.5

###1.外部系统可覆盖修改组件库的访问网址

###2.外部系统可切换自身及组件库的主题颜色

2023.06.02 V0.1.0

###1.添加地图选择组件默认中心位置的开放参数

###2.添加公共函数EXMixin、EXList

###3.修改打包配置

2023.05.29 V0.0.2~0.0.18

###1.添加首页说明

###2.添加附件文字配置的开放参数

2023.05.29 V0.0.1

###1.发布

下载

git：git clone https://github.com/mgbq/nx-admin.git

npm：npm install

功能

- 表格示例
  - 普通表格
  - 查询表格
  - 树形表格
  - 多个表格
  - 选项卡表格-上
  - 选项卡表格-下
- 表单示例
  - 编辑
  - 详情
  - 导航详情
  - 选项卡详情  

组件清单

- EXArticle 文章内容
- EXMainTitle 文章标题
- EXProcess 流转信息
- EXCharts 图表
- EXDetailContent 表单详情
- EXHeader 编辑/详情头部
- EXNavList 导航条
- EXDialog 弹窗
- EXChooseAddress 地图地址选择
- EXChooseDepartment 部门选择
- EXChoosePerson 人员选择
- EXConfirmDialog 确认框
- EXImportDialog 文件导入弹窗
- EXAttachDialog 附件弹窗
- EXForm 表单编辑
- EXSelect 普通下拉框
- EXSelectTree 树形下拉框
- EXGis 地图
- EXHoverTitle 标题
- EXNodata 无数据提示
- EXPagination 分页 
- EXPreview 图片/视频预览
- EXSearchHead 搜索栏
- EXStatDateSearch 统计周期
- EXTable 表格
- EXMultiTable 表格
- EXTableColumn 嵌套表头
- EXTableTopBtnDesc 表格头部
- EXTabs 选项卡
- ETree 简单树
- EXTree 二次封装树
- EXUploadImg 图片/视频上传
- EXUploadFile 文件上传
- EXStageBox 进度状态

开发

# 克隆项目
git clone https://github.com/mgbq/loit-web-component-gx.git

# 安装依赖
npm install
   
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

浏览器访问 http://localhost:9526

调用

# 查询当前的镜像网址
npm get registry

# 使用官方源
npm config set registry https://registry.npmjs.org/

# 卸载依赖（可选）
npm uninstall loit-web-component-gx

# 安装最新版本的依赖
npm install loit-web-component-gx@latest

#main.js导入组件库
import exui from 'loit-web-component-gx'
Vue.use(exui)

#main.js注册组件访问网址
import * as exConfig from 'loit-web-component-gx/dist/config/env'    #exConfig是组件库的访问网址配置文件
import * as myConfig from '@/config/env'                             #myConfig是外部系统的访问网址配置文件
const urlAttr = Reflect.ownKeys(exConfig)
urlAttr.forEach(key => {
  if(Reflect.has(myConfig, key) && typeof myConfig[key] === "string"){
    var funcName = 'set' + key.replace(key[0],key[0].toUpperCase());
    if(typeof exConfig[funcName] === "function"){
      Reflect.apply(exConfig[funcName], exConfig, [myConfig[key]])
    }
  }
})
#设置主题颜色
$config.themeColor = 'Red'
#重新绑定配置$config
bindToGlobal(exConfig, '$config')

#main.js导入富文本
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import QuillEditor from 'vue-quill-editor'
Vue.use(QuillEditor)

#main.js导入地图样式
import 'maptalks/dist/maptalks.css'

#permission.js修改
global.changeTheme($config.themeColor)