sh-view 2.1.0 → 2.3.0

package/packages/vxeTable/render/mixin/cell-hooks.js

@@ -0,0 +1,162 @@
+import { computed, ref, watch } from 'vue'
+
+let moneyUnitConstants = [
+	{ value: 1, label: '元' },
+	{ value: 1000, label: '千元' },
+	{ value: 10000, label: '万元' }
+]
+let cnGroups = [
+	{ shortText: '兆', fullText: '兆', value: '' },
+	{ shortText: '千', fullText: '千亿', value: '' },
+	{ shortText: '百', fullText: '百亿', value: '' },
+	{ shortText: '十', fullText: '十亿', value: '' },
+	{ shortText: '亿', fullText: '亿', value: '' },
+	{ shortText: '千', fullText: '千万', value: '' },
+	{ shortText: '百', fullText: '百万', value: '' },
+	{ shortText: '十', fullText: '十万', value: '' },
+	{ shortText: '万', fullText: '万', value: '' },
+	{ shortText: '千', fullText: '千', value: '' },
+	{ shortText: '百', fullText: '百', value: '' },
+	{ shortText: '十', fullText: '十', value: '' },
+	{ shortText: '元', fullText: '元', value: '' },
+	{ shortText: '角', fullText: '角', value: '' },
+	{ shortText: '分', fullText: '分', value: '' },
+	{ shortText: '毫', fullText: '毫', value: '' },
+	{ shortText: '厘', fullText: '厘', value: '' }
+]
+
+export default function (props, context, proxy) {
+	const { $vUtils } = proxy
+
+	const renderValue = ref(null)
+	const renderText = ref('')
+
+	const rsize = computed(() => props.rprops.size || props.rparams.$table?.props?.size || props.rparams.$form?.props?.size)
+	const rform = computed(() => !!props.rparams.$form)
+	const reditmode = computed(() => props.rparams.$table?.props?.editConfig?.mode)
+	const isEditAll = computed(() => !rform.value && reditmode.value === 'all')
+	const moneyUnitText = computed(() => {
+		let moneyConstant = moneyUnitConstants.find(item => item.value === props.rprops.moneyUnit)
+		return moneyConstant && moneyConstant.label
+	})
+	const billGroups = computed(() => {
+		let { billStart = '分', billEnd = '亿' } = props.rprops
+		let startIndex = cnGroups.findIndex(cn => cn.fullText === billEnd)
+		let endIndex = cnGroups.findIndex(cn => cn.fullText === billStart)
+		return cnGroups.slice(startIndex, endIndex)
+	})
+
+	// 初始化数据
+	const initData = () => {
+		let keyValue = $vUtils.get(props.rdata, props.rkey)
+		formatValueFun(keyValue)
+	}
+
+	// 输入框变化
+	const vxeInputChange = async ({ value, $event }) => {}
+	// 输入框变化回调
+	const vxeChangeCallBack = async ({ value, $event }) => {
+		setRenderValue(value)
+	}
+	// radio 变化回调
+	const vxeRadioCallBack = async ({ label, $event }) => {
+		setRenderValue(label)
+	}
+	// check变化回调
+	const vxeCheckCallBack = async ({ checklist, checked, label, $event }) => {
+		setRenderValue(checklist)
+	}
+	// 输入框失去焦点回调
+	const vxeBlurCallback = async ({ value, $event }) => {
+		setRenderValue(value)
+	}
+	// 回调赋值
+	const setRenderValue = (value, isCall) => {
+		let cellValue = value || renderValue.value
+		if (!isCall) {
+			if (['$vMoney'].includes(props.rname) && cellValue !== '') cellValue = $vUtils.multiply(cellValue, props.rprops.moneyUnit || 1)
+			let { rvalue, rtext } = formatValueFun(cellValue, true)
+			cellValue = rvalue
+		}
+		if (rform.value) {
+			let { $form } = props.rparams
+			$form.context.emit('edit-closed', props.rparams)
+		}
+		$vUtils.set(props.rdata, props.rkey, cellValue)
+	}
+	// 格式化值formatValue
+	const formatValueFun = (value, editable) => {
+		let formatObj = $vUtils.formatRender(value, props.rkey, props.rdata, props.rname, props.rprops, proxy, editable)
+		renderValue.value = ['$vMoney'].includes(props.rname) ? formatObj.rtext : formatObj.rvalue
+		renderText.value = formatObj.rtext
+		return formatObj
+	}
+	// 格式化底部值
+	const getFooterData = (qianfen = true) => {
+		let { $table, items, itemIndex, column } = props.rparams
+		let tableData = $table.internalData.afterFullData
+		let { rname, rprops, rfooter, property } = column
+		let { digits, moneyUnit, commafy, type, calculate } = rprops
+		let footerValue = items[itemIndex]
+		if (rfooter) {
+			let caculateObj = rfooter[items[rfooter.index || 0]]
+			if (caculateObj && (rname === '$vMoney' || (['number', 'float', 'integer'].includes(type) && calculate))) {
+				let tableColumnData = $vUtils.mapTree(tableData, row => row[property])
+				let { computeType, result, typeObj } = caculateObj
+				switch (computeType) {
+					case 'subTotal':
+						footerValue = $vUtils.sum(tableColumnData)
+						break
+					case 'allTotal':
+						footerValue = typeObj[property] || result
+						break
+					case 'mean':
+						footerValue = $vUtils.mean(tableColumnData)
+						break
+					default:
+						footerValue = result
+						break
+				}
+				if (rname === '$vMoney') footerValue = $vUtils.truncate($vUtils.divide(footerValue, moneyUnit), digits)
+				if (qianfen && commafy) footerValue = $vUtils.commafy(footerValue, { digits })
+			}
+		}
+		return footerValue
+	}
+	const getBillClass = bil => {
+		return { basic: bil.fullText === '元', commafy: ['千', '百万', '十亿', '兆'].includes(bil.fullText) }
+	}
+	// 获取单据值
+	const getBillValue = (index, total = false) => {
+		let value = total ? getFooterData(false) : renderValue.value
+		if (!value) return ''
+		let fullValue = $vUtils.formatMoneyPad(value)
+		let fullList = fullValue.replace('.', '').split('')
+		return fullList[index]
+	}
+
+	watch(
+		() => props.rdata,
+		() => initData(),
+		{ deep: true, immediate: true }
+	)
+
+	return {
+		renderValue,
+		renderText,
+		rsize,
+		rform,
+		isEditAll,
+		moneyUnitText,
+		billGroups,
+		vxeInputChange,
+		vxeChangeCallBack,
+		vxeRadioCallBack,
+		vxeCheckCallBack,
+		vxeBlurCallback,
+		getFooterData,
+		getBillClass,
+		getBillValue,
+		setRenderValue
+	}
+}

