bri-components 1.3.22 → 1.3.24

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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/components/controls/senior/cascaderTable.vue +92 -36
  3. package/src/components/list/BriTable.vue +0 -2
  4. package/src/components/list/DshCascaderTable.vue +4 -4
  5. package/src/components/list/DshFlatTable.vue +5 -274
  6. package/src/components/list/DshTreeTable.vue +207 -0
  7. package/src/components/list/mixins/DshFlatTableMixin.js +11 -11
  8. package/src/components/list/mixins/tableMixin.js +273 -0
  9. package/src/index.js +2 -0
  10. package/src/styles/components/list/BriTable.less +10 -2
  11. package/src/styles/global/text.less +10 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bri-components",
3
- "version": "1.3.22",
3
+ "version": "1.3.24",
4
4
  "author": "dengshanghui",
5
5
  "description": "a component lib for vue project",
6
6
  "main": "src/index.js",
package/src/components/controls/senior/cascaderTable.vue CHANGED
@@ -16,14 +16,27 @@
16
16
  <template v-else>
17
17
  <!-- 配置端 设置默认值用-->
18
18
  <dsh-btn-modal v-if="propsObj._key === '_default'">
19
- <dsh-cascader-table
20
- :canEdit="finalCanEdit"
21
- :treeColumns="treeColumns"
22
- :subColumns="subColumns"
23
- :data="curVal"
24
- :propsObj="propsObj"
25
- @change="change"
26
- ></dsh-cascader-table>
19
+ <template>
20
+ <dsh-tree-table
21
+ v-if="showMode === 'treeTable'"
22
+ :canEdit="finalCanEdit"
23
+ :columns="subForm"
24
+ :data="curVal.tree"
25
+ :rowDefault="curVal.rowDefault"
26
+ :parentObj="value"
27
+ :propsObj="propsObj"
28
+ @change="change"
29
+ ></dsh-tree-table>
30
+ <dsh-cascader-table
31
+ v-else
32
+ :canEdit="finalCanEdit"
33
+ :treeColumns="treeColumns"
34
+ :subColumns="subForm"
35
+ :data="curVal"
36
+ :propsObj="propsObj"
37
+ @change="change"
38
+ ></dsh-cascader-table>
39
+ </template>
27
40
  </dsh-btn-modal>
28
41
 
29
42
  <!-- 正常使用 -->
@@ -36,32 +49,59 @@
36
49
  @click="$dispatchEvent($event)"
37
50
  ></dsh-buttons>
38
51
 
39
- <dsh-cascader-table
40
- ref="dshCascaderTable"
41
- useCol
42
- :canEdit="finalCanEdit"
43
- :treeColumns="treeColumns"
44
- :subColumns="subColumns"
45
- :data="curVal"
46
- :propsObj="propsObj"
47
- @change="change"
48
- ></dsh-cascader-table>
49
-
50
- <!-- 全屏查看 -->
51
- <dsh-modal
52
- v-model="isEnlarge"
53
- mode="custom"
54
- :propsObj="modalPropsObj"
55
- >
52
+ <template>
53
+ <dsh-tree-table
54
+ v-if="showMode === 'treeTable'"
55
+ ref="table"
56
+ :canEdit="finalCanEdit"
57
+ :columns="subForm"
58
+ :data="curVal.tree"
59
+ :rowDefault="curVal.rowDefault"
60
+ :parentObj="value"
61
+ :propsObj="propsObj"
62
+ @change="change"
63
+ ></dsh-tree-table>
56
64
  <dsh-cascader-table
65
+ v-else
66
+ ref="table"
57
67
  useCol
58
68
  :canEdit="finalCanEdit"
59
69
  :treeColumns="treeColumns"
60
- :subColumns="subColumns"
70
+ :subColumns="subForm"
61
71
  :data="curVal"
62
72
  :propsObj="propsObj"
63
73
  @change="change"
64
74
  ></dsh-cascader-table>
75
+ </template>
76
+
77
+ <!-- 全屏查看 -->
78
+ <dsh-modal
79
+ v-model="isEnlarge"
80
+ mode="custom"
81
+ :propsObj="modalPropsObj"
82
+ >
83
+ <template>
84
+ <dsh-tree-table
85
+ v-if="showMode === 'treeTable'"
86
+ :canEdit="finalCanEdit"
87
+ :columns="subForm"
88
+ :data="curVal.tree"
89
+ :rowDefault="curVal.rowDefault"
90
+ :parentObj="value"
91
+ :propsObj="propsObj"
92
+ @change="change"
93
+ ></dsh-tree-table>
94
+ <dsh-cascader-table
95
+ v-else
96
+ useCol
97
+ :canEdit="finalCanEdit"
98
+ :treeColumns="treeColumns"
99
+ :subColumns="subForm"
100
+ :data="curVal"
101
+ :propsObj="propsObj"
102
+ @change="change"
103
+ ></dsh-cascader-table>
104
+ </template>
65
105
  </dsh-modal>
66
106
  </template>
67
107
  </template>
