hs-admin-ui 1.0.0

package/src/components/business/bcFormConfig/bcFormConfig.vue

@@ -0,0 +1,196 @@
+<!-- 
+  desc: 父类配置
+  author:lvling
+ -->
+<template>
+	<div>
+		<hs-form
+			ref="formRef"
+			:label-width="parentConfig['labelWidth']"
+			:inline="false"
+			label-position="right"
+			label-suffix=":"
+			:hide-required-asterisk="false"
+			require-asterisk-position="right"
+			show-message
+			inline-message
+			status-icon
+			:disabled="false"
+			v-bind="$attrs"
+			scroll-to-error
+			:rules="rules"
+			:model="formData"
+			:style="`min-width: ${parentConfig['minWidth']}px`"
+		>
+			<hs-row :gutter="0" justify="start" align="middle" class="hs-row">
+				<template v-for="(item, index) in formConfig">
+					<hs-col
+						:key="index"
+						v-if="item['show'] !== false"
+						:span="item['span'] || parentConfig['span']"
+						:xs="item['xs'] || parentConfig['xs']"
+						:sm="item['sm'] || parentConfig['sm']"
+						:md="item['md'] || parentConfig['md']"
+						:lg="item['lg'] || parentConfig['lg']"
+						:xl="item['xl'] || parentConfig['xl']"
+						:style="parentConfig.style"
+					>
+						<template v-if="item.slot">
+							<slot :name="item.slot" v-bind="item"></slot>
+						</template>
+						<hs-form-item v-else :label="item['label']" :prop="item['prop']" :required="item['required']">
+							<template #label>
+								<span class="text-[#606266] truncate">&nbsp; {{ item['label'] }}&nbsp; <span v-if="parentConfig.showColon">: &nbsp; </span></span>
+								<el-tooltip class="box-item" effect="dark" :content="item['tooltip'] || item['label']" placement="top">
+									<div>
+										<el-icon><ele-Warning /></el-icon>
+									</div>
+								</el-tooltip>
+							</template>
+							<template v-if="item.slotValue">
+								<slot :name="item.slotValue" v-bind="item"></slot>
+							</template>
+							<!-- placeholder="请输入" -->
+
+							<component
+								v-else
+								:is="item['el']"
+								v-model="formData[item.prop]"
+								:multiple="item['multiple']"
+								:size="item['size']"
+								:type="item['type']"
+								:disabled="item['disabled']"
+								border
+								:clearable="item.clearable != false"
+								@change="onChange($event, item)"
+							>
+								<component
+									:is="item['cel']"
+									v-for="(value, idx) in item['op'] || []"
+									:key="idx"
+									:label="value['label']"
+									:value="value['value']"
+								></component>
+							</component>
+						</hs-form-item>
+					</hs-col>
+				</template>
+				<div></div>
+			</hs-row>
+		</hs-form>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import IFormTable from '/@/types/formTable';
+
+const props = defineProps({
+	// 表单配置
+	parentConfig: {
+		type: Object,
+		default: () => {
+			return {
+				labelWidth: 150,
+				xs: 24,
+				sm: 24,
+				md: 12,
+				lg: 12,
+				xl: 8,
+				style: '',
+				minWidth: 350,
+				showColon: false, // 显示冒号
+			};
+		},
+	},
+	// 表单绑定数据
+	data: {
+		type: Object,
+		default: () => {},
+	},
+	// 表单配置项数组
+	config: {
+		type: Array<IFormTable.FormItem>,
+		default: () => [],
+	},
+	rules: {
+		type: Object,
+		default: () => {},
+	},
+	// 是否监听配置
+	watchConfig: {
+		type: Boolean,
+		default: true,
+	},
+});
+let formData = ref(props.data);
+
+let formConfig = ref(props.config);
+
+watch(
+	() => props.data,
+	(value) => {
+		formData.value = value;
+	},
+	{
+		deep: true,
+	}
+);
+watch(
+	() => props.config,
+	(value) => {
+		if (props.watchConfig) {
+			formConfig.value = value;
+			// console.log('formConfig', formConfig.value);
+		}
+	},
+	{
+		deep: true,
+	}
+);
+// 表单实例
+const formRef = ref();
+/**
+ * 校验formdata
+ */
+const getSubmitData = () => {
+	return new Promise((resolve) => {
+		if (!formRef.value) {
+			resolve(false);
+			return;
+		}
+		formRef.value.validate((valid: 'undefined' | boolean) => {
+			if (valid) {
+				resolve(true);
+			} else {
+				resolve(false);
+			}
+		});
+	});
+};
+// 派生事件
+let emits = defineEmits(['change']);
+/**
+ *选择器切换事件
+ * @param e
+ */
+const onChange = (value: string, item: IFormTable.FormItem) => {
+	let prop = item.prop;
+	emits('change', value, prop, item);
+};
+defineExpose({ props, getSubmitData });
+</script>
+
+<style lang="scss" scoped>
+.hs-row {
+	:deep(.el-form-item) {
+		border: 1px solid #e7eaf2;
+		background-color: #f2f5f9;
+	}
+	:deep(.el-form-item__content) {
+		border-left: 1px solid #e7eaf2;
+		background-color: #fff;
+	}
+}
+//
+</style>

