hs-admin-ui 1.0.0

package/src/components/business/bcPageConfig/usePageConfig.ts

@@ -0,0 +1,469 @@
+import _ from 'lodash';
+import { Ref, ref } from 'vue';
+import { ElMessageBox, ElMessage, TabPaneName } from 'element-plus';
+import ICustomData from '/@/types/customData';
+import IFormTable from '/@/types/formTable';
+import { useFieldConfigController } from '/@/api/fieldConfigController/index';
+import { find } from 'lodash';
+const fieldConfig = useFieldConfigController();
+interface saveForm {
+	initOriginConfig: (list: Array<IFormTable.FormTable>, index: number) => {};
+}
+export function useHsPageConfig(
+	panelConfig: Ref<IFormTable.FormTable>,
+	configs: Ref<Array<IFormTable.FormTable>>,
+	saveFormRef: Ref<saveForm>,
+	emits: (event: 'refresh', ...args: ICustomData.Data[]) => void
+) {
+	/**
+	 * 添加表格配置
+	 */
+	const addTabPanel = () => {
+		panelConfig.value.tables.push({
+			id: 'table_' + new Date().getTime().toString(),
+			baseData: { id: '' },
+			tableConfig: [],
+		});
+	};
+	/**
+	 * 移除tabs项
+	 * @param targetName
+	 * @returns
+	 */
+	const removeTabPanel = (targetName: TabPaneName | undefined) => {
+		// 查询当前表格配置对象
+		let table = find(panelConfig.value.tables, (item: IFormTable.Table) => item['id'] == targetName);
+
+		// 删除表格配置提示
+		ElMessageBox.confirm(`确定删除${table?.baseData['tableName'] || '表格配置'}吗？`, '提示', {
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning',
+		})
+			.then(() => {
+				// 移除配置
+				_.remove(panelConfig.value.tables, (item: IFormTable.Table) => targetName && item.id == targetName);
+				// 给出操作成功提示
+				ElMessage.success('删除成功');
+			})
+			.catch((err) => {
+				console.log('err', err);
+			});
+	};
+	/**
+	 * 编辑tabs
+	 * @param targetName
+	 * @param action
+	 */
+	const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' | 'add') => {
+		switch (action) {
+			case 'remove':
+				// 删除配置
+				removeTabPanel(targetName);
+				break;
+			case 'add':
+				// 新增配置
+				addTabPanel();
+				break;
+		}
+	};
+	let config = ref();
+	/**
+	 * 过滤出无效配置
+	 * @param originConfig
+	 * @returns
+	 */
+	const filterInvalidConfig = (originConfig: IFormTable.FormTable) => {
+		if (originConfig.form) {
+			// 如果表单项没有配置字段参数，则将该表单项删除
+			if (originConfig.form.formConfig.length > 0) {
+				originConfig.form.formConfig = _.filter(
+					originConfig.form.formConfig,
+					(item: IFormTable.ConfigItemType) => item.data.baseData.prop && item.data.baseData.isApply
+				);
+			}
+			// 如果表单中没有表单项，则将表单配置删除
+			if (originConfig.form.formConfig.length <= 0) {
+				delete originConfig.form;
+			}
+		}
+		// 过滤掉表格配置项字段名为空的值
+		originConfig.tables.map((table: IFormTable.Table) => {
+			table.tableConfig = _.filter(table.tableConfig, (item: IFormTable.TableItem) => {
+				if ((item.data.field || item.data.type) && item.data.isApply) {
+					// =============== 如果存在列类型，则清空【列字段名】和【返回值类型】 【start】 =================
+					if (item.data.type) {
+						item.data.field = ''; // 清空列字段名
+						item.data.returnValueType = ''; // 清空返回值类型
+					}
+					// =============== 如果存在列类型，则清空【列字段名】和【返回值类型】 【end】 =================
+					// =============== 筛选条件：filters 和filterConfig顺序不可调整【start】==============
+					// 过滤生效的筛选条件配置及数据
+					// item.filterConfig = _.filter(
+					// 	item.filterConfig,
+					// 	(filterItem: ICustomData.Data, index: number) => item.data.filters && item.data.filters[index]['value']
+					// );
+					// 过滤有value值的筛选条件数据
+					item.data.filters = _.filter(item.data.filters, (filterData: ICustomData.Data) => filterData.value);
+					// =============== 筛选条件：filters 和filterConfig顺序不可调整【end】==============
+					// ===================== TODO: btnData和btnConfig处理顺序不可修改【start】=================
+					// 过滤有按钮key的配置【btnConfig】
+					// item.btnConfig = _.filter(item.btnConfig, (btnItem: IFormTable.BtnItem, index: number) => item.btnData[index].key);
+					// 过滤没有按钮key的数据【btnData】
+					item.btnData = _.filter(item.btnData, (btnItem: IFormTable.BtnItem, index: number) => item.btnData[index].key);
+					// ===================== TODO: btnData和btnConfig处理顺序不可修改【end】=================
+					return true;
+				}
+			});
+			return table;
+		});
+		// 过滤掉没有表格配置项的表格
+		originConfig.tables = _.filter(originConfig.tables, (item: IFormTable.Table) => {
+			return item.tableConfig.length > 0;
+		});
+
+		// 过滤掉按钮配置项按钮key值为空的值
+		originConfig.btns = _.filter(originConfig.btns, (item: IFormTable.BtnItem) => item.data.key && item.data.isApply);
+		return originConfig;
+	};
+	/**
+	 * 过滤对象中的空值【递归方法】
+	 * @param data
+	 */
+	const filterEmptyData = (data: ICustomData.Data = {}) => {
+		Object.keys(data).forEach((key) => {
+			// 过滤空值
+			if (
+				data[key] == '' ||
+				data[key] == null ||
+				data[key] == undefined ||
+				(data[key] instanceof Array && data[key].length <= 0) ||
+				(data[key] instanceof Object && _.isEmpty(data[key]))
+			) {
+				// 删除值为空的属性
+				delete data[key];
+			} else if (data[key] instanceof Object) {
+				// 如果值是对象则用递归过滤空值
+				filterEmptyData(data[key]);
+			} else if (data[key] instanceof Array) {
+				// 如果是数据则遍历数组并将数组对象调用递归
+				data[key].map((item: ICustomData.Data) => {
+					return filterEmptyData(item);
+				});
+			}
+		});
+		return data;
+	};
+	/**
+	 * 过滤配置保留配置数据【给业务配置解析使用数据】
+	 * @param originConfig
+	 */
+	const filterConfigReserveData = (originConfig: IFormTable.FormTable) => {
+		// 整理按钮配置数据
+		originConfig.btns = _.map(originConfig.btns, (item: IFormTable.BtnItem) => {
+			// 返回{id, data}
+			return {
+				id: item.id,
+				data: filterEmptyData(item.data),
+			};
+		});
+		if (originConfig.form) {
+			// 整理过滤空值表单配置数据
+			originConfig.form.baseData = _.assign({}, filterEmptyData(originConfig.form.baseData));
+			// 整理过滤出表单项配置
+			originConfig.form.formConfig = _.map(originConfig.form.formConfig, (item: IFormTable.ConfigItemType) => {
+				return {
+					data: filterEmptyData(item.data),
+					id: item.id,
+				};
+			});
+			// 删除表单配置
+			delete originConfig.form.baseConfig;
+		}
+		// 整理表格配置数据
+		originConfig.tables = _.map(originConfig.tables, (table: IFormTable.Table) => {
+			let tableConfig = table.tableConfig.map((item: IFormTable.TableItem) => {
+				// 表格配置数据删除无用值字段
+				let list = item.btnData.map((btnItem: ICustomData.BtnData) => filterEmptyData(btnItem));
+				return {
+					id: item.id,
+					data: filterEmptyData(item.data), // 过滤空值
+					btnData: list,
+				};
+			});
+			// 过滤空值
+			let baseData = filterEmptyData(table.baseData);
+			// 合并过滤空值后的数据
+			table = _.assign(table, { tableConfig, baseData });
+			// 删除表格配置
+			delete table.baseConfig;
+			return table;
+		});
+		return originConfig;
+	};
+
+	/**
+	 * 格式化数据池数据
+	 * @param originConfig
+	 */
+	const formatDataPool = (originConfig: IFormTable.FormTable) => {
+		// 数据池数据类型
+		interface PoolData {
+			field_code: string;
+			field_name: string;
+			field_type: string; // 数据池中字段类型【1:按钮   2:表单   3:表格】
+			json_data: ICustomData.Data;
+		}
+		// 定义数据池数据
+		let pool_data: PoolData[] = [];
+		// 遍历按钮向数据池中追加数据
+		originConfig.btns.forEach((item: IFormTable.BtnItem) => {
+			pool_data.push({
+				field_code: item.data.key,
+				field_name: item.data.name,
+				field_type: '1', // 数据池中字段类型【1:按钮   2:表单   3:表格】
+				json_data: item,
+			});
+		});
+		// 遍历表格向数据池中追加数据
+		originConfig.tables.forEach((table: IFormTable.Table) => {
+			table.tableConfig.forEach((item: IFormTable.TableItem) => {
+				pool_data.push({
+					field_code: item.data.field || '',
+					field_name: item.data.title || '',
+					field_type: '3', // 数据池中字段类型【1:按钮   2:表单   3:表格】
+					json_data: item,
+				});
+			});
+		});
+		if (originConfig.form) {
+			// 遍历表单向数据池中追加数据
+			originConfig.form.formConfig.forEach((item: IFormTable.ConfigItemType) => {
+				pool_data.push({
+					field_code: item.data.baseData.prop,
+					field_name: item.data.baseData.label,
+					field_type: '2', // 数据池中字段类型【1:按钮   2:表单   3:表格】
+					json_data: item,
+				});
+			});
+		}
+		return pool_data;
+	};
+	/**
+	 * 整理发送接口的权限数据
+	 */
+	const formatAPIAuthData = () => {
+		// 配置数据
+		let configList = _.cloneDeep(configs.value);
+		// 给出默认空数据
+		let listData: Array<ICustomData.Data> = [];
+		// 遍历配置向默认数据listData追加数据
+		configList.forEach((config: IFormTable.FormTable) => {
+			let obj = filterConfigReserveData(config);
+			listData.push(obj);
+		});
+		// 返回数据
+		return listData;
+	};
+	/**
+	 * 过滤数据权限配置
+	 * @param originConfig
+	 */
+	const getDataAuthConfig = () => {
+		interface AuthData {
+			/** 按钮权限数据 */
+			btns: ICustomData.Data;
+			/** form权限数据 */
+			form: ICustomData.Data;
+			/** 表格权限数据 */
+			tables: ICustomData.Data;
+		}
+		// 定义一个空页面权限数据
+		let pageAuthData: AuthData[] = [];
+		// 获取页面中的所有配置
+		let configList = _.cloneDeep(configs.value);
+		// 【configlist】正常是过滤冗余字段
+		configList.forEach((config: IFormTable.FormTable) => {
+			let authData = {
+				code: config.config_unique_id,
+				name: config.config_name,
+				btns: {},
+				form: {},
+				tables: {},
+			};
+			// 将表单、表格、按钮配置转为map数据
+			authData.btns = _.keyBy(
+				(config.btns || []).map((item: IFormTable.BtnItem) => {
+					return {
+						code: item.data.key, // 字段值
+						name: item.data.name, // 字段名
+						is_export: true, // 是否导出
+						show: true, // 是否显示
+					};
+				}),
+				'code'
+			);
+			if (config.form) {
+				let form = config.form.formConfig.map((item: IFormTable.ConfigItemType) => {
+					return {
+						code: item.data.baseData.prop, // 字段值
+						name: item.data.baseData.label, // 字段名
+						is_export: true, // 是否导出
+						show: true, // 是否显示
+					};
+				});
+				authData.form = _.keyBy(form, 'code');
+			}
+			(config.tables || []).forEach((table: IFormTable.Table) => {
+				let tableObject = _.keyBy(
+					table.tableConfig.map((item: IFormTable.TableItem) => {
+						return {
+							name: item.data.title,
+							code: item.data.field,
+							is_export: true, // 是否导出
+							show: true, // 是否显示
+						};
+					}),
+					'code'
+				);
+				authData.tables = _.assign(authData.tables, {
+					[table.id]: tableObject,
+				});
+			});
+			pageAuthData.push(authData);
+		});
+		// 将数组转为对象
+		let data: ICustomData.Data = {};
+		// 将数据转为map数据
+		data = _.keyBy(pageAuthData, 'code');
+		return data;
+	};
+	// 当前tab项
+	let tabsActiveName = ref('btn');
+	/**
+	 * 切换表单表格配置
+	 * @param config
+	 */
+	const changeConfig = (config: IFormTable.FormTable) => {
+		// 更新配置
+		panelConfig.value = config;
+		// 切换tab至按钮配置
+		tabsActiveName.value = 'btn';
+	};
+
+	const initConfigData = (index: number) => {
+		// 切换页面，将当前切为默认按钮配置
+		tabsActiveName.value = 'btn';
+		// 调用保存组件的初始化数据的方法
+		// console.log('configs.value', configs.value);
+
+		if (saveFormRef.value) {
+			saveFormRef.value.initOriginConfig(configs.value, index);
+		}
+	};
+
+	let systemData = ref(); // 系统数据
+	let menuData = ref(); // 菜单数据
+
+	/**
+	 * 初始化数据
+	 * @param configs
+	 */
+	const initData = (
+		configList: Array<IFormTable.FormTable>,
+		menu: Record<string, IFormTable.Data | string>,
+		system: Record<string, IFormTable.Data | string>
+	) => {
+		// 更新页面配置数据
+		configs.value = configList;
+		systemData.value = system; // 系统信息
+		menuData.value = menu; // 页面信息
+
+		initConfigData(0);
+	};
+	/**
+	 * 保存表单表格配置
+	 */
+	const saveFormTableConfig = async (form: { config_name: string; config_unique_id: string }) => {
+		// ===================== 过滤掉无效配置 start =======================
+		// 清除表单、表格、按钮中 无用的项
+		let originConfig = await filterInvalidConfig(_.cloneDeep(panelConfig.value));
+		originConfig = _.assign(originConfig, form);
+		// 当前配置项在配置数组中所在的下标
+		let ids = configs.value.map((item) => item.config_unique_id);
+		let idx = ids.indexOf(originConfig.config_unique_id);
+		// 判断是修改配置还是新增配置
+		if (idx > -1) {
+			// 替换配置数据
+			configs.value.splice(idx, 1, originConfig);
+		} else {
+			// 新增配置
+			configs.value.push(originConfig);
+		}
+		// ===================== 过滤掉无效配置 end =======================
+		// ===================== 新增数据池数据 start =======================
+		let data_pool = await formatDataPool(originConfig);
+		// ===================== 新增数据池数据 end =======================
+		// ===================== 过滤掉配置项保留配置数据 start =======================
+		// 清除表单、表格、按钮中 无用的项
+		let baseConfig = await filterConfigReserveData(_.cloneDeep(originConfig));
+		// ===================== 过滤掉配置项保留配置数据 end =======================
+		// ===================== 过滤出权限所需配置 start =======================
+		// 将页面中的全部配置 整合 为一个权限配置数据
+		formatAPIAuthData();
+		let authConfig = await getDataAuthConfig();
+		// ===================== 过滤出权限所需配置 end =======================
+
+		console.log(
+			'originConfig系统配置',
+			originConfig,
+			JSON.stringify(originConfig),
+			'baseConfig==业务配置',
+			baseConfig,
+			'authConfig权限配置数组',
+			authConfig,
+			'data_pool 数据池数据',
+			data_pool
+		);
+		let obj = {
+			business_json: JSON.stringify(originConfig), //	表格字段业务json数据
+			config_name: originConfig.config_name, //	配置名称
+			config_type: '1', //	配置类型 默认1
+			config_unique_id: originConfig.config_unique_id, //	配置标识
+			field_json: JSON.stringify(baseConfig), //	表格字段json数据
+			menu_id: menuData.value.id || '', //	菜单id
+			page_name: menuData.value.meta.title, //	页面名称
+			field_pool_json: JSON.stringify(data_pool), //字段池json数据
+			id: originConfig.id || '', //	id
+			project_code: systemData.value.project_code, // 所属系统
+			update_time: originConfig.update_time || '',
+		};
+		console.log('obj', obj);
+		// fieldConfig
+		// 	.postAddField(obj)
+		// 	.then((res) => {
+		// 		console.log('res---保存配置', res);
+		// 		ElMessage.success('保存配置成功, 可在控制台打印中查看配置数据');
+
+		// 		config.value = originConfig;
+		// 		// 初始化页面
+		// 		// let len = idx > -1 ? idx : configs.value.length - 1;
+		// 		// initConfigData(len);
+
+		// 		// 更新页面数据
+		// 		emits('refresh');
+		// 	})
+		// 	.catch((err) => {
+		// 		console.log('er', err);
+		// 	});
+	};
+
+	return {
+		handleTabsEdit,
+		saveFormTableConfig,
+		changeConfig,
+		initData,
+		tabsActiveName,
+		config,
+	};
+}

