hs-admin-ui 1.0.0

package/src/components/config/baseForm.vue

@@ -0,0 +1,175 @@
+<template>
+	<div class="h-full" :class="{ 'overflow-y-auto': !isRecursive }">
+		<hs-form :model="formData" label-width="146px" label-position="right" ref="formRef">
+			<hs-row :gutter="0" justify="start" class="hs-row">
+				<hs-col
+					v-for="(item, index) in formConfig"
+					:key="index"
+					:xs="!isRecursive ? 24 : xs"
+					:sm="!isRecursive ? 24 : sm"
+					:md="!isRecursive ? 24 : md"
+					:lg="!isRecursive ? 24 : lg"
+					:xl="!isRecursive ? 24 : xl"
+					class="mb-[20px]"
+				>
+					<hs-form-item v-bind="item" v-if="item['el'] != 'title'">
+						<template #label>
+							<span class="text-[#606266]">&nbsp; {{ item['label'] }} &nbsp;</span>
+							<el-tooltip class="box-item" effect="dark" :content="item['tooltip'] || item['label']" placement="top">
+								<div>
+									<el-icon><ele-Warning /></el-icon>
+								</div>
+							</el-tooltip>
+						</template>
+						<component
+							:is="item['el']"
+							v-model="formData[item.prop]"
+							:clearable="item.clearable != false"
+							placeholder="请输入"
+							v-bind="item['attrs'] || {}"
+						>
+							<component
+								v-if="item['op']"
+								:is="item['cel']"
+								v-for="(value, idx) in item['op'] || []"
+								:key="idx"
+								:label="value['label']"
+								:value="value['value']"
+							></component>
+						</component>
+					</hs-form-item>
+					<div v-else>
+						<div class="mb-[10px]">
+							<hs-alert :title="item['label']" type="info" :closable="false" />
+						</div>
+						<base-form
+							:data="formData[item.prop]"
+							:config="item['children']"
+							:isRecursive="true"
+							v-if="item['children']"
+							:xs="xs"
+							:sm="sm"
+							:md="md"
+							:lg="lg"
+							:xl="xl"
+						></base-form>
+					</div>
+				</hs-col>
+			</hs-row>
+		</hs-form>
+		<footer class="flex justify-center align-middle mt-[10px]" v-if="!isRecursive && !isVModel">
+			<hs-button type="primary" @click="submitForm">保存</hs-button>
+		</footer>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { formConfigItemType } from '/@/components/config/type/formType';
+import type { FormInstance } from 'element-plus';
+import _ from 'lodash';
+const props = defineProps({
+	data: {
+		// 表单数据
+		type: Object,
+		default: () => {},
+	},
+	config: {
+		// 表单配置项
+		type: Array<formConfigItemType>,
+		default: () => [],
+	},
+	isRecursive: {
+		// 是否为递归
+		type: Boolean,
+		default: false,
+	},
+	isVModel: {
+		// 是否为v-model
+		type: Boolean,
+		default: false,
+	},
+	xs: {
+		type: Number,
+		default: 24,
+	},
+	sm: {
+		type: Number,
+		default: 24,
+	},
+	md: {
+		type: Number,
+		default: 24,
+	},
+	lg: {
+		type: Number,
+		default: 24,
+	},
+	xl: {
+		type: Number,
+		default: 24,
+	},
+});
+// 表单实例
+const formRef = ref<FormInstance>();
+// 保留原始数据
+const oldData = ref(props.data);
+// 表单数据
+// 克隆 props.data 用于表单数据
+let formData = ref(props.isRecursive || props.isVModel ? props.data : _.cloneDeep(props.data));
+// 配置项
+let formConfig = ref(props.config);
+/**
+ * 获取表单数据
+ */
+const submitForm = () => {
+	console.log('submitForm');
+	if (!formRef.value) return;
+	formRef.value.validate((valid) => {
+		if (valid) {
+			console.log('submit!', formData.value);
+			oldData.value = Object.assign(oldData.value, formData.value);
+		} else {
+			console.log('error submit!', formData.value);
+			return false;
+		}
+	});
+};
+/**
+ * 校验表单
+ */
+const validForm = () => {
+	return new Promise((resolve) => {
+		if (!formRef.value) {
+			resolve(false);
+			return;
+		}
+		formRef.value.validate((valid: 'undefined' | boolean) => {
+			if (valid) {
+				resolve(true);
+			} else {
+				resolve(false);
+			}
+		});
+	});
+};
+
+defineExpose({ validForm });
+</script>
+
+<style lang="scss" scoped>
+.hs-row {
+	:deep(.el-form-item) {
+		border: 1px solid #e7eaf2;
+		background-color: #f2f5f9;
+	}
+	:deep(.el-form-item__content) {
+		border-left: 1px solid #e7eaf2;
+		background-color: #fff;
+		.el-switch {
+			margin-left: 10px;
+		}
+	}
+}
+//
+</style>

