bri-components 1.3.98 → 1.4.1

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.1",
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>
@@ -100,7 +102,7 @@
100
102
 
101
103
  const prefixCls = "ivu-upload";
102
104
  const imageType = ["jpg", "png", "gif", "jpeg", "tiff", "swf"];
103
- const documentType = ["txt", "doc", "xls", "ppt", "docx", "xlsx", "pptx", "pdf"];
105
+ const documentType = ["txt", "doc", "xls", "ppt", "docx", "xlsx", "pptx", "pdf", "xmind"];
104
106
  const videoType = ["flv", "rmvb", "mp4", "mvb"];
105
107
  const audioType = ["wma", "mp3", "m4a"];
106
108
  const packageType = ["rar", "zip"];
@@ -153,11 +155,15 @@
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
  },
159
165
  showMode () {
160
- return this.isInTable ? "inline" : this.selfPropsObj._showMode;
166
+ return this.isInTable ? this.selfPropsObj._inTableStyle == "list" && !this.finalCanEdit ? "tableList" : "inline" : this.selfPropsObj._showMode;
161
167
  },
162
168
  useType () {
163
169
  return this.selfPropsObj._useType;
@@ -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,134 @@
74
58
  </div>
75
59
  </template>
76
60
 
61
+ <!-- 在表格中展开 -->
62
+ <template v-else-if="showMode ==='tableList'">
63
+ <!-- 有值 -->
64
+ <div
65
+ v-if="files.length"
66
+ ref="viewerImage"
67
+ :class="['uploadList-list', `uploadList-list-${propsObj._fileType}`]"
68
+ >
69
+ <div
70
+ v-for="(fileItem, fileIndex) in files"
71
+ :key="fileItem._key || fileItem._id"
72
+ :class="{
73
+ 'item': propsObj._fileType === 'image',
74
+ [`item-${propsObj._fileType}`]: true
75
+ }"
76
+ >
77
+ <!-- 展示图 -->
78
+ <div class="item-show">
79
+ <img
80
+ v-if="fileItem.mimetype.includes('image')"
81
+ :data-original="fileItem.url"
82
+ :src="$imageResize(fileItem.url, imageResizeConfig)"
83
+ :alt="fileItem.name"
84
+ >
85
+ <img
86
+ v-else
87
+ :src="getFileImage(fileItem)"
88
+ :alt="fileItem.name"
89
+ >
90
+ </div>
91
+
92
+ <!-- 展示名称 -->
93
+ <p class="item-name-title">{{ fileItem.name }}</p>
94
+
95
+ <!-- 图标 -->
96
+ <dsh-icons
97
+ class="item-action"
98
+ item-class="item-action-icon"
99
+ :list="$getOperationList(getBtns(fileItem))"
100
+ @click="$dispatchEvent($event, fileItem, fileIndex)"
101
+ ></dsh-icons>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- 无值 -->
106
+ <div
107
+ v-else
108
+ class="uploadList-inline-nodata"
109
+ >
110
+ <span>{{ noDataText }}</span>
111
+ </div>
112
+ </template>
113
+
114
+ <div
115
+ v-else-if="propsObj._fileType === 'file'"
116
+ ref="viewerImage"
117
+ >
118
+ <dsh-dropdown
119
+ v-if="files.length"
120
+ :list="files"
121
+ trigger="hover"
122
+ class="uploadList-fileList"
123
+ >
124
+ <div :class="{
125
+ 'uploadList-fileList-fileName': true,
126
+ 'uploadList-fileList-fileName-edit': canEdit
127
+ }">
128
+ {{ files.length }}个
129
+ <Icon
130
+ v-if="canEdit"
131
+ type="ios-arrow-down"
132
+ />
133
+ </div>
134
+
135
+ <div
136
+ slot="dropdownItem"
137
+ slot-scope="{ dropdownItem, dropdownIndex }"
138
+ class="uploadList-fileList-fileItem"
139
+ >
140
+ <img
141
+ v-if="dropdownItem.mimetype.includes('image')"
142
+ :data-original="dropdownItem.url"
143
+ :src="$imageResize(dropdownItem.url, imageResizeConfig)"
144
+ :alt="dropdownItem.name"
145
+ class="fileItem-img"
146
+ >
147
+ <img
148
+ v-else
149
+ :src="getFileImage(dropdownItem)"
150
+ :alt="dropdownItem.name"
151
+ class="fileItem-img"
152
+ >
153
+ <p class="fileItem-name-title">{{ dropdownItem.name }}</p>
154
+ <dsh-icons
155
+ class="fileItem-action"
156
+ item-class="fileItem-action-icon"
157
+ :list="$getOperationList(getBtns(dropdownItem))"
158
+ @click="$dispatchEvent($event, dropdownItem, dropdownIndex)"
159
+ ></dsh-icons>
160
+ </div>
161
+ </dsh-dropdown>
162
+
163
+ <span
164
+ v-else
165
+ class="uploadList-inline-nodata"
166
+ >
167
+ {{ noDataText }}
168
+ </span>
169
+
170
+ <div
171
+ v-for="(fileItem) in files"
172
+ :key="fileItem._key || fileItem._id"
173
+ :class="{
174
+ 'item': propsObj._fileType === 'image',
175
+ [`item-${propsObj._fileType}`]: true
176
+ }"
177
+ >
178
+
179
+ <img
180
+ v-if="fileItem.mimetype.includes('image')"
181
+ :data-original="fileItem.url"
182
+ :src="$imageResize(fileItem.url, imageResizeConfig)"
183
+ :alt="fileItem.name"
184
+ style="display: none;"
185
+ >
186
+ </div>
187
+ </div>
188
+
77
189
  <!-- 新展示方式 -->