package/src/components/business/bcFormTable/bcFormTable.vue

@@ -0,0 +1,91 @@
+<template>
+	<div ref="wrapRef" class="bc-form-table__wrapper h-full" :class="[isOverHide ? 'overflow-auto' : 'overflow-hide']">
+		<form-search-btn v-if="!hideBtn && btns.length" ref="btnRef" :btns="btns">
+			<template v-for="(value, name) in $slots" #[name]="scopeData" :key="name">
+				<slot :name="name" v-bind="scopeData || {}"></slot>
+			</template>
+		</form-search-btn>
+		<context-body :menu="menuForm" v-if="!hideSearch && data?.form">
+			<bc-form-search ref="formRef" v-bind="data!.form" v-if="!isShowDrag" @heightChange="onHeightChange">
+				<template v-for="(value, name) in $slots" #[name]="scopeData" :key="name">
+					<slot :name="name" v-bind="scopeData || {}"></slot>
+				</template>
+			</bc-form-search>
+			<bc-form-drag ref="formRef" v-model:formConfig="data.form!.formConfig" v-bind="_.omit(data!.form, 'formConfig')" v-else>
+				<template v-for="(value, name) in $slots" #[name]="scopeData" :key="name">
+					<slot :name="name" v-bind="scopeData || {}"></slot>
+				</template>
+			</bc-form-drag>
+		</context-body>
+
+		<!-- 多表格数据展示 -->
+		<context-body target=".vxe-table--body-wrapper" :menu="menuTable" v-if="data?.tables">
+			<bc-tabs :style="style" v-model:active="activeTabs" :tabs="data!.tables">
+				<bc-table
+					v-for="item in data!.tables"
+					v-show="activeTabs === item.id"
+					v-bind="item"
+					:key="item.id"
+					:unique-id="data.config_unique_id"
+					class="h-full"
+					@ready="onReady($event, item.id)"
+					@page-change="onPageChange"
+				>
+					<template v-for="(value, name) in $slots" #[name]="scopeData" :key="name">
+						<slot :name="name" v-bind="scopeData || {}"></slot>
+					</template>
+				</bc-table>
+			</bc-tabs>
+		</context-body>
+	</div>
+</template>
+<script lang="ts" setup name="bcFormTable">
+import { ref, onMounted, PropType, computed } from 'vue';
+import BcFormDrag from '../bcForm/bcFormDrag.vue';
+import ContextBody from './components/contextBody/contextBody.vue';
+import BcTabs from './components/bcTabs/bcTabs.vue';
+import FormSearchBtn from './components/formSearchBtn/formSearchBtn.vue';
+import ICustomData from '/@/types/customData';
+import { useTableHeight } from './utils/useTableHeight';
+import { useButon } from './utils/useButon';
+import { onFormKey } from './utils/onFormKey';
+import { onTableKey } from './utils/onTableKey';
+import { TableParams } from './utils/parseTable';
+import _ from 'lodash';
+
+const props = defineProps({
+	hideBtn: {
+		type: Boolean,
+		default: false,
+	},
+	hideSearch: {
+		type: Boolean,
+		default: false,
+	},
+	data: {
+		type: Object as PropType<ICustomData.FormTable>,
+	},
+});
+
+const emit = defineEmits<{ ready: [params: TableParams] }>();
+
+const tabIndex = ref('');
+const activeTabs = computed({
+	get() {
+		return tabIndex.value === '' ? _.get(props, 'data.tables.0.id', '') : tabIndex.value;
+	},
+	set(val) {
+		tabIndex.value = val;
+	},
+});
+const { wrapRef, btnRef, formRef, tableApi, style, isOverHide, onReady, onHeightChange } = useTableHeight();
+
+const { menuForm, isShowDrag } = onFormKey(formRef, tableApi, activeTabs, props);
+const { menuTable, onPageChange } = onTableKey(formRef, tableApi, activeTabs, props);
+const { btns } = useButon(formRef, tableApi, activeTabs, props);
+
+onMounted(() => {
+	emit('ready', { tableApi, activeTabs, api: computed(() => tableApi.value[activeTabs.value]) });
+});
+</script>
+<style scoped lang="scss"></style>