package/src/components/config/buttonAttrConfig/buttonAttrConfig.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="p-[10px] h-full">
+		<base-form v-model:data="data" :config="buttonAttrConfig" :isVModel="isVModel"></base-form>
+	</div>
+</template>
+
+<script setup lang="ts" name="buttonAttrConfig">
+import baseForm from '../baseForm.vue';
+import { ref } from 'vue';
+import { buttonAttrConfig, buttonAttrConfigMap } from './config';
+import _ from 'lodash';
+const props = defineProps({
+	data: {
+		type: Object,
+		default: () => {},
+	},
+	isVModel: {
+		type: Boolean,
+		default: false,
+	},
+});
+// lodash判断对象是否为空
+const data = ref(_.isEmpty(props.data) ? Object.assign(props.data, _.cloneDeep(buttonAttrConfigMap)) : props.data);
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/config/buttonAttrConfig/config.ts

@@ -0,0 +1,261 @@
+export const buttonAttrConfig = [
+	{
+		prop: 'attrs',
+		label: '按钮属性',
+		tooltip: '按钮属性',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'operate',
+				label: '操作',
+				tooltip: '操作',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'query', value: 'query' },
+					{ label: 'reset', value: 'reset' },
+					{ label: 'add', value: 'add' },
+					{ label: 'edit', value: 'edit' },
+					{ label: 'delete', value: 'delete' },
+					{ label: 'export', value: 'export' },
+					{ label: 'import', value: 'import' },
+				],
+				cel: 'hs-option',
+				attrs: {
+					filterable: true,
+					'allow-create': true,
+					'default-first-option': true,
+				},
+			},
+			{
+				prop: 'type',
+				label: '类型',
+				tooltip: '类型',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'primary', value: 'primary' },
+					{ label: 'success', value: 'success' },
+					{ label: 'warning', value: 'warning' },
+					{ label: 'danger', value: 'danger' },
+					{ label: 'info', value: 'info' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'name',
+				label: '按钮文本内容',
+				tooltip: '按钮文本内容',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'disabled',
+				label: '按钮是否禁用',
+				tooltip: '按钮是否为禁用状态',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'size',
+				label: '尺寸',
+				tooltip: '尺寸',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'large', value: 'large' },
+					{ label: 'default', value: 'default' },
+					{ label: 'small', value: 'small' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'plain',
+				label: '是否为朴素按钮',
+				tooltip: '是否为朴素按钮',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'text',
+				label: '是否为文字按钮',
+				tooltip: '是否为文字按钮',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'bg',
+				label: '是否显示背景色',
+				tooltip: '是否显示文字按钮背景颜色',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'color',
+				label: '自定义颜色',
+				el: 'hs-color-picker',
+			},
+			{
+				prop: 'textColor',
+				label: '按钮文本色',
+				el: 'hs-color-picker',
+			},
+			{
+				prop: 'round',
+				label: '圆角按钮',
+				tooltip: '是否为圆角按钮',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'circle',
+				label: '圆形按钮',
+				tooltip: '是否为圆形按钮',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'fnName',
+				label: '方法名称',
+				el: 'hs-input',
+				attrs: {
+					type: 'textarea',
+				},
+			},
+			{
+				prop: 'loading',
+				label: '是否为加载中',
+				tooltip: '是否为加载中状态',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'loading-icon',
+				label: '加载中图标',
+				tooltip: '自定义加载中状态图标组件',
+				type: 'string / Component',
+				el: 'hs-input',
+			},
+			{
+				prop: 'icon',
+				label: '图标组件',
+				tooltip: '图标组件',
+				type: 'string / Component',
+				el: 'hs-input',
+			},
+			{
+				prop: 'link',
+				label: '链接按钮',
+				tooltip: '是否为链接按钮',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'autofocus',
+				label: 'autofocus',
+				tooltip: '原生 autofocus 属性',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'native-type',
+				label: '原生 type 属性',
+				tooltip: '原生 type 属性',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'button', value: 'button' },
+					{ label: 'submit', value: 'submit' },
+					{ label: 'reset', value: 'reset' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'auto-insert-space',
+				label: '自动插入空格',
+				tooltip: '自动在两个中文字符之间插入空格',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'dark',
+				label: 'dark 模式',
+				tooltip: 'dark 模式, 意味着自动设置 color 为 dark 模式的颜色',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'tag',
+				label: '自定义元素标签',
+				tooltip: '自定义元素标签',
+				type: 'string / Component',
+				el: 'hs-input',
+			},
+		],
+	},
+	{
+		prop: 'groupAttrs',
+		label: 'buttonGroupAttrs',
+		tooltip: 'buttonGroupAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'isGroupEnabled',
+				label: '是否启用分组',
+				tooltip: '是否启用分组',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'size',
+				label: '按钮组内按钮大小',
+				tooltip: '用于控制该按钮组内按钮的大小',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'large', value: 'large' },
+					{ label: 'default', value: 'default' },
+					{ label: 'small', value: 'small' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'type',
+				label: '按钮组内按钮类型',
+				tooltip: '用于控制该按钮组内按钮的类型',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'primary', value: 'primary' },
+					{ label: 'success', value: 'success' },
+					{ label: 'warning', value: 'warning' },
+					{ label: 'danger', value: 'danger' },
+					{ label: 'info', value: 'info' },
+				],
+				cel: 'hs-option',
+			},
+		],
+	},
+];
+
+export const buttonAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		size: 'small',
+		plain: false, // 是否为朴素按钮
+		text: false, // 是否为文字按钮
+		bg: false, // 是否显示背景色
+		link: false, // 是否为链接按钮
+		round: false, // 是否为圆角按钮
+		circle: false, // 是否为圆形按钮
+		loading: false, // 是否为加载中状态
+		'loading-icon': 'Loading', // 自定义加载中状态图标组件
+		autofocus: false, // 原生 autofocus 属性
+		'native-type': 'button', // 原生 type 属性
+		dark: false, // dark 模式, 意味着自动设置 color 为 dark 模式的颜色
+		tag: 'button', // 自定义元素标签
+	},
+	groupAttrs: {},
+};

package/src/components/config/cascaderAttrConfig/cascaderAttrConfig.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="p-[10px] h-full">
+		<base-form v-model:data="data" :config="cascaderAttrConfig" :isVModel="isVModel"></base-form>
+	</div>
+</template>
+
+<script setup lang="ts" name="cascaderAttrConfig">
+import baseForm from '../baseForm.vue';
+import { ref } from 'vue';
+import { cascaderAttrConfig, cascaderAttrConfigMap } from './config';
+import _ from 'lodash';
+const props = defineProps({
+	data: {
+		type: Object,
+		default: () => {},
+	},
+	isVModel: {
+		type: Boolean,
+		default: false,
+	},
+});
+// lodash判断对象是否为空
+const data = ref(_.isEmpty(props.data) ? Object.assign(props.data, _.cloneDeep(cascaderAttrConfigMap)) : props.data);
+</script>
+
+<style scoped lang="scss"></style>