sh-view 1.7.5 → 2.0.0

package/packages/components/global-components/{sh-vxe-toolbar → sh-toolbar}/index.vue

@@ -1,172 +1,177 @@
-<template>
-	<div class="sh-vxe-toolbar">
-		<div class="toolbar-left">
-			<slot name="left"></slot>
-			<template v-if="isTool">
-				<template v-for="(toolBtn, toolBtnIndex) in toolBtns" :key="toolBtnIndex">
-					<vxe-button v-bind="toolBtn" @click="handleToolBtn(toolBtn)"></vxe-button>
-				</template>
-			</template>
-			<vxe-radio-group v-else v-model="leftActive">
-				<template v-for="(leftBtn, leftBtnIndex) in leftBtns" :key="leftBtnIndex">
-					<vxe-radio-button v-bind="leftBtn" :label="leftBtn.value"></vxe-radio-button>
-				</template>
-			</vxe-radio-group>
-			<slot name="leftr"></slot>
-		</div>
-		<div class="toolbar-right">
-			<slot name="rightl"></slot>
-			<template v-for="(rightBtn, rightBtnIndex) in rightBtns" :key="rightBtnIndex">
-				<vxe-button v-bind="rightBtn" @click="handleRightBtn(rightBtn)"></vxe-button>
-			</template>
-			<slot name="right"></slot>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShToolbar',
-	props: {
-		modelValue: {
-			type: String
-		},
-		relation: {
-			type: Boolean
-		},
-		leftContain: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		leftConfig: {
-			type: Array,
-			default() {
-				return [
-					{ value: '0', code: 'wss', content: '未送审' },
-					{ value: '-1', code: 'bth', content: '被退回' },
-					{ value: '1', code: 'yss', content: '已送审' },
-					{ value: '999', code: 'ygd', content: '已归档' },
-					{ value: '-999', code: 'qb', content: '全部' },
-					{ value: '1', code: 'dsh', content: '待审核' },
-					{ value: '999', code: 'ysh', content: '已审核' }
-				]
-			}
-		},
-		rightConfig: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		isTool: {
-			type: Boolean
-		},
-		toolsContain: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		toolsConfig: {
-			type: Array,
-			default() {
-				return [
-					{ code: 'add', content: '新增', status: 'primary', icon: 'vxe-icon-add' },
-					{ code: 'edit', content: '修改', status: 'warning', icon: 'vxe-icon-edit' },
-					{ code: 'delete', content: '删除', status: 'danger', icon: 'vxe-icon-delete' },
-					{ code: 'detail', content: '查看', status: '', icon: 'vxe-icon-information' },
-					{ code: 'batch-add', content: '批量新增', status: 'primary', icon: 'vxe-icon-add' },
-					{ code: 'batch-edit', content: '批量修改', status: 'warning', icon: 'vxe-icon-edit' },
-					{ code: 'batch-delete', content: '批量删除', status: 'danger', icon: 'vxe-icon-delete' },
-					{ code: 'batch-detail', content: '查看', status: '', icon: 'vxe-icon-information' }
-				]
-			}
-		}
-	},
-	emits: ['update:modelValue', 'left', 'right', 'tool'],
-	data() {
-		return {
-			leftActive: this.modelValue
-		}
-	},
-	computed: {
-		leftBtns() {
-			let lBtns = []
-			let { leftContain, leftConfig } = this
-			if (leftContain && Array.isArray(leftContain)) {
-				lBtns = leftContain.map(item => {
-					return leftConfig.find(btn => btn.code === item)
-				})
-			}
-			return lBtns
-		},
-		rightBtns() {
-			let rBtns = []
-			let { rightConfig } = this
-			if (rightConfig && Array.isArray(rightConfig)) {
-				rBtns = rightConfig
-			}
-			if (this.relation) {
-				rBtns = rBtns.filter(item => item.code && item.code.split(',').includes(this.leftActive))
-			}
-			return rBtns
-		},
-		toolBtns() {
-			let toolBtns = []
-			let { toolsContain, toolsConfig } = this
-			if (toolsContain && Array.isArray(toolsContain)) {
-				toolBtns = toolsContain.map(item => {
-					return toolsConfig.find(btn => btn.code === item)
-				})
-			}
-			return toolBtns
-		}
-	},
-	watch: {
-		modelValue(nv, ov) {
-			this.leftActive = nv
-		},
-		leftActive(nv, ov) {
-			this.$emit('update:modelValue', nv)
-			this.handleLeftBtn(nv)
-		}
-	},
-	methods: {
-		handleLeftBtn(value) {
-			let btnObj = this.leftConfig.find(item => item.value === value)
-			this.$emit('left', value, btnObj)
-		},
-		handleRightBtn(btn) {
-			this.$emit('right', btn.value, btn)
-		},
-		handleToolBtn(btn) {
-			this.$emit('tool', btn)
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-.sh-vxe-toolbar {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 10px 5px;
-	box-sizing: border-box;
-	background-color: var(--body-background);
-	.toolbar-left {
-		flex: 1;
-		white-space: nowrap;
-		.vxe-radio-button > input:checked + .vxe-radio--label {
-			border-color: var(--theme-color);
-			background: linear-gradient(-10deg, var(--theme-color), var(--theme-weak-color));
-		}
-	}
-	.toolbar-right {
-		flex: 0;
-		white-space: nowrap;
-	}
-}
-</style>
+<template>
+	<div class="sh-vxe-toolbar">
+		<div class="toolbar-left">
+			<slot name="left"></slot>
+			<template v-if="isTool">
+				<template v-for="(toolBtn, toolBtnIndex) in toolBtns" :key="toolBtnIndex">
+					<vxe-button v-ripple v-bind="toolBtn" @click="handleToolBtn(toolBtn)"></vxe-button>
+				</template>
+			</template>
+			<vxe-radio-group v-else v-model="leftActive" @change="handleLeftBtn">
+				<template v-for="(leftBtn, leftBtnIndex) in leftBtns" :key="leftBtnIndex">
+					<vxe-radio-button v-ripple v-bind="leftBtn" :label="leftBtn.value"></vxe-radio-button>
+				</template>
+			</vxe-radio-group>
+			<slot name="leftr"></slot>
+		</div>
+		<div class="toolbar-right">
+			<slot name="rightl"></slot>
+			<template v-for="(rightBtn, rightBtnIndex) in rightBtns" :key="rightBtnIndex">
+				<vxe-button v-ripple v-bind="rightBtn" @click="handleRightBtn(rightBtn)"></vxe-button>
+			</template>
+			<slot name="right"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShToolbar',
+	props: {
+		modelValue: {
+			type: String
+		},
+		relation: {
+			type: Boolean
+		},
+		leftContain: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		leftConfig: {
+			type: Array,
+			default() {
+				return [
+					{ value: '1', code: 'wss', content: '未送审' },
+					{ value: '2', code: 'bth', content: '被退回' },
+					{ value: '3', code: 'yss', content: '已送审' },
+					{ value: '4', code: 'ygd', content: '已归档' },
+					{ value: '5', code: 'qb', content: '全部' },
+					{ value: '6', code: 'dsh', content: '待审核' },
+					{ value: '7', code: 'ysh', content: '已审核' }
+				]
+			}
+		},
+		rightConfig: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		isTool: {
+			type: Boolean
+		},
+		toolsContain: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		toolsConfig: {
+			type: Array,
+			default() {
+				return [
+					{ code: 'add', content: '新增', status: 'primary', icon: 'vxe-icon-add' },
+					{ code: 'edit', content: '修改', status: 'warning', icon: 'vxe-icon-edit' },
+					{ code: 'delete', content: '删除', status: 'danger', icon: 'vxe-icon-delete' },
+					{ code: 'detail', content: '查看', status: '', icon: 'vxe-icon-information' },
+					{ code: 'export', content: '导出', status: 'success', icon: 'vxe-icon-download' },
+					{ code: 'import', content: '导入', status: 'primary', icon: 'vxe-icon-upload' },
+					{ code: 'print', content: '打印', status: 'warning', icon: 'vxe-icon-print' },
+					{ code: 'batch-add', content: '批量新增', status: 'primary', icon: 'vxe-icon-add' },
+					{ code: 'batch-edit', content: '批量修改', status: 'warning', icon: 'vxe-icon-edit' },
+					{ code: 'batch-delete', content: '批量删除', status: 'danger', icon: 'vxe-icon-delete' },
+					{ code: 'batch-detail', content: '查看', status: '', icon: 'vxe-icon-information' }
+				]
+			}
+		}
+	},
+	emits: ['update:modelValue', 'left', 'right', 'tool'],
+	data() {
+		return {
+			leftActive: this.modelValue
+		}
+	},
+	computed: {
+		leftBtns() {
+			let lBtns = []
+			let { leftContain, leftConfig } = this
+			if (leftContain && Array.isArray(leftContain)) {
+				lBtns = leftContain.map(item => {
+					return leftConfig.find(btn => btn.code === item)
+				})
+			}
+			return lBtns
+		},
+		rightBtns() {
+			let rBtns = []
+			let { rightConfig, relation, leftActive, leftBtns } = this
+			if (rightConfig && Array.isArray(rightConfig)) {
+				rBtns = rightConfig
+			}
+			let leftCode = leftBtns.find(btn => btn.value === leftActive)
+			if (relation && leftCode) {
+				rBtns = rBtns.filter(item => item.code && item.code.split(',').includes(leftCode.code))
+			}
+			return rBtns
+		},
+		toolBtns() {
+			let toolBtns = []
+			let { toolsContain, toolsConfig } = this
+			if (toolsContain && Array.isArray(toolsContain)) {
+				toolBtns = toolsContain.map(item => {
+					return toolsConfig.find(btn => btn.code === item)
+				})
+			}
+			return toolBtns
+		}
+	},
+	watch: {
+		modelValue(nv, ov) {
+			this.leftActive = nv
+		}
+	},
+	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)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.sh-vxe-toolbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10px 5px;
+	box-sizing: border-box;
+	background-color: var(--vxe-table-body-background-color);
+	width: 100%;
+	.toolbar-left {
+		flex: 1;
+		white-space: nowrap;
+		.vxe-radio-button > input:checked + .vxe-radio--label {
+			border-color: var(--vxe-primary-color);
+			background: linear-gradient(-10deg, var(--vxe-primary-color), var(--vxe-primary-lighten-color));
+		}
+	}
+	.toolbar-right {
+		flex: 0;
+		white-space: nowrap;
+	}
+}
+</style>

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

