bri-components 1.3.98 → 1.4.0

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bri-components",
3
- "version": "1.3.98",
3
+ "version": "1.4.0",
4
4
  "author": "dengshanghui",
5
5
  "description": "a component lib for vue project",
6
6
  "main": "src/index.js",
@@ -86,7 +86,9 @@
86
86
  :files="curValList"
87
87
  :propsObj="propsObj"
88
88
  :emptyShowVal="emptyShowVal"
89
+ :isShowEditIcon="isShowEditIcon"
89
90
  @deleteItem="clickDeteItem"
91
+ @editItemName="handleEditName"
90
92
  ></upload-list>
91
93
  </slot>
92
94
  </div>
@@ -153,6 +155,10 @@
153
155
  ...this.commonDealPropsObj
154
156
  };
155
157
  },
158
+ isShowEditIcon () {
159
+ // 因为编辑name 需要这三个参数,因此没有这三个参数时不显示此按钮
160
+ return this.compKey && this.appKey && this.modKey && !!(this.$getHttpPathMap({}).file && this.$getHttpPathMap({}).file.updateFileName);
161
+ },
156
162
  subType () {
157
163
  return this.selfPropsObj._fileType;
158
164
  },
@@ -193,6 +199,15 @@
193
199
  this.curValList.splice(fileIndex, 1);
194
200
  this.curValList = [...this.curValList];
195
201
  },
