sh-view 2.6.4 → 2.6.6

package/README.md

@@ -1,39 +1,85 @@
 # sh-view
 
 #### 介绍
-{**以下是 Gitee 平台说明，您可以替换此简介**
-Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
-无论是个人、团队、或是企业，都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}
+1. 基于vxe-table扩展，功能更强大，配置更便捷，内置18种渲染器，灵活配置，足以满足您的业务需求！
+2. 完全兼容vxe-table原有组件及功能，完全可以自主扩展更多的自定义组件
 
-#### 软件架构
-软件架构说明
+#### 组件
+自封装组件，不依赖其他ui框架
+1. 默认全局安装：
+ShAlert,
+ShBadge,
+ShCard,
+ShCodeEditor,
+ShCol,
+ShCorner,
+ShCountTo,
+ShDrawer,
+ShEmpty,
+ShForm,
+ShHeader,
+ShIcon,
+ShImage,
+ShList,
+ShLoading,
+ShModal,
+ShNoticebar,
+ShPoptip,
+ShProgress,
+ShPullRefresh,
+ShQuery,
+ShResult,
+ShRow,
+ShSplit,
+ShGrid,
+ShTable,
+ShTabs,
+ShTag,
+ShToolbar,
+ShTree,
+ShUpload,
+ShWaterFall,
+ShWaterMark
 
+2. 手动安装（业务）：
+ShCronModal(cron表达式),
+ShMarkdown(富文本编辑),
+ShMenu(菜单、支持竖向、横向、收起)
 
 #### 安装教程
