sh-view 2.1.0 → 2.3.0

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

@@ -1,78 +1,51 @@
-<template>
-	<span class="vxe-render--inner" style="display: inline-block; width: 100%">
-		<sh-table :disabled="!redit && !isEditAll" v-bind="rprops" :size="rsize" :data-sourse="renderValue" @edit-closed="vxeInputCallback" @toolbaroption="onToolbaroption"></sh-table>
-	</span>
-</template>
-
-<script>
-export default {
-	name: 'VxeRenderTree',
-	props: {
-		redit: { type: Boolean },
-		rkey: { type: String },
-		rsize: { type: String },
-		rdata: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		rprops: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		rparams: {
-			type: Object,
-			default() {
-				return {}
-			}
-		}
-	},
-	data() {
-		return {
-			renderValue: []
-		}
-	},
-	computed: {
-		rform() {
-			return this.rparams.$form
-		},
-		isEditAll() {
-			return !this.rform && this.rparams.$table.props.editConfig?.mode === 'all'
-		}
-	},
-	created() {
-		this.initData()
-	},
-	methods: {
-		// 初始化数据
-		initData() {
-			let rvalue = this.$vUtils.get(this.rdata, this.rkey)
-			this.renderValue = Array.isArray(rvalue) ? rvalue : []
-		},
-		// 输入框回调
-		vxeInputCallback({ $table, row }) {
-			let fullData = $table.getTableData().fullData
-			this.driveBackData(fullData)
-		},
-		// 新增、删除行回调
-		onToolbaroption(code, data, $table) {
-			let fullData = $table.getTableData().fullData
-			this.driveBackData(fullData)
-		},
-		// 回填数据
-		driveBackData(value) {
-			if (this.rform) {
-				let { data, $form } = this.rparams
-				this.$vUtils.set(data, this.rkey, value)
-				$form.context.emit('edit-closed', this.rparams, this)
-			} else {
-				let { row } = this.rparams
-				this.$vUtils.set(row, this.rkey, value)
-			}
-		}
-	}
-}
-</script>
+<template>
+	<span class="vxe-render--inner" style="display: inline-block; width: 100%">
+		<sh-table
+			ref="shTableRef"
+			:disabled="!redit && !isEditAll"
+			v-bind="rprops"
+			:size="rsize"
+			:data-sourse="renderValue"
+			@edit-closed="vxeInputCallback"
+			@toolbaroption="onToolbaroption"></sh-table>
+	</span>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeRenderTable',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+		const shTableRef = ref()
+
+		const fullData = () => {
+			return shTableRef.value.getFullData()
+		}
+
+		// 输入框回调
+		const vxeInputCallback = ({ $table, row }) => {
+			driveBackData()
+		}
+		// 新增、删除行回调
+		const onToolbaroption = (code, data, $table) => {
+			driveBackData()
+		}
+		// 回填数据
+		const driveBackData = value => {
+			useCell.setRenderValue(fullData(), true)
+		}
+
+		return {
+			...useCell,
+			shTableRef,
+			vxeInputCallback,
+			onToolbaroption
+		}
+	}
+})
+</script>

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

@@ -2,7 +2,6 @@
 	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
 		<template v-if="redit || isEditAll">
 			<vxe-textarea v-model="renderValue" v-bind="rprops" :size="rsize" @change="vxeInputChange" @blur="vxeBlurCallback" @clear="vxeBlurCallback" />