78
190
  <template v-else>
79
191
  <!-- 有值 -->
@@ -146,6 +258,7 @@
146
258
  return {};
147
259
  }
148
260
  },
261
+ isShowEditIcon: Boolean,
149
262
  emptyShowVal: String
150
263
  },
151
264
  computed: {
@@ -163,33 +276,44 @@
163
276
  canDelete: {
164
277
  name: "删除",
165
278
  type: "canDelete",
166
- icon: "ios-trash-outline",
167
- size: "16",
279
+ customIcon: "bico-shanchu",
280
+ size: "14",
168
281
  event: "clickDeleteItem"
169
282
  },
283
+ canEdit: {
284
+ name: "编辑",
285
+ type: "canEdit",
286
+ customIcon: "bico-bianji",
287
+ size: "14",
288
+ event: "clickEdit"
289
+ },
170
290
  canDownload: {
171
291
  name: "下载",
172
292
  type: "canDownload",
173
- icon: "ios-cloud-download-outline",
293
+ customIcon: "bico-xiazai1",
174
294
  size: "14",
175
295
  event: "handleDownload"
176
296
  },
177
297
  canPreview: {
178
298
  name: "预览",
179
299
  type: "canPreview",
180
- icon: "ios-eye-outline",
181
- size: "22",
300
+ customIcon: "bico-yulan",
301
+ size: "16",
182
302
  event: "clickPreview"
183
303
  }
184
304
  };
185
305
  },
186
306
  operationMap () {
187
307
  return this.canEdit
188
- ? this.allOperationMap
308
+ ? this.$categoryMapToMap(
309
+ this.allOperationMap,
310
+ undefined,
311
+ this.isShowEditIcon ? [] : ["canEdit"]
312
+ )
189
313
  : this.$categoryMapToMap(
190
314
  this.allOperationMap,
191
315
  undefined,
192
- ["canDelete"]
316
+ ["canDelete", "canEdit"]
193
317
  );
194
318
  }
195
319
  },
@@ -223,7 +347,36 @@
223
347
  window.open(fileItem.url);
224
348
  }
225
349
  },
226
-
350
+ // 点击文件编辑
351
+ clickEdit (operationItem, fileItem) {
352
+ let lastIndex = fileItem.name.lastIndexOf(".");
353
+ let formate = fileItem.name.substring(lastIndex);
354
+
355
+ this.$Modal.confirm({
356
+ title: "修改名称",
357
+ render: (h) => {
358
+ return h("Input", {
359
+ props: {
360
+ value: fileItem.name.substring(0, lastIndex),
361
+ autofocus: true,
362
+ placeholder: "请输入名称"
363
+ },
364
+ scopedSlots: {
365
+ append: formate
366
+ },
367
+ on: {
368
+ input: (val) => {
369
+ fileItem.name = val + formate;
370
+ }
371
+ }
372
+ });
373
+ },
374
+ onOk: () => {
375
+ this.$emit("editItemName", fileItem);
376
+ },
377
+ onCancel: () => {}
378
+ });
379
+ },
227
380
  // 接口 -下载