202
+ handleEditName (fileItem) {
203
+ this.$https({
204
+ url: {
205
+ ...this.computedUrlModule,
206
+ name: "updateFileName"
207
+ },
208
+ params: fileItem
209
+ });
210
+ },
196
211
  successCb (res, data) {
197
212
  if (data.res === 0) {
198
213
  if (this.multipleMode) {
@@ -21,46 +21,30 @@
21
21
  }"
22
22
  >
23
23
  <!-- 展示图 -->
24
- <template v-if="propsObj._fileType === 'image'">
25
- <div class="item-show">
26
- <img
27
- v-if="fileItem.mimetype.includes('image')"
28
- :data-original="fileItem.url"
29
- :src="$imageResize(fileItem.url, imageResizeConfig)"
30
- :alt="fileItem.name"
31
- >
32
- <img
33
- v-else
34
- :src="getFileImage(fileItem)"
35
- :alt="fileItem.name"
36
- >
37
- </div>
38
-
39
- <!-- 展示名称 -->
40
- <p class="item-name-title">{{ fileItem.name }}</p>
41
-
42
- <!-- 图标 -->
43
- <dsh-icons
44
- class="item-action"
45
- item-class="item-action-icon"
46
- :list="$getOperationList(getBtns(fileItem))"
47
- @click="$dispatchEvent($event, fileItem, fileIndex)"
48
- ></dsh-icons>
49
- </template>
50
-
51
- <template v-else>
52
- <a
53
- :href="fileItem.downloadUrl"
54
- target="black"
55
- >{{ fileItem.name }}</a>
56
-
57
- <dsh-icons
58
- class="item-file-action"
59
- item-class="item-file-action-icon"
60
- :list="$getOperationList(getBtns(fileItem))"
61
- @click="$dispatchEvent($event, fileItem, fileIndex)"
62
- ></dsh-icons>
63
- </template>
24
+ <div class="item-show">
25
+ <img
26
+ v-if="fileItem.mimetype.includes('image')"
27
+ :data-original="fileItem.url"
28
+ :src="$imageResize(fileItem.url, imageResizeConfig)"
29
+ :alt="fileItem.name"
30
+ >
31
+ <img
32
+ v-else
33
+ :src="getFileImage(fileItem)"
34
+ :alt="fileItem.name"
35
+ >
36
+ </div>
37
+
38
+ <!-- 展示名称 -->
39
+ <p class="item-name-title">{{ fileItem.name }}</p>
40
+
41
+ <!-- 图标 -->
42
+ <dsh-icons
43
+ class="item-action"
44
+ item-class="item-action-icon"
45
+ :list="$getOperationList(getBtns(fileItem))"
46
+ @click="$dispatchEvent($event, fileItem, fileIndex)"
47
+ ></dsh-icons>
64
48
  </div>
65
49
  </div>
66
50
 
@@ -74,6 +58,80 @@
74
58
  </div>
75
59
  </template>
76
60
 
61
+ <div
62
+ v-else-if="propsObj._fileType === 'file'"
63
+ ref="viewerImage"
64
+ >
65
+ <dsh-dropdown
66
+ v-if="files.length"
67
+ :list="files"
68
+ trigger="hover"
69
+ class="uploadList-fileList"
70
+ >
71
+ <div :class="{
72
+ 'uploadList-fileList-fileName': true,
73
+ 'uploadList-fileList-fileName-edit': canEdit
74
+ }">
75
+ {{ files.length }}个
76
+ <Icon v-if="canEdit" type="ios-arrow-down" />
77
+ </div>
78
+
79
+ <div
80
+ slot="dropdownItem"
81
+ slot-scope="{ dropdownItem, dropdownIndex }"
82
+ class="uploadList-fileList-fileItem"
83
+ >
84
+ <img
85
+ v-if="dropdownItem.mimetype.includes('image')"
86
+ :data-original="dropdownItem.url"
87
+ :src="$imageResize(dropdownItem.url, imageResizeConfig)"
88
+ :alt="dropdownItem.name"
89
+ class="fileItem-img"
90
+ >
91
+ <img
92
+ v-else
93
+ :src="getFileImage(dropdownItem)"
94
+ :alt="dropdownItem.name"
95
+ class="fileItem-img"
96
+ >
97
+ <p
98
+ class="fileItem-name-title"
99
+ >{{ dropdownItem.name }}</p>
100
+ <dsh-icons
101
+ class="fileItem-action"
102
+ item-class="fileItem-action-icon"
103
+ :list="$getOperationList(getBtns(dropdownItem))"
104
+ @click="$dispatchEvent($event, dropdownItem, dropdownIndex)"
105
+ ></dsh-icons>
106
+ </div>
107
+ </dsh-dropdown>
108
+
109
+ <span
110
+ v-else
111
+ class="uploadList-inline-nodata"
112
+ >
113
+ {{ noDataText }}
114
+ </span>
115
+
116
+ <div
117
+ v-for="(fileItem) in files"
118
+ :key="fileItem._key || fileItem._id"
119
+ :class="{
120
+ 'item': propsObj._fileType === 'image',
121
+ [`item-${propsObj._fileType}`]: true
122
+ }"
123
+ >
124
+
125
+ <img
126
+ v-if="fileItem.mimetype.includes('image')"
127
+ :data-original="fileItem.url"
128
+ :src="$imageResize(fileItem.url, imageResizeConfig)"
129
+ :alt="fileItem.name"
130
+ style="display: none;"
131
+ >
132
+ </div>
133
+ </div>
134
+
77
135
  <!-- 新展示方式 -->
78
136
  <template v-else>
79
137
  <!-- 有值 -->
@@ -146,6 +204,7 @@
146
204
  return {};
147
205
  }
148
206
  },
207
+ isShowEditIcon: Boolean,
149
208
  emptyShowVal: String
150
209
  },
151
210
  computed: {
@@ -163,33 +222,44 @@
163
222
  canDelete: {
164
223
  name: "删除",
165
224
  type: "canDelete",
166
- icon: "ios-trash-outline",
167
- size: "16",
225
+ customIcon: "bico-shanchu",
226
+ size: "14",
168
227
  event: "clickDeleteItem"
169
228
  },
229
+ canEdit: {
230
+ name: "编辑",
231
+ type: "canEdit",
232
+ customIcon: "bico-bianji",
233
+ size: "14",
234
+ event: "clickEdit"
235
+ },
170
236
  canDownload: {
171
237
  name: "下载",
172
238
  type: "canDownload",
173
- icon: "ios-cloud-download-outline",
239
+ customIcon: "bico-xiazai1",
174
240
  size: "14",
175
241
  event: "handleDownload"
176
242
  },
177
243
  canPreview: {
178
244
  name: "预览",
179
245
  type: "canPreview",
180
- icon: "ios-eye-outline",
181
- size: "22",
246
+ customIcon: "bico-yulan",
247
+ size: "16",
182
248
  event: "clickPreview"
183
249
  }
184
250
  };