-			<span style="display: none" v-html="renderText"></span>
 		</template>
 		<template v-else>
 			<span>{{ 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: 'VxeRenderTextarea',
-	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-time.vue

@@ -2,7 +2,6 @@
 	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
 		<template v-if="redit || isEditAll">
 			<vxe-input v-model="renderValue" v-bind="rprops" :size="rsize" :disabled-method="vxeDisabledMethod" @change="vxeChangeCallBack"></vxe-input>
-			<span style="display: none" v-html="renderText"></span>
 		</template>
 		<template v-else>
 			<span v-html="renderText"></span>
@@ -11,24 +10,35 @@
 </template>
 
 <script>
-import mixin from '../mixin/cell-mixin'
-export default {
-	name: 'VxeRenderInput',
-	mixins: [mixin],
-	methods: {
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeRenderTime',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const useCell = cellHooks(props, context, proxy)
+
 		// 禁用事件
-		vxeDisabledMethod({ date, viewType }) {
-			let { startTime, endTime } = this.rprops
+		const vxeDisabledMethod = ({ date, viewType }) => {
+			let { startTime, endTime } = props.rprops
 			if (startTime) {
-				startTime = this.$vUtils.format(startTime, this.rdata)
-				let { done, time } = this.$vUtils.getDateDiff(startTime, date)
+				startTime = $vUtils.format(startTime, props.rdata)
+				let { done, time } = $vUtils.getDateDiff(startTime, date)
 				return startTime ? !done : false
 			} else if (endTime) {
-				endTime = this.$vUtils.format(endTime, this.rdata)
-				let { done, time } = this.$vUtils.getDateDiff(endTime, date)
+				endTime = $vUtils.format(endTime, props.rdata)
+				let { done, time } = $vUtils.getDateDiff(endTime, date)
 				return done
 			}
 		}
+
+		return {
+			...useCell,
+			vxeDisabledMethod
+		}
 	}
-}
+})
 </script>

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

@@ -2,7 +2,6 @@
 	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
 		<template v-if="redit || isEditAll">
 			<sh-tree v-model="renderValue" v-bind="rprops" :field="rkey" :value-data="rdata" :size="rsize" is-select @change="vxeTreeCallback"></sh-tree>
-			<span style="display: none" v-html="renderText"></span>
 		</template>
 		<template v-else>
 			<span v-html="renderText"></span>
@@ -11,24 +10,25 @@
 </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: 'VxeRenderTree',
-	mixins: [mixin],
-	data() {
-		return {
-			renderValue: []
-		}
-	},
-	methods: {
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const useCell = cellHooks(props, context, proxy)
+
 		// 输入框回调
-		vxeTreeCallback(selectedKeys, selectedRows) {
-			let { valueKeys, multiple } = this.rprops
+		const vxeTreeCallback = (selectedKeys, selectedRows) => {
+			let { valueKeys, multiple } = props.rprops
 			if (!multiple) {
 				selectedKeys = selectedKeys[0] || ''
 			}
 			if (valueKeys && selectedRows && selectedRows.length > 0) {
-				let prefixKey = this.rkey.endsWith('Id') ? String(this.rkey).replace('Id', '') : this.rkey
+				let prefixKey = props.rkey.endsWith('Id') ? String(props.rkey).replace('Id', '') : props.rkey
 				let valueks = Array.isArray(valueKeys) ? valueKeys : valueKeys.split(',')
 				valueks.forEach(key => {
 					let keySplits = key.split('=')
@@ -36,24 +36,20 @@ export default {
 					let fromKey = keySplits[1] || String(keySplits[0]).replace(/@/gi, prefixKey)
 					let fromvalue = null
 					if (multiple) {
-						fromvalue = selectedRows.map(item => this.$vUtils.get(item, fromKey) || this.$vUtils.get(item, fromDefaultKey))
+						fromvalue = selectedRows.map(item => $vUtils.get(item, fromKey) || $vUtils.get(item, fromDefaultKey))
 					} else {
-						fromvalue = this.$vUtils.get(selectedRows[0], fromKey) || this.$vUtils.get(selectedRows[0], fromDefaultKey)
+						fromvalue = $vUtils.get(selectedRows[0], fromKey) || $vUtils.get(selectedRows[0], fromDefaultKey)
 					}
-					this.$vUtils.set(this.rform ? this.rparams.data : this.rparams.row, fromKey, fromvalue)
+					$vUtils.set(props.rdata, fromKey, fromvalue)
 				})
 			}
-			if (this.rform) {
-				let { data, $form } = this.rparams
-				this.$vUtils.set(data, this.rkey, selectedKeys)
-				$form.context.emit('edit-closed', this.rparams, this)
-			} else {
-				let { column } = this.rparams
-				let { model } = column
-				model.change = true
-				model.value = selectedKeys
-			}
+			useCell.setRenderValue(selectedKeys, true)
+		}
+
+		return {
+			...useCell,
+			vxeTreeCallback
 		}
 	}
-}
+})
 </script>

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

@@ -2,7 +2,6 @@
 	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
 		<template v-if="redit || isEditAll">
 			<sh-upload v-model="renderValue" v-bind="rprops" :size="rsize" @input="vxeChangeCallBack({ value: $event })"></sh-upload>
-			<span style="display: none" v-html="renderText"></span>
 		</template>
 		<template v-else>
 			<sh-upload :model-value="renderText" v-bind="rprops" :disabled="true" :size="rsize"></sh-upload>
@@ -11,14 +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: 'VxeRenderUpload',
-	mixins: [mixin],
-	data() {
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
 		return {
-			renderValue: []
+			...useCell
 		}
 	}
-}
+})
 </script>

package/packages/vxeTable/render/filters/vxe-filter-input.vue

