hs-admin-ui 1.0.0

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

@@ -0,0 +1,119 @@
+import { onKeyStroke } from '@vueuse/core';
+import ComponentAttr from '/@/types/components';
+import ICustomData from '/@/types/customData';
+import { fetchTableData } from '/@parseTable';
+import BcFormTable from '../bcFormTable.vue';
+import { VxeTableInstance, VxePagerDefines } from 'vxe-table';
+import { Ref, reactive, computed, toValue } from 'vue';
+import _ from 'lodash';
+
+export const tableIndex = reactive({
+	rowIndex: 0,
+	columnIndex: 0,
+});
+export function onTableKey(
+	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 cursor = ['checkbox', 'expand', 'radio', 'seq'];
+	const menuTable = [
+		{ label: '右键1', value: '111' },
+		{ label: '右键2', value: '222' },
+		{ label: '右键3', value: '333' },
+		{ label: '右键4', value: '444' },
+		{ label: '右键5', value: '555' },
+	];
+
+	function setFocus() {
+		const row = tableRef.value?.getData(tableIndex.rowIndex);
+		// 获取可视列数据
+		const { visibleColumn } = tableRef.value!.getTableColumn();
+		const columnField = visibleColumn[tableIndex.columnIndex].field;
+		tableRef.value?.setCurrentRow(row); // 设置当前行
+		tableRef.value?.setEditRow(row, columnField).then(() => {
+			const { rowIndex, columnIndex } = tableRef.value!.getEditRecord()!;
+			tableIndex.rowIndex = rowIndex ?? 0;
+			tableIndex.columnIndex = columnIndex ?? 0;
+		});
+	}
+
+	// 分页加载
+	async function onPageChange(params: VxePagerDefines.PageChangeEventParams) {
+		const table = props.data!.tables.find((i) => i.id === activeTabs.value)!;
+		const pager = table.baseData.table_page_data;
+		pager!.currentPage = params.currentPage;
+		table.tableData = await fetchTableData(pager!, props.data!.form!.formData);
+	}
+
+	// 键盘右移动
+	onKeyStroke('ArrowRight', (e) => {
+		e.preventDefault();
+		const activeElement = document.activeElement as Element;
+		if (!activeElement.closest('.bc-table__content')) return;
+		const { visibleColumn } = tableRef.value!.getTableColumn();
+		tableIndex.columnIndex++;
+		if (tableIndex.columnIndex > visibleColumn.length - 1) {
+			tableIndex.columnIndex = 0;
+		}
+		if (cursor.includes(visibleColumn[tableIndex.columnIndex]?.type as string)) {
+			const num = visibleColumn.filter((i) => i.type).length;
+			tableIndex.columnIndex = tableIndex.columnIndex + num;
+		}
+		setFocus();
+	});
+
+	// 键盘左移动
+	onKeyStroke('ArrowLeft', (e) => {
+		e.preventDefault();
+		const activeElement = document.activeElement as Element;
+		if (!activeElement.closest('.bc-table__content')) return;
+		const { visibleColumn } = tableRef.value!.getTableColumn();
+		tableIndex.columnIndex--;
+		if (cursor.includes(visibleColumn[tableIndex.columnIndex]?.type as string)) {
+			const num = visibleColumn.filter((i) => i.type).length;
+			tableIndex.columnIndex = tableIndex.columnIndex - num;
+		}
+		if (tableIndex.columnIndex < 0) {
+			tableIndex.columnIndex = visibleColumn.length - 1;
+		}
+		setFocus();
+	});
+
+	// 键盘上移动
+	onKeyStroke('ArrowUp', (e) => {
+		e.preventDefault();
+		const activeElement = document.activeElement as Element;
+		if (!activeElement.closest('.bc-table__content')) return;
+		const tableData = tableRef.value!.getData();
+		tableIndex.rowIndex--;
+		if (tableIndex.rowIndex < 0) {
+			// 1. 表格循环上下切换
+			tableIndex.rowIndex = tableData.length - 1;
+			// 2. 切换表单查询
+			// tableIndex.rowIndex = 0
+			// _.get(toValue(formRef), 'componentRef.0')?.focus();
+		}
+		setFocus();
+	});
+
+	// 键盘下移动
+	onKeyStroke('ArrowDown', (e) => {
+		e.preventDefault();
+		const activeElement = document.activeElement as Element;
+		if (!activeElement.closest('.bc-table__content')) return;
+		const tableData = tableRef.value!.getData();
+		tableIndex.rowIndex++;
+		if (tableIndex.rowIndex > tableData.length - 1) {
+			tableIndex.rowIndex = 0;
+		}
+		setFocus();
+	});
+
+	return {
+		menuTable,
+		onPageChange,
+	};
+}

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

