-
-
+
-
+
@@ -38,26 +38,48 @@
{
dataKey: 'score',
min: 0,
- max: 80
+ max: 100
}, {
dataKey: 'user',
alias: '类型'
}
]
+ const sourceData = [
+ { item: '示例一', score: 40 },
+ { item: '示例二', score: 20 },
+ { item: '示例三', score: 67 },
+ { item: '示例四', score: 43 },
+ { item: '示例五', score: 90 }
+ ]
+
export default {
name: 'Radar',
props: {
- data: {
+ height: {
+ type: Number,
+ default: 254
+ },
+ dataSource: {
type: Array,
- default: null,
+ default: () => []
}
},
- data () {
+ data() {
return {
axis1Opts,
axis2Opts,
- scale
+ scale,
+ data: sourceData
+ }
+ },
+ watch: {
+ dataSource(newVal) {
+ if (newVal.length === 0) {
+ this.data = sourceData
+ } else {
+ this.data = newVal
+ }
}
}
}
diff --git a/ant-design-jeecg-vue/src/components/chart/RankList.vue b/ant-design-jeecg-vue/src/components/chart/RankList.vue
index d6744ae480e5c6d757da7ea8fe7b1280882569b3..a50b02af9975dc9e918fc5cef6d6e676a127177e 100644
--- a/ant-design-jeecg-vue/src/components/chart/RankList.vue
+++ b/ant-design-jeecg-vue/src/components/chart/RankList.vue
@@ -1,7 +1,7 @@
-
-
-
+
+
+
\ No newline at end of file
diff --git a/ant-design-jeecg-vue/src/components/chart/README.md b/ant-design-jeecg-vue/src/components/chart/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..20c74a809eb6f9ab7bb53bc0e44d1c4c31fb09ce
--- /dev/null
+++ b/ant-design-jeecg-vue/src/components/chart/README.md
@@ -0,0 +1,328 @@
+# 报表组件文档
+
+## 柱状图
+
+##### 引用方式
+
+```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
+ }
+]
+```
+
+## 多列柱状图
+
+##### 引用方式
+
+```js
+import BarMultid from '@/components/chart/BarMultid'
+```
+
+##### 参数列表
+
+| 参数名 | 类型 | 必填 | 说明 |
+|------------|--------|----|------------|
+| title | string | | 报表标题 |
+| fields | array | | 主列字段列表 |
+| dataSource | array | | 报表数据源 |
+| height | number | | 报表高度，默认254 |
+
+##### fields 示例
+
+```json
+["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug."]
+```
+
+##### dataSource 示例
+
+```json
+[
+ {
+ "type": "Jeecg", // 列名
+ "Jan.": 18.9,
+ "Feb.": 28.8,
+ "Mar.": 39.3,
+ "Apr.": 81.4,
+ "May": 47,
+ "Jun.": 20.3,
+ "Jul.": 24,
+ "Aug.": 35.6
+ },
+ {
+ "type": "Jeebt",
+ "Jan.": 12.4,
+ "Feb.": 23.2,
+ "Mar.": 34.5,
+ "Apr.": 99.7,
+ "May": 52.6,
+ "Jun.": 35.5,
+ "Jul.": 37.4,
+ "Aug.": 42.4
+ }
+]
+```
+
+## 迷你柱状图
+
+不带标题和数据轴的柱状图
+
+##### 引用方式
+
+```js
+import MiniBar from '@/components/chart/MiniBar'
+```
+
+##### 参数列表
+
+| 参数名 | 类型 | 必填 | 说明 |
+|------------|--------|----|---------------|
+| width | number | | 报表宽度度，默认自适应宽度 |
+| height | number | | 报表高度，默认200 |
+| dataSource | array | | 报表数据源 |
+
+##### dataSource 示例
+
+```json
+[
+ {
+ "x": "1月",
+ "y": 320
+ },
+ {
+ "x": "2月",
+ "y": 457
+ },
+ {
+ "x": "3月",
+ "y": 182
+ }
+]
+```
+
+## 面积图
+
+##### 引用方式
+
+```js
+import AreaChartTy from '@/components/chart/AreaChartTy'
+```
+
+##### 参数列表
+
+| 参数名 | 类型 | 必填 | 说明 |
+|------------|--------|----|------------|
+| title | string | | 报表标题 |
+| dataSource | array | ✔️ | 报表数据源 |
+| height | number | | 报表高度，默认254 |
+| lineSize | number | | 线的粗细，默认2 |
+
+##### dataSource 示例
+
+```json
+[
+ {
+ "x": "1月",
+ "y": 320
+ },
+ {
+ "x": "2月",
+ "y": 457
+ },
+ {
+ "x": "3月",
+ "y": 182
+ }
+]
+```
+
+## 多行折线图
+
+##### 引用方式
+
+```js
+import LineChartMultid from '@/components/chart/LineChartMultid'
+```
+
+##### 参数列表
+
+| 参数名 | 类型 | 必填 | 说明 |
+|------------|--------|----|------------|
+| title | string | | 报表标题 |
+| fields | array | | 主列字段列表 |
+| dataSource | array | | 报表数据源 |
+| height | number | | 报表高度，默认254 |
+
+##### fields 示例
+
+```json
+["jeecg", "jeebt"]
+```
+
+##### dataSource 示例
+
+```json
+[
+ {
+ "type": "Jan", // 列名
+ "jeecg": 7,
+ "jeebt": 3.9
+ },
+ { "type": "Feb", "jeecg": 6.9, "jeebt": 4.2 },
+ { "type": "Mar", "jeecg": 9.5, "jeebt": 5.7 },
+ { "type": "Apr", "jeecg": 14.5, "jeebt": 8.5 },
+ { "type": "May", "jeecg": 18.4, "jeebt": 11.9 },
+ { "type": "Jun", "jeecg": 21.5, "jeebt": 15.2 },
+ { "type": "Jul", "jeecg": 25.2, "jeebt": 17 },
+ { "type": "Aug", "jeecg": 26.5, "jeebt": 16.6 },
+ { "type": "Sep", "jeecg": 23.3, "jeebt": 14.2 },
+ { "type": "Oct", "jeecg": 18.3, "jeebt": 10.3 },
+ { "type": "Nov", "jeecg": 13.9, "jeebt": 6.6 },
+ { "type": "Dec", "jeecg": 9.6, "jeebt": 4.8 }
+]
+```
+
+## 饼状图
+
+##### 引用方式
+
+```js
+import Pie from '@/components/chart/Pie'
+```
+
+##### 参数列表
+
+| 参数名 | 类型 | 必填 | 说明 |
+|------------|--------|----|------------|
+| dataSource | array | | 报表数据源 |
+| height | number | | 报表高度，默认254 |
+
+##### dataSource 示例
+
+```json
+[
+ // 所有的 percent 相加等于 100
+ { "item": "一月", "percent": 40 },
+ { "item": "二月", "percent": 21 },
+ { "item": "三月", "percent": 17 },
+ { "item": "四月", "percent": 13 },
+ { "item": "五月", "percent": 9 }
+]
+```
+
+## 雷达图
+
+##### 引用方式
+
+```js
+import Radar from '@/components/chart/Radar'
+```
+
+##### 参数列表
+
+| 参数名 | 类型 | 必填 | 说明 |
+|------------|--------|----|------------|
+| dataSource | array | | 报表数据源 |
+| height | number | | 报表高度，默认254 |
+
+##### dataSource 示例
+
+```json
+[
+ // score 最小值为 0，最大值为 100
+ { "item": "一月", "score": 40 },
+ { "item": "二月", "score": 20 },
+ { "item": "三月", "score": 67 },
+ { "item": "四月", "score": 43 },
+ { "item": "五月", "score": 90 }
+]
+```
+
+## 进度条
+
+##### 引用方式
+
+```js
+import MiniProgress from '@/components/chart/MiniProgress'
+```
+
+##### 参数列表
+
+| 参数名 | 类型 | 必填 | 说明 |
+|------------|--------|----|-------------------|
+| percentage | number | | 当前进度百分比，默认0，最高100 |
+| target | number | | 目标值，默认10 |
+| height | number | | 进度条高度，默认10 |
+| color | string | | 进度条颜色，默认 #13C2C2 |
+
+## 仪表盘
+
+##### 引用方式
+
+```js
+import DashChartDemo from '@/components/chart/DashChartDemo'
+```
+
+##### 参数列表
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|--------|----|----------------|
+| title | string | | 报表标题 |
+| value | number | | 当前值，默认6.7，最大为9 |
+| height | number | | 报表高度，默认254 |
+
+## 排名列表
+
+##### 引用方式
+
+```js
+import RankList from '@/components/chart/RankList'
+```
+
+##### 参数列表
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|--------|----|--------------|
+| title | string | | 报表标题 |
+| list | array | | 排名列表数据 |
+| height | number | | 报表高度，默认自适应高度 |
+
+##### list 示例
+
+```json
+[
+ {
+ "name": "北京朝阳 1 号店",
+ "total": 1981
+ },
+ { "name": "北京朝阳 2 号店", "total": 1359 },
+ { "name": "北京朝阳 3 号店", "total": 1354 },
+ { "name": "北京朝阳 4 号店", "total": 263 },
+ { "name": "北京朝阳 5 号店", "total": 446 },
+ { "name": "北京朝阳 6 号店", "total": 796 }
+]
+```
\ No newline at end of file
diff --git a/ant-design-jeecg-vue/src/components/chart/Radar.vue b/ant-design-jeecg-vue/src/components/chart/Radar.vue
index 087526224ad34918ffb0832ac52afb14809623d2..b7b30b05d3b1e7bea24adb9433c372a23e136b00 100644
--- a/ant-design-jeecg-vue/src/components/chart/Radar.vue
+++ b/ant-design-jeecg-vue/src/components/chart/Radar.vue
@@ -1,12 +1,12 @@
- {{ title }}
--
+
-
{{ index + 1 }}
{{ item.name }}
@@ -23,6 +23,10 @@
list: {
type: Array,
default: null
+ },
+ height: {
+ type: Number,
+ default: null
}
}
}
diff --git a/ant-design-jeecg-vue/src/components/chart/TransferBar.vue b/ant-design-jeecg-vue/src/components/chart/TransferBar.vue
index 33e178ab59d6a741a42a380a8691f7a5606562db..bb953e9f97a5eb0876278a3959421ed5b312ed71 100644
--- a/ant-design-jeecg-vue/src/components/chart/TransferBar.vue
+++ b/ant-design-jeecg-vue/src/components/chart/TransferBar.vue
@@ -2,63 +2,65 @@
\ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/chart/Trend.vue b/ant-design-jeecg-vue/src/components/chart/Trend.vue index ca8f591ca84d3f6625cd37e30ef6a33c5273c696..95cae98cb6931e1605362444de048d6495daf802 100644 --- a/ant-design-jeecg-vue/src/components/chart/Trend.vue +++ b/ant-design-jeecg-vue/src/components/chart/Trend.vue @@ -10,11 +10,13 @@ export default { name: "Trend", props: { + // 同title term: { type: String, default: '', required: true }, + // 百分比 percentage: { type: Number, default: null diff --git a/ant-design-jeecg-vue/src/components/dict/DictSelectTag.vue b/ant-design-jeecg-vue/src/components/dict/JDictSelectTag.vue similarity index 84% rename from ant-design-jeecg-vue/src/components/dict/DictSelectTag.vue rename to ant-design-jeecg-vue/src/components/dict/JDictSelectTag.vue index e50125467f69a38f52f6487aba836d63eb584f3f..fe93b013d8ad039c42477e5bdd68f6a09c29ecee 100644 --- a/ant-design-jeecg-vue/src/components/dict/DictSelectTag.vue +++ b/ant-design-jeecg-vue/src/components/dict/JDictSelectTag.vue @@ -9,10 +9,11 @@ import {ajaxGetDictItems} from '@/api/api' export default { - name: "DictSelectTag", + name: "JDictSelectTag", props: { dictCode: String, placeholder: String, + triggerChange: Boolean, value: String,// 1.接收一个 value prop }, data() { @@ -37,7 +38,11 @@ }, handleInput(val) { console.log(val); - this.$emit('input', val); // 2.触发 input 事件，并传入新值 + if(this.triggerChange){ + this.$emit('change', val); + }else{ + this.$emit('input', val); + } } } } diff --git a/ant-design-jeecg-vue/src/components/dict/DictSelectUtil.js b/ant-design-jeecg-vue/src/components/dict/JDictSelectUtil.js similarity index 70% rename from ant-design-jeecg-vue/src/components/dict/DictSelectUtil.js rename to ant-design-jeecg-vue/src/components/dict/JDictSelectUtil.js index e7d03389dd9674b85411075059641110db071239..df16af2aea4c4a6a413f868a34f21af09cb7f263 100644 --- a/ant-design-jeecg-vue/src/components/dict/DictSelectUtil.js +++ b/ant-design-jeecg-vue/src/components/dict/JDictSelectUtil.js @@ -37,6 +37,32 @@ export function filterDictText(dictOptions, text) { return re; } +/** + * 字典值替换文本通用方法(多选) + * @param dictOptions 字典数组 + * @param text 字典值 + * @return String + */ +export function filterMultiDictText(dictOptions, text) { + if(!text){ + return "" + } + let re = ""; + let arr = text.split(",") + dictOptions.forEach(function (option) { + for(let i=0;i
{{ title }}
- - + + +``` + +v-decorator用法： +```html + +``` +- 从数据库表获取字典数据，dictCode格式说明: 表名,文本字段,取值字段 +```html + +``` -DictSelectUtil.js 列表字典函数用法说明 -=== -例子 +# JDictSelectUtil.js 列表字典函数用法 ---- -第一步： 引入依赖方法 - import {initDictOptions, filterDictText} from '@/components/dict/DictSelectUtil' +- 第一步: 引入依赖方法 +```html + import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil' +``` -第二步： 在created()初始化方法执行字典配置方法 +- 第二步: 在created()初始化方法执行字典配置方法 +```html //初始化字典配置 - this.initDictConfig(); -第三步： 实现initDictConfig方法，加载列表所需要的字典(列表上有多个字典项，就执行多次initDictOptions方法) - //sexDictOptions 自行定义 + this.initDictConfig(); +``` + +- 第三步: 实现initDictConfig方法，加载列表所需要的字典(列表上有多个字典项，就执行多次initDictOptions方法) + +```html initDictConfig() { //初始化字典 - 性别 initDictOptions('sex').then((res) => { @@ -29,8 +45,12 @@ DictSelectUtil.js 列表字典函数用法说明 } }); }, -第四步：实现字段的customRender方法 +``` + +- 第四步: 实现字段的customRender方法 +```html customRender: (text, record, index) => { //字典值替换通用方法 return filterDictText(this.sexDictOptions, text); - } \ No newline at end of file + } +``` \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/dict/UserInfoTag.vue b/ant-design-jeecg-vue/src/components/dict/UserInfoTag.vue deleted file mode 100644 index 867e55926a12535b1d19a71af5385e0caf02f038..0000000000000000000000000000000000000000 --- a/ant-design-jeecg-vue/src/components/dict/UserInfoTag.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/dict/index.js b/ant-design-jeecg-vue/src/components/dict/index.js index 8bb2a957ea8de0615b4f7c9bba02ed4448252597..22c3235de9cf8e92aeb219f51229cd82fc48ab06 100644 --- a/ant-design-jeecg-vue/src/components/dict/index.js +++ b/ant-design-jeecg-vue/src/components/dict/index.js @@ -1,7 +1,7 @@ -import T from './DictSelectTag.vue' -const DictSelectTag = { +import T from './JDictSelectTag.vue' +const JDictSelectTag = { install: function (Vue) { - Vue.component('DictSelectTag',T); + Vue.component('JDictSelectTag',T); } } -export default DictSelectTag; \ No newline at end of file +export default JDictSelectTag; \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/jeecg/JCheckbox.vue b/ant-design-jeecg-vue/src/components/jeecg/JCheckbox.vue new file mode 100644 index 0000000000000000000000000000000000000000..70f2d785b1ca2e8934c1769b3b292140f9ba95ab --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecg/JCheckbox.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/ant-design-jeecg-vue/src/components/jeecg/JDate.vue b/ant-design-jeecg-vue/src/components/jeecg/JDate.vue index ed64d1611238e9750eab68ee7976b3b56bf6f266..7d6322cbb750b1d47353722726bfa821772ba83c 100644 --- a/ant-design-jeecg-vue/src/components/jeecg/JDate.vue +++ b/ant-design-jeecg-vue/src/components/jeecg/JDate.vue @@ -20,7 +20,6 @@ }, value:{ type: String, - default: '', required: false }, dateFormat:{ @@ -71,4 +70,5 @@ } } } + //note: do not set the prop value one default property diff --git a/ant-design-jeecg-vue/src/components/jeecg/JEditableTable.vue b/ant-design-jeecg-vue/src/components/jeecg/JEditableTable.vue new file mode 100644 index 0000000000000000000000000000000000000000..7eefc457691ccb807c094f2aa9be2a7bdbefddaf --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecg/JEditableTable.vue @@ -0,0 +1,1248 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/jeecg/JEditor.vue b/ant-design-jeecg-vue/src/components/jeecg/JEditor.vue new file mode 100644 index 0000000000000000000000000000000000000000..90d5cd58c1d443300a2f073e1258763823515978 --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecg/JEditor.vue @@ -0,0 +1,92 @@ + ++ ++++ ++ +++ +++ + # ++ + ++ + {{ col.title }} ++ ++ + + +++ 暂无数据 ++ + + ++ ++ + + + + ++ + +++ + + {{ rowIndex+1 }} ++ ++ + + + + + + + +++ + + + + + + + + + + + ++ + + + +{{ opt.title }} + ++ + + + + + + + {{ col.defaultValue }} + ++ + + ++ + + + \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/jeecg/JEllipsis.vue b/ant-design-jeecg-vue/src/components/jeecg/JEllipsis.vue new file mode 100644 index 0000000000000000000000000000000000000000..627113f497af069eeb5d4e6eb1fb42c3ed14bd02 --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecg/JEllipsis.vue @@ -0,0 +1,29 @@ + ++ ++ + {{value}} + + {{ value | ellipsis(length) }} + + + + + + diff --git a/ant-design-jeecg-vue/src/components/jeecg/JImportModal.vue b/ant-design-jeecg-vue/src/components/jeecg/JImportModal.vue new file mode 100644 index 0000000000000000000000000000000000000000..50df1c4d1db9f1048313e8ccad61d9c66822d9b9 --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecg/JImportModal.vue @@ -0,0 +1,110 @@ + ++ + + + + + + \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/jeecg/JSelectMultiple.vue b/ant-design-jeecg-vue/src/components/jeecg/JSelectMultiple.vue new file mode 100644 index 0000000000000000000000000000000000000000..323ad32abd7042f5c93dbd47037c332cb1bfb598 --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecg/JSelectMultiple.vue @@ -0,0 +1,65 @@ + ++ + + ++ ++ 选择导入文件 + 关闭 ++ {{ uploading ? '上传中...' : '开始上传' }} + + + ++ + + + diff --git a/ant-design-jeecg-vue/src/components/jeecg/JSuperQuery.vue b/ant-design-jeecg-vue/src/components/jeecg/JSuperQuery.vue new file mode 100644 index 0000000000000000000000000000000000000000..c5cd8cef38bd7d148006f5711f31ce0a3a35a85f --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecg/JSuperQuery.vue @@ -0,0 +1,152 @@ + ++ {{ item.text }} + ++ + + + + + + \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/jeecg/README.md b/ant-design-jeecg-vue/src/components/jeecg/README.md index 0c1e3444e76130db17eb4a147dc20c7e6cd58ce2..0947e1c173693ee6d4a8fe4f6fef5660a318ae7c 100644 --- a/ant-design-jeecg-vue/src/components/jeecg/README.md +++ b/ant-design-jeecg-vue/src/components/jeecg/README.md @@ -1,43 +1,198 @@ -日期组件 -说明：antd-vue日期组件需要用moment中转一下，用起来不是很方便，特二次封装，使用时只需要传字符串即可 -==== - -参数说明 ----- -placeholder：placeholder -readOnly：true/false -value：绑定v-model或是v-decorator后不需要设置 -showTime：是否展示时间true/false -dateFormat：日期格式 默认'YYYY-MM-DD' 若showTime设置为true则需要将其设置成对应的时间格式(如：YYYY-MM-DD HH:mm:ss) -triggerChange：触发组件值改变的事件是否是change,当使用v-decorator时且没有设置decorator的option.trigger为input需要设置该值为true - +# 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关 闭 +重 置 +查 询 + + ++ ++ ++++ + ++ + ++ +{{ f.text }} ++ + ++ +等于 +不等于 +大于 +大于等于 +小于 +小于等于 +以..开始 +以..结尾 +包含 +在...中 ++ + ++ + + + + + ++ + +``` -2.组件带有v-decorator的使用方法 +2.组件带有v-decorator的使用方法 a).设置trigger-change属性为true + ```vue + ``` + b).设置decorator的option.trigger为input + ```vue + ``` 3.其他使用 添加style - +```vue + +``` 添加placeholder - +```vue + +``` 添加readOnly - +```vue + +``` 备注: script内需引入jdate +```vue +``` + + + --- + + +# JSuperQuery 高级查询 使用文档 +## 参数配置 +| 参数 | 类型 | 必填 | 说明 | +|--------------|---------|----|----------------------| +| fieldList | array |✔| 需要查询的列集合示例如下，type类型有:date/datetime/string/int/number | +| callback | array | | 回调函数名称(非必须)默认handleSuperQuery | + +fieldList结构示例： +```vue + const superQueryFieldList=[{ + type:"date", + value:"birthday", + text:"生日" + },{ + type:"string", + value:"name", + text:"用户名" + },{ + type:"int", + value:"age", + text:"年龄" + }] +``` +页面代码概述: +---- +1.import之后再components之内声明 +```vue +import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'; + export default { + name: "JeecgDemoList", + components: { + JSuperQuery }, -.... - \ No newline at end of file + +``` +2.页面引用 +```vue + + +``` +3.list页面data中需要定义三个属性： +```vue + fieldList:superQueryFieldList, + superQueryFlag:false, + superQueryParams:"" +``` +4.list页面声明回调事件handleSuperQuery(与组件的callback对应即可) +```vue +//高级查询方法 +handleSuperQuery(arg) { + if(!arg){ + this.superQueryParams='' + this.superQueryFlag = false + }else{ + this.superQueryFlag = true + this.superQueryParams=JSON.stringify(arg) + } + this.loadData() +}, +``` +5.改造list页面方法 +```vue + // 获取查询条件 + getQueryParams() { + let sqp = {} + if(this.superQueryParams){ + sqp['superQueryParams']=encodeURI(this.superQueryParams) + } + var param = Object.assign(sqp, this.queryParam, this.isorter); + param.field = this.getQueryField(); + param.pageNo = this.ipagination.current; + param.pageSize = this.ipagination.pageSize; + return filterObj(param); + }, +``` +6.打开弹框调用show方法： +```vue +this.$refs.superQueryModal.show(); +``` + +# JEllipsis 字符串超长截取省略号显示 + +###### 说明: 遇到超长文本展示，通过此标签可以截取省略号显示，鼠标放置会提示全文本 +## 参数配置 +| 参数 | 类型 | 必填 | 说明 | +|--------|---------|----|----------------| +| value |string | 必填 | 字符串文本| +| length | number | 非必填 | 默认25 | +使用示例 +---- +1.组件带有v-model的使用方法 +```vue + + + +# Modal弹框实现最大化功能 + +1.定义modal的宽度： +```vue + +``` +2.自定义modal的title,居右显示切换图标 +```vue + + + {{ title }} + ++ +``` +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, +``` + diff --git a/ant-design-jeecg-vue/src/components/jeecg/README_JEditableTable.md b/ant-design-jeecg-vue/src/components/jeecg/README_JEditableTable.md new file mode 100644 index 0000000000000000000000000000000000000000..2604410dc44d1541349a99d330a28a148a3edfa0 --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecg/README_JEditableTable.md @@ -0,0 +1,396 @@ +# JEditableTable 帮助文档 + +## 参数配置 + +| 参数 | 类型 | 必填 | 说明 | +|--------------|---------|----|---------------------------------| +| columns | array | ✔️ | 表格列的配置描述，具体项见下表 | +| dataSource | array | ✔️ | 表格数据 | +| loading | boolean | | 是否正在加载，加载中不会显示任何行，默认false | +| actionButton | boolean | | 是否显示操作按钮，包括"新增"、"删除"，默认false | +| rowNumber | boolean | | 是否显示行号，默认false | +| rowSelection | boolean | | 是否可选择行，默认false | +| maxHeight | number | | 设定最大高度(px)，默认400 | +| disabledRows | object | | 设定禁用的行，被禁用的行无法被选择和编辑，配置方法可以查看示例 | + +### 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'}` | + +#### 当 type=checkbox 时所需的参数 + +| 参数 | 类型 | 必填 | 说明 | +|----------------|---------|----|------------------------------------------------------------------------------------------------------------------------------------------| +| defaultChecked | boolean | | 默认值是否选中 | +| customValue | array | | 自定义值，checkbox需要的是boolean值，如果数据是其他值（例如`'Y' or 'N'`）时，就会导致错误，所以提供了该属性进行转换，例：`customValue: ['Y','N']`，会将`true`转换为`'Y'`，`false`转换为`'N'`，反之亦然 | + +#### 当 type=select 时所需的参数 + +| 参数 | 类型 | 必填 | 说明 | +|---------|-------|----|-------------| +| options | array | ✔️ | 下拉选项列表，详见下表 | + +##### options 所需参数 + +| 参数 | 类型 | 必填 | 说明 | +|-------|--------|----|------| +| title | string | ✔️ | 显示标题 | +| value | string | ✔️ | 真实值 | + +### validateRules 配置规则 + +`validateRules` 需要的是一个数组，数组里每项都是一个规则，规则是object类型，规则的各个参数如下 + +- `required` 是否必填，可选值为`true`or`false` +- `pattern` 正则表达式验证，只有成功匹配该正则的值才能成功通过验证 +- `message` 当验证未通过时显示的提示文本，可以使用`${...}`变量替换文本（详见`${...} 变量使用方式`） +- 配置示例请看[示例二](#示例二) + +## 事件 + +| 事件名 | 触发时机 | 参数 | +|-----------------|---------------------------|--------------------------| +| added | 当添加行操作完成后触发 | | +| deleted | 当删除行操作完成后触发（批量删除操作只会触发一次） | `deleteIds` 被逻辑删除的id | +| selectRowChange | 当行被选中或取消选中时触发 | `selectedRowIds` 被选中行的id | + +## 方法 + +关于方法的如何调用的问题，请在**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`则代表忽略表单验证 | + +- `返回值:` 无 + +### getValuesPromise + +`getValues`的promise版，会在`resolve`中传入获取到的值，会在`reject`中传入失败原因，例如`VALIDATE_NO_PASSED` + +- `参数:` + +| 参数名 | 类型 | 必填 | 说明 | +|----------|---------|----|---------------------------| +| validate | boolean | | 同`getValues`的`validate`参数 | + +- `返回值:` 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' + } + } +]) +``` + +## ${...} 变量使用方式 + +在`placeholder`和`message`这两个属性中可以使用`${...}`变量来替换文本 +在[示例二](#示例二)中，配置了`title`为`名称`的一列，而`placeholder`配置成了`请输入${title}`，那么最终显示效果为`请输入名称` +这就是`${...}`变量的使用方式，在`${}`中可以使用的变量有`title`、`key`、`defaultValue`这三个属性的值 + +## JEditableTableUtil 使用说明 + +在之前配置`columns`时提到过`JEditableTableUtil`这个工具类，那么如果想要知道详细的使用说明就请看这里 + +### export 的常量 + +#### FormTypes + +这是配置`columns.type`时用到的常量值，其中包括 + +- `normal` 默认，直接显示值，不渲染表单 +- `input` 显示输入框 +- `inputNumber` 显示数字输入框 +- `checkbox` 显示多选框 +- `select` 显示选择器（下拉框） +- `date` 日期选择器 +- `datetime` 日期时间选择器 + +### VALIDATE_NO_PASSED + +在判断表单验证是否通过时使用，如果 reject 的值 === VALIDATE_NO_PASSED 则代表表单验证未通过，你可以做相应的其他处理，反之则可能是发生了报错，可以使用 `console.error` 输出 + +### 封装的方法 + +#### validateTables + +当你的页面中存在多个JEditableTable实例的时候，如果要获取每个实例的值、判断表单验证是否通过，就会让代码变得极其冗余、繁琐，于是我们就将该操作封装成了一个函数供你调用，它可以同时获取并验证多个JEditableTable实例的值，只有当所有实例的表单验证都通过后才会返回值，否则将会告诉你具体哪个实例没有通过验证。具体使用方法请看下面的示例 + +- `参数:` + +| 参数名 | 类型 | 必填 | 说明 | +|-------|-------|----|------------------------------------| +| cases | array | | 传入一个数组，数组中的每项都是一个JEditableTable的实例 | + +- `返回值:` Promise +- `示例：` + +```js +import { validateTables, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil' +// 封装cases +let cases = [] +cases.push(this.$refs.editableTable1) +cases.push(this.$refs.editableTable2) +cases.push(this.$refs.editableTable3) +cases.push(this.$refs.editableTable4) +cases.push(this.$refs.editableTable5) +// 同时验证并获取多个实例的值 +validateTables(cases).then((all) => { + // all 是一个数组，每项都对应传入cases的下标，包含values和deleteIds + console.log('所有实例的值：', all) +}).catch((e = {}) => { + // 判断表单验证是否未通过 + if (e.error === VALIDATE_NO_PASSED) { + console.log('未通过验证的实例下标:', e.index) + } else { + console.error('发生异常:', e) + } +}) +``` + +## FAQ + +### 方法如何调用？ + +在[示例一](#示例一)中，设定了一个 `ref="editableTable"` 的属性，那么在vue中就可以使用`this.$refs.editableTable`获取到该表格的实例，并调取其中的方法。 +假如我要调取`initialize`方法，就可以这么写：`this.$refs.editableTable.initialize()` + +### 如何获取表单的值？ + +使用`getValue`方法进行获取，详见[示例三](#示例三) + +### 如何进行表单验证？ + +在获取值的时候默认会进行表单验证操作，用户在输入的时候也会对正在输入的表单进行验证，只要配置好规则就可以了 + +### 如何添加或删除一行？ + +该功能已封装到组件中，你只需要将 `actionButton` 设置为 `true` 即可，当然你也可以在代码中主动调用新增方法或修改，具体见上方的方法介绍。 + +### 为什么使用了ATab组件后，切换选项卡会导致白屏或滚动条位置会归零？ + +在ATab组件中确实会导致滚动条位置归零，且不会触发`onscroll`方法，所以无法动态加载行，导致白屏的问题出现。 +解决方法是在ATab组件的`onChange`事件触发时执行`resetScrollTop()`即可，但是需要注意的是：代码主动改变ATab的`activeKey`不会触发`onChange`事件，还需要你手动调用下 + +- `示例` + +```html + ++ + + + +``` + +```js +/*--- 忽略部分代码片段 ---*/ +methods: { + + /** 切换tab选项卡的时候重置editableTable的滚动条状态 */ + handleChangeTab(key) { + this.$refs[`editableTable${key}`].resetScrollTop() + } + +} +/*--- 忽略部分代码片段 ---*/ +``` + +---- + +## 示例一 + +```html ++ ++ + ++ +``` + +## 示例二 + +```js + +import { FormTypes } from '@/utils/JEditableTableUtil' + +/*--- 忽略部分代码片断 ---*/ +columns: [ + { + title: '名称', + key: 'name', + type: FormTypes.input, + placeholder: '请输入${title}', + defaultValue: '称名', + // 表单验证规则 + validateRules: [ + { + required: true, // 必填 + message: '${title}不能为空' // 提示的文本 + }, + { + pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则 + message: '${title}必须以字母开头，可包含数字、下划线、横杠' + } + ] + }, + { + title: '年龄', + key: 'age', + type: FormTypes.inputNumber, + placeholder: '请输入${title}', + defaultValue: 18, + validateRules: [{required: true, message: '${title}不能为空'}] + } +] +/*--- 忽略部分代码片断 ---*/ +``` + +## 示例三 + +```js +// 获取被逻辑删除的字段id +let deleteIds = this.$refs.editableTable.getDeleteIds(); +// 获取所有表单的值，并进行验证 +this.$refs.editableTable.getValues((error, values) => { + // 错误数 = 0 则代表验证通过 + if (error === 0) { + this.$message.success('验证通过') + // 将通过后的数组提交到后台或自行进行其他处理 + console.log(deleteIds, values) + } else { + this.$message.error('验证未通过') + } +}) +``` \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/jeecgbiz/JSearchUserByDep.vue b/ant-design-jeecg-vue/src/components/jeecgbiz/JSearchUserByDep.vue new file mode 100644 index 0000000000000000000000000000000000000000..e3dc7e0c84f7e0839246457093d8e1018c5766a9 --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecgbiz/JSearchUserByDep.vue @@ -0,0 +1,309 @@ + + + + + + + + + + \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/jeecgbiz/JSearchUserByDepModal.vue b/ant-design-jeecg-vue/src/components/jeecgbiz/JSearchUserByDepModal.vue new file mode 100644 index 0000000000000000000000000000000000000000..f4982b729360d9753479168c9c9917468471d588 --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecgbiz/JSearchUserByDepModal.vue @@ -0,0 +1,309 @@ + + ++ ++ ++ + ++ + ++ 用户账号: + ++ 重置 + ++ ++ + + + + + + \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/jeecgbiz/JSelectUser.vue b/ant-design-jeecg-vue/src/components/jeecgbiz/JSelectUser.vue new file mode 100644 index 0000000000000000000000000000000000000000..e20485cfbb7c9c393afc31431514beec98d34426 --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecgbiz/JSelectUser.vue @@ -0,0 +1,87 @@ + ++ ++ ++ + ++ + ++ 用户账号: + ++ 重置 + ++ +++ + + + + diff --git a/ant-design-jeecg-vue/src/components/jeecgbiz/SearchUserByDepModal.vue b/ant-design-jeecg-vue/src/components/jeecgbiz/SearchUserByDepModal.vue new file mode 100644 index 0000000000000000000000000000000000000000..20c9768b5851e5e25fb69af96cba128a21c6a632 --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecgbiz/SearchUserByDepModal.vue @@ -0,0 +1,308 @@ + ++ + + ++++ ++ +选择 ++ + + + + + + \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/jeecgbiz/SelectMultipleUserModal.vue b/ant-design-jeecg-vue/src/components/jeecgbiz/SelectMultipleUserModal.vue new file mode 100644 index 0000000000000000000000000000000000000000..70d65b273a0c95edad80e7d0aea7cf5336dc7691 --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecgbiz/SelectMultipleUserModal.vue @@ -0,0 +1,276 @@ + ++ ++ ++ + ++ + ++ 用户账号: + ++ 重置 + ++ +++ + + + \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/jeecgbiz/modal/SelectUserListModal.vue b/ant-design-jeecg-vue/src/components/jeecgbiz/modal/SelectUserListModal.vue new file mode 100644 index 0000000000000000000000000000000000000000..60bca0ec548a2133f1d7cbf5ecf9d61c955236af --- /dev/null +++ b/ant-design-jeecg-vue/src/components/jeecgbiz/modal/SelectUserListModal.vue @@ -0,0 +1,122 @@ + ++ ++ ++ ++ + +++ ++ ++ + ++ ++ ++ + + + +++ ++ + ++ ++ + +++ ++ + +删除 + ++ + + + + + + diff --git a/ant-design-jeecg-vue/src/components/layouts/TabLayout.vue b/ant-design-jeecg-vue/src/components/layouts/TabLayout.vue index 65c8e8657dcdd5d67012eadd06718132b03dc3cb..1ef77ab046a13a47744817b8df28011fb02ea509 100644 --- a/ant-design-jeecg-vue/src/components/layouts/TabLayout.vue +++ b/ant-design-jeecg-vue/src/components/layouts/TabLayout.vue @@ -1,11 +1,12 @@+ - @@ -206,8 +237,63 @@ -webkit-transform: scale(1.1); transform: scale(1.1); } + /*美化弹出Tab样式*/ .ant-tabs-nav-container { margin-top: 4px; } + + /* 修改 ant-tabs 样式 */ + .tab-layout-tabs.ant-tabs { + border-bottom: 1px solid #ccc; + border-left: 1px solid #ccc; + background-color: white; + padding: 0 20px; + + .ant-tabs-bar { + margin: 4px 0 0; + border: none; + } + + } + + .ant-tabs { + + &.ant-tabs-card .ant-tabs-tab { + + padding: 0 24px !important; + background-color: white !important; + margin-right: 10px !important; + + .ant-tabs-close-x { + width: 12px !important; + height: 12px !important; + opacity: 0 !important; + cursor: pointer !important; + font-size: 12px !important; + margin: 0 !important; + position: absolute; + top: 36%; + right: 6px; + } + + &:hover .ant-tabs-close-x { + opacity: 1 !important; + } + + } + + } + + .ant-tabs.ant-tabs-card > .ant-tabs-bar { + .ant-tabs-tab { + border: none !important; + border-bottom: 1px solid transparent !important; + } + .ant-tabs-tab-active { + border-color: #1890ff !important; + } + } + + \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/layouts/UserLayout.vue b/ant-design-jeecg-vue/src/components/layouts/UserLayout.vue index 180d5b559a3ac384079c9a18844c8c57058c4ec4..fa4aac68e59be43a398bafa81d89ca00c33e7219 100644 --- a/ant-design-jeecg-vue/src/components/layouts/UserLayout.vue +++ b/ant-design-jeecg-vue/src/components/layouts/UserLayout.vue @@ -17,9 +17,9 @@+ {{ page.meta.title }} -- +- -- - ++ ++ ++ + Copyright © 2019 JEECG开源社区 出品 diff --git a/ant-design-jeecg-vue/src/components/menu/SideMenu.vue b/ant-design-jeecg-vue/src/components/menu/SideMenu.vue index cd77a84133d7e060274dd9d241049367234617f5..3fbcaf87de3c31ec7b2a0cfa27ea3130402733d7 100644 --- a/ant-design-jeecg-vue/src/components/menu/SideMenu.vue +++ b/ant-design-jeecg-vue/src/components/menu/SideMenu.vue @@ -1,7 +1,7 @@@@ -12,7 +12,7 @@ :theme="theme" @select="onSelect" :mode="mode" - style="padding: 16px 0px;"> + style="padding: 0;"> diff --git a/ant-design-jeecg-vue/src/components/menu/index.js b/ant-design-jeecg-vue/src/components/menu/index.js index 5e3c901e2c096d8558023cb083007a5f724f3248..59b0cf60c5b37c3229e9b34638d63992f94311f6 100644 --- a/ant-design-jeecg-vue/src/components/menu/index.js +++ b/ant-design-jeecg-vue/src/components/menu/index.js @@ -62,18 +62,38 @@ export default { : h(Icon, { props: { type: icon !== undefined ? icon : '' } }) }, renderMenuItem: function (h, menu, pIndex, index) { - return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, - [ - h( - 'router-link', - { attrs: { to: { name: menu.name } } }, - [ - this.renderIcon(h, menu.meta.icon), - h('span', [ menu.meta.title ]) - ] - ) - ] - ) + // 判断是否带参数路由URL,是的话，采用path跳转方式 + if(menu.route && menu.route === '0'){ + return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, + [ + h( + 'router-link', + //--update-begin----author:scott---date:20190320------for:改造菜单路由跳转规则，原来是跳转到组件，现在改造成跳转URL（为了支持参数URL菜单）------ + { attrs: { to: { path: menu.path } } }, + //--update-end----author:scott---date:20190320------for:改造菜单路由跳转规则，原来是跳转到组件，现在改造成跳转URL（为了支持参数URL菜单）------ + [ + this.renderIcon(h, menu.meta.icon), + h('span', [ menu.meta.title ]) + ] + ) + ] + ) + }else{ + // 默认采用组件跳转方式 + return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, + [ + h( + 'router-link', + { attrs: { to: { name: menu.name } } }, + [ + this.renderIcon(h, menu.meta.icon), + h('span', [ menu.meta.title ]) + ] + ) + ] + ) + } + }, renderSubMenu: function (h, menu, pIndex, index) { const this2_ = this; diff --git a/ant-design-jeecg-vue/src/components/page/GlobalHeader.vue b/ant-design-jeecg-vue/src/components/page/GlobalHeader.vue index 39c72e885ea13494e3f93f238a4f4ad8f4354661..926db82e95e35ef86d96d128adbacb00885f5a6c 100644 --- a/ant-design-jeecg-vue/src/components/page/GlobalHeader.vue +++ b/ant-design-jeecg-vue/src/components/page/GlobalHeader.vue @@ -1,7 +1,11 @@ -- ++ + +- 欢迎进入 Jeecg-Boot 企业级快速开发平台 - + + 欢迎进入 Jeecg-Boot 企业级快速开发平台 + Jeecg-Boot + + -@@ -44,9 +54,10 @@ import Logo from '../tools/Logo' import { mixin } from '@/utils/mixin.js' + import { topNavScrollToSelectItem } from '@/utils/util' export default { - name: "GlobalHeader", + name: 'GlobalHeader', components: { UserMenu, SMenu, @@ -82,13 +93,48 @@ data() { return { headerBarFixed: false, + //update-begin--author:sunjianlei---date:20190408------for: 顶部导航栏增加横向滚动条----- + topMenuStyle: { + headerIndexLeft: {}, + topNavHeader: {}, + headerIndexRight: {}, + scrollView: { + 'overflow-x': 'auto', + 'overflow-y': 'hidden' + }, + scrollWidth: { + // 设置这么宽是为了让顶部菜单首次加载时充分展开，方便计算真实宽度 + 'width': '10000px' + } + } } }, - mounted () { + watch: { + /** 监听设备变化 */ + device() { + if (this.mode === 'topmenu') { + this.buildTopMenuStyle() + } + }, + /** 监听导航栏模式变化 */ + mode(newVal) { + if (newVal === 'topmenu') { + this.calcTopMenuScrollWidth() + } + } + }, + //update-end--author:sunjianlei---date:20190408------for: 顶部导航栏增加横向滚动条----- + mounted() { window.addEventListener('scroll', this.handleScroll) + //update-begin--author:sunjianlei---date:20190408------for: 顶部导航栏增加横向滚动条----- + if (this.mode === 'topmenu') { + this.buildTopMenuStyle() + this.calcTopMenuScrollWidth() + } + //update-end--author:sunjianlei---date:20190408------for: 顶部导航栏增加横向滚动条----- }, methods: { - handleScroll () { + handleScroll() { if (this.autoHideHeader) { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop if (scrollTop > 100) { @@ -102,26 +148,172 @@ }, toggle() { this.$emit('toggle') + }, + //update-begin--author:sunjianlei---date:20190408------for: 顶部导航栏增加横向滚动条----- + buildTopMenuStyle() { + if (this.mode === 'topmenu') { + if (this.device === 'mobile') { + // 手机端需要清空样式，否则显示会错乱 + this.topMenuStyle.topNavHeader = {} + this.topMenuStyle.headerIndexRight = {} + this.topMenuStyle.headerIndexLeft = {} + } else { + let rightWidth = '360px' + this.topMenuStyle.topNavHeader = { 'min-width': '165px' } + this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth } + this.topMenuStyle.headerIndexLeft = { 'width': `calc(100% - ${rightWidth})` } + // 由于首次从mobile设备下切换到desktop设备没有初始化TopMenuScrollWidth，所以这里需要计算一下 + if (this.topMenuStyle.scrollWidth['width'] === '10000px') { + this.calcTopMenuScrollWidth() + } + } + } + }, + /** 计算滚动条的宽度 */ + calcTopMenuScrollWidth() { + // 非顶部菜单时不计算宽度 + if (this.mode !== 'topmenu') return + let count = 0 + let timer = setInterval(() => { + count++ + let scrollWidth = document.getElementById('top-nav-scroll-width') + if (scrollWidth == null) { + clearInterval(timer) + return + } + let menu = scrollWidth.getElementsByClassName('ant-menu')[0] + if (menu) { + let widthCount = 0 + let menuItems = menu.getElementsByTagName('li') + for (let item of menuItems) { + if (item.className.indexOf('ant-menu-overflowed-submenu') === -1) { + widthCount += item.offsetWidth + } + } + // 由于首次从侧边菜单模式下切换到顶部菜单模式下没有buildTopMenuStyle，所以这里需要build一下 + if (this.topMenuStyle.scrollWidth['width'] === '10000px') { + // 防止递归调用 + this.$nextTick(() => { + this.buildTopMenuStyle() + }) + } + this.topMenuStyle.scrollWidth['width'] = `${widthCount + 10}px` + // 将滚动条位置滚动到当前选中的菜单处 + if (count === 1) { + topNavScrollToSelectItem(document) + } + } + // 校准数据三次再关闭定时器 + if (count === 3) { + clearInterval(timer) + } + }, 100) } + //update-end--author:sunjianlei---date:20190408------for: 顶部导航栏增加横向滚动条----- } } \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/page/GlobalLayout.vue b/ant-design-jeecg-vue/src/components/page/GlobalLayout.vue index ddc257052dcdf920e609ff2711b7c272310f2830..05d3367511e8bdf8e5430185fba8982c99d08cf0 100644 --- a/ant-design-jeecg-vue/src/components/page/GlobalLayout.vue +++ b/ant-design-jeecg-vue/src/components/page/GlobalLayout.vue @@ -9,6 +9,7 @@ @close="() => this.collapsed = false" :closable="false" :visible="collapsed" + width="200px" >-- + +-+ + - + - @@ -83,7 +87,7 @@ import { mixin, mixinDevice } from '@/utils/mixin.js' export default { - name: "GlobalLayout", + name: 'GlobalLayout', components: { SideMenu, GlobalHeader, @@ -91,7 +95,7 @@ SettingDrawer }, mixins: [mixin, mixinDevice], - data () { + data() { return { collapsed: false, menus: [] @@ -100,16 +104,26 @@ computed: { ...mapState({ // 主路由 - mainMenu: state => state.permission.addRouters, + mainRouters: state => state.permission.addRouters, + // 后台菜单 + permissionMenuList: state => state.user.permissionList }) }, watch: { sidebarOpened(val) { this.collapsed = !val - }, + } }, created() { - this.menus = this.mainMenu.find((item) => item.path === '/').children + //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------ + //this.menus = this.mainRouters.find((item) => item.path === '/').children; + this.menus = this.permissionMenuList + // 根据后台配置菜单，重新排序加载路由信息 + console.log('----加载菜单逻辑----') + console.log(this.mainRouters) + console.log(this.permissionMenuList) + console.log('----navTheme------'+this.navTheme) + //--update-end----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------ }, methods: { ...mapActions(['setSidebar']), @@ -123,7 +137,7 @@ this.collapsed = false } } - }, + } } @@ -138,7 +152,7 @@ } .layout { - min-height: 100vh; + min-height: 100vh !important; overflow-x: hidden; &.mobile { @@ -165,7 +179,7 @@ .sidemenu { .ant-header-fixedHeader { - &.ant-header-side-opened, &.ant-header-side-closed { + &.ant-header-side-opened, &.ant-header-side-closed { width: 100% } } @@ -179,6 +193,11 @@ } } } + .header, .top-nav-header-index { + .user-wrapper .action { + padding: 0 12px; + } + } } &.ant-layout-has-sider { @@ -186,13 +205,14 @@ } .trigger { - font-size: 20px; - line-height: 64px; - padding: 0 24px; + font-size: 22px; + line-height: 42px; + padding: 0 18px; cursor: pointer; - transition: color .3s; + transition: color 300ms, background 300ms; + &:hover { - background: rgba(0, 0, 0, 0.025); + background: rgba(255, 255, 255, 0.3); } } @@ -237,7 +257,7 @@ transition: width .2s; &.ant-header-side-opened { - width: calc(100% - 256px) + width: calc(100% - 200px) } &.ant-header-side-closed { @@ -246,8 +266,6 @@ } } - - .header { height: 64px; padding: 0 12px 0 0; @@ -264,23 +282,28 @@ .action { cursor: pointer; - padding: 0 12px; + padding: 0 14px; display: inline-block; transition: all .3s; - height: 100%; + + height: 70%; + line-height: 46px; + + &.action-full { + height: 100%; + } &:hover { - background: rgba(0, 0, 0, 0.025); + background: rgba(255, 255, 255, 0.3); } .avatar { - margin: 20px 8px 20px 0; + margin: 20px 10px 20px 0; color: #1890ff; background: hsla(0, 0%, 100%, .85); vertical-align: middle; } - .icon { font-size: 16px; padding: 4px; @@ -292,10 +315,10 @@ .user-wrapper { .action { - color: rgba(255, 255, 255, 0.85); + color: black; &:hover { - background: rgba(255, 255, 255, 0.16); + background: rgba(0, 0, 0, 0.05); } } } @@ -322,6 +345,10 @@ } } + .user-wrapper .action .avatar { + margin: 20px 0; + } + &.light { .header-index-wide { @@ -346,7 +373,7 @@ .header-index-left { .logo > a { overflow: hidden; - text-overflow:ellipsis; + text-overflow: ellipsis; white-space: nowrap; } } @@ -355,18 +382,17 @@ } - .top-nav-header-index { - box-shadow: 0 1px 4px rgba(0,21,41,.08); + box-shadow: 0 1px 4px rgba(0, 21, 41, .08); position: relative; - transition: background .3s,width .2s; + transition: background .3s, width .2s; .header-index-wide { - max-width: 1200px; + width: 100%; margin: auto; - padding-left: 0; + padding: 0 20px 0 0; display: flex; - height: 64px; + height: 59px; .ant-menu.ant-menu-horizontal { border: none; @@ -405,8 +431,11 @@ .header-index-right { float: right; - height: 64px; + height: 59px; overflow: hidden; + .action:hover { + background-color: rgba(0, 0, 0, 0.05); + } } } @@ -423,13 +452,29 @@ } } } - } + &.dark { + + .user-wrapper { + + .action { + color: white; + + &:hover { + background: rgba(255, 255, 255, 0.3); + } + } + } + .header-index-wide .header-index-left .trigger:hover { + background: rgba(255, 255, 255, 0.3); + } + } + + } // 内容区 .layout-content { margin: 24px 24px 0px; - height: 100%; height: 64px; padding: 0 12px 0 0; } @@ -438,8 +483,8 @@ .topmenu { .page-header-index-wide { - max-width: 1200px; margin: 0 auto; + width: 100%; } } @@ -468,7 +513,7 @@ // 菜单样式 .sider { - box-shadow: 2px 0 6px rgba(0, 21, 41, .35); + box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, .35); position: relative; z-index: 10; @@ -498,8 +543,8 @@ h1 { color: #fff; - font-size: 20px; - margin: 0 0 0 12px; + font-size: 18px; + margin: 0 0 0 8px; font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 600; } @@ -507,11 +552,11 @@ &.light { background-color: #fff; - box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05); + box-shadow: 2px 116px 8px 0 rgba(29, 35, 41, 0.05); .logo { background: #fff; - box-shadow: 1px 1px 0px 0px #e8e8e8; + box-shadow: 1px 1px 0 0 #e8e8e8; h1 { color: unset; @@ -563,7 +608,7 @@ vertical-align: middle; } - >.ant-form-item-label { + > .ant-form-item-label { line-height: 32px; padding-right: 8px; width: auto; diff --git a/ant-design-jeecg-vue/src/components/page/PageLayout.vue b/ant-design-jeecg-vue/src/components/page/PageLayout.vue index bff916e660b93e959ca7977f16a51475e7d07cb2..a1b8c3c91a7b9b14f673fcea5836cb935ebde453 100644 --- a/ant-design-jeecg-vue/src/components/page/PageLayout.vue +++ b/ant-design-jeecg-vue/src/components/page/PageLayout.vue @@ -1,5 +1,5 @@ -- + - + +@@ -161,6 +167,7 @@ import config from '@/defaultSettings' import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting' import { mixin, mixinDevice } from '@/utils/mixin.js' + import { triggerWindowResizeEvent } from '@/utils/util' export default { components: { @@ -189,6 +196,9 @@ if (this.colorWeak !== config.colorWeak) { updateColorWeak(this.colorWeak) } + if (this.multipage !== config.multipage) { + this.$store.dispatch('ToggleMultipage', this.multipage) + } }, methods: { showDrawer() { @@ -204,14 +214,18 @@ this.$store.dispatch('ToggleWeak', checked) updateColorWeak(checked) }, + onMultipageWeak (checked) { + this.$store.dispatch('ToggleMultipage', checked) + }, handleMenuTheme (theme) { this.$store.dispatch('ToggleTheme', theme) }, handleLayout (mode) { this.$store.dispatch('ToggleLayoutMode', mode) // 因为顶部菜单不能固定左侧菜单栏，所以强制关闭 - // - this.handleFixSiderbar(false); + this.handleFixSiderbar(false) + // 触发窗口resize事件 + triggerWindowResizeEvent() }, handleContentWidthChange (type) { this.$store.dispatch('ToggleContentWidth', type) diff --git a/ant-design-jeecg-vue/src/components/tools/Logo.vue b/ant-design-jeecg-vue/src/components/tools/Logo.vue index 68c71b83972548bf811ef1c375591a12a04626e5..986551e369b3c81332f5e31bec5bc738fedcee7c 100644 --- a/ant-design-jeecg-vue/src/components/tools/Logo.vue +++ b/ant-design-jeecg-vue/src/components/tools/Logo.vue @@ -9,7 +9,7 @@ \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/components/tools/UserMenu.vue b/ant-design-jeecg-vue/src/components/tools/UserMenu.vue index 70d9c6f8d322ecbe79befeb3516fe756fed2807e..92fb7f268ede72706da213b9b2fd734ad5fabb40 100644 --- a/ant-design-jeecg-vue/src/components/tools/UserMenu.vue +++ b/ant-design-jeecg-vue/src/components/tools/UserMenu.vue @@ -1,13 +1,13 @@ -diff --git a/ant-design-jeecg-vue/src/components/setting/SettingDrawer.vue b/ant-design-jeecg-vue/src/components/setting/SettingDrawer.vue index 4f102994e2bc244ee45f75a140f030a45d5f81ea..ba5f127d5337d792893e4910d20c2959f9ebae21 100644 --- a/ant-design-jeecg-vue/src/components/setting/SettingDrawer.vue +++ b/ant-design-jeecg-vue/src/components/setting/SettingDrawer.vue @@ -134,6 +134,12 @@ 色弱模式++ + + +多页签模式++@@ -47,19 +47,26 @@ \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/config/router.config.js b/ant-design-jeecg-vue/src/config/router.config.js index a7e25464a8d28a1b7715fa7380cdd68842165809..0e0c8cae5f4f680b3d0c73ce617a890be63f33a7 100644 --- a/ant-design-jeecg-vue/src/config/router.config.js +++ b/ant-design-jeecg-vue/src/config/router.config.js @@ -8,43 +8,258 @@ export const asyncRouterMap = [ { path: '/', - name: 'index', + name: 'dashboard', component: TabLayout, meta: { title: '首页' }, redirect: '/dashboard/workplace', children: [ - //系统管理 - { - path: '/system', - name: 'system', - redirect: '/isystem/user', - component: RouteView, - meta: { title: '系统管理', icon: 'dashboard', permission: [ 'dashboard' ] }, - children: [ - { - path: '/system/user', - name: 'user', - component: () => import('@/views/system/UserList'), - meta: { title: '用户管理', permission: [ 'dashboard' ] } - }, - - { - path: '/system/role', - name: 'role', - component: () => import('@/views/system/RoleList'), - meta: { title: '角色管理', permission: [ 'dashboard' ] } - }, - { - path: '/system/log', - name: 'log', - component: () => import('@/views/system/LogList'), - meta: { title: '日志管理', permission: [ 'dashboard' ] } - }, - - - ] - }, + // //流程管理 + // { + // path: '/process', + // name: 'process', + // redirect: '/process', + // component: RouteView, + // meta: { title: '流程管理', icon: 'dashboard', permission: [ 'dashboard' ] }, + // children: [ + // { + // path: '/process/ExtActExpressionList', + // name: 'ExtActExpressionList', + // component: () => import('@/views/modules/extbpm/process/ExtActExpressionList'), + // meta: { title: '流程表达式', permission: [ 'dashboard' ] } + // }, + // { + // path: '/process/ExtActListenerList', + // name: 'ExtActListenerList', + // component: () => import('@/views/modules/extbpm/process/ExtActListenerList'), + // meta: { title: '流程监听', permission: [ 'dashboard' ] } + // }, + // { + // path: '/process/ExtActProcessList', + // name: 'ExtActProcessList', + // component: () => import('@/views/modules/extbpm/process/ExtActProcessList'), + // meta: { title: '流程设计', permission: [ 'dashboard' ] } + // }, + // ] + // }, + // + // + // //工作流程 + // { + // path: '/bpm', + // name: 'bpm', + // redirect: '/bpm', + // component: RouteView, + // meta: { title: '工作流程', icon: 'dashboard', permission: [ 'dashboard' ] }, + // children: [ + // { + // path: '/modules/bpm/ModelList', + // name: 'ModelList', + // component: () => import('@/views/modules/bpm/ModelList'), + // meta: { title: '在线流程设计', permission: [ 'dashboard' ] } + // }, + // { + // path: '/modules/bpm/ProcessList', + // name: 'ProcessList', + // component: () => import('@/views/modules/bpm/ProcessList'), + // meta: { title: '流程发布管理', permission: [ 'dashboard' ] } + // }, + // { + // path: '/modules/bpm/task/MyTaskList', + // name: 'MyTaskList', + // component: () => import('@/views/modules/bpm/task/MyTaskList'), + // meta: { title: '我的任务', permission: [ 'dashboard' ] } + // }, + // { + // path: '/modules/bpm/ProcessInstanceList', + // name: 'ProcessInstanceList', + // component: () => import('@/views/modules/bpm/ProcessInstanceList'), + // meta: { title: '流程实例管理', permission: [ 'dashboard' ] } + // }, + // ] + // }, + // + // //系统管理 + // { + // path: '/isystem', + // name: 'system', + // redirect: '/isystem/user', + // component: RouteView, + // meta: { title: '系统管理', icon: 'dashboard', permission: [ 'dashboard' ] }, + // children: [ + // { + // path: '/isystem/user', + // name: 'user', + // component: () => import('@/views/system/UserList'), + // meta: { title: '用户管理', permission: [ 'dashboard' ] } + // }, + // { + // path: '/isystem/permission', + // name: 'permission', + // component: () => import('@/views/system/PermissionList'), + // meta: { title: '菜单管理', permission: [ 'dashboard' ] } + // }, + // { + // path: '/isystem/dict', + // name: 'dict', + // component: () => import('@/views/system/DictList'), + // meta: { title: '字典管理', permission: [ 'dashboard' ] } + // }, + // { + // path: '/isystem/annountCement', + // name: 'annountCement', + // component: () => import('@/views/system/SysAnnouncementList'), + // meta: { title: '系统通知', permission: [ 'dashboard' ] } + // }, + // { + // path: '/isystem/depart', + // name: 'depart', + // component: () => import('@/views/system/DepartList'), + // meta: { title: '部门管理', permission: [ 'dashboard' ] } + // }, + // + // { + // path: '/isystem/role', + // name: 'role', + // component: () => import('@/views/system/RoleList'), + // meta: { title: '角色管理', permission: [ 'dashboard' ] } + // }, + // { + // path: '/isystem/log', + // name: 'log', + // component: () => import('@/views/system/LogList'), + // meta: { title: '日志管理', permission: [ 'dashboard' ] } + // }, + // ] + // }, + // + // + // //Online开发 + // { + // path: '/online', + // name: 'online', + // redirect: '/online', + // component: RouteView, + // meta: { title: '在线开发', icon: 'dashboard', permission: [ 'dashboard' ] }, + // children: [ + // { + // path: '/online/cgreport', + // name: 'OnlCgreportHeadList', + // component: () => import('@/views/modules/online/cgreport/OnlCgreportHeadList'), + // meta: { title: 'Online报表配置', permission: [ 'dashboard' ] } + // }, + // { + // path: '/online/cgform', + // name: 'OnlCgformHeadList', + // component: () => import('@/views/modules/online/cgform/OnlCgformHeadList'), + // meta: { title: 'Online表单开发', permission: [ 'dashboard' ] } + // }, + // { + // path: '/jeecg/jeecgOnlineTest', + // name: 'JeecgOnlineTest', + // component: () => import('@/views/jeecg/JeecgOnlineTest'), + // meta: { title: '动态表单页面', permission: [ 'dashboard' ] } + // }, + // { + // path: '/online/auto/:code', + // name: 'onlineAutoList', + // hidden : true, + // component: () => import('@/views/modules/online/cgreport/auto/OnlCgreportAutoList'), + // meta: { title: 'Auto报表', permission: [ 'cgreport' ] } + // } + // ] + // }, + // + // + // //系统监控 + // { + // path: '/sysmonitor', + // name: 'sysmonitor', + // redirect: '/sysmonitor', + // component: RouteView, + // meta: { title: '系统监控', icon: 'dashboard', permission: [ 'dashboard' ] }, + // children: [ + // { + // path: '/sys/dataLog-list', + // name: 'DataLogList', + // component: () => import('@/views/system/DataLogList'), + // meta: { title: '数据日志', permission: [ 'dashboard' ] } + // }, + // { + // path: 'http://localhost:8080/jeecg-boot/druid/', + // name: 'druid', + // component: () => import('@/views/jeecg/tablist/JeecgOrderDMainList'), + // meta: { title: 'SQL监控', permission: [ 'dashboard' ] } + // }, + // { + // path: '/isystem/QuartzJobList', + // name: 'QuartzJobList', + // component: () => import('@/views/system/QuartzJobList'), + // meta: { title: '定时任务', permission: [ 'dashboard' ] } + // }, + // ] + // }, + // + // + // //jeecg demo + // { + // path: '/jeecg', + // name: 'jeecg', + // redirect: '/jeecg', + // component: RouteView, + // meta: { title: 'JEECG案例', icon: 'dashboard', permission: [ 'dashboard' ] }, + // children: [ + // { + // path: '/jeecg/JeecgDemoList', + // name: 'DemoList', + // component: () => import('@/views/jeecg/JeecgDemoList'), + // meta: { title: '单表模型示例', permission: [ 'dashboard' ] } + // }, + // { + // path: '/jeecg/tablist/JeecgOrderDMainList', + // name: 'JeecgOrderDMainList', + // component: () => import('@/views/jeecg/tablist/JeecgOrderDMainList'), + // meta: { title: '一对多Tab示例', permission: [ 'dashboard' ] } + // }, + // { + // path: '/jeecg/FlowTest', + // name: 'FlowTest', + // component: () => import('@/views/jeecg/FlowTest'), + // meta: { title: '数据回执模拟', permission: [ 'dashboard' ] } + // }, + // { + // path: '/jeecg/PrintDemo', + // name: 'PrintDemo', + // component: () => import('@/views/jeecg/PrintDemo'), + // meta: { title: '打印测试', permission: [ 'dashboard' ] } + // }, + // { + // path: '/jeecg/JeecgOrderMainList', + // name: 'JeecgOrderMainList', + // component: () => import('@/views/jeecg/JeecgOrderMainList'), + // meta: { title: '一对多示例', permission: [ 'dashboard' ] } + // }, + // { + // path: 'http://www.baidu.com', + // name: 'baidu', + // component: () => import('@/components/layouts/IframePageView'), + // meta: { title: '百度', permission: [ 'dashboard' ] } + // }, + // { + // path: 'http://localhost:8080/jeecg-boot/auto/cgform/list', + // name: 'cgformtest', + // component: () => import('@/components/layouts/IframePageView'), + // meta: { title: 'online表单测试', permission: [ 'dashboard' ] } + // }, + // { + // path: '/jeecg/helloworld', + // name: 'helloworld', + // hidden : true, + // component: () => import('@/views/jeecg/helloworld'), + // meta: { title: 'helloworld', permission: [ 'dashboard' ] } + // }, + // ] + // }, // dashboard { @@ -76,29 +291,6 @@ export const asyncRouterMap = [ ] }, - //jeecg - { - path: '/jeecg', - name: 'jeecg', - redirect: '/jeecg', - component: RouteView, - meta: { title: 'JEECG案例', icon: 'dashboard', permission: [ 'dashboard' ] }, - children: [ - { - path: '/jeecg/JeecgDemoList', - name: 'DemoList', - component: () => import('@/views/jeecg/JeecgDemoList'), - meta: { title: '列表例子', permission: [ 'dashboard' ] } - }, - { - path: '/jeecg/helloworld', - name: 'helloworld', - hidden : true, - component: () => import('@/views/jeecg/helloworld'), - meta: { title: 'helloworld', permission: [ 'dashboard' ] } - } - ] - }, // forms { path: '/form', @@ -369,10 +561,34 @@ export const constantRouterMap = [ path: 'register-result', name: 'registerResult', component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult') - } + }, ] }, + // { + // path: '/', + // name: 'index', + // component: TabLayout, + // meta: {title: '首页'}, + // redirect: '/dashboard/workplace', + // children: [ + // { + // path: '/online', + // name: 'online', + // redirect: '/online', + // component: RouteView, + // meta: {title: '在线开发', icon: 'dashboard', permission: ['dashboard']}, + // children: [ + // { + // path: '/online/auto/:code', + // name: 'report', + // component: () => import('@/views/modules/online/cgreport/OnlCgreportAutoList') + // }, + // ] + // }, + // ] + // }, + { path: '/test', component: BlankLayout, @@ -385,7 +601,6 @@ export const constantRouterMap = [ } ] }, - { path: '/404', component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404') diff --git a/ant-design-jeecg-vue/src/defaultSettings.js b/ant-design-jeecg-vue/src/defaultSettings.js index 62adddd0425ee05696f9ed450c2bb03d4e46fd6f..842705843c06113e643704a30be52795055e4c1f 100644 --- a/ant-design-jeecg-vue/src/defaultSettings.js +++ b/ant-design-jeecg-vue/src/defaultSettings.js @@ -22,6 +22,7 @@ export default { fixSiderbar: false, // sticky siderbar autoHideHeader: false, // auto hide header colorWeak: false, + multipage: false, //默认多页签模式 // vue-ls options storageOptions: { namespace: 'pro__', // key prefix diff --git a/ant-design-jeecg-vue/src/main.js b/ant-design-jeecg-vue/src/main.js index 31c7778fc6c2ed0e9c6d5c99012fc64cee32f77a..6a5e8d6728ca3223877c538bd9adf54091d0fa31 100644 --- a/ant-design-jeecg-vue/src/main.js +++ b/ant-design-jeecg-vue/src/main.js @@ -12,9 +12,9 @@ import 'ant-design-vue/dist/antd.less'; // or 'ant-design-vue/dist/antd.less' import '@/permission' // permission control import '@/utils/filter' // base filter -import DictSelectTag from './components/dict/index.js' -import Print from 'vue-print-nb' +import Print from 'vue-print-nb-jeecg' /*import '@babel/polyfill'*/ +import VueApexCharts from 'vue-apexcharts' import { ACCESS_TOKEN, @@ -30,17 +30,19 @@ import { } from "@/store/mutation-types" import config from '@/defaultSettings' +import JDictSelectTag from './components/dict/index.js' import hasPermission from '@/utils/hasPermission' Vue.config.productionTip = false - Vue.use(Storage, config.storageOptions) Vue.use(Antd) Vue.use(VueAxios, router) Vue.use(Viser) Vue.use(hasPermission) -Vue.use(DictSelectTag) +Vue.use(JDictSelectTag) Vue.use(Print) +Vue.use(VueApexCharts) +Vue.component('apexchart', VueApexCharts) new Vue({ router, diff --git a/ant-design-jeecg-vue/src/mixins/JEditableTableOneToManyMixin.js b/ant-design-jeecg-vue/src/mixins/JEditableTableOneToManyMixin.js new file mode 100644 index 0000000000000000000000000000000000000000..f6c7ad8167baec2b607605d84dd425741396ac45 --- /dev/null +++ b/ant-design-jeecg-vue/src/mixins/JEditableTableOneToManyMixin.js @@ -0,0 +1,160 @@ +import JEditableTable from '@/components/jeecg/JEditableTable' +import { VALIDATE_NO_PASSED, getRefPromise, validateFormAndTables } from '@/utils/JEditableTableUtil' +import { httpAction, getAction } from '@/api/manage' + +export const JEditableTableOneToManyMixin = { + components: { + JEditableTable + }, + data() { + return { + title: '操作', + visible: false, + form: this.$form.createForm(this), + confirmLoading: false, + model: {}, + labelCol: { + xs: { span: 24 }, + sm: { span: 6 } + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 18 } + } + } + }, + methods: { + + /** 获取所有的editableTable实例 */ + getAllTable() { + if (!(this.refKeys instanceof Array)) { + throw this.throwNotArray('refKeys') + } + let values = this.refKeys.map(key => getRefPromise(this, key)) + return Promise.all(values) + }, + + /** 遍历所有的JEditableTable实例 */ + eachAllTable(callback) { + // 开始遍历 + this.getAllTable().then(tables => { + tables.forEach((item, index) => { + if (typeof callback === 'function') { + callback(item, index) + } + }) + }) + }, + + /** 当点击新增按钮时调用此方法 */ + add() { + // 默认新增空数据 + let rowNum = this.addDefaultRowNum + if (typeof rowNum !== 'number') { + rowNum = 1 + console.warn('由于你没有在 data 中定义 addDefaultRowNum 或 addDefaultRowNum 不是数字，所以默认添加一条空数据，如果不想默认添加空数据，请将定义 addDefaultRowNum 为 0') + } + this.eachAllTable((item) => { + item.add(rowNum) + }) + + this.edit({}) + }, + /** 当点击了编辑（修改）按钮时调用此方法 */ + edit(record) { + if (typeof this.editBefore === 'function') this.editBefore(record) + this.visible = true + this.activeKey = this.refKeys[0] + this.form.resetFields() + this.model = Object.assign({}, record) + if (typeof this.editAfter === 'function') this.editAfter(this.model) + }, + /** 关闭弹窗，并将所有JEditableTable实例回归到初始状态 */ + close() { + this.visible = false + this.eachAllTable((item) => { + item.initialize() + }) + this.$emit('close') + }, + + /** 查询某个tab的数据 */ + requestSubTableData(url, params, tab) { + tab.loading = true + getAction(url, params).then(res => { + tab.dataSource = res.result || [] + }).finally(() => { + tab.loading = false + }) + }, + /** 发起请求，自动判断是执行新增还是修改操作 */ + request(formData) { + let url = this.url.add, method = 'post' + if (this.model.id) { + url = this.url.edit + method = 'put' + } + this.confirmLoading = true + httpAction(url, formData, method).then((res) => { + if (res.success) { + this.$message.success(res.message) + this.$emit('ok') + this.close() + } else { + this.$message.warning(res.message) + } + }).finally(() => { + this.confirmLoading = false + }) + }, + + /* --- handle 事件 --- */ + + /** ATab 选项卡切换事件 */ + handleChangeTabs(key) { + // 自动重置scrollTop状态，防止出现白屏 + getRefPromise(this, key).then(editableTable => { + editableTable.resetScrollTop() + }) + }, + /** 关闭按钮点击事件 */ + handleCancel() { + this.close() + }, + /** 确定按钮点击事件 */ + handleOk() { + /** 触发表单验证 */ + this.getAllTable().then(tables => { + /** 一次性验证主表和所有的次表 */ + return validateFormAndTables(this.form, tables) + }).then(allValues => { + if (typeof this.classifyIntoFormData !== 'function') { + throw this.throwNotFunction('classifyIntoFormData') + } + let formData = this.classifyIntoFormData(allValues) + // 发起请求 + return this.request(formData) + }).catch(e => { + if (e.error === VALIDATE_NO_PASSED) { + // 如果有未通过表单验证的子表，就自动跳转到它所在的tab + this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index] + } else { + console.error(e) + } + }) + }, + + /* --- throw --- */ + + /** not a function */ + throwNotFunction(name) { + return `${name} 未定义或不是一个函数` + }, + + /** not a array */ + throwNotArray(name) { + return `${name} 未定义或不是一个数组` + } + + } +} \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/mixins/JeecgListMixin.js b/ant-design-jeecg-vue/src/mixins/JeecgListMixin.js new file mode 100644 index 0000000000000000000000000000000000000000..3640b3fe31589804e9ccdd593b206fd229c6c5fb --- /dev/null +++ b/ant-design-jeecg-vue/src/mixins/JeecgListMixin.js @@ -0,0 +1,220 @@ +/** + * 新增修改完成调用 modalFormOk方法 编辑弹框组件ref定义为modalForm + * 高级查询按钮调用 superQuery方法 高级查询组件ref定义为superQueryModal + * data中url定义 list为查询列表 delete为删除单条记录 deleteBatch为批量删除 + */ +import { filterObj } from '@/utils/util'; +import { deleteAction, getAction } from '@/api/manage' +export const JeecgListMixin = { + data(){ + return { + /* 查询条件 */ + queryParam: {}, + /* 数据源 */ + dataSource:[], + /* 分页参数 */ + ipagination:{ + current: 1, + pageSize: 10, + pageSizeOptions: ['10', '20', '30'], + showTotal: (total, range) => { + return range[0] + "-" + range[1] + " 共" + total + "条" + }, + showQuickJumper: true, + showSizeChanger: true, + total: 0 + }, + /* 排序参数 */ + isorter:{ + column: 'createTime', + order: 'desc', + }, + /* 筛选参数 */ + filters: {}, + /* table加载状态 */ + loading:false, + /* table选中keys*/ + selectedRowKeys: [], + /* table选中records*/ + selectionRows: [], + /* 查询折叠 */ + toggleSearchStatus:false, + /* 高级查询条件生效状态 */ + superQueryFlag:false, + /* 高级查询条件 */ + superQueryParams:"", + } + }, + created() { + this.loadData(); + //初始化字典配置 在自己页面定义 + this.initDictConfig(); + }, + methods:{ + loadData(arg) { + if(!this.url.list){ + this.$message.error("请设置url.list属性!") + return + } + //加载数据 若传入参数1则加载第一页的内容 + if (arg === 1) { + this.ipagination.current = 1; + } + var params = this.getQueryParams();//查询条件 + getAction(this.url.list, params).then((res) => { + if (res.success) { + this.dataSource = res.result.records; + this.ipagination.total = res.result.total; + } + }) + }, + initDictConfig(){ + console.log("--这是一个假的方法!") + }, + handleSuperQuery(arg) { + //高级查询方法 + if(!arg){ + this.superQueryParams='' + this.superQueryFlag = false + }else{ + this.superQueryFlag = true + this.superQueryParams=JSON.stringify(arg) + } + this.loadData() + }, + getQueryParams() { + //获取查询条件 + let sqp = {} + if(this.superQueryParams){ + sqp['superQueryParams']=encodeURI(this.superQueryParams) + } + var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters); + param.field = this.getQueryField(); + param.pageNo = this.ipagination.current; + param.pageSize = this.ipagination.pageSize; + return filterObj(param); + }, + getQueryField() { + //TODO 字段权限控制 + var str = "id,"; + this.columns.forEach(function (value) { + str += "," + value.dataIndex; + }); + return str; + }, + + onSelectChange(selectedRowKeys, selectionRows) { + this.selectedRowKeys = selectedRowKeys; + this.selectionRows = selectionRows; + }, + onClearSelected() { + this.selectedRowKeys = []; + this.selectionRows = []; + }, + searchQuery() { + this.loadData(1); + }, + superQuery() { + this.$refs.superQueryModal.show(); + }, + searchReset() { + this.queryParam = {} + this.loadData(1); + }, + batchDel: function () { + if(!this.url.deleteBatch){ + this.$message.error("请设置url.deleteBatch属性!") + return + } + if (this.selectedRowKeys.length <= 0) { + this.$message.warning('请选择一条记录！'); + return; + } else { + var ids = ""; + for (var a = 0; a < this.selectedRowKeys.length; a++) { + ids += this.selectedRowKeys[a] + ","; + } + var that = this; + this.$confirm({ + title: "确认删除", + content: "是否删除选中数据?", + onOk: function () { + deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => { + if (res.success) { + that.$message.success(res.message); + that.loadData(); + that.onClearSelected(); + } else { + that.$message.warning(res.message); + } + }); + } + }); + } + }, + handleDelete: function (id) { + if(!this.url.delete){ + this.$message.error("请设置url.delete属性!") + return + } + var that = this; + deleteAction(that.url.delete, {id: id}).then((res) => { + if (res.success) { + that.$message.success(res.message); + that.loadData(); + } else { + that.$message.warning(res.message); + } + }); + }, + handleEdit: function (record) { + this.$refs.modalForm.edit(record); + this.$refs.modalForm.title = "编辑"; + }, + handleAdd: function () { + this.$refs.modalForm.add(); + this.$refs.modalForm.title = "新增"; + }, + handleTableChange(pagination, filters, sorter) { + //分页、排序、筛选变化时触发 + //TODO 筛选 + if (Object.keys(sorter).length > 0) { + this.isorter.column = sorter.field; + this.isorter.order = "ascend" == sorter.order ? "asc" : "desc" + } + this.ipagination = pagination; + this.loadData(); + }, + handleToggleSearch(){ + this.toggleSearchStatus = !this.toggleSearchStatus; + }, + modalFormOk() { + // 新增/修改 成功时，重载列表 + this.loadData(); + }, + handleDetail:function(record){ + this.$refs.modalForm.edit(record); + this.$refs.modalForm.title="详情"; + this.$refs.modalForm.disableSubmit = true; + }, + /* 导出 */ + handleExportXls(){ + let paramsStr = encodeURI(JSON.stringify(this.getQueryParams())); + let url = `${window._CONFIG['domianURL']}/${this.url.exportXlsUrl}?paramsStr=${paramsStr}`; + window.location.href = url; + }, + /* 导入 */ + handleImportExcel(info){ + if (info.file.status !== 'uploading') { + console.log(info.file, info.fileList); + } + if (info.file.status === 'done') { + this.$message.success(`${info.file.name} 文件上传成功`); + this.loadData(); + } else if (info.file.status === 'error') { + this.$message.error(`${info.file.name} 文件上传失败.`); + } + }, + } + +} \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/store/modules/app.js b/ant-design-jeecg-vue/src/store/modules/app.js index d8ce233aee305bb16c094d866ef734d1a9b042a1..e2a0b74ac527177ba255100be031b82887f76d5b 100644 --- a/ant-design-jeecg-vue/src/store/modules/app.js +++ b/ant-design-jeecg-vue/src/store/modules/app.js @@ -26,7 +26,7 @@ const app = { autoHideHeader: false, color: null, weak: false, - multipage: true + multipage: true //默认多页签模式 }, mutations: { SET_SIDEBAR_TYPE: (state, type) => { @@ -74,8 +74,8 @@ const app = { Vue.ls.set(DEFAULT_COLOR_WEAK, flag) state.weak = flag }, - setMultipage (state, multipage) { - state.multipage = multipage + SET_MULTI_PAGE (state, multipageFlag) { + state.multipage = multipageFlag } }, actions: { @@ -114,6 +114,9 @@ const app = { }, ToggleWeak({ commit }, weakFlag) { commit('TOGGLE_WEAK', weakFlag) + }, + ToggleMultipage({ commit }, multipageFlag) { + commit('SET_MULTI_PAGE', multipageFlag) } } } diff --git a/ant-design-jeecg-vue/src/store/modules/user.js b/ant-design-jeecg-vue/src/store/modules/user.js index cf7998837c543c43b16ad6f0889225ff1412bcf7..05000ea7ebde565b5461a3ceb47d45c9c64390f8 100644 --- a/ant-design-jeecg-vue/src/store/modules/user.js +++ b/ant-design-jeecg-vue/src/store/modules/user.js @@ -82,11 +82,12 @@ const user = { // 登出 Logout({ commit, state }) { return new Promise((resolve) => { + let logoutToken = state.token; commit('SET_TOKEN', '') commit('SET_PERMISSIONLIST', []) Vue.ls.remove(ACCESS_TOKEN) - - logout(state.token).then(() => { + //console.log('logoutToken: '+ logoutToken) + logout(logoutToken).then(() => { resolve() }).catch(() => { resolve() diff --git a/ant-design-jeecg-vue/src/utils/JEditableTableUtil.js b/ant-design-jeecg-vue/src/utils/JEditableTableUtil.js new file mode 100644 index 0000000000000000000000000000000000000000..b4433836317ecd45e5a83be4439d2245f5b3e469 --- /dev/null +++ b/ant-design-jeecg-vue/src/utils/JEditableTableUtil.js @@ -0,0 +1,97 @@ +const FormTypes = { + normal: 'normal', + input: 'input', + inputNumber: 'inputNumber', + checkbox: 'checkbox', + select: 'select', + date: 'date', + datetime: 'datetime' +} +const VALIDATE_NO_PASSED = Symbol() +export { FormTypes, VALIDATE_NO_PASSED } + +/** + * 获取指定的 $refs 对象 + * 有时候可能会遇到组件未挂载到页面中的情况，导致无法获取 $refs 中的某个对象 + * 这个方法可以等待挂载完成之后再返回 $refs 的对象，避免报错 + * @author sunjianlei + **/ +export function getRefPromise(vm, name) { + return new Promise((resolve) => { + (function next() { + let ref = vm.$refs[name] + if (ref) { + resolve(ref) + } else { + setTimeout(() => { + next() + }, 10) + } + })() + }) +} + +/** + * 一次性验证主表单和所有的次表单 + * @param form 主表单 form 对象 + * @param cases 接收一个数组，每项都是一个JEditableTable实例 + * @returns {Promise- } + * @author sunjianlei + */ +export function validateFormAndTables(form, cases) { + + if (!(form && typeof form.validateFields === 'function')) { + throw `form 参数需要的是一个form对象，而传入的却是${typeof form}` + } + + let options = {} + return new Promise((resolve, reject) => { + // 验证主表表单 + form.validateFields((err, values) => { + err ? reject({ error: VALIDATE_NO_PASSED }) : resolve(values) + }) + }).then(values => { + Object.assign(options, { formValue: values }) + // 验证所有子表的表单 + return validateTables(cases) + }).then(all => { + Object.assign(options, { tablesValue: all }) + return Promise.resolve(options) + }).catch(error => { + return Promise.reject(error) + }) + +} + +/** + * 验证并获取一个或多个表格的所有值 + * @param cases 接收一个数组，每项都是一个JEditableTable实例 + * @author sunjianlei + */ +export function validateTables(cases) { + if (!(cases instanceof Array)) { + throw `'validateTables'函数的'cases'参数需要的是一个数组，而传入的却是${typeof cases}` + } + return new Promise((resolve, reject) => { + let tables = [] + let index = 0; + (function next() { + let vm = cases[index] + vm.getAll(true).then(all => { + tables[index] = all + // 判断校验是否全部完成，完成返回成功，否则继续进行下一步校验 + if (++index === cases.length) { + resolve(tables) + } else ( + next() + ) + }, error => { + // 出现未验证通过的表单，不再进行下一步校验，直接返回失败并跳转到该表格 + if (error === VALIDATE_NO_PASSED) { + reject({ error: VALIDATE_NO_PASSED, index }) + } + reject(error) + }) + })() + }) +} \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/utils/axios.js b/ant-design-jeecg-vue/src/utils/axios.js index e02705d3fd1960c4bf2d201d74440d73b0de4ad2..de27d4cee67519a0baf924a6c79e3371c6c94a52 100644 --- a/ant-design-jeecg-vue/src/utils/axios.js +++ b/ant-design-jeecg-vue/src/utils/axios.js @@ -33,5 +33,5 @@ const VueAxios = { export { VueAxios, // eslint-disable-next-line no-undef - // instance as axios + //instance as axios } \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/utils/filter.js b/ant-design-jeecg-vue/src/utils/filter.js index f4aa4ce6ea4a1208890642a89344b5ccfeeb1c72..43c77effc8b67f14d75ec7d55422e910d3a3085b 100644 --- a/ant-design-jeecg-vue/src/utils/filter.js +++ b/ant-design-jeecg-vue/src/utils/filter.js @@ -15,4 +15,16 @@ Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') { Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') { return dayjs(dataStr).format(pattern) +}) + +/** 字符串超长截取省略号显示 */ +Vue.filter('ellipsis', function (value, vlength = 25) { + if(!value){ + return ""; + } + console.log('vlength: '+ vlength); + if (value.length > vlength) { + return value.slice(0, vlength) + '...' + } + return value }) \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/utils/hasPermission.js b/ant-design-jeecg-vue/src/utils/hasPermission.js index 8e821eb80ad80e64121b986e7e153a40d2f16b9e..52aafbb023f9f8084395e0f2fc22278addb8c1d4 100644 --- a/ant-design-jeecg-vue/src/utils/hasPermission.js +++ b/ant-design-jeecg-vue/src/utils/hasPermission.js @@ -3,10 +3,11 @@ const hasPermission = { console.log(options); Vue.directive('has', { inserted: (el, binding, vnode)=>{ - //console.log("页面权限----",el); + console.log("页面权限----",el); let permissionList = vnode.context.$route.meta.permissionList; if (permissionList === null || permissionList === "" || permissionList === undefined) { el.parentNode.removeChild(el) + return } let permissions = []; for (var item of permissionList) { diff --git a/ant-design-jeecg-vue/src/utils/mixin.js b/ant-design-jeecg-vue/src/utils/mixin.js index 8417db6ffed1a74254dbdab10f1062b7db8aef40..8a6c89e41dc3eaec42fbd9552cc734dc613e4bd1 100644 --- a/ant-design-jeecg-vue/src/utils/mixin.js +++ b/ant-design-jeecg-vue/src/utils/mixin.js @@ -11,6 +11,7 @@ const mixin = { navTheme: state => state.app.theme, primaryColor: state => state.app.color, colorWeak: state => state.app.weak, + multipage: state => state.app.multipage,//多页签设置 fixedHeader: state => state.app.fixedHeader, fixSiderbar: state => state.app.fixSiderbar, contentWidth: state => state.app.contentWidth, diff --git a/ant-design-jeecg-vue/src/utils/request.js b/ant-design-jeecg-vue/src/utils/request.js index 4765bb3c7e5c4916ffdb476bdebc70cbb106d002..b5e3eccc4205f611764a2d61a38c08ae3633c2a8 100644 --- a/ant-design-jeecg-vue/src/utils/request.js +++ b/ant-design-jeecg-vue/src/utils/request.js @@ -23,7 +23,7 @@ const err = (error) => { break case 500: //notification.error({ message: '系统提示', description:'Token失效，请重新登录!',duration: 4}) - if(data.message=="Token失效，请重新登录"){ + if(token && data.message=="Token失效，请重新登录"){ // update-begin- --- author:scott ------ date:20190225 ---- for:Token失效采用弹框模式，不直接跳转---- // store.dispatch('Logout').then(() => { // window.location.reload() @@ -35,6 +35,7 @@ const err = (error) => { mask: false, onOk: () => { store.dispatch('Logout').then(() => { + Vue.ls.remove(ACCESS_TOKEN) window.location.reload() }) } @@ -76,6 +77,12 @@ service.interceptors.request.use(config => { if (token) { config.headers[ 'X-Access-Token' ] = token // 让每个请求携带自定义 token 请根据实际情况自行修改 } + if(config.method=='get'){ + config.params = { + _t: Date.parse(new Date())/1000, + ...config.params + } + } return config },(error) => { return Promise.reject(error) diff --git a/ant-design-jeecg-vue/src/utils/util.js b/ant-design-jeecg-vue/src/utils/util.js index c9287cd53aa7ddb74bd774267a17dc5efc1fb083..507237468aeed585ee7226c290d76f15d9b354ec 100644 --- a/ant-design-jeecg-vue/src/utils/util.js +++ b/ant-design-jeecg-vue/src/utils/util.js @@ -1,3 +1,4 @@ +import { isURL } from '@/utils/validate' export function timeFix() { const time = new Date() @@ -33,7 +34,7 @@ export function filterObj(obj) { for ( var key in obj) { if (obj.hasOwnProperty(key) - && (obj[key] == null || obj[key] == undefined || obj[key] == '')) { + && (obj[key] == null || obj[key] == undefined || obj[key] === '')) { delete obj[key]; } } @@ -105,6 +106,13 @@ function generateChildRouters (data) { }else{ component = "views/"+item.component; } + + // eslint-disable-next-line + let URL = (item.meta.url|| '').replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)) // URL支持{{ window.xxx }}占位符变量 + if (isURL(URL)) { + item.meta.url = URL; + } + let menu = { path: item.path, name: item.name, @@ -125,7 +133,94 @@ function generateChildRouters (data) { if (item.children && item.children.length > 0) { menu.children = [...generateChildRouters( item.children)]; } - routers.push(menu); + //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------ + //判断是否生成路由 + if(item.route && item.route === '0'){ + console.log(' 不生成路由 item.route： '+item.route); + console.log(' 不生成路由 item.path： '+item.path); + }else{ + routers.push(menu); + } + //--update-end----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------ } return routers +} + +/** + * 深度克隆对象、数组 + * @param obj 被克隆的对象 + * @return 克隆后的对象 + */ +export function cloneObject(obj) { + return JSON.parse(JSON.stringify(obj)) +} + +/** + * 随机生成数字 + * @param min 最小值 + * @param max 最大值 + * @return int 生成后的数字 + */ +export function randomNumber(min, max) { + return Math.floor(Math.random() * (max - min + 1) + min) +} + +/** + * 随机生成字符串 + * @param length 字符串的长度 + * @param chats 可选字符串区间（只会生成传入的字符串中的字符） + * @return string 生成的字符串 + */ +export function randomString(length, chats) { + if (!length) length = 1 + if (!chats) chats = '0123456789qwertyuioplkjhgfdsazxcvbnm' + let str = '' + for (let i = 0; i < length; i++) { + let num = randomNumber(0, chats.length - 1) + str += chats[num] + } + return str +} + +/** + * 随机生成uuid + * @return string 生成的uuid + */ +export function randomUUID() { + let chats = '0123456789abcdef' + return randomString(32, chats) +} + +/** + * 【顶部导航栏模式】 + * @date 2019-04-08 + * 顶部导航栏滚动条位置滚动到选中的菜单处 + * @param doc document 对象 + */ +export function topNavScrollToSelectItem(doc) { + let scrollWidth = doc.getElementById('top-nav-scroll-width') + if (scrollWidth == null) return + let menu = scrollWidth.getElementsByClassName('ant-menu')[0] + if (menu) { + let menuItems = menu.getElementsByTagName('li') + for (let item of menuItems) { + let index1 = item.className.indexOf('ant-menu-item-selected') !== -1 + let index2 = item.className.indexOf('ant-menu-submenu-selected') !== -1 + if (index1 || index2) { + // scrollLeft = 选中项left - 选中项width - (第一个隐藏的div的宽度) + let scrollLeft = (item.offsetLeft - item.offsetWidth - (index1 ? 100 : 60)) + let scrollView = doc.getElementById('top-nav-scroll-view') + // scrollTo() 方法存在兼容性问题 + if (typeof scrollView.scrollTo === 'function') { + scrollView.scrollTo({ + left: scrollLeft, + behavior: 'smooth' + }) + } else { + scrollView.scrollLeft = scrollLeft + } + break + } + } + } } \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/utils/validate.js b/ant-design-jeecg-vue/src/utils/validate.js new file mode 100644 index 0000000000000000000000000000000000000000..c8edcac42927d0241a1c8725319e12282e68800d --- /dev/null +++ b/ant-design-jeecg-vue/src/utils/validate.js @@ -0,0 +1,31 @@ +/** + * 邮箱 + * @param {*} s + */ +export function isEmail (s) { + return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s) +} + +/** + * 手机号码 + * @param {*} s + */ +export function isMobile (s) { + return /^1[0-9]{10}$/.test(s) +} + +/** + * 电话号码 + * @param {*} s + */ +export function isPhone (s) { + return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s) +} + +/** + * URL地址 + * @param {*} s + */ +export function isURL (s) { + return /^http[s]?:\/\/.*/.test(s) +} diff --git a/ant-design-jeecg-vue/src/views/account/center/Index.vue b/ant-design-jeecg-vue/src/views/account/center/Index.vue index 024b0b89c4acedf4d40db101657274279732f3aa..3658dc6e57a1ccde16c30b99338732201f1a867a 100644 --- a/ant-design-jeecg-vue/src/views/account/center/Index.vue +++ b/ant-design-jeecg-vue/src/views/account/center/Index.vue @@ -93,8 +93,6 @@ import PageLayout from '@/components/page/PageLayout' import RouteView from "@/components/layouts/RouteView" import { AppPage, ArticlePage, ProjectPage } from './page' - import {imgView} from '@/api/api' - import { mapGetters } from 'vuex' export default { @@ -135,7 +133,7 @@ methods: { ...mapGetters(["nickname", "avatar"]), getAvatar(){ - return imgView+this.avatar(); + return window._CONFIG['imgDomainURL']+"/"+this.avatar(); }, getTeams() { this.$http.get('/api/workplace/teams') diff --git a/ant-design-jeecg-vue/src/views/dashboard/Analysis.vue b/ant-design-jeecg-vue/src/views/dashboard/Analysis.vue index 6313e6daffe6a8e9eeda0de6bf3e557b1d6c5bba..d68948ac59063f0f68277e4d480a82b31b53b0df 100644 --- a/ant-design-jeecg-vue/src/views/dashboard/Analysis.vue +++ b/ant-design-jeecg-vue/src/views/dashboard/Analysis.vue @@ -36,7 +36,7 @@ -转化率 60% @@ -47,7 +47,7 @@+ -+ @@ -78,7 +78,7 @@ - + @@ -88,7 +88,7 @@ - + @@ -173,7 +173,7 @@ import RankList from '@/components/chart/RankList' import Bar from '@/components/chart/Bar' import Trend from '@/components/Trend' - import {getLoginfo} from '@/api/api.js' + import {getLoginfo} from '@/api/api' const rankList = [] for (let i = 0; i < 7; i++) { @@ -182,7 +182,13 @@ total: 1234.56 - i * 100 }) } - + const barData = [] + for (let i = 0; i < 12; i += 1) { + barData.push({ + x: `${i + 1}月`, + y: Math.floor(Math.random() * 1000) + 200 + }) + } export default { name: "Analysis", components: { @@ -199,7 +205,9 @@ data() { return { loading: true, + center: null, rankList, + barData, loginfo:{}, } }, diff --git a/ant-design-jeecg-vue/src/views/dashboard/Workplace.vue b/ant-design-jeecg-vue/src/views/dashboard/Workplace.vue index 0042c0bd0b38711fd9386281e71fb6a057cac116..96c764b91642789a8ab40a5912ed40046a50e373 100644 --- a/ant-design-jeecg-vue/src/views/dashboard/Workplace.vue +++ b/ant-design-jeecg-vue/src/views/dashboard/Workplace.vue @@ -21,11 +21,11 @@ - -全部项目 @@ -67,12 +67,12 @@ @@ -116,9 +116,7 @@ import PageLayout from '@/components/page/PageLayout' import HeadInfo from '@/components/tools/HeadInfo' import Radar from '@/components/chart/Radar' - import { getRoleList, getServiceList } from "@/api/manage" - import {imgView} from '@/api/api' const DataSet = require('@antv/data-set') @@ -187,7 +185,8 @@ }, created() { this.user = this.userInfo - this.avatar = imgView + this.userInfo.avatar + this.avatar = window._CONFIG['imgDomainURL'] +"/"+ this.userInfo.avatar + console.log('this.avatar :'+ this.avatar) getRoleList().then(res => { console.log('workplace -> call getRoleList()', res) diff --git a/ant-design-jeecg-vue/src/views/jeecg/FlowTest.vue b/ant-design-jeecg-vue/src/views/jeecg/InterfaceTest.vue similarity index 97% rename from ant-design-jeecg-vue/src/views/jeecg/FlowTest.vue rename to ant-design-jeecg-vue/src/views/jeecg/InterfaceTest.vue index 19f832d44c1d21a7cd960591b0fecbf6477f94d4..78a9e463fc46fbeba3e0f41c1604368359106143 100644 --- a/ant-design-jeecg-vue/src/views/jeecg/FlowTest.vue +++ b/ant-design-jeecg-vue/src/views/jeecg/InterfaceTest.vue @@ -1,13 +1,13 @@-- + POST + + +++ + +选择用户 ++ - + + ++ +- + +- -- + -+ ++ - + -+ + + + + +高级查询 + + + {{ toggleSearchStatus ? '收起' : '展开' }} ++ + +新增 创建单据 一对多 - +导出 ++ 导入 +@@ -94,38 +119,51 @@ - + - + + + \ No newline at end of file diff --git a/ant-design-jeecg-vue/src/views/jeecg/JeecgOrderMainList.vue b/ant-design-jeecg-vue/src/views/jeecg/JeecgOrderMainList.vue index 43d755eb4ebfe8bc1d0e18aca1c28bed27623325..195345855cb59a5adcc15022f8151d86c0f1160c 100644 --- a/ant-design-jeecg-vue/src/views/jeecg/JeecgOrderMainList.vue +++ b/ant-design-jeecg-vue/src/views/jeecg/JeecgOrderMainList.vue @@ -6,12 +6,12 @@ - + + 国内订单 @@ -20,7 +20,7 @@+