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
Expand all
Hide 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
This diff is collapsed.
Click to expand it.
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 @@
:treeData="departTree"
:expandAction="false"
:expandedKeys.sync="expandedKeys"
@select="onDepSelect"
/>
</a-card>
</a-col>
...
...
@@ -181,20 +180,6 @@
if
(
arg
===
1
)
{
this
.
ipagination
.
current
=
1
;
}
if
(
this
.
selectedDepIds
&&
this
.
selectedDepIds
.
length
>
0
)
{
await
this
.
initQueryUserByDepId
(
this
.
selectedDepIds
)
}
else
{
this
.
loading
=
true
let
params
=
this
.
getQueryParams
()
//查询条件
await
getUserList
(
params
).
then
((
res
)
=>
{
if
(
res
.
success
)
{
this
.
dataSource
=
res
.
result
.
records
this
.
ipagination
.
total
=
res
.
result
.
total
}
}).
finally
(()
=>
{
this
.
loading
=
false
})
}
},
// 触发屏幕自适应
resetScreenSize
()
{
...
...
@@ -269,15 +254,6 @@
}
this
.
selectUserIds
=
userIds
.
substring
(
1
);
},
// 点击树节点,筛选出对应的用户
onDepSelect
(
selectedDepIds
)
{
if
(
selectedDepIds
[
0
]
!=
null
)
{
this
.
initQueryUserByDepId
(
selectedDepIds
);
// 调用方法根据选选择的id查询用户信息
if
(
this
.
selectedDepIds
[
0
]
!==
selectedDepIds
[
0
])
{
this
.
selectedDepIds
=
[
selectedDepIds
[
0
]];
}
}
},
onSelectChange
(
selectedRowKeys
,
selectionRows
)
{
this
.
selectedRowKeys
=
selectedRowKeys
;
this
.
selectionRows
=
selectionRows
;
...
...
@@ -285,18 +261,6 @@
onSearch
()
{
this
.
loadData
(
1
);
},
// 根据选择的id来查询用户信息
initQueryUserByDepId
(
selectedDepIds
)
{
this
.
loading
=
true
return
queryUserByDepId
({
id
:
selectedDepIds
.
toString
()}).
then
((
res
)
=>
{
if
(
res
.
success
)
{
this
.
dataSource
=
res
.
result
;
this
.
ipagination
.
total
=
res
.
result
.
length
;
}
}).
finally
(()
=>
{
this
.
loading
=
false
})
},
queryDepartTree
()
{
},
modalFormOk
()
{
...
...
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