@@ -1,43 +1,25 @@
-<template>
-	<div class="vxe-filter--wrap">
-		<span class="vxe-filter--inner">
-			<vxe-input v-model="renderValue.data" v-bind="rprops" :disabled="false" @input="vxeFilterCallback" />
-		</span>
-	</div>
-</template>
-
-<script>
-import mixin from '../mixin/cell-mixin'
-export default {
-	name: 'VxeFilterInput',
-	mixins: [mixin],
-	data() {
-		return {
-			renderValue: {}
-		}
-	},
-	computed: {},
-	watch: {
-		rparams(nv, ov) {
-			this.initLoad()
-		}
-	},
-	created() {
-		this.initLoad()
-	},
-	methods: {
-		// 初始化
-		initLoad() {
-			const { column, $panel } = this.rparams
-			const option = column.filters[0]
-			this.renderValue = option
-			$panel.changeOption(null, Boolean(this.renderValue.data), option)
-		},
-		// 过滤回调
-		vxeFilterCallback({ value, $event }) {
-			const { $panel } = this.rparams
-			$panel.changeOption(null, Boolean(this.renderValue.data), this.renderValue)
-		}
-	}
-}
-</script>
+<template>
+	<div class="vxe-filter--wrap">
+		<span class="vxe-filter--inner">
+			<vxe-input v-model="renderValue.data" v-bind="rprops" :disabled="false" @input="vxeFilterCallback" />
+		</span>
+	</div>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import filterHooks from '../mixin/filter-hooks'
+export default defineComponent({
+	name: 'VxeFilterInput',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useFilter = filterHooks(props, context, proxy)
+
+		return {
+			...useFilter
+		}
+	}
+})
+</script>

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

@@ -1,13 +1,23 @@
-<template>
-	<span>{{ getFooterData() }}</span>
-</template>
-
-<script>
-import mixin from '../mixin/cell-mixin'
-export default {
-	name: 'VxeFooterMoney',
-	mixins: [mixin]
-}
-</script>
-
-<style scoped></style>
+<template>
+	<span>{{ getFooterData() }}</span>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeFooterInput',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		return {
+			...useCell
+		}
+	}
+})
+</script>
+
+<style scoped></style>

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

@@ -1,20 +1,30 @@
-<template>
-	<div v-if="rprops.bill" class="header-bill-box">
-		<template v-for="(bil, bilindex) in billGroups" :key="bilindex">
-			<span class="cell-bill-number" :class="getBillClass(bil)">{{ getBillValue(bilindex, true) }}</span>
-		</template>
-	</div>
-	<template v-else>
-		<span class="blue">{{ getFooterData() }}</span>
-	</template>
-</template>
-
-<script>
-import mixin from '../mixin/cell-mixin'
-export default {
-	name: 'VxeFooterMoney',
-	mixins: [mixin]
-}
-</script>
-
-<style scoped></style>
+<template>
+	<div v-if="rprops.bill" class="header-bill-box">
+		<template v-for="(bil, bilindex) in billGroups" :key="bilindex">
+			<span class="cell-bill-number" :class="getBillClass(bil)">{{ getBillValue(bilindex, true) }}</span>
+		</template>
+	</div>
+	<template v-else>
+		<span class="blue">{{ getFooterData() }}</span>
+	</template>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeFooterMoney',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		return {
+			...useCell
+		}
+	}
+})
+</script>
+
+<style scoped></style>

package/packages/vxeTable/render/globalRenders.jsx

@@ -479,7 +479,7 @@ const filterRenders = {
 			const { data } = option
 			const { rname, rprops, property } = column
 			if (publicRendersNames.expendRenders.includes(rname)) {
-				let { rtext } = $table.$vUtils.formatRender(cellValue, property, row, rname, rprops, $table)
+				let { rtext } = utils.formatRender(cellValue, property, row, rname, rprops, { $vUtils: utils })
 				return String(rtext).toLowerCase().indexOf(data.toLowerCase()) > -1
 			}
 			return String(cellValue).toLowerCase().indexOf(data.toLowerCase()) > -1

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

@@ -1,21 +1,31 @@
-<template>
-	<span>
-		{{ rparams.column.title }}
-		<span v-if="moneyUnitText" class="header-money-unit-text">({{ moneyUnitText }})</span>
-	</span>
-	<div v-if="rprops.bill" class="header-bill-box">
-		<template v-for="(bil, bilindex) in billGroups" :key="bilindex">
-			<span class="cell-bill-number" :class="getBillClass(bil)">{{ bil.shortText }}</span>
-		</template>
-	</div>
-</template>
-
-<script>
-import mixin from '../mixin/cell-mixin'
-export default {
-	name: 'VxeHeaderMoney',
-	mixins: [mixin]
-}
-</script>
-
-<style scoped></style>
+<template>
+	<span>
+		{{ rparams.column.title }}
+		<span v-if="moneyUnitText" class="header-money-unit-text">({{ moneyUnitText }})</span>
+	</span>
+	<div v-if="rprops.bill" class="header-bill-box">
+		<template v-for="(bil, bilindex) in billGroups" :key="bilindex">
+			<span class="cell-bill-number" :class="getBillClass(bil)">{{ bil.shortText }}</span>
+		</template>
+	</div>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeHeaderMoney',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+
+		return {
+			...useCell
+		}
+	}
+})
+</script>
+
+<style scoped></style>