package/src/components/business/bcFormTable/components/bcTabs/bcTabs.vue

@@ -0,0 +1,53 @@
+<template>
+	<div ref="wrapRef" class="tabs-wrapper flex flex-col bg-white px-2">
+		<div ref="headRef" class="flex items-center justify-between text-sm" :class="[tabs.length > 1 ? 'min-h-16' : 'min-h-2']">
+			<slot name="left"></slot>
+			<div class="flex items-center" v-if="tabs.length > 1">
+				<span
+					v-for="item in tabs"
+					class="cursor-pointer py-2.5 px-5 item rounded"
+					:key="item.id"
+					:class="[active === item.id ? 'active' : '']"
+					@click="active = item.id"
+					>{{ item.baseData['tableName'] }}</span
+				>
+			</div>
+		</div>
+		<div class="tabs-content" :style="{ height: height }">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup name="bcTabs">
+import { computed, ref } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import ICustomData from '/@/types/customData';
+
+interface Props {
+	tabs: ICustomData.Table[];
+}
+defineProps<Props>();
+const active = defineModel('active', { type: String });
+
+const wrapRef = ref();
+const headRef = ref();
+const { height: wrapHeight } = useElementSize(wrapRef);
+const { height: headHeight } = useElementSize(headRef);
+
+const height = computed(() => `${wrapHeight.value - headHeight.value}px`);
+</script>
+<style scoped lang="scss">
+.item {
+	background-color: #f0f0f0;
+	color: #333;
+	font-size: 14px;
+	margin-right: 14px;
+	&:last-of-type {
+		margin-right: 0;
+	}
+}
+.active {
+	background-color: #e8f4ff;
+	color: #1081ff;
+}
+</style>

package/src/components/business/bcFormTable/components/contextBody/contextBody.vue

@@ -0,0 +1,67 @@
+<template>
+	<div class="context-wrap" ref="contextRef">
+		<slot></slot>
+		<Teleport to="body">
+			<Transition @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handelAfterEnter">
+				<div v-if="isshow" class="fixed z-10 bg-[#f8f8f8] rounded shadow p-2 overflow-hidden min-w-28" :style="{ left: `${x}px`, top: `${y}px` }">
+					<ul class="list-none">
+						<li
+							v-for="(item, key) in menuList"
+							:key="key"
+							@click.stop="handleClick(item)"
+							class="text-sm hover:text-blue-800 cursor-pointer py-1 hover:bg-blue-200 text-gray-600 pl-1"
+						>
+							{{ toValue(item.label) }}
+						</li>
+					</ul>
+				</div>
+			</Transition>
+		</Teleport>
+	</div>
+</template>
+<script lang="ts" setup name="contextBody">
+import { ref, toValue } from 'vue';
+import { useContextMenu, Menu } from './useContextMenu';
+
+interface Props {
+	menu: Array<Menu>;
+	target?: string;
+	getMenu?: () => Menu[];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['select']);
+const contextRef = ref<HTMLElement>();
+const { x, y, isshow, menuList } = useContextMenu(contextRef, props);
+
+function handleClick(item: Menu) {
+	isshow.value = false;
+	if (typeof item.click === 'function') {
+		item.click();
+	} else {
+		emit('select', item);
+	}
+}
+
+function handleBeforeEnter(e: Element) {
+	const el = e as HTMLElement;
+	el.style.height = '0';
+}
+
+function handleEnter(e: Element) {
+	const el = e as HTMLElement;
+	el.style.height = 'auto';
+	const h = el.clientHeight;
+	el.style.height = '0';
+	requestAnimationFrame(() => {
+		el.style.height = h + 'px';
+		el.style.transition = 'all .5s';
+	});
+}
+
+function handelAfterEnter(e: Element) {
+	const el = e as HTMLElement;
+	el.style.transition = 'none';
+}
+</script>
+<style scoped lang="scss"></style>

package/src/components/business/bcFormTable/components/contextBody/useContextMenu.ts