@@ -0,0 +1,201 @@
+import _ from 'lodash';
+import { Ref, ComputedRef } from 'vue';
+import { VxeTableInstance, VxePagerProps } from 'vxe-table';
+import { Component } from '/@/components/component';
+import IFormTable from '/@/types/formTable';
+import IFormData from '/@/types/form';
+import ICustomData from '/@/types/customData';
+import { formStore } from '/@/utils/storage';
+import { getFormDataType } from '/@/utils/getDataType';
+import { getTableDataType } from '/@/utils/getDataType';
+import CustomeMethods from '../methods';
+
+/** 对外导出表格参数实例 */
+export interface TableParams {
+	tableApi: Ref<Record<string, VxeTableInstance>>;
+	activeTabs: Ref<string>;
+	api: ComputedRef<VxeTableInstance>;
+}
+
+/** 递归遍历属性，设置更新值 */
+export function setPropertyData<T extends IFormTable.Data>(params: T) {
+	const method = /method=/;
+	const string = /string=/;
+
+	function setProperty(property: T) {
+		for (let i in property) {
+			// 1.解析自定义方法
+			if (method.test(property[`${i}_2`])) {
+				property[i] = CustomeMethods[property[`${i}_2`].split('=')[1]];
+			} else if (method.test(property[i]) && property[i].split('=')[1]) {
+				(property as ICustomData.ANY)[`${i}_2`] = property[i];
+				property[i] = CustomeMethods[property[i].split('=')[1]];
+			}
+			// 2.解析自定义数据
+			if (string.test(property[i])) {
+				if (property[i].split('=')[1]) {
+					property[i] = new Function('return ' + property[i].split('=')[1])();
+				} else {
+					(property as ICustomData.ANY)[i] = [];
+				}
+			}
+			if (_.isObject(property[i]) && !_.isEmpty(property[i])) {
+				setProperty(property[i]);
+			}
+		}
+	}
+	setProperty(params);
+
+	return params;
+}
+
+/** 根据权限获取是否显示 */
+function getAuth(config: ICustomData.FormItemConfigData['baseData']) {
+	if (!config.isShow) return false;
+	return true;
+}
+
+export function getRender(el: Component) {
+	// 解析下拉框
+	if (el === 'hs-select') return 'bc-select';
+	// 解析下拉树组件
+	if (el === 'hs-tree-select') return 'bc-tree-select';
+	return el;
+}
+
+/** 格式化搜索区域表单数据 */
+export async function getSearchForm<T = ICustomData.Form>(data: ICustomData.FormTable): Promise<T> {
+	if (!data.form) return Promise.resolve({} as T);
+	// 获取缓存类配置项信息
+	const { form } = await formStore.get<ICustomData.FormTable>(data.config_unique_id);
+	const formConfig = form?.formConfig.filter((i) => {
+		const isShow = getAuth(i.data.baseData);
+		if (isShow) {
+			// 解构属性数据
+			const elData = setPropertyData(i.data.elData);
+			i.data.elData = {
+				...elData.attrs,
+				..._.omit(elData, 'attrs'),
+			};
+
+			i.data.baseData.el = getRender(i.data.baseData.el);
+		}
+
+		return isShow;
+	});
+
+	const baseData = _.omit(setPropertyData(data.form.baseData), ['inline', 'gutter', 'justify', 'align']);
+
+	return {
+		baseData,
+		formConfig,
+		formData: data.form.formData,
+	} as T;
+}
+
+export function getTableDatas<T = ICustomData.Table[]>(params: ICustomData.FormTable) {
+	const tables = params.tables.map((i) => getTableCache(i, params));
+	return Promise.all(tables) as Promise<T>;
+}
+
+/** 获取表格缓存本地列配置信息 */
+async function getTableCache(data: ICustomData.Table, config: ICustomData.FormTable) {
+	const result = await formStore.get<ICustomData.FormTable>(config.config_unique_id);
+	const cache = result?.tables?.find((i) => i.id === data.id);
+	if (!cache) {
+		return [];
+	}
+
+	const table = await getTableData(cache, config.form!.formData);
+	return table;
+}
+
+/** 格式化表数据 */
+export async function getTableData(data: ICustomData.Table, formData: ICustomData.Form['formData']) {
+	const params = _.cloneDeep(data) as ICustomData.Table;
+	params.baseData = setPropertyData(_.omit(params.baseData, 'data'));
+	params.tableConfig = params.tableConfig.filter((i) => {
+		const isShow = getAuth(i.data as ICustomData.ANY);
+
+		if (isShow) {
+			i.data = setPropertyData(i.data);
+			i.btnData = i.btnData?.map((i) => setPropertyData(i)) || [];
+		}
+
+		return isShow;
+	});
+	const tableData = await fetchTableData(params.baseData.table_page_data!, formData);
+
+	return {
+		id: params.id,
+		baseData: params.baseData,
+		tableConfig: params.tableConfig,
+		tableData,
+	};
+}
+
+/** 调用接口获取表格数据 */
+export async function fetchTableData(pager: VxePagerProps, formData: ICustomData.Form['formData']) {
+	pager.pagerCount = 2;
+	pager.total = 18;
+	const item = (i: number) => {
+		return {
+			order_no: i,
+			order_type: i,
+			pay_state: i,
+			commodity_no: i,
+			common_name: i,
+			btns: i,
+		};
+	};
+	if (pager.currentPage === 2) {
+		return Array.from({ length: 8 }, (_, i) => item(i));
+	}
+	return Array.from({ length: 10 }, (_, i) => item(i));
+}
+
+/** 接口数据
+ * 1. 获取配置项目
+ * 2. 加载权限数据
+ * 3. 整合配置数据信息
+ * 4. 根据配置项获取数据
+ */
+export async function getLoadData(data: ICustomData.FormTable) {
+	const config = _.cloneDeep(data) as ICustomData.FormTable;
+	// 1.更新原始缓存
+	await formStore.set(`${config.config_unique_id}_origin`, config);
+	// 2.获取当前缓存
+	const cache = await formStore.get<ICustomData.FormTable>(config.config_unique_id);
+	if (!cache) {
+		await formStore.set(config.config_unique_id, config);
+	}
+	const form = await getSearchForm(config);
+	const tables = await getTableDatas(config);
+
+	if (__IS_DEV__) {
+		getTableDataType(tables);
+	}
+
+	return {
+		...config,
+		form,
+		tables,
+	} as ICustomData.FormTable;
+}
+
+export function getFormData(data: IFormData.Form) {
+	const result = _.cloneDeep(data) as IFormData.Form;
+	const form = result.form.map((i) => {
+		i.config = setPropertyData(i.config);
+		return i;
+	});
+
+	if (__IS_DEV__) {
+		console.debug(getFormDataType(result));
+	}
+
+	return {
+		...result,
+		form,
+	};
+}

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

