sh-view 2.0.7 → 2.0.8

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 (4) hide show
  1. package/package.json +1 -1
  2. package/packages/vxeTable/css/index.scss +24 -0
  3. package/packages/vxeTable/render/cell/vxe-render-input.vue +22 -6
  4. package/packages/vxeTable/render/mixin/cell-mixin.js +206 -195
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sh-view",
3
- "version": "2.0.7",
3
+ "version": "2.0.8",
4
4
  "description": "基于vxe-table二次封装",
5
5
  "main": "packages/index.js",
6
6
  "scripts": {
package/packages/vxeTable/css/index.scss CHANGED
@@ -245,6 +245,30 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
245
245
  &.td-render{}
246
246
  .prefix, .suffix{
247
247
  white-space: nowrap;
248
+ display: inline-flex;
249
+ align-items: center;
250
+ }
251
+ .control-btn{
252
+ display: inline-flex;
253
+ justify-content: center;
254
+ align-items: center;
255
+ background-color: var(--vxe-table-header-background-color);
256
+ min-width: 30px;
257
+ cursor: pointer;
258
+ user-select: none;
259
+ font-size: 20px;
260
+ border: 1px solid var(--vxe-input-border-color);
261
+ border-radius: var(--vxe-border-radius);
262
+ &.before{
263
+ border-right: none;
264
+ border-top-right-radius: 0;
265
+ border-bottom-right-radius: 0;
266
+ }
267
+ &.after{
268
+ border-left: none;
269
+ border-top-left-radius: 0;
270
+ border-bottom-left-radius: 0;
271
+ }
248
272
  }
249
273
  .vxe-render--inner-img{
250
274
  display: inline-block;
package/packages/vxeTable/render/cell/vxe-render-input.vue CHANGED
@@ -2,18 +2,16 @@
2
2
  <span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
3
3
  <template v-if="redit || isEditAll">
4
4
  <span v-if="rprops.prefixText && rform" class="prefix">
5
- <sh-button v-if="rprops.prefixType.toLowerCase() === 'button'" :disabled="rprops.disabled" :size="rsize" status="primary" @click="vxeInputPrefixClick">{{
6
- rprops.prefixText
7
- }}</sh-button>
5
+ <vxe-button v-if="prefixButton" v-bind="psButtonConfig" @click="vxeInputPrefixClick">{{ rprops.prefixText }}</vxe-button>
8
6
  <span v-else @click="vxeInputPrefixClick">{{ rprops.prefixText }}</span>
9
7
  </span>
8
+ <span v-else-if="controlButton" class="control-btn before" @click="vxeControlClick(false)">-</span>
10
9
  <vxe-input v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeInputChange" @blur="vxeBlurCallback" @clear="vxeBlurCallback"></vxe-input>
11
10
  <span v-if="rprops.suffixText && rform" class="suffix">
12
- <sh-button v-if="rprops.suffixType.toLowerCase() === 'button'" :disabled="rprops.disabled" :size="rsize" status="primary" @click="vxeInputSuffixClick">{{
13
- rprops.suffixText
14
- }}</sh-button>
11
+ <vxe-button v-if="suffixButton" v-bind="psButtonConfig" @click="vxeInputSuffixClick">{{ rprops.suffixText }}</vxe-button>
15
12
  <span v-else @click="vxeInputSuffixClick">{{ rprops.suffixText }}</span>
16
13
  </span>
14
+ <span v-else-if="controlButton" class="control-btn after" @click="vxeControlClick(true)">+</span>
17
15
  <span style="display: none" v-html="renderText"></span>
18
16
  </template>
19
17
  <template v-else>
@@ -29,6 +27,24 @@ import mixin from '../mixin/cell-mixin'
29
27
  export default {
30
28
  name: 'VxeRenderInput',
31
29
  mixins: [mixin],
30
+ computed: {
31
+ controlButton() {
32
+ return this.rprops.control && ['number', 'float', 'integer'].includes(this.rprops.type)
33
+ },
34
+ psButtonConfig() {
35
+ return {
36
+ disabled: this.rprops.disabled,
37
+ size: this.rsize,
38
+ status: 'theme'
39
+ }
40
+ },
41
+ prefixButton() {
42
+ return this.rprops.prefixType.toLowerCase() === 'button'
43
+ },
44
+ suffixButton() {
45
+ return this.rprops.suffixType.toLowerCase() === 'button'
46
+ }
47
+ },
32
48
  methods: {
33
49
  // 输入框前缀点击事件
34
50
  vxeInputPrefixClick() {
package/packages/vxeTable/render/mixin/cell-mixin.js CHANGED
@@ -1,195 +1,206 @@
1
- export default {
2
- props: {
3
- redit: { type: Boolean },
4
- rkey: { type: String },
5
- rname: { type: String },
6
- rdata: {
7
- type: Object,
8
- default() {
9
- return {}
10
- }
11
- },
12
- rprops: {
13
- type: Object,
14
- default() {
15
- return {}
16
- }
17
- },
18
- rparams: {
19
- type: Object,
20
- default() {
21
- return {}
22
- }
23
- }
24
- },
25
- data() {
26
- return {
27
- renderValue: null
28
- }
29
- },
30
- computed: {
31
- rsize() {
32
- return this.rprops.size || this.rparams.$table?.props?.size || this.rparams.$form?.props?.size
33
- },
34
- rform() {
35
- return this.rparams.$form
36
- },
37
- reditmode() {
38
- return this.rparams.$table?.props?.editConfig?.mode
39
- },
40
- isEditAll() {
41
- return !this.rform && this.reditmode === 'all'
42
- },
43
- moneyUnitText() {
44
- let moneyUnitConstants = [
45
- { value: 1, label: '元' },
46
- { value: 1000, label: '千元' },
47
- { value: 10000, label: '万元' }
48
- ]
49
- let moneyConstant = moneyUnitConstants.find(item => item.value === this.rprops.moneyUnit)
50
- return moneyConstant && moneyConstant.label
51
- },
52
- billGroups() {
53
- let { billStart = '分', billEnd = '亿' } = this.rprops
54
- let cnGroups = [
55
- { shortText: '兆', fullText: '兆', value: '' },
56
- { shortText: '千', fullText: '千亿', value: '' },
57
- { shortText: '百', fullText: '百亿', value: '' },
58
- { shortText: '十', fullText: '十亿', value: '' },
59
- { shortText: '亿', fullText: '亿', value: '' },
60
- { shortText: '千', fullText: '千万', value: '' },
61
- { shortText: '百', fullText: '百万', value: '' },
62
- { shortText: '十', fullText: '十万', value: '' },
63
- { shortText: '万', fullText: '万', value: '' },
64
- { shortText: '千', fullText: '千', value: '' },
65
- { shortText: '百', fullText: '百', value: '' },
66
- { shortText: '十', fullText: '十', value: '' },
67
- { shortText: '元', fullText: '元', value: '' },
68
- { shortText: '角', fullText: '角', value: '' },
69
- { shortText: '分', fullText: '分', value: '' },
70
- { shortText: '毫', fullText: '毫', value: '' },
71
- { shortText: '厘', fullText: '厘', value: '' }
72
- ]
73
- let startIndex = cnGroups.findIndex(cn => cn.fullText === billEnd)
74
- let endIndex = cnGroups.findIndex(cn => cn.fullText === billStart)
75
- return cnGroups.slice(startIndex, endIndex)
76
- },
77
- getBillClass() {
78
- return bil => {
79
- return {
80
- basic: bil.fullText === '元',
81
- commafy: ['千', '百万', '十亿', '兆'].includes(bil.fullText)
82
- }
83
- }
84
- },
85
- renderText() {
86
- let keyValue = this.$vUtils.get(this.rdata, this.rkey)
87
- let { rtext } = this.formatValueFun(keyValue)
88
- return rtext
89
- }
90
- },
91
- methods: {
92
- // 输入框变化
93
- async vxeInputChange({ value, $event }) {
94
- if (!this.rform) {
95
- this.setTableValue(value)
96
- }
97
- },
98
- // 输入框变化回调
99
- async vxeChangeCallBack({ value, $event }) {
100
- if (this.rform) {
101
- this.setFormValue(value)
102
- } else {
103
- this.setTableValue(value)
104
- }
105
- },
106
- // radio 变化回调
107
- async vxeRadioCallBack({ label, $event }) {
108
- if (this.rform) {
109
- this.setFormValue(label)
110
- } else {
111
- this.setTableValue(label)
112
- }
113
- },
114
- // check变化回调
115
- async vxeCheckCallBack({ checklist, checked, label, $event }) {
116
- if (this.rform) {
117
- this.setFormValue(checklist)
118
- } else {
119
- this.setTableValue(checklist)
120
- }
121
- },
122
- // 输入框失去焦点回调
123
- async vxeBlurCallback({ value, $event }) {
124
- if (this.rform) {
125
- this.setFormValue(value)
126
- } else {
127
- this.setTableValue(value)
128
- }
129
- },
130
- // form回调赋值
131
- setFormValue(value) {
132
- if (['$vMoney'].includes(this.rname) && value !== '') value = this.$vUtils.multiply(value, this.rprops.moneyUnit || 1)
133
- let { rvalue } = this.formatValueFun(value, true)
134
- let { data, $form } = this.rparams
135
- this.$vUtils.set(data, this.rkey, rvalue)
136
- $form.context.emit('edit-closed', this.rparams, this)
137
- },
138
- // table回调赋值
139
- setTableValue(value) {
140
- if (['$vMoney'].includes(this.rname) && value !== '') value = this.$vUtils.multiply(value, this.rprops.moneyUnit || 1)
141
- const { row, column } = this.rparams
142
- const { model } = column
143
- model.change = true
144
- model.value = value
145
- },
146
- // 格式化值formatValue
147
- formatValueFun(value, editable) {
148
- let rObj = this.$vUtils.formatRender(value, this.rkey, this.rdata, this.rname, this.rprops, this, editable)
149
- this.renderValue = ['$vMoney'].includes(this.rname) ? rObj.rtext : rObj.rvalue
150
- return rObj
151
- },
152
- // 格式化底部值
153
- getFooterData(qianfen = true) {
154
- let { $table, items, itemIndex, column } = this.rparams
155
- let tableData = $table.reactData.tableData
156
- let { rname, rprops, rfooter, property } = column
157
- let { digits, moneyUnit, commafy, type, calculate } = rprops
158
- let footerValue = items[itemIndex]
159
- if (rfooter) {
160
- let caculateObj = rfooter[items[rfooter.index || 0]]
161
- if (caculateObj && (rname === '$vMoney' || (['number', 'float', 'integer'].includes(type) && calculate))) {
162
- let tableColumnData = this.$vUtils.mapTree(tableData, row => row[property])
163
- let { computeType, result, typeObj } = caculateObj
164
- switch (computeType) {
165
- case 'subTotal':
166
- footerValue = this.$vUtils.sum(tableColumnData)
167
- break
168
- case 'allTotal':
169
- footerValue = typeObj[property] || result
170
- break
171
- case 'mean':
172
- footerValue = this.$vUtils.mean(tableColumnData)
173
- break
174
- default:
175
- footerValue = result
176
- break
177
- }
178
- if (rname === '$vMoney') footerValue = this.$vUtils.truncate(this.$vUtils.divide(footerValue, moneyUnit), digits)
179
- if (qianfen && commafy) footerValue = this.$vUtils.commafy(footerValue, { digits })
180
- }
181
- }
182
- return footerValue
183
- },
184
- // 获取单据值
185
- getBillValue(index, total = false) {
186
- let value = total ? this.getFooterData(false) : this.renderValue
187
- if (!value) return ''
188
- let fullValue = this.$vUtils.formatMoneyPad(value)
189
- let fullList = fullValue.replace('.', '').split('')
190
- return fullList[index]
191
- }
192
- },
193
- created() {},
194
- activated() {}
195
- }
1
+ export default {
2
+ props: {
3
+ redit: { type: Boolean },
4
+ rkey: { type: String },
5
+ rname: { type: String },
6
+ rdata: {
7
+ type: Object,
8
+ default() {
9
+ return {}
10
+ }
11
+ },
12
+ rprops: {
13
+ type: Object,
14
+ default() {
15
+ return {}
16
+ }
17
+ },
18
+ rparams: {
19
+ type: Object,
20
+ default() {
21
+ return {}
22
+ }
23
+ }
24
+ },
25
+ data() {
26
+ return {
27
+ renderValue: null
28
+ }
29
+ },
30
+ computed: {
31
+ rsize() {
32
+ return this.rprops.size || this.rparams.$table?.props?.size || this.rparams.$form?.props?.size
33
+ },
34
+ rform() {
35
+ return this.rparams.$form
36
+ },
37
+ reditmode() {
38
+ return this.rparams.$table?.props?.editConfig?.mode
39
+ },
40
+ isEditAll() {
41
+ return !this.rform && this.reditmode === 'all'
42
+ },
43
+ moneyUnitText() {
44
+ let moneyUnitConstants = [
45
+ { value: 1, label: '元' },
46
+ { value: 1000, label: '千元' },
47
+ { value: 10000, label: '万元' }
48
+ ]
49
+ let moneyConstant = moneyUnitConstants.find(item => item.value === this.rprops.moneyUnit)
50
+ return moneyConstant && moneyConstant.label
51
+ },
52
+ billGroups() {
53
+ let { billStart = '分', billEnd = '亿' } = this.rprops
54
+ let cnGroups = [
55
+ { shortText: '兆', fullText: '兆', value: '' },
56
+ { shortText: '千', fullText: '千亿', value: '' },
57
+ { shortText: '百', fullText: '百亿', value: '' },
58
+ { shortText: '十', fullText: '十亿', value: '' },
59
+ { shortText: '亿', fullText: '亿', value: '' },
60
+ { shortText: '千', fullText: '千万', value: '' },
61
+ { shortText: '百', fullText: '百万', value: '' },
62
+ { shortText: '十', fullText: '十万', value: '' },
63
+ { shortText: '万', fullText: '万', value: '' },
64
+ { shortText: '千', fullText: '千', value: '' },
65
+ { shortText: '百', fullText: '百', value: '' },
66
+ { shortText: '十', fullText: '十', value: '' },
67
+ { shortText: '元', fullText: '元', value: '' },
68
+ { shortText: '角', fullText: '角', value: '' },
69
+ { shortText: '分', fullText: '分', value: '' },
70
+ { shortText: '毫', fullText: '毫', value: '' },
71
+ { shortText: '厘', fullText: '厘', value: '' }
72
+ ]
73
+ let startIndex = cnGroups.findIndex(cn => cn.fullText === billEnd)
74
+ let endIndex = cnGroups.findIndex(cn => cn.fullText === billStart)
75
+ return cnGroups.slice(startIndex, endIndex)
76
+ },
77
+ getBillClass() {
78
+ return bil => {
79
+ return {
80
+ basic: bil.fullText === '元',
81
+ commafy: ['千', '百万', '十亿', '兆'].includes(bil.fullText)
82
+ }
83
+ }
84
+ },
85
+ renderText() {
86
+ let keyValue = this.$vUtils.get(this.rdata, this.rkey)
87
+ let { rtext } = this.formatValueFun(keyValue)
88
+ return rtext
89
+ }
90
+ },
91
+ methods: {
92
+ // 输入框数字加减控制
93
+ vxeControlClick(bol) {
94
+ const { step = 1, min, max } = this.rprops
95
+ let value = bol ? this.$vUtils.add(this.renderValue, step) : this.$vUtils.subtract(this.renderValue, step)
96
+ if (value < min || value > max) return
97
+ if (this.rform) {
98
+ this.setFormValue(value)
99
+ } else {
100
+ this.setTableValue(value)
101
+ }
102
+ },
103
+ // 输入框变化
104
+ async vxeInputChange({ value, $event }) {
105
+ if (!this.rform) {
106
+ this.setTableValue(value)
107
+ }
108
+ },
109
+ // 输入框变化回调
110
+ async vxeChangeCallBack({ value, $event }) {
111
+ if (this.rform) {
112
+ this.setFormValue(value)
113
+ } else {
114
+ this.setTableValue(value)
115
+ }
116
+ },
117
+ // radio 变化回调
118
+ async vxeRadioCallBack({ label, $event }) {
119
+ if (this.rform) {
120
+ this.setFormValue(label)
121
+ } else {
122
+ this.setTableValue(label)
123
+ }
124
+ },
125
+ // check变化回调
126
+ async vxeCheckCallBack({ checklist, checked, label, $event }) {
127
+ if (this.rform) {
128
+ this.setFormValue(checklist)
129
+ } else {
130
+ this.setTableValue(checklist)
131
+ }
132
+ },
133
+ // 输入框失去焦点回调
134
+ async vxeBlurCallback({ value, $event }) {
135
+ if (this.rform) {
136
+ this.setFormValue(value)
137
+ } else {
138
+ this.setTableValue(value)
139
+ }
140
+ },
141
+ // form回调赋值
142
+ setFormValue(value) {
143
+ if (['$vMoney'].includes(this.rname) && value !== '') value = this.$vUtils.multiply(value, this.rprops.moneyUnit || 1)
144
+ let { rvalue } = this.formatValueFun(value, true)
145
+ let { data, $form } = this.rparams
146
+ this.$vUtils.set(data, this.rkey, rvalue)
147
+ $form.context.emit('edit-closed', this.rparams, this)
148
+ },
149
+ // table回调赋值
150
+ setTableValue(value) {
151
+ if (['$vMoney'].includes(this.rname) && value !== '') value = this.$vUtils.multiply(value, this.rprops.moneyUnit || 1)
152
+ const { row, column } = this.rparams
153
+ const { model } = column
154
+ model.change = true
155
+ model.value = value
156
+ },
157
+ // 格式化值formatValue
158
+ formatValueFun(value, editable) {
159
+ let rObj = this.$vUtils.formatRender(value, this.rkey, this.rdata, this.rname, this.rprops, this, editable)
160
+ this.renderValue = ['$vMoney'].includes(this.rname) ? rObj.rtext : rObj.rvalue
161
+ return rObj
162
+ },
163
+ // 格式化底部值
164
+ getFooterData(qianfen = true) {
165
+ let { $table, items, itemIndex, column } = this.rparams
166
+ let tableData = $table.reactData.tableData
167
+ let { rname, rprops, rfooter, property } = column
168
+ let { digits, moneyUnit, commafy, type, calculate } = rprops
169
+ let footerValue = items[itemIndex]
170
+ if (rfooter) {
171
+ let caculateObj = rfooter[items[rfooter.index || 0]]
172
+ if (caculateObj && (rname === '$vMoney' || (['number', 'float', 'integer'].includes(type) && calculate))) {
173
+ let tableColumnData = this.$vUtils.mapTree(tableData, row => row[property])
174
+ let { computeType, result, typeObj } = caculateObj
175
+ switch (computeType) {
176
+ case 'subTotal':
177
+ footerValue = this.$vUtils.sum(tableColumnData)
178
+ break
179
+ case 'allTotal':
180
+ footerValue = typeObj[property] || result
181
+ break
182
+ case 'mean':
183
+ footerValue = this.$vUtils.mean(tableColumnData)
184
+ break
185
+ default:
186
+ footerValue = result
187
+ break
188
+ }
189
+ if (rname === '$vMoney') footerValue = this.$vUtils.truncate(this.$vUtils.divide(footerValue, moneyUnit), digits)
190
+ if (qianfen && commafy) footerValue = this.$vUtils.commafy(footerValue, { digits })
191
+ }
192
+ }
193
+ return footerValue
194
+ },
195
+ // 获取单据值
196
+ getBillValue(index, total = false) {
197
+ let value = total ? this.getFooterData(false) : this.renderValue
198
+ if (!value) return ''
199
+ let fullValue = this.$vUtils.formatMoneyPad(value)
200
+ let fullList = fullValue.replace('.', '').split('')
201
+ return fullList[index]
202
+ }
203
+ },
204
+ created() {},
205
+ activated() {}
206
+ }