sh-view 2.9.8 → 2.9.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.9.8",
+  "version": "2.9.11",
   "description": "基于vxe-table二次封装,更包含Alert,Badge,Card,CodeEditor,Col,Corner,CountTo,Drawer,Empty,Form,Header,Icon,List,Loading,Modal,Noticebar,Poptip,Progress,PullRefresh,Query,Result,Row,Split,Grid,Table,Tabs,Tag,Toolbar,Tree,Upload,WaterFall,WaterMark等丰富组件库",
   "main": "packages/index.js",
   "typings": "types/index.d.ts",
@@ -19,14 +19,14 @@
     "@codemirror/lang-javascript": "^6.1.9",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.5.2",
-    "@vxe-ui/plugin-export-pdf": "^4.0.9",
-    "@vxe-ui/plugin-export-xlsx": "^4.0.13",
-    "@vxe-ui/plugin-menu": "^4.0.7",
-    "@vxe-ui/plugin-render-wangeditor": "^4.0.3",
+    "@vxe-ui/plugin-export-pdf": "^4.2.4",
+    "@vxe-ui/plugin-export-xlsx": "^4.3.0",
+    "@vxe-ui/plugin-menu": "^4.1.0",
+    "@vxe-ui/plugin-render-wangeditor": "^4.0.5",
     "@wangeditor/editor": "^5.1.23",
     "@wolf-table/table": "^0.0.1",
     "babel-polyfill": "^6.26.0",
-    "codemirror": "^6.0.1",
+    "codemirror": "^6.0.2",
     "core-js": "^3.32.2",
     "countup.js": "^2.8.0",
     "cron-parser": "^4.8.1",
@@ -36,12 +36,12 @@
     "jszip": "^3.10.1",
     "lunar-typescript": "^1.6.10",
     "popper.js": "^1.16.1",
-    "sh-tools": "^2.2.15",
-    "vue": "^3.5.13",
+    "sh-tools": "^2.2.19",
+    "vue": "^3.5.20",
     "vue-masonry": "^0.16.0",
-    "vue-router": "^4.2.4",
-    "vxe-pc-ui": "^4.3.79",
-    "vxe-table": "^4.10.5"
+    "vue-router": "^4.5.1",
+    "vxe-pc-ui": "^4.9.6",
+    "vxe-table": "^4.16.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.9.0",

package/packages/components/index.js

@@ -33,7 +33,6 @@ import ShTree from './sh-tree/index.vue'
 import ShUpload from './sh-upload/index.vue'
 import ShWaterFall from './sh-water-fall/index.vue'
 import ShWaterMark from './sh-water-mark/index.vue'
