去除多余的readme文件
This commit is contained in:
季圣华
@@ -1,41 +0,0 @@
|
|||||||
####1._util包:存放自定义函数 详细见代码注释
|
|
||||||
####2.chart包:存放各种图表相关的组件,条形图柱形图折线图等等 具体用法参考首页
|
|
||||||
####3.countDown包:一个倒计时组件，用法参考home页,简单描述,该组件有3个属性,
|
|
||||||
target(时间/毫秒数)必填，
|
|
||||||
format(function,该方法接收一个毫秒数的参数,用于格式化显示当前倒计时时间)非必填,
|
|
||||||
onEnd倒计时结束触发函数
|
|
||||||
|
|
||||||
####5.dict包：数据字典专用，用法参考文件夹下readme文件
|
|
||||||
####6.Ellipsis包：字符串截取组件,可以指定字符串的显示长度,并将全部内容显示到tip中,简单使用参考src\views\system\PermissionList.vue
|
|
||||||
####7.jeecg包：该包下自定义了很多列表/表单中用到的组件 参考包下readme文件
|
|
||||||
####8.jeecgbiz包：该包下定义了一些业务相关的组件，比如选择用户弹框,根据部门选择用户等等
|
|
||||||
####9.layouts+page包：系统页面布局相关组件，比如登陆进去之后页面顶部显示什么，底部显示什么，菜单点击触发多个tab的布局等等 一般情况不需要修改
|
|
||||||
####10.menun包：菜单组件，俩个，一个折叠菜单一个正常显示的菜单
|
|
||||||
####11.NumberInfo:数字信息显示组件 如下图
|
|
||||||
|
|
||||||
####12.online包：该包下封装了online表单的相关组件,用于展示表单各种控件,验证表单等等,相关用法参考readme
|
|
||||||
####13.setting包：该包下封装了首页风格切换等功能如下图
|
|
||||||
|
|
||||||
####14.table包：一个二次封装的table组件,用于展示列表，参考readme
|
|
||||||
####15.tools包：
|
|
||||||
Breadcrumb.vue：面包屑二次封装,支持路由跳转
|
|
||||||
DetailList.vue：详情展示用法参考src\views\profile\advanced\Advanced.vue(效果如下图)
|
|
||||||
|
|
||||||
````
|
|
||||||
个人认为该页面代码有两点值得学习：
|
|
||||||
1.vue provide/inject的使用
|
|
||||||
2.该页面css定义方式,只定义一个顶层class,其余样式都定义在其下,这样只要顶层class不和别的页面冲突,整个页面的样式都是唯一生效的
|
|
||||||
````
|
|
||||||
FooterToolBar.vue:fixed定位的底部，通过是否定义内部控件的属性slot="extra"决定是左浮动或是右浮动
|
|
||||||
HeaderNotice.vue:首页通知(如下图)
|
|
||||||
|
|
||||||
HeaderInfo.vue:上下文字布局（如下图）
|
|
||||||
|
|
||||||
Logo.vue:首页左上侧的log图
|
|
||||||
|
|
||||||
UserMenu.vue:首页右上侧的内容
|
|
||||||
|
|
||||||
####16.trend包 趋势显示组件（如下图）
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -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
|
|
||||||
<template>
|
|
||||||
<bar title="柱状图" :dataSource="dataSource" :height="420"/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Bar from '@/components/chart/Bar'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'ChartDemo',
|
|
||||||
components: {
|
|
||||||
Bar
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dataSource: [
|
|
||||||
{
|
|
||||||
"x": "1月",
|
|
||||||
"y": 320
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": "2月",
|
|
||||||
"y": 457
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": "3月",
|
|
||||||
"y": 182
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style></style>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 多列柱状图
|
|
||||||
|
|
||||||
##### 引用方式
|
|
||||||
|
|
||||||
```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 }
|
|
||||||
]
|
|
||||||
```
|
|
||||||
@@ -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
|
|
||||||
<j-date v-model="dateStr"></j-date>
|
|
||||||
```
|
|
||||||
|
|
||||||
2.组件带有v-decorator的使用方法
|
|
||||||
a).设置trigger-change属性为true
|
|
||||||
```vue
|
|
||||||
<j-date :trigger-change="true" v-decorator="['dateStr',{}]"></j-date>
|
|
||||||
```
|
|
||||||
|
|
||||||
b).设置decorator的option.trigger为input
|
|
||||||
```vue
|
|
||||||
<j-date v-decorator="['dateStr',{trigger:'input'}]"></j-date>
|
|
||||||
```
|
|
||||||
|
|
||||||
3.其他使用
|
|
||||||
添加style
|
|
||||||
```vue
|
|
||||||
<j-date v-model="dateStr" style="width:100%"></j-date>
|
|
||||||
```
|
|
||||||
添加placeholder
|
|
||||||
```vue
|
|
||||||
<j-date v-model="dateStr" placeholder="请输入dateStr"></j-date>
|
|
||||||
```
|
|
||||||
添加readOnly
|
|
||||||
```vue
|
|
||||||
<j-date v-model="dateStr" :read-only="true"></j-date>
|
|
||||||
```
|
|
||||||
|
|
||||||
备注:
|
|
||||||
script内需引入jdate
|
|
||||||
```vue
|
|
||||||
<script>
|
|
||||||
import JDate from '@/components/jeecg/JDate'
|
|
||||||
export default {
|
|
||||||
name: "demo",
|
|
||||||
components: {
|
|
||||||
JDate
|
|
||||||
}
|
|
||||||
//...
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
||||||
# 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
|
|
||||||
<!-- 高级查询区域 -->
|
|
||||||
<j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
|
|
||||||
```
|
|
||||||
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
|
|
||||||
<j-ellipsis :value="text"/>
|
|
||||||
|
|
||||||
|
|
||||||
# Modal弹框实现最大化功能
|
|
||||||
|
|
||||||
1.定义modal的宽度：
|
|
||||||
```vue
|
|
||||||
<a-modal
|
|
||||||
:width="modalWidth"
|
|
||||||
|
|
||||||
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
2.自定义modal的title,居右显示切换图标
|
|
||||||
```vue
|
|
||||||
<template slot="title">
|
|
||||||
<div style="width: 100%;">
|
|
||||||
<span>{{ title }}</span>
|
|
||||||
<span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
|
|
||||||
<a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
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-select/> 下拉选项滚动错位的解决方法
|
|
||||||
|
|
||||||
## 问题描述
|
|
||||||
|
|
||||||
当使用了 `a-modal` 或其他带有滚动条的组件时，使用`a-select`组件并打开下拉框时滚动滚动条，就会导致错位的问题产生。
|
|
||||||
|
|
||||||
## 解决方法
|
|
||||||
|
|
||||||
大多数情况下，在 `a-select` 上添加一个 `getPopupContainer` 属性，值为`node => node.parentNode`即可解决。
|
|
||||||
但是如果遇到 `a-select` 标签层级过深的情况，可能仍然会显示异常，只需要多加几个`.parentNode` （例：node => node.parentNode.parentNode.parentNode）多尝试几次直到解决问题即可。
|
|
||||||
|
|
||||||
### 代码示例
|
|
||||||
|
|
||||||
```html
|
|
||||||
<a-select
|
|
||||||
placeholder="请选择展示模板"
|
|
||||||
:options="dicts.displayTemplate"
|
|
||||||
:getPopupContainer="node => node.parentNode"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
# 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
|
|
||||||
<template>
|
|
||||||
<a-card :bordered="false">
|
|
||||||
<j-tree-table :url="url" :columns="columns" :tableProps="tableProps"/>
|
|
||||||
</a-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JTreeTable from '@/components/jeecg/JTreeTable'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'AsyncTreeTable',
|
|
||||||
components: { JTreeTable },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
url: '/api/asynTreeList',
|
|
||||||
columns: [
|
|
||||||
{ title: '菜单名称', dataIndex: 'name' },
|
|
||||||
{ title: '组件', dataIndex: 'component' },
|
|
||||||
{ title: '排序', dataIndex: 'orderNum' }
|
|
||||||
],
|
|
||||||
selectedRowKeys: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
tableProps() {
|
|
||||||
let _this = this
|
|
||||||
return {
|
|
||||||
// 列表项是否可选择
|
|
||||||
// 配置项见：https://vue.ant.design/components/table-cn/#rowSelection
|
|
||||||
rowSelection: {
|
|
||||||
selectedRowKeys: _this.selectedRowKeys,
|
|
||||||
onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
# JCheckbox 使用文档
|
|
||||||
|
|
||||||
###### 说明: antd-vue checkbox组件处理的是数组，用起来不是很方便，特二次封装，使用时只需处理字符串即可
|
|
||||||
## 参数配置
|
|
||||||
| 参数 | 类型 | 必填 |说明|
|
|
||||||
|--------------|---------|----|---------|
|
|
||||||
| options |array |✔| checkbox需要配置的项，是个数组，数组中每个对象包含两个属性:label(用于显示)和value(用于存储) |
|
|
||||||
|
|
||||||
使用示例
|
|
||||||
----
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<a-form :form="form">
|
|
||||||
<a-form-item label="v-model式用法">
|
|
||||||
<j-checkbox v-model="sport" :options="sportOptions"></j-checkbox><span>{{ sport }}</span>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item label="v-decorator式用法">
|
|
||||||
<j-checkbox v-decorator="['sport']" :options="sportOptions"></j-checkbox><span>{{ getFormFieldValue('sport') }}</span>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JCheckbox from '@/components/jeecg/JCheckbox'
|
|
||||||
export default {
|
|
||||||
components: {JCheckbox},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
sport:'',
|
|
||||||
sportOptions:[
|
|
||||||
{
|
|
||||||
label:"足球",
|
|
||||||
value:"1"
|
|
||||||
},{
|
|
||||||
label:"篮球",
|
|
||||||
value:"2"
|
|
||||||
},{
|
|
||||||
label:"乒乓球",
|
|
||||||
value:"3"
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getFormFieldValue(field){
|
|
||||||
return this.form.getFieldValue(field)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
# JCodeEditor 使用文档
|
|
||||||
|
|
||||||
###### 说明: 一个简易版的代码编辑器，支持语法高亮
|
|
||||||
## 参数配置
|
|
||||||
| 参数 | 类型 | 必填 |说明|
|
|
||||||
|--------------|---------|----|---------|
|
|
||||||
| language |string | | 表示当前编写代码的类型 javascript/html/css/sql |
|
|
||||||
| placeholder |string | | placeholder |
|
|
||||||
| lineNumbers |Boolean | | 是否显示行号 |
|
|
||||||
| fullScreen |Boolean | | 是否显示全屏按钮 |
|
|
||||||
| zIndex |string | | 全屏以后的z-index |
|
|
||||||
|
|
||||||
使用示例
|
|
||||||
----
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<j-code-editor
|
|
||||||
language="javascript"
|
|
||||||
v-model="editorValue"
|
|
||||||
:fullScreen="true"
|
|
||||||
style="min-height: 100px"/>
|
|
||||||
{{ editorValue }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JCodeEditor from '@/components/jeecg/JCodeEditor'
|
|
||||||
export default {
|
|
||||||
components: {JCodeEditor},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
editorValue:'',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
# JFormContainer 使用文档
|
|
||||||
|
|
||||||
###### 说明: 暂用于表单禁用
|
|
||||||
|
|
||||||
使用示例
|
|
||||||
----
|
|
||||||
```vue
|
|
||||||
<!-- 在form下直接写这个组件，设置disabled为true就能将此form中的控件禁用 -->
|
|
||||||
<a-form layout="inline" :form="form" >
|
|
||||||
<j-form-container disabled>
|
|
||||||
<!-- 表单内容省略..... -->
|
|
||||||
</j-form-container>
|
|
||||||
</a-form>
|
|
||||||
```
|
|
||||||
|
|
||||||
# JImportModal 使用文档
|
|
||||||
|
|
||||||
###### 说明: 用于列表页面导入excel功能
|
|
||||||
|
|
||||||
使用示例
|
|
||||||
----
|
|
||||||
```vue
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- 此处省略部分代码...... -->
|
|
||||||
<a-button @click="handleImportXls" type="primary" icon="upload">导入</a-button>
|
|
||||||
<!-- 此处省略部分代码...... -->
|
|
||||||
<j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
|
|
||||||
<!-- 此处省略部分代码...... -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JCodeEditor from '@/components/jeecg/JCodeEditor'
|
|
||||||
export default {
|
|
||||||
components: {JCodeEditor},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
//省略代码......
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
//省略部分代码......
|
|
||||||
handleImportXls(){
|
|
||||||
this.$refs.importModal.show()
|
|
||||||
},
|
|
||||||
getImportUrl(){
|
|
||||||
return '你自己处理上传业务的后台地址'
|
|
||||||
},
|
|
||||||
importOk(){
|
|
||||||
this.loadData(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
# JSlider 滑块验证码
|
|
||||||
|
|
||||||
使用示例
|
|
||||||
----
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<div style="width: 300px">
|
|
||||||
<j-slider @onSuccess="sliderSuccess"></j-slider>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JSlider from '@/components/jeecg/JSlider'
|
|
||||||
export default {
|
|
||||||
components: {JSlider},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
editorValue:'',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
sliderSuccess(){
|
|
||||||
console.log("验证完成")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
# JTreeSelect 树形下拉组件
|
|
||||||
异步加载的树形下拉组件
|
|
||||||
|
|
||||||
## 参数配置
|
|
||||||
| 参数 | 类型 | 必填 |说明|
|
|
||||||
|--------------|---------|----|---------|
|
|
||||||
| placeholder |string | | placeholder |
|
|
||||||
| dict |string | ✔| 表名,显示字段名,存储字段名拼接的字符串 |
|
|
||||||
| pidField |string | ✔| 父ID的字段名 |
|
|
||||||
| pidValue |string | | 根节点父ID的值 默认'0' 不可以设置为空,如果想使用此组件，而数据库根节点父ID为空，请修改之 |
|
|
||||||
| multiple |boolean | |是否支持多选 |
|
|
||||||
|
|
||||||
使用示例
|
|
||||||
----
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<a-form>
|
|
||||||
<a-form-item label="树形下拉测试" style="width: 300px">
|
|
||||||
<j-tree-select
|
|
||||||
v-model="departId"
|
|
||||||
placeholder="请选择部门"
|
|
||||||
dict="sys_depart,depart_name,id"
|
|
||||||
pidField="parent_id">
|
|
||||||
</j-tree-select>
|
|
||||||
{{ departId }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-form >
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JTreeSelect from '@/components/jeecg/JTreeSelect'
|
|
||||||
export default {
|
|
||||||
components: {JTreeSelect},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
departId:""
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
@@ -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
|
|
||||||
<template>
|
|
||||||
<a-tabs @change="handleChangeTab">
|
|
||||||
<a-tab-pane tab="表格1" :forceRender="true" key="1">
|
|
||||||
<j-editable-table
|
|
||||||
ref="editableTable1"
|
|
||||||
:loading="tab1.loading"
|
|
||||||
:columns="tab1.columns"
|
|
||||||
:dataSource="tab1.dataSource"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<a-tab-pane tab="表格2" :forceRender="true" key="2">
|
|
||||||
<j-editable-table
|
|
||||||
ref="editableTable2"
|
|
||||||
:loading="tab2.loading"
|
|
||||||
:columns="tab2.columns"
|
|
||||||
:dataSource="tab2.dataSource"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
</a-tabs>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
/*--- 忽略部分代码片段 ---*/
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
/** 切换tab选项卡的时候重置editableTable的滚动条状态 */
|
|
||||||
handleChangeTab(key) {
|
|
||||||
this.$refs[`editableTable${key}`].resetScrollTop()
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
/*--- 忽略部分代码片段 ---*/
|
|
||||||
```
|
|
||||||
|
|
||||||
### slot(自定义插槽)如何使用？
|
|
||||||
|
|
||||||
代码示例请看：[示例四(slot)](#示例四(slot))
|
|
||||||
|
|
||||||
----------------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
## 示例一
|
|
||||||
|
|
||||||
```html
|
|
||||||
<j-editable-table
|
|
||||||
ref="editableTable"
|
|
||||||
:loading="loading"
|
|
||||||
:columns="columns"
|
|
||||||
:dataSource="dataSource"
|
|
||||||
:rowNumber="true"
|
|
||||||
:rowSelection="true"
|
|
||||||
:actionButton="true"
|
|
||||||
style="margin-top: 8px;"
|
|
||||||
@selectRowChange="handleSelectRowChange"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 示例二
|
|
||||||
|
|
||||||
```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
|
|
||||||
<template>
|
|
||||||
<j-editable-table :columns="columns" :dataSource="dataSource">
|
|
||||||
<!-- 定义插槽 -->
|
|
||||||
<!-- 这种定义插槽的写法是vue推荐的新版写法（https://cn.vuejs.org/v2/guide/components-slots.html#具名插槽），旧版已被废弃的写法不再支持 -->
|
|
||||||
<!-- 若webstorm这样写报错，请看这篇文章：https://blog.csdn.net/lxq_9532/article/details/81870651 -->
|
|
||||||
<template v-slot:action="props">
|
|
||||||
<a @click="handleDelete(props)">删除</a>
|
|
||||||
</template>
|
|
||||||
</j-editable-table>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { FormTypes } from '@/utils/JEditableTableUtil'
|
|
||||||
import JEditableTable from '@/components/jeecg/JEditableTable'
|
|
||||||
export default {
|
|
||||||
components: { JEditableTable },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
columns: [
|
|
||||||
// ...
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
width: '8%',
|
|
||||||
type: FormTypes.slot, // 定义该列为 自定义插值列
|
|
||||||
slotName: 'action' // slot 的名称，对应 v-slot 冒号后面和等号前面的内容
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/* a 标签的点击事件，删除当前选中的行 */
|
|
||||||
handleDelete(props) {
|
|
||||||
// 参数解释
|
|
||||||
// props.index ：当前行的下标
|
|
||||||
// props.text ：当前值，可能是defaultValue定义的值，也可能是从dataSource中取出的值
|
|
||||||
// props.rowId ：当前选中行的id，如果是新增行则是临时id
|
|
||||||
// props.column ：当前操作的列
|
|
||||||
// props.getValue ：这是一个function，执行后可以获取当前行的所有值（禁止在template中使用）
|
|
||||||
// 例：const value = props.getValue()
|
|
||||||
// props.target ：触发当前事件的实例，可直接调用该实例内的方法（禁止在template中使用）
|
|
||||||
// 例：target.add()
|
|
||||||
|
|
||||||
// 使用实例：删除当前操作的行
|
|
||||||
let { rowId, target } = props
|
|
||||||
target.removeRows(rowId)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 示例五
|
|
||||||
|
|
||||||
```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}默认提示'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
```
|
|
||||||
@@ -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 | 是否显示"选择"按钮，如果不显示，可以直接点击文本框打开选择界面 |
|
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
# JSelectDepart 部门选择组件
|
|
||||||
选择部门组件,存储部门ID,显示部门名称
|
|
||||||
|
|
||||||
## 参数配置
|
|
||||||
| 参数 | 类型 | 必填 |说明|
|
|
||||||
|--------------|---------|----|---------|
|
|
||||||
| modalWidth |Number | | 弹框宽度 默认500 |
|
|
||||||
| multi |Boolean | | 是否多选 默认false |
|
|
||||||
| rootOpened |Boolean | | 是否展开根节点 默认true |
|
|
||||||
| disabled |Boolean | | 是否禁用 默认false|
|
|
||||||
|
|
||||||
使用示例
|
|
||||||
----
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<a-form :form="form">
|
|
||||||
<a-form-item label="部门选择v-decorator" style="width: 300px">
|
|
||||||
<j-select-depart v-decorator="['bumen']"/>
|
|
||||||
{{ getFormFieldValue('bumen') }}
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item label="部门选择v-model" style="width: 300px">
|
|
||||||
<j-select-depart v-model="bumen"/>
|
|
||||||
{{ bumen }}
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item label="部门多选v-model" style="width: 300px">
|
|
||||||
<j-select-depart v-model="bumens" :multi="true"/>
|
|
||||||
{{ bumens }}
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
</a-form >
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
|
|
||||||
export default {
|
|
||||||
components: {JSelectDepart},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
bumen:"",
|
|
||||||
bumens:""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
getFormFieldValue(field){
|
|
||||||
return this.form.getFieldValue(field)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
# JSelectMultiUser 用户多选组件
|
|
||||||
|
|
||||||
使用示例
|
|
||||||
----
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<a-form :form="form">
|
|
||||||
<a-form-item label="用户选择v-decorator" style="width: 500px">
|
|
||||||
<j-select-multi-user v-decorator="['users']"/>
|
|
||||||
{{ getFormFieldValue('users') }}
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item label="用户选择v-model" style="width: 500px">
|
|
||||||
<j-select-multi-user v-model="users" ></j-select-multi-user>
|
|
||||||
{{ users }}
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
</a-form >
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
|
|
||||||
export default {
|
|
||||||
components: {JSelectMultiUser},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
users:"",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
getFormFieldValue(field){
|
|
||||||
return this.form.getFieldValue(field)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
# JSelectUserByDep 根据部门选择用户
|
|
||||||
|
|
||||||
## 参数配置
|
|
||||||
| 参数 | 类型 | 必填 |说明|
|
|
||||||
|--------------|---------|----|---------|
|
|
||||||
| modalWidth |Number | | 弹框宽度 默认1250 |
|
|
||||||
| disabled |Boolean | | 是否禁用 |
|
|
||||||
|
|
||||||
使用示例
|
|
||||||
----
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<a-form :form="form">
|
|
||||||
<a-form-item label="用户选择v-decorator" style="width: 500px">
|
|
||||||
<j-select-user-by-dep v-decorator="['users']"/>
|
|
||||||
{{ getFormFieldValue('users') }}
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item label="用户选择v-model" style="width: 500px">
|
|
||||||
<j-select-user-by-dep v-model="users" ></j-select-user-by-dep>
|
|
||||||
{{ users }}
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
</a-form >
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
|
|
||||||
export default {
|
|
||||||
components: {JSelectUserByDep},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
users:"",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
getFormFieldValue(field){
|
|
||||||
return this.form.getFieldValue(field)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
@@ -21,7 +21,6 @@
|
|||||||
:treeData="departTree"
|
:treeData="departTree"
|
||||||
:expandAction="false"
|
:expandAction="false"
|
||||||
:expandedKeys.sync="expandedKeys"
|
:expandedKeys.sync="expandedKeys"
|
||||||
@select="onDepSelect"
|
|
||||||
/>
|
/>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
@@ -181,20 +180,6 @@
|
|||||||
if (arg === 1) {
|
if (arg === 1) {
|
||||||
this.ipagination.current = 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() {
|
resetScreenSize() {
|
||||||
@@ -269,15 +254,6 @@
|
|||||||
}
|
}
|
||||||
this.selectUserIds = userIds.substring(1);
|
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) {
|
onSelectChange(selectedRowKeys, selectionRows) {
|
||||||
this.selectedRowKeys = selectedRowKeys;
|
this.selectedRowKeys = selectedRowKeys;
|
||||||
this.selectionRows = selectionRows;
|
this.selectionRows = selectionRows;
|
||||||
@@ -285,18 +261,6 @@
|
|||||||
onSearch() {
|
onSearch() {
|
||||||
this.loadData(1);
|
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() {
|
queryDepartTree() {
|
||||||
},
|
},
|
||||||
modalFormOk() {
|
modalFormOk() {
|
||||||
|
|||||||
Reference in New Issue
Block a user