185
251
  },
186
252
  operationMap () {
187
253
  return this.canEdit
188
- ? this.allOperationMap
254
+ ? this.$categoryMapToMap(
255
+ this.allOperationMap,
256
+ undefined,
257
+ this.isShowEditIcon ? [] : ["canEdit"]
258
+ )
189
259
  : this.$categoryMapToMap(
190
260
  this.allOperationMap,
191
261
  undefined,
192
- ["canDelete"]
262
+ ["canDelete", "canEdit"]
193
263
  );
194
264
  }
195
265
  },
@@ -223,7 +293,36 @@
223
293
  window.open(fileItem.url);
224
294
  }
225
295
  },
226
-
296
+ // 点击文件编辑
297
+ clickEdit (operationItem, fileItem) {
298
+ let lastIndex = fileItem.name.lastIndexOf(".");
299
+ let formate = fileItem.name.substring(lastIndex);
300
+
301
+ this.$Modal.info({
302
+ title: "修改名称",
303
+ render: (h) => {
304
+ return h("Input", {
305
+ props: {
306
+ value: fileItem.name.substring(0, lastIndex),
307
+ autofocus: true,
308
+ placeholder: "请输入名称"
309
+ },
310
+ scopedSlots: {
311
+ append: formate
312
+ },
313
+ on: {
314
+ input: (val) => {
315
+ fileItem.name = val + formate;
316
+ }
317
+ }
318
+ });
319
+ },
320
+ onOk: () => {
321
+ this.$emit("editItemName", fileItem);
322
+ },
323
+ onCancel: () => {}
324
+ });
325
+ },
227
326
  // 接口 -下载
228
327
  handleDownload (operationItem, fileItem, fileIndex) {
229
328
  axios
@@ -273,7 +372,7 @@
273
372
  getBtns (fileItem) {
274
373
  return ["image", "application/pdf", "text/plain"].some(type => fileItem.mimetype.includes(type))
275
374
  ? undefined
276
- : ["canDelete", "canDownload"];
375
+ : ["canDelete", "canEdit", "canDownload"];
277
376
  }
278
377
  }
279
378
  };
@@ -385,20 +484,33 @@
385
484
  align-items: center;
386
485
  border-radius: 0px;
387
486
  margin: 0px;
487
+ padding: 2px 0;
388
488
  background: transparent;
389
- line-height: 22px;
390
- height: 22px !important;
391
489
  &:hover {
392
490
  background: #f4f5fa;
393
491
  }
394
- a {
395
- text-overflow: ellipsis;
396
- overflow: hidden;
492
+ .item-show {
493
+ flex: 0 0 22px;
494
+ min-height: 20px;
495
+ img {
496
+ width: 22px;
497
+ height: 22px;
498
+ }
397
499
  }
398
- .DshIcons {
399
- margin-left: 5px;
500
+ .item-name-title {
400
501
  color: @textColor;
502
+ flex: 1;
503
+ text-align: left;
504
+ }
505
+ .item-action {
506
+ position: static;
507
+ display: flex !important;
508
+ background: transparent;
401
509
  white-space: nowrap;
510
+ &-icon {
511
+ color: @contentColor;
512
+ width: 16px;
513
+ }
402
514
  }
403
515
  }
404
516
  }
@@ -476,5 +588,54 @@
476
588
  color: @placeholderColor;
477
589
  }
478
590
  }