package/packages/vxeTable/render/mixin/cell-props.js

@@ -0,0 +1,23 @@
+export default {
+	redit: { type: Boolean },
+	rkey: { type: String },
+	rname: { type: String },
+	rdata: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	rprops: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	rparams: {
+		type: Object,
+		default() {
+			return {}
+		}
+	}
+}

package/packages/vxeTable/render/mixin/filter-hooks.js

@@ -0,0 +1,28 @@
+import { computed, onBeforeMount, ref, watch } from 'vue'
+
+export default function (props, context, proxy) {
+	const { $vUtils } = proxy
+	const renderValue = ref({})
+
+	// 初始化
+	const initData = () => {
+		const { column, $panel } = props.rparams
+		const option = column.filters[0]
+		renderValue.value = option
+		$panel.changeOption(null, Boolean(renderValue.value.data), option)
+	}
+	// 过滤回调
+	const vxeFilterCallback = ({ value, $event }) => {
+		const { $panel } = props.rparams
+		$panel.changeOption(null, Boolean(renderValue.value.data), renderValue.value)
+	}
+
+	onBeforeMount(() => {
+		initData()
+	})
+
+	return {
+		renderValue,
+		vxeFilterCallback
+	}
+}

package/packages/components/global-components/sh-form/components/form-item.vue

@@ -1,25 +0,0 @@
-<template>
-	<vxe-form-gather v-bind="parentItem">
-		<template v-for="(childItem, childItemIndex) in parentItem.children">
-			<formItem v-if="childItem.children" :key="childItemIndex" :parent-item="childItem"></formItem>
-			<vxe-form-item v-else v-bind="childItem" :key="childItemIndex"></vxe-form-item>
-		</template>
-	</vxe-form-gather>
-</template>
-
-<script>
-export default {
-	name: 'FormItem',
-	props: {
-		parentItem: {
-			type: Object,
-			default() {
-				return {}
-			}
-		}
-	},
-	created() {}
-}
-</script>
-
-<style scoped></style>

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