package/src/components/business/bcSelect/bcSelect.vue

@@ -0,0 +1,50 @@
+<template>
+	<hs-select ref="selectRef" v-bind="$attrs">
+		<template v-if="groupAttrs.isGroupEnabled">
+			<hs-option-group v-for="group in optionsList" :key="group.label" :label="group.label">
+				<hs-option v-for="option in group.options" :key="option.value" :value="option[optionAttrs.value]" :label="option[optionAttrs.label]" />
+			</hs-option-group>
+		</template>
+		<template v-else>
+			<hs-option
+				v-for="option in optionsList"
+				:disabled="optionAttrs.disabled"
+				:key="option.value"
+				:value="option[optionAttrs.value]"
+				:label="option[optionAttrs.label]"
+			></hs-option>
+		</template>
+	</hs-select>
+</template>
+<script lang="ts" setup name="BcSelect">
+import { computed, ref } from 'vue';
+import ICustomData from '/@/types/customData';
+import { Selelct } from '/@/types/formItem/selelct';
+
+interface Props {
+	options: ICustomData.Data[];
+	groupAttrs: Selelct['groupAttrs'];
+	optionAttrs: Selelct['optionAttrs'];
+}
+
+const props = defineProps<Props>();
+const selectRef = ref();
+const optionsList = computed(() => {
+	if (props.options) {
+		return props.options as unknown as ICustomData.Data[];
+	}
+	return [];
+});
+function focus() {
+	selectRef.value.selectRef.focus();
+}
+function blur() {
+	selectRef.value.selectRef.blur();
+}
+function activeElement() {
+	return selectRef.value.selectRef.inputRef;
+}
+
+defineExpose({ focus, blur, activeElement });
+</script>
+<style scoped lang="scss"></style>

