bri-components 1.5.22 → 1.6.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.
Files changed (154) hide show
  1. package/README.md +83 -83
  2. package/lib/styles/bundle.css +12 -12
  3. package/lib/styles/font/fontello.svg +31 -31
  4. package/package.json +127 -125
  5. package/src/components/Error/Error403.vue +42 -42
  6. package/src/components/Error/Error404.vue +40 -40
  7. package/src/components/Error/Error500.vue +51 -51
  8. package/src/components/Error/error.less +162 -162
  9. package/src/components/Error/errorBack.vue +40 -40
  10. package/src/components/controls/DshControlInput.vue +195 -195
  11. package/src/components/controls/base/BriUpload/BriUpload.vue +435 -434
  12. package/src/components/controls/base/BriUpload/BriUploadImage.vue +430 -377
  13. package/src/components/controls/base/BriUpload/uploadList.vue +738 -727
  14. package/src/components/controls/base/BriUpload/uploadMixin.js +453 -446
  15. package/src/components/controls/base/DshCascader/DshCascader.vue +215 -215
  16. package/src/components/controls/base/DshCascader/components/cascaderModal.vue +366 -366
  17. package/src/components/controls/base/DshCascader/components/cascaderPicker.vue +416 -416
  18. package/src/components/controls/base/DshCascader/components/cascaderSimple.vue +141 -141
  19. package/src/components/controls/base/DshCascader/components/cascaderTree.vue +151 -151
  20. package/src/components/controls/base/DshCoordinates.vue +587 -585
  21. package/src/components/controls/base/DshDate/DshDate.vue +191 -191
  22. package/src/components/controls/base/DshDate/DshDaterange.vue +186 -186
  23. package/src/components/controls/base/DshDivider.vue +201 -201
  24. package/src/components/controls/base/DshEditor.vue +274 -274
  25. package/src/components/controls/base/DshInput/BriInputs.vue +166 -166
  26. package/src/components/controls/base/DshInput/DshInput.vue +260 -260
  27. package/src/components/controls/base/DshNumber/BriInputNumber/BriInputNumber.vue +435 -435
  28. package/src/components/controls/base/DshNumber/BriInputNumber/mixins/emitter.js +34 -34
  29. package/src/components/controls/base/DshNumber/BriInputNumber/mixins/form.js +14 -14
  30. package/src/components/controls/base/DshNumber/BriInputNumber/utils/assist.js +322 -322
  31. package/src/components/controls/base/DshNumber/DshNumber.vue +143 -143
  32. package/src/components/controls/base/DshNumber/DshNumberange.vue +109 -109
  33. package/src/components/controls/base/DshSelect/DshCheckbox.vue +168 -168
  34. package/src/components/controls/base/DshSelect/DshSelect.vue +180 -180
  35. package/src/components/controls/base/DshSelect/DshSelectAll.vue +269 -269
  36. package/src/components/controls/base/DshSwitch/DshSwitch.vue +115 -115
  37. package/src/components/controls/control.less +324 -324
  38. package/src/components/controls/controlMap.js +117 -117
  39. package/src/components/controls/extra/DshColor.vue +81 -81
  40. package/src/components/controls/extra/DshThemeColor.vue +100 -100
  41. package/src/components/controls/extra/DshThemeIcon.vue +122 -122
  42. package/src/components/controls/mixins/cascaderMixin.js +325 -325
  43. package/src/components/controls/mixins/cascaderPickerMixin.js +227 -227
  44. package/src/components/controls/mixins/cascaderTableMixin.js +130 -130
  45. package/src/components/controls/mixins/controlMixin.js +393 -393
  46. package/src/components/controls/mixins/dateMixin.js +149 -149
  47. package/src/components/controls/mixins/flatTableMixin.js +111 -111
  48. package/src/components/controls/mixins/numberMixin.js +112 -112
  49. package/src/components/controls/mixins/selectMixin.js +233 -233
  50. package/src/components/controls/mixins/switchMixin.js +87 -87
  51. package/src/components/controls/mixins/userAndDepartMixin.js +260 -260
  52. package/src/components/controls/senior/DshLabels.vue +333 -333
  53. package/src/components/controls/senior/DshPackage.vue +57 -57
  54. package/src/components/controls/senior/cascaderTable.vue +213 -213
  55. package/src/components/controls/senior/correlation.vue +135 -135
  56. package/src/components/controls/senior/flatTable.vue +138 -138
  57. package/src/components/controls/senior/selectDepartments.vue +397 -399
  58. package/src/components/controls/senior/selectUsers/departMenu.vue +296 -293
  59. package/src/components/controls/senior/selectUsers/selectUsers.vue +712 -712
  60. package/src/components/controls/special/DshBack.vue +42 -42
  61. package/src/components/controls/special/DshUndeveloped.vue +41 -41
  62. package/src/components/form/DshAdvSearch.vue +510 -510
  63. package/src/components/form/DshDefaultSearch.vue +260 -260
  64. package/src/components/form/DshForm.vue +494 -494
  65. package/src/components/form/searchMixin.js +376 -376
  66. package/src/components/list/BriCard.vue +95 -95
  67. package/src/components/list/BriTable.vue +205 -205
  68. package/src/components/list/BriTree.vue +529 -529
  69. package/src/components/list/BriTreeItem.vue +163 -163
  70. package/src/components/list/DshBox/DshBox.vue +219 -219
  71. package/src/components/list/DshBox/DshCard.vue +446 -446
  72. package/src/components/list/DshBox/DshCrossTable.vue +827 -827
  73. package/src/components/list/DshBox/DshList.vue +404 -404
  74. package/src/components/list/DshBox/DshPanel.vue +669 -669
  75. package/src/components/list/DshBox/DshSingleData.vue +119 -119
  76. package/src/components/list/DshBox/DshTable.vue +239 -239
  77. package/src/components/list/DshCascaderTable.vue +115 -115
  78. package/src/components/list/DshFlatTable.vue +334 -337
  79. package/src/components/list/DshPage.vue +194 -194
  80. package/src/components/list/DshTreeTable.vue +113 -113
  81. package/src/components/list/common/importModal.vue +243 -243
  82. package/src/components/list/common/quoteListModal.vue +206 -206
  83. package/src/components/list/mixins/DshCascaderTableMixin.js +278 -278
  84. package/src/components/list/mixins/DshFlatTableMixin.js +509 -509
  85. package/src/components/list/mixins/DshTreeTableMixin.js +286 -286
  86. package/src/components/list/mixins/tableBaseMixin.js +1653 -1653
  87. package/src/components/list/mixins/treeTableBaseMixin.js +145 -145
  88. package/src/components/other/BriAvatar.vue +166 -166
  89. package/src/components/other/BriCode.vue +125 -125
  90. package/src/components/other/BriCollapseTree.vue +207 -207
  91. package/src/components/other/BriGantt.vue +1087 -1087
  92. package/src/components/other/BriIframe.vue +116 -116
  93. package/src/components/other/BriLoading.vue +171 -171
  94. package/src/components/other/BriSvg.vue +27 -27
  95. package/src/components/other/DshColorPanel.vue +128 -128
  96. package/src/components/other/DshMenuNav.vue +188 -188
  97. package/src/components/other/DshVideoPlayer.vue +184 -0
  98. package/src/components/small/BriButton.vue +71 -71
  99. package/src/components/small/BriDrawer.vue +169 -169
  100. package/src/components/small/BriTooltip.vue +87 -87
  101. package/src/components/small/DshBtnModal.vue +68 -68
  102. package/src/components/small/DshButtons.vue +324 -324
  103. package/src/components/small/DshDropdown.vue +225 -225
  104. package/src/components/small/DshIcons.vue +59 -59
  105. package/src/components/small/DshListRender.js +21 -21
  106. package/src/components/small/DshModal.vue +160 -160
  107. package/src/components/small/DshSteps.vue +141 -141
  108. package/src/components/small/DshTabs.vue +598 -598
  109. package/src/components/small/DshTabsSet.vue +309 -309
  110. package/src/components/small/DshTags.vue +251 -251
  111. package/src/components/small/DshTitle.vue +50 -50
  112. package/src/components/small/render.js +20 -20
  113. package/src/components/unit/DshFormUnit.vue +398 -398
  114. package/src/components/unit/DshListUnit.vue +115 -115
  115. package/src/components/unit/unitMixin.js +86 -86
  116. package/src/data/index.js +4 -4
  117. package/src/index.js +287 -285
  118. package/src/styles/bundle.css +12 -12
  119. package/src/styles/components/BriButton.less +307 -307
  120. package/src/styles/components/BriTable.less +344 -344
  121. package/src/styles/components/DshModal.less +257 -257
  122. package/src/styles/components/index.less +3 -3
  123. package/src/styles/global/animate.less +11 -11
  124. package/src/styles/global/base.less +45 -45
  125. package/src/styles/global/box.less +186 -186
  126. package/src/styles/global/control.less +122 -122
  127. package/src/styles/global/flex.less +282 -282
  128. package/src/styles/global/global.less +8 -8
  129. package/src/styles/global/text.less +59 -59
  130. package/src/styles/global/variables.less +85 -85
  131. package/src/styles/iconfont/iconfont.css +254 -254
  132. package/src/styles/iconfont/iconfont.json +422 -422
  133. package/src/styles/iconfont/iconfont.svg +137 -137
  134. package/src/styles/index.less +26 -26
  135. package/src/styles/reset-easytable.less +21 -21
  136. package/src/styles/reset-iview-controls.less +145 -145
  137. package/src/styles/reset-iview-other.less +49 -49
  138. package/src/styles/reset-iview-variables.less +43 -43
  139. package/src/styles/reset.less +45 -45
  140. package/src/utils/index.js +3 -5
  141. package/lib/0.bri-components.min.js +0 -1
  142. package/lib/1.bri-components.min.js +0 -1
  143. package/lib/10.bri-components.min.js +0 -1
  144. package/lib/11.bri-components.min.js +0 -1
  145. package/lib/2.bri-components.min.js +0 -1
  146. package/lib/3.bri-components.min.js +0 -1
  147. package/lib/4.bri-components.min.js +0 -1
  148. package/lib/5.bri-components.min.js +0 -1
  149. package/lib/6.bri-components.min.js +0 -1
  150. package/lib/7.bri-components.min.js +0 -1
  151. package/lib/8.bri-components.min.js +0 -1
  152. package/lib/9.bri-components.min.js +0 -1
  153. package/lib/bri-components.min.js +0 -18
  154. package/src/utils/table.js +0 -175