@@ -0,0 +1,20 @@
+import ICustomData from '/@/types/customData';
+import ComponentAttr from '/@/types/components';
+import { Ref, ComputedRef, computed } from 'vue';
+import { VxeTableInstance } from 'vxe-table';
+import BcFormTable from '../bcFormTable.vue';
+
+export function useButon(
+	formRef: Ref<ICustomData.ANY>,
+	tablesRef: Ref<Record<string, VxeTableInstance>>,
+	activeTabs: Ref<string>,
+	props: ComponentAttr.Props<typeof BcFormTable>
+) {
+	const btns: ComputedRef<ICustomData.Btns[]> = computed(() => {
+		return props.data?.btns || [];
+	});
+
+	return {
+		btns,
+	};
+}

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

@@ -0,0 +1,44 @@
+import { computed, ref, nextTick } from 'vue';
+import { VxeTableInstance } from 'vxe-table';
+import { useElementSize } from '@vueuse/core';
+
+export function useTableHeight() {
+	const isOverHide = ref(false); // 解决切换查询条件时，出现滚动条造成弹屏问题
+	const wrapRef = ref<HTMLElement>();
+	const btnRef = ref<HTMLElement>();
+	const formRef = ref<HTMLElement>();
+	const tableApi = ref<Record<string, VxeTableInstance>>({});
+
+	const { height: wrapHeight } = useElementSize(wrapRef);
+	const { height: btnHeight } = useElementSize(btnRef, { height: 0, width: 0 });
+	const { height: formHeight } = useElementSize(formRef, { height: 0, width: 0 });
+
+	const style = computed(() => {
+		const height = wrapHeight.value > 0 ? `${wrapHeight.value - btnHeight.value - formHeight.value}px` : '0px';
+		return {
+			height,
+		};
+	});
+
+	function onReady(api: VxeTableInstance, id: string) {
+		tableApi.value[id] = api;
+	}
+
+	function onHeightChange() {
+		isOverHide.value = true;
+		nextTick(() => {
+			isOverHide.value = false;
+		});
+	}
+
+	return {
+		wrapRef,
+		btnRef,
+		formRef,
+		tableApi,
+		style,
+		isOverHide,
+		onReady,
+		onHeightChange,
+	};
+}

