hs-admin-ui 1.0.0

package/src/components/business/bcPageConfig/default/baseBtnConfig.ts

@@ -0,0 +1,256 @@
+// 按钮配置数据
+const data = {
+	name: '按钮名称',
+	key: '',
+	isApply: true, // 是否启用
+	isSlot: false, // 是否使用插槽
+	isShow: false, // 是否显示
+	// color: '', // 自定义颜色
+	// textColor: '', // 文本颜色
+	size: 'small', // 尺寸
+	btnIcon: '', // 按钮图标
+	type: 'primary', // 类型
+	plain: false, // 是否为朴素按钮
+	text: false, // 是否为文本按钮
+	bg: false, // 是否显示文字按钮背景颜色
+	link: false, // 是否为链接
+	round: false, // 是否为圆角按钮
+	circle: false, // 是否为圆形按钮
+	loading: false, // 是否为加载中状态
+	'loading-icon': 'Loading', // 自定义加载中状态图标组件
+	disabled: false, // 按钮是否为禁用状态
+	// icon: '', // 图标组件
+	autofocus: false, // 原生 autofocus 属性
+	'native-type': 'button',
+	// 'auto-insert-space':
+	// 'color':''
+	dark: false, // dark 模式
+	tag: 'button', //自定义元素标签
+};
+// 按钮配置表单校验
+const btnBaseRule = {
+	name: [{ required: true, message: '请输入按钮名称' }],
+	key: [{ required: true, message: '请输入按钮key值' }],
+};
+// 按钮数据配置
+const config = {
+	title: {
+		subTitle: '按钮配置',
+	},
+	visible: true,
+	list: [
+		{
+			prop: 'name',
+			label: '按钮名称',
+			el: 'hs-input',
+			slotValue: 'name',
+			tooltips: '按钮名称',
+		},
+		{
+			prop: 'key',
+			label: '按钮key值',
+			el: 'hs-input',
+			tooltips: '按钮key值',
+		},
+		{
+			prop: 'isApply',
+			label: '是否启用',
+			el: 'hs-switch',
+			tooltips: '是否启用',
+		},
+		{
+			prop: 'isSlot',
+			label: '插槽名称',
+			el: 'hs-switch',
+			tooltips: '是否自定义插槽， 如果用插槽则赋值，不用插槽则清空',
+		},
+		{
+			prop: 'isShow',
+			label: '是否显示',
+			el: 'hs-switch',
+			tooltips: '是否显示',
+		},
+		{
+			prop: 'color',
+			label: '自定义颜色',
+			el: 'hs-color-picker',
+			// slotValue: 'color',
+		},
+		{
+			prop: 'textColor',
+			label: '按钮文本色',
+			el: 'hs-color-picker',
+			// slotValue: 'textColor',
+		},
+		{
+			prop: 'btnIcon',
+			label: '按钮图标',
+			el: 'hs-input',
+			slotValue: 'btnIcon',
+		},
+		{
+			prop: 'iconPosition',
+			label: '图标位置',
+			el: 'hs-select',
+			cel: 'hs-option',
+			op: [
+				{ label: '左边', value: 'left' },
+				{ label: '右边', value: 'right' },
+			],
+		},
+		{
+			prop: 'fnName',
+			label: '方法名称',
+			el: 'hs-input',
+			type: 'textarea',
+		},
+		{
+			prop: 'size',
+			label: '尺寸',
+			el: 'hs-select',
+			cel: 'hs-option',
+			op: [
+				{ label: '大', value: 'large' },
+				{ label: '默认', value: 'default' },
+				{ label: '小', value: 'small' },
+			],
+			// tooltips: '',
+		},
+		{
+			prop: 'type',
+			label: '类型',
+			el: 'hs-select',
+			cel: 'hs-option',
+			op: [
+				{ label: 'primary', value: 'primary' },
+				{ label: 'success', value: 'success' },
+				{ label: 'warning', value: 'warning' },
+				{ label: 'danger', value: 'danger' },
+				{ label: 'info', value: 'info' },
+			],
+		},
+		{
+			prop: 'plain',
+			label: '朴素按钮',
+			el: 'hs-switch',
+			tooltips: '是否为朴素按钮',
+		},
+		{
+			prop: 'text',
+			label: '文字按钮',
+			el: 'hs-switch',
+			tooltips: '是否为文字按钮',
+		},
+		{
+			prop: 'bg',
+			label: '文字按钮背景颜色',
+			el: 'hs-switch',
+			tooltips: '是否显示文字按钮背景颜色',
+		},
+		{
+			prop: 'link',
+			label: '链接按钮',
+			el: 'hs-switch',
+			tooltips: '是否为链接按钮',
+		},
+		{
+			prop: 'round',
+			label: '圆角按钮',
+			el: 'hs-switch',
+			tooltips: '是否为圆角按钮',
+		},
+		{
+			prop: 'circle',
+			label: '圆形按钮',
+			el: 'hs-switch',
+			tooltips: '是否为圆形按钮',
+		},
+		{
+			prop: 'loading',
+			label: '加载状态',
+			el: 'hs-switch',
+			tooltips: '是否为加载中状态',
+		},
+		{
+			prop: 'loading-icon',
+			label: '加载状态图标',
+			el: 'hs-input',
+			tooltips: '自定义加载中状态图标组件',
+		},
+		{
+			prop: 'disabled',
+			label: '是否禁用',
+			el: 'hs-switch',
+			tooltips: '按钮是否为禁用状态',
+		},
+		{
+			prop: 'icon',
+			label: '图标组件',
+			el: 'hs-input',
+			tooltips: '图标组件',
+		},
+		{
+			prop: 'autofocus',
+			label: '自动聚焦',
+			el: 'hs-switch',
+			tooltips: '原生 autofocus 属性',
+		},
+		{
+			prop: 'native-type',
+			label: '原生 type 属性',
+			el: 'hs-select',
+			cel: 'hs-option',
+			op: [
+				{ label: '按钮', value: 'button' },
+				{ label: '提交', value: 'submit' },
+				{ label: '重置', value: 'reset' },
+			],
+			tooltips: '原生 type 属性',
+		},
+		{
+			prop: 'auto-insert-space',
+			label: '中文字符之间插入空格',
+			el: 'hs-switch',
+			tooltips: '自动在两个中文字符之间插入空格',
+		},
+		{
+			prop: 'color',
+			label: '按钮颜色',
+			el: 'hs-input',
+			tooltips: '自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色',
+		},
+		{
+			prop: 'dark',
+			label: 'dark 模式',
+			el: 'hs-switch',
+			tooltips: 'dark 模式, 意味着自动设置 color 为 dark 模式的颜色',
+		},
+		{
+			prop: 'tag',
+			label: '自定义元素标签',
+			el: 'hs-input',
+			tooltips: '自定义元素标签',
+		},
+	],
+	rules: btnBaseRule, // btnBaseRule,
+};
+// 默认按钮配置
+const btnItemConfig = {
+	id: '',
+	data: data,
+	// config: config,
+};
+// 空配置
+const emptyBtnItemData = {
+	id: '',
+	data: {},
+	config: {
+		title: {
+			subTitle: '按钮配置',
+		},
+		visible: false,
+		list: [],
+	},
+};
+
+export { btnItemConfig, emptyBtnItemData, btnBaseRule, data, config };

