hs-admin-ui 1.0.0

package/src/views/system/formSetting/components/hsPageTree/src/hsPageTree.vue

@@ -0,0 +1,30 @@
+<template>
+	<!-- {{ menuData }} -->
+	<hs-tree :data="menuData" :props="defaultProps" highlight-current :show-checkbox="showCheckbox" @node-click="handleNodeClick" />
+	<el-button @click="demoMenu">使用模拟菜单</el-button>
+</template>
+
+<script lang="ts" setup>
+import { usePageTree } from '../usePageTree';
+type Menu = Record<'value' | 'label' | 'name', string>;
+const props = defineProps({
+	// 点击节点的时候是否只触发子节点
+	onlyChild: {
+		type: Boolean,
+		default: true,
+	},
+	// 是否显示复选框
+	showCheckbox: {
+		type: Boolean,
+		default: false,
+	},
+	menu: {
+		type: Array<Menu>,
+		default: () => [],
+	},
+});
+
+const emits = defineEmits(['change']);
+const { handleNodeClick, demoMenu, menuData, defaultProps } = usePageTree(emits, props);
+</script>
+../../usePageTree

package/src/views/system/formSetting/components/hsPageTree/usePageTree.ts

@@ -0,0 +1,50 @@
+// 树结构接口
+import { ref, watch } from 'vue';
+import { PageData } from './configData';
+import ComponentAttr from '/@/types/components';
+import hsPageTree from './src/hsPageTree.vue';
+import IMenuType from '../../menuType';
+import _ from 'lodash';
+
+export function usePageTree(emits: (event: 'change', ...args: any[]) => void, props: ComponentAttr.Props<typeof hsPageTree>) {
+	/**
+	 * 节点点击回调
+	 * @param data
+	 */
+	const handleNodeClick = (data: IMenuType.Menu) => {
+		if (props.onlyChild) {
+			// 只处理最终子节点
+			if (!data.children || (data.children && data.children.length <= 0)) {
+				emits('change', data);
+			}
+		} else {
+			// 处理每个节点
+			emits('change', data);
+		}
+	};
+	// 树结构数据
+	// _.cloneDeep(props.menu)
+	const menuData = ref<IMenuType.Menu[]>([]);
+	watch(
+		() => props.menu,
+		(value) => {
+			menuData.value = _.cloneDeep(value);
+		},
+		{
+			deep: true,
+			immediate: true,
+		}
+	);
+	// 树结构绑定字段
+	const defaultProps = {
+		children: 'children',
+		label: 'label',
+	};
+	/**
+	 * 使用模拟菜单
+	 */
+	const demoMenu = () => {
+		menuData.value = PageData;
+	};
+	return { handleNodeClick, demoMenu, menuData, defaultProps };
+}

package/src/views/system/formSetting/components/hsSaveForm/saveFormConfig.ts

@@ -0,0 +1,66 @@
+import _ from 'lodash';
+// ============================= 新配置 start ==============================
+// 表单绑定值
+let formData = {
+	config_name: '',
+	config_unique_id: '', // new Date().getTime().toString(),
+};
+// 表单校验规则
+const formRule = {
+	config_name: [{ required: true, message: '请输入配置名称' }],
+	config_unique_id: [{ required: true, message: '请输入配置标识' }],
+};
+// 表单配置项
+const formConfig = [
+	{
+		prop: 'config_name',
+		label: '配置名称',
+		el: 'hs-input',
+		required: true,
+	},
+	{
+		prop: 'config_unique_id',
+		label: '配置标识',
+		el: 'hs-input',
+		show: false,
+		required: true,
+	},
+];
+const newConfig = {
+	formData,
+	formRule,
+	formConfig,
+};
+// ============================= 新配置 end ==============================
+// ============================= 选择配置 start ==============================
+// 表单绑定值
+let selectFormData = {
+	name: '',
+	config_name: '',
+	config_unique_id: '', // new Date().getTime().toString(),
+};
+// 表单配置项
+const selectFormConfig = [
+	{
+		prop: 'name',
+		label: '配置',
+		el: 'hs-select',
+		cel: 'hs-option',
+		multiple: false,
+		clearable: false,
+		op: [
+			// { label: ' 配置1', value: 'left' },
+			// { label: '配置2', value: 'right' },
+			// { label: '配置3', value: 'top' },
+		],
+	},
+];
+
+const selectConfig = {
+	formData: selectFormData,
+	formRule: formRule,
+	formConfig: _.concat(selectFormConfig, formConfig),
+};
+// ============================= 选择配置 end ==============================
+
+export { newConfig, selectConfig };

