hs-admin-ui 1.0.0 → 1.0.2

package/src/views/test/test/default/baseFormConfig.ts

@@ -1,567 +0,0 @@
-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,
-};