hs-admin-ui 1.0.0 → 1.0.2

package/src/views/system/formSetting/formConfig.vue

@@ -1,108 +0,0 @@
-<template>
-	<div class="flex flex-col h-full">
-		<div class="flex-1 system-user-container" style="height: 300px" v-if="isShow">
-			<hs-tabs ref="tabsRef" v-model="tabsActiveName" class="h-full tabs" type="border-card" addable @edit="handleTabsEdit">
-				<hs-tab-pane
-					class="tab-pane"
-					v-for="(item, index) in panelConfig['forms']"
-					:key="index"
-					:closable="index > 0"
-					:label="item.base?.label || '表单配置名称'"
-					:name="item.id"
-				>
-					<component :is="hsFormPanel" v-model="panelConfig['forms'][index]" v-model:BaseForm="panelConfig.BaseForm" />
-				</hs-tab-pane>
-			</hs-tabs>
-		</div>
-		<component :configs="configs" ref="saveFormRef" :is="saveForm" @change="changeConfig" @save="saveFormTableConfig"></component>
-	</div>
-</template>
-
-<script setup lang="ts" name="test">
-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 { useHsFormTable } from './useFormConfig';
-import { json } from 'stream/consumers';
-
-let panelConfig = ref<IFormTable.FormConfig>({
-	config_unique_id: '', // 配置唯一标识
-	config_name: '', // 配置名称
-	BaseForm: {
-		labelWidth: '100', // 表单域标签的宽度
-		labelPosition: 'left', // 表单域标签的位置
-		size: 'small', // 表单内组件的尺寸
-		labelSuffix: '', // 表单域标签的后缀
-		requireAsteriskPosition: 'left', // 必填字段标签位置
-		statusIcon: false, // 是否在输入框中显示校验结果反馈图标
-		validateOnRuleChange: true, // 是否在规则改变的时候立即触发校验
-		scrollToError: false, // 是否在输入的时候滚动到错误的地方
-	},
-	forms: [
-		{
-			id: 'form_1',
-			base: { label: '表单配置名称', fieldID: '', grid: 3 },
-			form: {
-				baseData: { rowGap: 0, columnGap: 0 },
-				formConfig: [],
-				formData: [],
-			},
-			component: {
-				baseData: {},
-			},
-			slot: {
-				baseData: {},
-			},
-			formItemType: 'form',
-		},
-	],
-});
-let tabsActiveName = ref('form_1');
-// 页面所在的所有配置
-let configs = ref<Array<IFormTable.FormTable>>([]);
-let saveFormRef = ref();
-const isShow = ref(true);
-/**
- * 初始化数据
- * @param configs
- */
-const initData = (configList: Array<IFormTable.FormTable>, panelConfig1: IFormTable.FormConfig) => {
-	console.log('panelConfig', panelConfig1);
-	if (panelConfig1) {
-		panelConfig.value = JSON.parse(JSON.stringify(panelConfig1));
-	}
-	// console.log('configList', configList);
-	// configs.value = configList;
-	// if (saveFormRef.value) {
-	// 	saveFormRef.value.initConfig(configList);
-	// }
-};
-
-// 将方法暴露
-defineExpose({ initData });
-const { handleTabsEdit, saveFormTableConfig, changeConfig, config } = useHsFormTable(panelConfig, tabsActiveName);
-</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/views/system/formSetting/index.vue

@@ -1,35 +0,0 @@
-<template>
-	<div class="system-user-container layout-padding">
-		<el-card shadow="hover" class="layout-padding-auto">
-			<div class="bg-blue-300 py-5 w-1/5">
-				<!-- 切换系统选择器 -->
-				<bc-switch-systems @change="onChangeSystem"></bc-switch-systems>
-				<!-- 页面管理 -->
-				<component :is="hsPageTree" :menu="menuData" @change="changeNode"></component>
-			</div>
-			<div class="flex-1" v-show="currentPage">
-				<hs-form-config ref="formRef" class="h-full"></hs-form-config>
-			</div>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="formSetting">
-import hsFormConfig from './formConfig.vue';
-import { ref } from 'vue';
-import { useForm } from './useForm';
-import hsPageTree from './components/hsPageTree/src/hsPageTree.vue';
-const formRef = ref();
-
-const { currentPage, onChangeSystem, menuData, changeNode } = useForm(formRef);
-</script>
-
-<style scoped lang="scss">
-.system-user-container {
-	:deep(.el-card__body) {
-		display: flex;
-		flex: 1;
-		overflow: auto;
-	}
-}
-</style>

