sh-view 2.0.8 → 2.2.0

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

@@ -1,11 +1,21 @@
-<template>
-	<a class="vxe-cell-href-a" :href="rdata[rkey]" :target="rprops.target" v-html="renderText"></a>
-</template>
-
-<script>
-import mixin from '../mixin/cell-mixin'
-export default {
-	name: 'VxeRenderImg',
-	mixins: [mixin]
-}
-</script>
+<template>
+	<a class="vxe-cell-href-a" :href="rdata[rkey]" :target="rprops.target" v-html="renderText"></a>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeRenderImg',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		return {
+			...useCell
+		}
+	}
+})
+</script>

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

@@ -5,17 +5,23 @@
 </template>
 
 <script>
-import mixin from '../mixin/cell-mixin'
-export default {
+import { computed, defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+export default defineComponent({
 	name: 'VxeRenderImg',
-	mixins: [mixin],
-	computed: {
-		imgSrc() {
-			return this.$vUtils.get(this.rdata, this.rkey)
-		},
-		imgHeight() {
-			return this.rprops.square ? this.rprops.width : this.rprops.height
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const imgSrc = computed(() => $vUtils.get(props.rdata, props.rkey))
+		const imgHeight = computed(() => {
+			return props.rprops.square ? props.rprops.width : props.rprops.height
+		})
+
+		return {
+			imgSrc,
+			imgHeight
 		}
 	}
-}
+})
 </script>

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

@@ -1,67 +1,83 @@
-<template>
-	<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">
-				<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">
-				<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>
-			<span v-if="rprops.prefixText && renderText" class="prefix">{{ rprops.prefixText }}</span>
-			<span v-html="renderText"></span>
-			<span v-if="rprops.suffixText && renderText" class="suffix">{{ rprops.suffixText }}</span>
-		</template>
-	</span>
-</template>
-
-<script>
-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() {
-			if (this.rprops.disabled) return
-			if (this.rform) {
-				let { $form } = this.rparams
-				$form.context.emit('prefix-click', this.rparams, this)
-			}
-		},
-		// 输入框后缀点击事件
-		vxeInputSuffixClick() {
-			if (this.rprops.disabled) return
-			if (this.rform) {
-				let { $form } = this.rparams
-				$form.context.emit('suffix-click', this.rparams, this)
-			}
-		}
-	}
-}
-</script>
+<template>
+	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform, 'flex-render': controlButton }">
+		<template v-if="redit || isEditAll">
+			<span v-if="rprops.prefixText && rform" class="prefix">
+				<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">
+				<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>
+		</template>
+		<template v-else>
+			<span v-if="rprops.prefixText && renderText" class="prefix">{{ rprops.prefixText }}</span>
+			<span v-html="renderText"></span>
+			<span v-if="rprops.suffixText && renderText" class="suffix">{{ rprops.suffixText }}</span>
+		</template>
+	</span>
+</template>
+
+<script>
+import { computed, defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeRenderInput',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const useCell = cellHooks(props, context, proxy)
+
+		const controlButton = computed(() => props.rprops.control && ['number', 'float', 'integer'].includes(props.rprops.type))
+		const psButtonConfig = computed(() => {
+			return {
+				disabled: props.rprops.disabled,
+				size: props.rsize,
+				status: 'theme'
+			}
+		})
+		const prefixButton = computed(() => props.rprops.prefixType.toLowerCase() === 'button')
+		const suffixButton = computed(() => props.rprops.suffixType.toLowerCase() === 'button')
+
+		// 输入框前缀点击事件
+		const vxeInputPrefixClick = () => {
+			if (props.rprops.disabled) return
+			if (useCell.rform.value) {
+				let { $form } = props.rparams
+				$form.context.emit('prefix-click', props.rparams)
+			}
+		}
+		// 输入框后缀点击事件
+		const vxeInputSuffixClick = () => {
+			if (props.rprops.disabled) return
+			if (useCell.rform.value) {
+				let { $form } = props.rparams
+				$form.context.emit('suffix-click', props.rparams)
+			}
+		}
+		// 输入框数字加减控制
+		const vxeControlClick = bol => {
+			const { step = 1, min, max } = props.rprops
+			let value = bol ? $vUtils.add(useCell.renderValue.value, step) : $vUtils.subtract(useCell.renderValue.value, step)
+			if ((min !== undefined && value < min) || (max !== undefined && value > max)) return
+			useCell.setRenderValue(value)
+		}
+
+		return {
+			...useCell,
+			controlButton,
+			psButtonConfig,
+			prefixButton,
+			suffixButton,
+			vxeInputPrefixClick,
+			vxeInputSuffixClick,
+			vxeControlClick
+		}
+	}
+})
+</script>

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

