bri-components 1.5.10 → 1.5.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/controls/base/BriUpload/BriUploadImage.vue +4 -0
- package/src/components/controls/base/DshCascader/DshCascader.vue +8 -3
- package/src/components/controls/base/DshCascader/components/cascaderPicker.vue +1 -1
- package/src/components/controls/base/DshCascader/components/cascaderSimple.vue +4 -6
- package/src/components/controls/base/DshCascader/components/cascaderTree.vue +151 -0
- package/src/components/controls/mixins/cascaderMixin.js +25 -2
- package/src/components/controls/mixins/cascaderPickerMixin.js +13 -2
- package/src/components/list/DshFlatTable.vue +4 -4
- package/src/components/list/mixins/DshCascaderTableMixin.js +1 -1
- package/src/components/list/mixins/DshFlatTableMixin.js +10 -10
- package/src/components/list/mixins/tableBaseMixin.js +1 -1
- package/src/index.js +2 -2
package/package.json
CHANGED
|
@@ -57,6 +57,7 @@
|
|
|
57
57
|
<input
|
|
58
58
|
id="fileupload"
|
|
59
59
|
class="file"
|
|
60
|
+
:accept="acceptType"
|
|
60
61
|
:type="inputType"
|
|
61
62
|
@change="setImage"
|
|
62
63
|
/>
|
|
@@ -155,6 +156,9 @@
|
|
|
155
156
|
},
|
|
156
157
|
finalRequestOssType () {
|
|
157
158
|
return this.propsObj._requestOssType || this.requestOssType || "default";
|
|
159
|
+
},
|
|
160
|
+
acceptType () {
|
|
161
|
+
return this.propsObj._acceptType || "*";
|
|
158
162
|
}
|
|
159
163
|
},
|
|
160
164
|
created () {
|
|
@@ -81,9 +81,11 @@
|
|
|
81
81
|
:is="showTypeMap[showMode]"
|
|
82
82
|
v-model="showModal"
|
|
83
83
|
:multipleMode="multipleMode"
|
|
84
|
+
:activeValue="curValList"
|
|
84
85
|
:data="cascaderData"
|
|
85
86
|
:propsObj="selfPropsObj"
|
|
86
|
-
@confirm="
|
|
87
|
+
@confirm="confirmAddCb"
|
|
88
|
+
@confirmMul="confirmMulCb"
|
|
87
89
|
>
|
|
88
90
|
<dsh-control-input
|
|
89
91
|
:class="commonClass"
|
|
@@ -147,6 +149,7 @@
|
|
|
147
149
|
import cascaderPicker from "./components/cascaderPicker.vue";
|
|
148
150
|
import cascaderModal from "./components/cascaderModal.vue";
|
|
149
151
|
import cascaderSimple from "./components/cascaderSimple.vue";
|
|
152
|
+
import cascaderTree from "./components/cascaderTree.vue";
|
|
150
153
|
|
|
151
154
|
export default {
|
|
152
155
|
name: "DshCascader",
|
|
@@ -156,7 +159,8 @@
|
|
|
156
159
|
components: {
|
|
157
160
|
cascaderPicker,
|
|
158
161
|
cascaderModal,
|
|
159
|
-
cascaderSimple
|
|
162
|
+
cascaderSimple,
|
|
163
|
+
cascaderTree
|
|
160
164
|
},
|
|
161
165
|
props: {},
|
|
162
166
|
data () {
|
|
@@ -164,7 +168,8 @@
|
|
|
164
168
|
showTypeMap: {
|
|
165
169
|
default: cascaderPicker, // 确认面板方式（默认）
|
|
166
170
|
custom: cascaderModal, // 弹框方式
|
|
167
|
-
simple: cascaderSimple // 简易方式
|
|
171
|
+
simple: cascaderSimple, // 简易方式
|
|
172
|
+
tree: cascaderTree // 树形方式
|
|
168
173
|
}
|
|
169
174
|
};
|
|
170
175
|
},
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="cascaderTree">
|
|
3
|
+
<Dropdown
|
|
4
|
+
v-clickoutside="clickCancel"
|
|
5
|
+
style="width: 100%;"
|
|
6
|
+
trigger="custom"
|
|
7
|
+
:visible="showModal"
|
|
8
|
+
:placement="'bottom-start'"
|
|
9
|
+
:transfer="true"
|
|
10
|
+
:transfer-class-name="`cascaderTree-down ${selfPropsObj._transferClassName}`"
|
|
11
|
+
:stop-propagation="true"
|
|
12
|
+
:events-enabled="true"
|
|
13
|
+
>
|
|
14
|
+
<div @click="clickInput">
|
|
15
|
+
<slot>
|
|
16
|
+
<Input
|
|
17
|
+
v-model="inputStr"
|
|
18
|
+
:placeholder="selfPropsObj._placeholder"
|
|
19
|
+
:disabled="disabled"
|
|
20
|
+
:readonly="true"
|
|
21
|
+
:clearable="clearable"
|
|
22
|
+
:size="selfPropsObj._size"
|
|
23
|
+
></Input>
|
|
24
|
+
</slot>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<!-- 下拉面板 click.stop目的：slot插槽里的会渲染到body下，点击此面板时，click事件会被Dropdown捕捉到，被当成外部点击事件，用stop阻止住 -->
|
|
28
|
+
<div
|
|
29
|
+
slot="list"
|
|
30
|
+
class="wrap"
|
|
31
|
+
@click.stop="0"
|
|
32
|
+
>
|
|
33
|
+
<!-- 头部 -->
|
|
34
|
+
<div class="wrap-header">
|
|
35
|
+
<!-- 搜索 -->
|
|
36
|
+
<div class="wrap-header-left">
|
|
37
|
+
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<!-- 按钮 -->
|
|
41
|
+
<dsh-buttons
|
|
42
|
+
class="wrap-header-right"
|
|
43
|
+
:list="$getOperationList()"
|
|
44
|
+
@click="$dispatchEvent($event)"
|
|
45
|
+
></dsh-buttons>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<!-- 内容 -->
|
|
49
|
+
<div class="wrap-content">
|
|
50
|
+
<Tree
|
|
51
|
+
:data="showTreeData"
|
|
52
|
+
show-checkbox
|
|
53
|
+
check-directly
|
|
54
|
+
@on-check-change="changeCheck"
|
|
55
|
+
></Tree>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</Dropdown>
|
|
59
|
+
</div>
|
|
60
|
+
</template>
|
|
61
|
+
|
|
62
|
+
<script>
|
|
63
|
+
import cascaderPickerMixin from "../../../mixins/cascaderPickerMixin.js";
|
|
64
|
+
|
|
65
|
+
export default {
|
|
66
|
+
name: "cascaderTree",
|
|
67
|
+
mixins: [
|
|
68
|
+
cascaderPickerMixin
|
|
69
|
+
],
|
|
70
|
+
components: {},
|
|
71
|
+
props: {},
|
|
72
|
+
data () {
|
|
73
|
+
return {};
|
|
74
|
+
},
|
|
75
|
+
computed: {},
|
|
76
|
+
created () {},
|
|
77
|
+
methods: {
|
|
78
|
+
changeCheck (checkList, curItem) {
|
|
79
|
+
// 不是末级节点 -点击后是选中状态话，把子孙后代节点全部展开；点击后是取消勾选状态话，把子孙后代节点全部收起来
|
|
80
|
+
if (!curItem.isLeaf) {
|
|
81
|
+
const loop = (node = { children: [] }) => {
|
|
82
|
+
node.expand = !!node.checked;
|
|
83
|
+
node.children.forEach(childNode => loop(childNode));
|
|
84
|
+
};
|
|
85
|
+
loop(curItem);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
this.selectedValueArr = checkList
|
|
89
|
+
.reduce((newNodeArr, node, nodeIndex) => {
|
|
90
|
+
return newNodeArr.every(newNode => !node.code.startsWith(newNode.code))
|
|
91
|
+
? [
|
|
92
|
+
...newNodeArr,
|
|
93
|
+
node
|
|
94
|
+
]
|
|
95
|
+
: newNodeArr;
|
|
96
|
+
}, [])
|
|
97
|
+
.map(node => node.keys);
|
|
98
|
+
},
|
|
99
|
+
clickConfirm () {
|
|
100
|
+
this.$emit("confirmMul", this.selectedValueArr, this.selectedOptionsArr);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
</script>
|
|
105
|
+
|
|
106
|
+
<style lang="less">
|
|
107
|
+
.cascaderTree {
|
|
108
|
+
&-down {
|
|
109
|
+
.wrap {
|
|
110
|
+
&-header {
|
|
111
|
+
width: 100%;
|
|
112
|
+
height: 40px;
|
|
113
|
+
padding: 0px 8px 3px;
|
|
114
|
+
border-bottom: 1px solid @borderColor;
|
|
115
|
+
display: flex;
|
|
116
|
+
justify-content: space-between;
|
|
117
|
+
align-items: center;
|
|
118
|
+
|
|
119
|
+
&-left {
|
|
120
|
+
width: 200px;
|
|
121
|
+
display: flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&-right {
|
|
126
|
+
padding-left: 10px;
|
|
127
|
+
display: flex;
|
|
128
|
+
justify-content: flex-end;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&-content {
|
|
133
|
+
width: 100%;
|
|
134
|
+
min-height: 300px;
|
|
135
|
+
max-height: 540px;
|
|
136
|
+
padding: 10px 20px;
|
|
137
|
+
overflow: auto;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&.ivu-select-dropdown {
|
|
142
|
+
min-width: 420px;
|
|
143
|
+
max-width: 420px;
|
|
144
|
+
// min-height: 300px;
|
|
145
|
+
max-height: 600px; // 必须有，压住iview的300px
|
|
146
|
+
border: 0.5px solid #e5e5e5;
|
|
147
|
+
box-shadow: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.1);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
</style>
|
|
@@ -16,6 +16,7 @@ export default {
|
|
|
16
16
|
return {
|
|
17
17
|
_regionType: "default", // "default", "benji", "userIndustry"
|
|
18
18
|
_showMode: "default", // "default", "custom", "simple"
|
|
19
|
+
_searchShowMode: undefined, // "tree", "default", "custom", "simple"
|
|
19
20
|
|
|
20
21
|
_saveKey: "_key",
|
|
21
22
|
_valueKey: "code",
|
|
@@ -43,7 +44,9 @@ export default {
|
|
|
43
44
|
return this.selfPropsObj._regionType;
|
|
44
45
|
},
|
|
45
46
|
showMode () {
|
|
46
|
-
return this.
|
|
47
|
+
return this.isInAnySearch
|
|
48
|
+
? this.selfPropsObj._searchShowMode || this.selfPropsObj._showMode
|
|
49
|
+
: this.selfPropsObj._showMode;
|
|
47
50
|
},
|
|
48
51
|
|
|
49
52
|
saveKey () {
|
|
@@ -130,6 +133,14 @@ export default {
|
|
|
130
133
|
label: newItem[nameKey]
|
|
131
134
|
};
|
|
132
135
|
|
|
136
|
+
if (this.showMode === "tree") {
|
|
137
|
+
newItem.title = newItem[nameKey];
|
|
138
|
+
newItem.checked = this.multipleMode
|
|
139
|
+
? this.curValList.some(valListItem => valListItem.join("") === newItem.code)
|
|
140
|
+
: this.curValList.join("") === newItem.code;
|
|
141
|
+
newItem.expand = !!newItem.expand;
|
|
142
|
+
}
|
|
143
|
+
|
|
133
144
|
if (
|
|
134
145
|
(!level || level > newItem.level) &&
|
|
135
146
|
(newItem.children && newItem.children.length)
|
|
@@ -139,6 +150,10 @@ export default {
|
|
|
139
150
|
if (newItem.children.length) {
|
|
140
151
|
newItem.loading = false; // 此代码pc端在用：为了所请求的级，出现继续加载的箭头图标
|
|
141
152
|
newItem.isLeaf = false;
|
|
153
|
+
|
|
154
|
+
if (this.showMode === "tree") {
|
|
155
|
+
newItem.expand = newItem.expand || newItem.checked || newItem.children.some(childItem => childItem.expand || childItem.checked);
|
|
156
|
+
}
|
|
142
157
|
} else {
|
|
143
158
|
newItem.children = isMb ? undefined : [];
|
|
144
159
|
newItem.isLeaf = true;
|
|
@@ -228,12 +243,14 @@ export default {
|
|
|
228
243
|
},
|
|
229
244
|
created () { },
|
|
230
245
|
methods: {
|
|
246
|
+
// 单选 -确认回调
|
|
231
247
|
confirmCb (selectedValue, selectedOptions) {
|
|
232
248
|
this.curValList = selectedValue;
|
|
233
249
|
|
|
234
250
|
this.closeModal();
|
|
235
251
|
},
|
|
236
|
-
|
|
252
|
+
// 多选 -追加的确认回调
|
|
253
|
+
confirmAddCb (selectedValue, selectedOptions) {
|
|
237
254
|
if (this.curValList.some(item => JSON.stringify(item) === JSON.stringify(selectedValue))) {
|
|
238
255
|
this.$Message.error({
|
|
239
256
|
content: `请勿重复选择"${this.transformFullName(selectedValue)}"！`,
|
|
@@ -245,6 +262,12 @@ export default {
|
|
|
245
262
|
this.closeModal();
|
|
246
263
|
}
|
|
247
264
|
},
|
|
265
|
+
// 多选 -整体多选的回调
|
|
266
|
+
confirmMulCb (selectedValueArr, selectedOptionsArr) {
|
|
267
|
+
this.curValList = selectedValueArr;
|
|
268
|
+
|
|
269
|
+
this.closeModal();
|
|
270
|
+
},
|
|
248
271
|
// 删除
|
|
249
272
|
clickDeleteItem (nameItem, index) {
|
|
250
273
|
this.curValList.splice(index, 1);
|
|
@@ -39,6 +39,7 @@ export default {
|
|
|
39
39
|
inputStr: "",
|
|
40
40
|
selectedValue: [],
|
|
41
41
|
activeCodeValue: [],
|
|
42
|
+
selectedValueArr: [], // 多选的选中项
|
|
42
43
|
|
|
43
44
|
operationMap: {
|
|
44
45
|
canCancel: {
|
|
@@ -156,6 +157,12 @@ export default {
|
|
|
156
157
|
// 选中项 -名字
|
|
157
158
|
selectedName () {
|
|
158
159
|
return this.selectedObj ? this.selectedObj[this.nameKey] : "";
|
|
160
|
+
},
|
|
161
|
+
// 整体多选的选中项s
|
|
162
|
+
selectedOptionsArr () {
|
|
163
|
+
return this.selectedValueArr.map(selectedValItem =>
|
|
164
|
+
this.$getTreeLinealDatas(selectedValItem, this.showTreeData, undefined, this.saveKey)
|
|
165
|
+
);
|
|
159
166
|
}
|
|
160
167
|
},
|
|
161
168
|
created () {
|
|
@@ -163,8 +170,12 @@ export default {
|
|
|
163
170
|
},
|
|
164
171
|
methods: {
|
|
165
172
|
cascaderPickerInit () {
|
|
166
|
-
this.
|
|
167
|
-
|
|
173
|
+
if (this.multipleMode) {
|
|
174
|
+
this.selectedValueArr = this.activeValue; // 多选使用下，activeValue是二重数组
|
|
175
|
+
} else {
|
|
176
|
+
this.selectedValue = this.activeValue;
|
|
177
|
+
this.activeCodeValue = this.$getTreeLinealDatas(this.activeValue, this.data, this.valueKey, this.saveKey);
|
|
178
|
+
}
|
|
168
179
|
},
|
|
169
180
|
|
|
170
181
|
clickInput (e) {
|
|
@@ -74,12 +74,12 @@
|
|
|
74
74
|
>
|
|
75
75
|
<dsh-page
|
|
76
76
|
:mode="pageMode"
|
|
77
|
-
:total="
|
|
77
|
+
:total="totalNum"
|
|
78
78
|
:propsObj="pagePropsObj"
|
|
79
79
|
@changePage="changePage"
|
|
80
80
|
@changePageSize="changePageSize"
|
|
81
81
|
>
|
|
82
|
-
共 {{
|
|
82
|
+
共 {{ totalNum }} 条
|
|
83
83
|
|
|
84
84
|
<span
|
|
85
85
|
class="DshFlatTable-sort"
|
|
@@ -183,12 +183,12 @@
|
|
|
183
183
|
>
|
|
184
184
|
<dsh-page
|
|
185
185
|
:mode="pageMode"
|
|
186
|
-
:total="
|
|
186
|
+
:total="totalNum"
|
|
187
187
|
:propsObj="pagePropsObj"
|
|
188
188
|
@changePage="changePage"
|
|
189
189
|
@changePageSize="changePageSize"
|
|
190
190
|
>
|
|
191
|
-
共 {{
|
|
191
|
+
共 {{ totalNum }} 条
|
|
192
192
|
|
|
193
193
|
<span
|
|
194
194
|
class="DshFlatTable-sort"
|
|
@@ -60,7 +60,7 @@ export default {
|
|
|
60
60
|
},
|
|
61
61
|
// 替换tableBaseMixin里的
|
|
62
62
|
searchTitle () {
|
|
63
|
-
return `${this.isSearching ? "筛选" : "全部"}数据${this.isMergeRowTable ? `，共 ${this.
|
|
63
|
+
return `${this.isSearching ? "筛选" : "全部"}数据${this.isMergeRowTable ? `，共 ${this.totalNum}条；` : "；"}`;
|
|
64
64
|
},
|
|
65
65
|
|
|
66
66
|
/* --- 列字段 --- */
|
|
@@ -168,17 +168,17 @@ export default {
|
|
|
168
168
|
const pagesize = this.pagePropsObj.pagesize;
|
|
169
169
|
|
|
170
170
|
return page >= 1
|
|
171
|
-
?
|
|
171
|
+
? page > this.totalPage
|
|
172
172
|
? this.showListData.slice(-(this.showListData.length % pagesize || pagesize))
|
|
173
173
|
: this.showListData.slice((page - 1) * pagesize, page * pagesize)
|
|
174
174
|
: [];
|
|
175
175
|
},
|
|
176
176
|
// 全部数据 或 筛选时符合条件的数据 -共多少分（！！！最小为1）
|
|
177
|
-
|
|
177
|
+
totalPage () {
|
|
178
178
|
return (
|
|
179
|
-
this.
|
|
180
|
-
? Math.ceil(this.
|
|
181
|
-
: this.
|
|
179
|
+
this.totalNum % this.pagePropsObj.pagesize > 0
|
|
180
|
+
? Math.ceil(this.totalNum / this.pagePropsObj.pagesize)
|
|
181
|
+
: this.totalNum / this.pagePropsObj.pagesize
|
|
182
182
|
) || 1;
|
|
183
183
|
}
|
|
184
184
|
},
|
|
@@ -203,15 +203,15 @@ export default {
|
|
|
203
203
|
this.changePage(1);
|
|
204
204
|
}
|
|
205
205
|
} else {
|
|
206
|
-
if (this.pagePropsObj.page !== this.
|
|
207
|
-
this.changePage(this.
|
|
206
|
+
if (this.pagePropsObj.page !== this.totalPage) {
|
|
207
|
+
this.changePage(this.totalPage);
|
|
208
208
|
}
|
|
209
209
|
}
|
|
210
210
|
},
|
|
211
211
|
// 也供外部使用 -删除数据时，更正this.pagePropsObj.page
|
|
212
212
|
fixCurPage () {
|
|
213
|
-
if (this.pagePropsObj.page > this.
|
|
214
|
-
this.changePage(this.
|
|
213
|
+
if (this.pagePropsObj.page > this.totalPage) {
|
|
214
|
+
this.changePage(this.totalPage);
|
|
215
215
|
}
|
|
216
216
|
},
|
|
217
217
|
// 暂未供外部使用 -判断是否要转到下一页（在本页最后一条上插入一行时，要转到下一页）
|
package/src/index.js
CHANGED
|
@@ -63,7 +63,7 @@ import Error404 from "./components/Error/Error404.vue";
|
|
|
63
63
|
import DshCrossTable from "./components/list/DshBox/DshCrossTable.vue";
|
|
64
64
|
import DshFlatTable from "./components/list/DshFlatTable.vue";
|
|
65
65
|
// import DshCascaderTable from "./components/list/DshCascaderTable.vue";
|
|
66
|
-
|
|
66
|
+
import DshTreeTable from "./components/list/DshTreeTable.vue";
|
|
67
67
|
import BriCard from "./components/list/BriCard.vue";
|
|
68
68
|
import BriTree from "./components/list/BriTree.vue";
|
|
69
69
|
import BriTreeItem from "./components/list/BriTreeItem.vue";
|
|
@@ -198,7 +198,7 @@ export {
|
|
|
198
198
|
DshCrossTable,
|
|
199
199
|
DshFlatTable,
|
|
200
200
|
// DshCascaderTable,
|
|
201
|
-
|
|
201
|
+
DshTreeTable,
|
|
202
202
|
|
|
203
203
|
// form
|
|
204
204
|
DshForm,
|