sh-view 2.1.0 → 2.2.0

package/packages/components/global-components/sh-tag/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="sh-tag" :class="classes" :style="[borderStyle, backgroundStyle]" @click.stop="check">
 		<span v-if="type === 'dot'" class="sh-tag-other"><span class="sh-tag-dot" :style="[backgroundStyle]"></span></span>
-		<span class="sh-tag-text" :class="textClasses" :style="[fontStyle]"><slot></slot></span>
+		<span class="sh-tag-text" :style="[fontStyle]"><slot></slot></span>
 		<a v-if="closable" class="sh-tag-other sh-tag-close" :style="[borderStyle]" @click="close">
 			<slot name="close"><sh-icon type="ios-close"></sh-icon></slot>
 		</a>
@@ -9,6 +9,7 @@
 </template>
 
 <script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
 const colorMap = {
 	default: 'var(-vxe-table-header-background-color)',
 	primary: 'var(--vxe-primary-color)',
@@ -22,7 +23,7 @@ const fontColorMap = {
 const borderColorMap = {
 	default: 'null'
 }
-export default {
+export default defineComponent({
 	name: 'ShTag',
 	props: {
 		closable: {
@@ -57,61 +58,61 @@ export default {
 		}
 	},
 	emits: ['change', 'close'],
-	data() {
-		return {
-			isChecked: this.checked
-		}
-	},
-	computed: {
-		colorIn() {
-			return this.color || 'default'
-		},
-		colorRgb() {
-			return colorMap[this.colorIn] || this.$vUtils.lighten(this.colorIn)
-		},
-		isCustom() {
-			return !!colorMap[this.colorIn]
-		},
-		fontStyle() {
-			return { color: this.isCustom && !this.type ? fontColorMap[this.colorIn] || '#fff' : this.colorRgb }
-		},
-		borderStyle() {
-			return { borderWidth: '1px', borderStyle: 'solid', borderColor: borderColorMap[this.colorIn] || this.colorRgb }
-		},
-		backgroundStyle() {
-			if (this.isCustom) return { backgroundColor: this.colorRgb, color: '#fff' }
-			return { backgroundColor: this.$vUtils.lighten(this.colorIn, this.opacity) }
-		},
-		classes() {
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const isChecked = ref(props.checked)
+		const colorIn = computed(() => props.color || 'default')
+		const colorRgb = computed(() => colorMap[colorIn.value] || $vUtils.lighten(colorIn.value))
+		const isCustom = computed(() => !!colorMap[colorIn.value])
+		const fontStyle = computed(() => {
+			return { color: isCustom.value && !props.type ? fontColorMap[colorIn.value] || '#fff' : colorRgb.value }
+		})
+		const borderStyle = computed(() => {
+			return { borderWidth: '1px', borderStyle: 'solid', borderColor: borderColorMap[colorIn.value] || colorRgb.value }
+		})
+		const backgroundStyle = computed(() => {
+			if (isCustom.value) return { backgroundColor: colorRgb.value, color: '#fff' }
+			return { backgroundColor: $vUtils.lighten(colorIn.value, props.opacity) }
+		})
+		const classes = computed(() => {
 			return {
-				[`${this.size}`]: !!this.size,
-				[`${this.type}`]: !!this.type,
-				[`closable`]: this.closable,
-				[`checked`]: this.isChecked,
-				[`checkable`]: this.checkable
+				[`${props.size}`]: !!props.size,
+				[`${props.type}`]: !!props.type,
+				[`closable`]: props.closable,
+				[`checked`]: isChecked.value,
+				[`checkable`]: props.checkable
 			}
-		},
-		textClasses() {
-			return {}
+		})
+
+		const close = event => {
+			emit('close', event, props.name)
 		}
-	},
-	watch: {
-		checked(val) {
-			this.isChecked = val
+		const check = () => {
+			if (!props.checkable) return
+			isChecked.value = !isChecked.value
+			emit('change', isChecked.value, props.name)
 		}
-	},
-	methods: {
-		close(event) {
-			this.$emit('close', event, this.name)
-		},
-		check() {
-			if (!this.checkable) return
-			const checked = !this.isChecked
-			this.isChecked = checked
-			this.$emit('change', checked, this.name)
+
+		watch(
+			() => props.checked,
+			value => {
+				isChecked.value = val
+			}
+		)
+
+		return {
+			classes,
+			borderStyle,
+			backgroundStyle,
+			fontStyle,
+			check,
+			close
 		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">

package/packages/components/global-components/sh-toolbar/index.vue

@@ -25,7 +25,8 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
+export default defineComponent({
 	name: 'ShToolbar',
 	props: {
 		modelValue: {
@@ -89,67 +90,72 @@ export default {
 		}
 	},
 	emits: ['update:modelValue', 'left', 'right', 'tool'],
-	data() {
-		return {
-			leftActive: this.modelValue
-		}
-	},
-	computed: {
-		leftBtns() {
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const leftActive = ref(props.modelValue)
+
+		const leftBtns = computed(() => {
 			let lBtns = []
-			let { leftContain, leftConfig } = this
-			if (leftContain && Array.isArray(leftContain)) {
-				lBtns = leftContain.map(item => {
-					return leftConfig.find(btn => btn.code === item)
-				})
+			if (props.leftContain && Array.isArray(props.leftContain)) {
+				lBtns = props.leftContain.map(item => props.leftConfig.find(btn => btn.code === item))
 			}
 			return lBtns
-		},
-		rightBtns() {
+		})
+		const rightBtns = computed(() => {
 			let rBtns = []
-			let { rightConfig, relation, leftActive, leftBtns } = this
-			if (rightConfig && Array.isArray(rightConfig)) {
-				rBtns = rightConfig
+			if (props.rightConfig && Array.isArray(props.rightConfig)) {
+				rBtns = props.rightConfig
 			}
-			let leftCode = leftBtns.find(btn => btn.value === leftActive)
-			if (relation && leftCode) {
+			let leftCode = leftBtns.value.find(btn => btn.value === leftActive.value)
+			if (props.relation && leftCode) {
 				rBtns = rBtns.filter(item => item.code && item.code.split(',').includes(leftCode.code))
 			}
 			return rBtns
-		},
-		toolBtns() {
+		})
+		const toolBtns = computed(() => {
 			let toolBtns = []
-			let { toolsContain, toolsConfig } = this
-			if (toolsContain && Array.isArray(toolsContain)) {
-				toolBtns = toolsContain.map(item => {
-					return toolsConfig.find(btn => btn.code === item)
-				})
+			if (props.toolsContain && Array.isArray(props.toolsContain)) {
+				toolBtns = props.toolsContain.map(item => props.toolsConfig.find(btn => btn.code === item))
 			}
 			return toolBtns
+		})
+
+		const handleLeftBtn = ({ label }) => {
+			let btnObj = props.leftConfig.find(item => item.value === label)
+			emitValue()
+			emit('left', label, btnObj)
 		}
-	},
-	watch: {
-		modelValue(nv, ov) {
-			this.leftActive = nv
+		const handleRightBtn = btn => {
+			emit('right', btn.value, btn)
 		}
-	},
-	methods: {
-		handleLeftBtn({ label }) {
-			let btnObj = this.leftConfig.find(item => item.value === label)
-			this.emitValue()
-			this.$emit('left', label, btnObj)
-		},
-		handleRightBtn(btn) {
-			this.$emit('right', btn.value, btn)
-		},
-		handleToolBtn(btn) {
-			this.$emit('tool', btn)
-		},
-		emitValue() {
-			this.$emit('update:modelValue', this.leftActive)
+		const handleToolBtn = btn => {
+			emit('tool', btn)
+		}
+		const emitValue = () => {
+			emit('update:modelValue', leftActive.value)
+		}
+
+		watch(
+			() => props.modelValue,
+			nv => {
+				leftActive.value = nv
+			}
+		)
+
+		return {
+			leftActive,
+			toolBtns,
+			leftBtns,
+			rightBtns,
+			handleToolBtn,
+			handleLeftBtn,
+			handleRightBtn
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss">

package/packages/components/global-components/sh-tree/components/table-tree.vue

@@ -1,7 +1,7 @@
 <template>
 	<vxe-grid
 		v-if="treeServerComplate && !queryErrorText"
-		ref="vxeTreeTable"
+		ref="tableRef"
 		:key="renderKey"
 		:class="{ 'sh-vxe-tree-table': true, 'is--hidecheck': globalConfig.checkHide }"
 		v-bind="tableConfigIn"
@@ -19,6 +19,7 @@
 </template>
 
 <script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted } from 'vue'
 // 树组件表格默认配置
 const tableConfigDefault = {
 	autoResize: true,
@@ -44,105 +45,73 @@ const tableConfigDefault = {
 		gt: 20
 	}
 }
-
 import mixinProps from '../mixin/treeProps'
-export default {
+export default defineComponent({
 	name: 'TableTree',
-	mixins: [mixinProps],
-	props: {},
-	emits: ['select', 'datacall'],
-	data() {
-		return {
-			// 树公共属性
-			renderKey: 1,
-			filterData: null,
-			filterChangeDebounce: this.$vUtils.debounce(this.handleMyTableFilter, 500),
-			treeServerComplate: false,
-			treeLoading: false,
-			treeData: this.options,
-			treeValue: [],
-			queryCacheParams: null,
-			queryErrorText: null
-		}
+	props: {
+		...mixinProps
 	},
-	computed: {
-		checkWidth() {
-			return this.globalConfig.columns ? this.globalConfig?.defaultWidth || 150 : '100%'
-		},
-		checkColumnProps() {
-			let resultProps = { field: this.labelField, width: this.checkWidth, type: this.multiple ? 'checkbox' : 'radio', treeNode: true, slots: { default: 'treeNodeCell' } }
-			resultProps.title = this.labelTitle || this.multiple ? '全部' : ''
+	emits: ['select', 'datacall'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils, $http, $vxePluginNames } = proxy
+		const { emit, slots } = context
+
+		const tableRef = ref()
+		const renderKey = ref(1)
+		const filterData = ref(null)
+		const treeServerComplate = ref(false)
+		const treeLoading = ref(false)
+		const treeData = ref(props.options)
+		const treeValue = ref([])
+		const queryCacheParams = ref(null)
+		const queryErrorText = ref(null)
+
+		const checkWidth = computed(() => {
+			return props.globalConfig.columns ? props.globalConfig?.defaultWidth || 150 : '100%'
+		})
+		const checkColumnProps = computed(() => {
+			let resultProps = { field: props.labelField, width: checkWidth.value, type: props.multiple ? 'checkbox' : 'radio', treeNode: true, slots: { default: 'treeNodeCell' } }
+			resultProps.title = props.labelTitle || props.multiple ? '全部' : ''
 			return resultProps
-		},
-		tableProps() {
+		})
+		const tableProps = computed(() => {
 			return {
-				height: this.isSelect ? '230px' : this.height,
-				size: this.size,
-				loading: this.loading || this.treeLoading,
-				data: this.filterData || this.treeData,
-				columns: [this.checkColumnProps].concat(this.globalConfig?.columns || [])
+				height: props.isSelect ? '230px' : props.height,
+				size: props.size,
+				loading: props.loading || treeLoading.value,
+				data: filterData.value || treeData.value,
+				columns: [checkColumnProps.value].concat(props.globalConfig?.columns || [])
 			}
-		},
-		tableConfigIn() {
+		})
+		const tableConfigIn = computed(() => {
 			let resultConfig = {
-				rowConfig: { isCurrent: false, keyField: this.nodeKey },
-				radioConfig: { checkRowKey: this.modelValue[0], labelField: this.labelField, checkMethod: this.tableCheckMethods },
-				checkboxConfig: { checkRowKeys: this.modelValue, labelField: this.labelField, checkMethod: this.tableCheckMethods },
-				treeConfig: { rowField: this.nodeKey },
+				rowConfig: { isCurrent: false, keyField: props.nodeKey },
+				radioConfig: { checkRowKey: props.modelValue[0], labelField: props.labelField, checkMethod: tableCheckMethods },
+				checkboxConfig: { checkRowKeys: props.modelValue, labelField: props.labelField, checkMethod: tableCheckMethods },
+				treeConfig: { rowField: props.nodeKey },
 				editConfig: { enabled: false }
 			}
-			resultConfig = this.$vUtils.merge(resultConfig, tableConfigDefault, this.globalConfig)
-			if (this.multiple) {
-				if (this.globalConfig.hasAll) resultConfig.showHeader = true
+			resultConfig = $vUtils.merge(resultConfig, tableConfigDefault, props.globalConfig)
+			if (props.multiple) {
+				if (props.globalConfig.hasAll) resultConfig.showHeader = true
 				resultConfig.radioConfig = null
 			} else {
 				resultConfig.checkboxConfig = null
 			}
-			return Object.assign(resultConfig, this.tableProps)
-		}
-	},
-	watch: {
-		modelValue() {
-			this.initSelection(true)
-		},
-		filterText: {
-			handler(newvalue, oldValue) {
-				this.filterChangeDebounce(newvalue)
-			},
-			deep: true,
-			immediate: true
-		},
-		options: {
-			handler(newvalue, oldValue) {
-				this.treeData = newvalue
-			},
-			deep: true,
-			immediate: true
-		},
-		treeData: {
-			handler(newvalue, oldValue) {
-				this.$emit('datacall', newvalue)
-			},
-			immediate: true
-		}
-	},
-	mounted() {
-		this.initMounted()
-	},
-	methods: {
-		tableRef() {
-			return this.$refs.vxeTreeTable
-		},
-		async initMounted() {
+			return Object.assign(resultConfig, tableProps.value)
+		})
+
+		const initMounted = async () => {
 			// 初始化获取服务配置数据
-			await this.getServerConfigDataSourse()
-			this.initSelection()
-		},
+			await getServerConfigDataSourse()
+			initSelection()
+		}
 		// 获取请求配置数据
-		async getServerConfigDataSourse() {
-			const { serverConfig, serverParams, parseParams, queryCacheParams, serverCache, valueData, globalConfig, multiple, nodeKey, labelField, $vUtils, $http } = this
+		const getServerConfigDataSourse = async () => {
+			const { serverConfig, serverParams, parseParams, queryCacheParams, serverCache, valueData, globalConfig, multiple, nodeKey, labelField } = props
 			if (!serverConfig.url) {
-				this.treeServerComplate = true
+				treeServerComplate.value = true
 				return true
 			}
 			let params = $vUtils.clone(serverParams, true)
@@ -155,14 +124,14 @@ export default {
 				}
 			})
 			if (!$vUtils.isEqual(queryCacheParams, params)) {
-				this.treeServerComplate = false
+				treeServerComplate.value = false
 			}
-			if (serverCache && this.treeServerComplate) {
+			if (serverCache && treeServerComplate.value) {
 				return true
 			}
-			this.queryErrorText = null
-			this.queryCacheParams = params
-			this.treeLoading = true
+			queryErrorText.value = null
+			queryCacheParams.value = params
+			treeLoading.value = true
 			let reqOptions = {
 				baseURL: serverConfig.baseURL
 			}
@@ -171,110 +140,154 @@ export default {
 				let treeRes = await $http[method](serverConfig.url, params, reqOptions)
 				if (treeRes && [10000, 100000].includes(+treeRes.code)) {
 					let treeAllNode = globalConfig?.hasAll && !multiple ? [{ [nodeKey]: 0, [labelField]: '全部', isleaf: 1, code: '' }] : []
-					let treeData = treeAllNode.concat(treeRes.data)
+					let treeResData = treeAllNode.concat(treeRes.data)
 					if (globalConfig?.treeConfig?.transform) {
-						treeData = $vUtils.toTreeArray(treeData, { clear: true })
+						treeResData = $vUtils.toTreeArray(treeResData, { clear: true })
 					}
-					this.treeData = treeData
+					treeData.value = treeResData
 				} else {
 					throw new Error(`树节点信息获取失败：${treeRes?.message}`)
 				}
 			} catch (e) {
-				this.queryErrorText = e.message || e
+				queryErrorText.value = e.message || e
 			}
-			this.treeLoading = false
-			this.treeServerComplate = true
-		},
-		initSelection(watch) {
-			let { modelValue, treeValue, tableRef, isSelect, $vUtils } = this
-			let nodeKey = this.nodeKey || 'id'
+			treeLoading.value = false
+			treeServerComplate.value = true
+		}
+		const initSelection = isWatch => {
+			let { modelValue, isSelect } = props
+			let nodeKey = props.nodeKey || 'id'
 			setTimeout(() => {
-				if (!tableRef() || !modelValue?.length) return
-				if (watch) {
-					if (!$vUtils.isEqual(modelValue, treeValue)) this.renderKey++
+				if (!tableRef.value || !modelValue?.length) return
+				if (isWatch) {
+					if (!$vUtils.isEqual(modelValue, treeValue.value)) renderKey.value++
 				} else {
-					tableRef().scrollToRow({ [nodeKey]: modelValue[0] })
+					tableRef.value.scrollToRow({ [nodeKey]: modelValue[0] })
 				}
 			})
-		},
+		}
 		// 单选框变化
-		onRadioChange(obj) {
-			let nodeKey = this.nodeKey || 'id'
+		const onRadioChange = obj => {
+			let nodeKey = props.nodeKey || 'id'
 			let { newValue } = obj
 			let selectedKeys = []
 			if (newValue && (newValue[nodeKey] || newValue[nodeKey] === 0)) {
 				selectedKeys.push(newValue[nodeKey])
 			}
-			this.treeSelectedChange(selectedKeys, newValue ? [newValue] : [], obj)
-		},
+			treeSelectedChange(selectedKeys, newValue ? [newValue] : [], obj)
+		}
 		// 复选框变化
-		onSelectionChange(obj) {
-			let nodeKey = this.nodeKey || 'id'
+		const onSelectionChange = obj => {
+			let nodeKey = props.nodeKey || 'id'
 			let { records = [] } = obj
 			let selectedKeys = []
 			if (Array.isArray(records) && records.length > 0) {
 				selectedKeys = records.map(item => item[nodeKey])
 			}
-			this.treeSelectedChange(selectedKeys, records, obj)
-		},
+			treeSelectedChange(selectedKeys, records, obj)
+		}
 		// 树变化提交
-		treeSelectedChange(selectedKeys, selectedRows, obj) {
-			this.treeValue = selectedKeys
-			this.$emit('select', selectedKeys, selectedRows, obj)
-		},
+		const treeSelectedChange = (selectedKeys, selectedRows, obj) => {
+			treeValue.value = selectedKeys
+			emit('select', selectedKeys, selectedRows, obj)
+		}
 		// 全局搜索过滤事件
-		handleMyTableFilter(text) {
-			const that = this
-			const { treeData, labelField, labelFormat, $vUtils, $vxePluginNames, tableRef } = this
+		const handleMyTableFilter = text => {
+			const { labelField, labelFormat } = props
 			let filterText = $vUtils.toValueString(text).trim().toLowerCase()
-			let filterData = null
+			let searchData = null
 			if (filterText) {
 				let noSearchArr = ['$vGlobalOption', '$vImg', '$vCheckbox', '$vRadio', '$vUpload', '$vCode', 'seq', 'checkbox', 'radio']
 				const searchProps = [{ rkey: labelField, format: labelFormat }]
-				let tableColumnsAll = tableRef().getColumns()
+				let tableColumnsAll = tableRef.value.getColumns()
 				tableColumnsAll.forEach(col => {
 					let renderObj = col.cellRender || col.editRender || col.itemRender
 					if (col.property && renderObj && renderObj.name && !noSearchArr.includes(renderObj.name) && !noSearchArr.includes(col.type)) {
 						searchProps.push({ rkey: col.property, rname: renderObj.name, rprops: Object.assign({}, renderObj.props, col.rprops) })
 					}
 				})
-				filterData = $vUtils.searchTree(treeData, row => {
+				searchData = $vUtils.searchTree(treeData.value, row => {
 					return searchProps.some(item => {
 						let cellValue = item.format ? $vUtils.format(item.format, row) : $vUtils.get(row, item.rkey)
 						if ($vxePluginNames.expendRenders && $vxePluginNames.expendRenders.includes(item.rname)) {
-							let { rtext } = $vUtils.formatRender(cellValue, item.rkey, row, item.rname, item.rprops, that)
+							let { rtext } = $vUtils.formatRender(cellValue, item.rkey, row, item.rname, item.rprops, proxy)
 							return String(rtext).toLowerCase().indexOf(filterText) > -1
 						}
 						return $vUtils.trim(cellValue).toLowerCase().indexOf(filterText) > -1
 					})
 				})
 			}
-			if (that.filterData === null && !filterText) {
+			if (filterData.value === null && !filterText) {
 				return
 			}
-			that.filterData = filterData
-			if (filterData && filterData.length > 0) {
-				tableRef().setTreeExpand(filterData[0], true)
+			filterData.value = searchData
+			if (filterData.value && filterData.value.length > 0) {
+				tableRef.value.setTreeExpand(filterData.value[0], true)
 			}
-		},
+		}
 		// 获取选中的数据
-		getSelectionData() {
-			return this.tableRef().getCheckboxRecords()
-		},
-		tableCheckMethods({ row }) {
-			if (this.isLeaf && !this.multiple) {
+		const getSelectionData = () => {
+			return tableRef.value.getCheckboxRecords()
+		}
+		const tableCheckMethods = ({ row }) => {
+			if (props.isLeaf && !props.multiple) {
 				return +row.isleaf === 1 || +row.isLeaf === 1
 			}
 			return true
-		},
-		getTreeNodeCellContent({ row, column }) {
-			if (this.labelFormat) {
-				return this.$vUtils.format(this.labelFormat, row)
+		}
+		const getTreeNodeCellContent = ({ row, column }) => {
+			if (props.labelFormat) {
+				return $vUtils.format(props.labelFormat, row)
+			}
+			return $vUtils.get(row, column.property)
+		}
+
+		const filterChangeDebounce = $vUtils.debounce(handleMyTableFilter, 500)
+
+		watch(
+			() => props.modelValue,
+			() => {
+				initSelection(true)
 			}
-			return this.$vUtils.get(row, column.property)
+		)
+		watch(
+			() => props.filterText,
+			nv => {
+				filterChangeDebounce(nv)
+			},
+			{ deep: true, immediate: true }
+		)
+		watch(
+			() => props.options,
+			nv => {
+				treeData.value = nv
+			},
+			{ immediate: true }
+		)
+		watch(
+			() => treeData.value,
+			nv => {
+				emit('datacall', nv)
+			},
+			{ immediate: true }
+		)
+
+		onMounted(() => {
+			initMounted()
+		})
+
+		return {
+			tableRef,
+			renderKey,
+			treeServerComplate,
+			queryErrorText,
+			tableConfigIn,
+			onRadioChange,
+			onSelectionChange,
+			getTreeNodeCellContent
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss" scoped></style>