hs-admin-ui 1.0.0

package/src/views/system/formSetting/default/baseFormConfig.ts

@@ -0,0 +1,567 @@
+import { ref } from 'vue';
+import IFormTable from '/@/types/formTable';
+import ComponentAttr from '/@/types/components';
+
+let parentFormData = ref<IFormTable.FormBaseConfig>({
+	size: 'default',
+	rules: '', //  表单校验规则
+	labelWidth: '80', // 表单域标签的宽度
+	hideRequiredAsterisk: false, // 是否隐藏必填标识
+	showMessage: true, // 是否显示校验错误信息
+	inlineMessage: false, // 是否以行内展示校验信息
+	disabled: false, // 是否禁用该表单项
+	gutter: 10, // 栅格间隔
+	justify: 'start', // flex 布局下的水平排列方式
+	align: '', // flex 布局下的垂直排列方式
+	isSetDictDefaultValue: true, // 是否取字典项的默认值
+	isSupportShortcutKey: true, // 是否支持表单回车快捷功能
+	rowGap: 0, // 行间隔
+	columnGap: 0, // 列间隔
+});
+let parentFormConfig = ref<Array<ComponentAttr.RecursivePartial<IFormTable.FormItem>>>([
+	{ prop: 'rules', label: '表单验证规则', type: 'textarea', el: 'hs-input' },
+	{
+		prop: 'labelWidth',
+		label: '标签的宽度',
+		tooltip: '标签的长度，例如 "50px"。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。',
+		el: 'hs-input',
+	},
+	{
+		prop: 'hideRequiredAsterisk',
+		label: '是否隐藏必填标识',
+		tooltip: '是否隐藏必填字段标签旁边的红色星号。',
+		el: 'hs-switch',
+	},
+	{
+		prop: 'showMessage',
+		label: '是否显示校验错误信息',
+		tooltip: '是否显示校验错误信息',
+		el: 'hs-switch',
+	},
+	{
+		prop: 'size',
+		label: '表单项组件的尺寸',
+		el: 'hs-select',
+		tooltip: '用于控制该表单内组件的尺寸',
+		op: [
+			{ label: ' 大尺寸', value: 'large' },
+			{ label: '默认尺寸', value: 'default' },
+			{ label: '小尺寸', value: 'small' },
+		],
+		cel: 'hs-option',
+	},
+	{
+		prop: 'disabled',
+		label: '是否禁用表单项',
+		tooltip: '是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部组件的 disabled 属性',
+		el: 'hs-switch',
+	},
+	{
+		label: '是否取字典项的默认值',
+		prop: 'isSetDictDefaultValue',
+		el: 'hs-switch',
+		tooltip: '当校验有失败结果时，滚动到第一个失败的表单项目 可通过 scrollIntoView 配置',
+	},
+	{
+		label: '是否支持表单回车快捷功能',
+		prop: 'isSupportShortcutKey',
+		el: 'hs-switch',
+	},
+	{
+		label: '行间隔',
+		prop: 'rowGap',
+		type: 'number',
+		el: 'hs-input',
+	},
+	{
+		label: '列间隔',
+		prop: 'columnGap',
+		type: 'number',
+		el: 'hs-input',
+	},
+	{
+		label: '区域背景色',
+		prop: 'bg',
+		el: 'hs-color-picker',
+	},
+]);
+
+const configElList = ref([
+	{ 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' },
+]);
+const baseType = ref([
+	{ label: '字符串', value: 'string' },
+	{ label: '数字', value: 'number' },
+	{ label: '布尔', value: 'boolean' },
+]);
+const complexType = ref([
+	{ label: '数组', value: 'Array' },
+	{ label: '对象', value: 'Object' },
+]);
+
+interface CompConfigType {
+	/** 输入框 */
+	'hs-input': string;
+	/** 选择器 */
+	'hs-select': string;
+	/** 开关 */
+	'hs-switch': string;
+	/** 日期选择器 */
+	'hs-date-picker': string;
+	/** 按钮 */
+	'hs-button': string;
+	/** 自动补全 */
+	'hs-autocomplete': string;
+	/** 上传 */
+	'hs-upload': string;
+	/** 多选框 */
+	'hs-checkbox': string;
+	/** 单选框 */
+	'hs-radio': string;
+	/** 数字输入框 */
+	'hs-input-number': string;
+	/** 级联选择器 */
+	'hs-cascader-panel': string;
+	/** 树形选择 */
+	'hs-tree-select': string;
+}
+// CompConfigType
+const compConfig: Record<string, string> = {
+	'hs-input': 'hs-config-input',
+	'hs-select': 'hs-config-select',
+	'hs-switch': 'hs-config-switch',
+	'hs-date-picker': 'hs-config-date-picker',
+	'hs-button': 'hs-config-button',
+	'hs-autocomplete': 'hs-config-autocomplete',
+	'hs-upload': 'hs-config-upload',
+	'hs-checkbox': 'hs-config-checkbox',
+	'hs-radio': 'hs-config-radio',
+	'hs-input-number': 'hs-config-input-number',
+	'hs-cascader-panel': 'hs-config-cascader-panel',
+	'hs-tree-select': 'hs-config-tree-select',
+};
+// 表单项默认配置数据
+let formItemConfig = ref<ComponentAttr.RecursivePartial<IFormTable.ConfigItemType>>({
+	id: '',
+	// 配置绑定的值
+	data: {
+		baseData: {
+			label: '参数名称',
+			prop: '',
+			el: '', // 'hs-input',
+			isSlot: false,
+			isApply: true,
+			isShow: true,
+		},
+		elementItem: [
+			{
+				baseData: {
+					label: '参数名称',
+					prop: '',
+					el: '', // 'hs-input',
+					isSlot: false,
+					isApply: true,
+					isShow: true,
+				},
+				elData: {},
+			},
+		],
+		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: configElList.value,
+			},
+			{
+				prop: 'baseType',
+				label: '基础类型',
+				clearable: false,
+				tooltip: '基础类型',
+				el: 'hs-select',
+				cel: 'hs-option',
+				op: baseType.value,
+			},
+			{
+				prop: 'complexType',
+				label: '复杂类型',
+				clearable: true,
+				tooltip: '复杂类型',
+				el: 'hs-select',
+				cel: 'hs-option',
+				op: complexType.value,
+			},
+			{
+				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: '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: configElList.value,
+			},
+			{
+				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: [],
+	},
+});
+
+let emptyFormItemData = ref<ComponentAttr.RecursivePartial<IFormTable.ConfigItemType>>({
+	id: '',
+	// 配置绑定的值
+	data: {
+		layoutData: {},
+		defaultData: {},
+		elementItem: [
+			{
+				baseData: {},
+				elData: {},
+			},
+		],
+	},
+	// 配置
+	baseConfig: {
+		title: {
+			subTitle: '表单项属性',
+		},
+		visible: true,
+		list: [],
+	}, // [],
+	elConfig: {
+		title: {
+			subTitle: '元素项属性',
+		},
+		visible: true,
+		list: [],
+	},
+	layoutConfig: {
+		title: {
+			subTitle: '布局配置',
+		},
+		visible: false,
+		list: [],
+	},
+	defaultConfig: {
+		title: {
+			subTitle: '默认数据配置',
+		},
+		visible: false,
+		list: [],
+	},
+});
+
+let formTitleConfig = ref({
+	code: {
+		visible: false,
+		subTitle: '表单配置代码',
+		class: 'font-bold my-3',
+		iconSize: 20,
+	},
+	form: {
+		visible: true,
+		subTitle: '表单项配置',
+		class: 'font-bold my-3',
+		iconSize: 20,
+	},
+	formItem: {
+		visible: true,
+		subTitle: '表单元素配置项集合',
+		class: 'font-bold my-3',
+		iconSize: 20,
+	},
+	formExample: {
+		visible: false,
+		subTitle: '表单配置示例',
+		class: 'font-bold my-3',
+		iconSize: 20,
+	},
+	component: {
+		visible: true,
+		subTitle: '组件配置',
+		class: 'font-bold my-3',
+		iconSize: 20,
+	},
+	slot: {
+		visible: true,
+		subTitle: '插槽配置',
+		class: 'font-bold my-3',
+		iconSize: 20,
+	},
+	base: {
+		visible: true,
+		subTitle: '基础表单项配置',
+		class: 'font-bold my-3',
+		iconSize: 20,
+	},
+	baseForm: {
+		visible: true,
+		subTitle: '基础表单配置',
+		class: 'font-bold my-3',
+		iconSize: 20,
+	},
+});
+
+const formBaseRule = {
+	label: [{ required: false, message: '请输入参数名称' }],
+	prop: [{ required: false, message: '请输入查询参数' }],
+	el: [{ required: true, message: '请选择组件类型' }],
+	baseType: [{ required: true, message: '请选择基础类型' }],
+};
+const componentList = ref([
+	{ 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' },
+]);
+const parentComponentConfig = ref<Array<ComponentAttr.RecursivePartial<IFormTable.FormItem>>>([
+	{ prop: 'name', label: '选择组件', el: 'hs-select', op: componentList.value, cel: 'hs-option' },
+]);
+const parentSlotConfig = ref<Array<ComponentAttr.RecursivePartial<IFormTable.FormItem>>>([{ prop: 'name', label: '插槽名称', el: 'hs-input' }]);
+const parentBaseConfig = ref<Array<ComponentAttr.RecursivePartial<IFormTable.FormItem>>>([
+	{ prop: 'label', label: '表单标题', el: 'hs-input' },
+	{ prop: 'fieldID', label: '字段标识', el: 'hs-input' },
+	{ prop: 'grid', label: '栅格', el: 'hs-input', type: 'number' },
+]);
+const parentBaseFormConfig = ref<Array<ComponentAttr.RecursivePartial<IFormTable.FormItem>>>([
+	{
+		prop: 'labelWidth',
+		label: '标签的宽度',
+		tooltip: '标签的长度，例如 "50px"。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。',
+		el: 'hs-input',
+	},
+	{
+		prop: 'labelPosition',
+		label: '表单域标签的位置',
+		el: 'hs-select',
+		tooltip: '表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性',
+		required: false,
+		multiple: false,
+		op: [
+			{ label: ' 靠左', value: 'left' },
+			{ label: '靠右', value: 'right' },
+			{ label: '靠上', value: 'top' },
+		],
+		cel: 'hs-option',
+	},
+	{
+		prop: 'size',
+		label: '表单项组件的尺寸',
+		el: 'hs-select',
+		tooltip: '用于控制该表单内组件的尺寸',
+		op: [
+			{ label: ' 大尺寸', value: 'large' },
+			{ label: '默认尺寸', value: 'default' },
+			{ label: '小尺寸', value: 'small' },
+		],
+		cel: 'hs-option',
+	},
+	{
+		prop: 'labelSuffix',
+		label: '表单域标签的后缀',
+		tooltip: '表单域标签的后缀',
+		el: 'hs-input',
+	},
+	{
+		prop: 'requireAsteriskPosition',
+		label: '必填标识的位置',
+		tooltip: '星号的位置。',
+		el: 'hs-select',
+		op: [
+			{ label: ' 靠左', value: 'left' },
+			{ label: '靠右', value: 'right' },
+		],
+		cel: 'hs-option',
+	},
+	{
+		prop: 'statusIcon',
+		label: '是否框中显示校验反馈图标',
+		tooltip: '是否在输入框中显示校验结果反馈图标',
+		el: 'hs-switch',
+	},
+	{
+		prop: 'validateOnRuleChange',
+		label: '是否触发第一次验证',
+		tooltip: '是否在 rules 属性改变后立即触发一次验证',
+		el: 'hs-switch',
+	},
+	{
+		prop: 'scrollToError',
+		label: '滚动至首个校验失败的表单',
+		tooltip: '当校验失败时，滚动到第一个错误表单项',
+		el: 'hs-switch',
+	},
+]);
+const formItemChildConfig = {
+	baseData: {
+		label: '参数名称',
+		prop: '',
+		el: '', // 'hs-input',
+		isSlot: false,
+		isApply: true,
+		isShow: true,
+	},
+	elData: {},
+};
+
+export {
+	parentFormData,
+	parentFormConfig,
+	configElList,
+	compConfig,
+	formItemConfig,
+	emptyFormItemData,
+	formTitleConfig,
+	formBaseRule,
+	parentComponentConfig,
+	parentSlotConfig,
+	parentBaseConfig,
+	formItemChildConfig,
+	parentBaseFormConfig,
+};