591
+
592
+ &-fileList {
593
+ width: 100%;
594
+ &-fileName {
595
+ width: 100%;
596
+ height: 100%;
597
+ cursor: pointer;
598
+ display: flex;
599
+ justify-content: space-between;
600
+ align-items: center;
601
+
602
+ &-edit {
603
+ padding: 0 8px;
604
+ }
605
+ }
606
+ }
607
+ }
608
+
609
+ .DshDropdown {
610
+ .uploadList-fileList-fileItem {
611
+ width: 100%;
612
+ display: flex;
613
+ justify-content: space-between;
614
+ align-items: center;
615
+ .fileItem {
616
+ &-img {
617
+ width: 22px;
618
+ height: 22px;
619
+ }
620
+ &-name-title {
621
+ white-space: nowrap;
622
+ overflow: hidden;
623
+ text-overflow: ellipsis;
624
+ margin: 0 8px;
625
+ flex: 1;
626
+ text-align: left;
627
+ }
628
+ &-action {
629
+ display: flex;
630
+ align-items: center;
631
+ justify-content: flex-end;
632
+ &-icon {
633
+ width: 16px;
634
+ color: @contentColor;
635
+ }
636
+ }
637
+ }
638
+
639
+ }
479
640
  }
480
641
  </style>
@@ -75,16 +75,16 @@ export default {
75
75
  // 值为不是[]类型用的
76
76
  curVal: {
77
77
  get () {
78
- // 原选项变动了或选项动态改变时,过滤掉已不存在的选项值
79
- if (!this.isInTable) {
80
- if (["select"].includes(this.controlType)) {
81
- if (!this.$dataType(this.propsObj._filterFunc, "function")) {
82
- this.value[this.controlKey] = this.listData.some(item => item[this.saveKey] === this.value[this.controlKey])
83
- ? this.value[this.controlKey]
84
- : "";
85
- }
86
- }
87
- }
78
+ // // 原选项变动了或选项动态改变时,过滤掉已不存在的选项值
79
+ // if (!this.isInTable) {
80
+ // if (["select"].includes(this.controlType)) {
81
+ // if (!this.$dataType(this.propsObj._filterFunc, "function")) {
82
+ // this.value[this.controlKey] = this.listData.some(item => item[this.saveKey] === this.value[this.controlKey])
83
+ // ? this.value[this.controlKey]
84
+ // : "";
85
+ // }
86
+ // }
87
+ // }
88
88
 
89
89
  return this.value[this.controlKey];
90
90
  },
@@ -101,25 +101,25 @@ export default {
101
101
  // 值为[]类型用的
102
102
  curValList: {
103
103
  get () {
104
- // 原选项变动了或选项动态改变时,过滤掉已不存在的选项值
105
- if (!this.isInTable) {
106
- const valList = this.value[this.controlKey] || [];
107
- if ((["select"].includes(this.controlType) && this.multipleMode) || ["checkbox"].includes(this.controlType)) {
108
- this.value[this.controlKey] = valList.some(valKey => !this.listDataKeys.includes(valKey))
109
- ? valList.filter(valKey => this.listDataKeys.includes(valKey))
110
- : valList;
111
- }
112
- // else if (["region", "cascader"].includes(this.controlType)) {
113
- // this.value[this.controlKey] = this.$getTreeLinealDatas(valList, this.cascaderAllData, undefined, this.saveKey).length
114
- // ? valList
115
- // : [];
116
- // }
117
- // else if (["regions", "cascaders"].includes(this.controlType)) {
118
- // this.value[this.controlKey] = valList.filter(valListItem =>
119
- // this.$getTreeLinealDatas(valListItem, this.cascaderAllData, undefined, this.saveKey).length
120
- // );
121
- // }
122
- }
104
+ // // 原选项变动了或选项动态改变时,过滤掉已不存在的选项值
105
+ // if (!this.isInTable) {
106
+ // const valList = this.value[this.controlKey] || [];
107
+ // if ((["select"].includes(this.controlType) && this.multipleMode) || ["checkbox"].includes(this.controlType)) {
108
+ // this.value[this.controlKey] = valList.some(valKey => !this.listDataKeys.includes(valKey))
109
+ // ? valList.filter(valKey => this.listDataKeys.includes(valKey))
110
+ // : valList;
111
+ // }
112
+ // // else if (["region", "cascader"].includes(this.controlType)) {
113
+ // // this.value[this.controlKey] = this.$getTreeLinealDatas(valList, this.cascaderAllData, undefined, this.saveKey).length
114
+ // // ? valList
115
+ // // : [];
116
+ // // }
117
+ // // else if (["regions", "cascaders"].includes(this.controlType)) {
118
+ // // this.value[this.controlKey] = valList.filter(valListItem =>
119
+ // // this.$getTreeLinealDatas(valListItem, this.cascaderAllData, undefined, this.saveKey).length
120
+ // // );
121
+ // // }
122
+ // }
123
123
 
124
124
  return this.value[this.controlKey] || [];
125
125
  },
@@ -21,13 +21,13 @@
21
21
  <dsh-cascader-table
22
22
  v-if="subType === 'old'"
23
23
  :canEdit="finalCanEdit"
24
+ :tableDataObj="curVal"
24
25
  :data="curVal.tree"
25
26
  :rowDefault="curVal.rowDefault"
26
27
  :columns="subForm"
27
28
  :propsObj="defaultPropsObj"
28
29
  :allFormList="allFormList"
29
30
  :parentObj="value"
30
- :tableDataObj="curVal"
31
31
  :treeColumns="treeForm"
32
32
  @change="change"
33
33
  ></dsh-cascader-table>
@@ -41,6 +41,7 @@
41
41
  <dsh-tree-table
42
42
  v-else
43
43
  :canEdit="finalCanEdit"
44
+ :tableDataObj="curVal"
44
45
  :data="curVal.tree"
45
46
  :rowDefault="curVal.rowDefault"
46
47
  :columns="subForm"
@@ -59,13 +60,13 @@
59
60
  v-if="subType === 'old'"
60
61
  ref="table"
61
62
  :canEdit="finalCanEdit"
63
+ :tableDataObj="curVal"
62
64
  :data="curVal.tree"
63
65
  :rowDefault="curVal.rowDefault"
64
66
  :columns="subForm"
65
67
  :propsObj="selfPropsObj"
66
68
  :allFormList="allFormList"
67
69
  :parentObj="value"
68
- :tableDataObj="curVal"
69
70
  :treeColumns="treeForm"
70
71
  @change="change"
71
72
  ></dsh-cascader-table>
@@ -80,6 +81,7 @@
80
81
  v-else
81
82
  ref="table"
82
83
  :canEdit="finalCanEdit"
84
+ :tableDataObj="curVal"
83
85
  :data="curVal.tree"
84
86
  :rowDefault="curVal.rowDefault"
85
87
  :columns="subForm"
@@ -19,6 +19,7 @@
19
19
  <dsh-btn-modal v-if="controlKey === '_default'">
20
20
  <dsh-flat-table
21
21
  :canEdit="finalCanEdit"
22
+ :tableDataObj="curVal"
22
23
  :data="curVal.list"
23
24
  :rowDefault="curVal.rowDefault"
24
25
  :columns="subForm"
@@ -34,6 +35,7 @@
34
35
  v-else
35
36
  ref="table"
36
37
  :canEdit="finalCanEdit"
38
+ :tableDataObj="curVal"
37
39
  :data="curVal.list"
38
40
  :compareData="curVal.oldList"
39
41
  :rowDefault="curVal.rowDefault"
@@ -39,6 +39,7 @@
39
39
  :type="getIcon(depart)"
40
40
  @click.stop="toggleChildren(depart)"
41
41
  />
42
+ <span v-else style="margin-right:1px"></span>
42
43
  <Icon
43
44
  v-if="useIcon"
44
45
  custom="bico-font bri-qiye bico-qiye"
@@ -58,7 +59,7 @@
58
59
 
59
60
  <template v-if="depart.isShowChildren">
60
61
  <depart-menu
61
- style="margin-left: 15px"
62
+ style="margin-left: 20px"
62
63
  :canEdit="canEdit"
63
64
  :list="depart.children"
64
65
  :parent="depart"
@@ -634,9 +634,6 @@
634
634
  changeSelect () {
635
635
  this.$emit("changeSelect", this.selectIds, this.selections);
636
636
  }
637
- // change (...params) {
638
- // this.$emit("change", ...params);
639
- // }
640
637
  },
641
638
  watch: {
642
639
  data (newVal, oldVal) {