# 指南
hawthorn-web-vue hawthorn 前端工程（vue）历史版本记录
作者:andy.ten@tom.com & xukaixing@hotmail.com
Hawthorn框架特点：
- 封装 所有标签均采用
ht-自定义标签，基于而不限于elementui，可灵活的替换elementui标签而不改变业务代码 - 动态路由，业务路由均采用后端menu菜单配置方式动态添加路由
- form表单与table列表均采用json格式来动态定义，避免了template标签内的内容过于繁琐
- 下拉框字典，支持标准字典与表数据查询字典， 实现 单选 / 多选 / 过滤 / 级联
- 表单组件
- 支持配置必填项
- 支持配置输入最大长度，实现汉字占2位，字符占1位大小判断
- 支持配置输入域格式类型校验
- 表格组件
- 支持动态列配置
- 支持行编辑
- 支持当前页排序和后端排序两种模式
- 支持表格内容全表搜索
- 支持表头自定义筛选（支持文本/字典/日期筛选）
- 支持扩展明细嵌套子表格
- 数据导出实现按当前登录人自定义导出列
- 支持翻页复选
- 列支持列宽拖拽
- 支持自定义列隐藏/显示
- 列表自带刷新按钮，可直接刷新列表数据
- 导出excel数据自带行单元格合并以及数字列（金额、数量等）自动转数值格式
- 导入excel实现导入数据校验，能够导出全部校验未通过数据，并导入已校验正确的数据
- 查询条件自动动态拼接，查询条件输入','后可查询出多条匹配值
- 按钮自带快捷键与icon图标
- 日期组件中区间日期，支持分别单独选择开始日期与结束日期
- 明细页或审核页内容多时，实现锚点滚动展示方式
- 实现三种弹出子页方式：弹出框（dialog）、抽屉（drawer）、横向导航（nav-tab）
- 支持多种主题皮肤（蓝色/红色）
# 前序
- 安装全局
nodejs请使用v12.22.10版本，建议使用nvm管理 nodejs 多个版本 - 建议使用
yarn管理 npm 依赖 - 前端开发 ide 建议使用
vscode:latest, 必要的插件列表:Vetur: 支持.vue、.ts、.sass 文件的语法高亮显示以及代码补全提示EditorConfig: 代码格式化工具，无 lint 检查代码语法能力Prettier: 代码格式化工具，无 lint 检查代码语法能力Eslint: 校验脚本语言语法工具Stylelint: 校验css语法工具Document This: 生成js注释插件工具koroFileHeader: 生成js文件头和js方法注释工具markdownlint: markdown校验工具stylelint: css校验工具TODO Highlight: todo高亮语法Auto Close Tag: 自动关闭tagBeautify: js美化Beautify css/sass/scss/less: style美化Bookmarks: 代码收藏夹Bracket Pair Colorizer: 大括号颜色Code Runner: 代码运行Code Spell Checker: 代码拼写检查Document This: 生成js注释文档EditorConfig for VS Code: editorconfig配置ESLint: eslint插件Import Cost: import导入大小提示indent-rainbow: 彩虹分段JavaScript (ES6) code snippets: es6代码提示koroFileHeader: js文件、方法注释模版Live Server: 运行serverMarkdown All in One: markdown文件管理Markdown Preview Github Styling: markdown文件预览markdown-formatter: markdown文件格式化markdownlint: markdown编写lintPrettier - Code formatter: prettier美化Project Manager: 多个工程管理工具Rainbow Brackets: 彩虹括号Stylelint: style 的lint插件stylus: css高亮Svg Preview: svg预览工具vscode-element-helper: el-elementui提示工具
# 运行
# 使用 yarn 或 npm 命令
# 安装依赖
$ yarn install 或 npm install
# 启动开发服务
$ yarn dev 或 npm run dev
# 启动构建生产服务
$ yarn build 或 npm run build
# 本地预览打包后dist目录应用：
$ npm install serve -g
$ serve -s ./dist
2
3
4
5
6
7
8
9
10
11
12
# 关键依赖
推荐使用 vue ui GUI 添加
huskygit hook 依赖 npm install husky --save-devlint-staged关联 git 操作依赖 npm install lint-staged --save-deveslint@tinymce/tinymce-vue富文本插件@vue/babel-plugin-transform-vue-jsxbabel.config.js 中配置的 jsx 转换依赖babel-plugin-transform-remove-consolebabel移除console语句插件sass、sass-loadersass、scss解析器script-ext-html-webpack-pluginhtml内嵌脚本插件vuexnpm install vuex@3 --save vuex@3对应vue@2版本vue-router: npm install vue-router@3 --save vue-router@3对应vue@2版本js-cookie: js处理cookie组件svg-sprite-loader: svg雪碧图loadernprogress: 网页顶部进度条插件qs: qs.stringify处理json串为url参数格式axiosrequest请求封装插件v-viewer图片预览查看插件vue-qr二维码插件
# 常见问题
安装yarn使用npm安装：$ npm install -g yarn 查看版本：$ yarn --version1
2全局安装eslint使用npm安装：$ npm install -g eslint babel-eslint 注意： 如果使用nvm管理不同的nodejs版本，需要在当前使用版本上执行命令1
2配置镜像加速配置淘宝的镜像源： $ npm config set registry https://registry.npm.taobao.org 还原npm镜像：$ npm config set registry https://registry.npmjs.org/ 清除缓存：$ npm cache clean --force1
2
3linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题1. 单独安装：$ npm install --unsafe-perm node-sass 2. 直接使用：$ npm install --unsafe-perm1
2切换nodejs版本使用nvm命令： nvm alias default 版本号
注意切换完后，重启vscode运行打包后的dist全局安装serve命令：
npm install -g serve
运行：serve -s dist
# 版本
v2.6.6 : 2023.05.12
HtTable组件字典增加tooltip
HtForm组件字典增加tooltip
v2.6.5 : 2023.05.10
HtTable组件合计列增加精度参数，可以指定2位或多位小数
v2.6.4 : 2023.05.05
HtTable组件action列带有confirm优化，避免重复点击多次
v2.6.3 : 2023.05.01
增加查询条件展开/收起按钮的判断逻辑
v2.6.2 : 2023.05.01
解决登录后alert错误信息依然显示的问题 实现切换tab页去掉alert右侧错误信息
v2.6.1 : 2023.04.29
实现横向tab页切换缓存
新增daterange2属性默认值回显
v2.6.0 : 2023.04.29
表选字典reload默认改为true
表选字典去掉缓存优化，每次都重新执行查询
解决横向tab页关闭后无法删除缓存问题
v2.5.6 : 2023.04.21
列表的button增加表格loading处理
v2.5.4 : 2023.04.18
优化button按钮的权限验证
v2.5.3 : 2023.04.14
升级crud增删改查组件方法
v2.5.2 : 2023.04.10
HtTable组件新增多级表头
v2.5.1 : 2023.04.09
解决HtButton的confirm校验问题
v2.5.0 : 2023.04.07
HtForm组件增加HtInputNumber组件的step属性
v2.4.8 : 2023.04.06
解决按钮button的confirm框快速点击响应2次问题
上传附件组件优化
v2.4.5 : 2023.03.04
按钮button icon优化
上传组件优化
优化更新form表单字段逻辑
v2.4.3 : 2023.02.22
优化横向弹出tab页功能中，带有选项卡列表高度计算
新增富文本组件
解决HtSelect表选单选无法回显问题
icon库更新
v2.4.2 : 2023.02.18
HtTable表头字典列筛选，增加filtercode过滤
将请选择的placeholder更改为全部
HtTableBar组件按钮样式icon优化
v2.4.0 : 2023.02.15
HtTable组件增加columnFilter属性，默认值为true，可配置是否带筛选
HtForm组件增加输入域tabIndex的tab键切换
屏蔽新增或编辑的横向tab页的右键功能
v2.3.9 : 2023.02.12
HtDialog组件优化按钮图标
HtTable组件优化操作按钮图标
HtForm组件去掉必填项字段的红色字体
ht.crud组件的save/update方法增加check参数（最后一个参数），当check为false时，不做输入域的校验
解决横向tab页方式编辑框，快捷键Ctrl + S不好使问题
解决横向tab页切换tab无法缓存问题
v2.3.8 : 2023.01.28
HtSearchBar组件优化
HtNotify组件提示信息显示优化
icon图标库优化
行编辑列表去掉刷新以及列显示隐藏
解决行编辑表选字典每一行显示过滤问题
v2.3.6 : 2023.01.12
HtSelect组件解决表选字典没有值的时候闪烁问题
HtTableBar组件增加el-dropdown样式处理
v2.3.5 : 2023.01.10
HtEditBar组件优化按钮显示
HtTable组件优化行编辑高度
表格操作按钮icon图标优化
HtSelect组件解决code值是数字时，赋值判断自动转为字符串问题
增加月份选择range查询条件处理
icon库升级
导入功能显示位置优化
v2.3.4 : 2023.01.04
菜单横向tab页左右滚动按钮优化
HtTable组件行编辑增加新增行位置下标,createRow(index)
HtTable组件行编辑解决表选字典联动问题
HtEditBar组件解决按钮控制隐藏显示
实现级联字段编辑赋值
v2.3.3 : 2022.12.28
HtTable组件增加limitHeight参数，当该参数设置为false时，表格高度不做限制
HtSelect组件解决行编辑表选选择后显示不正确问题
v2.3.2 : 2022.12.24
HtEditBar组件优化
新增HtEditContainer组件，实现编辑页按钮与编辑域组件
HtForm组件高度计算优化
HtTable组件高度计算优化
v2.3.1 : 2022.12.21
HtTable组件增加render列换行显示
HtForm组件针对是否字典、有效状态字典由radio自动更换为switch模组
HtTable组件新增表选字典设置其他列为showLabelProp方法
v2.3.0 : 2022.12.20
HtTable组件行编辑增加多选功能
HtTable组件行编辑增加字典高度自适应功能
优化表格样式
HtSelect组件增加是否折叠字典项选项 (collapseTags: true)
v2.2.8 : 2022.12.13
HtTable组件优化,增加expand展开列表方式
HtTree组件优化，增加右侧动态添加按钮方式
v2.2.7 : 2022.12.14
HtDivider组件高度优化
HtEditBar组件，编辑form表单的按钮放到顶部
HtForm组件优化
HtTable组件增加 刷新 、 列设置显示 按钮
HtTable组件优化表头筛选显示
HtTable组件增加右侧kitbar组件
HtTableBar组件优化
查询和编辑增加trim，对于输入空格的值自动去掉空格
导出组件优化
v2.2.6 : 2022.12.13
HtTable组件优化,增加expand展开列表方式
HtTree组件优化，增加右侧动态添加按钮方式
v2.2.4 : 2022.12.06
HtTable组件高度计算优化
HtDialog组件优化
HtForm组件高度计算优化
v2.2.3 : 2022.12.06
HtTable组件优化
HtTagsView组件关闭逻辑优化
v2.2.2 : 2022.12.06
优化横向Tab页关闭功能
优化ht.crud中submit方法，增加是否弹出message框参数
v2.2.2 : 2022.12.05
HtTable组件优化
优化ht.crud中submit方法，增加是否弹出message框参数
v2.2.1 : 2022.12.03
HtDatePicker组件优化 解决重置按钮无法清空单选日期/时间值问题 优化HtTabs组件高度计算 优化HtTable组件高度计算
v2.2.0 : 2022.12.01
HtDatePicker组件优化
HtDialog组件优化，解决弹出再弹出页mask阴影层问题
HtForm组件的日期/时间组件，新增可单选日期/时间的功能
HtForm组件增加type='render'属性，render方法返回自定义格式
v2.1.9 : 2022.11.28
HtTabs组件增加value属性切换tab页方法
新增HtEditBar组件
优化HtDialog、调整HtDrawer组件
HtForm组件优化，增加maxHeight计算
增加点击弹出横向tab页模式
v2.1.8 : 2022.11.23
列表组件增加table-cb回调方法 增加前端解决excel导入文件格式校验，解决导入报错后文件大小、数量不准确问题
v2.1.7 : 2022.11.08
行编辑功能增加HtInputNumber的min、max参数 行编辑组件对于render，如果是edit属性，增加edit class
v2.1.6 : 2022.11.07
HtBodyDialog组件解决全屏弹出阴影显示不正确问题 解决枚举字典赋值显示不正确问题
v2.1.5 : 2022.11.05
界面主题优化 导入excel功能优化 行编辑必填项校验优化
v2.1.4 : 2022.11.03
界面主题优化
v2.1.3 : 2022.10.31
双月份选择格式更改为yyyy-mm 优化时间、日期组件的显示
v2.1.2 : 2022.10.31
新增月份双月选择功能 调整HtTabs组件高度计算，增加滚动条判断 调整HtTable组件高度计算，增加滚动条判断 调整HtDrawer组件高度计算，增加滚动条判断 解决列表按钮点击隐藏后有时错位问题 解决导入excel组件，删除excel后上传文件窗口无法显示问题 解决查询条件带有默认值，重置后清空问题 解决查询条件省、市、区重置后，无法重置filtercode问题 解决分页组件更改每页行数时，第二页页码计算不正确问题
v2.1.1 : 2022.10.27
重构切换主题组件，摒弃原组件实现思路 表格功能按钮区优化，增加业务功能按钮图标 icon字体库更新
v2.1.0 : 2022.10.26
解决嵌套窗口confirm确认框有时被遮挡问题 优化日期、时间、字典组件的蓝色主题
v2.0.9 : 2022.10.26
优化Tab中表格高度计算 对于嵌套弹出dialog，esc优先关闭最外层窗口
v2.0.7 : 2022.10.24
HtDialog优化，增加高度百分比参数以及是否带有footer参数 解决HtUpload预览图片遮挡层问题 Esc快捷键升级，如果对于弹出dialog、confirm，esc快捷键时优先关闭弹出dialog和confirm，而不是整体都关掉； 解决HtTable组件无法靠右对齐问题 解决全局dialog弹出框主题切换问题
v2.0.6 : 2022.10.22
输入域新增divider类型 HtInputNUmber组件优化 行编辑列表新增ht-input-number组件 列属性width增加auto，width: 'auto' ，则不限制width大小
v2.0.5 : 2022.10.22
主题切换优化
v2.0.4 : 2022.10.20
增加blue蓝色主题 实现多界面主题切换
v2.0.3 : 2022.10.18
优化
v2.0.2 : 2022.10.18
HtTabs组件新增HtTabPane的visible属性，可动态配置tab页是否渲染显示 HtTableBar组件按钮icon优化 HtUpload组件新增导入excel模版重复判断
v2.0.1 : 2022.10.12
解决多选字典回显问题 重构表单比较算法，去掉lodash.isEqual方法，自定义比较方法并重新渲染 优化Notify弹出框显示时间 增加多公司oemcid标识
v2.0.0 : 2022.10.09
解决列表隐藏按钮后双击仍可以调用问题 解决表选字典有默认值label回调返回值不正确问题
v1.9.9 : 2022.10.06
新增HtCascader级联组件，支持单选、多选； 新增级联组件的行政区划配置方式
v1.9.8 : 2022.10.06
解决tab页组件中，带有弹出框高度显示不够问题 解决行编辑省市县字典选择后报错问题 新增行编辑字典filtercode监听 解决单选/多选字典表选设置showLabel无效问题 解决HtDrawer抽屉组件footer按钮无法动态渲染问题 解决行表编辑表选字典回显问题 解决行编辑日期/时间字段table.records中无法获取问题
v1.9.7 : 2022.09.26
解决锚点组件的高度设置问题 解决锚点组件的多个滚动条问题 解决行编辑列表createRow方法新增一行报错问题
v1.9.6 : 2022.09.17
解决HtFrom渲染问题
v1.9.5 : 2022.09.17
实现标准字典的多选处理 实现form表单watch深度监听formList，解决隐藏域切换必填项无法验证问题 实现form表单可动态添加输入域 实现锚点窗口，列表高度无法展开，被遮挡问题
v1.9.4 : 2022.09.16
列表组件，解决detail明细过滤条件不起作用问题 HtTable增加createRow新添加行编辑 解决列表行按钮逻辑控制隐藏显示后混乱问题 解决列表行按钮批量操作后，无法重新渲染问题 解决行编辑列表，编辑框校验错位问题 解决行编辑列表，createRow在没有数据下报错问题 解决行编辑列表，增加时间组件
v1.9.3 : 2022.09.15
HtTable增加cellEnter回车响应事件 HtTable增加createRow新添加行编辑
v1.9.2 : 2022.09.14
解决导入未配置beforeImport无法弹出问题
v1.9.1 : 2022.09.13
HtTable列表导入增加beforeImport前置方法 HtTable优化行编辑校验逻辑 HtTable增加checkAllEdit方法，解决没有checkbox列表的校验问题 HtTable列表解决当横向滚动有偏移时，解决筛选错位问题，增加计算滚动条偏移量
v1.9.0 : 2022.09.12
解决日期检索条件，只要选择两遍，点击重置无法重置问题 解决列表没有数据的情况下，横向滚动条有时无法滚动问题
v1.8.9 : 2022.09.12
行编辑字典列增加filtercode过滤字典 HtForm表单组件对于hidden域不做必填项校验 行编辑列表增加校验方法 行编辑增加表选字典模式 行编辑增加字典多选模式 行编辑增加日期选项
v1.8.8 : 2022.08.31
dialog组件增加resize事件 drawer组件增加resize事件 行编辑列表校验优化 列表组件表头筛选：字典类型增加全选
v1.8.7 : 2022.08.29
行编辑增加焦点移开后多选框选中事件 增加列表合计
v1.8.6 : 2022.08.29
解决列表行编辑格式无法校验问题 解决列表翻页后search检索不正确问题
v1.8.5 : 2022.08.26
解决列表组件render无法重新渲染问题
v1.8.4 : 2022.08.26
解决列表组件detail类型第一次无法加载问题 解决行编辑最大长度显示不正确问题 初始化加载渲染优化
v1.8.3 : 2022.08.24
解决列表组件列数过多，fixed时错误问题
v1.8.1 : 2022.08.24
增加金额千位符方法 解决列表组件有render的多次加载问题
v1.8.0 : 2022.08.23
解决isMoney输入数字无法自动识别为字符串问题 优化message、alert消息框逻辑
v1.7.9 : 2022.08.22
解决列表表头字典缓存问题 解决表单域radio字典点击后无法响应问题
v1.7.8 : 2022.08.22
行编辑列表实现编辑框失去焦点后动态渲染逻辑 行编辑列表解决编辑框isAny校验报错问题
v1.7.6 : 2022.08.19
列表表头实现日期筛选 优化日期组件样式
v1.7.5 : 2022.08.18
优化列表加载的渲染逻辑 列表表头筛选增加字典下拉模式 字典vuex缓存优化
v1.7.4 : 2022.08.17
优化字典下拉框表选重新reload方法
v1.7.3 : 2022.08.17
调整setEditValue方法赋值逻辑，如果formList中的属性在rowData中不存在，则不赋值
v1.7.2 : 2022.08.16
HtTable组件增加是否显示分页控件判断 HtTable组件增加是否显示排序控件判断 新增HtBodyDialog弹出窗口组件 登出方法增加消除vuex中授权信息以及用户信息的处理
v1.7.0 : 2022.08.12
新增待办/消息组件 新增全部菜单导航组件
v1.6.9 : 2022.08.08
解决时间组件在dialog窗口无法选择问题 dialog、drawer功能按钮增加快捷键
v1.6.8 : 2022.08.05
解决form表单radio-button选择字典问题
v1.6.7 : 2022.08.05
解决form表单model更新后无法监听问题 表格操作列增加审批、驳回icon
v1.6.6 : 2022.08.05
解决行编辑修改编辑框内容后，行row对象值不自动更新问题
v1.6.5 : 2022.08.04
新增HtTimePicker组件 优化table、form等时间范围的回显方法 表格增加设置单元格、行样式方法
v1.6.4 : 2022.08.03
新增HtBadge组件 新增HtRadioGroup组件 新增HtCollapse组件
v1.6.3 : 2022.08.01
新增HtSelect多选字段 新增多选字典回显逻辑
v1.6.2 : 2022.07.31
新增角色按钮控制逻辑 修改HtButton，增加按钮全局控制
v1.6.1 : 2022.07.31
新增HtAnchor锚点组件 优化HtDialog高度计算 去掉弹窗默认footer的确定按钮
v1.6.0 : 2022.07.30
新增HtCheckboxButton组件 优化HtTree组件
v1.5.9 : 2022.07.29
HtDialog组件增加footer按钮样式 列表筛选增加行政区划 树形结构增加render-content属性 isDouble增加支持负数
v1.5.7 : 2022.07.28
HtForm组件增加输入域blur、focus用法
v1.5.6 : 2022.07.28
解决表选字典值为null时回显问题
v1.5.5 : 2022.07.28
HtForm中的HtRadio中增加disabled属性 setEditValue、resetEditValue方法增加textarea回显和清空
v1.5.4 : 2022.07.28
HtSelect组件监听showLabel变化 HtUpload组件解决导入无法跳转至后台问题
v1.5.3 : 2022.07.27
1.5.2版本二次提交
v1.5.2 : 2022.07.27
解决下拉框列表查询条件无法查询问题
v1.5.1 : 2022.07.24
优化列表组件 解决HtSelect组件清空输入域后调用回调报错问题 增加浮点数校验
v1.4.9 : 2022.07.22
ht.crud组件增加fetchData方法、submit方法 优化下拉框、input框组件 ht.table逻辑优化
v1.4.8 : 2022.07.20
解决表格search框别名问题 增加日期范围查询条件自动拼接where功能
v1.4.7 : 2022.07.13
对于HtTable，操作列只有一个按钮时，设置固定宽度 解决导出excel别名列问题 解决HtSelect表选字典回显赋值问题 解决HtForm默认监听赋值问题 增加lodash依赖
v1.4.6 : 2022.07.12
新增HtTag组件 列表新增expand展开逻辑功能
v1.4.5 : 2022.07.10
版本重新提交
v1.4.4 : 2022.07.10
新增HtInputNumber组件 新增行政区划字典 实现省市区级联过滤
v1.4.3 : 2022.07.09
解决表头排序驼峰问题 HtRadio字典控制只有2个内容时方转换标签
v1.4.2 : 2022.07.06
HtTable增加row-click、row-dblclick行单击、行双击方法 HtTable增加多表关联别名方式，解决导出列报错问题
v1.4.1 : 2022.07.05
解决表选字典无法回显问题 HtCol组件增加xs等bootstrap显示 解决HtDialog组件footer按钮显示问题
v1.4.0 : 2022.07.04
增加HtCard组件header部分逻辑更新
v1.3.9 : 2022.07.03
增加HtCard组件 重构个人中心 HtCol组件增加xs等bootstrap显示 优化横向tab页的右键功能 查询条件默认为一行显示
v1.3.8 : 2022.07.02
字体icon库更新，新增配置icon HtDialog、HtDrawer组件优化，调整footer按钮显示 新增HtTree树形组件 优化HtCheckbox组件，增加v-model处理以及scss样式
v1.3.7 : 2022.06.30
解决表选字典回显问题 解决form组件watch监听问题
v1.3.6 : 2022.06.23
解决表选字典隐藏列无法获取问题 解决导出表格选择导出列顺序不一致问题 解决表格查询框不同分辨率下错位问题 表单form-list属性增加watch深度监听
v1.3.5 : 2022.06.11
实现表格行编辑以及行编辑属性校验 优化图片大小 解决表格字典属性列本页无法排序问题 查询条件增加表别名用法 解决表格右侧搜索框滚动时无法定位问题
# 主页
- 欢迎访问个人 github-xukaixing (opens new window) 主页.
- 欢迎访问个人 gitee-xukaixing (opens new window) 主页.