@@ -2,13 +2,11 @@
 	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform, 'td-all': rprops.bill }">
 		<template v-if="redit || isEditAll">
 			<vxe-input v-model="renderValue" type="number" v-bind="rprops" :size="rsize" @change="vxeInputChange" @blur="vxeBlurCallback" @clear="vxeBlurCallback" />
-			<span style="display: none" v-html="renderText"></span>
 		</template>
 		<template v-else-if="rprops.bill">
 			<template v-for="(bil, bilindex) in billGroups" :key="bilindex">
 				<span class="cell-bill-number" :class="getBillClass(bil)">{{ getBillValue(bilindex) }}</span>
 			</template>
-			<span style="display: none" v-html="renderText"></span>
 		</template>
 		<template v-else>
 			<span class="blue" v-html="renderText"></span>
@@ -17,9 +15,19 @@
 </template>
 
 <script>
-import mixin from '../mixin/cell-mixin'
-export default {
+import { computed, defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
 	name: 'VxeRenderMoney',
-	mixins: [mixin]
-}
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		return {
+			...useCell
+		}
+	}
+})
 </script>

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

@@ -1,19 +1,28 @@
-<template>
-	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
-		<template v-if="redit || isEditAll">
-			<vxe-input v-model="renderValue" type="number" v-bind="rprops" :size="rsize" @change="vxeInputChange" @blur="vxeBlurCallback" @clear="vxeBlurCallback" />
-			<span style="display: none" v-html="renderText"></span>
-		</template>
-		<template v-else>
-			<sh-progress :percent="renderText" v-bind="rprops" />
-		</template>
-	</span>
-</template>
-
-<script>
-import mixin from '../mixin/cell-mixin'
-export default {
-	name: 'VxeRenderPropgress',
-	mixins: [mixin]
-}
-</script>
+<template>
+	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
+		<template v-if="redit || isEditAll">
+			<vxe-input v-model="renderValue" type="number" v-bind="rprops" :size="rsize" @change="vxeInputChange" @blur="vxeBlurCallback" @clear="vxeBlurCallback" />
+		</template>
+		<template v-else>
+			<sh-progress :percent="renderText" v-bind="rprops" />
+		</template>
+	</span>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeRenderPropgress',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		return {
+			...useCell
+		}
+	}
+})
+</script>

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

@@ -2,7 +2,6 @@
 	<span class="vxe-render--inner" :class="{ 'vxe-render--inner--readonly': !redit, 'form-render': rform, 'td-render': !rform }">
 		<template v-if="redit || isEditAll">
 			<vxe-radio v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeRadioCallBack" />
-			<span style="display: none" v-html="renderText"></span>
 		</template>
 		<template v-else>
 			<vxe-radio :model-value="renderText" :disabled="true" v-bind="rprops" :size="rsize" />
@@ -11,9 +10,19 @@
 </template>
 
 <script>
-import mixin from '../mixin/cell-mixin'
-export default {
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
 	name: 'VxeRenderRadio',
-	mixins: [mixin]
-}
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		return {
+			...useCell
+		}
+	}
+})
 </script>

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