package/src/views/system/formSetting/components/hsSaveForm/src/saveForm.vue

@@ -0,0 +1,47 @@
+<template>
+	<div class="flex justify-around items-center">
+		<component
+			class="basis-3/4"
+			ref="saveFormRef"
+			:parentConfig="parentConfig"
+			:is="'bc-form-config'"
+			:data="formConfig.formData"
+			:config="formConfig.formConfig"
+			:rules="formConfig.formRule"
+			:watchConfig="true"
+			@change="changeConfig"
+		></component>
+
+		<div class="basis-1/4 flex justify-end">
+			<hs-button v-if="!isEdit || (isEdit && formConfig.formData.config_name)" @click="saveConfig" type="primary">保存配置</hs-button>
+			<!-- <hs-button v-if="isEdit" @click="addConfig">新增配置</hs-button> -->
+			<hs-button v-if="!isEdit" @click="cancel">取消</hs-button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import IFormTable from '/@/types/formTable';
+
+import { useSaveForm } from './../useSaveForm';
+defineOptions({
+	inheritAttrs: false,
+});
+const props = defineProps({
+	configs: {
+		type: Array<IFormTable.FormTable>,
+		default: [],
+	},
+});
+
+const saveFormRef = ref();
+
+const emits = defineEmits(['save', 'change']);
+
+const { parentConfig, formConfig, isEdit, saveConfig, changeConfig, initConfig, addConfig, cancel } = useSaveForm(emits, saveFormRef, props);
+// 暴露内部方法
+defineExpose({
+	initConfig,
+});
+</script>

package/src/views/system/formSetting/components/hsSaveForm/useSaveForm.ts

@@ -0,0 +1,122 @@
+import { Ref, ref } from 'vue';
+import _ from 'lodash';
+import ComponentAttr from '/@/types/components';
+import IFormTable from '/@/types/formTable';
+import { newConfig, selectConfig } from './saveFormConfig';
+import saveForm from './src/saveForm.vue';
+interface BcFormRef {
+	getSubmitData: () => boolean;
+}
+
+export function useSaveForm(
+	emits: (event: 'save' | 'change', ...args: any[]) => void,
+	saveFormRef: Ref<BcFormRef>,
+	props: ComponentAttr.Props<typeof saveForm>
+) {
+	const parentConfig = ref({
+		showColon: true,
+		xs: 8,
+		sm: 8,
+		md: 8,
+		lg: 8,
+		xl: 8,
+	});
+	// 区分当前是新增还是修改
+	let isEdit = ref(true);
+	// 配置表单
+	let formConfig = ref(
+		_.assign(_.cloneDeep(selectConfig), {
+			formData: {
+				name: '',
+				config_name: '',
+				config_unique_id: new Date().getTime().toString(),
+			},
+		})
+	);
+	// formConfig.value.formData.config_unique_id = new Date().getTime().toString();
+	/**
+	 * 切换配置方法
+	 * @param value
+	 * @param type
+	 */
+	const changeConfig = (value: string, type: string) => {
+		// 初始化表格表单配置
+		if (type == 'name') {
+			let config = _.cloneDeep(props.configs).find((item: IFormTable.FormTable) => item.config_unique_id == value);
+			formConfig.value.formData = _.assign(formConfig.value.formData, {
+				config_name: config.config_name,
+				config_unique_id: config.config_unique_id,
+			});
+			emits('change', config);
+		}
+	};
+	/**
+	 * 初始化配置
+	 * @param configList
+	 */
+	const initConfig = (configList: Array<IFormTable.FormTable>) => {
+		// 更新表单数据
+		let tempFormConfig = _.cloneDeep(selectConfig);
+		tempFormConfig.formData.name = (configList[0] && configList[0].config_name) || '';
+		tempFormConfig.formData.config_name = (configList[0] && configList[0].config_name) || '';
+		tempFormConfig.formData.config_unique_id = (configList[0] && configList[0].config_unique_id) || new Date().getTime().toString();
+		// 更新表单配置
+		if (configList.length > 0) {
+			let list = configList.map((item: IFormTable.FormTable) => {
+				return { label: item.config_name, value: item.config_unique_id };
+			});
+			let item = _.assign(tempFormConfig.formConfig[0], {
+				op: list,
+			});
+			tempFormConfig.formConfig.splice(0, 1, item);
+		}
+		formConfig.value = tempFormConfig;
+		// 编辑类型 改为true
+		isEdit.value = true;
+		// 初始化表格配置
+		let initConfig = {
+			tables: [{ id: 'table_' + new Date().getTime().toString(), baseData: { id: '', tableName: '表格配置名称' }, tableConfig: [] }],
+			btns: [],
+		};
+		// 初始化表格表单配置
+		emits('change', configList[0] || initConfig);
+	};
+
+	/**
+	 * 保存配置
+	 */
+	const saveConfig = async () => {
+		let flag = await saveFormRef.value.getSubmitData();
+		if (flag) {
+			emits('save', formConfig.value.formData);
+		}
+	};
+	/**
+	 * 新增配置
+	 */
+	const addConfig = () => {
+		// 将编辑类型改为false
+		isEdit.value = false;
+
+		// 更新保存配置
+		formConfig.value = _.cloneDeep(newConfig);
+		formConfig.value.formData.config_unique_id = new Date().getTime().toString();
+
+		// 初始化表格配置
+		let initConfig = {
+			tables: [{ id: 'table_' + new Date().getTime().toString(), baseData: { id: '', tableName: '表格配置名称' }, tableConfig: [] }],
+			btns: [],
+		};
+		// 初始化表格表单配置
+		emits('change', initConfig);
+	};
+	/**
+	 * 取消新增配置
+	 */
+	const cancel = () => {
+		// 初始化配置
+		initConfig(_.cloneDeep(props.configs));
+	};
+
+	return { parentConfig, formConfig, isEdit, saveConfig, changeConfig, initConfig, addConfig, cancel };
+}