@@ -1,55 +0,0 @@
-.sh-vxe-form{
-    position: relative;
-    &.readonly {
-        .vxe-form{
-            .vxe-input--inner[disabled], .vxe-textarea--inner[disabled]{
-                cursor: auto;
-                color: #333;
-                background-color: var(--vxe-table-body-background-color);
-                border-color: var(--vxe-primary-lighten-color);
-            }
-            .vxe-checkbox.is--disabled{
-                cursor: auto;
-                color: #333;
-                & > input + .vxe-checkbox--icon{
-                    background-color: var(--vxe-table-body-background-color);
-                    border-color: var(--vxe-primary-lighten-color);
-                }
-                & > input + .vxe-checkbox--icon:before{
-                    border-color: var(--vxe-primary-color);
-                }
-                & > input + .vxe-checkbox--icon + .vxe-checkbox--label{
-                    color: #333;
-                }
-            }
-            .vxe-input.is--disabled .vxe-input--date-picker-suffix,
-            .vxe-input.is--disabled .vxe-input--number-suffix,
-            .vxe-input.is--disabled .vxe-input--password-suffix,
-            .vxe-input.is--disabled .vxe-input--search-suffix,
-            .vxe-input.is--disabled .vxe-input--suffix{
-                cursor: auto;
-            }
-        }
-    }
-    .vxe-form{
-        .vxe-form--gather.shFormTitleItem{
-            border: 1px solid var(--vxe-table-border-color);
-        }
-        .vxe-form--item{
-            &.shFormTitleItem{
-                padding: 0.2em 0.8em;
-                border-left: 5px solid var(--vxe-primary-color);
-                margin-bottom: 0.5em;
-                .vxe-form--item-inner{
-                    min-height: auto;
-                    .vxe-form--item-title{
-                        max-width: 100%;
-                        .vxe-form--item-title-postfix{
-                            display: none;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

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

@@ -1,114 +0,0 @@
-<template>
-	<div class="sh-vxe-form" :class="{ readonly: readonly, disabled: disabled }">
-		<vxe-form
-			ref="vxeForm"
-			:key="renderKey"
-			:items="formItems"
-			:data="data"
-			:loading="loading"
-			:size="size"
-			:span="myFormConfig.span"
-			:align="myFormConfig.align"
-			:title-align="myFormConfig.titleAlign"
-			:title-width="myFormConfig.titleWidth"
-			:title-colon="myFormConfig.titleColon"
-			:title-asterisk="myFormConfig.titleAsterisk"
-			:title-overflow="myFormConfig.titleOverflow"
-			:class-name="myFormConfig.className"
-			:custom-layout="myFormConfig.customLayout"
-			:rules="formRules"
-			:prevent-submit="myFormConfig.preventSubmit"
-			:valid-config="validConfig"
-			@submit="onFormSubmit"
-			@submit-invalid="onFormSubmitInvalid"
-			@reset="onFormReset"
-			@collapse="onFormCollapse"
-			@edit-closed="onFormEditClosed"
-			@prefix-click="onPrefixClick"
-			@suffix-click="onSuffixClick">
-			<div v-if="footer" class="sh-common-footer">
-				<div class="sh-common-footer-left">
-					<slot name="formLeft"></slot>
-				</div>
-				<div class="sh-common-footer-right">
-					<slot name="formRight"></slot>
-					<vxe-button v-ripple type="submit" status="primary" :size="size" :disabled="disabled || loading">确认</vxe-button>
-					<vxe-button v-ripple type="reset" :size="size">重置</vxe-button>
-				</div>
-			</div>
-			<template v-for="slot in Object.keys($slots)" #[slot]="scope">
-				<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
-				<slot :name="slot" v-bind="scope"></slot>
-			</template>
-		</vxe-form>
-	</div>
-</template>
-
-<script>
-import defaultData from './mixin/defaultData'
-import props from './js/props'
-import methods from './js/methods'
-export default {
-	name: 'ShForm',
-	components: {},
-	mixins: [defaultData],
-	props: {
-		...props
-	},
-	emits: ['submit', 'reset', 'edit-closed', 'submit-invalid', 'collapse', 'prefix-click', 'suffix-click'],
-	data() {
-		return {
-			renderKey: 1,
-			formItems: [],
-			formRules: {}
-		}
-	},
-	computed: {
-		myFormConfig() {
-			return Object.assign({}, this.formConfigDefault, this.formConfig)
-		}
-	},
-	watch: {
-		readonly(newvalue, oldValue) {
-			this.initFormItems()
-		},
-		data: {
-			handler(newvalue, oldValue) {
-				this.initFormData()
-			},
-			immediate: true
-		},
-		items: {
-			handler(newvalue, oldValue) {
-				this.initFormItems(newvalue)
-			},
-			deep: true
-		},
-		rules: {
-			handler(newvalue, oldValue) {
-				this.initEditRules(newvalue)
-			},
-			deep: true,
-			immediate: true
-		}
-	},
-	created() {
-		this.initCreated()
-	},
-	mounted() {},
-	methods: {
-		formRef() {
-			return this.$refs.vxeForm
-		},
-		// 重新渲染表单
-		refreshRender() {
-			this.renderKey++
-		},
-		...methods
-	}
-}
-</script>
-
-<style lang="scss">
-@import './css/index.scss';
-</style>

package/packages/components/global-components/sh-form/js/methods.js

@@ -1,146 +0,0 @@
-const vxeEvents = {
-	// -------- 表单
-	// 表单提交
-	onFormSubmit(params) {
-		this.$emit('submit', params)
-	},
-	// 表单重置
-	onFormReset(params) {
-		this.initFormItems()
-		this.$vUtils.clear(this.data, null)
-		this.$emit('reset', params)
-	},
-	// 表单项编辑回调
-	async onFormEditClosed(obj, renderbox) {
-		let { property, data } = obj
-		if (this.formRules[property]) {
-			let valerr = await this.formRef().validateField(property)
-			if (!valerr) {
-				this.formRef().clearValidate(property)
-			}
-		}
-		this.$emit('edit-closed', obj, renderbox, this)
-		Object.assign(this.data, data)
-	},
-	// 表单校验不通过
-	onFormSubmitInvalid(params) {
-		this.$emit('submit-invalid', params)
-	},
-	// 表单折叠按钮被手动点击时会触发该事件
-	onFormCollapse(params) {
-		this.$emit('collapse', params)
-	},
-	// 前缀点击事件
-	onPrefixClick(params, render) {
-		this.$emit('prefix-click', params, render)
-	},
-	// 后缀点击事件
-	onSuffixClick(params, render) {
-		this.$emit('suffix-click', params, render)
-	}
-}
-
-const vxeMethods = {
-	// 表单验证方法
-	validate(callback) {
-		return this.formRef().validate(callback)
-	}
-}
-
-const shMethods = {
-	// 初始化
-	initCreated() {
-		this.initFormItems()
-	},
-	// 初始化表单字段
-	initFormData() {
-		const { items, data, $vUtils } = this
-		$vUtils.eachTree(items, item => {
-			let renderProps = item.renderProps || item.itemRender?.props || {}
-			if (!$vUtils.isNone(renderProps?.defaultValue) && $vUtils.isNone($vUtils.get(data, item.field))) {
-				$vUtils.set(data, item.field, renderProps.defaultValue)
-			}
-		})
-	},
-	// 初始化表单项
-	initFormItems(items) {
-		let originItems = items || this.items
-		let { formItemsArr, rules } = this.generateFormItem(originItems)
-		this.initEditRules(rules)
-		this.formItems = formItemsArr
-		this.initFormData()
-	},
-	// 初始化验证规则
-	initEditRules(rules) {
-		const { $vUtils } = this
-		if (rules && $vUtils.isPlainObject(rules)) {
-			Object.keys(rules).forEach(key => {
-				if (this.formRules[key]) {
-					this.formRules[key] = Array.from(new Set(this.formRules[key].concat(rules[key])))
-				} else {
-					this.formRules[key] = rules[key]
-				}
-			})
-		}
-	},
-	// 获取默认验证信息
-	getDefaultMessage(renderType, title) {
-		let message = ''
-		const selectRenders = ['$vSelect', '$vTree', '$vTime', '$vSwitch', '$vCheckbox', '$vCheckgroup', '$vRadio', '$vRadiogroup', '$vUpload']
-		if (selectRenders.includes(renderType)) {
-			message = '请选择' + title
-		} else {
-			message = '请输入' + title
-		}
-		return message
-	},
-	// 判断为true
-	isTrue(value) {
-		return String(value) === '1' || String(value).toLowerCase() === 'true'
-	},
-	// 自动生成表单渲染项
-	generateFormItem(items = []) {
-		const { itemConfigDefault, isItemTitle, titleConfigDefault, readonly, disabled, isTrue, getDefaultMessage, $vUtils } = this
-		let rules = {}
-		// 表单不支持编辑渲染过滤
-		let notRenderName = ['seq', 'checkbox', 'radio', '$vImg', '$vHref', '$vGlobalOption']
-		let renderItems = $vUtils.searchTree(items, item => !((item.renderName && notRenderName.includes(item.renderName)) || notRenderName.includes(item.type)))
-		let formItemsArr = $vUtils.mapTree(renderItems, ori => {
-			let tar = Object.assign({}, itemConfigDefault, ori)
-			if (ori.children && ori.children.length > 0) {
-				if (isItemTitle) Object.assign(tar, titleConfigDefault)
-				return tar
-			}
-			let renderConfig = {
-				name: ori.renderName || '$vInput',
-				props: Object.assign({}, ori.renderProps || {})
-			}
-			if (readonly || disabled) {
-				renderConfig.props.disabled = true
-			}
-			tar.itemRender = Object.assign({}, renderConfig, ori.itemRender || {})
-			// 首先提取校验配置
-			if (isTrue(ori['renderRequire'])) {
-				// 若配置了校验参数则走校验参数，没配置则给默认校验条件
-				if (ori['requireProps'] && Array.isArray(ori['requireProps']) && ori['requireProps'].length > 0) {
-					rules[ori['field']] = ori['requireProps']
-				} else {
-					let dataType = 'string'
-					let arrayType = ['$vCheckgroup', '$vUpload', '$vTable']
-					if (arrayType.includes(ori['renderName']) || ((ori['renderName'] === '$vSelect' || ori['renderName'] === '$vTree') && isTrue(renderConfig.props.multiple))) {
-						dataType = 'array'
-					}
-					rules[ori['field']] = [{ required: true, message: getDefaultMessage(ori['renderName'], ori['title']), type: dataType }]
-				}
-			}
-			return tar
-		})
-		return { formItemsArr, rules }
-	}
-}
-
-export default {
-	...vxeEvents,
-	...vxeMethods,
-	...shMethods
-}

package/packages/components/global-components/sh-form/mixin/defaultData.js

@@ -1,32 +0,0 @@
-export default {
-	data() {
-		return {
-			// 表单默认配置
-			formConfigDefault: {
-				span: 8,
-				align: 'left',
-				titleAlign: 'right',
-				titleWidth: 100,
-				titleColon: true,
-				titleAsterisk: true,
-				titleOverflow: false,
-				className: '',
-				preventSubmit: false
-			},
-			// 表单项默认配置
-			itemConfigDefault: {},
-			// 标题项默认配置
-			titleConfigDefault: {
-				align: 'left',
-				titleAlign: 'left',
-				titleWidth: '100%',
-				titleOverflow: false,
-				className: 'shFormTitleItem'
-			}
-		}
-	},
-	computed: {},
-	methods: {},
-	created() {},
-	activated() {}
-}

package/packages/components/global-components/sh-icon/css/default/index.scss

@@ -1,27 +0,0 @@
-@font-face {
-  font-family: 'Ionicons';
-  src: url("./fonts/ionicons.woff2") format("woff2"),
-  url("./fonts/ionicons.woff") format("woff"),
-  url("./fonts/ionicons.ttf") format("truetype"),
-  url("./fonts/ionicons.svg") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-
-.sh-icon {
-  display: inline-block;
-  font-family: 'Ionicons';
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  text-rendering: optimizeLegibility;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  vertical-align: -0.125em;
-  text-align: center;
-}
-
-@import "icons";

package/packages/components/global-components/sh-icon/css/font/index.scss

@@ -1,16 +0,0 @@
-@font-face {
-  font-family: "iconfont"; /* Project id 3613109 */
-  src: url('./fonts/iconfont.woff2?t=1661513291946') format('woff2'),
-  url('./fonts/iconfont.woff?t=1661513291946') format('woff'),
-  url('./fonts/iconfont.ttf?t=1661513291946') format('truetype');
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-@import "icons";

package/packages/components/global-components/sh-icon/icon-default.vue

@@ -1,32 +0,0 @@
-<template>
-	<i :class="`sh-icon ${type}`" :style="styles"></i>
-</template>
-
-<script>
-import './css/default/index.scss'
-export default {
-	name: 'IcondefaultIcons',
-	props: {
-		type: {
-			type: String,
-			required: true
-		},
-		color: {
-			type: String
-		},
-		size: {
-			type: [Number, String]
-		}
-	},
-	computed: {
-		styles() {
-			return {
-				fontSize: `${this.size}px`,
-				color: this.color
-			}
-		}
-	}
-}
-</script>
-
-<style></style>