package/src/components/business/bcPageConfig/bcPageConfig.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="flex flex-col h-full">
+		<div class="flex-1 system-user-container" style="height: 300px">
+			<hs-tabs ref="tabsRef" v-model="tabsActiveName" class="h-full tabs" type="border-card" addable @edit="handleTabsEdit">
+				<hs-tab-pane class="tab-pane" label="按钮配置" name="btn">
+					<component :is="hsBtnPanel" v-model="panelConfig.btns" />
+				</hs-tab-pane>
+				<hs-tab-pane class="tab-pane" label="查询条件配置" name="form">
+					<component :is="hsFormPanel" v-model="panelConfig" />
+				</hs-tab-pane>
+				<hs-tab-pane
+					v-for="(item, index) in panelConfig.tables"
+					:key="index"
+					class="tab-pane"
+					:label="item.baseData['tableName'] || '表格配置名称'"
+					:name="item.id"
+					closable
+				>
+					<component :is="hsTablePanels" closable v-model="panelConfig.tables[index]" />
+				</hs-tab-pane>
+			</hs-tabs>
+		</div>
+		<component :configs="configs" ref="saveFormRef" :is="saveForm" @change="changeConfig" @save="saveFormTableConfig"></component>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import hsFormPanel from './components/hsForm/src/hsFormPanel.vue';
+// import hsTablePanel from './components/hsTable/src/hsTablePanel.vue';
+import IFormTable from '/@/types/formTable';
+import hsTablePanels from './components/hsTables/src/hsTablePanel.vue';
+import hsBtnPanel from './components/hsBtn/src/hsBtnPanel.vue';
+import saveForm from './components/hsSaveForm/src/saveForm.vue';
+import { useHsPageConfig } from './usePageConfig'; //'./usePageConfig';
+
+let panelConfig = ref<IFormTable.FormTable>({
+	id: '', // 配置id
+	config_type: '1', // 配置类型
+	config_unique_id: '', // 配置唯一标识
+	config_name: '', // 配置名称
+	btns: [], // 按钮配置
+	tables: [
+		{
+			id: 'table_' + new Date().getTime().toString(),
+			baseData: { id: '', tableName: '表格配置名称' },
+			tableConfig: [],
+		},
+	],
+});
+// 页面所在的所有配置
+let configs = ref<Array<IFormTable.FormTable>>([]);
+let saveFormRef = ref();
+const emits = defineEmits(['refresh']);
+
+// 将方法暴露
+const { handleTabsEdit, saveFormTableConfig, changeConfig, initData, tabsActiveName } = useHsPageConfig(panelConfig, configs, saveFormRef, emits);
+defineExpose({ initData });
+</script>
+
+<style scoped lang="scss">
+.system-user-container {
+	:deep(.el-card__body) {
+		height: 100% !important;
+	}
+
+	:deep(.el-tabs__content) {
+		height: calc(100% - 39px);
+	}
+}
+.tabs {
+	:deep(.el-tabs__new-tab) {
+		margin: 10px 10px 10px 0px;
+	}
+}
+.tab-pane {
+	height: 100% !important;
+}
+</style>

