hs-admin-ui 1.0.0

package/src/views/system/formSetting/components/hsTables/useAttrTable.ts

@@ -0,0 +1,125 @@
+import { ref, watch } from 'vue';
+import ComponentAttr from '/@/types/components';
+import { ElMessage } from 'element-plus';
+import IFormTable from '/@/types/formTable';
+import hsAttrTable from './src/hsAttrTable.vue';
+import { filterItemConfig } from '../../default/baseTableConfig';
+import _ from 'lodash';
+import { Ref } from 'vue';
+interface TableRef {
+	getSubmitData: () => boolean;
+}
+export function useHsAttrTable(props: ComponentAttr.Props<typeof hsAttrTable>, baseTableRef: Ref<TableRef>) {
+	// 原始数据
+	let oldItem = ref(props.current);
+	// 当前项绑定数据
+	let tableItemConfig = ref(_.cloneDeep(props.current));
+	let fieldList = ref(_.cloneDeep(props.configList).map((item: IFormTable.TableItem) => item.data.field));
+	/**
+	 * 监听当前项
+	 */
+	watch(
+		() => props.current,
+		(value) => {
+			// 解决切换不同表单项不及时更新数据问题
+			if (value.id != tableItemConfig.value.id) {
+				oldItem.value = value;
+				tableItemConfig.value = _.cloneDeep(value);
+				// (IFormTable.TableItem)
+				fieldList.value = _.cloneDeep(props.configList).map((item: IFormTable.TableItem) => item.data.field);
+
+				console.log('props.configList', props.configList, 'fieldList.value', fieldList.value);
+			}
+		},
+		{ deep: true }
+	);
+
+	// 表单配置项
+	const parentConfig = ref({
+		labelWidth: 150,
+		span: 24,
+		style: 'padding:5px 10px',
+	});
+	// 控制表单项属性的展开关闭
+	const visible = ref(false);
+	// 基本配置属性实例
+	/**
+	 * 保存功能
+	 */
+	const saveData = async function () {
+		try {
+			// 校验表单项属性
+			let flag = await baseTableRef.value.getSubmitData();
+			if (!flag) return;
+			// 将默认值根据key值赋值给data中
+			let oldKey = oldItem.value.data.field; // 表单项【old】key值
+			let newKey = tableItemConfig.value.data.field; // 表单项【new】key值
+			// 去除旧数据
+			let tempFieldList = _.cloneDeep(fieldList.value); //.findIndex((item: String) => item != oldKey);
+			let idx = tempFieldList.findIndex((item: String) => item == oldKey);
+			tempFieldList.splice(idx, 1);
+			// 如果修改过key后，修改后的key不能tableConfig 中的field重复
+			if (_.includes(tempFieldList, newKey)) {
+				return ElMessage.warning(`列字段名重复，请修改`);
+			}
+			// 保存表单配置
+			oldItem.value = Object.assign(oldItem.value, _.cloneDeep(tableItemConfig.value));
+		} catch (err) {
+			console.log('er', err);
+		}
+	};
+
+	/**
+	 * 追加筛选配置
+	 */
+	const addFilterItem = () => {
+		tableItemConfig.value?.data.filters?.push({ label: '', value: '', checked: false, resetValue: '', data: '' });
+		let tempFilterConfig = _.cloneDeep(filterItemConfig.value);
+		// console.log(tableItemConfig.value?.filterConfig);
+
+		tempFilterConfig.title = tempFilterConfig.title + ((tableItemConfig.value?.filterConfig || []).length + 1);
+		tableItemConfig.value?.filterConfig?.push(tempFilterConfig);
+	};
+
+	// ======================================================================== 自动完成 start ================================================================
+	interface RestaurantItem {
+		value: string;
+		link: string;
+	}
+	interface LinkItem {
+		value: string;
+		link: string;
+	}
+	const links = ref<LinkItem[]>([
+		{ value: 'vue', link: 'https://github.com/vuejs/vue' },
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' },
+	]);
+	let timeout: ReturnType<typeof setTimeout>;
+	const createFilter = (queryString: string) => {
+		return (restaurant: LinkItem) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
+		const results = queryString ? links.value.filter(createFilter(queryString)) : links.value;
+
+		clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			cb(results);
+		}, 3000 * Math.random());
+	};
+
+	const handleSelect = (item: RestaurantItem) => {
+		console.debug('handleSelect', item);
+		// tableItemConfig.value?.data
+	};
+	// ======================================================================== 自动完成 end ==================================================================
+
+	return { parentConfig, visible, tableItemConfig, querySearchAsync, handleSelect, addFilterItem, saveData };
+}

package/src/views/system/formSetting/components/hsTables/useTableConfigList.ts