-import { VxeButton, VxeInput, VxeTextarea, VxeSelect } from 'vxe-pc-ui'
 
 const components = {
 	ShAlert,
@@ -69,12 +68,7 @@ const components = {
 	ShTree,
 	ShUpload,
 	ShWaterFall,
-	ShWaterMark,
-
-	ShButton: VxeButton,
-	ShInput: VxeInput,
-	ShTextarea: VxeTextarea,
-	ShSelect: VxeSelect
+	ShWaterMark
 }
 
 const index = {

package/packages/components/sh-calendar/index.vue

@@ -2,8 +2,8 @@
 	<div class="sh-calendar">
 		<div v-if="header" class="sh-calendar-row sh-calendar-head">
 			<div class="info">
-				<sh-select v-if="type !== 'year'" v-bind="yearSelectConfig" @change="onYearChange" />
-				<sh-select v-if="!['month', 'year'].includes(type)" v-bind="monthSelectConfig" @change="onMonthChange"></sh-select>
+				<vxe-select v-if="type !== 'year'" v-bind="yearSelectConfig" @change="onYearChange" />
+				<vxe-select v-if="!['month', 'year'].includes(type)" v-bind="monthSelectConfig" @change="onMonthChange"></vxe-select>
 			</div>
 			<div class="extra">
 				<template v-for="item in headerHandles" :key="item.code">

package/packages/components/sh-date/index.vue

@@ -52,7 +52,7 @@ export default defineComponent({
 	props: {
 		modelValue: [String, Number, Date, Array],
 		type: { type: String, default: 'date' },
-		clearable: { type: Boolean },
+		clearable: { type: Boolean, default: true },
 		readonly: Boolean,
 		disabled: Boolean,
 		placeholder: String,

package/packages/components/sh-form/js/useForm.js

@@ -1,5 +1,5 @@
 import { computed, onBeforeMount, ref, watch } from 'vue'
-import { formulaReplaceAll, getFieldRules } from '../../sh-table/js/tableMethods'
+import { formulaReplaceAll, getFieldRules, transKeys, defaultProps } from '../../sh-table/js/tableMethods'
 
 // 表单默认配置
 const formConfigDefault = {
@@ -151,9 +151,16 @@ export default function (props, context, proxy, isForm) {
 				if (isItemTitle) Object.assign(tar, titleConfigDefault)
 				return tar
 			}
+			let rname = ori.renderName || '$vInput'
+			let rprops = Object.assign({}, defaultProps[rname], ori.renderProps)
+			transKeys.forEach(key => {
+				if (!$vUtils.isNone(rprops[key])) {
+					rprops[key] = Boolean(+rprops[key])
+				}
+			})
 			let renderConfig = {
-				name: ori.renderName || '$vInput',
-				props: Object.assign({}, ori.renderProps || {})
+				name: rname,
+				props: rprops
 			}
 			// 首先提取校验配置
 			getFieldRules(ori, rules)

package/packages/components/sh-table/components/importModal.vue

@@ -8,13 +8,13 @@
 			</transition>
 		</div>
 		<div class="import-template-head">
-			<sh-button :size="size" @click="handleDownloadTemplateBtn">下载导入模板</sh-button>
-			<sh-button :size="size" status="primary" @click="handleImportFileBtn">选择导入文件</sh-button>
+			<vxe-button :size="size" @click="handleDownloadTemplateBtn">下载导入模板</vxe-button>
+			<vxe-button :size="size" status="primary" @click="handleImportFileBtn">选择导入文件</vxe-button>
 			<div class="floatright">
 				<sh-poptip v-if="importErrorData.length > 0" trigger="click" title="错误信息" placement="bottom-end">
-					<sh-button :size="size" status="danger">
+					<vxe-button :size="size" status="danger">
 						共发现 <strong>{{ importErrorData.length }}</strong> 条不符合规范数据
-					</sh-button>
+					</vxe-button>
 					<template #content>
 						<div class="import-template-error-list">
 							<div v-for="(errData, errDataIndex) in importErrorData" :key="errDataIndex" class="error-item">
@@ -31,9 +31,9 @@
 		<div class="import-template-foot">
 			<div class="foot-left"></div>
 			<div class="foot-right">
-				<sh-button :size="size" @click="onModalClose">取消</sh-button>
-				<sh-button :size="size" status="primary" @click="handleImportDataBtn('all')">全部导入</sh-button>
-				<sh-button v-if="tableGlobalConfig.selectType" :size="size" status="warning" @click="handleImportDataBtn('select')">导入选中</sh-button>
+				<vxe-button :size="size" @click="onModalClose">取消</vxe-button>
+				<vxe-button :size="size" status="primary" @click="handleImportDataBtn('all')">全部导入</vxe-button>
+				<vxe-button v-if="tableGlobalConfig.selectType" :size="size" status="warning" @click="handleImportDataBtn('select')">导入选中</vxe-button>
 			</div>
 		</div>
 	</sh-modal>

package/packages/components/sh-table/grid.vue

@@ -2,7 +2,6 @@
 	<div class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost }" :style="{ height: wrapHeight }">
 		<vxe-grid
 			ref="tableRef"
-			:key="renderKey"
 			:class="{ 'is--hasfooter': showFooter }"
 			v-bind="tableBindConfig"
 			:columns="tableColumns"
@@ -60,7 +59,7 @@
 							<div class="sh-table-toolbar-item" v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
 								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
 							</div>
-							<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<sh-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
+							<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<vxe-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
 						</template>
 					</vxe-toolbar>
 				</div>

package/packages/components/sh-table/js/props.js

@@ -112,7 +112,8 @@ export default {
 		type: [Function]
 	},
 	keepSource: {
-		type: Boolean
+		type: Boolean,
+		default: true
 	},
 	emptyIcon: {
 		type: String
@@ -240,8 +241,11 @@ export default {
 			return {}
 		}
 	},
-	scrollX: Object,
-	scrollY: Object,
+	virtualXConfig: Object,
+	virtualYConfig: Object,
+	currentRowConfig: Object,
+	rowDragConfig: Object,
+	columnDragConfig: Object,
 	params: Object,
 	footerData: Array,
 

package/packages/components/sh-table/js/tableMethods.js

@@ -1,6 +1,32 @@
 import { utils } from 'sh-tools'
 const $vUtils = utils
 
+export const transKeys = ['transfer', 'disabled', 'multiple', 'isLeaf', 'commafy', 'border', 'filterable', 'showWordCount', 'editable', 'bill', 'range']
+
+// 渲染器个性化默认配置
+export const defaultProps = {
+	$vInput: { type: 'text', placeholder: '请输入', transfer: true, digits: 2, prefixType: 'text', suffixType: 'text' },
+	$vTextArea: { placeholder: '请输入', rows: 2, transfer: true, resize: 'none', showWordCount: true },
+	$vSelect: { placeholder: '请选择', filterable: true, transfer: true, showType: 'text', tagColor: 'default', split: ',', options: [] },
+	$vTree: { placeholder: '请选择', transfer: true, split: ',', nodeKey: 'id', labelField: 'label' },
+	$vTime: { type: 'date', placeholder: '请选择时间', transfer: true, editable: false, prefixType: 'text', suffixType: 'text', separator: '至' },
+	$vProgress: { strokeWidth: 20, strokeColor: ['#108ee9', '#87d068'], textInside: true, min: 0, max: 100, digits: 2 },
+	$vSwitch: { placeholder: '请选择', openLabel: '是', openValue: '1', closeLabel: '否', closeValue: '0' },
+	$vMoney: { type: 'number', placeholder: '请输入', transfer: true, commafy: true, digits: 2, moneyUnit: 1, min: 0, max: 1000000000000 },
+	$vCheckbox: { placeholder: '请选择', uncheckedValue: '0', checkedValue: '1' },
+	$vCheckgroup: { placeholder: '请选择', showType: 'text', tagColor: 'default', tagType: '', split: ',' },
+	$vRadio: { placeholder: '请选择' },
+	$vRadiogroup: { placeholder: '请选择', showType: 'text', tagColor: 'default', tagType: '' },
+	$vImg: { square: false, preview: true, width: '100%', height: '34px', fit: 'scale-down' },
+	$vHref: { disabled: true, target: '_blank' },
+	$vUpload: { split: ',' },
+	$vFilterInput: { placeholder: '请输入关键词' },
+	$vFilterTime: { range: true },
+	$vTable: { size: 'mini' },
+	$vCode: { placeholder: '请输入', border: true, height: '100px' },
+	$vGlobalOption: { type: 'text' }
+}
+
 // 判断为true
 const isTrue = value => {
 	return String(value) === '1' || String(value).toLowerCase() === 'true'
@@ -121,6 +147,12 @@ export const getTransfarFields = (oriArr = [], { slots, columnObj, isSearch }) =
 	let rules = {}
 	let columnsFlatArr = []
 	let formItemsArr = []
+	let formulaMap = {}
+	$vUtils.eachTree(oriArr, column => {
+		let rformula = $vUtils.get(column, 'renderProps.formula')
+		if (rformula && column.field) formulaMap[column.field] = rformula
+	})
+	let formulaFullMap = formulaReplaceAll(formulaMap)
 	let columnsArr = $vUtils.mapTree(oriArr, ori => {
 		let slotObj = {}
 		// 将插槽转换为函数式
@@ -136,9 +168,16 @@ export const getTransfarFields = (oriArr = [], { slots, columnObj, isSearch }) =
 			tar.sortable = false
 			tar.filter = false
 		} else {
+			let rname = ori.renderName || '$vInput'
+			let rprops = Object.assign({}, defaultProps[rname], ori.renderProps, { formulaMap: formulaFullMap })
+			transKeys.forEach(key => {
+				if (!$vUtils.isNone(rprops[key])) {
+					rprops[key] = Boolean(+rprops[key])
+				}
+			})
 			let renderConfig = {
-				name: ori.renderName || '$vInput',
-				props: Object.assign({}, ori.renderProps)
+				name: rname,
+				props: rprops
 			}
 			// 首先提取校验配置
 			getFieldRules(ori, rules)
@@ -167,7 +206,7 @@ export const getTransfarFields = (oriArr = [], { slots, columnObj, isSearch }) =
 			if (isSearch) {
 				let editFixedNames = ['$vImg', '$vHref', '$vUpload']
 				let formItem = { ...tar }
-				formItem.itemRender = Object.assign({ name: '$vInput' }, renderConfig, tar.editRender, tar.itemRender)
+				formItem.itemRender = Object.assign({}, renderConfig, tar.editRender, tar.itemRender)
 				delete formItem.cellRender
 				delete formItem.editRender
 				// 此处修正， 对其不进行默认渲染

package/packages/components/sh-table/js/useTable.js

@@ -86,7 +86,6 @@ export default function (props, context, proxy, isGrid) {
 
 	const tableRef = ref()
 	const toolbarRef = ref()
-	const renderKey = ref(1) // 渲染key值
 	const selectedRowKeys = ref([]) // table选中keys
 	const selectionRows = ref([]) // table选中records
 	const tableColumnsFixed = ref([]) // 表格格式化后表头
@@ -118,7 +117,7 @@ export default function (props, context, proxy, isGrid) {
 		return tablePrevColumns.value.concat(tableColumnsFixed.value)
 	})
 	const tableColumnObjConfig = computed(() => Object.assign({}, columnObjDefault, props.columnObj))
-	const tableColumnConfig = computed(() => Object.assign({ isCurrent: false, isHover: true, resizable: true }, props.columnConfig))
+	const tableColumnConfig = computed(() => Object.assign({ isHover: true, resizable: true }, props.columnConfig))
 	const tablePagerConfig = computed(() =>
 		Object.assign({ enabled: Boolean(props.pagerConfig), total: 0, className: 'sh-table-footer', slots: { left: 'pagerLeft', right: 'pagerRight' } }, props.pagerConfig)
 	)
@@ -189,11 +188,6 @@ export default function (props, context, proxy, isGrid) {
 	const tableBindConfig = computed(() => {
 		let defaultProps = { id: `sh-table-${$route.fullPath}`, footerMethod: tableFooterMethod, footerSpanMethod: tableFooterSpanMethod }
 		let tableProps = $vUtils.omit(props, (val, key) => omitProps.includes(key) || $vUtils.isNone(val))
-		let formulaMap = {}
-		$vUtils.eachTree(props.columns, column => {
-			let rformula = $vUtils.get(column, 'renderProps.formula')
-			if (rformula) formulaMap[column.field] = rformula
-		})
 		let shProps = {
 			data: tableViewData.value,
 			stripe: props.stripe && !tableTreeConfig.value,
@@ -204,13 +198,15 @@ export default function (props, context, proxy, isGrid) {
 			editConfig: tableEditConfig.value,
 			editRules: tableEditRules.value,
 			exportConfig: tableExportConfig.value,
-			printConfig: tablePrintConfig.value,
-			moneyConfig: tableMoneyConfig.value,
-			moneyUnit: tableMoneyUnit.value,
-			menuConfig: tableMenuConfig.value,
-			formulaMap: formulaReplaceAll(formulaMap)
+			printConfig: tablePrintConfig.value
+		}
+		if (tableMenuConfig.value.enabled) {
+			shProps.menuConfig = tableMenuConfig.value
+		}
+		if (tableMoneyConfig.value.enabled && tableMoneyUnit.value) {
+			let moneyOption = tableMoneyConfig.value.options.find(item => item.value === tableMoneyUnit.value)
+			shProps.moneyConfig = { moneyUnit: tableMoneyUnit.value, moneyOption, digits: moneyOption.digits }
 		}
-		if (tableMenuConfig.value.enabled) shProps.menuConfig = tableMenuConfig.value
 		return Object.assign(defaultProps, tableProps, shProps)
 	})
 	const importBindConfig = reactive({
@@ -237,23 +233,25 @@ export default function (props, context, proxy, isGrid) {
 	// 获取全部数据
 	// visible为true获取视图数据
 	const getFullData = params => {
-		const { visible = false, deleteXid = false, datas = null } = params || {}
+		const { visible = false, deleteXid = false, isUnit, datas = null } = params || {}
 		let fullData = datas || tableRef.value.internalData.afterFullData
 		let data = $vUtils.clone(fullData, true)
 		const { fullColumn } = tableRef.value.getTableColumn()
-		let rnameColumns = fullColumn.filter(col => col.rname)
-		rnameColumns.forEach(col => {
-			let { property, rname, rprops } = col
+		fullColumn.forEach(col => {
+			let cprops = $vUtils.get(col, 'editRender.props') || $vUtils.get(col, 'cellRender.props')
+			let rname = $vUtils.get(col, 'editRender.name') || $vUtils.get(col, 'cellRender.name')
+			let rprops = Object.assign({}, cprops, tableBindConfig.value.moneyConfig)
+			let { property } = col
 			data.forEach(row => {
 				let cellValue = $vUtils.get(row, property)
-				let { rvalue, rtext } = $vUtils.formatRender(cellValue, property, row, rname, { ...rprops, commafy: false }, proxy)
-				if (rprops.bill && rprops.bill !== '0') {
-					$vUtils.set(row, property, rvalue)
+				let { rvalue, rtext } = $vUtils.formatRender(cellValue, property, row, rname, rprops, proxy)
+				let resultValue = rvalue
+				if (rname === '$vMoney') {
+					resultValue = isUnit && !rprops.bill ? rtext : rvalue
 				} else if (visible) {
-					$vUtils.set(row, property, rtext)
-				} else {
-					$vUtils.set(row, property, rvalue)
+					resultValue = rtext
 				}
+				$vUtils.set(row, property, resultValue)
 				if (deleteXid) delete row._XID
 			})
 		})
@@ -265,15 +263,15 @@ export default function (props, context, proxy, isGrid) {
 		let { data, columns, mode, original, isUnit } = options
 		let exportDatas = data
 		$vUtils.eachTree(columns, col => {
-			const { rname, rprops } = col
-			if (rname === '$vMoney' && isUnit && rprops.moneyOption?.label && !col.headerExportMethod && !original) {
+			let rname = $vUtils.get(col, 'editRender.name') || $vUtils.get(col, 'cellRender.name')
+			if (rname === '$vMoney' && isUnit && tableBindConfig.value.moneyConfig?.moneyOption?.label && !col.headerExportMethod && !original) {
 				col.headerExportMethod = () => {
-					return `${col.title}(${rprops.moneyOption.label})`
+					return `${col.title}(${tableBindConfig.value.moneyConfig?.moneyOption?.label})`
 				}
 			}
 		})
 		if (mode === 'selected') exportDatas = getSelectionData()
-		options.data = getFullData({ deleteXid: true, visible: !original, datas: exportDatas })
+		options.data = getFullData({ deleteXid: true, isUnit, visible: !original, datas: exportDatas })
 		return type === 'print' ? content : obj
 	}
 
@@ -411,9 +409,11 @@ export default function (props, context, proxy, isGrid) {
 	// -------- 搜索
 	// 表单展开全部/收起切换事件
 	const onFormCollapsed = value => {
-		setTimeout(() => {
-			tableRef.value.recalculate(true)
-		})
+		if (isGrid) {
+			setTimeout(() => {
+				tableRef.value.recalculate(true)
+			})
+		}
 	}
 	const onFormSubmit = () => {
 		emit('form-submit', props.queryData)
@@ -448,6 +448,11 @@ export default function (props, context, proxy, isGrid) {
 			tableRef.value.loadColumn(tableColumns.value)
 		}
 	}
+	// 初始化页面数据
+	const initTableData = () => {
+		updateSelection([])
+		updateExpended()
+	}
 	// 初始化验证规则
 	const initEditRules = rules => {
 		if (rules && $vUtils.isPlainObject(rules)) {
@@ -492,8 +497,8 @@ export default function (props, context, proxy, isGrid) {
 		return tableRef.value.validate(rows)
 	}
 	// 刷新表格视图
-	const refreshRender = () => {
-		renderKey.value++
+	const refreshRender = data => {
+		return tableRef.value.reloadData(data || props.dataSourse)
 	}
 	// 表格工具按钮点击
 	const handleTableTool = ({ code }) => {
@@ -606,8 +611,7 @@ export default function (props, context, proxy, isGrid) {
 	watch(
 		() => props.dataSourse,
 		value => {
-			updateSelection([])
-			updateExpended()
+			initTableData()
 		},
 		{ immediate: true }
 	)
@@ -630,7 +634,6 @@ export default function (props, context, proxy, isGrid) {
 		slots,
 		tableRef,
 		toolbarRef,
-		renderKey,
 		wrapHeight,
 		tableGlobalConfig,
 		tablePrevColumns,

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

@@ -34,7 +34,7 @@
 						<div class="sh-table-toolbar-item" v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
 							<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
 						</div>
-						<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<sh-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
+						<div v-if="tableMoneyConfig.enabled" @click.stop class="sh-table-toolbar-item">单位：<vxe-select v-model="tableMoneyUnit" v-bind="tableMoneyConfig" /></div>
 					</template>
 				</vxe-toolbar>
 			</slot>
@@ -42,7 +42,6 @@
 		<div v-if="isHeadSlot" ref="headSlotRef" v-resize="handleResize" class="sh-table-head"><slot name="head"></slot></div>
 		<vxe-table
 			ref="tableRef"
-			:key="renderKey"
 			:class="{ 'is--hasfooter': showFooter }"
 			v-bind="tableBindConfig"
 			:height="tableHeight"