package/src/views/system/formSetting/menuType.d.ts

@@ -1,12 +0,0 @@
-import IFormTable from '/@/types/formTable';
-// 定义菜单数据类型
-declare namespace IMenuType {
-	interface Menu {
-		label: string;
-		value: string;
-		name?: string;
-		children: Menu[];
-		[key: string]: IFormTable.Data;
-	}
-}
-export default IMenuType;

package/src/views/system/formSetting/panelConfig.json

@@ -1,164 +0,0 @@
-{
-	"config_unique_id": "",
-	"config_name": "",
-	"BaseForm": {
-		"labelWidth": "160",
-		"labelPosition": "left",
-		"size": "small",
-		"labelSuffix": "",
-		"requireAsteriskPosition": "left",
-		"statusIcon": false,
-		"validateOnRuleChange": true,
-		"scrollToError": false
-	},
-	"forms": [
-		{
-			"id": "form_1",
-			"base": { "label": "表单配置名称", "fieldID": "", "grid": 3 },
-			"form": {
-				"baseData": { "rowGap": 0, "columnGap": 0 },
-				"formConfig": [
-					{
-						"id": "1709636907025",
-						"data": {
-							"baseData": { "label": "参数名称", "prop": "", "el": "", "isSlot": false, "isApply": true, "isShow": true },
-							"elementItem": [
-								{
-									"baseData": {
-										"label": "参数名称1",
-										"prop": "",
-										"el": "hs-input",
-										"isSlot": false,
-										"isApply": true,
-										"isShow": true,
-										"baseType": "string"
-									},
-									"elData": {
-										"attrs": {
-											"size": "small",
-											"type": "text",
-											"clearable": false,
-											"show-password": false,
-											"disabled": false,
-											"autosize": false,
-											"autocomplete": "off",
-											"autofocus": false,
-											"validate-event": true
-										},
-										"rules": { "required": false, "rules": "" }
-									}
-								}
-							],
-							"layoutData": { "rowSpan": 1, "colSpan": 1, "labelBg": "#F5F5F5", "labelColor": "#606266" }
-						},
-						"baseConfig": {
-							"title": { "subTitle": "表单项属性" },
-							"visible": true,
-							"list": [
-								{ "prop": "label", "label": "参数名称", "el": "hs-input", "required": false },
-								{ "prop": "prop", "label": "查询参数", "el": "hs-input" },
-								{
-									"prop": "el",
-									"label": "组件类型",
-									"clearable": false,
-									"tooltip": "下拉选择组件类型，组件类型取自配置文件",
-									"el": "hs-select",
-									"cel": "hs-option",
-									"op": [
-										{ "label": "输入框", "value": "hs-input" },
-										{ "label": "选择器", "value": "hs-select" },
-										{ "label": "开关", "value": "hs-switch" },
-										{ "label": "日期选择器", "value": "hs-date-picker" },
-										{ "label": "按钮", "value": "hs-button" },
-										{ "label": "自动补全", "value": "hs-autocomplete" },
-										{ "label": "上传", "value": "hs-upload" },
-										{ "label": "多选框", "value": "hs-checkbox" },
-										{ "label": "单选框", "value": "hs-radio" },
-										{ "label": "数字输入框", "value": "hs-input-number" },
-										{ "label": "级联选择器", "value": "hs-cascader-panel" },
-										{ "label": "树形选择", "value": "hs-tree-select" }
-									]
-								},
-								{
-									"prop": "baseType",
-									"label": "基础类型",
-									"clearable": false,
-									"tooltip": "基础类型",
-									"el": "hs-select",
-									"cel": "hs-option",
-									"op": [
-										{ "label": "字符串", "value": "string" },
-										{ "label": "数字", "value": "number" },
-										{ "label": "布尔", "value": "boolean" }
-									]
-								},
-								{
-									"prop": "complexType",
-									"label": "复杂类型",
-									"clearable": true,
-									"tooltip": "复杂类型",
-									"el": "hs-select",
-									"cel": "hs-option",
-									"op": [
-										{ "label": "数组", "value": "Array" },
-										{ "label": "对象", "value": "Object" }
-									]
-								},
-								{ "prop": "isSlot", "label": "是否自定义插槽", "el": "hs-switch", "tooltip": "下拉选择，自定义模板，选择的名称就是模板名称" },
-								{ "prop": "isApply", "label": "是否启用", "tooltip": "是否启用该表单项", "el": "hs-switch" },
-								{ "prop": "isShow", "label": "是否显示该表单项", "el": "hs-switch" }
-							]
-						},
-						"baseConfig2": {
-							"title": { "subTitle": "表单项属性" },
-							"visible": true,
-							"list": [
-								{
-									"prop": "el",
-									"label": "组件类型",
-									"clearable": false,
-									"tooltip": "下拉选择组件类型，组件类型取自配置文件",
-									"el": "hs-select",
-									"cel": "hs-option",
-									"op": [
-										{ "label": "输入框", "value": "hs-input" },
-										{ "label": "选择器", "value": "hs-select" },
-										{ "label": "开关", "value": "hs-switch" },
-										{ "label": "日期选择器", "value": "hs-date-picker" },
-										{ "label": "按钮", "value": "hs-button" },
-										{ "label": "自动补全", "value": "hs-autocomplete" },
-										{ "label": "上传", "value": "hs-upload" },
-										{ "label": "多选框", "value": "hs-checkbox" },
-										{ "label": "单选框", "value": "hs-radio" },
-										{ "label": "数字输入框", "value": "hs-input-number" },
-										{ "label": "级联选择器", "value": "hs-cascader-panel" },
-										{ "label": "树形选择", "value": "hs-tree-select" }
-									]
-								},
-								{ "prop": "isSlot", "label": "是否自定义插槽", "el": "hs-switch", "tooltip": "下拉选择，自定义模板，选择的名称就是模板名称" },
-								{ "prop": "isApply", "label": "是否启用", "tooltip": "是否启用该表单项", "el": "hs-switch" },
-								{ "prop": "isShow", "label": "是否显示该表单项", "el": "hs-switch" }
-							]
-						},
-						"elConfig": { "title": { "subTitle": "元素项属性" }, "visible": true, "list": [] },
-						"layoutConfig": {
-							"title": { "subTitle": "布局配置" },
-							"visible": false,
-							"list": [
-								{ "prop": "rowSpan", "label": "行数", "tooltip": "栅格占据的行数", "type": "number", "el": "hs-input" },
-								{ "prop": "colSpan", "label": "列数", "tooltip": "栅格占据的列数", "type": "number", "el": "hs-input" },
-								{ "prop": "labelBg", "label": "标签背景色", "tooltip": "标签背景色", "type": "string", "el": "hs-color-picker" },
-								{ "prop": "labelColor", "label": "标签字体颜色", "tooltip": "标签字体颜色", "type": "string", "el": "hs-color-picker" }
-							]
-						},
-						"defaultConfig": { "title": { "subTitle": "数据配置" }, "visible": false, "list": [] }
-					}
-				],
-				"formData": []
-			},
-			"component": { "baseData": {} },
-			"slot": { "baseData": {} },
-			"formItemType": "form"
-		}
-	]
-}

