loit-web-component-gx
Version:
广西时代凌宇前端组件库
492 lines (373 loc) • 13.8 kB
Markdown
<p align="center">
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.7.14-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.15.13-brightgreen.svg" alt="element-ui">
</a>
<a href="https://github.com/mgbq/nx-admin/releases">
<img src="https://img.shields.io/badge/release-0.4.0-blue.svg" alt="GitHub release">
</a>
## loit-web-component-gx前端组件库
</p>
# 介绍
[loit-web-component-gx]是一个前端组件库，默认蓝色主题风格。
[中文文档](https://mgbq.github.io/nx-admin-site/zh/)
**网址**
[Github 仓库](https://github.com/mgbq/loit-web-component-gx) |
[预览地址]
[应用地址]http://bba.loiot.com:8303/api-portal/cas/login
**本项目不支持低版本浏览器(如 ie)**
**注意：该项目使用 element-ui@2.15.13+ 版本，所以最低兼容 vue@2.7.14+**
# 修订记录
2025.10.16 V0.5.40
--
##1.完善附件下载增加图片类型附件是预览还是下载的控制
2025.10.16 V0.5.39
--
##1.完善附件下载接口增加fileName参数
2025.10.16 V0.5.34
--
##1.完善回显附件的接口
2025.10.16 V0.5.33
--
##1.将word类型的预览按钮去掉
2025.10.16 V0.5.32
--
##1.调整附件所有接口，做成可配置
2025.10.16 V0.5.29
--
##1.调整附件getAttachmentListUrl 接口，做成可配置
2025.09.30 V0.5.27
--
##1.调整EXImportDialog 可以通过showModel：true/false 控制是否展示下载模版
2024.12.23 V0.5.26
--
##1.调整详情页面附件通过参数控制预览按钮
2024.12.23 V0.5.25
--
##1.调整el-form 中handelEvent 的空指针异常
2024.12.23 V0.5.23
--
##1.调整编辑页面各个控件的placeholder去掉冒号
2024.12.23 V0.5.22
--
##1.调整表单样式级联结构，修正cssStyle样式在某些条件下不起效的问题
2024.12.23 V0.5.21
--
##1.调整EXTable表格问题
2024.12.23 V0.5.20
--
##1.修改表格组件错位问题
2024.12.23 V0.5.19
--
##1.修改编辑页面图片显示出现闪一下的问题
2024.12.23 V0.5.18
--
##1.修改详情页面图片显示出现闪一下的问题
2024.12.23 V0.5.17
--
##1.编辑页面下拉框控件el-select增加is-select-success 状态样式
##2.修改详情页面样式
2024.12.23 V0.5.16
--
##1.去掉编辑页面下拉框控件el-select增加is-select-success 状态样式
2024.12.23 V0.5.15
--
##1.编辑页面下拉框控件el-select增加is-select-success 状态样式
2024.12.23 V0.5.14
--
##1.调整日期控件的字体大小
2024.12.23 V0.5.13
--
##1.调整表头列表样式
2024.12.23 V0.5.12
--
##1.调整更新问题
2024.12.23 V0.5.11
--
##1.调整附件上传提示位置及详情页面附件回显不显示时间
2024.12.23 V0.5.10
--
##1.调整森防样式效果
2024.11.26 V0.5.8
--
##1.修复附件管理接口，兼容不同环境下的附件管理接口
2024.11.26 V0.5.7
--
##1.调试查看附件不显示问题
2024.11.26 V0.5.6
--
##1.调试附件不显示问题
2024.11.26 V0.5.5
--
##1.附件管理接口改成在env.js中配置attachmentUrl，不再默认使用门户的附件管理接口
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 进度状态
```
# 开发
```bash
克隆项目
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
# 调用
```bash
查询当前的镜像网址
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)
```