package/src/components/business/bcPageConfig/components/hsBtn/src/hsAttrBtn.vue

@@ -0,0 +1,39 @@
+<template>
+	<div class="bg-blue-200 h-full flex flex-col">
+		<div style="height: calc(100% -50px)" class="overflow-y-auto flex-1">
+			<component :is="hsExpand" v-model="visible" :expandConfig="{ subTitle: '按钮项代码' }"></component>
+			<div v-if="visible">
+				{{ btnItemConfig }}
+			</div>
+			<component :is="hsExpand" v-model="btnConfig.visible" :expandConfig="btnConfig.title"></component>
+			<component :is="hsBtnItemConfig" v-show="btnConfig.visible" ref="btnItemRef" v-model="btnItemConfig.data" :config="btnConfig"></component>
+		</div>
+
+		<div class="text-center grow-0" style="height: 50rpx">
+			<hs-button @click="saveData" type="primary">保存</hs-button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import hsBtnItemConfig from './hsBtnItemConfig.vue';
+import { useHsAttrBtn } from './../useAttrBtn';
+import IFormTable from '/@/types/formTable';
+const props = defineProps({
+	current: {
+		type: Object,
+		default: () => {},
+	},
+	btnList: {
+		type: Array<IFormTable.BtnItem>,
+		default: () => [],
+	},
+});
+const btnItemRef = ref();
+const { visible, btnItemConfig, btnConfig, saveData } = useHsAttrBtn(props, btnItemRef);
+</script>
+
+<style lang="scss" scoped></style>
+<!--  -->

package/src/components/business/bcPageConfig/components/hsBtn/src/hsBtnConfigList.vue

@@ -0,0 +1,45 @@
+<!-- 
+  desc: 表单配置项集合
+  author: lvling
+ -->
+<template>
+	<div>
+		<div class="flex flex-wrap">
+			<div class="p-2 relative" v-for="(item, index) in btnsModel" :key="index" @click="choseTagItem(item)">
+				<div class="border border-solid border-zinc-300 hover:bg-blue-200 p-2 rounded" :class="current['id'] == item['id'] ? 'bg-blue-200' : ''">
+					{{ item['data'] && item['data']['name'] }}
+				</div>
+				<div
+					v-if="current['id'] == item['id']"
+					@click.stop.prevent="deleteTagItem(item)"
+					style="position: absolute; top: 0px; right: 5px; cursor: pointer"
+				>
+					✖️
+				</div>
+			</div>
+			<div class="p-2">
+				<div @click="appendField" class="p-2 bg-pink-200 w-10 h-10 flex justify-center align-center rounded-full">+</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { PropType, defineModel } from 'vue';
+import { useHsBtnListConfig } from './../useBtnConfigList';
+import IFormTable from '/@/types/formTable';
+
+const emit = defineEmits(['chose']);
+
+const btnsModel = defineModel<Array<IFormTable.BtnItem>>([]);
+const props = defineProps({
+	current: {
+		type: Object as PropType<Record<'id', string>>,
+		default: () => {},
+	},
+});
+
+const { appendField, deleteTagItem, choseTagItem } = useHsBtnListConfig(emit, props, btnsModel);
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/business/bcPageConfig/components/hsBtn/src/hsBtnItemConfig.vue

@@ -0,0 +1,32 @@
+<template>
+	<component ref="baseConfigRef" :parentConfig="parentConfig" :is="'bc-form-config'" :data="data" :config="config.list" :rules="config.rules">
+		<template #name>
+			<bc-auto-complete type="btn" v-model="data.name" @change="onChangeItem"></bc-auto-complete>
+		</template>
+		<template #btnIcon>
+			<IconSelector placeholder="请选择图标" clearable :isShowPrepend="false" v-model="data.btnIcon" title="" />
+		</template>
+	</component>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import IconSelector from '/@/components/iconSelector/index.vue';
+import { useHsBtnItemConfig } from './../useBtnItemConfig';
+// const props =
+defineProps({
+	config: {
+		type: Object,
+		default: () => {},
+	},
+});
+
+const data: Record<string, any> = defineModel();
+const baseConfigRef = ref();
+
+const { parentConfig, onChangeItem, getSubmitData } = useHsBtnItemConfig(data, baseConfigRef);
+
+defineExpose({ getSubmitData });
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/business/bcPageConfig/components/hsBtn/src/hsBtnPanel.vue