@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import _ from 'lodash';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import IFormTable from '/@/types/formTable';
+import ComponentAttr from '/@/types/components';
+import { tableItemConfig, emptyTableItemData } from './../../default/baseTableConfig';
+import hsTableConfigList from './src/hsTableConfigList.vue';
+// import { Ref } from 'vue';
+export function useHsTableListConfig(
+	emit: (event: 'chose', ...args: any[]) => void,
+	prop: ComponentAttr.Props<typeof hsTableConfigList>,
+	tableModel: ComponentAttr.RecursivePartial<IFormTable.Table> = {
+		id: '',
+		baseData: { id: '' },
+		// tableData: [],
+		tableConfig: [],
+	}
+) {
+	/**
+	 * 选择配置项
+	 * @param item
+	 */
+	const choseTagItem = (item: IFormTable.TableItem) => {
+		// 获取操作项
+		let current = item.id == prop.current?.id ? _.cloneDeep(emptyTableItemData.value) : item;
+		emit('chose', current);
+	};
+
+	/**
+	 * 添加字段
+	 * @returns
+	 */
+	const appendField = () => {
+		// 用时间戳设置唯一id
+		let defaultItemConfig: IFormTable.TableItem = _.cloneDeep(tableItemConfig.value);
+		defaultItemConfig.id = new Date().getTime().toString();
+		// 校验字段名称是否重复
+		let labelIdx: number = tableModel.tableConfig!.findIndex((item) => item!.id == defaultItemConfig.id) || -1;
+		if (labelIdx > -1) return ElMessage.warning('字段名称重复');
+		// 追加字段配置项
+		tableModel.tableConfig!.push(defaultItemConfig);
+		// 获取新增的配置对象
+		let obj = tableModel.tableConfig![tableModel.tableConfig!.length - 1]; // || emptyTableItemData;
+		// 设置默认选中
+		choseTagItem(obj as IFormTable.TableItem);
+	};
+
+	/**
+	 * 删除配置
+	 * @param item
+	 */
+	const deleteTagItem = (item: IFormTable.TableItem) => {
+		ElMessageBox.confirm(`确定删除“${item['data'] && item['data']['title']}”字段吗？`, '提示', {
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning',
+		})
+			.then(() => {
+				// 获取被删除的配置所在id
+				_.remove(tableModel.tableConfig, item);
+				// 更新当前选中配置
+				choseTagItem(item);
+				// 给出操作成功提示
+				ElMessage.success('删除成功');
+			})
+			.catch((err) => {
+				console.log('err', err);
+			});
+	};
+
+	return {
+		choseTagItem,
+		appendField,
+		deleteTagItem,
+		// test
+	};
+}

package/src/views/system/formSetting/components/selectConfig/config.ts

@@ -0,0 +1,476 @@
+export const selectAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'selectAttrs',
+		tooltip: 'selectAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'string / number / boolean / object / array',
+				el: 'hs-input',
+			},
+			{
+				prop: 'options',
+				label: 'option配置数据',
+				tooltip: 'option配置数据',
+				type: 'string',
+				el: 'hs-input',
+				attrs: {
+					type: 'textarea',
+				},
+			},
+			{
+				prop: 'url',
+				label: 'url获取options',
+				tooltip: '通过url请求获取options配置项数据',
+				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: '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: 'groupAttrs',
+		label: 'optionGroupAttrs',
+		tooltip: 'optionGroupAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'isGroupEnabled',
+				label: '是否启用分组',
+				tooltip: '是否启用分组',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'label',
+				label: '分组的名称',
+				tooltip: '分组的名称',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用分组',
+				tooltip: '是否将该分组下所有选项置为禁用',
+				type: 'string',
+				el: 'hs-switch',
+			},
+		],
+	},
+	{
+		prop: 'optionAttrs',
+		label: 'optionAttrs',
+		tooltip: 'optionAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'value',
+				label: '选项的值',
+				tooltip: '选项的值',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'label',
+				label: '选项的标签',
+				tooltip: '选项的标签，若不设置则默认与value相同',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用选项',
+				tooltip: '是否禁用该选项',
+				type: 'string',
+				el: 'hs-switch',
+			},
+		],
+	},
+	{
+		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 selectAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		multiple: false, // 是否多选
+		disabled: false, // 是否禁用
+		'value-key': 'value', // value 唯一标识
+		clearable: true, // 是否可以清空
+		'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': 'CircleClose', // 清除图标
+		'fit-input-width': false, // 下拉框宽度
+		'suffix-icon': 'ArrowDown', // 后缀图标
+		'tag-type': 'info', // 标签类型
+		'validate-event': true, // 表单验证
+		placement: 'bottom-start', // 下拉框出现的位置
+		'max-collapse-tags': 1, // 需要显示的 Tag 的最大数量
+	},
+	groupAttrs: {
+		disabled: false, // 是否禁用分组
+		isGroupEnabled: false, // 是否启用分组
+	},
+	optionAttrs: {
+		value: 'value',
+		label: 'label',
+		disabled: false, // 是否禁用该选项
+	},
+	rules: {},
+};

package/src/views/system/formSetting/components/selectConfig/selectConfig.vue

@@ -0,0 +1,30 @@
+<template>
+	<div class="select-wrap">
+		<base-form v-model:data="data" :config="selectAttrConfig" :isVModel="isVModel" :lg="12"></base-form>
+	</div>
+</template>
+
+<script setup lang="ts" name="selectConfig">
+import baseForm from '/@/components/config/baseForm.vue';
+import { ref } from 'vue';
+import { selectAttrConfig, selectAttrConfigMap } 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, selectAttrConfigMap) : props.data);
+</script>
+
+<style scoped lang="scss">
+.select-wrap {
+	@apply p-[10px] h-full;
+}
+</style>