@@ -1,145 +1,145 @@
1
- import { resourceData } from "bri-datas";
2
-
3
- export default {
4
- mixins: [],
5
- components: {},
6
- props: {
7
- treeColumns: {
8
- type: Array,
9
- default () {
10
- return [];
11
- }
12
- }
13
- },
14
- data () {
15
- return {
16
- searchMode: "flat", // "flat", "tree"
17
-
18
- baseOperationMap: {
19
- canCreateChild: {
20
- name: "添加下级",
21
- tip: "添加一行下级",
22
- type: "canCreateChild",
23
- btnType: "primaryText",
24
- icon: "md-add-circle",
25
- size: "small",
26
- disabled: false,
27
- event: "clickCreateChild"
28
- }
29
- // canDeleteChilds: {
30
- // name: "删除所有子级",
31
- // type: "canDeleteChilds",
32
- // btnType: "errorText",
33
- // icon: "ios-trash-outline",
34
- // size: "small",
35
- // disabled: false,
36
- // event: "clickDeleteChilds"
37
- // }
38
- }
39
- };
40
- },
41
- computed: {
42
- treeTableBasePropsObj () {
43
- return {
44
- // _treeForm: [],
45
- _maxLevel: 3 // 最大级数
46
- };
47
- },
48
- maxLevel () {
49
- return this.selfPropsObj._maxLevel || 3;
50
- },
51
- treeColKeys () {
52
- return this.treeColumns.map(colItem => colItem._key);
53
- },
54
-
55
- /* --- 列字段 --- */
56
- selfColumns () {
57
- return this.columns.map(column => {
58
- // 层级表格类型,level字段的进行特殊处理(treeForm加工成_data)
59
- return column._key === "level"
60
- ? {
61
- ...column,
62
- _data: this.treeColumns.map((treeFormItem, treeFormIndex) => ({
63
- name: treeFormItem._name,
64
- _key: (treeFormIndex + 1),
65
- color: Object.keys(resourceData.colorMap)[treeFormIndex + 1]
66
- }))
67
- }
68
- : column;
69
- });
70
- },
71
-
72
- selfAllOperationMap () {
73
- return {
74
- canCreateChild: {
75
- ...this.baseOperationMap.canCreateChild,
76
- name: this.showMode === "form"
77
- ? this.baseOperationMap.canCreateChild.name.replace("行", "条")
78
- : this.baseOperationMap.canCreateChild.name,
79
- tip: this.showMode === "form"
80
- ? this.baseOperationMap.canCreateChild.tip.replace("行", "条")
81
- : this.baseOperationMap.canCreateChild.tip
82
- }
83
- };
84
- }
85
- },
86
- created () { },
87
- methods: {
88
- // 自身的重置
89
- selfReset () {
90
- this.searchMode = "flat";
91
- },
92
-
93
- // 节点操作 -添加一行
94
- clickCreate (operationItem, row, rowIndex, col) {
95
- const list = row
96
- ? this.getParentRow(row, this.data).children
97
- : this.data;
98
- const newRow = this.getNewRowData(row ? row.level : 1, list);
99
- const newRowIndex = row
100
- ? list.findIndex(rowItem => rowItem._id === row._id) + 1
101
- : list.length;
102
- list.splice(newRowIndex, 0, newRow);
103
-
104
- this.change("createRow", newRow, newRowIndex, null);
105
- },
106
- // 节点操作 -添加子行
107
- clickCreateChild (operationItem, row, rowIndex, col) {
108
- const list = row.children;
109
- const newRow = this.getNewRowData(row.level + 1, list);
110
- const newRowIndex = list.length;
111
- list.splice(newRowIndex, 0, newRow);
112
-
113
- // 展开子级
114
- this.toggleExpand && this.toggleExpand(row, true);
115
-
116
- this.change("createChildRow", newRow, newRowIndex, null);
117
- },
118
- // 节点操作 -删除行
119
- clickDelete (operationItem, row, rowIndex, col) {
120
- this.$Modal.confirm({
121
- title: "警告",
122
- content: "确定删除该行及其所有下级吗?",
123
- onOk: () => {
124
- const parentRow = this.getParentRow(row, this.data);
125
- const index = parentRow.children.findIndex(childRowItem => childRowItem._id === row._id);
126
- parentRow.children.splice(index, 1);
127
-
128
- this.change("deleteRow", row, rowIndex, null);
129
- }
130
- });
131
- }
132
- // // 节点操作 -删除所有子行
133
- // clickDeleteChilds (operationItem, row, rowIndex, col) {
134
- // this.$Modal.confirm({
135
- // title: "警告",
136
- // content: "确定删除所有下级吗?",
137
- // onOk: () => {
138
- // row.children.splice(0);
139
-
140
- // this.change("deleteChildRows", row, rowIndex, null);
141
- // }
142
- // });
143
- // },
144
- }
145
- };
1
+ import { resourceData } from "bri-datas";
2
+
3
+ export default {
4
+ mixins: [],
5
+ components: {},
6
+ props: {
7
+ treeColumns: {
8
+ type: Array,
9
+ default () {
10
+ return [];
11
+ }
12
+ }
13
+ },
14
+ data () {
15
+ return {
16
+ searchMode: "flat", // "flat", "tree"
17
+
18
+ baseOperationMap: {
19
+ canCreateChild: {
20
+ name: "添加下级",
21
+ tip: "添加一行下级",
22
+ type: "canCreateChild",
23
+ btnType: "primaryText",
24
+ icon: "md-add-circle",
25
+ size: "small",
26
+ disabled: false,
27
+ event: "clickCreateChild"
28
+ }
29
+ // canDeleteChilds: {
30
+ // name: "删除所有子级",
31
+ // type: "canDeleteChilds",
32
+ // btnType: "errorText",
33
+ // icon: "ios-trash-outline",
34
+ // size: "small",
35
+ // disabled: false,
36
+ // event: "clickDeleteChilds"
37
+ // }
38
+ }
39
+ };
40
+ },
41
+ computed: {
42
+ treeTableBasePropsObj () {
43
+ return {
44
+ // _treeForm: [],
45
+ _maxLevel: 3 // 最大级数
46
+ };
47
+ },
48
+ maxLevel () {
49
+ return this.selfPropsObj._maxLevel || 3;
50
+ },
51
+ treeColKeys () {
52
+ return this.treeColumns.map(colItem => colItem._key);
53
+ },
54
+
55
+ /* --- 列字段 --- */
56
+ selfColumns () {
57
+ return this.columns.map(column => {
58
+ // 层级表格类型,level字段的进行特殊处理(treeForm加工成_data)
59
+ return column._key === "level"
60
+ ? {
61
+ ...column,
62
+ _data: this.treeColumns.map((treeFormItem, treeFormIndex) => ({
63
+ name: treeFormItem._name,
64
+ _key: (treeFormIndex + 1),
65
+ color: Object.keys(resourceData.colorMap)[treeFormIndex + 1]
66
+ }))
67
+ }
68
+ : column;
69
+ });
70
+ },
71
+
72
+ selfAllOperationMap () {
73
+ return {
74
+ canCreateChild: {
75
+ ...this.baseOperationMap.canCreateChild,
76
+ name: this.showMode === "form"
77
+ ? this.baseOperationMap.canCreateChild.name.replace("行", "条")
78
+ : this.baseOperationMap.canCreateChild.name,
79
+ tip: this.showMode === "form"
80
+ ? this.baseOperationMap.canCreateChild.tip.replace("行", "条")
81
+ : this.baseOperationMap.canCreateChild.tip
82
+ }
83
+ };
84
+ }
85
+ },
86
+ created () { },
87
+ methods: {
88
+ // 自身的重置
89
+ selfReset () {
90
+ this.searchMode = "flat";
91
+ },
92
+
93
+ // 节点操作 -添加一行
94
+ clickCreate (operationItem, row, rowIndex, col) {
95
+ const list = row
96
+ ? this.getParentRow(row, this.data).children
97
+ : this.data;
98
+ const newRow = this.getNewRowData(row ? row.level : 1, list);
99
+ const newRowIndex = row
100
+ ? list.findIndex(rowItem => rowItem._id === row._id) + 1
101
+ : list.length;
102
+ list.splice(newRowIndex, 0, newRow);
103
+
104
+ this.change("createRow", newRow, newRowIndex, null);
105
+ },
106
+ // 节点操作 -添加子行
107
+ clickCreateChild (operationItem, row, rowIndex, col) {
108
+ const list = row.children;
109
+ const newRow = this.getNewRowData(row.level + 1, list);
110
+ const newRowIndex = list.length;
111
+ list.splice(newRowIndex, 0, newRow);
112
+
113
+ // 展开子级
114
+ this.toggleExpand && this.toggleExpand(row, true);
115
+
116
+ this.change("createChildRow", newRow, newRowIndex, null);
117
+ },
118
+ // 节点操作 -删除行
119
+ clickDelete (operationItem, row, rowIndex, col) {
120
+ this.$Modal.confirm({
121
+ title: "警告",
122
+ content: "确定删除该行及其所有下级吗?",
123
+ onOk: () => {
124
+ const parentRow = this.getParentRow(row, this.data);
125
+ const index = parentRow.children.findIndex(childRowItem => childRowItem._id === row._id);
126
+ parentRow.children.splice(index, 1);
127
+
128
+ this.change("deleteRow", row, rowIndex, null);
129
+ }
130
+ });
131
+ }
132
+ // // 节点操作 -删除所有子行
133
+ // clickDeleteChilds (operationItem, row, rowIndex, col) {
134
+ // this.$Modal.confirm({
135
+ // title: "警告",
136
+ // content: "确定删除所有下级吗?",
137
+ // onOk: () => {
138
+ // row.children.splice(0);
139
+
140
+ // this.change("deleteChildRows", row, rowIndex, null);
141
+ // }
142
+ // });
143
+ // },
144
+ }
145
+ };
@@ -1,166 +1,166 @@
1
- <template>
2
- <div class="BriAvatar">
3
- <!-- 无显示 -->
4
- <template v-if="users.length == 0"></template>
5
-
6
- <!-- 图片堆叠显示 -->
7
- <div
8
- v-else-if="users.length > maxLength"
9
- :style="{ ...roundStyle }"
10
- >
11
- <span
12
- v-for="(user, index) in userList"
13
- :key="index"
14
- class="BriAvatar-img"
15
- >
16
- <img :src="user && user.avatarurl || avatarSrc">
17
- </span>
18
- <span :style="{'margin-left': (userList.length + 1) * 12 + 6 + 'px'}">
19
- {{ userList[userList.length - 1] && userList[userList.length - 1].realname || userList[userList.length - 1] && userList[userList.length - 1].name }}
20
- </span>
21
- </div>
22
-
23
- <!-- 单个显示 -->
24
- <template v-else>
25
- <div
26
- v-for="(user, index) in users"
27
- :key="index"
28
- class="BriAvatar-round"
29
- :style="{ ...roundStyle }"
30
- >
31
- <div class="BriAvatar-box">
32
- <div class="BriAvatar-img">
33
- <img :src="user && user.avatarurl || avatarSrc">
34
- </div>
35
- <span>
36
- {{ user ? user.realname || user.name : "" }}
37
- </span>
38
- </div>
39
- </div>
40
- </template>
41
- </div>
42
- </template>
43
-
44
- <script>
45
- export default {
46
- name: "BriAvatar",
47
- props: {
48
- rowData: {
49
- type: Object
50
- },
51
- field: {
52
- type: String
53
- },
54
- // 最多显示maxlength个,超出后头像重叠显示最后一个人的名字
55
- maxLength: {
56
- type: Number,
57
- default: 2
58
- },
59
- roundStyle: {
60
- type: Object,
61
- default: () => {
62
- return {};
63
- }
64
- }
65
- },
66
- data () {
67
- return {
68
- avatarSrc: this.$imageSrcMap.system.boy,
69
-
70
- users: []
71
- };
72
- },
73
- computed: {
74
- userList () {
75
- return this.users.slice(0, 4);
76
- }
77
- },
78
- watch: {
79
- rowData: {
80
- handler (newVal, oldVal) {
81
- this.init();
82
- },
83
- immediate: true
84
- }
85
- },
86
- created () {
87
- this.init();
88
- },
89
- methods: {
90
- init () {
91
- this.users = this.$dataType(this.rowData[this.field]) === "object"
92
- ? [this.rowData[this.field]]
93
- : (this.$dataType(this.rowData[this.field]) === "array"
94
- ? this.rowData[this.field]
95
- : []);
96
- }
97
- }
98
- };
99
- </script>
100
-
101
- <style lang="less" scoped>
102
- .BriAvatar {
103
- position: relative;
104
-
105
- span {
106
- display: inline-block;
107
- margin-left: 20px;
108
- line-height: 22px;
109
- }
110
-
111
- &-img {
112
- width: 22px;
113
- height: 22px;
114
- padding: 1px;
115
- display: inline-block;
116
- line-height: 20px;
117
- background: #fff;
118
- border-radius: 50%;
119
- img {
120
- width: 20px;
121
- height: 20px;
122
- display: inline-block;
123
- border-radius: 50%;
124
- }
125
- &:nth-child(1) {
126
- position: absolute;
127
- left: 0px;
128
- top: 50%;
129
- margin-top: -10px;
130
- }
131
- &:nth-child(2) {
132
- position: absolute;
133
- left: 12px;
134
- top: 50%;
135
- margin-top: -10px;
136
- }
137
- &:nth-child(3) {
138
- position: absolute;
139
- left: 24px;
140
- top: 50%;
141
- margin-top: -10px;
142
- }
143
- &:nth-child(4) {
144
- position: absolute;
145
- left: 36px;
146
- top: 50%;
147
- margin-top: -10px;
148
- }
149
- }
150
-
151
- &-round {
152
- display: inline-block;
153
- margin-right: 8px;
154
- }
155
-
156
- &-box {
157
- position: relative;
158
- img {
159
- width: 20px;
160
- height: 20px;
161
- display: inline-block;
162
- border-radius: 50%;
163
- }
164
- }
165
- }
166
- </style>
1
+ <template>
2
+ <div class="BriAvatar">
3
+ <!-- 无显示 -->
4
+ <template v-if="users.length == 0"></template>
5
+
6
+ <!-- 图片堆叠显示 -->
7
+ <div
8
+ v-else-if="users.length > maxLength"
9
+ :style="{ ...roundStyle }"
10
+ >
11
+ <span
12
+ v-for="(user, index) in userList"
13
+ :key="index"
14
+ class="BriAvatar-img"
15
+ >
16
+ <img :src="user && user.avatarurl || avatarSrc">
17
+ </span>
18
+ <span :style="{'margin-left': (userList.length + 1) * 12 + 6 + 'px'}">
19
+ {{ userList[userList.length - 1] && userList[userList.length - 1].realname || userList[userList.length - 1] && userList[userList.length - 1].name }}
20
+ </span>
21
+ </div>
22
+
23
+ <!-- 单个显示 -->
24
+ <template v-else>
25
+ <div
26
+ v-for="(user, index) in users"
27
+ :key="index"
28
+ class="BriAvatar-round"
29
+ :style="{ ...roundStyle }"
30
+ >
31
+ <div class="BriAvatar-box">
32
+ <div class="BriAvatar-img">
33
+ <img :src="user && user.avatarurl || avatarSrc">
34
+ </div>
35
+ <span>
36
+ {{ user ? user.realname || user.name : "" }}
37
+ </span>
38
+ </div>
39
+ </div>
40
+ </template>
41
+ </div>
42
+ </template>
43
+
44
+ <script>
45
+ export default {
46
+ name: "BriAvatar",
47
+ props: {
48
+ rowData: {
49
+ type: Object
50
+ },
51
+ field: {
52
+ type: String
53
+ },
54
+ // 最多显示maxlength个,超出后头像重叠显示最后一个人的名字
55
+ maxLength: {
56
+ type: Number,
57
+ default: 2
58
+ },
59
+ roundStyle: {
60
+ type: Object,
61
+ default: () => {
62
+ return {};
63
+ }
64
+ }
65
+ },
66
+ data () {
67
+ return {
68
+ avatarSrc: this.$imageSrcMap.system.boy,
69
+
70
+ users: []
71
+ };
72
+ },
73
+ computed: {
74
+ userList () {
75
+ return this.users.slice(0, 4);
76
+ }
77
+ },
78
+ watch: {
79
+ rowData: {
80
+ handler (newVal, oldVal) {
81
+ this.init();
82
+ },
83
+ immediate: true
84
+ }
85
+ },
86
+ created () {
87
+ this.init();
88
+ },
89
+ methods: {
90
+ init () {
91
+ this.users = this.$dataType(this.rowData[this.field]) === "object"
92
+ ? [this.rowData[this.field]]
93
+ : (this.$dataType(this.rowData[this.field]) === "array"
94
+ ? this.rowData[this.field]
95
+ : []);
96
+ }
97
+ }
98
+ };
99
+ </script>
100
+
101
+ <style lang="less" scoped>
102
+ .BriAvatar {
103
+ position: relative;
104
+
105
+ span {
106
+ display: inline-block;
107
+ margin-left: 20px;
108
+ line-height: 22px;
109
+ }
110
+
111
+ &-img {
112
+ width: 22px;
113
+ height: 22px;
114
+ padding: 1px;
115
+ display: inline-block;
116
+ line-height: 20px;
117
+ background: #fff;
118
+ border-radius: 50%;
119
+ img {
120
+ width: 20px;
121
+ height: 20px;
122
+ display: inline-block;
123
+ border-radius: 50%;
124
+ }
125
+ &:nth-child(1) {
126
+ position: absolute;
127
+ left: 0px;
128
+ top: 50%;
129
+ margin-top: -10px;
130
+ }
131
+ &:nth-child(2) {
132
+ position: absolute;
133
+ left: 12px;
134
+ top: 50%;
135
+ margin-top: -10px;
136
+ }
137
+ &:nth-child(3) {
138
+ position: absolute;
139
+ left: 24px;
140
+ top: 50%;
141
+ margin-top: -10px;
142
+ }
143
+ &:nth-child(4) {
144
+ position: absolute;
145
+ left: 36px;
146
+ top: 50%;
147
+ margin-top: -10px;
148
+ }
149
+ }
150
+
151
+ &-round {
152
+ display: inline-block;
153
+ margin-right: 8px;
154
+ }
155
+
156
+ &-box {
157
+ position: relative;
158
+ img {
159
+ width: 20px;
160
+ height: 20px;
161
+ display: inline-block;
162
+ border-radius: 50%;
163
+ }
164
+ }
165
+ }
166
+ </style>