package/src/views/system/formSetting/components/hsTables/src/hsAttrTable.vue

@@ -0,0 +1,91 @@
+<template>
+	<div class="h-full">
+		<div style="height: 94%" class="overflow-y-auto">
+			<!-- {{ tableItemConfig?.data }} -->
+			<component v-model="visible" :is="hsExpand" :expandConfig="{ subTitle: '表格属性' }"></component>
+			<component
+				v-show="visible"
+				:parentConfig="parentConfig"
+				:is="'bc-form-config'"
+				:data="tableItemConfig?.data"
+				:config="tableItemConfig?.list"
+				ref="baseTableRef"
+				:rules="tableColumnRule"
+			>
+				<template #title>
+					<hs-autocomplete
+						v-model="tableItemConfig.data.title"
+						clearable
+						class="inline-input w-50"
+						placeholder="请输入"
+						ref="hsAutocompleteRef"
+						:fetch-suggestions="querySearchAsync"
+						@select="handleSelect"
+					></hs-autocomplete>
+				</template>
+			</component>
+			<div v-for="(item, index) in tableItemConfig?.second_config" :key="index">
+				<component v-model="item.visible" :is="hsExpand" :expandConfig="{ subTitle: item.title }"></component>
+				<component
+					v-if="item.visible"
+					:parentConfig="parentConfig"
+					:is="'bc-form-config'"
+					:config="item[item.key]"
+					:data="tableItemConfig?.data[item.key]"
+				></component>
+			</div>
+			<div>
+				<div v-for="(item, index) in tableItemConfig?.filterConfig" :key="index">
+					<!-- {{ tableItemConfig?.data.filters }} -->
+					<component v-model="item.visible" :is="hsExpand" :expandConfig="{ subTitle: item.title }"></component>
+					<!-- {{ tableItemConfig?.data.filters[index] }} -->
+					<component
+						v-if="item.visible"
+						:parentConfig="parentConfig"
+						:is="'bc-form-config'"
+						:config="item[item.key]"
+						:data="tableItemConfig?.data.filters[index]"
+					></component>
+				</div>
+				<div class="flex align-center justify-center p-2" @click="addFilterItem">
+					<div class="bg-red-200 py-1 px-3 rounded">新增数据筛选配置</div>
+				</div>
+			</div>
+		</div>
+		<div class="text-center" style="height: 40px">
+			<hs-button @click="saveData" type="primary">保存</hs-button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+// import _ from 'lodash';
+import IFormTable from '/@/types/formTable';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import { useHsAttrTable } from './../useAttrTable';
+import { tableColumnRule } from '../../../default/baseTableConfig';
+
+// const tableItemConfig = defineModel<IFormTable.TableItem>();
+
+const props = defineProps({
+	current: {
+		type: Object,
+		default: () => {},
+	},
+	configList: {
+		type: Array<IFormTable.TableItem>,
+		default: () => [],
+	},
+});
+let baseTableRef = ref();
+// 权限
+// 是否显示
+// 插槽
+// 列名称模糊查询
+// 默认值
+
+const { parentConfig, visible, tableItemConfig, querySearchAsync, handleSelect, addFilterItem, saveData } = useHsAttrTable(props, baseTableRef);
+</script>
+
+<style lang="scss" scoped></style>

