hs-admin-ui 1.0.0

package/src/components/config/treeSelectAttrConfig/config.ts

@@ -0,0 +1,625 @@
+export const treeSelectAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'treeSelectAttrs',
+		tooltip: 'treeSelectAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'string / number / boolean / object / array',
+				el: 'hs-input',
+			},
+			{
+				prop: 'multiple',
+				label: '是否多选',
+				tooltip: '是否多选',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用',
+				tooltip: '是否禁用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'value-key',
+				label: 'value 唯一标识',
+				tooltip: '作为 value 唯一标识的键名，绑定值为对象类型时必填',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'placeholder',
+				label: '占位符',
+				tooltip: '占位符，默认为“Select”',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				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: 'clearable',
+				label: '是否可以清空',
+				tooltip: '是否可以清空选项',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'collapse-tags',
+				label: '值按文字展示',
+				tooltip: '多选时是否将选中值按文字的形式展示',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'collapse-tags-tooltip',
+				label: '是否显示所选',
+				tooltip: '当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'multiple-limit',
+				label: '最多可选数',
+				tooltip: 'multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制',
+				type: 'number',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'name',
+				label: '原生name属性',
+				tooltip: 'Select 输入框的原生 name 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'effect',
+				label: 'tooltip 主题',
+				tooltip: 'tooltip 主题，内置了 dark / light 两种',
+				type: 'enum / string',
+				el: 'hs-select',
+				op: [
+					{ label: 'dark', value: 'dark' },
+					{ label: 'light', value: 'light' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'autocomplete',
+				label: 'autocomplete',
+				tooltip: 'Select 输入框的原生 autocomplete 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'filterable',
+				label: '是否可筛选',
+				tooltip: 'Select 组件是否可筛选',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'allow-create',
+				label: '允许创建条目',
+				tooltip: '是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'filter-method',
+				label: '筛选方法',
+				tooltip: '自定义筛选方法',
+				type: 'Function',
+				el: 'hs-input',
+			},
+			{
+				prop: 'remote',
+				label: '是否远程加载',
+				tooltip: '其中的选项是否从服务器远程加载',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'remote-method',
+				label: '远程搜索方法',
+				tooltip: '自定义远程搜索方法',
+				type: 'Function',
+				el: 'hs-input',
+			},
+			{
+				prop: 'remote-show-suffix',
+				label: '远程搜索图标',
+				tooltip: '远程搜索方法显示后缀图标',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'loading',
+				label: '是否正在获取',
+				tooltip: '是否正在从远程获取数据',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'loading-text',
+				label: '加载时文本',
+				tooltip: '从服务器加载数据时显示的文本，默认为“Loading”',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'no-match-text',
+				label: '无匹配时显示',
+				tooltip: "搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置，默认是 “No matching data'”",
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'no-data-text',
+				label: '无选项时显示',
+				tooltip: '无选项时显示的文字，也可以使用 empty 插槽设置自定义内容，默认是 “No data”',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'popper-class',
+				label: '下拉菜单类名',
+				tooltip: '选择器下拉菜单的自定义类名',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'reserve-keyword',
+				label: '保留关键词',
+				tooltip: '当 multiple 和 filterable被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'default-first-option',
+				label: '回车选择',
+				tooltip: '是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'teleported',
+				label: '是否插入至body',
+				tooltip: '是否将下拉列表插入至 body 元素',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'persistent',
+				label: '选择器未被激活',
+				tooltip: '当下拉选择器未被激活并且persistent设置为false，选择器会被删除。',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'automatic-dropdown',
+				label: '自动弹出选项',
+				tooltip: '对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'clear-icon',
+				label: '清除图标',
+				tooltip: '自定义清除图标',
+				type: 'string / object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'fit-input-width',
+				label: '下拉框宽度',
+				tooltip: '下拉框的宽度是否与输入框相同',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'suffix-icon',
+				label: '后缀图标',
+				tooltip: '自定义后缀图标组件',
+				type: 'string / object',
+				el: 'hs-input',
+			},
+			{
+				prop: 'suffix-transition deprecated',
+				label: '下拉图标动画',
+				tooltip: '下拉菜单显示/消失时后缀图标的动画',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'tag-type',
+				label: '标签类型',
+				tooltip: '标签类型',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'success', value: 'success' },
+					{ label: 'info', value: 'info' },
+					{ label: 'warning', value: 'warning' },
+					{ label: 'danger', value: 'danger' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'validate-event',
+				label: '表单验证',
+				tooltip: '是否触发表单验证',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'placement',
+				label: '下拉框出现位置',
+				tooltip: '下拉框出现的位置',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'top', value: 'top' },
+					{ label: 'top-start', value: 'top-start' },
+					{ label: 'top-end', value: 'top-end' },
+					{ label: 'bottom', value: 'bottom' },
+					{ label: 'bottom-start', value: 'bottom-start' },
+					{ label: 'bottom-end', value: 'bottom-end' },
+					{ label: 'left', value: 'left' },
+					{ label: 'left-start', value: 'left-start' },
+					{ label: 'left-end', value: 'left-end' },
+					{ label: 'right', value: 'right' },
+					{ label: 'right-start', value: 'right-start' },
+					{ label: 'right-end', value: 'right-end' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'max-collapse-tags',
+				label: 'Tag最大数量',
+				tooltip: '需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。',
+				type: 'number',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'popper-options',
+				label: 'popper参数',
+				tooltip: 'popper.js 参数',
+				type: 'objectrefer to popper.js doc',
+				el: 'hs-input',
+			},
+			{
+				prop: 'aria-label',
+				label: 'aria-label',
+				tooltip: '等价于原生 input aria-label 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'treeAttrs',
+				label: 'treeAttrs',
+				tooltip: 'treeAttrs',
+				type: 'title',
+				el: 'title',
+			},
+			// tree属性
+			{
+				prop: 'data',
+				label: 'data展示数据',
+				tooltip: 'data展示数据',
+				type: 'string',
+				el: 'hs-input',
+				attrs: {
+					type: 'textarea',
+				},
+			},
+			{
+				prop: 'url',
+				label: 'url获取data数据',
+				tooltip: '通过url请求获取data展示数据',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'paramKey',
+				label: '请求参数key',
+				tooltip: '请求参数key',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'paramValue',
+				label: '请求参数Value',
+				tooltip: '请求参数Value',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'empty-text',
+				label: '内容为空时的文本',
+				tooltip: '内容为空的时候展示的文本',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'node-key',
+				label: '唯一标识',
+				tooltip: '每个树节点用来作为唯一标识的属性，整棵树应该是唯一的',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'props',
+				label: 'props 配置选项',
+				tooltip: '配置选项，具体看下表',
+				type: 'title',
+				el: 'title',
+				children: [
+					{
+						prop: 'label',
+						label: 'label',
+						tooltip: '指定节点标签为节点对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'children',
+						label: 'children',
+						tooltip: '指定子树为节点对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'disabled',
+						label: 'disabled',
+						tooltip: '指定节点选择框是否禁用为节点对象的某个属性值',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'isLeaf',
+						label: '是否为叶子节点',
+						tooltip: '指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效',
+						type: 'string',
+						el: 'hs-input',
+					},
+					{
+						prop: 'class',
+						label: '节点类名',
+						tooltip: '自定义节点类名',
+						type: 'string',
+						el: 'hs-input',
+					},
+				],
+			},
+			{
+				prop: 'render-after-expand',
+				label: '延迟渲染子节点',
+				tooltip: '是否在第一次展开某个树节点后才渲染其子节点',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'load',
+				label: 'load',
+				tooltip: '加载子树数据的方法，仅当 lazy 属性为true 时生效',
+				type: 'function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)',
+				el: 'hs-input',
+			},
+			{
+				prop: 'render-content',
+				label: '节点内容区的渲染',
+				tooltip: '树节点的内容区的渲染 Function',
+				type: 'Function(h, { node, data, store })',
+				el: 'hs-input',
+			},
+			{
+				prop: 'highlight-current',
+				label: '高亮当前选中节点',
+				tooltip: '是否高亮当前选中节点，默认值是 false。',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'default-expand-all',
+				label: '默认展开所有节点',
+				tooltip: '是否默认展开所有节点',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'expand-on-click-node',
+				label: '展开或收缩节点',
+				tooltip: '是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'check-on-click-node',
+				label: '点击节点选中节点',
+				tooltip: '是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'auto-expand-parent',
+				label: '自动展开父节点',
+				tooltip: '展开子节点的时候是否自动展开父节点',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'default-expanded-keys',
+				label: '默认展开数组',
+				tooltip: '默认展开的节点的 key 的数组',
+				type: 'array',
+				el: 'hs-input',
+			},
+			{
+				prop: 'show-checkbox',
+				label: '节点是否可被选择',
+				tooltip: '节点是否可被选择',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'check-strictly',
+				label: '父子不互相关联',
+				tooltip: '在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'default-checked-keys',
+				label: '默认勾选的数组',
+				tooltip: '默认勾选的节点的 key 的数组',
+				type: 'array',
+				el: 'hs-input',
+			},
+			{
+				prop: 'current-node-key',
+				label: '当前选中的节点',
+				tooltip: '当前选中的节点',
+				type: 'string / number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'filter-node-method',
+				label: '树节点的筛选方法',
+				tooltip: '对树节点进行筛选时执行的方法， 返回 false 则表示这个节点会被隐藏',
+				type: 'Function(value, data, node)',
+				el: 'hs-input',
+			},
+			{
+				prop: 'accordion',
+				label: 'accordion',
+				tooltip: '是否每次只打开一个同级树节点展开',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'indent',
+				label: '节点间的缩进',
+				tooltip: '相邻级节点间的水平缩进，单位为像素',
+				type: 'number',
+				el: 'hs-input',
+			},
+			{
+				prop: 'icon',
+				label: '树节点图标组件',
+				tooltip: '自定义树节点图标组件',
+				type: 'string | Component',
+				el: 'hs-input',
+			},
+			{
+				prop: 'lazy',
+				label: '是否懒加载子节点',
+				tooltip: '是否懒加载子节点，需与 load 方法结合使用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'draggable',
+				label: '开启拖拽功能',
+				tooltip: '是否开启拖拽节点功能',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'allow-drag',
+				label: '节点能否被拖拽',
+				tooltip: '判断节点能否被拖拽 如果返回 false ，节点不能被拖动',
+				type: 'Function(node)',
+				el: 'hs-input',
+			},
+			{
+				prop: 'allow-drop',
+				label: 'allow-drop',
+				tooltip:
+					"拖拽时判定目标节点能否成为拖动目标位置。 如果返回 false ，拖动节点不能被拖放到目标节点。 type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后",
+				type: 'Function(draggingNode, dropNode, type)',
+				el: 'hs-input',
+			},
+		],
+	},
+	{
+		prop: 'rules',
+		label: 'rules',
+		tooltip: 'rules',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'required',
+				label: '是否必填',
+				tooltip: '是否必填',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			// 必填项规则
+			{
+				prop: 'rules',
+				label: '必填项规则',
+				tooltip: '必填项规则',
+				type: 'array',
+				el: 'hs-input',
+				attrs: {
+					type: 'textarea',
+				},
+			},
+		],
+	},
+];
+export const treeSelectAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		size: 'small',
+		multiple: false, // 是否多选
+		disabled: false, // 是否禁用
+		'value-key': 'value', // value 唯一标识
+		clearable: false, // 是否可以清空
+		'collapse-tags': false, // 值按文字展示
+		'collapse-tags-tooltip': false, // 是否显示所选
+		'multiple-limit': 0, // 最多可选数
+		effect: 'light', // tooltip 主题
+		autocomplete: 'off', // autocomplete
+		filterable: true, // 是否可筛选
+		'allow-create': false, // 允许创建条目
+		remote: false, // 是否远程加载
+		'remote-show-suffix': false, // 远程搜索图标
+		loading: false, // 是否正在获取
+		'reserve-keyword': true, // 保留关键词
+		'default-first-option': false, // 是否在输入框按下回车时，选择第一个匹配项
+		teleported: true, // 是否插入至body
+		persistent: true, // 选择器未被激活
+		'automatic-dropdown': true, // 自动弹出选项
+		'clear-icon': '', // 清除图标
+		'fit-input-width': false, // 下拉框宽度
+		'suffix-icon': '', // 后缀图标
+		'tag-type': 'info', // 标签类型
+		'validate-event': true, // 表单验证
+		placement: 'bottom-start', // 下拉框出现的位置
+		'max-collapse-tags': 1, // 需要显示的 Tag 的最大数量
+		// tree属性
+		props: {}, // 配置选项
+		data: 'string=', // data展示数据
+	},
+	rules: {},
+};

package/src/components/config/treeSelectAttrConfig/treeSelectAttrConfig.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="p-[10px] h-full">
+		<base-form v-model:data="data" :config="treeSelectAttrConfig" :isVModel="isVModel"></base-form>
+	</div>
+</template>
+
+<script setup lang="ts" name="treeSelectAttrConfig">
+import baseForm from '../baseForm.vue';
+import { ref } from 'vue';
+import { treeSelectAttrConfig, treeSelectAttrConfigMap } 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(treeSelectAttrConfigMap)) : props.data);
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/config/type/formType.ts

@@ -0,0 +1,25 @@
+
+interface option {
+  label: string,
+  value: string
+}
+
+export interface formConfigItemType {
+  prop: string,
+  label: string,
+  tooltip?: string,
+  type?: string,
+  el: string,
+  op?: Array<option>,
+  cel?: string,
+  required?: boolean,
+  multiple?: boolean,
+  size?: string,
+  attrs?: any,
+  clearable?: boolean,
+  children?: Array<formConfigItemType>
+}
+
+
+
+