228
381
  handleDownload (operationItem, fileItem, fileIndex) {
229
382
  axios
@@ -273,7 +426,7 @@
273
426
  getBtns (fileItem) {
274
427
  return ["image", "application/pdf", "text/plain"].some(type => fileItem.mimetype.includes(type))
275
428
  ? undefined
276
- : ["canDelete", "canDownload"];
429
+ : ["canDelete", "canEdit", "canDownload"];
277
430
  }
278
431
  }
279
432
  };
@@ -385,20 +538,33 @@
385
538
  align-items: center;
386
539
  border-radius: 0px;
387
540
  margin: 0px;
541
+ padding: 2px 0;
388
542
  background: transparent;
389
- line-height: 22px;
390
- height: 22px !important;
391
543
  &:hover {
392
544
  background: #f4f5fa;
393
545
  }
394
- a {
395
- text-overflow: ellipsis;
396
- overflow: hidden;
546
+ .item-show {
547
+ flex: 0 0 22px;
548
+ min-height: 20px;
549
+ img {
550
+ width: 22px;
551
+ height: 22px;
552
+ }
397
553
  }
398
- .DshIcons {
399
- margin-left: 5px;
554
+ .item-name-title {
400
555
  color: @textColor;
556
+ flex: 1;
557
+ text-align: left;
558
+ }
559
+ .item-action {
560
+ position: static;
561
+ display: flex !important;
562
+ background: transparent;
401
563
  white-space: nowrap;
564
+ &-icon {
565
+ color: @contentColor;
566
+ width: 16px;
567
+ }
402
568
  }
403
569
  }
404
570
  }
@@ -476,5 +642,54 @@
476
642
  color: @placeholderColor;
477
643
  }
478
644
  }
645
+
646
+ &-fileList {
647
+ width: 100%;
648
+ &-fileName {
649
+ width: 100%;
650
+ height: 100%;
651
+ cursor: pointer;
652
+ display: flex;
653
+ justify-content: space-between;
654
+ align-items: center;
655
+
656
+ &-edit {
657
+ padding: 0 8px;
658
+ }
659
+ }
660
+ }
661
+ }
662
+
663
+ .DshDropdown {
664
+ .uploadList-fileList-fileItem {
665
+ width: 100%;
666
+ display: flex;
667
+ justify-content: space-between;
668
+ align-items: center;
669
+ .fileItem {
670
+ &-img {
671
+ width: 22px;
672
+ height: 22px;
673
+ }
674
+ &-name-title {
675
+ white-space: nowrap;
676
+ overflow: hidden;
677
+ text-overflow: ellipsis;
678
+ margin: 0 8px;
679
+ flex: 1;
680
+ text-align: left;
681
+ }
682
+ &-action {
683
+ display: flex;
684
+ align-items: center;
685
+ justify-content: flex-end;
686
+ &-icon {
687
+ width: 16px;
688
+ color: @contentColor;
689
+ }
690
+ }
691
+ }
692
+
693
+ }
479
694
  }
480
695
  </style>
@@ -14,7 +14,7 @@
14
14
  'DshCheckbox-flat-color': useColor,
15
15
  'DshCheckbox-flat-scroll': isHeightAuto
16
16
  ? isUnitUpdate
17
- ? listData.length > 6
17
+ ? listData.length > 3
18
18
  : false
19
19
  : true
20
20
  }"
@@ -14,7 +14,7 @@
14
14
  'DshSelect-flat-color': useColor,
15
15
  'DshSelect-flat-scroll': isHeightAuto
16
16
  ? isUnitUpdate
17
- ? listData.length > 4
17
+ ? listData.length > 3
18
18
  : false
19
19
  : true
20
20
  }"
@@ -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
  },
@@ -52,7 +52,7 @@ export default {
52
52
  return this.selfPropsObj._reverseFilter;
53
53
  },
54
54
  selectFilterVals () {
55
- return this.selfPropsObj._selectFilterVals;
55
+ return this.selfPropsObj._selectFilterVals || []; // 老版级联表格层级属性那用到单选,缺这些属性,会产生undefined,有问题
56
56
  },
57
57
  selectFilterKey () {
58
58
  return this.selfPropsObj._selectFilterKey;
@@ -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"
@@ -336,7 +336,7 @@
336
336
  _displayType: "show",
337
337
  canEdit: !["createdAt", "updatedAt", "_creaters"].includes(formData._key)
338
338
  }).forEach(arr => {
339
- if (!this.ignoreProperties.includes(arr[0])) {
339
+ if (!this.ignoreProperties.includes(arr[0]) && arr[1] !== undefined) {
340
340
  this.$set(formItem, arr[0], arr[1]);
341
341
  }
342
342
  });