package/src/views/system/formSetting/useForm.ts

@@ -1,89 +0,0 @@
-import { ref, Ref } from 'vue';
-import IFormTable from '/@/types/formTable';
-import IMenuType from './menuType';
-import { useMenuController } from '/@/api/menuController';
-import panelConfig from './panelConfig.json';
-const menu = useMenuController();
-interface FormRef {
-	initData: (configs: IFormTable.Data) => {};
-}
-export function useForm(formRef: Ref<FormRef>) {
-	// 当前页面
-	let currentPage = ref<string>('');
-	type Option = Record<'value' | 'label' | 'project_code', string>;
-	// 页面中的所有配置数据
-	const configs = ref({});
-	let sysData = ref();
-	const menuData = ref<IMenuType.Menu[]>([]);
-	/**
-	 * 切换系统回调方法
-	 * @param system
-	 */
-	const onChangeSystem = (system: Option) => {
-		console.log('system', system);
-		sysData.value = system;
-
-		// 清空配置数据
-		configs.value = {};
-		// 清空页面数据
-		currentPage.value = '';
-		// 获取菜单数据
-		getMenuData(system);
-		// getMenuList
-	};
-	/**
-	 * 获取菜单数据【树结构】
-	 * @param data
-	 */
-	const getMenuData = (sysData: Option) => {
-		menu
-			.getMenuList({ project_code: sysData.project_code })
-			.then((res) => {
-				// : Record<string, IFormTable.Data>
-				if (res.code != 1) return;
-				// 整理返回的菜单数据
-				menuData.value = formatMenuData(res.data || []);
-			})
-			.catch((err) => {
-				console.log('err', err);
-			});
-	};
-	/**
-	 * 格式化菜单数据【给每个菜单都追加label、value值】
-	 * @param data
-	 * @returns
-	 */
-	const formatMenuData = (data: IMenuType.Menu[]) => {
-		return data.map((item: IMenuType.Menu) => {
-			// 赋值
-			item.label = item.meta.title;
-			item.value = item.name;
-			// 格式化children中的菜单数据
-			if (item.children && item.children.length > 0) {
-				// 递归格式化方法
-				item.children = formatMenuData(item.children || []);
-			}
-			return item;
-		});
-	};
-	/**
-	 * 切换node节点
-	 * @param data
-	 */
-	const changeNode = (data: IMenuType.Menu) => {
-		currentPage.value = data.value;
-		// 调用接口查询
-		// configs.value = connectData[data.value] || [];
-		// // 根据返回的数据响应右侧配置
-		if (formRef.value) {
-			// 参数1: 配置数组 页面配置数据   系统配置数据
-			formRef.value.initData(configs.value, panelConfig);
-		}
-	};
-	return {
-		currentPage,
-		onChangeSystem,
-		menuData,
-		changeNode,
-	};
-}