@@ -0,0 +1,53 @@
+import { ref, Ref, onMounted, onUnmounted, ComputedRef } from 'vue';
+import ComponentAttr from '/@/types/components';
+import contextBody from './contextBody.vue';
+
+export interface Menu {
+	label: string | ComputedRef;
+	value: string;
+	click?: () => void;
+}
+export function useContextMenu(container: Ref<HTMLElement | undefined>, props: ComponentAttr.Props<typeof contextBody>) {
+	const x = ref(0);
+	const y = ref(0);
+	const isshow = ref(false);
+	const menuList = ref<Menu[]>(props.menu);
+
+	function openMenu(e: MouseEvent) {
+		if (props.target && !(e.target as any)?.closest(props.target)) return;
+		e.preventDefault();
+		e.stopPropagation();
+
+		if (typeof props.getMenu === 'function') {
+			menuList.value = props.getMenu();
+		} else {
+			menuList.value = props.menu;
+		}
+
+		isshow.value = true;
+		x.value = e.clientX;
+		y.value = e.clientY;
+	}
+
+	function closeMenu() {
+		isshow.value = false;
+	}
+
+	onMounted(() => {
+		container.value?.addEventListener('contextmenu', openMenu);
+		window.addEventListener('click', closeMenu, true);
+		window.addEventListener('contextmenu', closeMenu, true);
+	});
+	onUnmounted(() => {
+		container.value?.removeEventListener('contextmenu', openMenu);
+		window.removeEventListener('click', closeMenu, true);
+		window.removeEventListener('contextmenu', closeMenu, true);
+	});
+
+	return {
+		x,
+		y,
+		isshow,
+		menuList,
+	};
+}

package/src/components/business/bcFormTable/components/formSearchBtn/formSearchBtn.vue

@@ -0,0 +1,21 @@
+<template>
+	<div class="bg-white" v-if="btns.length">
+		<div class="px-4 pt-4 flex item-center">
+			<template v-for="btn in btns" :key="btn.id">
+				<slot v-if="btn.data.isSlot" :name="'btn_' + btn.data.key"></slot>
+				<bc-btn :data="btn.data" />
+			</template>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup name="formSearchBtn">
+import ICustomData from '/@/types/customData';
+
+interface Props {
+	btns: ICustomData.Btns[];
+}
+withDefaults(defineProps<Props>(), {
+	btns: () => [],
+});
+</script>
+<style scoped lang="scss"></style>

package/src/components/business/bcFormTable/methods/cellDetailMethod.ts

@@ -0,0 +1,5 @@
+import { VxeColumnSlotTypes } from 'vxe-table';
+
+export default function (detail: VxeColumnSlotTypes.DefaultSlotParams) {
+	console.debug('detail.$table.getData()', detail.$table.getData());
+}

package/src/components/business/bcFormTable/methods/filterAgeMethod.ts

@@ -0,0 +1,5 @@
+import { VxeColumnPropTypes } from 'vxe-table';
+
+export default function ({ option, row }: VxeColumnPropTypes.FilterMethodParams) {
+	return row.field1 === Number(option.data);
+}

package/src/components/business/bcFormTable/methods/footerMethod.ts

@@ -0,0 +1,25 @@
+import { VxeTablePropTypes } from 'vxe-table';
+import IFormTable from '/@/types/formTable';
+
+const sumNum = (list: IFormTable.Data[], field: string) => {
+	return list.reduce(function (total, next) {
+		total += Number(next[field]);
+		return total;
+	}, 0);
+};
+
+const footerMethod: VxeTablePropTypes.FooterMethod = ({ columns, data }) => {
+	return [
+		columns.map((column, columnIndex) => {
+			if (columnIndex === 0) {
+				return '和值';
+			}
+			if (['field1'].includes(column.field)) {
+				return `${sumNum(data, column.field)}`;
+			}
+			return '-';
+		}),
+	];
+};
+
+export default footerMethod;

package/src/components/business/bcFormTable/methods/index.ts

@@ -0,0 +1,10 @@
+import IFormTable from '/@/types/formTable';
+import filterAgeMethod from './filterAgeMethod';
+import footerMethod from './footerMethod';
+import cellDetailMethod from './cellDetailMethod';
+
+export default {
+	filterAgeMethod,
+	footerMethod,
+	cellDetailMethod,
+} as IFormTable.Data;

package/src/components/business/bcFormTable/utils/onFormKey.ts

