Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
jinli gu
JSH ERP
Commits
6c97b4a0
Commit
6c97b4a0
authored
Dec 18, 2022
by
季圣华
Browse files
去除多余的readme文件
parent
ba32e7f8
Changes
7
Show whitespace changes
Inline
Side-by-side
jshERP-web/src/components/README.md
deleted
100644 → 0
View file @
ba32e7f8
####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
\v
iews
\p
rofile
\a
dvanced
\A
dvanced.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包 趋势显示组件（如下图）
\ No newline at end of file
jshERP-web/src/components/chart/README.md
deleted
100644 → 0
View file @
ba32e7f8
# 报表组件文档
## 柱状图
##### 引用方式
```
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
}
]
```
\ No newline at end of file
jshERP-web/src/components/jeecg/README.md
deleted
100644 → 0
View file @
ba32e7f8
# 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>
```
jshERP-web/src/components/jeecg/README_JEditableTable.md
deleted
100644 → 0
View file @
ba32e7f8
# 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}默认提示
'
}
]
},
]
```
\ No newline at end of file
jshERP-web/src/components/jeecgbiz/JSelectBizComponent/README.md
deleted
100644 → 0
View file @
ba32e7f8
# 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 | 是否显示"选择"按钮，如果不显示，可以直接点击文本框打开选择界面 |
jshERP-web/src/components/jeecgbiz/README.md
deleted
100644 → 0
View file @
ba32e7f8
# 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
>
```
jshERP-web/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue
View file @
6c97b4a0
...
@@ -21,7 +21,6 @@
...
@@ -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 @@
...
@@ -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 @@
...
@@ -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 @@
...
@@ -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
()
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
