hs-admin-ui 1.0.6 → 1.0.8

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

@@ -0,0 +1,120 @@
+<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" label="按钮配置" name="btn">
+					<component :is="hsBtnPanel" v-model="panelConfig.btns" />
+				</hs-tab-pane>
+				<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" :panelConfig="panelConfig" />
+				</hs-tab-pane>
+			</hs-tabs>
+		</div>
+		<component
+			:configs="configs"
+			ref="saveFormRef"
+			:is="saveForm"
+			@change="changeConfig"
+			@save="saveFormTableConfig"
+			@delete="deleteConfig"
+		></component>
+	</div>
+</template>
+
+<script setup lang="ts" name="test">
+import { ref } from 'vue';
+import hsFormPanel from './components/hsForm/src/hsFormPanel.vue';
+import { IFormTable } from '/@/types';
+import saveForm from './components/hsSaveForm/src/saveForm.vue';
+import hsBtnPanel from './components/hsBtn/src/hsBtnPanel.vue';
+import { useHsFormTable } from './useFormConfig';
+
+let props = defineProps({
+	currentPageData: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+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, // 是否在输入的时候滚动到错误的地方
+	},
+	btns: [],
+	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.FormConfig>>([]);
+let saveFormRef = ref();
+const isShow = ref(true);
+// 当前页面所在的配置
+const menuData = ref({});
+/**
+ * 初始化数据
+ * @param configs
+ */
+const initData = (configList: Array<IFormTable.FormConfig>, panelConfigVal: IFormTable.FormConfig) => {
+	configs.value = configList;
+	if (panelConfigVal) {
+		panelConfig.value = JSON.parse(JSON.stringify(panelConfigVal));
+	}
+};
+const emits = defineEmits(['refresh']);
+const { handleTabsEdit, saveFormTableConfig, changeConfig, deleteConfig } = useHsFormTable(panelConfig, tabsActiveName, props, emits);
+// 将方法暴露
+defineExpose({ initData, saveFormRef });
+</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

@@ -0,0 +1,43 @@
+<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"
+					:currentPageData="currentPageData"
+					:configs="configs"
+					@refresh="reGetFormByMenuFn"
+				></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();
+
+let currentPageData = ref({});
+
+const { currentPage, onChangeSystem, menuData, changeNode, configs, reGetFormByMenuFn } = useForm(formRef, currentPageData);
+</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

@@ -0,0 +1,12 @@
+import { IFormTable } from '/@/types';
+// 定义菜单数据类型
+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

@@ -0,0 +1,164 @@
+{
+	"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": "string", "value": "string" },
+										{ "label": "number", "value": "number" },
+										{ "label": "boolean", "value": "boolean" }
+									]
+								},
+								{
+									"prop": "complexType",
+									"label": "复杂类型",
+									"clearable": true,
+									"tooltip": "复杂类型",
+									"el": "hs-select",
+									"cel": "hs-option",
+									"op": [
+										{ "label": "Array", "value": "Array" },
+										{ "label": "Object", "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

@@ -0,0 +1,136 @@
+import { ref, Ref } from 'vue';
+import { IFormTable } from '/@/types';
+import IMenuType from './menuType';
+import { useMenuController } from '/@/api/menuController';
+import { useFieldConfigController } from '/@/api/fieldConfigController/index';
+import { GetFieldByMenu } from '/@/api/fieldConfigController/type';
+import { Session } from '/@/utils';
+const menu = useMenuController();
+const fieldConfig = useFieldConfigController();
+interface FormRef {
+	initData: (configs: IFormTable.Data, panelConfigVal?: IFormTable.FormConfig) => {};
+	saveFormRef: any;
+}
+export function useForm(formRef: Ref<FormRef>, currentPageData: any) {
+	// 当前页面
+	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) => {
+		sysData.value = system;
+
+		// 清空配置数据
+		configs.value = {};
+		// 清空页面数据
+		currentPage.value = '';
+		currentPageData.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;
+		});
+	};
+	/**
+	 *
+	 * @param params
+	 * @returns
+	 * 获取页面表单配置数据
+	 */
+	const getFormByMenuFn = (params: any) => {
+		// 获取页面配置数据
+		fieldConfig.getFormByMenu<GetFieldByMenu>(params).then((res) => {
+			if (res.code != 1) return;
+			// 有配置数据
+			if (res.data.length > 0) {
+				// 整理返回的菜单数据
+				configs.value = res.data || [];
+				if (formRef.value) {
+					// 参数1: 配置数组 页面配置数据   系统配置数据
+					formRef.value.initData(configs.value);
+					formRef.value.saveFormRef.initConfig(res.data);
+				}
+			} else {
+				configs.value = [];
+				if (formRef.value) {
+					formRef.value.initData(configs.value);
+					formRef.value.saveFormRef.initConfig([]);
+				}
+			}
+		});
+	};
+	/**
+	 * 切换node节点
+	 * @param data
+	 */
+	const changeNode = (data: IMenuType.Menu) => {
+		// 判断菜单没发生变化 不做处理
+		if (currentPageData.value.id == data.id) return;
+		currentPage.value = data.value;
+		currentPageData.value = data;
+		let params = {
+			menu_id: data.id,
+			project_code: Session.get('CURRENT_SYSTEM').project_code,
+		};
+		getFormByMenuFn(params);
+	};
+	/**
+	 * 重新获取表单配置数据
+	 */
+	const reGetFormByMenuFn = () => {
+		let params = {
+			menu_id: currentPageData.value.id,
+			project_code: Session.get('CURRENT_SYSTEM').project_code,
+		};
+		getFormByMenuFn(params);
+	};
+
+	return {
+		currentPage,
+		onChangeSystem,
+		menuData,
+		changeNode,
+		currentPageData,
+		configs,
+		reGetFormByMenuFn,
+	};
+}