@@ -70,8 +110,9 @@
70
110
 
71
111
  <script>
72
112
  import controlMixin from "../mixins/controlMixin.js";
73
- import DshBtnModal from "../../small/DshBtnModal.vue";
74
113
  import DshCascaderTable from "../../list/DshCascaderTable.vue";
114
+ import DshTreeTable from "../../list/DshTreeTable.vue";
115
+ import DshBtnModal from "../../small/DshBtnModal.vue";
75
116
 
76
117
  export default {
77
118
  name: "cascaderTable",
@@ -79,8 +120,9 @@
79
120
  controlMixin
80
121
  ],
81
122
  components: {
82
- DshBtnModal,
83
- DshCascaderTable
123
+ DshCascaderTable,
124
+ DshTreeTable,
125
+ DshBtnModal
84
126
  },
85
127
  props: {},
86
128
  data () {
@@ -109,16 +151,30 @@
109
151
  };
110
152
  },
111
153
  computed: {
154
+ selfPropsObj () {
155
+ return {
156
+ _showMode: "default", // "default", "treeTable"
157
+ _subForm: [],
158
+ _treeForm: [],
159
+ _isExport: false,
160
+ ...this.propsObj
161
+ };
162
+ },
163
+ showMode () {
164
+ return this.propsObj._showMode;
165
+ },
166
+ subForm () {
167
+ return this.propsObj._subForm;
168
+ },
169
+ treeForm () {
170
+ return this.propsObj._treeForm;
171
+ },
112
172
  // 用户态的每条数据的表头配置，都是存的自己的，不用通用配置_treeForm的
113
173
  treeColumns () {
114
174
  return this.curVal && this.curVal._treeForm
115
175
  ? this.curVal._treeForm
116
- : this.propsObj._treeForm;
117
- },
118
- subColumns () {
119
- return this.propsObj._subForm;
176
+ : this.treeForm;
120
177
  },
121
-
122
178
  operationBtns () {
123
179
  return this.propsObj._isExport
124
180
  ? ["canExport", "canEnlarge"]
@@ -126,7 +182,7 @@
126
182
  },
127
183
  modalPropsObj () {
128
184
  return {
129
- title: this.propsObj._name,
185
+ title: this.controlName,
130
186
  fullscreen: true,
131
187
  showSlotClose: false,
132
188
  closable: true
@@ -141,7 +197,7 @@
141
197
  methods: {
142
198
  // 校验方法 -供外部使用
143
199
  validate () {
144
- return this.$refs.dshCascaderTable.validate();
200
+ return this.$refs.table.validate();
145
201
  },
146
202
 
147
203
  // 点击导出
package/src/components/list/BriTable.vue CHANGED
@@ -102,14 +102,12 @@
102
102
  }
103
103
  return className;
104
104
  },
105
-
106
105
  rowStyleOption () {
107
106
  return {
108
107
  clickHighlight: false,
109
108
  ...(this.propsObj.rowStyleOption || {})
110
109
  };
111
110
  },
112
-
113
111
  cellStyleOption () {
114
112
  return {
115
113
  headerCellClass: () => {
package/src/components/list/DshCascaderTable.vue CHANGED
@@ -167,10 +167,10 @@
167
167
  ></dsh-list-unit>
168
168
 
169
169
  <span
170
- v-if="!getRuleResult(col, row[col.nodeKey], rowIndex).bool"
170
+ v-if="!getColRuleResult(col, row[col.nodeKey], rowIndex).bool"
171
171
  class="bri-table-td-tip"
172
172
  >
173
- {{ getRuleResult(col, row[col.nodeKey], rowIndex).message }}
173
+ {{ getColRuleResult(col, row[col.nodeKey], rowIndex).message }}
174
174
  </span>
175
175
  </td>
176
176
  </template>
@@ -447,7 +447,7 @@
447
447
 
448
448
  const subColumns = this.columns.filter(col => col.colType === "data");
449
449
  return this.rows.every((row, rowIndex) =>
450
- subColumns.every(col => this.getRuleResult(col, row[col.nodeKey], rowIndex, true).bool)
450
+ subColumns.every(col => this.getColRuleResult(col, row[col.nodeKey], rowIndex, true).bool)
451
451
  );
452
452
  },
453
453
 
@@ -572,7 +572,7 @@
572
572
  this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
573
573
  },
574
574
  // 是否显示 单元格校验提示文字
575
- getRuleResult (col, row, rowIndex, showRuleMessage = this.showRuleMessage) {
575
+ getColRuleResult (col, row, rowIndex, showRuleMessage = this.showRuleMessage) {
576
576
  if ((this.ruleRecordMap[`${row._id}dsh${col._key}`] || {}).showRuleMessage || showRuleMessage) {
577
577
  return this.$getFieldRuleResult({
578
578
  ...col,
package/src/components/list/DshFlatTable.vue CHANGED
@@ -21,12 +21,14 @@
21
21
 
22
22
  <script>
23
23
  import DshFlatTableMixin from "./mixins/DshFlatTableMixin.js";
24
+ import tableMixin from "./mixins/tableMixin.js";
24
25
  import DshListUnit from "../unit/DshListUnit.vue";
25
26
 
26
27
  export default {
27
28
  name: "DshFlatTable",
28
29
  mixins: [
29
- DshFlatTableMixin
30
+ DshFlatTableMixin,
31
+ tableMixin
30
32
  ],
31
33
  components: {
32
34
  DshListUnit
@@ -35,280 +37,9 @@
35
37
  data () {
36
38
  return {};
37
39
  },
38
- computed: {
39
- footerData () {
40
- if (this.useSummary && this.listData.length) {
41
- return [
42
- this.filterColumns.reduce((obj, col) => {
43
- return {
44
- ...obj,
45
- [col._key]: col._type === "number"
46
- ? this.$calNumList(this.listData.map(item => item[col._key]), col._summaryType, { ...col, _defaultDigit: 2 })
47
- : obj[col._key]
48
- };
49
- }, {
50
- _id: this.$ObjectID().str,
51
- custome: "汇总"
52
- })
53
- ];
54
- } else {
55
- return [];
56
- }
57
- },
58
-
59
- tablePropsObj () {
60
- return {
61
- maxHeight: this.contentHeight,
62
- cellStyleOption: {
63
- bodyCellClass: ({rowIndex}) => {
64
- return `bri-table-td ${this.canEdit ? "bri-table-td-edit" : "bri-table-td-show"}`;
65
- }
66
- }
67
- };
68
- },
69
- selfPropsObj () {
70
- return {
71
- ...this.commonPropsObj
72
- };
73
- },
74
- showRequired () {
75
- return this.selfPropsObj._showRequired;
76
- },
77
- showDescription () {
78
- return this.selfPropsObj._showDescription;
79
- },
80
- headHeightAuto () {
81
- return this.selfPropsObj._headHeightAuto;
82
- },
83
- heightAuto () {
84
- return this.selfPropsObj._heightAuto;
85
- },
86
-
87
- showColumns () {
88
- const operationList = this.$getOperationList(["canDelete"]);
89
-
90
- return [
91
- ...(
92
- this.useSelection === true
93
- ? [
94
- {
95
- field: "selection",
96
- key: "selection",
97
- type: "checkbox",
98
- width: 66,
99
- align: "center",
100
- fixed: "left"
101
- }
102
- ]
103
- : []
104
- ),
105
-
106
- ...(
107
- this.useIndex === true
108
- ? [
109
- {
110
- title: "序号",
111
- field: "custome",
112
- key: "customes",
113
- width: 76,
114
- align: "center",
115
- fixed: "left",
116
- renderBodyCell: ({ rowIndex }) => ++rowIndex
117
- }
118
- ]
119
- : []
120
- ),
121
-
122
- ...this.$transformToColumns(
123
- this.filterColumns.map(colItem => ({
124
- filter: undefined,
125
- sortBy: undefined,
126
- renderBodyCell: ({ row, column, rowIndex }, h) => {
127
- column = this.$transformFieldProperty(column, row, this.parentObj);
128
- column = this.resetCol(column, row);
129
- const unitCanEdit = this.getUnitCanEdit(column, row);
130
-
131
- return [
132
- this.isShowCompare(column, row, this.oldListData[rowIndex])
133
- ? h("Tooltip", {
134
- style: {
135
- width: "100%"
136
- },
137
- props: {
138
- content: this.$isEmptyData(this.oldListData[rowIndex][column._key])
139
- ? ""
140
- : this.oldListData[rowIndex][column._key],
141
- transfer: true,
142
- maxWidth: 200,
143
- placement: "top"
144
- },
145
- scopedSlots: {
146
- default: props => h("dsh-list-unit", {
147
- props: {
148
- canEdit: unitCanEdit,
149
- formData: row,
150
- formItem: column,
151
- rowIndex: rowIndex,
152
- allFormList: this.columns,
153
- parentListData: this.listData
154
- },
155
- on: {
156
- blur: () => this.controlBlur(null, column, row, arguments),
157
- change: () => this.$dispatchEvent(this.operationMap.changeVal, column, row, rowIndex, arguments)
158
- }
159
- })
160
- }
161
- })
162
- : h("dsh-list-unit", {
163
- props: {
164
- canEdit: unitCanEdit,
165
- formData: row,
166
- formItem: column,
167
- rowIndex: rowIndex,
168
- allFormList: this.columns,
169
- parentListData: this.listData
170
- },
171
- on: {
172
- blur: () => this.controlBlur(null, column, row, arguments),
173
- change: () => this.$dispatchEvent(this.operationMap.changeVal, column, row, rowIndex, arguments)
174
- }
175
- }),
176
-
177
- !this.getRuleResult(column, row).bool
178
- ? h("span", {
179
- class: "bri-table-td-tip"
180
- }, this.getRuleResult(column, row).message)
181
- : undefined
182
- ];
183
- },
184
- renderHeaderCell: ({ column }, h) => {
185
- column = this.$transformFieldProperty(column, undefined, this.parentObj);
186
-
187
- return this.$getHeadRender(h, column, {
188
- showRequired: this.showRequired,
189
- showDescription: this.showDescription,
190
- headHeightAuto: this.headHeightAuto
191
- });
192
- },
193
- ...colItem
194
- }))
195
- ),
196
-
197
- ...(
198
- this.canEdit && operationList.length
199
- ? [
200
- {
201
- title: "操作",
202
- field: "operation",
203
- key: "operation",
204
- align: "center",
205
- fixed: "right",
206
- width: 100,
207
- renderBodyCell: (params, h) => {
208
- return h("dsh-buttons", {
209
- props: {
210
- list: operationList.map(btnItem => ({
211
- ...btnItem,
212
- disabled: this.disabledOldDataRow && !params.row.__isCreate__
213
- }))
214
- },
215
- on: {
216
- click: (operationItem) => {
217
- this.$dispatchEvent(operationItem, params.row, params.rowIndex, this.listData);
218
- }
219
- }
220
- });
221
- }
222
- }
223
- ]
224
- : []
225
- )
226
- ];
227
- },
228
-
229
- allOperationMap () {
230
- return {
231
- canCreate: {
232
- name: "添加一行",
233
- type: "canCreate",
234
- size: "default",
235
- long: true,
236
- disabled: !!this.disabledCreateBtn,
237
- event: "clickCreate",
238
- btnType: "default"
239
- },
240
- canDelete: {
241
- name: "删除",
242
- type: "canDelete",
243
- btnType: "errorText",
244
- icon: "ios-trash-outline",
245
- size: "small",
246
- disabled: false,
247
- event: "clickDelete"
248
- },
249
- // expand: {
250
- // name: "展开",
251
- // type: "expand",
252
- // event: "clickExpand"
253
- // },
254
- changeVal: {
255
- name: "改变输入框值",
256
- type: "changeVal",
257
- event: "changeVal"
258
- }
259
- };
260
- }
261
- },
40
+ computed: {},
262
41
  created () {},
263
- methods: {
264
- // 点击 -添加行
265
- clickCreate (operationItem, row, index, list) {
266
- const newRow = {
267
- ...this.$deepCopy(this.selfRowDefault),
268
- __isCreate__: true,
269
- _id: this.$ObjectID().str
270
- };
271
- const newRowIndex = index == null ? list.length : index + 1;
272
- list.splice(newRowIndex, 0, newRow);
273
- this.$forceUpdate(); // 自定义页中点击添加一行没有更新页面
274
-
275
- this.change("createRow", null, newRow, newRowIndex);
276
- },
277
- changeSelect (list) {
278
- this.$emit("changeSelect", list);
279
- },
280
- // 表单控件值改变
281
- changeVal (operationItem, col, row, rowIndex, params) {
282
- this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
283
- this.change("changeVal", col, row, rowIndex, ...params);
284
- },
285
- // 表单控件失去焦点
286
- controlBlur (operationItem, col, row, params) {
287
- this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
288
- },
289
-
290
- resetCol (col, row) {
291
- let resetMap = {
292
- select: {
293
- _optionKind: "dropdown"
294
- },
295
- checkbox: {
296
- _optionKind: "dropdown"
297
- }
298
- };
299
- return {
300
- ...col,
301
- ...(resetMap[col._type] || {}),
302
- // isShare: this.isShare,
303
- _heightAuto: this.heightAuto
304
- };
305
- },
306
- getUnitCanEdit (col, row) {
307
- return this.getRowCanEdit(row) &&
308
- this.getColCanEdit(col, row) &&
309
- this.$isAdvRelyShow(col, row, this.parentObj, true);
310
- }
311
- }
42
+ methods: {}
312
43
  };
313
44
  </script>
314
45
 
package/src/components/list/DshTreeTable.vue ADDED
@@ -0,0 +1,207 @@
1
+ <template>
2
+ <div class="DshTreeTable">
3
+ <bri-table
4
+ class="DshTreeTable-main"
5
+ :columns="showColumns"
6
+ :data="listData"
7
+ :footer-data="footerData"
8
+ :propsObj="tablePropsObj"
9
+ @changeSelect="changeSelect"
10
+ @selectAll="changeSelect"
11
+ ></bri-table>
12
+ </div>
13
+ </template>
14
+
15
+ <script>
16
+ import DshFlatTableMixin from "./mixins/DshFlatTableMixin.js";
17
+ import tableMixin from "./mixins/tableMixin.js";
18
+ import DshListUnit from "../unit/DshListUnit.vue";
19
+
20
+ export default {
21
+ name: "DshTreeTable",
22
+ mixins: [
23
+ DshFlatTableMixin,
24
+ tableMixin
25
+ ],
26
+ components: {
27
+ DshListUnit
28
+ },
29
+ props: {},
30
+ data () {
31
+ return {};
32
+ },
33
+ computed: {
34
+ listData () {
35
+ return this.$getTreeFlatArr(this.data, "__isExpand__");
36
+ },
37
+
38
+ selfPropsObj () {
39
+ return {
40
+ ...this.commonPropsObj,
41
+
42
+ _maxLevel: this.commonPropsObj._maxLevel || 3
43
+ };
44
+ },
45
+ maxLevel () {
46
+ return this.selfPropsObj._maxLevel;
47
+ },
48
+ tablePropsObj () {
49
+ return {
50
+ maxHeight: this.contentHeight,
51
+ // rowStyleOption: {
52
+ // hoverHighlight: true,
53
+ // clickHighlight: true,
54
+ // stripe: true // 斑马纹
55
+ // },
56
+ cellStyleOption: {
57
+ bodyCellClass: ({ row, column, rowIndex }) => {
58
+ return "bri-table-td" +
59
+ `${this.canEdit ? " bri-table-td-edit" : " bri-table-td-show"}` +
60
+ `${["__isExpand__"].includes(column.field) ? " bri-table-td-normal" : ["custome"].includes(column.field) ? " bri-table-td-custome" : ""}`;
61
+ // `${row.__isShow__ === false ? "dsh-hide" : ""}`;
62
+ }
63
+ },
64
+ // 通过实例方法 hideColumnsByKeys(keys)将列隐藏，通过实例方法 showColumnsByKeys(keys)将隐藏的列显示
65
+ columnHiddenOption: {
66
+ defaultHiddenColumnKeys: []
67
+ }
68
+ };
69
+ },
70
+ showColumns () {
71
+ return [
72
+ ...(this.useSelection === true ? [this.selectColumn] : []),
73
+ this.expandColumn,
74
+ ...(this.useIndex === true ? [this.customeColumn] : []),
75
+ ...this.$transformToColumns(this.contentColumns),
76
+ ...(this.$getOperationList(["canDelete"]).length ? [this.operationColumn] : [])
77
+ ];
78
+ },
79
+ expandColumn () {
80
+ return {
81
+ // title: "开／合",
82
+ field: "__isExpand__",
83
+ key: "__isExpand__",
84
+ width: 46,
85
+ align: "center",
86
+ fixed: "left",
87
+ renderBodyCell: ({ row, column, rowIndex }, h) => {
88
+ return row.children && row.children.length
89
+ ? h("Icon", {
90
+ style: {
91
+ width: "14px",
92
+ height: "14px",
93
+ cursor: "pointer",
94
+ transform: row.__isExpand__ ? "rotate(90deg)" : "rotate(0deg)",
95
+ transition: "transform 0.4s"
96
+ },
97
+ props: {
98
+ // type: row.__isExpand__ ? "ios-arrow-down" : "ios-arrow-forward",
99
+ type: "ios-arrow-forward",
100
+ size: "14"
101
+ },
102
+ on: {
103
+ click: () => {
104
+ this.toggleExpand(row, !row.__isExpand__);
105
+ }
106
+ }
107
+ })
108
+ : h("span", "");
109
+ }
110
+ };
111
+ },
112
+ customeColumn () {
113
+ return {
114
+ title: "序号",
115
+ field: "custome",
116
+ key: "custome",
117
+ width: 28 + 16 + (this.maxLevel - 1) * 36,
118
+ align: "left",
119
+ fixed: "left",
120
+ renderBodyCell: ({ row, column, rowIndex }, h) => {
121
+ return [
122
+ h("div", {
123
+ style: {
124
+ paddingLeft: `${(row.level - 1) * 16}px`,
125
+ fontWeight: "500"
126
+ }
127
+ }, row.__treeIndex__),
128
+
129
+ // 添加符
130
+ row.level < this.maxLevel
131
+ ? h("div", {
132
+ style: {
133
+ position: "absolute",
134
+ bottom: "0px",
135
+ right: "0px",
136
+ display: "inline-block",
137
+ width: "16px",
138
+ height: " 16px",
139
+ border: "1px solid #dcdee2",
140
+ backgroundColor: "#ffffff",
141
+ lineHeight: "12px",
142
+ cursor: "pointer",
143
+ verticalAlign: "middle",
144
+ transition: "color .2s ease-in-out,border-color .2s ease-in-out"
145
+ }
146
+ }, [
147
+ h("Icon", {
148
+ style: {
149
+ fontWeight: "500"
150
+ },
151
+ props: {
152
+ type: "ios-add", // "md-add-circle"
153
+ size: "14"
154
+ },
155
+ on: {
156
+ click: () => {
157
+ // 新增行里的输入框，第一次输入会失去光标的bug，需要$set
158
+ const rowDefault = this.$deepCopy(this.rowDefault);
159
+ this.columns.forEach(column => {
160
+ // 用$set也可以
161
+ rowDefault[column._key] = rowDefault[column._key];
162
+ });
163
+
164
+ row.children.push({
165
+ _id: this.$ObjectID().str,
166
+ level: row.level + 1,
167
+ children: [],
168
+ ...rowDefault
169
+ });
170
+
171
+ this.toggleExpand(row, true);
172
+ }
173
+ }
174
+ })
175
+ ])
176
+ : h("span", "")
177
+ ];
178
+ }
179
+ };
180
+ }
181
+ },
182
+ created () {},
183
+ methods: {
184
+ toggleExpand (row, bool = true) {
185
+ this.$set(row, "__isRendered__", true);
186
+ this.$set(row, "__isExpand__", bool);
187
+
188
+ row.children.forEach(subRow => {
189
+ // this.$set(subRow, "__isShow__", bool);
190
+ });
191
+ }
192
+ }
193
+ };
194
+ </script>
195
+
196
+ <style lang="less" scoped>
197
+ .DshTreeTable {
198
+ &-main {
199
+ width: 100%;
200
+ height: auto;
201
+ }
202
+
203
+ &-create {
204
+ margin-top: 8px;
205
+ }
206
+ }
207
+ </style>
package/src/components/list/mixins/DshFlatTableMixin.js CHANGED
@@ -80,7 +80,7 @@ export default {
80
80
  _heightAuto: false, // 单元格高度自适应
81
81
  _useSelection: false, // 使用选择列
82
82
  _useIndex: true, // 使用序号列
83
- _useSummary: false, // 使用汇总行
83
+ _useSummary: true, // 使用汇总行
84
84
  _disabledBtns: false, // 禁用增删按钮
85
85
  _disabledCreateBtn: false, // 置灰新增按钮，目前只内部使用，comp_web数据表配置页那块
86
86
  _disabledOldDataRow: false, // 置灰老数据行包含删除
@@ -115,7 +115,7 @@ export default {
115
115
  },
116
116
 
117
117
  filterColumns () {
118
- return this.columns.filter(column => this.$isAdvRelyShow(column, undefined, this.parentObj, true));
118
+ return this.columns.filter(col => this.$isAdvRelyShow(col, this.listData, this.parentObj, true));
119
119
  },
120
120
  selfRowDefault () {
121
121
  return this.$filterObj(this.filterColumns, this.rowDefault);
@@ -137,15 +137,15 @@ export default {
137
137
  validate () {
138
138
  this.showRuleMessage = true;
139
139
 
140
- return this.listData.every(row =>
141
- this.filterColumns.every(column => {
142
- column = this.$transformFieldProperty(column, row, this.parentObj);
143
- return this.getRuleResult(column, row).bool;
144
- })
145
- );
146
- },
147
- // 是否显示 单元格校验提示文字
148
- getRuleResult (col, row) {
140
+ return this.listData.every(row => this.getRowRuleResult(row));
141
+ },
142
+ // 整行校验结果
143
+ getRowRuleResult (row) {
144
+ return this.filterColumns.every(column => this.getColRuleResult(column, row).bool);
145
+ },
146
+ // 单元格校验结果
147
+ getColRuleResult (col, row) {
148
+ col = this.$transformFieldProperty(col, row, this.parentObj);
149
149
  if ((this.ruleRecordMap[`${row._id}dsh${col._key}`] || {}).showRuleMessage || this.showRuleMessage) {
150
150
  return this.$getFieldRuleResult(col, row);
151
151
  } else {
package/src/components/list/mixins/tableMixin.js ADDED
@@ -0,0 +1,273 @@
1
+ export default {
2
+ mixins: [],
3
+ components: {},
4
+ props: {},
5
+ data () {
6
+ return {};
7
+ },
8
+ computed: {
9
+ footerData () {
10
+ if (this.useSummary && this.listData.length) {
11
+ return [
12
+ this.filterColumns.reduce((obj, col) => {
13
+ return {
14
+ ...obj,
15
+ [col._key]: col._type === "number"
16
+ ? this.$calNumList(this.listData.map(item => item[col._key]), col._summaryType, { ...col, _defaultDigit: 2 })
17
+ : (obj[col._key] || "--")
18
+ };
19
+ }, {
20
+ _id: this.$ObjectID().str,
21
+ custome: "汇总",
22
+ __isExpand__: "-",
23
+ operation: "——"
24
+ })
25
+ ];
26
+ } else {
27
+ return [];
28
+ }
29
+ },
30
+
31
+ tablePropsObj () {
32
+ return {
33
+ maxHeight: this.contentHeight,
34
+ cellStyleOption: {
35
+ bodyCellClass: ({ row, column, rowIndex }) => {
36
+ return `bri-table-td ${this.canEdit ? "bri-table-td-edit" : "bri-table-td-show"}`;
37
+ }
38
+ }
39
+ };
40
+ },
41
+ selfPropsObj () {
42
+ return {
43
+ ...this.commonPropsObj
44
+ };
45
+ },
46
+ showRequired () {
47
+ return this.selfPropsObj._showRequired;
48
+ },
49
+ showDescription () {
50
+ return this.selfPropsObj._showDescription;
51
+ },
52
+ headHeightAuto () {
53
+ return this.selfPropsObj._headHeightAuto;
54
+ },
55
+ heightAuto () {
56
+ return this.selfPropsObj._heightAuto;
57
+ },
58
+
59
+ showColumns () {
60
+ return [
61
+ ...(this.useSelection === true ? [this.selectColumn] : []),
62
+ ...(this.useIndex === true ? [this.customeColumn] : []),
63
+ ...this.$transformToColumns(this.contentColumns),
64
+ ...(this.$getOperationList(["canDelete"]).length ? [this.operationColumn] : [])
65
+ ];
66
+ },
67
+ selectColumn () {
68
+ return {
69
+ field: "selection",
70
+ key: "selection",
71
+ type: "checkbox",
72
+ width: 66,
73
+ align: "center",
74
+ fixed: "left"
75
+ };
76
+ },
77
+ customeColumn () {
78
+ return {
79
+ title: "序号",
80
+ field: "custome",
81
+ key: "customes",
82
+ width: 76,
83
+ align: "center",
84
+ fixed: "left",
85
+ renderBodyCell: ({ row, column, rowIndex }) => ++rowIndex
86
+ };
87
+ },
88
+ operationColumn () {
89
+ return {
90
+ title: "操作",
91
+ field: "operation",
92
+ key: "operation",
93
+ align: "center",
94
+ fixed: "right",
95
+ width: 100,
96
+ renderBodyCell: ({ row, column, rowIndex }, h) => {
97
+ const operationList = this.$getOperationList(["canDelete"]);
98
+
99
+ return h("dsh-buttons", {
100
+ props: {
101
+ list: operationList.map(btnItem => ({
102
+ ...btnItem,
103
+ disabled: this.disabledOldDataRow && !row.__isCreate__
104
+ }))
105
+ },
106
+ on: {
107
+ click: (operationItem) => {
108
+ this.$dispatchEvent(operationItem, row, rowIndex, this.listData);
109
+ }
110
+ }
111
+ });
112
+ }
113
+ };
114
+ },
115
+ contentColumns () {
116
+ return this.filterColumns.map(colItem => ({
117
+ filter: undefined,
118
+ sortBy: undefined,
119
+ renderBodyCell: ({ row, column, rowIndex }, h) => {
120
+ column = this.$transformFieldProperty(column, row, this.parentObj);
121
+ column = this.resetCol(column, row);
122
+ const unitCanEdit = this.getUnitCanEdit(column, row);
123
+
124
+ return [
125
+ this.isShowCompare(column, row, this.oldListData[rowIndex])
126
+ ? h("Tooltip", {
127
+ style: {
128
+ width: "100%"
129
+ },
130
+ props: {
131
+ content: this.$isEmptyData(this.oldListData[rowIndex][column._key])
132
+ ? ""
133
+ : this.oldListData[rowIndex][column._key],
134
+ transfer: true,
135
+ maxWidth: 200,
136
+ placement: "top"
137
+ },
138
+ scopedSlots: {
139
+ default: props => h("dsh-list-unit", {
140
+ props: {
141
+ canEdit: unitCanEdit,
142
+ formData: row,
143
+ formItem: column,
144
+ rowIndex: rowIndex,
145
+ allFormList: this.columns,
146
+ parentListData: this.listData
147
+ },
148
+ on: {
149
+ blur: () => this.controlBlur(null, column, row, arguments),
150
+ change: () => this.$dispatchEvent(this.operationMap.changeVal, column, row, rowIndex, arguments)
151
+ }
152
+ })
153
+ }
154
+ })
155
+ : h("dsh-list-unit", {
156
+ props: {
157
+ canEdit: unitCanEdit,
158
+ formData: row,
159
+ formItem: column,
160
+ rowIndex: rowIndex,
161
+ allFormList: this.columns,
162
+ parentListData: this.listData
163
+ },
164
+ on: {
165
+ blur: () => this.controlBlur(null, column, row, arguments),
166
+ change: () => this.$dispatchEvent(this.operationMap.changeVal, column, row, rowIndex, arguments)
167
+ }
168
+ }),
169
+
170
+ !this.getColRuleResult(column, row).bool
171
+ ? h("span", {
172
+ class: "bri-table-td-tip"
173
+ }, this.getColRuleResult(column, row).message)
174
+ : undefined
175
+ ];
176
+ },
177
+ renderHeaderCell: ({ column }, h) => {
178
+ column = this.$transformFieldProperty(column, undefined, this.parentObj);
179
+
180
+ return this.$getHeadRender(h, column, {
181
+ showRequired: this.showRequired,
182
+ showDescription: this.showDescription,
183
+ headHeightAuto: this.headHeightAuto
184
+ });
185
+ },
186
+ ...colItem
187
+ }));
188
+ },
189
+
190
+ allOperationMap () {
191
+ return {
192
+ canCreate: {
193
+ name: "添加一行",
194
+ type: "canCreate",
195
+ size: "default",
196
+ long: true,
197
+ disabled: !!this.disabledCreateBtn,
198
+ event: "clickCreate",
199
+ btnType: "default"
200
+ },
201
+ canDelete: {
202
+ name: "删除",
203
+ type: "canDelete",
204
+ btnType: "errorText",
205
+ icon: "ios-trash-outline",
206
+ size: "small",
207
+ disabled: false,
208
+ event: "clickDelete"
209
+ },
210
+ // expand: {
211
+ // name: "展开",
212
+ // type: "expand",
213
+ // event: "clickExpand"
214
+ // },
215
+ changeVal: {
216
+ name: "改变输入框值",
217
+ type: "changeVal",
218
+ event: "changeVal"
219
+ }
220
+ };
221
+ }
222
+ },
223
+ created () { },
224
+ methods: {
225
+ // 点击 -添加行
226
+ clickCreate (operationItem, row, index, list) {
227
+ const newRow = {
228
+ ...this.$deepCopy(this.selfRowDefault),
229
+ __isCreate__: true,
230
+ _id: this.$ObjectID().str
231
+ };
232
+ const newRowIndex = index == null ? list.length : index + 1;
233
+ list.splice(newRowIndex, 0, newRow);
234
+ this.$forceUpdate(); // 自定义页中点击添加一行没有更新页面
235
+
236
+ this.change("createRow", null, newRow, newRowIndex);
237
+ },
238
+ changeSelect (list) {
239
+ this.$emit("changeSelect", list);
240
+ },
241
+ // 表单控件值改变
242
+ changeVal (operationItem, col, row, rowIndex, params) {
243
+ this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
244
+ this.change("changeVal", col, row, rowIndex, ...params);
245
+ },
246
+ // 表单控件失去焦点
247
+ controlBlur (operationItem, col, row, params) {
248
+ this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
249
+ },
250
+
251
+ resetCol (col, row) {
252
+ let resetMap = {
253
+ select: {
254
+ _optionKind: "dropdown"
255
+ },
256
+ checkbox: {
257
+ _optionKind: "dropdown"
258
+ }
259
+ };
260
+ return {
261
+ ...col,
262
+ ...(resetMap[col._type] || {}),
263
+ // isShare: this.isShare,
264
+ _heightAuto: this.heightAuto
265
+ };
266
+ },
267
+ getUnitCanEdit (col, row) {
268
+ return this.getRowCanEdit(row) &&
269
+ this.getColCanEdit(col, row) &&
270
+ this.$isAdvRelyShow(col, row, this.parentObj, true);
271
+ }
272
+ }
273
+ };
package/src/index.js CHANGED
@@ -16,6 +16,7 @@ import DshTable from "./components/list/DshBox/DshTable.vue";
16
16
  import DshPage from "./components/list/DshPage.vue";
17
17
  import DshCrossTable from "./components/list/DshBox/DshCrossTable.vue";
18
18
  // import DshCascaderTable from "./components/list/DshCascaderTable.vue";
19
+ // import DshTreeTable from "./components/list/DshTreeTable.vue";
19
20
 
20
21
  // form
21
22
  import DshForm from "./components/form/DshForm.vue";
@@ -230,6 +231,7 @@ export {
230
231
 
231
232
  DshFlatTable,
232
233
  // DshCascaderTable,
234
+ // DshTreeTable,
233
235
 
234
236
  BriCard,
235
237
  BriTree,
package/src/styles/components/list/BriTable.less CHANGED
@@ -63,7 +63,7 @@
63
63
  }
64
64
 
65
65
  // tbody.ve-table-body tr.ve-table-body-tr td.ve-table-body-td {
66
- // padding: 4px 20px;
66
+ // padding: 4px 12px;
67
67
  // }
68
68
  }
69
69
  }
@@ -120,7 +120,7 @@
120
120
  line-height: 1;
121
121
  color: #ed4014;
122
122
  position: absolute;
123
- top: calc(100% -15px);
123
+ top: calc(100% - 13px);
124
124
  left: 0px;
125
125
  }
126
126
 
@@ -146,6 +146,14 @@
146
146
  }
147
147
  &-show {
148
148
  padding: 4px 20px!important;
149
+ // padding: 4px 12px!important;
150
+ }
151
+ &-normal {
152
+ padding: 4px 8px!important;
153
+ // padding: 4px 12px!important;
154
+ }
155
+ &-custome {
156
+ padding: 4px 16px 4px 12px!important;
149
157
  }
150
158
  }
151
159
  }
package/src/styles/global/text.less CHANGED
@@ -1,11 +1,3 @@
1
- .dsh-title {
2
- padding: 10px;
3
- text-align: center;
4
- font-size: 16px;
5
- font-weight: 600;
6
- color: @textColor;
7
- }
8
-
9
1
  #dsh-nodata {
10
2
  width: 100%;
11
3
  margin: auto;
@@ -34,6 +26,16 @@
34
26
  color: @placeholderColor;
35
27
  }
36
28
 
29
+ .dsh-title {
30
+ padding: 10px;
31
+ text-align: center;
32
+ font-size: 16px;
33
+ font-weight: 600;
34
+ color: @textColor;
35
+ }
36
+ .dsh-hide {
37
+ display: none!important;
38
+ }
37
39
  .dsh-subtip {
38
40
  width: 100%;
39
41
  text-align: center;