@@ -1,36 +1,43 @@
-<template>
-	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
-		<template v-if="redit || isEditAll">
-			<vxe-radio-group v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeRadioCallBack">
-				<vxe-radio v-for="checkitem in rprops.options" :key="checkitem.value" :label="checkitem.value" :content="checkitem.label" />
-			</vxe-radio-group>
-			<span style="display: none" v-html="renderText"></span>
-		</template>
-		<template v-else-if="!redit && showType">
-			<div v-for="roption in rprops.options" :key="roption">
-				<sh-tag v-if="roptionShow(roption)" :color="roption.tagColor || rprops.tagColor" :type="roption.tagType || rprops.tagType">{{ roption.label }}</sh-tag>
-			</div>
-		</template>
-		<template v-else>
-			<span v-html="renderText"></span>
-		</template>
-	</span>
-</template>
-
-<script>
-import mixin from '../mixin/cell-mixin'
-export default {
-	name: 'VxeRenderRadiogroup',
-	mixins: [mixin],
-	computed: {
-		showType() {
-			return this.rprops.showType === 'tag'
-		}
-	},
-	methods: {
-		roptionShow(roption) {
-			return this.renderText.split(this.rprops.split).includes(roption.label)
-		}
-	}
-}
-</script>
+<template>
+	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
+		<template v-if="redit || isEditAll">
+			<vxe-radio-group v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeRadioCallBack">
+				<vxe-radio v-for="checkitem in rprops.options" :key="checkitem.value" :label="checkitem.value" :content="checkitem.label" />
+			</vxe-radio-group>
+		</template>
+		<template v-else-if="!redit && showType">
+			<div v-for="roption in rprops.options" :key="roption">
+				<sh-tag v-if="roptionShow(roption)" :color="roption.tagColor || rprops.tagColor" :type="roption.tagType || rprops.tagType">{{ roption.label }}</sh-tag>
+			</div>
+		</template>
+		<template v-else>
+			<span v-html="renderText"></span>
+		</template>
+	</span>
+</template>
+
+<script>
+import { computed, defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeRenderRadiogroup',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		const showType = computed(() => props.rprops.showType === 'tag')
+
+		const roptionShow = roption => {
+			return useCell.renderText.value.split(props.rprops.split).includes(roption.label)
+		}
+
+		return {
+			...useCell,
+			showType,
+			roptionShow
+		}
+	}
+})
+</script>

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

@@ -1,36 +1,44 @@
-<template>
-	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
-		<template v-if="redit || isEditAll">
-			<vxe-select v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeChangeCallBack" />
-			<span style="display: none" v-html="renderText"></span>
-		</template>
-		<template v-else-if="!redit && showType">
-			<template v-for="showTag in showTags" :key="showTag.value">
-				<sh-tag :color="showTag.tagColor || rprops.tagColor" :type="showTag.tagType || rprops.tagType">{{ showTag.label }}</sh-tag>
-			</template>
-			<span style="display: none" v-html="renderText"></span>
-		</template>
-		<span v-else v-html="renderText"></span>
-	</span>
-</template>
-
-<script>
-import mixin from '../mixin/cell-mixin'
-export default {
-	name: 'VxeRenderSelect',
-	mixins: [mixin],
-	computed: {
-		showType() {
-			return this.rprops.showType === 'tag'
-		},
-		showTags() {
-			const { renderValue, rprops } = this
-			const { options = [], multiple } = rprops
-			if (multiple && Array.isArray(renderValue)) {
-				return options.filter(option => renderValue.includes(option.value))
-			}
-			return options.filter(option => String(option.value) === String(renderValue))
-		}
-	}
-}
-</script>
+<template>
+	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
+		<template v-if="redit || isEditAll">
+			<vxe-select v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeChangeCallBack" />
+		</template>
+		<template v-else-if="!redit && showType">
+			<template v-for="showTag in showTags" :key="showTag.value">
+				<sh-tag :color="showTag.tagColor || rprops.tagColor" :type="showTag.tagType || rprops.tagType">{{ showTag.label }}</sh-tag>
+			</template>
+		</template>
+		<span v-else v-html="renderText"></span>
+	</span>
+</template>
+
+<script>
+import { computed, defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeRenderSelect',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		const showType = computed(() => props.rprops.showType === 'tag')
+
+		const showTags = computed(() => {
+			const renderValue = useCell.renderValue.value
+			const { options = [], multiple } = props.rprops
+			if (multiple && Array.isArray(renderValue)) {
+				return options.filter(option => renderValue.includes(option.value))
+			}
+			return options.filter(option => String(option.value) === String(renderValue))
+		})
+
+		return {
+			...useCell,
+			showType,
+			showTags
+		}
+	}
+})
+</script>

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

@@ -2,7 +2,6 @@
 	<span class="vxe-render--inner" :class="{ 'vxe-render--inner--readonly': !redit, 'form-render': rform, 'td-render': !rform }">
 		<template v-if="redit || isEditAll">
 			<vxe-switch v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeChangeCallBack" />
-			<span style="display: none" v-html="renderText"></span>
 		</template>
 		<template v-else>
 			<span v-html="renderText"></span>
@@ -11,9 +10,19 @@
 </template>
 
 <script>
-import mixin from '../mixin/cell-mixin'
-export default {
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
 	name: 'VxeRenderSwitch',
-	mixins: [mixin]
-}
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		return {
+			...useCell
+		}
+	}
+})
 </script>