package/src/components/business/bcSwitchSystems/bcSwitchSystems.vue

@@ -0,0 +1,36 @@
+<template>
+	<div class="flex">
+		<div v-if="props.showLabel" class="basis-1/4 flex flex-col justify-center">{{ props.labelText }}</div>
+		<hs-select class="flex-1" v-model="curSys" @change="onChange">
+			<hs-option v-for="item in systems" :key="item.value" :label="item.label" :value="item.value" />
+		</hs-select>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useHsSwitchSystems } from './useSwitchSystems';
+const props = defineProps({
+	// 是否显示label
+	showLabel: {
+		type: Boolean,
+		default: false,
+	},
+	// 自定义label文本内容
+	labelText: {
+		type: String,
+		default: '当前系统：',
+	},
+});
+const emits = defineEmits(['change']);
+// 结构hook中的方法数据
+const { onChange, initData, curSys, systems } = useHsSwitchSystems(emits);
+/**
+ * 生命周期函数
+ */
+onMounted(() => {
+	initData();
+});
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/business/bcSwitchSystems/useSwitchSystems.ts

@@ -0,0 +1,74 @@
+import { ref, Ref } from 'vue';
+import _ from 'lodash';
+import IFormTable from '/@/types/formTable';
+// import ComponentAttr from '/@/types/components';
+import { Session } from '/@/utils/storage';
+import { useSystemController } from '/@/api/systemController';
+const system = useSystemController();
+import { GetAllSystemInfo } from '/@/api/systemController/type';
+export function useHsSwitchSystems(emits: (event: 'change', ...args: IFormTable.Data[]) => void) {
+	// 类型
+	type Option = Record<'value' | 'label', string>;
+
+	// 当前系统绑定值
+	let curSys = ref('');
+	// 下拉选择数据
+	let systems = ref<GetAllSystemInfo.data>();
+	/**
+	 * 切换选择系统回调
+	 */
+	const onChange = (value: string) => {
+		// 获取操作对象
+		let item = systems.value.find((item: Option) => item.value == value);
+		// 对象赋值
+		curSys.value = _.cloneDeep(item?.value || '');
+		// 将对象存到缓存中【当前系统】
+		Session.set('CURRENT_SYSTEM', item);
+		emits('change', item);
+	};
+	/**
+	 * 获取所有系统信息列表
+	 */
+	const getSystemData = () => {
+		system
+			.getAllSystemInfo<GetAllSystemInfo>()
+			.then((res) => {
+				if (res.code == 1) {
+					// 将返回的所有系统数据
+					systems.value = (res.data || []).map((item) => {
+						let obj = {
+							...item,
+							label: item.project_name || '',
+							value: item.project_code || '',
+						};
+						return obj;
+					});
+					// 如果缓存中存在系统项则用缓存中的数据，如果缓存中没有则取接口返回的第一条数据 否则为空
+					let systemData: Option | undefined = Session.get('CURRENT_SYSTEM') || systems.value[0];
+					// 调用回调change事件，则更新第一个系统的菜单
+					onChange((systemData && systemData.value) || '');
+				}
+			})
+			.catch((err) => {
+				console.log('err', err);
+			});
+	};
+	/**
+	 * 从缓存中获取数据，初始化数据方法
+	 */
+	const initData = () => {
+		// 从缓存中取系统数据
+		let systemData: Option | undefined = Session.get('CURRENT_SYSTEM');
+
+		// 赋值
+		curSys.value = systemData?.value || '';
+		// 获取所有配置
+		getSystemData();
+	};
+	return {
+		onChange,
+		initData,
+		curSys,
+		systems,
+	};
+}