@@ -0,0 +1,45 @@
+<!-- 
+	desc: 配置按钮面板
+	author: 吕玲
+ -->
+<template>
+	<div class="mx-auto flex flex-row h-full">
+		<div class="flex-1 grow overflow-y-auto">
+			<!-- 按钮配置 -->
+			<hsExpand v-model="btnTitleConfig.visible" :expandConfig="btnTitleConfig"></hsExpand>
+			<component v-if="btnTitleConfig.visible" :is="hsBtnConfigList" v-model="btnsConfig" :current="currentItem" @chose="onChoseItem"></component>
+		</div>
+		<div v-if="(btnsConfig || []).length > 0 && !!currentItem.id" class="flex-none basis-1/4 ml-4">
+			<component :is="hsAttrBtn" :btnList="btnsConfig" :current="currentItem"></component>
+		</div>
+	</div>
+</template>
+<script setup lang="ts" name="formPanel">
+import { defineModel, ref } from 'vue';
+import hsBtnConfigList from './hsBtnConfigList.vue';
+import hsAttrBtn from './hsAttrBtn.vue';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import IFormTable from '/@/types/formTable';
+import { emptyBtnItemData } from './../../../default/baseBtnConfig';
+
+import _ from 'lodash';
+
+const btnsConfig = defineModel<Array<IFormTable.BtnItem>>();
+const btnTitleConfig = ref({
+	visible: true,
+	subTitle: '按钮配置',
+	class: 'font-bold my-3',
+	iconSize: 20,
+});
+// 当前选中项配置
+let currentItem = ref(_.cloneDeep(emptyBtnItemData));
+
+/**
+ * 选择某配置回调
+ */
+const onChoseItem = (item: IFormTable.BtnItem) => {
+	currentItem.value = item;
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/business/bcPageConfig/components/hsBtn/useAttrBtn.ts

@@ -0,0 +1,58 @@
+import { ref, Ref, watch } from 'vue';
+import ComponentAttr from '/@/types/components';
+import hsAttrBtn from './src/hsAttrBtn.vue';
+import IFormTable from '/@/types/formTable';
+import { config } from '../../default/baseBtnConfig';
+import { ElMessage } from 'element-plus';
+import _ from 'lodash';
+interface BtnRef {
+	getSubmitData: () => boolean;
+}
+export function useHsAttrBtn(props: ComponentAttr.Props<typeof hsAttrBtn>, btnItemRef: Ref<BtnRef>) {
+	// 原始数据
+	let oldItem = ref(props.current);
+	// 当前项绑定数据
+	let btnItemConfig = ref(_.cloneDeep(props.current));
+	/**
+	 * 监听当前项
+	 */
+	watch(
+		() => props.current,
+		(value) => {
+			// 解决切换不同表单项不及时更新数据问题
+			if (value.id != btnItemConfig.value.id) {
+				console.log('value', value);
+				// value.elConfig.visible = false;
+				oldItem.value = value;
+				btnItemConfig.value = _.cloneDeep(value);
+				// formData.value = props.data;
+			}
+		},
+		{ deep: true }
+	);
+	const btnConfig = ref(_.cloneDeep(config));
+	// 控制表单项属性的展开关闭
+	const visible = ref(false);
+	// 基本配置属性实例
+	/**
+	 * 保存功能
+	 */
+	const saveData = async function () {
+		try {
+			// 校验表单项属性
+			let flag = await btnItemRef.value.getSubmitData();
+			if (!flag) return;
+			// 增加按钮重复校验
+			let keys = _.map(props.btnList, (item: Record<string, IFormTable.Data>) => item.data.key);
+			if (_.includes(keys, btnItemConfig.value.data.key)) {
+				return ElMessage.warning('按钮key值重复');
+			}
+			// 保存表单配置
+			oldItem.value = Object.assign(oldItem.value, _.cloneDeep(btnItemConfig.value));
+		} catch (err) {
+			console.log('er', err);
+		}
+	};
+
+	return { visible, btnItemConfig, btnConfig, saveData };
+}