+版本：[vue](https://www.npmjs.com/package/vue) 3.x
+```shell
+npm install sh-tools sh-view@next
+```
+```javascript
+import { createApp } from 'vue'
+import ShView from 'sh-view'
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+createApp(App).use(ShView).mount('#app')
+```
 
 #### 使用说明
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+1.  暂无文档，请参考示例或者组件api
+2.  作者QQ：577754811
 
-#### 参与贡献
 
-1.  Fork 本仓库
-2.  新建 Feat_xxx 分支
-3.  提交代码
-4.  新建 Pull Request
+#### 功能计划
+* [x] v2.6.4 基于 vxe4.+，包含vxe-table所有功能，扩展更强渲染器
+* [ ] 下一阶段：独立vxe的日历组件，独立范围选择日期渲染器；低代码配置；基础sh-view的admin系统开源（包含低代码设计模板，及系统鉴权、路由守卫等）
 
 
-#### 特技
-
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
-5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+#### 项目预览
+<img alt="img.png" src="examples/assets/img/img.png" width="100%"/>
+<img alt="img_1.png" src="examples/assets/img/img_1.png" width="49%"/>
+<img alt="img_2.png" src="examples/assets/img/img_2.png" width="49%"/>
+<img alt="img_3.png" src="examples/assets/img/img_3.png" width="49%"/>
+<img alt="img_4.png" src="examples/assets/img/img_4.png" width="49%"/>
+<img alt="img_5.png" src="examples/assets/img/img_5.png" width="49%"/>
+<img alt="img_6.png" src="examples/assets/img/img_6.png" width="49%"/>
+<img alt="img_7.png" src="examples/assets/img/img_7.png" width="49%"/>
+<img alt="img_8.png" src="examples/assets/img/img_8.png" width="49%"/>
+<img alt="img_9.png" src="examples/assets/img/img_9.png" width="49%"/>
+<img alt="img_10.png" src="examples/assets/img/img_10.png" width="49%"/>
+<img alt="img_11.png" src="examples/assets/img/img_11.png" width="49%"/>
+<img alt="img_12.png" src="examples/assets/img/img_12.png" width="49%"/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.6.4",
+  "version": "2.6.6",
   "description": "基于vxe-table二次封装",
   "main": "packages/index.js",
   "scripts": {
@@ -27,6 +27,7 @@
     "exceljs": "^4.3.0",
     "jspdf": "^2.5.1",
     "jszip": "^3.10.1",
+    "lunar-javascript": "^1.6.4",
     "popper.js": "^1.16.1",
     "sh-tools": "^2.1.6",
     "tinymce": "^5.10.5",

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

@@ -0,0 +1,502 @@
+<template>
+	<div class="sh-calendar">
+		<div v-if="header" class="sh-calendar-row sh-calendar-head">
+			<div class="info">{{ monthInfo }}</div>
+			<div class="extra">
+				<template v-for="item in headerHandles" :key="item.code">
+					<span class="sh-calendar-btn" @click="handleBtn(item)"><i :class="item.icon"></i></span>
+				</template>
+			</div>
+		</div>
+		<table class="sh-calendar-table" v-bind="tableConfig">
+			<thead>
+				<tr>
+					<template v-for="(head, headIndex) in headers" :key="headIndex">
+						<th>{{ head.label }}</th>
+					</template>
+				</tr>
+			</thead>
+			<tbody @mouseleave="dateMouseleaveEvent">
+				<template v-for="(row, rowIndex) in dayDatas" :key="rowIndex">
+					<tr>
+						<template v-for="(item, itemIndex) in row" :key="itemIndex">
+							<td :class="getCellClass(item)" @mouseenter="dateMouseenterEvent(item)" @click="dateSelectEvent(item)">
+								<slot name="cell" v-bind="item">
+									<div class="sh-calendar-cell" :style="{ textAlign: align }">
+										<div class="sh-calendar-cell-head">{{ item.label }}</div>
+										<div v-if="note" class="sh-calendar-cell-body" :style="{ height: noteHeight }">{{ noteMethod(item) }}</div>
+										<div v-if="festival" class="sh-calendar-cell-foot">{{ getLunarDate(item.date) }}</div>
+									</div>
+								</slot>
+							</td>
+						</template>
+					</tr>
+				</template>
+			</tbody>
+		</table>
+		<div v-if="footer" class="sh-calendar-foot">
+			<div class="sh-calendar-row">
+				<div class="info">
+					<div>{{ lunarInfo.day }}</div>
+					<div class="sh-calendar-title">{{ lunarInfo.lunarMonth }}月 {{ lunarInfo.lunarDay }}</div>
+					<div class="sh-calendar-title">{{ lunarInfo.jq }}</div>
+				</div>
+				<div class="info right">
+					<div class="sh-calendar-title">{{ lunarInfo.yearGanZhi }}年 {{ lunarInfo.yearShengXiao }}</div>
+					<div>{{ lunarInfo.monthGanZhi }}月 {{ lunarInfo.dayGanZhi }}</div>
+				</div>
+			</div>
+			<div class="sh-calendar-row">
+				<div class="extra"><span class="sh-calendar-tag yi">宜</span></div>
+				<div class="info">
+					<template v-for="(y, yIndex) in lunarInfo.yi" :key="yIndex">
+						<span class="sh-calendar-span">{{ y }}</span>
+					</template>
+				</div>
+			</div>
+			<div class="sh-calendar-row">
+				<div class="extra"><span class="sh-calendar-tag ji">忌</span></div>
+				<div class="info">
+					<template v-for="(j, jIndex) in lunarInfo.ji" :key="jIndex">
+						<span class="sh-calendar-span">{{ j }}</span>
+					</template>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { computed, defineComponent, getCurrentInstance, ref, reactive, onBeforeMount, PropType, watch } from 'vue'
+import { Lunar, HolidayUtil } from 'lunar-javascript'
+export default defineComponent({
+	name: 'ShCalendar',
+	props: {
+		modelValue: [String, Number, Date],
+		type: { type: String, default: 'day' }, // day, month, year 暂时只支持day
+		startDay: { type: [String, Number], default: 1 },
+		align: { type: String, default: 'center' },
+		header: { type: Boolean, default: true },
+		footer: { type: Boolean, default: false },
+		note: { type: Boolean, default: false }, // 是否备注
+		noteHeight: { type: String, default: '22px' }, // 备注高度
+		noteMethod: { type: Function, default() {} },
+		festival: { type: Boolean, default: false }, // 是否显示农历
+		valueFormat: { type: String, default: '' },
+		weeks: {
+			type: Array,
+			default() {
+				return ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+			}
+		}
+	},
+	emits: ['update:modelValue', 'change'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const headerHandles = [
+			{ code: 'prev', icon: 'vxe-icon-caret-left' },
+			{ code: 'current', icon: 'vxe-icon-dot' },
+			{ code: 'next', icon: 'vxe-icon-caret-right' }
+		]
+		const reactData = reactive({
+			inputValue: props.modelValue,
+			panelValue: null,
+			panelLabel: '',
+			selectMonth: null,
+			currentDate: null
+		})
+		const computeFirstDayOfWeek = computed(() => {
+			const { startDay, startWeek } = props
+			return $vUtils.toNumber($vUtils.isNumber(startDay) || $vUtils.isString(startDay) ? startDay : startWeek)
+		})
+		const computeWeekDatas = computed(() => {
+			const weeks = []
+			let sWeek = computeFirstDayOfWeek.value
+			weeks.push(sWeek)
+			for (let index = 0; index < 6; index++) {
+				if (sWeek >= 6) {
+					sWeek = 0
+				} else {
+					sWeek++
+				}
+				weeks.push(sWeek)
+			}
+			return weeks
+		})
+		const computeDateHMSTime = computed(() => {
+			const dateValue = computeDateValue.value
+			return dateValue ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0
+		})
+		const computeDayList = computed(() => {
+			const { selectMonth, currentDate } = reactData
+			const days = []
+			if (selectMonth && currentDate) {
+				const dateHMSTime = computeDateHMSTime.value
+				const weekDatas = computeWeekDatas.value
+				const currFullYear = currentDate.getFullYear()
+				const currMonth = currentDate.getMonth()
+				const currDate = currentDate.getDate()
+				const selFullYear = selectMonth.getFullYear()
+				const selMonth = selectMonth.getMonth()
+				const selDay = selectMonth.getDay()
+				const prevOffsetDate = -weekDatas.indexOf(selDay)
+				const startDayDate = new Date($vUtils.getWhatDay(selectMonth, prevOffsetDate).getTime() + dateHMSTime)
+				for (let index = 0; index < 42; index++) {
+					const date = $vUtils.getWhatDay(startDayDate, index)
+					const itemFullYear = date.getFullYear()
+					const itemMonth = date.getMonth()
+					const itemDate = date.getDate()
+					const isPrev = date < selectMonth
+					days.push({
+						date,
+						isPrev,
+						isCurrent: itemFullYear === selFullYear && itemMonth === selMonth,
+						isNow: itemFullYear === currFullYear && itemMonth === currMonth && itemDate === currDate,
+						isNext: !isPrev && selMonth !== itemMonth,
+						label: itemDate
+					})
+				}
+			}
+			return days
+		})
+
+		// 以下为日历需要
+		const tableConfig = computed(() => ({ cellspacing: 0, cellpadding: 0, border: 0 }))
+		const headers = computed(() => {
+			const weekDatas = computeWeekDatas.value
+			return weekDatas.map(day => {
+				return { value: day, label: props.weeks[day] }
+			})
+		})
+		const dayDatas = computed(() => {
+			const dayList = computeDayList.value
+			return $vUtils.chunk(dayList, 7)
+		})
+		const computeDateValue = computed(() => {
+			const { inputValue } = reactData
+			let val = null
+			if (inputValue) {
+				const date = $vUtils.toStringDate(inputValue, props.valueFormat)
+				if ($vUtils.isValidDate(date)) {
+					val = date
+				}
+			}
+			return val
+		})
+		const monthInfo = computed(() => $vUtils.toDateString(reactData.selectMonth, 'yyyy 年 MM 月'))
+		const dayInfo = computed(() => $vUtils.toDateString(reactData.currentDate, 'yyyyMMdd'))
+		const lunarInfo = computed(() => {
+			let dayDate = reactData.inputValue || reactData.currentDate
+			let lunarDate = Lunar.fromDate(dayDate)
+			return {
+				day: $vUtils.toDateString(dayDate, 'yyyy 年 MM 月 dd 日'),
+				lunarMonth: lunarDate.getMonthInChinese(),
+				lunarDay: lunarDate.getDayInChinese(),
+				yearGanZhi: lunarDate.getYearInGanZhi(),
+				yearShengXiao: lunarDate.getYearShengXiao(),
+				monthGanZhi: lunarDate.getMonthInGanZhi(),
+				dayGanZhi: lunarDate.getDayInGanZhi(),
+				yi: lunarDate.getDayYi(),
+				ji: lunarDate.getDayJi(),
+				jq: lunarDate.getJieQi()
+			}
+		})
+		const isDateDisabled = item => {
+			const { disabledMethod } = props
+			return disabledMethod && disabledMethod({ type: props.type, date: item.date })
+		}
+		const dateChange = date => {
+			emitValue(date)
+			emit('change', date)
+		}
+		const dateSelectItem = date => {
+			const { type } = props
+			if (type === 'month') {
+			} else if (type === 'year') {
+			} else {
+				dateChange(date)
+			}
+		}
+		const dateCheckMonth = date => {
+			const month = $vUtils.getWhatMonth(date, 0, 'first')
+			if (!$vUtils.isEqual(month, reactData.selectMonth)) {
+				reactData.selectMonth = month
+			}
+		}
+		const dateMoveDay = date => {
+			if (isDateDisabled(date)) return
+			const dayList = computeDayList.value
+			if (!dayList.some(item => $vUtils.isDateSame(item.date, date.date, 'yyyyMMdd'))) {
+				dateCheckMonth(date.date)
+			}
+			dateParseValue(date.date)
+		}
+		const dateSelectEvent = item => {
+			if (isDateDisabled(item)) return
+			dateSelectItem(item.date)
+		}
+		const dateMouseenterEvent = item => {
+			if (isDateDisabled(item)) return
+			const { datePanelType } = reactData
+			if (datePanelType === 'month') {
+				// dateMoveMonth(item.date)
+			} else if (datePanelType === 'year') {
+				// 	dateMoveYear(item.date)
+			} else {
+				dateMoveDay(item)
+			}
+		}
+		const dateMouseleaveEvent = () => {
+			dateParseValue()
+		}
+		const dateParseValue = value => {
+			let dValue = null
+			if (value) {
+				dValue = $vUtils.toStringDate(value, props.valueFormat)
+			}
+			if (dValue && !$vUtils.isValidDate(dValue)) {
+				dValue = null
+			}
+			reactData.panelValue = dValue
+		}
+		const getLunarDate = day => {
+			let lunarDate = Lunar.fromDate(day)
+			let lunarText = lunarDate.getDayInChinese()
+			const jq = lunarDate.getJieQi()
+			const solarFestivals = lunarDate.getFestivals()
+			if (jq) {
+				lunarText = jq
+			} else if (lunarDate.getDay() === 1) {
+				lunarText = lunarDate.getMonthInChinese() + '月'
+			} else if (solarFestivals.length > 0) {
+				const f = solarFestivals[0]
+				if (f.length < 4) {
+					lunarText = f
+				}
+			}
+			return lunarText
+		}
+		const getCellClass = item => {
+			const { panelValue } = reactData
+			const dateValue = computeDateValue.value
+			const matchFormat = 'yyyyMMdd'
+			const ymd = $vUtils.toDateString(item.date, matchFormat)
+			const lunarDate = Lunar.fromDate(item.date)
+			const holiday = HolidayUtil.getHoliday(ymd)
+			let rest = false
+			if ([0, 6].includes(lunarDate.getWeek())) {
+				rest = true
+			}
+			if (holiday) rest = !holiday.isWork()
+			return {
+				'is--prev': item.isPrev,
+				'is--current': item.isCurrent,
+				'is--now': item.isNow,
+				'is--next': item.isNext,
+				'is--holiday': holiday,
+				'is--rest': rest,
+				'is--disabled': isDateDisabled(item),
+				'is--selected': $vUtils.isDateSame(dateValue, item.date, matchFormat),
+				'is--hover': $vUtils.isDateSame(panelValue, item.date, matchFormat)
+			}
+		}
+		const handleBtn = ({ code }) => {
+			try {
+				const { currentDate, selectMonth } = reactData
+				switch (code) {
+					case 'prev':
+						reactData.selectMonth = $vUtils.getWhatMonth(selectMonth, -1, 'first')
+						break
+					case 'next':
+						reactData.selectMonth = $vUtils.getWhatMonth(selectMonth, 1, 'first')
+						break
+					case 'current':
+						reactData.selectMonth = $vUtils.getWhatMonth(currentDate, 0, 'first')
+						break
+					default:
+						break
+				}
+			} catch (e) {
+				proxy.msgwarning(e.message)
+			}
+		}
+		const emitValue = (value, evnt) => {
+			reactData.inputValue = value
+			emit('update:modelValue', value)
+		}
+
+		// 初始化
+		const initValue = () => {
+			reactData.currentDate = $vUtils.getWhatDay(Date.now(), 0, 'first')
+			reactData.selectMonth = $vUtils.getWhatMonth(reactData.currentDate, 0, 'first')
+		}
+
+		onBeforeMount(() => {
+			initValue()
+		})
+
+		watch(
+			() => props.modelValue,
+			val => {
+				reactData.inputValue = val
+			}
+		)
+
+		return {
+			tableConfig,
+			headers,
+			dayDatas,
+			monthInfo,
+			dayInfo,
+			lunarInfo,
+			headerHandles,
+			getLunarDate,
+			getCellClass,
+			handleBtn,
+			dateSelectEvent,
+			dateMouseenterEvent,
+			dateMouseleaveEvent
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.sh-calendar {
+	overflow: auto;
+	.sh-calendar-title {
+		font-size: 18px;
+		font-weight: bold;
+	}
+	.sh-calendar-span {
+		margin-right: 5px;
+	}
+	.sh-calendar-tag {
+		border-radius: 30px;
+		padding: 5px;
+		display: inline-flex;
+		vertical-align: top;
+		line-height: 1;
+		margin-right: 10px;
+		&.yi {
+			background-color: var(--vxe-success-color);
+			color: #fff;
+		}
+		&.ji {
+			background-color: var(--vxe-danger-color);
+			color: #fff;
+		}
+	}
+	.sh-calendar-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.info {
+			flex: 1;
+			&.right {
+				text-align: right;
+			}
+		}
+		.extra {
+			display: inline-flex;
+			flex-wrap: nowrap;
+		}
+		& + .sh-calendar-row {
+			margin-top: 5px;
+		}
+	}
+	.sh-calendar-head,
+	.sh-calendar-foot {
+		padding: 8px;
+		border: 1px solid var(--vxe-table-border-color);
+	}
+	.sh-calendar-head {
+		border-bottom: none;
+		line-height: 1;
+	}
+	.sh-calendar-foot {
+		border-top: none;
+	}
+	.sh-calendar-btn {
+		padding: 5px;
+		border-radius: var(--vxe-border-radius);
+		border: 1px solid var(--vxe-table-border-color);
+		margin-left: 5px;
+		&:hover {
+			color: var(--vxe-primary-color);
+		}
+	}
+	.sh-calendar-cell {
+		display: block;
+		&-head {
+			padding: 3px 5px;
+			& + .sh-calendar-cell-foot {
+				padding-top: 0;
+			}
+		}
+		&-body {
+			overflow: auto;
+		}
+		&-foot {
+			padding: 3px 5px;
+			font-size: 0.8em;
+		}
+	}
+	table {
+		border: 0;
+		width: 100%;
+		border-spacing: 0;
+		border-collapse: collapse;
+		table-layout: fixed;
+		height: 100%;
+	}
+	th,
+	td {
+		font-weight: normal;
+		position: relative;
+		border: 1px solid var(--vxe-table-border-color);
+		height: 36px;
+	}
+	td {
+		&.is--prev,
+		&.is--next {
+			color: var(--vxe-font-disabled-color);
+		}
+		//&.is--rest {
+		//	.sh-calendar-cell-head {
+		//		color: var(--vxe-danger-color);
+		//	}
+		//}
+		&.is--now {
+			&:not(.is--selected) {
+				color: var(--vxe-primary-color);
+				&.is--current {
+					background-color: var(--primary-weak-color);
+				}
+			}
+		}
+		&.is--hover {
+			background-color: var(--vxe-input-date-picker-hover-background-color);
+		}
+		&.is--selected {
+			color: var(--vxe-input-date-picker-selected-color);
+			background-color: var(--vxe-primary-color);
+			&.is--prev,
+			&.is--next {
+				background-color: var(--vxe-primary-lighten-color);
+			}
+		}
+		&:not(.is--disabled) {
+			cursor: pointer;
+		}
+		&.is--disabled {
+			cursor: no-drop;
+			color: var(--vxe-input-disabled-color);
+			background-color: var(--vxe-input-disabled-background-color);
+		}
+	}
+}
+</style>

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

@@ -1,69 +1,68 @@
-<script>
-import { computed, defineComponent, getCurrentInstance, h, inject, ref, resolveComponent, renderSlot } from 'vue'
-import { turnColumnItemFilters } from '../js/tableMethods'
-export default defineComponent({
-	name: 'ShColumn',
-	props: {
-		column: {
-			type: Object
-		}
-	},
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const shTable = inject('ShTableInstance')
-
-		const isGroup = computed(() => {
-			return proxy.hasChildren(props.column)
-		})
-		const columnConfig = computed(() => {
-			let renderObj = { name: props.column.renderName, props: props.column.renderProps }
-			let config = Object.assign({}, shTable.columnObjConfig, props.column)
-			if (props.column.readonly) {
-				config.cellRender = config.cellRender || renderObj
-			} else {
-				config.editRender = config.editRender || renderObj
-			}
-			if (config.renderName === '$vMoney' && props.column.renderProps.bill) {
-				config.filter = false
-				config.headerClassName += ' header-bill-cell'
-			}
-			if (config.filter === true || Number(config.filter) === 1) {
-				shTable.turnColumnItemFilters(config, renderObj.props)
-			}
-			return $vUtils.omit(config, ['renderName', 'renderProps', 'renderRequire', 'requireProps'])
-		})
-		const groupConfig = computed(() => {
-			return $vUtils.omit(columnConfig.value, ['children', 'cellRender', 'editRender'])
-		})
-		const renderVN = () => {
-			let columnSlots = {}
-			if (props.column.slots) {
-				Object.keys(props.column.slots).map(key => {
-					columnSlots[key] = shTable.slots[props.column.slots[key]]
-				})
-			}
-			if (isGroup.value) {
-				let childrenList = props.column.children.map(child => {
-					return h(resolveComponent('sh-column'), { column: child })
-				})
-				columnSlots.default = () => childrenList
-				return h(resolveComponent('vxe-colgroup'), { ...groupConfig.value }, columnSlots)
-			}
-			return h(resolveComponent('vxe-column'), { ...columnConfig.value }, columnSlots)
-		}
-
-		return {
-			isGroup,
-			columnConfig,
-			groupConfig,
-			renderVN
-		}
-	},
-	render() {
-		return this.renderVN()
-	}
-})
-</script>
-
-<style scoped lang="scss"></style>
+<script>
+import { computed, defineComponent, getCurrentInstance, h, inject, ref, resolveComponent, renderSlot } from 'vue'
+export default defineComponent({
+	name: 'ShColumn',
+	props: {
+		column: {
+			type: Object
+		}
+	},
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const shTable = inject('ShTableInstance')
+
+		const isGroup = computed(() => {
+			return proxy.hasChildren(props.column)
+		})
+		const columnConfig = computed(() => {
+			let renderObj = { name: props.column.renderName, props: props.column.renderProps }
+			let config = Object.assign({}, shTable.columnObjConfig, props.column)
+			if (props.column.readonly) {
+				config.cellRender = config.cellRender || renderObj
+			} else {
+				config.editRender = config.editRender || renderObj
+			}
+			if (config.renderName === '$vMoney' && props.column.renderProps.bill) {
+				config.filter = false
+				config.headerClassName += ' header-bill-cell'
+			}
+			if (config.filter === true || Number(config.filter) === 1) {
+				shTable.turnColumnItemFilters(config, renderObj.props)
+			}
+			return $vUtils.omit(config, ['children', 'renderName', 'renderProps', 'renderRequire', 'requireProps'])
+		})
+		const groupConfig = computed(() => {
+			return $vUtils.omit(columnConfig.value, ['cellRender', 'editRender'])
+		})
+		const renderVN = () => {
+			let columnSlots = {}
+			if (props.column.slots) {
+				Object.keys(props.column.slots).map(key => {
+					columnSlots[key] = shTable.slots[props.column.slots[key]]
+				})
+			}
+			if (isGroup.value) {
+				let childrenList = props.column.children.map(child => {
+					return h(resolveComponent('sh-column'), { column: child })
+				})
+				columnSlots.default = () => childrenList
+				return h(resolveComponent('vxe-colgroup'), { ...groupConfig.value }, columnSlots)
+			}
+			return h(resolveComponent('vxe-column'), { ...columnConfig.value }, columnSlots)
+		}
+
+		return {
+			isGroup,
+			columnConfig,
+			groupConfig,
+			renderVN
+		}
+	},
+	render() {
+		return this.renderVN()
+	}
+})
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -86,8 +86,8 @@ export default function (props, context, proxy, isGrid) {
 	const tablePrevColumns = computed(() => {
 		let prevColumns = []
 		const { seq, selectType } = tableGlobalConfig.value
-		if (seq) prevColumns.push(columnsMapDefault.seq)
 		if (selectType) prevColumns.push(columnsMapDefault[selectType])
+		if (seq) prevColumns.push(columnsMapDefault.seq)
 		return prevColumns
 	})
 	const tableColumns = computed(() => {

package/packages/components/index.js

@@ -1,6 +1,7 @@
 // 全局公共封装组件
 import ShAlert from './global-components/sh-alert/index.vue'
 import ShBadge from './global-components/sh-badge/index.vue'
+import ShCalendar from './global-components/sh-calendar/index.vue'
 import ShCard from './global-components/sh-card/index.vue'
 import ShCodeEditor from './global-components/sh-code-editor/index.vue'
 import ShCol from './global-components/sh-col/index.vue'
@@ -37,6 +38,7 @@ import { VxeButton, VxeInput, VxeTextarea, VxeSelect } from 'vxe-table'
 const components = {
 	ShAlert,
 	ShBadge,
+	ShCalendar,
 	ShCard,
 	ShCodeEditor,
 	ShCol,

package/packages/vxeTable/render/cell/vxe-render-table.vue

@@ -1,51 +1,51 @@
-<template>
-	<span class="vxe-render--inner" style="display: inline-grid; width: 100%">
-		<sh-table
-			ref="shTableRef"
-			:disabled="!redit && !isEditAll"
-			v-bind="rprops"
-			:size="rsize"
-			:data-sourse="renderValue"
-			@edit-closed="vxeInputCallback"
-			@toolbaroption="onToolbaroption"></sh-table>
-	</span>
-</template>
-
-<script>
-import { defineComponent, getCurrentInstance, ref } from 'vue'
-import cellProps from '../mixin/cell-props'
-import cellHooks from '../mixin/cell-hooks'
-export default defineComponent({
-	name: 'VxeRenderTable',
-	props: cellProps,
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const useCell = cellHooks(props, context, proxy)
-		const shTableRef = ref()
-
-		const fullData = () => {
-			return shTableRef.value.getFullData()
-		}
-
-		// 输入框回调
-		const vxeInputCallback = ({ $table, row }) => {
-			driveBackData()
-		}
-		// 新增、删除行回调
-		const onToolbaroption = (code, data, $table) => {
-			driveBackData()
-		}
-		// 回填数据
-		const driveBackData = value => {
-			useCell.setRenderValue(fullData(), true)
-		}
-
-		return {
-			...useCell,
-			shTableRef,
-			vxeInputCallback,
-			onToolbaroption
-		}
-	}
-})
-</script>
+<template>
+	<span class="vxe-render--inner" style="display: inline-grid; width: 100%">
+		<sh-table
+			ref="shTableRef"
+			:disabled="!redit && !isEditAll"
+			v-bind="rprops"
+			:size="rsize"
+			:data-sourse="renderValue"
+			@edit-closed="vxeInputCallback"
+			@toolbaroption="onToolbaroption"></sh-table>
+	</span>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance, ref } from 'vue'
+import cellProps from '../mixin/cell-props'
+import cellHooks from '../mixin/cell-hooks'
+export default defineComponent({
+	name: 'VxeRenderTable',
+	props: cellProps,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const useCell = cellHooks(props, context, proxy)
+		const shTableRef = ref()
+
+		const fullData = () => {
+			return shTableRef.value.getFullData({ deleteXid: true })
+		}
+
+		// 输入框回调
+		const vxeInputCallback = ({ $table, row }) => {
+			driveBackData()
+		}
+		// 新增、删除行回调
+		const onToolbaroption = (code, data, $table) => {
+			driveBackData()
+		}
+		// 回填数据
+		const driveBackData = value => {
+			useCell.setRenderValue(fullData(), true)
+		}
+
+		return {
+			...useCell,
+			shTableRef,
+			vxeInputCallback,
+			onToolbaroption
+		}
+	}
+})
+</script>