@@ -0,0 +1,280 @@
+<template>
+	<vxe-grid
+		v-if="treeServerComplate && !queryErrorText"
+		ref="vxeTreeTable"
+		:key="renderKey"
+		:class="{ 'sh-vxe-tree-table': true, 'is--hidecheck': globalConfig.checkHide }"
+		v-bind="tableConfigIn"
+		@radio-change="onRadioChange"
+		@checkbox-change="onSelectionChange"
+		@checkbox-all="onSelectionChange">
+		<template #treeNodeCell="scoped">
+			<span>{{ getTreeNodeCellContent(scoped) }}</span>
+		</template>
+		<template #empty>
+			<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
+		</template>
+	</vxe-grid>
+	<sh-result v-else-if="queryErrorText" class="sh-tree-result" type="error" :text="queryErrorText"></sh-result>
+</template>
+
+<script>
+// 树组件表格默认配置
+const tableConfigDefault = {
+	autoResize: true,
+	syncResize: true,
+	stripe: false,
+	size: 'small', //  medium / small / mini
+	border: 'inner',
+	showHeader: false,
+	showFooter: false,
+	showOverflow: true,
+	resizeConfig: {
+		refreshDelay: 100
+	},
+	columnConfig: {
+		width: 120
+	},
+	scrollX: {
+		enabled: true,
+		gt: 20
+	},
+	scrollY: {
+		enabled: true,
+		gt: 20
+	}
+}
+
+import mixinProps from '../mixin/treeProps'
+export default {
+	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
+		}
+	},
+	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 ? '全部' : ''
+			return resultProps
+		},
+		tableProps() {
+			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 || [])
+			}
+		},
+		tableConfigIn() {
+			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 },
+				editConfig: { enabled: false }
+			}
+			resultConfig = this.$vUtils.merge(resultConfig, tableConfigDefault, this.globalConfig)
+			if (this.multiple) {
+				if (this.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() {
+			// 初始化获取服务配置数据
+			await this.getServerConfigDataSourse()
+			this.initSelection()
+		},
+		// 获取请求配置数据
+		async getServerConfigDataSourse() {
+			const { serverConfig, serverParams, parseParams, queryCacheParams, serverCache, valueData, globalConfig, multiple, nodeKey, labelField, $vUtils, $http } = this
+			if (!serverConfig.url) {
+				this.treeServerComplate = true
+				return true
+			}
+			let params = $vUtils.clone(serverParams, true)
+			if (parseParams && typeof parseParams === 'function') {
+				params = parseParams(params)
+			}
+			Object.keys(params).forEach(key => {
+				if ($vUtils.getFormatKeys(params[key]).length > 0) {
+					params[key] = $vUtils.format(params[key], valueData)
+				}
+			})
+			if (!$vUtils.isEqual(queryCacheParams, params)) {
+				this.treeServerComplate = false
+			}
+			if (serverCache && this.treeServerComplate) {
+				return true
+			}
+			this.queryErrorText = null
+			this.queryCacheParams = params
+			this.treeLoading = true
+			let reqOptions = {
+				baseURL: serverConfig.baseURL
+			}
+			try {
+				let method = serverConfig?.type ? serverConfig.type.toLowerCase() : 'post'
+				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)
+					if (globalConfig?.treeConfig?.transform) {
+						treeData = $vUtils.toTreeArray(treeData, { clear: true })
+					}
+					this.treeData = treeData
+				} else {
+					throw new Error(`树节点信息获取失败：${treeRes?.message}`)
+				}
+			} catch (e) {
+				this.queryErrorText = e.message || e
+			}
+			this.treeLoading = false
+			this.treeServerComplate = true
+		},
+		initSelection(watch) {
+			let { modelValue, treeValue, tableRef, isSelect, $vUtils } = this
+			let nodeKey = this.nodeKey || 'id'
+			setTimeout(() => {
+				if (!tableRef() || !modelValue?.length) return
+				if (watch) {
+					if (!$vUtils.isEqual(modelValue, treeValue)) this.renderKey++
+				} else {
+					tableRef().scrollToRow({ [nodeKey]: modelValue[0] })
+				}
+			})
+		},
+		// 单选框变化
+		onRadioChange(obj) {
+			let nodeKey = this.nodeKey || 'id'
+			let { newValue } = obj
+			let selectedKeys = []
+			if (newValue && (newValue[nodeKey] || newValue[nodeKey] === 0)) {
+				selectedKeys.push(newValue[nodeKey])
+			}
+			this.treeSelectedChange(selectedKeys, newValue ? [newValue] : [], obj)
+		},
+		// 复选框变化
+		onSelectionChange(obj) {
+			let nodeKey = this.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, selectedRows, obj) {
+			this.treeValue = selectedKeys
+			this.$emit('select', selectedKeys, selectedRows, obj)
+		},
+		// 全局搜索过滤事件
+		handleMyTableFilter(text) {
+			const that = this
+			const { treeData, labelField, labelFormat, $vUtils, $vxePluginNames, tableRef } = this
+			let filterText = $vUtils.toValueString(text).trim().toLowerCase()
+			let filterData = null
+			if (filterText) {
+				let noSearchArr = ['$vGlobalOption', '$vImg', '$vCheckbox', '$vRadio', '$vUpload', '$vCode', 'seq', 'checkbox', 'radio']
+				const searchProps = [{ rkey: labelField, format: labelFormat }]
+				let tableColumnsAll = tableRef().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 => {
+					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)
+							return String(rtext).toLowerCase().indexOf(filterText) > -1
+						}
+						return $vUtils.trim(cellValue).toLowerCase().indexOf(filterText) > -1
+					})
+				})
+			}
+			if (that.filterData === null && !filterText) {
+				return
+			}
+			that.filterData = filterData
+			if (filterData && filterData.length > 0) {
+				tableRef().setTreeExpand(filterData[0], true)
+			}
+		},
+		// 获取选中的数据
+		getSelectionData() {
+			return this.tableRef().getCheckboxRecords()
+		},
+		tableCheckMethods({ row }) {
+			if (this.isLeaf && !this.multiple) {
+				return +row.isleaf === 1 || +row.isLeaf === 1
+			}
+			return true
+		},
+		getTreeNodeCellContent({ row, column }) {
+			if (this.labelFormat) {
+				return this.$vUtils.format(this.labelFormat, row)
+			}
+			return this.$vUtils.get(row, column.property)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped></style>

package/packages/components/global-components/sh-tree/css/index.scss

@@ -0,0 +1,54 @@
+.sh-tree{
+    position: relative;
+    width: 100%;
+    display: block;
+    padding: 0;
+    &.direct{
+        height: 100%;
+    }
+    &-content {
+        height: 100%;
+        &.has-filter {
+            height: calc(100% - 44px);
+        }
+    }
+    &-select{
+        vertical-align: top;
+        width: 100%;
+        &-input{
+            width: 100%;
+            > .vxe-input{
+                width: 100%;
+            }
+        }
+    }
+}
+
+.sh-tree-filter{
+    padding: 5px;
+    box-sizing: border-box;
+    background-color: var(--vxe-table-body-background-color);
+    &-input {
+        width: 100%;
+    }
+}
+
+.sh-tree-select-dropdown {
+    .tree-skeleton{
+        width: 100%;
+        height: 230px;
+    }
+}
+
+.sh-vxe-tree-table{
+    .is--disabled.vxe-radio, .vxe-table--render-default .is--disabled.vxe-cell--radio,
+    .is--disabled.vxe-checkbox, .vxe-table--render-default .is--disabled.vxe-cell--checkbox{
+        color: inherit;
+    }
+}
+
+.sh-tree-result{
+    position: relative;
+    top: 50%;
+    transform: translateY(-60%);
+}