package/src/views/system/formSetting/components/hsTables/src/hsRecursionConfig.vue

@@ -0,0 +1,36 @@
+<template>
+	<div v-for="(item, index) in config" :key="index">
+		<component class="pl-4" :is="hsExpand" v-model="item.visible" :expandConfig="{ subTitle: item.title }"></component>
+		<!-- {{ item.key }} -->
+		<template v-if="item.visible && item.second_config">
+			<div v-for="(value, key) in item.second_config" :key="key">
+				<component :is="hsExpand" class="pl-8" v-model="value.visible" :expandConfig="{ subTitle: value.title }"></component>
+				<component
+					v-if="value.visible"
+					:is="'bc-form-config'"
+					:data="_.get(tableData, `${item.key}.${value.key}`)"
+					:config="value[value.key]"
+				></component>
+			</div>
+		</template>
+
+		<component v-if="item.visible" :is="'bc-form-config'" :data="_.get(tableData, item.key, {})" :config="item[item.key]"></component>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineModel } from 'vue';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import IFormTable from '/@/types/formTable';
+import _ from 'lodash';
+
+defineProps({
+	config: {
+		type: Array<IFormTable.Data>,
+		default: () => [],
+	},
+});
+const tableData = defineModel<IFormTable.TableBaseData>();
+</script>
+
+<style scoped></style>

package/src/views/system/formSetting/components/hsTables/src/hsTableConfig.vue

@@ -0,0 +1,39 @@
+<template>
+	{{ tableModel?.baseData }}
+	<component class="pl-4" :is="hsExpand" v-model="baseConfig.baseVisible" :expandConfig="{ subTitle: '表格基本配置' }"></component>
+	<component v-if="baseConfig.baseVisible" :is="'bc-form-config'" :data="tableModel?.baseData" :config="baseConfig.baseTableConfig"></component>
+	<component
+		v-if="tableModel?.baseData?.is_apply_page"
+		class="pl-4"
+		:is="hsExpand"
+		v-model="baseConfig.pageVisible"
+		:expandConfig="{ subTitle: '表格分页配置' }"
+	></component>
+	<component
+		v-if="baseConfig.pageVisible && tableModel?.baseData?.is_apply_page"
+		:is="'bc-form-config'"
+		:data="tableModel?.baseData?.table_page_data"
+		:config="baseConfig.tablePageConfig"
+	></component>
+	<component v-if="tableModel" :is="hsRecursionConfig" :config="baseConfig.tableAttrConfig" v-model="tableModel.baseData"></component>
+</template>
+<!--  -->
+<script setup lang="ts">
+import { ref, defineModel } from 'vue';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import hsRecursionConfig from './hsRecursionConfig.vue';
+import IFormTable from '/@/types/formTable';
+import _ from 'lodash';
+import { baseTableConfig, baseVisible, tableAttrConfig, tablePageConfig, pageVisible } from '../../../default/baseTableConfig'; // 表单配置方法
+// 深拷贝出一份数据
+let baseConfig = ref({
+	baseTableConfig: _.cloneDeep(baseTableConfig.value),
+	baseVisible: _.cloneDeep(baseVisible.value),
+	tableAttrConfig: _.cloneDeep(tableAttrConfig.value),
+	tablePageConfig: _.cloneDeep(tablePageConfig.value),
+	pageVisible: _.cloneDeep(pageVisible.value),
+});
+let tableModel = defineModel<IFormTable.Table>();
+</script>
+
+<style scoped></style>