@@ -0,0 +1,121 @@
+import { onKeyStroke, watchOnce } from '@vueuse/core';
+import { Ref, ref, computed, toValue } from 'vue';
+import { VxeTableInstance } from 'vxe-table';
+import ICustomData from '/@/types/customData';
+import ComponentAttr from '/@/types/components';
+import { getSearchForm } from '/@parseTable';
+import BcFormTable from '../bcFormTable.vue';
+import { formStore } from '/@/utils/storage';
+import { tableIndex } from './onTableKey';
+import { setSortPopup } from '../../bcForm/components/sortForm';
+import _ from 'lodash';
+
+export function onFormKey(
+	formRef: Ref<ICustomData.ANY>,
+	tablesRef: Ref<Record<string, VxeTableInstance>>,
+	activeTabs: Ref<string>,
+	props: ComponentAttr.Props<typeof BcFormTable>
+) {
+	const tableRef = computed(() => tablesRef.value[activeTabs.value]);
+	const isShowDrag = ref(false);
+	const showDrag = async () => {
+		// 保存数据为本地缓存
+		if (isShowDrag.value) {
+			await formStore.get<ICustomData.FormTable>(props.data!.config_unique_id).then(async (res) => {
+				res.form!.formConfig = JSON.parse(JSON.stringify(props.data!.form!.formConfig));
+				await formStore.set(props.data!.config_unique_id, res);
+			});
+		}
+		isShowDrag.value = !isShowDrag.value;
+	};
+
+	/** 表单查询高级设置 */
+	const onFormConfig = () => {
+		setSortPopup<ICustomData.FormTable>(props.data!.config_unique_id).then(async (res) => {
+			const { formConfig } = await getSearchForm(res);
+			props.data!.form!.formConfig = formConfig;
+		});
+	};
+	/** 重置表单设置 */
+	const onRestConfig = async () => {
+		const originData = await formStore.get<ICustomData.FormTable>(`${props.data!.config_unique_id}_origin`);
+		const current = await formStore.get<ICustomData.FormTable>(`${props.data!.config_unique_id}`);
+		current.form = originData.form;
+		formStore.set(originData.config_unique_id, current).then(async () => {
+			const { formConfig } = await getSearchForm(originData);
+			props.data!.form!.formConfig = formConfig;
+		});
+	};
+	const menuForm = [
+		{ label: '高级设置', value: '222', click: onFormConfig },
+		{ label: computed(() => (isShowDrag.value ? '完成排序' : '排序设置')), value: '111', click: showDrag },
+		{ label: '重置设置', value: '333', click: onRestConfig },
+	];
+
+	watchOnce(formRef, () => {
+		// 解决页面刷新弹跳问题
+		setTimeout(() => {
+			_.get(toValue(formRef), 'componentRef.0')?.focus();
+		}, 1000);
+	});
+
+	// 左切换
+	onKeyStroke('ArrowLeft', (e) => {
+		e.preventDefault();
+		const activeElement = document.activeElement as Element;
+		if (!activeElement.closest('.bc-form__wrapper')) return;
+
+		const components = toValue(formRef)?.getComponents();
+		let index = components.findIndex((item: ICustomData.ANY) => {
+			if (item?.activeElement) {
+				item = item.activeElement();
+			}
+			return item == activeElement;
+		});
+		let activeIndex = index < 0 ? -1 : index;
+		activeIndex--;
+		activeIndex < 0 && (activeIndex = components.length - 1);
+		_.get(components, activeIndex)?.focus();
+	});
+
+	// 右切换
+	onKeyStroke('ArrowRight', (e) => {
+		e.preventDefault();
+		const activeElement = document.activeElement as Element;
+		if (!activeElement.closest('.bc-form__wrapper')) return;
+
+		const components = toValue(formRef)?.getComponents();
+		const lastIndex = components.length - 1;
+		let index = components.findIndex((item: any) => {
+			if (item?.activeElement) {
+				item = item.activeElement();
+			}
+			return item == activeElement;
+		});
+		let activeIndex = index < 0 ? -1 : index;
+		activeIndex++;
+		activeIndex > lastIndex && (activeIndex = 0);
+		_.get(components, activeIndex)?.focus();
+	});
+
+	// 键盘下移动
+	onKeyStroke('ArrowDown', (e) => {
+		e.preventDefault();
+		const activeElement = document.activeElement as Element;
+		if (!activeElement.closest('.bc-form__wrapper')) return;
+
+		tableIndex.rowIndex = 0;
+		const row = tableRef.value?.getData(tableIndex.rowIndex);
+		// 获取可视列数据
+		const { visibleColumn } = tableRef.value!.getTableColumn();
+		tableIndex.columnIndex = visibleColumn.filter((i) => i.type).length;
+		const columnField = visibleColumn[tableIndex.columnIndex].field;
+		tableRef.value?.setCurrentRow(row); // 设置当前行
+		tableRef.value?.setEditRow(row, columnField);
+	});
+
+	return {
+		isShowDrag,
+		menuForm,
+	};
+}