From 6c97b4a0046e8d1e58decba8027f199e771e4a8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=A3=E5=9C=A3=E5=8D=8E?= <752718920@qq.com> Date: Sun, 18 Dec 2022 00:51:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E9=99=A4=E5=A4=9A=E4=BD=99=E7=9A=84re?= =?UTF-8?q?adme=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jshERP-web/src/components/README.md | 41 -- jshERP-web/src/components/chart/README.md | 367 ----------- jshERP-web/src/components/jeecg/README.md | 509 --------------- .../components/jeecg/README_JEditableTable.md | 577 ------------------ .../jeecgbiz/JSelectBizComponent/README.md | 36 -- jshERP-web/src/components/jeecgbiz/README.md | 137 ----- .../jeecgbiz/modal/JSelectUserByDepModal.vue | 36 -- 7 files changed, 1703 deletions(-) delete mode 100644 jshERP-web/src/components/README.md delete mode 100644 jshERP-web/src/components/chart/README.md delete mode 100644 jshERP-web/src/components/jeecg/README.md delete mode 100644 jshERP-web/src/components/jeecg/README_JEditableTable.md delete mode 100644 jshERP-web/src/components/jeecgbiz/JSelectBizComponent/README.md delete mode 100644 jshERP-web/src/components/jeecgbiz/README.md diff --git a/jshERP-web/src/components/README.md b/jshERP-web/src/components/README.md deleted file mode 100644 index c952c5d6..00000000 --- a/jshERP-web/src/components/README.md +++ /dev/null @@ -1,41 +0,0 @@ -####1._util包:存放自定义函数 详细见代码注释 -####2.chart包:存放各种图表相关的组件,条形图柱形图折线图等等 具体用法参考首页 -####3.countDown包:一个倒计时组件，用法参考home页,简单描述,该组件有3个属性, -target(时间/毫秒数)必填， -format(function,该方法接收一个毫秒数的参数,用于格式化显示当前倒计时时间)非必填, -onEnd倒计时结束触发函数 -![输入图片说明](https://static.oschina.net/uploads/img/201904/12182046_mwqJ.png "在这里输入图片标题") -####5.dict包：数据字典专用，用法参考文件夹下readme文件 -####6.Ellipsis包：字符串截取组件,可以指定字符串的显示长度,并将全部内容显示到tip中,简单使用参考src\views\system\PermissionList.vue -####7.jeecg包：该包下自定义了很多列表/表单中用到的组件 参考包下readme文件 -####8.jeecgbiz包：该包下定义了一些业务相关的组件，比如选择用户弹框,根据部门选择用户等等 -####9.layouts+page包：系统页面布局相关组件，比如登陆进去之后页面顶部显示什么，底部显示什么，菜单点击触发多个tab的布局等等 一般情况不需要修改 -####10.menun包：菜单组件，俩个，一个折叠菜单一个正常显示的菜单 -####11.NumberInfo:数字信息显示组件 如下图 -![输入图片说明](https://static.oschina.net/uploads/img/201904/12185858_uvJ5.png "在这里输入图片标题") -####12.online包：该包下封装了online表单的相关组件,用于展示表单各种控件,验证表单等等,相关用法参考readme -####13.setting包：该包下封装了首页风格切换等功能如下图 -![输入图片说明](https://static.oschina.net/uploads/img/201904/12190520_jySG.png "在这里输入图片标题") -####14.table包：一个二次封装的table组件,用于展示列表，参考readme -####15.tools包： -Breadcrumb.vue：面包屑二次封装,支持路由跳转 -DetailList.vue：详情展示用法参考src\views\profile\advanced\Advanced.vue(效果如下图) -![输入图片说明](https://static.oschina.net/uploads/img/201904/12193954_Uar6.png "在这里输入图片标题") -```` -个人认为该页面代码有两点值得学习： -1.vue provide/inject的使用 -2.该页面css定义方式,只定义一个顶层class,其余样式都定义在其下,这样只要顶层class不和别的页面冲突,整个页面的样式都是唯一生效的 -```` -FooterToolBar.vue:fixed定位的底部，通过是否定义内部控件的属性slot="extra"决定是左浮动或是右浮动 -HeaderNotice.vue:首页通知(如下图) -![输入图片说明](https://static.oschina.net/uploads/img/201904/12195340_fPe0.png "在这里输入图片标题") -HeaderInfo.vue:上下文字布局（如下图） -![输入图片说明](https://static.oschina.net/uploads/img/201904/12195638_dG5o.png "在这里输入图片标题") -Logo.vue:首页左上侧的log图 -![输入图片说明](https://static.oschina.net/uploads/img/201904/12200908_ihv3.png "在这里输入图片标题") -UserMenu.vue:首页右上侧的内容 -![输入图片说明](https://static.oschina.net/uploads/img/201904/12201226_laQK.png "在这里输入图片标题") -####16.trend包 趋势显示组件（如下图） -![输入图片说明](https://static.oschina.net/uploads/img/201904/12201600_Wo8K.png "在这里输入图片标题") -![corn表达式](https://oscimg.oschina.net/oscnet/661f9ac09016395f9f49286143af3241623.jpg) -![corn控件添加清除按钮](https://oscimg.oschina.net/oscnet/15096e49f2e29bd829e304d56770025d03c.jpg) \ No newline at end of file diff --git a/jshERP-web/src/components/chart/README.md b/jshERP-web/src/components/chart/README.md deleted file mode 100644 index d2789c81..00000000 --- a/jshERP-web/src/components/chart/README.md +++ /dev/null @@ -1,367 +0,0 @@ -# 报表组件文档 - -## 柱状图 - -##### 引用方式 - -```js -import Bar from '@/components/chart/Bar' -``` - -##### 参数列表 - -| 参数名 | 类型 | 必填 | 说明 | -|------------|--------|----|------------| -| title | string | | 报表标题 | -| dataSource | array | ✔️ | 报表数据源 | -| height | number | | 报表高度，默认254 | - -##### dataSource 示例 - -```json -[ - { - "x": "1月", - "y": 320 - }, - { - "x": "2月", - "y": 457 - }, - { - "x": "3月", - "y": 182 - } -] -``` - -##### 代码示例 - -```html - - - - - -``` - -## 多列柱状图 - -##### 引用方式 - -```js -import BarMultid from '@/components/chart/BarMultid' -``` - -##### 参数列表 - -| 参数名 | 类型 | 必填 | 说明 | -|------------|--------|----|------------| -| title | string | | 报表标题 | -| fields | array | | 主列字段列表 | -| dataSource | array | | 报表数据源 | -| height | number | | 报表高度，默认254 | - -##### fields 示例 - -```json -["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug."] -``` - -##### dataSource 示例 - -```json -[ - { - "type": "Jeecg", // 列名 - "Jan.": 18.9, - "Feb.": 28.8, - "Mar.": 39.3, - "Apr.": 81.4, - "May": 47, - "Jun.": 20.3, - "Jul.": 24, - "Aug.": 35.6 - }, - { - "type": "Jeebt", - "Jan.": 12.4, - "Feb.": 23.2, - "Mar.": 34.5, - "Apr.": 99.7, - "May": 52.6, - "Jun.": 35.5, - "Jul.": 37.4, - "Aug.": 42.4 - } -] -``` - -## 迷你柱状图 - -不带标题和数据轴的柱状图 - -##### 引用方式 - -```js -import MiniBar from '@/components/chart/MiniBar' -``` - -##### 参数列表 - -| 参数名 | 类型 | 必填 | 说明 | -|------------|--------|----|---------------| -| width | number | | 报表宽度度，默认自适应宽度 | -| height | number | | 报表高度，默认200 | -| dataSource | array | | 报表数据源 | - -##### dataSource 示例 - -```json -[ - { - "x": "1月", - "y": 320 - }, - { - "x": "2月", - "y": 457 - }, - { - "x": "3月", - "y": 182 - } -] -``` - -## 面积图 - -##### 引用方式 - -```js -import AreaChartTy from '@/components/chart/AreaChartTy' -``` - -##### 参数列表 - -| 参数名 | 类型 | 必填 | 说明 | -|------------|--------|----|------------| -| title | string | | 报表标题 | -| dataSource | array | ✔️ | 报表数据源 | -| height | number | | 报表高度，默认254 | -| lineSize | number | | 线的粗细，默认2 | - -##### dataSource 示例 - -```json -[ - { - "x": "1月", - "y": 320 - }, - { - "x": "2月", - "y": 457 - }, - { - "x": "3月", - "y": 182 - } -] -``` - -## 多行折线图 - -##### 引用方式 - -```js -import LineChartMultid from '@/components/chart/LineChartMultid' -``` - -##### 参数列表 - -| 参数名 | 类型 | 必填 | 说明 | -|------------|--------|----|------------| -| title | string | | 报表标题 | -| fields | array | | 主列字段列表 | -| dataSource | array | | 报表数据源 | -| height | number | | 报表高度，默认254 | - -##### fields 示例 - -```json -["jeecg", "jeebt"] -``` - -##### dataSource 示例 - -```json -[ - { - "type": "Jan", // 列名 - "jeecg": 7, - "jeebt": 3.9 - }, - { "type": "Feb", "jeecg": 6.9, "jeebt": 4.2 }, - { "type": "Mar", "jeecg": 9.5, "jeebt": 5.7 }, - { "type": "Apr", "jeecg": 14.5, "jeebt": 8.5 }, - { "type": "May", "jeecg": 18.4, "jeebt": 11.9 }, - { "type": "Jun", "jeecg": 21.5, "jeebt": 15.2 }, - { "type": "Jul", "jeecg": 25.2, "jeebt": 17 }, - { "type": "Aug", "jeecg": 26.5, "jeebt": 16.6 }, - { "type": "Sep", "jeecg": 23.3, "jeebt": 14.2 }, - { "type": "Oct", "jeecg": 18.3, "jeebt": 10.3 }, - { "type": "Nov", "jeecg": 13.9, "jeebt": 6.6 }, - { "type": "Dec", "jeecg": 9.6, "jeebt": 4.8 } -] -``` - -## 饼状图 - -##### 引用方式 - -```js -import Pie from '@/components/chart/Pie' -``` - -##### 参数列表 - -| 参数名 | 类型 | 必填 | 说明 | -|------------|--------|----|------------| -| dataSource | array | | 报表数据源 | -| height | number | | 报表高度，默认254 | - -##### dataSource 示例 - -```json -[ - // 所有的 percent 相加等于 100 - { "item": "一月", "percent": 40 }, - { "item": "二月", "percent": 21 }, - { "item": "三月", "percent": 17 }, - { "item": "四月", "percent": 13 }, - { "item": "五月", "percent": 9 } -] -``` - -## 雷达图 - -##### 引用方式 - -```js -import Radar from '@/components/chart/Radar' -``` - -##### 参数列表 - -| 参数名 | 类型 | 必填 | 说明 | -|------------|--------|----|------------| -| dataSource | array | | 报表数据源 | -| height | number | | 报表高度，默认254 | - -##### dataSource 示例 - -```json -[ - // score 最小值为 0，最大值为 100 - { "item": "一月", "score": 40 }, - { "item": "二月", "score": 20 }, - { "item": "三月", "score": 67 }, - { "item": "四月", "score": 43 }, - { "item": "五月", "score": 90 } -] -``` - -## 进度条 - -##### 引用方式 - -```js -import MiniProgress from '@/components/chart/MiniProgress' -``` - -##### 参数列表 - -| 参数名 | 类型 | 必填 | 说明 | -|------------|--------|----|-------------------| -| percentage | number | | 当前进度百分比，默认0，最高100 | -| target | number | | 目标值，默认10 | -| height | number | | 进度条高度，默认10 | -| color | string | | 进度条颜色，默认 #13C2C2 | - -## 仪表盘 - -##### 引用方式 - -```js -import DashChartDemo from '@/components/chart/DashChartDemo' -``` - -##### 参数列表 - -| 参数名 | 类型 | 必填 | 说明 | -|--------|--------|----|----------------| -| title | string | | 报表标题 | -| value | number | | 当前值，默认6.7，最大为9 | -| height | number | | 报表高度，默认254 | - -## 排名列表 - -##### 引用方式 - -```js -import RankList from '@/components/chart/RankList' -``` - -##### 参数列表 - -| 参数名 | 类型 | 必填 | 说明 | -|--------|--------|----|--------------| -| title | string | | 报表标题 | -| list | array | | 排名列表数据 | -| height | number | | 报表高度，默认自适应高度 | - -##### list 示例 - -```json -[ - { - "name": "北京朝阳 1 号店", - "total": 1981 - }, - { "name": "北京朝阳 2 号店", "total": 1359 }, - { "name": "北京朝阳 3 号店", "total": 1354 }, - { "name": "北京朝阳 4 号店", "total": 263 }, - { "name": "北京朝阳 5 号店", "total": 446 }, - { "name": "北京朝阳 6 号店", "total": 796 } -] -``` \ No newline at end of file diff --git a/jshERP-web/src/components/jeecg/README.md b/jshERP-web/src/components/jeecg/README.md deleted file mode 100644 index 00ea9bcb..00000000 --- a/jshERP-web/src/components/jeecg/README.md +++ /dev/null @@ -1,509 +0,0 @@ -# JDate 日期组件 使用文档 - -###### 说明: antd-vue日期组件需要用moment中转一下，用起来不是很方便，特二次封装，使用时只需要传字符串即可 -## 参数配置 -| 参数 | 类型 | 必填 |说明| -|--------------|---------|----|---------| -| placeholder |string | | placeholder | -| readOnly | boolean | | true/false 默认false | -| value | string | | 绑定v-model或是v-decorator后不需要设置 | -| showTime | boolean | | 是否展示时间true/false 默认false | -| dateFormat | string | |日期格式 默认'YYYY-MM-DD' 若showTime设置为true则需要将其设置成对应的时间格式(如:YYYY-MM-DD HH:mm:ss) | -| triggerChange | string | |触发组件值改变的事件是否是change,当使用v-decorator时且没有设置decorator的option.trigger为input需要设置该值为true | -使用示例 ----- -1.组件带有v-model的使用方法 -```vue - -``` - -2.组件带有v-decorator的使用方法 - a).设置trigger-change属性为true - ```vue - - ``` - - b).设置decorator的option.trigger为input - ```vue - - ``` - -3.其他使用 -添加style -```vue - -``` -添加placeholder -```vue - -``` -添加readOnly -```vue - -``` - -备注: -script内需引入jdate -```vue - -``` - - - --- - - -# JSuperQuery 高级查询 使用文档 -## 参数配置 -| 参数 | 类型 | 必填 | 说明 | -|--------------|---------|----|----------------------| -| fieldList | array |✔| 需要查询的列集合示例如下，type类型有:date/datetime/string/int/number | -| callback | array | | 回调函数名称(非必须)默认handleSuperQuery | - -fieldList结构示例： -```vue - const superQueryFieldList=[{ - type:"date", - value:"birthday", - text:"生日" - },{ - type:"string", - value:"name", - text:"用户名" - },{ - type:"int", - value:"age", - text:"年龄" - }] -``` -页面代码概述: ----- -1.import之后再components之内声明 -```vue -import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'; - export default { - name: "JeecgDemoList", - components: { - JSuperQuery - }, - -``` -2.页面引用 -```vue - - -``` -3.list页面data中需要定义三个属性： -```vue - fieldList:superQueryFieldList, - superQueryFlag:false, - superQueryParams:"" -``` -4.list页面声明回调事件handleSuperQuery(与组件的callback对应即可) -```vue -//高级查询方法 -handleSuperQuery(arg) { - if(!arg){ - this.superQueryParams='' - this.superQueryFlag = false - }else{ - this.superQueryFlag = true - this.superQueryParams=JSON.stringify(arg) - } - this.loadData() -}, -``` -5.改造list页面方法 -```vue - // 获取查询条件 - getQueryParams() { - let sqp = {} - if(this.superQueryParams){ - sqp['superQueryParams']=encodeURI(this.superQueryParams) - } - var param = Object.assign(sqp, this.queryParam, this.isorter); - param.field = this.getQueryField(); - param.pageNo = this.ipagination.current; - param.pageSize = this.ipagination.pageSize; - return filterObj(param); - }, -``` -6.打开弹框调用show方法： -```vue -this.$refs.superQueryModal.show(); -``` - -# JEllipsis 字符串超长截取省略号显示 - -###### 说明: 遇到超长文本展示，通过此标签可以截取省略号显示，鼠标放置会提示全文本 -## 参数配置 -| 参数 | 类型 | 必填 | 说明 | -|--------|---------|----|----------------| -| value |string | 必填 | 字符串文本| -| length | number | 非必填 | 默认25 | -使用示例 ----- -1.组件带有v-model的使用方法 -```vue - - - -# Modal弹框实现最大化功能 - -1.定义modal的宽度： -```vue - -``` -2.自定义modal的title,居右显示切换图标 -```vue - -``` -3.定义toggleScreen事件,用于切换modal宽度 -```vue - toggleScreen(){ - if(this.modaltoggleFlag){ - this.modalWidth = window.innerWidth; - }else{ - this.modalWidth = 800; - } - this.modaltoggleFlag = !this.modaltoggleFlag; - }, -``` -4.data中声明上述用到的属性 -```vue - data () { - return { - modalWidth:800, - modaltoggleFlag:true, -``` - -# 下拉选项滚动错位的解决方法 - -## 问题描述 - -当使用了 `a-modal` 或其他带有滚动条的组件时，使用`a-select`组件并打开下拉框时滚动滚动条，就会导致错位的问题产生。 - -## 解决方法 - -大多数情况下，在 `a-select` 上添加一个 `getPopupContainer` 属性，值为`node => node.parentNode`即可解决。 -但是如果遇到 `a-select` 标签层级过深的情况，可能仍然会显示异常，只需要多加几个`.parentNode` （例：node => node.parentNode.parentNode.parentNode）多尝试几次直到解决问题即可。 - -### 代码示例 - -```html - -``` - -# JAsyncTreeList 异步数列表组件使用说明 - -## 引入组件 - -```js -import JTreeTable from '@/components/jeecg/JTreeTable' -export default { - components: { JTreeTable } -} -``` - -## 所需参数 - -| 参数 | 类型 | 必填 | 说明 | -|-------------|--------|--------|--------------------------------------------------------------| -| rowKey | String | 非必填 | 表格行 key 的取值，默认为"id" | -| columns | Array | 必填 | 表格列的配置描述，具体见Antd官方文档 | -| url | String | 必填 | 数据查询url | -| childrenUrl | String | 非必填 | 查询子级时的url，若不填则使用url参数查询子级 | -| queryKey | String | 非必填 | 根据某个字段查询，如果传递 id 就根据 id 查询，默认为parentId | -| queryParams | Object | 非必填 | 查询参数，当查询参数改变的时候会自动重新查询，默认为{} | -| topValue | String | 非必填 | 查询顶级时的值，如果顶级为0，则传0，默认为null | -| tableProps | Object | 非必填 | 自定义给内部table绑定的props | - -## 代码示例 - -```html - - - -``` - -# JCheckbox 使用文档 - -###### 说明: antd-vue checkbox组件处理的是数组，用起来不是很方便，特二次封装，使用时只需处理字符串即可 -## 参数配置 -| 参数 | 类型 | 必填 |说明| -|--------------|---------|----|---------| -| options |array |✔| checkbox需要配置的项，是个数组，数组中每个对象包含两个属性:label(用于显示)和value(用于存储) | - -使用示例 ----- -```vue - - - -``` - -# JCodeEditor 使用文档 - -###### 说明: 一个简易版的代码编辑器，支持语法高亮 -## 参数配置 -| 参数 | 类型 | 必填 |说明| -|--------------|---------|----|---------| -| language |string | | 表示当前编写代码的类型 javascript/html/css/sql | -| placeholder |string | | placeholder | -| lineNumbers |Boolean | | 是否显示行号 | -| fullScreen |Boolean | | 是否显示全屏按钮 | -| zIndex |string | | 全屏以后的z-index | - -使用示例 ----- -```vue - - - -``` - -# JFormContainer 使用文档 - -###### 说明: 暂用于表单禁用 - -使用示例 ----- -```vue - - - - - - -``` - -# JImportModal 使用文档 - -###### 说明: 用于列表页面导入excel功能 - -使用示例 ----- -```vue - - - - -``` - -# JSlider 滑块验证码 - -使用示例 ----- -```vue - - - -``` - - -# JTreeSelect 树形下拉组件 -异步加载的树形下拉组件 - -## 参数配置 -| 参数 | 类型 | 必填 |说明| -|--------------|---------|----|---------| -| placeholder |string | | placeholder | -| dict |string | ✔| 表名,显示字段名,存储字段名拼接的字符串 | -| pidField |string | ✔| 父ID的字段名 | -| pidValue |string | | 根节点父ID的值 默认'0' 不可以设置为空,如果想使用此组件，而数据库根节点父ID为空，请修改之 | -| multiple |boolean | |是否支持多选 | - -使用示例 ----- -```vue - - - -``` - - diff --git a/jshERP-web/src/components/jeecg/README_JEditableTable.md b/jshERP-web/src/components/jeecg/README_JEditableTable.md deleted file mode 100644 index 981422c5..00000000 --- a/jshERP-web/src/components/jeecg/README_JEditableTable.md +++ /dev/null @@ -1,577 +0,0 @@ -# JEditableTable 帮助文档 - -## 参数配置 - -| 参数 | 类型 | 必填 | 说明 | -|--------------|---------|------|---------------------------------------------------------------------------------| -| columns | array | ✔️ | 表格列的配置描述，具体项见下表 | -| dataSource | array | ✔️ | 表格数据 | -| loading | boolean | | 是否正在加载，加载中不会显示任何行，默认false | -| actionButton | boolean | | 是否显示操作按钮，包括"新增"、"删除"，默认false | -| rowNumber | boolean | | 是否显示行号，默认false | -| rowSelection | boolean | | 是否可选择行，默认false | -| dragSort | boolean | | 是否可拖动排序，默认false | -| dragSortKey | string | | 拖动排序存储的Key，无需定义在columns内也能在getValues()时获取到值，默认orderNum | -| maxHeight | number | | 设定最大高度(px)，默认400 | -| disabledRows | object | | 设定禁用的行，被禁用的行无法被选择和编辑，配置方法可以查看示例 | -| disabled | boolean | | 是否禁用所有行，默认false | - -### columns 参数详解 - -| 参数 | 类型 | 必填 | 说明 | -|---------------|---------|------|--------------------------------------------------------------------------------------------------------------------------------------------------------| -| title | string | ✔️ | 表格列头显示的问题 | -| key | string | ✔️ | 列数据在数据项中对应的 key，必须是唯一的 | -| type | string | ✔️ | 表单的类型，可以通过`JEditableTableUtil.FormTypes`赋值 | -| width | string | | 列的宽度，可以是百分比，也可以是`px`或其他单位，建议设置为百分比，且每一列的宽度加起来不应超过100%，否则可能会不能达到预期的效果。留空会自动计算百分比 | -| placeholder | string | | 表单预期值的提示信息，可以使用`${...}`变量替换文本（详见`${...} 变量使用方式`） | -| defaultValue | string | | 默认值，在新增一行时生效 | -| validateRules | array | | 表单验证规则，配置方式见[validateRules 配置规则](#validaterules-配置规则) | -| props | object | | 设置添加给表单元素的自定义属性，例如:`props:{title: 'show title'}` | -| disabled | boolean | | 是否禁用当前列，默认false | - -#### 当 type=checkbox 时所需的参数 - -| 参数 | 类型 | 必填 | 说明 | -|----------------|---------|------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| defaultChecked | boolean | | 默认值是否选中 | -| customValue | array | | 自定义值，checkbox需要的是boolean值，如果数据是其他值（例如`'Y' or 'N'`）时，就会导致错误，所以提供了该属性进行转换，例：`customValue: ['Y','N']`，会将`true`转换为`'Y'`，`false`转换为`'N'`，反之亦然 | - -#### 当 type=select 时所需的参数 - -| 参数 | 类型 | 必填 | 说明 | -|------------|---------|------|----------------------------------------------------| -| options | array | ✔️ | 下拉选项列表，详见下表 | -| allowInput | boolean | | 是否允许用户输入内容，并创建新的内容 | -| dictCode | String | | 数据字典Code，若options也有值，则拼接在options后面 | - -##### options 所需参数 - -| 参数 | 类型 | 必填 | 说明 | -|-----------|------------|------|----------------------------------------------------------------------| -| text | string | ✔️ | 显示标题 | -| value | string | ✔️ | 真实值 | -| ~~title~~ | ~~string~~ | | ~~显示标题（已废弃，若同时填写了 title 和 text 那么优先使用 text）~~ | - -#### 当 type=upload 时所需的参数 - -| 参数 | 类型 | 必填 | 说明 | -|--------------|---------|------|--------------------------------------------------------------------------------------| -| action | string | ✔️ | 上传文件路径 | -| token | boolean | | 上传的时候是否传递token | -| responseName | string | ✔️ | 若要从上传成功后从response中取出返回的文件名，那么这里填后台返回的包含文件名的字段名 | - -#### 当 type=slot 时所需的参数 - -| 参数 | 类型 | 必填 | 说明 | -|----------|--------|------|------------| -| slotName | string | ✔️ | slot的名称 | - -### validateRules 配置规则 - -`validateRules` 需要的是一个数组，数组里每项都是一个规则，规则是object类型，规则的各个参数如下 - -- `required` 是否必填，可选值为`true`or`false` -- `pattern` 正则表达式验证，只有成功匹配该正则的值才能成功通过验证 -- `handler` 自定义函数校验，使用方法请见[示例五](#示例五) -- `message` 当验证未通过时显示的提示文本，可以使用`${...}`变量替换文本（详见`${...} 变量使用方式`） -- 配置示例请看[示例二](#示例二) - -## 事件 - -| 事件名 | 触发时机 | 参数 | -|-----------------|----------------------------------------------------|--------------------------------------------------| -| added | 当添加行操作完成后触发 | | -| deleted | 当删除行操作完成后触发（批量删除操作只会触发一次） | `deleteIds` 被逻辑删除的id | -| selectRowChange | 当行被选中或取消选中时触发 | `selectedRowIds` 被选中行的id | -| valueChange | 当数据发生改变的时候触发的事件 | `{ type, row, column, value, target }` Event对象 | - -## 方法 - -关于方法的如何调用的问题，请在**FAQ**中查看[方法如何调用](#方法如何调用) - -### initialize - -用于初始化表格（清空表格） - -- `参数:` 无 -- `返回值:` 无 - -### resetScrollTop - -重置滚动条Top位置 - -- `参数:` - -| 参数名 | 类型 | 必填 | 说明 | -|--------|--------|------|--------------------------------------------------------------------------------------------------------| -| top | number | | 新top位置，留空则滚动到上次记录的位置，用于解决切换tab选项卡时导致白屏以及自动将滚动条滚动到顶部的问题 | - -- `返回值:` 无 - -### add - -主动添加行，默认情况下，当用户的滚动条已经在底部的时候，会将滚动条固定在底部，即添加后无需用户手动滚动，而会自动滚动到底部 - -- `参数:` - -| 参数名 | 类型 | 必填 | 说明 | -|---------------------|---------|------|---------------------------------------------------------------------| -| num | number | | 添加几行，默认为1 | -| forceScrollToBottom | boolean | | 是否在添加后无论用户的滚动条在什么位置都强制滚动到底部，默认为false | - -- `返回值:` 无 - -### removeRows - -主动删除一行或多行 - -- `参数:` - -| 参数名 | 类型 | 必填 | 说明 | -|--------|-----------------|------|--------------------------------------------------------------------------------------------| -| id | string 或 array | ✔️ | 被删除行的id。如果要删除一个，可以直接传id，如果要删除多个，需要将多个id封装成一个数组传入 | - -- `返回值:` 无 - -### removeSelectedRows - -主动删除被选中的行 - -- `参数:` 无 -- `返回值:` 无 - -### getValues - -用于获取表格里所有表单的值，可进行表单验证 - -- `参数:` - -| 参数名 | 类型 | 必填 | 说明 | -|----------|----------|------|-----------------------------------------------------------------------------------------------------------------------------------------------------------| -| callback | function | ✔️ | 获取值的回调方法，会传入`error`和`values`两个参数。`error`：未通过验证的数量，当等于`0`时代表验证通过；`values`：获取的值（即使未通过验证该字段也有数据） | -| validate | boolean | | 是否进行表单验证，默认为`true`，设为`false`则代表忽略表单验证 | -| rowIds | array | | 默认返回所有行的数据，如果传入了`rowIds`，那么就会只返回与该`rowIds`相匹配的数据，如果没有匹配的数据，就会返回空数组 | - -- `返回值:` 无 - - -### getValuesSync - -`getValues`的同步版，会直接将获取到的数据返回 - -- `参数:` - -| 参数名 | 类型 | 必填 | 说明 | -|---------|--------|------|------------------------| -| options | object | | 选项，详见下方所需参数 | - -- - `options` 所需参数 - -| 参数名 | 类型 | 必填 | 说明 | -|----------|---------|------|----------------------------------------------------------------------------------------------------------------------| -| validate | boolean | | 是否进行表单验证，默认为`true`，设为`false`则代表忽略表单验证 | -| rowIds | array | | 默认返回所有行的数据，如果传入了`rowIds`，那么就会只返回与该`rowIds`相匹配的数据，如果没有匹配的数据，就会返回空数组 | - -- `返回值:` object - - `error` 未通过验证的数量，当等于`0`时代表验证通过 - - `values` 获取的值（即使未通过验证该字段也有数据） - -- `使用示例` - -```js -let { error, values } = this.$refs.editableTable.getValuesSync({ validate: true, rowIds: ['rowId1', 'rowId2'] }) -if (error === 0) { - console.log('表单验证通过，数据：', values); -} else { - console.log('未通过表单验证，数据：', values); -} -``` - -### getValuesPromise - -`getValues`的promise版，会在`resolve`中传入获取到的值，会在`reject`中传入失败原因，例如`VALIDATE_NO_PASSED` - -- `参数:` - -| 参数名 | 类型 | 必填 | 说明 | -|----------|---------|------|----------------------------------------------------------------------------------------------------------------------| -| validate | boolean | | 同`getValues`的`validate`参数 | -| rowIds | array | | 默认返回所有行的数据，如果传入了`rowIds`，那么就会只返回与该`rowIds`相匹配的数据，如果没有匹配的数据，就会返回空数组 | - -- `返回值:` Promise - -### getDeleteIds - -用于获取被逻辑删除的行的id，返回一个数组，用户可将该数组传入后台，并进行批量删除 - -- `参数:` 无 -- `返回值:` array - -### getAll - -获取所有的数据，包括values、deleteIds -会在`resolve`中传入获取到的值：`{values, deleteIds}` -会在`reject`中传入失败原因，例如`VALIDATE_NO_PASSED` - -- `参数:` - -| 参数名 | 类型 | 必填 | 说明 | -|----------|---------|------|-------------------------------| -| validate | boolean | | 同`getValues`的`validate`参数 | - -- `返回值:` Promise - -### setValues - -主动设置表格中某行某列的值 - -- `参数:` - -| 参数名 | 类型 | 必填 | 说明 | -|--------|-------|------|------------------------------------------------------------| -| values | array | | 传入一个数组，数组中的每项都是一行的新值，具体见下面的示例 | - -- `返回值:` 无 -- `示例：` - -```js -setValues([ - { - rowKey: id1, // 行的id - values: { // 在这里 values 中的 name 是你 columns 中配置的 key - 'name': 'zhangsan', - 'age': '20' - } - }, - { - rowKey: id2, - values: { - 'name': 'lisi', - 'age': '23' - } - } -]) -``` -### clearSelection - -主动清空选择的行 - -- `参数:` 无 -- `返回值:` 无 - -## 内置插槽 - -| 插槽名 | 说明 | -|--------------|------------------------------------------------------| -| buttonBefore | 在操作按钮的**前面**插入插槽，不受`actionButton`属性的影响 | -| buttonAfter | 在操作按钮的**后面**插入插槽，不受`actionButton`属性的影响 | - -## ${...} 变量使用方式 - -在`placeholder`和`message`这两个属性中可以使用`${...}`变量来替换文本 -在[示例二](#示例二)中，配置了`title`为`名称`的一列，而`placeholder`配置成了`请输入${title}`，那么最终显示效果为`请输入名称` -这就是`${...}`变量的使用方式，在`${}`中可以使用的变量有`title`、`key`、`defaultValue`这三个属性的值 - -## JEditableTableUtil 使用说明 - -在之前配置`columns`时提到过`JEditableTableUtil`这个工具类，那么如果想要知道详细的使用说明就请看这里 - -### export 的常量 - -#### FormTypes - -这是配置`columns.type`时用到的常量值，其中包括 - -- `normal` 默认，直接显示值，不渲染表单 -- `input` 显示输入框 -- `inputNumber` 显示数字输入框 -- `checkbox` 显示多选框 -- `select` 显示选择器（下拉框） -- `date` 日期选择器 -- `datetime` 日期时间选择器 -- `upload` 上传组件（文件域） -- `slot` 自定义插槽 - -### VALIDATE_NO_PASSED - -在判断表单验证是否通过时使用，如果 reject 的值 === VALIDATE_NO_PASSED 则代表表单验证未通过，你可以做相应的其他处理，反之则可能是发生了报错，可以使用 `console.error` 输出 - -### 封装的方法 - -#### validateTables - -当你的页面中存在多个JEditableTable实例的时候，如果要获取每个实例的值、判断表单验证是否通过，就会让代码变得极其冗余、繁琐，于是我们就将该操作封装成了一个函数供你调用，它可以同时获取并验证多个JEditableTable实例的值，只有当所有实例的表单验证都通过后才会返回值，否则将会告诉你具体哪个实例没有通过验证。具体使用方法请看下面的示例 - -- `参数:` - -| 参数名 | 类型 | 必填 | 说明 | -|--------|-------|------|--------------------------------------------------------| -| cases | array | | 传入一个数组，数组中的每项都是一个JEditableTable的实例 | - -- `返回值:` Promise -- `示例：` - -```js -import { validateTables, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil' -// 封装cases -let cases = [] -cases.push(this.$refs.editableTable1) -cases.push(this.$refs.editableTable2) -cases.push(this.$refs.editableTable3) -cases.push(this.$refs.editableTable4) -cases.push(this.$refs.editableTable5) -// 同时验证并获取多个实例的值 -validateTables(cases).then((all) => { - // all 是一个数组，每项都对应传入cases的下标，包含values和deleteIds - console.log('所有实例的值：', all) -}).catch((e = {}) => { - // 判断表单验证是否未通过 - if (e.error === VALIDATE_NO_PASSED) { - console.log('未通过验证的实例下标:', e.index) - } else { - console.error('发生异常:', e) - } -}) -``` - -## FAQ - -### 方法如何调用？ - -在[示例一](#示例一)中，设定了一个 `ref="editableTable"` 的属性，那么在vue中就可以使用`this.$refs.editableTable`获取到该表格的实例，并调取其中的方法。 -假如我要调取`initialize`方法，就可以这么写：`this.$refs.editableTable.initialize()` - -### 如何获取表单的值？ - -使用`getValue`方法进行获取，详见[示例三](#示例三) - -### 如何进行表单验证？ - -在获取值的时候默认会进行表单验证操作，用户在输入的时候也会对正在输入的表单进行验证，只要配置好规则就可以了 - -### 如何添加或删除一行？ - -该功能已封装到组件中，你只需要将 `actionButton` 设置为 `true` 即可，当然你也可以在代码中主动调用新增方法或修改，具体见上方的方法介绍。 - -### 为什么使用了ATab组件后，切换选项卡会导致白屏或滚动条位置会归零？ - -在ATab组件中确实会导致滚动条位置归零，且不会触发`onscroll`方法，所以无法动态加载行，导致白屏的问题出现。 -解决方法是在ATab组件的`onChange`事件触发时执行实例提供的`resetScrollTop()`方法即可，但是需要注意的是：代码主动改变ATab的`activeKey`不会触发`onChange`事件，还需要你手动调用下。 - -- `示例` - -```html - -``` - -```js -/*--- 忽略部分代码片段 ---*/ -methods: { - - /** 切换tab选项卡的时候重置editableTable的滚动条状态 */ - handleChangeTab(key) { - this.$refs[`editableTable${key}`].resetScrollTop() - } - -} -/*--- 忽略部分代码片段 ---*/ -``` - -### slot(自定义插槽)如何使用？ - -代码示例请看：[示例四(slot)](#示例四(slot)) - ----------------------------------------------------------------------------------------- - -## 示例一 - -```html - -``` - -## 示例二 - -```js - -import { FormTypes } from '@/utils/JEditableTableUtil' - -/*--- 忽略部分代码片断 ---*/ -columns: [ - { - title: '名称', - key: 'name', - type: FormTypes.input, - placeholder: '请输入${title}', - defaultValue: '称名', - // 表单验证规则 - validateRules: [ - { - required: true, // 必填 - message: '${title}不能为空' // 提示的文本 - }, - { - pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则 - message: '${title}必须以字母开头，可包含数字、下划线、横杠' - } - ] - }, - { - title: '年龄', - key: 'age', - type: FormTypes.inputNumber, - placeholder: '请输入${title}', - defaultValue: 18, - validateRules: [{required: true, message: '${title}不能为空'}] - } -] -/*--- 忽略部分代码片断 ---*/ -``` - -## 示例三 - -```js -// 获取被逻辑删除的字段id -let deleteIds = this.$refs.editableTable.getDeleteIds(); -// 获取所有表单的值，并进行验证 -this.$refs.editableTable.getValues((error, values) => { - // 错误数 = 0 则代表验证通过 - if (error === 0) { - this.$message.success('验证通过') - // 将通过后的数组提交到后台或自行进行其他处理 - console.log(deleteIds, values) - } else { - this.$message.error('验证未通过') - } -}) -``` - -## 示例四(slot) - -```html - - -``` - -## 示例五 - -```js -// 该示例是自定义函数校验 -columns: [ - { - title: '字段名称', - key: 'dbFieldName', - type: FormTypes.input, - defaultValue: '', - validateRules: [ - { - // 自定义函数校验 handler - handler(type, value, row, column, callback, target) { - // type 触发校验的类型（input、change、blur） - // value 当前校验的值 - // callback(flag, message) 方法必须执行且只能执行一次 - // flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作 - // message = 提示的类型，默认使用配置的 message - // target 行编辑的实例对象 - - if (type === 'blur') { - - if (value === 'abc') { - callback(false, '${title}不能是abc') // false = 未通过，可以跟自定义提示 - return - } - - let { values } = target.getValuesSync({ validate: false }) - let count = 0 - for (let val of values) { - if (val['dbFieldName'] === value) { - if (++count >= 2) { - callback(false, '${title}不能重复') - return - } - } - } - callback(true) // true = 通过验证 - } else { - callback() // 不填写或者填写 null 代表不进行任何操作 - } - }, - message: '${title}默认提示' - } - ] - }, -] -``` \ No newline at end of file diff --git a/jshERP-web/src/components/jeecgbiz/JSelectBizComponent/README.md b/jshERP-web/src/components/jeecgbiz/JSelectBizComponent/README.md deleted file mode 100644 index db53e225..00000000 --- a/jshERP-web/src/components/jeecgbiz/JSelectBizComponent/README.md +++ /dev/null @@ -1,36 +0,0 @@ -# JSelectBizComponent - -Jeecg 选择组件的公共可复用组件 - -## 引用方式 - -```js -import JSelectBizComponent from '@/src/components/jeecgbiz/JSelectBizComponent' - -export default { - components: { JSelectBizComponent } -} -``` - -## 参数 - -### 配置参数 - -| 参数名 | 类型 | 必填 | 默认值 | 备注 | -|-----------------------|---------|------|--------------|--------------------------------------------------------------------------------------| -| rowKey | String | | "id" | 唯一标识的字段名 | -| value(v-model) | String | | "" | 默认选择的数据，多个用半角逗号分割 | -| name | String | | "" | 显示名字，例如选择用户就填写"用户" | -| listUrl | String | 是 | | 数据请求地址，必须是封装了分页的地址 | -| valueUrl | String | | "" | 获取显示文本的地址，例如存的是 username，可以通过该地址获取到 realname | -| displayKey | String | | null | 显示在标签上的字段 key ，不传则直接显示数据 | -| returnKeys | Array | | ['id', 'id'] | v-model 绑定的 keys，是个数组，默认使用第二项，当配置了 `returnId=true` 就返回第一项 | -| returnId | Boolean | | false | 返回ID，设为true后将返回配置的 `returnKeys` 中的第一项 | -| selectButtonText | String | | "选择" | 选择按钮的文字 | -| queryParamText | String | | null | 查询条件显示文字，不传则使用 `name` | -| columns | Array | 是 | | 列配置项，与antd的table的配置完全一致。列的第一项会被配置成右侧已选择的列表上 | -| columns[0].widthRight | String | | null | 仅列的第一项可以应用此配置，表示右侧已选择列表的宽度，建议 `70%`，不传则应用`width` | -| placeholder | String | | "请选择" | 占位符 | -| disabled | Boolean | | false | 是否禁用 | -| multiple | Boolean | | false | 是否可多选 | -| buttons | Boolean | | true | 是否显示"选择"按钮，如果不显示，可以直接点击文本框打开选择界面 | diff --git a/jshERP-web/src/components/jeecgbiz/README.md b/jshERP-web/src/components/jeecgbiz/README.md deleted file mode 100644 index be30730d..00000000 --- a/jshERP-web/src/components/jeecgbiz/README.md +++ /dev/null @@ -1,137 +0,0 @@ -# JSelectDepart 部门选择组件 -选择部门组件,存储部门ID,显示部门名称 - -## 参数配置 -| 参数 | 类型 | 必填 |说明| -|--------------|---------|----|---------| -| modalWidth |Number | | 弹框宽度 默认500 | -| multi |Boolean | | 是否多选 默认false | -| rootOpened |Boolean | | 是否展开根节点 默认true | -| disabled |Boolean | | 是否禁用 默认false| - -使用示例 ----- -```vue - - - -``` -# JSelectMultiUser 用户多选组件 - -使用示例 ----- -```vue - - - -``` - -# JSelectUserByDep 根据部门选择用户 - -## 参数配置 -| 参数 | 类型 | 必填 |说明| -|--------------|---------|----|---------| -| modalWidth |Number | | 弹框宽度 默认1250 | -| disabled |Boolean | | 是否禁用 | - -使用示例 ----- -```vue - - - -``` - diff --git a/jshERP-web/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue b/jshERP-web/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue index cfb76cb0..c7cf559a 100644 --- a/jshERP-web/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue +++ b/jshERP-web/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue @@ -21,7 +21,6 @@ :treeData="departTree" :expandAction="false" :expandedKeys.sync="expandedKeys" - @select="onDepSelect" /> @@ -181,20 +180,6 @@ if (arg === 1) { this.ipagination.current = 1; } - if (this.selectedDepIds && this.selectedDepIds.length > 0) { - await this.initQueryUserByDepId(this.selectedDepIds) - } else { - this.loading = true - let params = this.getQueryParams()//查询条件 - await getUserList(params).then((res) => { - if (res.success) { - this.dataSource = res.result.records - this.ipagination.total = res.result.total - } - }).finally(() => { - this.loading = false - }) - } }, // 触发屏幕自适应 resetScreenSize() { @@ -269,15 +254,6 @@ } this.selectUserIds = userIds.substring(1); }, - // 点击树节点,筛选出对应的用户 - onDepSelect(selectedDepIds) { - if (selectedDepIds[0] != null) { - this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息 - if (this.selectedDepIds[0] !== selectedDepIds[0]) { - this.selectedDepIds = [selectedDepIds[0]]; - } - } - }, onSelectChange(selectedRowKeys, selectionRows) { this.selectedRowKeys = selectedRowKeys; this.selectionRows = selectionRows; @@ -285,18 +261,6 @@ onSearch() { this.loadData(1); }, - // 根据选择的id来查询用户信息 - initQueryUserByDepId(selectedDepIds) { - this.loading = true - return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => { - if (res.success) { - this.dataSource = res.result; - this.ipagination.total = res.result.length; - } - }).finally(() => { - this.loading = false - }) - }, queryDepartTree() { }, modalFormOk() {