package/src/views/system/formSetting/useFormConfig.ts

@@ -1,192 +0,0 @@
-import _ from 'lodash';
-import { Ref, ref } from 'vue';
-import { ElMessageBox, ElMessage, TabPaneName } from 'element-plus';
-import IFormTable from '/@/types/formTable';
-import { find } from 'lodash';
-
-export function useHsFormTable(panelConfig: Ref<IFormTable.FormConfig>, tabsActiveName: Ref<string>) {
-	/**
-	 * 添加表格配置
-	 */
-	const addTabPanel = () => {
-		panelConfig.value.forms.push({
-			id: 'form_' + (panelConfig.value.forms.length + 1),
-			base: { label: '表单配置名称', fieldID: '', grid: 3 },
-			form: {
-				baseData: { rowGap: 0, columnGap: 0 },
-				formConfig: [],
-				formData: {},
-			},
-			component: {
-				baseData: {},
-			},
-			slot: {
-				baseData: {},
-			},
-			formItemType: 'form',
-		});
-	};
-	/**
-	 * 移除tabs项
-	 * @param targetName
-	 * @returns
-	 */
-	const removeTabPanel = (targetName: TabPaneName | undefined) => {
-		// 查询当前表单配置对象
-		let form = find(panelConfig.value.forms, (item: IFormTable.FormbaseData) => item['id'] == targetName);
-		console.log('form', form);
-		// 删除表单配置提示
-		ElMessageBox.confirm(`确定删除${form?.base['formName'] || '表单配置'}吗？`, '提示', {
-			confirmButtonText: '确认',
-			cancelButtonText: '取消',
-			type: 'warning',
-		})
-			.then(() => {
-				// 移除配置
-				_.remove(panelConfig.value.forms, (item: IFormTable.FormbaseData) => targetName && item.id == targetName);
-				// 给出操作成功提示
-				ElMessage.success('删除成功');
-				if (tabsActiveName.value == targetName) {
-					tabsActiveName.value = 'form_1';
-				}
-			})
-			.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();
-	/**
-	 * 保存表单表格配置
-	 */
-	const saveFormTableConfig = (form: any) => {
-		console.debug('form====>>>>>>', form, JSON.stringify(panelConfig.value));
-		let tempPanelConfig = _.cloneDeep(panelConfig.value);
-		let formData = {
-			config_name: form['config_name'],
-			config_unique_id: form['config_unique_id'],
-			attrs: setPropertyData(tempPanelConfig.BaseForm), // 删除属性值为空的属性,
-			data: transformData(tempPanelConfig.forms),
-			form: tempPanelConfig.forms.map((item: any) => {
-				let obj: any = {
-					label: item.base.label,
-					fieldID: item.base.fieldID,
-					grid: item.base.grid,
-					formItemType: item.formItemType,
-					config:
-						item.formItemType == 'form'
-							? getFormType(item.formItemType, item.form.formConfig)
-							: item.formItemType == 'component'
-								? getFormType(item.formItemType, item.component.baseData)
-								: getFormType(item.formItemType, item.slot.baseData),
-				};
-				if (item.formItemType == 'form') {
-					obj.attrs = setPropertyData(item.form.baseData); // 删除属性值为空的属性
-				}
-				return obj;
-			}),
-		};
-		console.debug('tempPanelConfig====>>>>>>', JSON.stringify(formData));
-		ElMessage.success('保存配置成功, 可在控制台打印中查看配置数据');
-	};
-	/**
-	 * 切换表单表格配置
-	 * @param formItemType
-	 * @param configData
-	 * @returns 根据 formItemType 类型返回对应的配置项 form、component、slot
-	 */
-	const getFormType = (formItemType: string, configData: any) => {
-		switch (formItemType) {
-			case 'form':
-				const arr = configData.map((item: any) => {
-					return {
-						label: item.data.elementItem[0].baseData.label,
-						config: setPropertyData(item.data.elementItem), // 删除属性值为空的属性
-						layoutData: item.data.layoutData,
-					};
-				});
-				return arr;
-			case 'component':
-				return configData;
-			case 'slot':
-				return configData;
-		}
-	};
-	/**
-	 * @param originalData
-	 * @returns 转换数据
-	 * @description 将表单配置数据转换成对象
-	 */
-	function transformData(originalData: any[]) {
-		console.log('originalData', originalData);
-
-		const transformedData: any = {};
-		originalData.forEach((item: any) => {
-			const key = item.base.fieldID;
-			const value: any = {};
-			if (item.formItemType != 'form') return (transformedData[key] = {}); // 只处理表单配置
-			item.form.formConfig.forEach((config: any) => {
-				console.log('config)', config);
-				const prop = config.data.elementItem[0].baseData.prop;
-				value[prop] = '';
-			});
-			transformedData[key] = value;
-		});
-		return transformedData;
-	}
-	/**
-	 * @param params
-	 * @returns 删除属性值为空的属性
-	 */
-	function setPropertyData(params: any) {
-		function setProperty(property: any) {
-			if (property.editRender?.enabled) {
-				delete property.cellRender;
-			} else if (property.editRender) {
-				delete property.editRender;
-			}
-			for (let i in property) {
-				if (_.isString(property[i]) && property[i].trim() === '') {
-					delete property[i];
-				}
-				if (_.isObject(property[i]) && !_.isEmpty(property[i])) {
-					setProperty(property[i]);
-				}
-			}
-		}
-		setProperty(params);
-
-		return params;
-	}
-	/**
-	 * 切换表单表格配置
-	 * @param config
-	 */
-	// value: string, type: string,
-	const changeConfig = (config: IFormTable.FormConfig) => {
-		panelConfig.value = config;
-	};
-
-	return {
-		handleTabsEdit,
-		saveFormTableConfig,
-		changeConfig,
-		config,
-	};
-}