sh-view 2.0.6 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "基于vxe-table二次封装",
   "main": "packages/index.js",
   "scripts": {

package/packages/components/other-components/sh-menu/index.vue

@@ -99,9 +99,8 @@ export default {
 			})
 			if (mount) {
 				this.activeNames = activeNames
-				if (this.collapsed) return
+				if (this.collapsed || this.mode !== 'vertical') return
 			}
-			if (this.mode !== 'vertical') return
 			// 过滤掉所有子节点
 			let menuIndex = activeNames.findIndex(item => item === menuName)
 			let parentNames = activeNames.filter((item, itemIndex) => menuIndex >= itemIndex)

package/packages/vxeTable/css/index.scss

@@ -245,6 +245,30 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
     &.td-render{}
     .prefix, .suffix{
         white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+    }
+    .control-btn{
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--vxe-table-header-background-color);
+        min-width: 30px;
+        cursor: pointer;
+        user-select: none;
+        font-size: 20px;
+        border: 1px solid var(--vxe-input-border-color);
+        border-radius: var(--vxe-border-radius);
+        &.before{
+            border-right: none;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+        &.after{
+            border-left: none;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
     }
     .vxe-render--inner-img{
         display: inline-block;

package/packages/vxeTable/render/cell/vxe-render-input.vue

@@ -2,18 +2,16 @@
 	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
 		<template v-if="redit || isEditAll">
 			<span v-if="rprops.prefixText && rform" class="prefix">
-				<sh-button v-if="rprops.prefixType.toLowerCase() === 'button'" :disabled="rprops.disabled" :size="rsize" status="primary" @click="vxeInputPrefixClick">{{
-					rprops.prefixText
-				}}</sh-button>
+				<vxe-button v-if="prefixButton" v-bind="psButtonConfig" @click="vxeInputPrefixClick">{{ rprops.prefixText }}</vxe-button>
 				<span v-else @click="vxeInputPrefixClick">{{ rprops.prefixText }}</span>
 			</span>
+			<span v-else-if="controlButton" class="control-btn before" @click="vxeControlClick(false)">-</span>
 			<vxe-input v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeInputChange" @blur="vxeBlurCallback" @clear="vxeBlurCallback"></vxe-input>
 			<span v-if="rprops.suffixText && rform" class="suffix">
-				<sh-button v-if="rprops.suffixType.toLowerCase() === 'button'" :disabled="rprops.disabled" :size="rsize" status="primary" @click="vxeInputSuffixClick">{{
-					rprops.suffixText
-				}}</sh-button>
+				<vxe-button v-if="suffixButton" v-bind="psButtonConfig" @click="vxeInputSuffixClick">{{ rprops.suffixText }}</vxe-button>
 				<span v-else @click="vxeInputSuffixClick">{{ rprops.suffixText }}</span>
 			</span>
+			<span v-else-if="controlButton" class="control-btn after" @click="vxeControlClick(true)">+</span>
 			<span style="display: none" v-html="renderText"></span>
 		</template>
 		<template v-else>
@@ -29,6 +27,24 @@ import mixin from '../mixin/cell-mixin'
 export default {
 	name: 'VxeRenderInput',
 	mixins: [mixin],
+	computed: {
+		controlButton() {
+			return this.rprops.control && ['number', 'float', 'integer'].includes(this.rprops.type)
+		},
+		psButtonConfig() {
+			return {
+				disabled: this.rprops.disabled,
+				size: this.rsize,
+				status: 'theme'
+			}
+		},
+		prefixButton() {
+			return this.rprops.prefixType.toLowerCase() === 'button'
+		},
+		suffixButton() {
+			return this.rprops.suffixType.toLowerCase() === 'button'
+		}
+	},
 	methods: {
 		// 输入框前缀点击事件
 		vxeInputPrefixClick() {

package/packages/vxeTable/render/mixin/cell-mixin.js

@@ -1,195 +1,206 @@
-export default {
-	props: {
-		redit: { type: Boolean },
-		rkey: { type: String },
-		rname: { type: String },
-		rdata: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		rprops: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		rparams: {
-			type: Object,
-			default() {
-				return {}
-			}
-		}
-	},
-	data() {
-		return {
-			renderValue: null
-		}
-	},
-	computed: {
-		rsize() {
-			return this.rprops.size || this.rparams.$table?.props?.size || this.rparams.$form?.props?.size
-		},
-		rform() {
-			return this.rparams.$form
-		},
-		reditmode() {
-			return this.rparams.$table?.props?.editConfig?.mode
-		},
-		isEditAll() {
-			return !this.rform && this.reditmode === 'all'
-		},
-		moneyUnitText() {
-			let moneyUnitConstants = [
-				{ value: 1, label: '元' },
-				{ value: 1000, label: '千元' },
-				{ value: 10000, label: '万元' }
-			]
-			let moneyConstant = moneyUnitConstants.find(item => item.value === this.rprops.moneyUnit)
-			return moneyConstant && moneyConstant.label
-		},
-		billGroups() {
-			let { billStart = '分', billEnd = '亿' } = this.rprops
-			let cnGroups = [
-				{ shortText: '兆', fullText: '兆', value: '' },
-				{ shortText: '千', fullText: '千亿', value: '' },
-				{ shortText: '百', fullText: '百亿', value: '' },
-				{ shortText: '十', fullText: '十亿', value: '' },
-				{ shortText: '亿', fullText: '亿', value: '' },
-				{ shortText: '千', fullText: '千万', value: '' },
-				{ shortText: '百', fullText: '百万', value: '' },
-				{ shortText: '十', fullText: '十万', value: '' },
-				{ shortText: '万', fullText: '万', value: '' },
-				{ shortText: '千', fullText: '千', value: '' },
-				{ shortText: '百', fullText: '百', value: '' },
-				{ shortText: '十', fullText: '十', value: '' },
-				{ shortText: '元', fullText: '元', value: '' },
-				{ shortText: '角', fullText: '角', value: '' },
-				{ shortText: '分', fullText: '分', value: '' },
-				{ shortText: '毫', fullText: '毫', value: '' },
-				{ shortText: '厘', fullText: '厘', value: '' }
-			]
-			let startIndex = cnGroups.findIndex(cn => cn.fullText === billEnd)
-			let endIndex = cnGroups.findIndex(cn => cn.fullText === billStart)
-			return cnGroups.slice(startIndex, endIndex)
-		},
-		getBillClass() {
-			return bil => {
-				return {
-					basic: bil.fullText === '元',
-					commafy: ['千', '百万', '十亿', '兆'].includes(bil.fullText)
-				}
-			}
-		},
-		renderText() {
-			let keyValue = this.$vUtils.get(this.rdata, this.rkey)
-			let { rtext } = this.formatValueFun(keyValue)
-			return rtext
-		}
-	},
-	methods: {
-		// 输入框变化
-		async vxeInputChange({ value, $event }) {
-			if (!this.rform) {
-				this.setTableValue(value)
-			}
-		},
-		// 输入框变化回调
-		async vxeChangeCallBack({ value, $event }) {
-			if (this.rform) {
-				this.setFormValue(value)
-			} else {
-				this.setTableValue(value)
-			}
-		},
-		// radio 变化回调
-		async vxeRadioCallBack({ label, $event }) {
-			if (this.rform) {
-				this.setFormValue(label)
-			} else {
-				this.setTableValue(label)
-			}
-		},
-		// check变化回调
-		async vxeCheckCallBack({ checklist, checked, label, $event }) {
-			if (this.rform) {
-				this.setFormValue(checklist)
-			} else {
-				this.setTableValue(checklist)
-			}
-		},
-		// 输入框失去焦点回调
-		async vxeBlurCallback({ value, $event }) {
-			if (this.rform) {
-				this.setFormValue(value)
-			} else {
-				this.setTableValue(value)
-			}
-		},
-		// form回调赋值
-		setFormValue(value) {
-			if (['$vMoney'].includes(this.rname) && value !== '') value = this.$vUtils.multiply(value, this.rprops.moneyUnit || 1)
-			let { rvalue } = this.formatValueFun(value, true)
-			let { data, $form } = this.rparams
-			this.$vUtils.set(data, this.rkey, rvalue)
-			$form.context.emit('edit-closed', this.rparams, this)
-		},
-		// table回调赋值
-		setTableValue(value) {
-			if (['$vMoney'].includes(this.rname) && value !== '') value = this.$vUtils.multiply(value, this.rprops.moneyUnit || 1)
-			const { row, column } = this.rparams
-			const { model } = column
-			model.change = true
-			model.value = value
-		},
-		// 格式化值formatValue
-		formatValueFun(value, editable) {
-			let rObj = this.$vUtils.formatRender(value, this.rkey, this.rdata, this.rname, this.rprops, this, editable)
-			this.renderValue = ['$vMoney'].includes(this.rname) ? rObj.rtext : rObj.rvalue
-			return rObj
-		},
-		// 格式化底部值
-		getFooterData(qianfen = true) {
-			let { $table, items, itemIndex, column } = this.rparams
-			let tableData = $table.reactData.tableData
-			let { rname, rprops, rfooter, property } = column
-			let { digits, moneyUnit, commafy, type, calculate } = rprops
-			let footerValue = items[itemIndex]
-			if (rfooter) {
-				let caculateObj = rfooter[items[rfooter.index || 0]]
-				if (caculateObj && (rname === '$vMoney' || (['number', 'float', 'integer'].includes(type) && calculate))) {
-					let tableColumnData = this.$vUtils.mapTree(tableData, row => row[property])
-					let { computeType, result, typeObj } = caculateObj
-					switch (computeType) {
-						case 'subTotal':
-							footerValue = this.$vUtils.sum(tableColumnData)
-							break
-						case 'allTotal':
-							footerValue = typeObj[property] || result
-							break
-						case 'mean':
-							footerValue = this.$vUtils.mean(tableColumnData)
-							break
-						default:
-							footerValue = result
-							break
-					}
-					if (rname === '$vMoney') footerValue = this.$vUtils.truncate(this.$vUtils.divide(footerValue, moneyUnit), digits)
-					if (qianfen && commafy) footerValue = this.$vUtils.commafy(footerValue, { digits })
-				}
-			}
-			return footerValue
-		},
-		// 获取单据值
-		getBillValue(index, total = false) {
-			let value = total ? this.getFooterData(false) : this.renderValue
-			if (!value) return ''
-			let fullValue = this.$vUtils.formatMoneyPad(value)
-			let fullList = fullValue.replace('.', '').split('')
-			return fullList[index]
-		}
-	},
-	created() {},
-	activated() {}
-}
+export default {
+	props: {
+		redit: { type: Boolean },
+		rkey: { type: String },
+		rname: { type: String },
+		rdata: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		rprops: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		rparams: {
+			type: Object,
+			default() {
+				return {}
+			}
+		}
+	},
+	data() {
+		return {
+			renderValue: null
+		}
+	},
+	computed: {
+		rsize() {
+			return this.rprops.size || this.rparams.$table?.props?.size || this.rparams.$form?.props?.size
+		},
+		rform() {
+			return this.rparams.$form
+		},
+		reditmode() {
+			return this.rparams.$table?.props?.editConfig?.mode
+		},
+		isEditAll() {
+			return !this.rform && this.reditmode === 'all'
+		},
+		moneyUnitText() {
+			let moneyUnitConstants = [
+				{ value: 1, label: '元' },
+				{ value: 1000, label: '千元' },
+				{ value: 10000, label: '万元' }
+			]
+			let moneyConstant = moneyUnitConstants.find(item => item.value === this.rprops.moneyUnit)
+			return moneyConstant && moneyConstant.label
+		},
+		billGroups() {
+			let { billStart = '分', billEnd = '亿' } = this.rprops
+			let cnGroups = [
+				{ shortText: '兆', fullText: '兆', value: '' },
+				{ shortText: '千', fullText: '千亿', value: '' },
+				{ shortText: '百', fullText: '百亿', value: '' },
+				{ shortText: '十', fullText: '十亿', value: '' },
+				{ shortText: '亿', fullText: '亿', value: '' },
+				{ shortText: '千', fullText: '千万', value: '' },
+				{ shortText: '百', fullText: '百万', value: '' },
+				{ shortText: '十', fullText: '十万', value: '' },
+				{ shortText: '万', fullText: '万', value: '' },
+				{ shortText: '千', fullText: '千', value: '' },
+				{ shortText: '百', fullText: '百', value: '' },
+				{ shortText: '十', fullText: '十', value: '' },
+				{ shortText: '元', fullText: '元', value: '' },
+				{ shortText: '角', fullText: '角', value: '' },
+				{ shortText: '分', fullText: '分', value: '' },
+				{ shortText: '毫', fullText: '毫', value: '' },
+				{ shortText: '厘', fullText: '厘', value: '' }
+			]
+			let startIndex = cnGroups.findIndex(cn => cn.fullText === billEnd)
+			let endIndex = cnGroups.findIndex(cn => cn.fullText === billStart)
+			return cnGroups.slice(startIndex, endIndex)
+		},
+		getBillClass() {
+			return bil => {
+				return {
+					basic: bil.fullText === '元',
+					commafy: ['千', '百万', '十亿', '兆'].includes(bil.fullText)
+				}
+			}
+		},
+		renderText() {
+			let keyValue = this.$vUtils.get(this.rdata, this.rkey)
+			let { rtext } = this.formatValueFun(keyValue)
+			return rtext
+		}
+	},
+	methods: {
+		// 输入框数字加减控制
+		vxeControlClick(bol) {
+			const { step = 1, min, max } = this.rprops
+			let value = bol ? this.$vUtils.add(this.renderValue, step) : this.$vUtils.subtract(this.renderValue, step)
+			if (value < min || value > max) return
+			if (this.rform) {
+				this.setFormValue(value)
+			} else {
+				this.setTableValue(value)
+			}
+		},
+		// 输入框变化
+		async vxeInputChange({ value, $event }) {
+			if (!this.rform) {
+				this.setTableValue(value)
+			}
+		},
+		// 输入框变化回调
+		async vxeChangeCallBack({ value, $event }) {
+			if (this.rform) {
+				this.setFormValue(value)
+			} else {
+				this.setTableValue(value)
+			}
+		},
+		// radio 变化回调
+		async vxeRadioCallBack({ label, $event }) {
+			if (this.rform) {
+				this.setFormValue(label)
+			} else {
+				this.setTableValue(label)
+			}
+		},
+		// check变化回调
+		async vxeCheckCallBack({ checklist, checked, label, $event }) {
+			if (this.rform) {
+				this.setFormValue(checklist)
+			} else {
+				this.setTableValue(checklist)
+			}
+		},
+		// 输入框失去焦点回调
+		async vxeBlurCallback({ value, $event }) {
+			if (this.rform) {
+				this.setFormValue(value)
+			} else {
+				this.setTableValue(value)
+			}
+		},
+		// form回调赋值
+		setFormValue(value) {
+			if (['$vMoney'].includes(this.rname) && value !== '') value = this.$vUtils.multiply(value, this.rprops.moneyUnit || 1)
+			let { rvalue } = this.formatValueFun(value, true)
+			let { data, $form } = this.rparams
+			this.$vUtils.set(data, this.rkey, rvalue)
+			$form.context.emit('edit-closed', this.rparams, this)
+		},
+		// table回调赋值
+		setTableValue(value) {
+			if (['$vMoney'].includes(this.rname) && value !== '') value = this.$vUtils.multiply(value, this.rprops.moneyUnit || 1)
+			const { row, column } = this.rparams
+			const { model } = column
+			model.change = true
+			model.value = value
+		},
+		// 格式化值formatValue
+		formatValueFun(value, editable) {
+			let rObj = this.$vUtils.formatRender(value, this.rkey, this.rdata, this.rname, this.rprops, this, editable)
+			this.renderValue = ['$vMoney'].includes(this.rname) ? rObj.rtext : rObj.rvalue
+			return rObj
+		},
+		// 格式化底部值
+		getFooterData(qianfen = true) {
+			let { $table, items, itemIndex, column } = this.rparams
+			let tableData = $table.reactData.tableData
+			let { rname, rprops, rfooter, property } = column
+			let { digits, moneyUnit, commafy, type, calculate } = rprops
+			let footerValue = items[itemIndex]
+			if (rfooter) {
+				let caculateObj = rfooter[items[rfooter.index || 0]]
+				if (caculateObj && (rname === '$vMoney' || (['number', 'float', 'integer'].includes(type) && calculate))) {
+					let tableColumnData = this.$vUtils.mapTree(tableData, row => row[property])
+					let { computeType, result, typeObj } = caculateObj
+					switch (computeType) {
+						case 'subTotal':
+							footerValue = this.$vUtils.sum(tableColumnData)
+							break
+						case 'allTotal':
+							footerValue = typeObj[property] || result
+							break
+						case 'mean':
+							footerValue = this.$vUtils.mean(tableColumnData)
+							break
+						default:
+							footerValue = result
+							break
+					}
+					if (rname === '$vMoney') footerValue = this.$vUtils.truncate(this.$vUtils.divide(footerValue, moneyUnit), digits)
+					if (qianfen && commafy) footerValue = this.$vUtils.commafy(footerValue, { digits })
+				}
+			}
+			return footerValue
+		},
+		// 获取单据值
+		getBillValue(index, total = false) {
+			let value = total ? this.getFooterData(false) : this.renderValue
+			if (!value) return ''
+			let fullValue = this.$vUtils.formatMoneyPad(value)
+			let fullList = fullValue.replace('.', '').split('')
+			return fullList[index]
+		}
+	},
+	created() {},
+	activated() {}
+}