package/src/components/business/bcTable/bcTable.vue

@@ -0,0 +1,63 @@
+<template>
+	<div ref="wrapRef" class="bc-table__wrapper bg-white">
+		<div class="bc-table__content" :style="style">
+			<vxe-table ref="tableRef" v-bind="baseData" @cell-click="handleCellClick" @header-cell-click="headerCellClick" :data="tableData">
+				<vxe-column v-for="item in tableConfig" :key="item.id" v-bind="item.data">
+					<!-- 自定义插槽 -->
+					<template v-for="(value, name) in $slots" #[name]="scopeData" :key="name">
+						<slot :name="name" v-bind="scopeData || {}"></slot>
+					</template>
+
+					<!-- 列单元格插槽渲染 -->
+					<template v-if="item.data.isSlot" #default="scopeData">
+						<slot :name="item.data.field" v-bind="scopeData || {}"></slot>
+					</template>
+
+					<!-- 按钮渲染 -->
+					<template v-else-if="item.btnData && item.btnData.length" #default="scopeData">
+						<template v-for="btn in item.btnData" :key="btn.key">
+							<slot v-if="btn.isSlot" :name="`hs_btn_${item.data.field}`" v-bind="scopeData || {}"></slot>
+							<bc-btn :data="btn" @click="btn.fnName(scopeData)" v-else />
+						</template>
+					</template>
+				</vxe-column>
+			</vxe-table>
+		</div>
+		<!-- 分页设置 -->
+		<div ref="pagerRef">
+			<vxe-pager v-if="baseData.is_apply_page" v-bind="baseData.table_page_data" @page-change="pageChange">
+				<template v-for="(value, name) in $slots" #[name]="scopeData" :key="name">
+					<slot :name="'hs_pager_' + name" v-bind="scopeData || {}"></slot>
+				</template>
+			</vxe-pager>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup name="bcTable">
+import { onMounted } from 'vue';
+import ICustomData from '/@/types/customData';
+import { useTable } from './useTable';
+import { useTableHeight } from './useTableHeight';
+
+interface Props {
+	uniqueId: string;
+	id: string;
+	baseData: ICustomData.TableBaseData;
+	tableData: ICustomData.Data[];
+	tableConfig: ICustomData.TableItem[];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['ready', 'cell-click', 'header-cell-click', 'page-change']);
+const { wrapRef, pagerRef, tableRef, style } = useTableHeight();
+const { handleCellClick, headerCellClick, pageChange } = useTable(props, tableRef, emit);
+
+onMounted(() => {
+	emit('ready', tableRef.value);
+});
+</script>
+<style scoped lang="scss">
+:deep(.col--seq) {
+	cursor: pointer;
+}
+</style>