hs-admin-ui 1.0.0 → 1.0.3

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

@@ -1,196 +0,0 @@
-<!-- 
-  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

@@ -1,91 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-<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

@@ -1,67 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-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

@@ -1,21 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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,
-	};
-}