sh-view 1.7.6 → 2.0.1

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

@@ -1,377 +0,0 @@
-<template>
-	<sh-modal :visible="visible" title="导入报表" width="900" :loading="modalLoading" :show-footer="false" :transfer="false" @close="onModalClose">
-		<div class="import-template-top">
-			<transition name="fade">
-				<Progress v-if="showProgress" :percent="progressPercent" :stroke-width="2">
-					<template v-if="progressPercent === 100"><span>上传成功</span></template>
-				</Progress>
-			</transition>
-		</div>
-		<div class="import-template-head">
-			<vxe-button :size="size" @click="handleDownloadTemplateBtn">下载导入模板</vxe-button>
-			<vxe-button :size="size" status="primary" @click="handleImportFileBtn">选择导入文件</vxe-button>
-			<div class="floatright">
-				<Poptip v-if="importErrorData.length > 0" trigger="click" title="错误信息" placement="bottom-end">
-					<vxe-button :size="size" status="danger"
-						>共发现 <strong>{{ importErrorData.length }}</strong> 条不符合规范数据</vxe-button
-					>
-					<template #content>
-						<div class="import-template-error-list">
-							<div v-for="(errData, errDataIndex) in importErrorData" :key="errDataIndex" class="error-item">
-								第 <strong class="red">{{ errData.rowIndex }}</strong> 行，错误：<span class="red">{{ errData.errMsg }}</span>
-							</div>
-						</div>
-					</template>
-				</Poptip>
-			</div>
-		</div>
-		<div class="import-template-body">
-			<sh-table
-				ref="shtable"
-				:height="height"
-				:size="size"
-				:columns="tableColumns"
-				:data-sourse="importTableData"
-				:global-config="tableGlobalConfig"
-				:edit-rules="importRules"
-				:pager-config="false"
-				:disabled="false"></sh-table>
-		</div>
-		<div class="import-template-foot">
-			<div class="foot-left"></div>
-			<div class="foot-right">
-				<vxe-button :size="size" @click="onModalClose">取消</vxe-button>
-				<vxe-button :size="size" status="primary" @click="handleImportDataBtn('all')">全部导入</vxe-button>
-				<vxe-button v-if="tableGlobalConfig.checkbox || tableGlobalConfig.radio" :size="size" status="warning" @click="handleImportDataBtn('select')">导入选中</vxe-button>
-			</div>
-		</div>
-	</sh-modal>
-</template>
-
-<script>
-import * as XLSX from 'xlsx'
-import excelToJson from '../js/excel_to_json'
-export default {
-	name: 'TableImport',
-	props: {
-		visible: {
-			type: Boolean
-		},
-		columns: {
-			type: Array
-		},
-		height: {
-			type: [Number, String],
-			default: 360
-		},
-		needValidate: {
-			type: Boolean
-		},
-		importRules: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		importConfig: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		importOption: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		globalConfig: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		size: {
-			type: String,
-			default: 'mini' //  medium / small / mini
-		},
-		downloadTemplateCallback: {
-			type: Function
-		},
-		downloadTemplateFinished: {
-			type: Function
-		}
-	},
-	emits: ['confirm', 'update:visible'],
-	data() {
-		return {
-			importTableData: [],
-			importErrorData: [],
-			modalLoading: false,
-			showProgress: false,
-			progressPercent: 0
-		}
-	},
-	computed: {
-		tableGlobalConfig() {
-			return Object.assign({ checkbox: false, seq: true, zoom: false, title: true, tableName: '导入预览' }, this.globalConfig)
-		},
-		tableColumns() {
-			return this.columns.filter(item => !(item.type === 'seq' || item.type === 'checkbox' || item.type === 'radio' || item.renderName === '$vGlobalOption'))
-		}
-	},
-	watch: {},
-	created() {
-		this.initCreated()
-	},
-	mounted() {},
-	beforeUnmount() {},
-	methods: {
-		// 初始化
-		initCreated() {
-			this.showProgress = false
-			this.progressPercent = 0
-			this.importTableData = []
-		},
-		// 弹窗关闭
-		onModalClose() {
-			this.$emit('update:visible', false)
-		},
-		// 确认导入数据按钮
-		async handleImportDataBtn(type = 'all') {
-			const that = this
-			let importData = type === 'all' ? this.importTableData : this.$refs.shtable.getSelectionData()
-			if (!importData || !Array.isArray(importData) || importData.length < 1) {
-				that.msginfo('未导入数据')
-				return false
-			}
-			if (that.needValidate) {
-				let validateErrMap = await that.handleImportDataValidate(importData)
-				if (validateErrMap) {
-					that.msgerror('导入校验失败，请检查数据')
-					return validateErrMap
-				}
-			}
-			that.$emit('confirm', importData)
-			that.onModalClose()
-		},
-		// 导入数据验证
-		async handleImportDataValidate(rows) {
-			return this.$refs.shtable.validate(rows)
-		},
-		// 下载导入模板按钮
-		handleDownloadTemplateBtn() {
-			const that = this
-			if (typeof that.downloadTemplateCallback === 'function') {
-				that.downloadTemplateCallback()
-			} else {
-				let defaultOption = {
-					filename: '模板',
-					sheetName: this.importOption.filename || '模板',
-					type: 'xlsx',
-					original: false,
-					download: true,
-					message: false,
-					useStyle: false,
-					columns: this.$refs.shtable
-						.tableRef()
-						.getColumns()
-						.filter(item => item.type !== 'seq'),
-					data: [],
-					sheetMethod: ({ options, workbook, worksheet }) => {},
-					afterExportMethod: options => {
-						this.handleDownloadTemplateFinished(options)
-					}
-				}
-				this.$refs.shtable.tableRef().exportData(Object.assign(defaultOption, this.importOption))
-			}
-		},
-		// 下载导入模板成功回调
-		handleDownloadTemplateFinished(options) {
-			this.msgsuccess('下载模板完成！')
-			if (typeof this.downloadTemplateCallback === 'function') {
-				this.downloadTemplateFinished(options)
-			}
-		},
-		// 选择导入文件按钮
-		handleImportFileBtn() {
-			if (typeof this.importFileCallback === 'function') {
-				this.importFileCallback()
-			} else {
-				let defaultOption = {
-					mode: 'covering',
-					types: ['xlsx', 'csv'],
-					message: false,
-					remote: true,
-					importMethod: obj => {
-						this.handleImportFileMethod(obj)
-					},
-					afterImportMethod: options => {
-						this.handleImportFileFinished(options)
-					}
-				}
-				this.$refs.shtable.tableRef().importData(Object.assign(defaultOption, this.importConfig))
-			}
-		},
-		// 选择导入文件成功回调
-		async handleImportFileMethod({ file, options }) {
-			const that = this
-			const fileExt = file.name.split('.').pop().toLocaleLowerCase()
-			if (fileExt === 'xlsx' || fileExt === 'xls') {
-				that.file = file
-				try {
-					let fileRes = await that.readFile(file)
-					let { results, errDatas } = that.dealImportTableData(that.tableColumns, fileRes)
-					that.importTableData = results
-					that.importErrorData = errDatas
-					setTimeout(() => {
-						that.showProgress = false
-					}, 2000)
-				} catch (e) {
-					that.msgerror(e.message || e)
-				}
-			} else {
-			}
-		},
-		// 选择导入文件成功回调
-		handleImportFileFinished(options) {},
-		// 读取文件
-		async readFile(file) {
-			return new Promise((resolve, reject) => {
-				const reader = new FileReader()
-				reader.readAsArrayBuffer(file)
-				reader.onloadstart = e => {
-					this.modalLoading = true
-					this.showProgress = true
-				}
-				reader.onprogress = e => {
-					this.progressPercent = Math.round((e.loaded / e.total) * 100)
-				}
-				reader.onerror = e => {
-					reject(new Error('文件读取出错'))
-				}
-				reader.onload = e => {
-					this.modalLoading = false
-					const data = e.target.result
-					const workbook = XLSX.read(data, { type: 'binary' })
-					let sheetNames = workbook.SheetNames
-					let excelJsonMap = {}
-					sheetNames.forEach(sheet => {
-						excelJsonMap[sheet] = excelToJson.sheet_to_json(workbook.Sheets[sheet])
-					})
-					let sheetActive = sheetNames.find(item => item === this.$parent.tableExportConfig.sheetName) || sheetNames[0]
-					resolve(excelJsonMap[sheetActive])
-				}
-			})
-		},
-		// 根据表格读取数据生成表格数据
-		dealImportTableData(columns, results) {
-			const that = this
-			let colsplit = '.'
-			let tableAllColumns = that.generateColumnsAll(columns)
-			let errDatas = []
-			results.map((row, rowIndex) => {
-				Object.keys(row).forEach((key, keyIndex) => {
-					let fieldObj = tableAllColumns.find(col =>
-						key.indexOf(colsplit) === -1 ? key === col.title || key === col.field : key.split(colsplit).includes(col.title) || key.split(colsplit).includes(col.field)
-					)
-					let fieldName = (fieldObj && fieldObj.field) || ''
-					if (fieldName) {
-						row[fieldName] = String(row[key])
-						delete row[key]
-					}
-					let fieldRender = (fieldObj && fieldObj.renderName) || ''
-					if (fieldRender) {
-						let fieldRenderProps = (fieldObj && fieldObj.renderProps) || {}
-						switch (fieldRender) {
-							case '$vSelect':
-							case '$vSwitch':
-							case '$vCheckgroup':
-							case '$vRadiogroup':
-								if (fieldRenderProps.options && Array.isArray(fieldRenderProps.options)) {
-									// 如果匹配到选择项则保留，否则删除掉不规范数据
-									// 判断导入值为数据源的key or value 去匹配
-									let rowsplit = fieldRenderProps.split || ','
-									let rowValue = null
-									if ((fieldRenderProps.multiple || fieldRender === '$vCheckgroup') && row[fieldName].indexOf(rowsplit) !== -1) {
-										let rowValues = row[fieldName].split(rowsplit)
-										let values = fieldRenderProps.options.map(opt => {
-											if (rowValues.includes(String(opt.value)) || rowValues.includes(opt.label)) {
-												return opt.value
-											}
-										})
-										if (values.length > 0) rowValue = values.join(rowsplit)
-									} else {
-										let opt = fieldRenderProps.options.find(opt => String(row[fieldName]) === String(opt.value) || String(row[fieldName]) === opt.label)
-										if (opt) rowValue = opt.value
-									}
-									if (rowValue === null && row[fieldName]) {
-										errDatas.push({
-											rowIndex: rowIndex + 1,
-											errMsg: `字段【${fieldObj.title}】不符合数据源规范，已被清空`
-										})
-										delete row[fieldName]
-									} else {
-										row[fieldName] = rowValue
-									}
-								}
-								break
-						}
-					}
-				})
-			})
-			return { results, errDatas }
-		},
-		// 生成全表头
-		generateColumnsAll(columns, resultColumns = []) {
-			columns.forEach((column, index) => {
-				if (column.children && Array.isArray(column.children) && column.children.length) {
-					this.generateColumnsAll(column.children, resultColumns)
-				} else {
-					if (column.field) {
-						resultColumns.push({
-							title: column.title,
-							field: column.field,
-							renderName: column.renderName,
-							renderProps: column.renderProps
-						})
-					}
-				}
-			})
-			return resultColumns
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.import-template-head {
-	+ .import-template-body,
-	+ .import-template-foot {
-		margin-top: 10px;
-	}
-	.floatright {
-		float: right;
-	}
-}
-.import-template-body {
-	+ .import-template-foot,
-	+ .import-template-error {
-		margin-top: 10px;
-	}
-}
-.import-template-foot {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.import-template-error-list {
-	max-height: 300px;
-	overflow: auto;
-	font-size: 13px;
-	.error-item {
-		display: block;
-		margin-bottom: 5px;
-	}
-}
-</style>

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

@@ -1,233 +0,0 @@
-<template>
-	<vxe-grid
-		ref="vxeTreeTable"
-		v-bind="tableConfigIn"
-		:class="{ 'sh-vxe-tree-table': true, 'is--hidecheck': globalConfig.checkHide }"
-		:height="height"
-		:size="size"
-		:loading="loading"
-		:columns="tableColumns"
-		:data="filterData || tableData"
-		:row-config="rowConfigIn"
-		:radio-config="radioConfigIn"
-		:checkbox-config="checkboxConfigIn"
-		:pager-config="pagerConfigIn"
-		:tree-config="treeConfigIn"
-		@radio-change="onRadioChange"
-		@checkbox-change="onSelectionChange"
-		@checkbox-all="onSelectionChange"
-		@checkbox-range-end="onSelectionChange">
-		<template #treeNodeCell="scoped">
-			<span>{{ getTreeNodeCellContent(scoped) }}</span>
-		</template>
-		<template #empty>
-			<sh-empty :no-data-icon="parentProps.noDataIcon" :no-data-text="parentProps.noDataText"></sh-empty>
-		</template>
-	</vxe-grid>
-</template>
-
-<script>
-import defaultData from '../mixin/defaultData'
-export default {
-	name: 'TableTree',
-	props: {
-		parentProps: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		loading: {
-			type: Boolean
-		},
-		height: {
-			type: [Number, String],
-			default: 'auto'
-		},
-		filterText: {
-			type: String
-		},
-		size: {
-			type: String,
-			default: 'medium' //  medium / small / mini
-		},
-		globalConfig: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		tableData: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		selectedKeys: {
-			type: Array,
-			default() {
-				return []
-			}
-		}
-	},
-	emits: ['select'],
-	data() {
-		return {
-			...defaultData,
-			filterData: null,
-			filterChangeDebounce: this.$vUtils.debounce(this.handleMyTableFilter, 500)
-		}
-	},
-	computed: {
-		multiple() {
-			return this.parentProps.multiple || false
-		},
-		tableConfigIn() {
-			return Object.assign({ showHeader: !!(this.globalConfig.hasAll && this.multiple) }, this.tableConfigDefault, this.globalConfig.tableConfig)
-		},
-		pagerConfigIn() {
-			return Object.assign({ enabled: false }, this.globalConfig.pagerConfig)
-		},
-		rowConfigIn() {
-			return Object.assign({ isCurrent: false }, this.tableConfigIn.rowConfig, { keyField: this.parentProps.nodeKey })
-		},
-		radioConfigIn() {
-			return Object.assign({ labelField: this.parentProps.labelField, checkRowKey: this.selectedKeys[0], checkMethod: this.tableCheckMethods }, this.globalConfig.radioConfig)
-		},
-		checkboxConfigIn() {
-			return Object.assign({ labelField: this.parentProps.labelField, checkRowKeys: this.selectedKeys, checkMethod: this.tableCheckMethods }, this.globalConfig.checkboxConfig)
-		},
-		treeConfigIn() {
-			return Object.assign({ rowField: this.parentProps.nodeKey, transform: this.globalConfig.transform }, this.globalConfig.treeConfig)
-		},
-		tableColumns() {
-			let { globalConfig, multiple, checkboxConfigIn, radioConfigIn, parentProps } = this
-			let defaultColumn = {
-				field: multiple ? checkboxConfigIn.labelField : radioConfigIn.labelField,
-				title: parentProps.labelTitle || (multiple ? '全部' : ''),
-				type: parentProps.disabled ? 'html' : multiple ? 'checkbox' : 'radio',
-				treeNode: true,
-				width: globalConfig.columns ? globalConfig?.defaultWidth || 150 : '100%',
-				slots: { default: 'treeNodeCell' }
-			}
-			return [defaultColumn].concat(globalConfig.columns || [])
-		}
-	},
-	watch: {
-		selectedKeys: {
-			handler(newvalue, oldValue) {},
-			deep: true
-		},
-		filterText: {
-			handler(newvalue, oldValue) {
-				this.filterChangeDebounce(newvalue)
-			},
-			deep: true,
-			immediate: true
-		}
-	},
-	created() {},
-	mounted() {
-		this.initMounted()
-	},
-	beforeUnmount() {},
-	methods: {
-		tableRef() {
-			return this.$refs.vxeTreeTable
-		},
-		initMounted() {
-			this.initSelection()
-		},
-		initSelection() {
-			const that = this
-			let nodeKey = that.parentProps.nodeKey || 'id'
-			setTimeout(() => {
-				if (that.selectedKeys && that.selectedKeys.length > 0) {
-					that.tableRef().scrollToRow({ [nodeKey]: that.selectedKeys[0] })
-				}
-			})
-		},
-		// 单选框变化
-		onRadioChange(obj) {
-			const that = this
-			let nodeKey = that.parentProps.nodeKey || 'id'
-			let { newValue } = obj
-			let selectedKeys = []
-			if (newValue && (newValue[nodeKey] || newValue[nodeKey] === 0)) {
-				selectedKeys.push(newValue[nodeKey])
-			}
-			that.treeSelectedChange(selectedKeys, newValue ? [newValue] : [], obj)
-		},
-		// 复选框变化
-		onSelectionChange(obj) {
-			const that = this
-			let nodeKey = that.parentProps.nodeKey || 'id'
-			let { records = [] } = obj
-			let selectedKeys = []
-			if (Array.isArray(records) && records.length > 0) {
-				records.forEach(item => {
-					selectedKeys.push(item[nodeKey])
-				})
-			}
-			that.treeSelectedChange(selectedKeys, records, obj)
-		},
-		// 全局搜索过滤事件
-		handleMyTableFilter(text) {
-			const that = this
-			let filterText = that.$vUtils.toValueString(text).trim().toLowerCase()
-			let filterData = null
-			if (filterText) {
-				const searchProps = [{ rkey: that.parentProps.labelField, format: that.parentProps.labelFormat }]
-				let tableColumnsAll = that.tableRef().getColumns()
-				tableColumnsAll.forEach(col => {
-					let renderObj = col.cellRender || col.editRender || col.itemRender
-					let noSearchArr = ['$vGlobalOption', '$vImg', '$vCheckbox', '$vRadio', '$vUpload', '$vCode', 'seq', 'checkbox', 'radio']
-					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 = that.$vUtils.searchTree(that.tableData, row => {
-					return searchProps.some(item => {
-						let cellValue = item.format ? that.$vUtils.format(item.format, row) : that.$vUtils.get(row, item.rkey)
-						if (that.$vxePluginNames.expendRenders && that.$vxePluginNames.expendRenders.includes(item.rname)) {
-							let { rtext } = that.$vUtils.formatRender(cellValue, item.rkey, row, item.rname, item.rprops, that)
-							return String(rtext).toLowerCase().indexOf(filterText) > -1
-						}
-						return that.$vUtils.trim(cellValue).toLowerCase().indexOf(filterText) > -1
-					})
-				})
-			}
-			if (that.filterData === null && !filterText) {
-				return
-			}
-			that.filterData = filterData
-			if (filterData && filterData.length > 0) {
-				that.tableRef().setTreeExpand(filterData[0], true)
-			}
-		},
-		// 获取选中的数据
-		getSelectionData() {
-			return this.tableRef().getCheckboxRecords()
-		},
-		// 树变化提交
-		async treeSelectedChange(selectedKeys, selectedRows, obj) {
-			this.$emit('select', selectedKeys, selectedRows, obj)
-		},
-		tableCheckMethods({ row }) {
-			if (this.parentProps.isLeaf && !this.parentProps.multiple) {
-				return +row.isleaf === 1 || +row.isLeaf === 1
-			}
-			return true
-		},
-		getTreeNodeCellContent({ row, column }) {
-			let { labelFormat, field } = this.parentProps
-			if (labelFormat) {
-				return this.$vUtils.format(labelFormat, row)
-			}
-			return this.$vUtils.get(row, column.property)
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped></style>

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

@@ -1,20 +0,0 @@
-.sh-vxe-tree{
-    position: relative;
-    width: 100%;
-    .vxe-input{
-        width: 100%;
-    }
-}
-
-.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-vxe-tree-result{
-    position: relative;
-    top: 50%;
-    transform: translateY(-60%);
-}

package/packages/components/global-components/sh-vxe-tree/index.vue

@@ -1,85 +0,0 @@
-<template>
-	<div class="sh-vxe-tree" :style="{ height: shVxeTableHeight }">
-		<component
-			:is="curCompunent"
-			ref="vxe-tree-child"
-			v-bind="$props"
-			:selected-keys="selectedKeys"
-			:global-config="treeGlobalConfig"
-			@change="treeSelectedChange"
-			@focus="treeSelectedFocus"
-			@blur="treeSelectedBlur"></component>
-	</div>
-</template>
-
-<script>
-import vxeDirectTree from './vxe-direct-tree.vue'
-import vxeSelectTree from './vxe-select-tree.vue'
-import props from './js/props'
-export default {
-	name: 'ShTree',
-	components: {
-		vxeDirectTree,
-		vxeSelectTree
-	},
-	props: {
-		...props
-	},
-	emits: ['update:modelValue', 'change', 'focus', 'blur'],
-	data() {
-		return {
-			selectedKeys: [],
-			selectionData: []
-		}
-	},
-	computed: {
-		curCompunent() {
-			return this.isSelect ? 'vxeSelectTree' : 'vxeDirectTree'
-		},
-		shVxeTableHeight() {
-			return this.height === '100%' || this.height === 'auto' ? '100%' : 'auto'
-		},
-		treeGlobalConfig() {
-			return Object.assign({ treeFilter: true, initServer: !this.isSelect }, this.globalConfig)
-		}
-	},
-	watch: {
-		modelValue: {
-			handler(newvalue, oldValue) {
-				this.selectedKeys = newvalue
-			},
-			deep: true,
-			immediate: true
-		}
-	},
-	created() {},
-	mounted() {},
-	methods: {
-		// 初始化
-		initCreated() {},
-		// 树节点获取焦点事件
-		treeSelectedFocus() {
-			this.$emit('focus', this.selectedKeys || [], this.selectionData || [])
-		},
-		// 树节点选择变换事件
-		treeSelectedChange(selectedKeys, selectedRows, obj) {
-			this.selectedKeys = selectedKeys
-			this.selectionData = selectedRows
-			this.$emit('update:modelValue', selectedKeys, selectedRows, obj)
-			this.$emit('change', selectedKeys, selectedRows, obj)
-		},
-		// 树收起下拉回调blur方法
-		treeSelectedBlur(obj) {
-			this.$emit('blur', this.selectedKeys || [], this.selectionData || [])
-		},
-		// 获取选中数据
-		getSelectionData() {
-			return this.selectionData
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-@import 'css/index.scss';
-</style>