package/src/views/system/formSetting/components/hsTables/src/hsTableConfigList.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 tableModel?.tableConfig" :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']['title']) || '暂未命名' }}====={{ item['id'] }}
+				</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 { useHsTableListConfig } from './../useTableConfigList';
+import IFormTable from '/@/types/formTable';
+
+const emit = defineEmits(['chose']);
+
+const tableModel = defineModel<IFormTable.Table>();
+const prop = defineProps({
+	current: {
+		type: Object as PropType<Record<'id', string>>,
+		default: () => {},
+	},
+});
+
+const { appendField, deleteTagItem, choseTagItem } = useHsTableListConfig(emit, prop, tableModel.value);
+</script>
+
+<style lang="scss" scoped></style>

package/src/views/system/formSetting/components/hsTables/src/hsTablePanel.vue

@@ -0,0 +1,56 @@
+<!-- 
+  desc: 配置表格面板
+  author: 吕玲
+ -->
+<template>
+	<div class="mx-auto flex flex-row h-full">
+		<div class="flex-1 grow overflow-y-auto">
+			<component :is="hsExpand" v-model="titleTableConfig.code.visible" :expandConfig="titleTableConfig.code"></component>
+			<div v-if="titleTableConfig.code.visible">{{ tableModel }}</div>
+			<component :is="hsTableParse" v-model="tableModel" />
+			<template v-if="tableModel?.baseData.id">
+				<component :is="hsExpand" v-model="titleTableConfig.table.visible" :expandConfig="titleTableConfig.table"></component>
+				<component :is="hsTableConfig" v-if="titleTableConfig.table.visible" v-model="tableModel" />
+
+				<component :is="hsExpand" v-model="titleTableConfig.tableItem.visible" :expandConfig="titleTableConfig.tableItem"></component>
+				<component
+					:is="hsTableConfigList"
+					v-if="titleTableConfig.tableItem.visible"
+					v-model="tableModel"
+					:current="currentItem"
+					@chose="onChoseItem"
+				/>
+				<!-- <component :is="hsExpand" v-model="titleTableConfig.tableExample.visible" :expandConfig="titleTableConfig.tableExample"></component> -->
+			</template>
+		</div>
+		<div v-if="(tableModel?.tableConfig || []).length > 0 && currentItem.id" class="flex-none basis-1/4 ml-4">
+			<!-- v-model="currentItem" -->
+			<component :is="hsAttrTable" :current="currentItem" :configList="tableModel?.tableConfig" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineModel } from 'vue';
+import hsAttrTable from './hsAttrTable.vue'; // 元素配置配置详情
+import hsTableParse from './hsTableParse.vue'; // 一键解析
+import hsTableConfig from './hsTableConfig.vue'; // 表格配置项
+import hsTableConfigList from './hsTableConfigList.vue'; // 表格元素配置项集合
+import IFormTable from '/@/types/formTable';
+//
+import { tableTitleConfig, emptyTableItemData } from '../../../default/baseTableConfig'; // 表格配置数据
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import _ from 'lodash';
+// 标题配置
+let titleTableConfig = ref(_.cloneDeep(tableTitleConfig.value));
+// 表格配置
+const tableModel = defineModel<IFormTable.Table>();
+// 当前选中项配置
+let currentItem = _.cloneDeep(emptyTableItemData);
+
+const onChoseItem = (item: IFormTable.TableItem) => {
+	currentItem.value = item;
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/views/system/formSetting/components/hsTables/src/hsTableParse.vue

@@ -0,0 +1,29 @@
+<!-- 
+  desc: 通过查询类名解析表格配置
+  author: 吕玲
+ -->
+<template>
+	<div class="flex flex-row">
+		<hs-input class="basis-1/4 mr-2" v-model="parseApi" placeholder="请输入解析接口" />
+		<hs-button @click="parseTable" type="primary">一键解析</hs-button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineModel } from 'vue';
+import _ from 'lodash';
+import { baseData } from '../../../default/baseTableConfig'; // 表单配置方法
+
+let parseApi = ref('');
+let tableModel = defineModel();
+
+const parseTable = () => {
+	_.assign(tableModel.value, {
+		baseData: _.assign(_.cloneDeep(baseData.value), { id: new Date().getTime().toString(), tableName: '表格配置名称' }),
+		// tableData: [],
+		tableConfig: [],
+	});
+};
+</script>
+
+<style lang="scss" scoped></style>