package/src/components/business/bcPageConfig/default/baseFormConfig.ts

@@ -0,0 +1,380 @@
+import { ref } from 'vue';
+import IFormTable from '/@/types/formTable';
+import ComponentAttr from '/@/types/components';
+import { inputAttrConfigMap } from '/@/components/config/inputAttrConfig/config';
+
+// 表单配置数据
+let parentFormData: IFormTable.FormBaseConfig = {
+	size: 'default',
+	rules: '', //  表单校验规则
+	inline: true, // 行内表单模式
+	labelPosition: 'left', // 表单域标签的位置
+	labelWidth: '80', // 表单域标签的宽度
+	labelSuffix: '', // 表单域标签的后缀
+	hideRequiredAsterisk: false, // 是否隐藏必填标识
+	requireAsteriskPosition: 'left', // 必填标识的位置
+	showMessage: true, // 是否显示校验错误信息
+	inlineMessage: false, // 是否以行内展示校验信息
+	statusIcon: false, // 是否框中显示校验反馈图标
+	validateOnRuleChange: true, // 是否触发第一次验证
+	disabled: false, // 是否禁用该表单项
+	scrollToError: false, // 滚动至首个校验失败的表单
+	gutter: 10, // 栅格间隔
+	justify: 'start', // flex 布局下的水平排列方式
+	align: '', // flex 布局下的垂直排列方式
+	isSetDictDefaultValue: true, // 是否取字典项的默认值
+	isSupportShortcutKey: true, // 是否支持表单回车快捷功能
+	submitUrl: '1', // 提交表单的请求api
+	submitSuccessMsg: '1', // 表单提交成功的提示信息
+};
+// 表单配置结构
+let parentFormConfig: Array<ComponentAttr.RecursivePartial<IFormTable.FormItem>> = [
+	{ prop: 'rules', label: '表单验证规则', type: 'textarea', el: 'hs-input' },
+	{ prop: 'inline', label: '行内表单模式', el: 'hs-switch' },
+	{
+		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: 'labelWidth',
+		label: '标签的宽度',
+		tooltip: '标签的长度，例如 "50px"。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。',
+		el: 'hs-input',
+	},
+	{
+		prop: 'labelSuffix',
+		label: '表单域标签的后缀',
+		tooltip: '表单域标签的后缀',
+		el: 'hs-input',
+	},
+	{
+		prop: 'hideRequiredAsterisk',
+		label: '是否隐藏必填标识',
+		tooltip: '是否隐藏必填字段标签旁边的红色星号。',
+		el: 'hs-switch',
+	},
+	{
+		prop: 'requireAsteriskPosition',
+		label: '必填标识的位置',
+		tooltip: '星号的位置。',
+		el: 'hs-select',
+		op: [
+			{ label: ' 靠左', value: 'left' },
+			{ label: '靠右', value: 'right' },
+		],
+		cel: 'hs-option',
+	},
+	{
+		prop: 'showMessage',
+		label: '是否显示校验错误信息',
+		tooltip: '是否显示校验错误信息',
+		el: 'hs-switch',
+	},
+	{
+		prop: 'inlineMessage',
+		label: '是否以行内形式展示校验信息',
+		tooltip: '是否以行内形式展示校验信息',
+		el: 'hs-switch',
+	},
+	{
+		prop: 'statusIcon',
+		label: '是否框中显示校验反馈图标',
+		tooltip: '是否在输入框中显示校验结果反馈图标',
+		el: 'hs-switch',
+	},
+	{
+		prop: 'validateOnRuleChange',
+		label: '是否触发第一次验证',
+		tooltip: '是否在 rules 属性改变后立即触发一次验证',
+		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',
+	},
+	{
+		prop: 'scrollToError',
+		label: '滚动至首个校验失败的表单',
+		tooltip: '当校验失败时，滚动到第一个错误表单项',
+		el: 'hs-switch',
+	},
+	{
+		label: '是否取字典项的默认值',
+		prop: 'isSetDictDefaultValue',
+		el: 'hs-switch',
+		tooltip: '当校验有失败结果时，滚动到第一个失败的表单项目 可通过 scrollIntoView 配置',
+	},
+	{
+		label: '是否支持表单回车快捷功能',
+		prop: 'isSupportShortcutKey',
+		el: 'hs-switch',
+	},
+	{
+		label: '栅格间隔',
+		prop: 'gutter',
+		type: 'number',
+		el: 'hs-input',
+	},
+	{
+		label: '盒子布局下的水平排列方式',
+		prop: 'justify',
+		el: 'hs-select',
+		tooltip: 'flex 布局下的水平排列方式',
+		op: [
+			{ label: '从起始方向排列', value: 'start' },
+			{ label: '从末尾方向排列', value: 'end' },
+			{ label: '居中', value: 'center' },
+			{ label: '两端对齐均匀分布', value: 'space-between' },
+			{ label: '两端是中间间隔的一半均匀分布', value: 'space-around' },
+			{ label: '间隔相等均匀分布', value: 'space-evenly' },
+		],
+		cel: 'hs-option',
+	},
+	{
+		label: '盒子布局下的垂直排列方式',
+		prop: 'align',
+		el: 'hs-select',
+		tooltip: 'flex 布局下的垂直排列方式',
+		op: [
+			{ label: '自上而下', value: 'top' },
+			{ label: '居中', value: 'middle' },
+			{ label: '自下而上', value: 'bottom' },
+		],
+		cel: 'hs-option',
+	},
+	{
+		label: '自定义元素标签',
+		prop: 'tag',
+		el: 'hs-input',
+	},
+	{
+		label: '提交表单的请求api',
+		prop: 'submitUrl',
+		el: 'hs-input',
+	},
+	{
+		label: '表单提交成功的提示信息',
+		prop: 'submitSuccessMsg',
+		el: 'hs-input',
+	},
+];
+// 组件选择配置
+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' },
+]);
+
+// 组件字典类型
+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;
+}
+// 组件字典
+const compConfig: CompConfigType = {
+	'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',
+};
+// 表单项属性校验规则
+const formBaseRule: IFormTable.Data = {
+	label: [{ required: true, message: '请输入参数名称' }],
+	prop: [{ required: true, message: '请输入查询参数' }],
+	el: [{ required: true, message: '请选择组件类型' }],
+};
+// 表单项默认配置数据
+let formItemConfig = ref<ComponentAttr.RecursivePartial<IFormTable.ConfigItemType>>({
+	id: '',
+	// 配置绑定的值
+	data: {
+		baseData: {
+			label: '参数名称',
+			prop: '',
+			el: 'hs-input',
+			isSlot: false,
+			isApply: true,
+			isShow: true,
+		},
+		elData: inputAttrConfigMap,
+	},
+});
+let config = {
+	// 配置
+	baseConfig: {
+		title: {
+			subTitle: '表单项属性',
+		},
+		visible: true,
+		list: [
+			{
+				prop: 'label',
+				label: '参数名称',
+				el: 'hs-input',
+				slotValue: 'label',
+			},
+			{
+				prop: 'prop',
+				label: '查询参数',
+				el: 'hs-input',
+			},
+			{
+				prop: 'el',
+				label: '组件类型',
+				clearable: false,
+				tooltip: '下拉选择组件类型，组件类型取自配置文件',
+				el: 'hs-select',
+				cel: 'hs-option',
+				op: configElList.value,
+			},
+			{
+				prop: 'label-width',
+				label: '标签宽度',
+				el: 'hs-input',
+			},
+			{
+				prop: 'isSlot',
+				label: '是否自定义插槽',
+				el: 'hs-switch',
+				tooltip: '下拉选择，自定义模板，选择的名称就是模板名称',
+			},
+			{
+				prop: 'isApply',
+				label: '是否启用',
+				tooltip: '是否启用该表单项',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'isShow',
+				label: '是否显示该表单项',
+				el: 'hs-switch',
+			},
+		],
+		rules: formBaseRule,
+	},
+	elConfig: {
+		title: {
+			subTitle: '元素项属性',
+		},
+		visible: true,
+		list: [],
+	},
+};
+
+let emptyFormItemData = ref<ComponentAttr.RecursivePartial<IFormTable.ConfigItemType>>({
+	id: '',
+	// 配置绑定的值
+	data: {
+		baseData: {},
+		elData: {
+			// hs-input组件属性
+		},
+	},
+	// 配置
+	baseConfig: {
+		title: {
+			subTitle: '表单项属性',
+		},
+		visible: true,
+		list: [],
+	}, // [],
+	elConfig: {
+		title: {
+			subTitle: '元素项属性',
+		},
+		visible: true,
+		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,
+	},
+});
+
+export { parentFormData, parentFormConfig, configElList, compConfig, formItemConfig, emptyFormItemData, formTitleConfig, config };