hs-admin-ui 1.0.0 → 1.0.3

package/src/components/business/bcPageConfig/components/hsTables/src/hsTableConfigList.vue

@@ -1,46 +0,0 @@
-<!-- 
-  desc: 表单配置项集合
-  author: lvling
- -->
-<template>
-	<div>
-		<div class="flex flex-wrap">
-			<div class="p-2 relative" v-for="(item, index) in tableModel?.tableConfig" :key="index" @click="choseTagItem(item)">
-				<div class="border border-solid border-zinc-300 hover:bg-blue-200 p-2 rounded" :class="current['id'] == item['id'] ? 'bg-blue-200' : ''">
-					{{ (item['data'] && item['data']['title']) || (item['data']['type'] && tableItemType[item['data']['type']]) || '' }}
-				</div>
-				<div
-					v-if="current['id'] == item['id']"
-					@click.stop.prevent="deleteTagItem(item)"
-					style="position: absolute; top: 0px; right: 5px; cursor: pointer"
-				>
-					✖️
-				</div>
-			</div>
-			<div class="p-2">
-				<div @click="appendField" class="p-2 bg-pink-200 w-10 h-10 flex justify-center align-center rounded-full">+</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { PropType, defineModel } from 'vue';
-import { useHsTableListConfig } from './../useTableConfigList';
-import { tableItemType } from './../../../default/baseTableConfig';
-import IFormTable from '/@/types/formTable';
-
-const emit = defineEmits(['chose']);
-
-const tableModel = defineModel<IFormTable.Table>();
-const prop = defineProps({
-	current: {
-		type: Object as PropType<Record<'id', string>>,
-		default: () => {},
-	},
-});
-
-const { appendField, deleteTagItem, choseTagItem } = useHsTableListConfig(emit, prop, tableModel.value);
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/business/bcPageConfig/components/hsTables/src/hsTablePanel.vue

@@ -1,68 +0,0 @@
-<!-- 
-  desc: 配置表格面板
-  author: 吕玲
- -->
-<template>
-	<div class="mx-auto flex flex-row h-full">
-		<div class="flex-1 grow overflow-y-auto">
-			<component :is="hsExpand" v-model="titleTableConfig.code.visible" :expandConfig="titleTableConfig.code"></component>
-			<div v-if="titleTableConfig.code.visible">{{ tableModel }}</div>
-			<component :is="hsTableParse" v-model="tableModel" />
-			<template v-if="tableModel?.baseData.id">
-				<component :is="hsExpand" v-model="titleTableConfig.table.visible" :expandConfig="titleTableConfig.table"></component>
-				<component :is="hsTableConfig" v-if="titleTableConfig.table.visible" v-model="tableModel" :config="baseParentConfig" />
-
-				<component :is="hsExpand" v-model="titleTableConfig.tableItem.visible" :expandConfig="titleTableConfig.tableItem"></component>
-				<component
-					:is="hsTableConfigList"
-					v-if="titleTableConfig.tableItem.visible"
-					v-model="tableModel"
-					:current="currentItem"
-					@chose="onChoseItem"
-				/>
-			</template>
-		</div>
-		<div v-if="(tableModel?.tableConfig || []).length > 0 && currentItem.id" class="flex-none basis-1/4 ml-4">
-			<component :is="hsAttrTable" :current="currentItem" :configList="tableModel?.tableConfig" />
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, defineModel } from 'vue';
-import hsAttrTable from './hsAttrTable.vue'; // 元素配置配置详情
-import hsTableParse from './hsTableParse.vue'; // 一键解析
-import hsTableConfig from './hsTableConfig.vue'; // 表格配置项
-import hsTableConfigList from './hsTableConfigList.vue'; // 表格元素配置项集合
-import IFormTable from '/@/types/formTable';
-//
-import { tableTitleConfig, emptyTableItemData, baseConfig } from '../../../default/baseTableConfig'; // 表格配置数据
-import hsExpand from '../../hsExpand/src/hsExpand.vue';
-import _ from 'lodash';
-// 标题配置
-let titleTableConfig = ref(_.cloneDeep(tableTitleConfig.value));
-// 表格配置
-const tableModel = defineModel<IFormTable.Table>();
-const baseParentConfig = ref(_.cloneDeep(baseConfig));
-// 当前选中项配置
-let currentItem = _.cloneDeep(emptyTableItemData);
-let oldId = ref<string>('');
-
-watch(
-	() => tableModel.value,
-	(value) => {
-		if (oldId.value != value?.id) {
-			currentItem.value = _.cloneDeep(emptyTableItemData);
-			oldId.value = value?.id || '';
-		}
-	},
-	{
-		immediate: true,
-	}
-);
-const onChoseItem = (item: IFormTable.TableItem) => {
-	currentItem.value = item;
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/business/bcPageConfig/components/hsTables/src/hsTableParse.vue

@@ -1,24 +0,0 @@
-<!-- 
-  desc: 通过查询类名解析表格配置
-  author: 吕玲
- -->
-<template>
-	<div class="flex flex-row">
-		<hs-input class="basis-1/4 mr-2" v-model="parseApi" placeholder="请输入解析接口" />
-		<hs-button @click="parseTable" type="primary">{{ parseApi ? '一键解析' : '初始化配置' }}</hs-button>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref, defineModel } from 'vue';
-import _ from 'lodash';
-import { useHsTableParse } from '../useTableParse';
-import IFormTable from '/@/types/formTable';
-
-let parseApi = ref('');
-let tableModel = defineModel<IFormTable.Table>();
-
-const { parseTable } = useHsTableParse(parseApi, tableModel);
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/business/bcPageConfig/components/hsTables/useAttrTable.ts

@@ -1,218 +0,0 @@
-import { ref, watch } from 'vue';
-import ComponentAttr from '/@/types/components';
-import { ElMessageBox, ElMessage } from 'element-plus';
-import IFormTable from '/@/types/formTable';
-import hsAttrTable from './src/hsAttrTable.vue';
-import { filterItemConfig, tableConfig, tableColumnRule } from '../../default/baseTableConfig';
-import { data } from '../../default/baseBtnConfig';
-
-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 tableDataConfig = ref(_.cloneDeep(tableConfig));
-
-	// 当前项绑定数据
-	let tableItemConfig = ref(_.cloneDeep(props.current));
-	let fieldList = ref(_.cloneDeep(props.configList).map((item: IFormTable.TableItem) => item.data.field));
-
-	/**
-	 * 根据类型判断标题和字段名是否必填
-	 * @returns
-	 */
-	const configurationRule = () => {
-		// 获取配置规则数据
-		let rules: Record<string, IFormTable.Data> = _.cloneDeep(tableColumnRule);
-		// 获取配置规则的key值并遍历
-		_.keys(rules).forEach((key: string) => {
-			// 根据列类型的值判断是否必填，返回key的规则校验数据
-			let arr = rules[key].map((item: Record<'required', boolean>) => {
-				item.required = !tableItemConfig.value.data.type;
-				return item;
-			});
-			// 替换修改后的规则
-			rules[key] = arr;
-		});
-		return rules;
-	};
-	/**
-	 * 监听当前项
-	 */
-	watch(
-		() => props.current,
-		(value: Record<string, IFormTable.Data> | undefined) => {
-			// 解决切换不同表单项不及时更新数据问题
-			if (value && 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);
-				// 更新表单校验规则
-				tableDataConfig.value.rules.list = configurationRule();
-			}
-		},
-		{ 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 (newKey && _.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);
-		// 项筛选配置数组中追加配置
-		// tableItemConfig.value?.filterConfig.push(tempFilterConfig);
-	};
-	/**
-	 * 删除数据筛选配置和数据
-	 * @param index 当前删除项所在的下标
-	 */
-	const deleteFilterConfig = (index: number) => {
-		// 获取筛选条件对象
-		let filterData = tableItemConfig.value.data.filters[index];
-		ElMessageBox.confirm(`确认要删除该${filterData.label}配置吗？`, '提示', {
-			confirmButtonText: '确认',
-			cancelButtonText: '取消',
-			type: 'warning',
-		})
-			.then(() => {
-				// 删除对应的data数据
-				tableItemConfig.value.data.filters.splice(index, 1);
-				// 删除配置数据
-				tableItemConfig.value.filterConfig.splice(index, 1);
-				ElMessage.success('删除成功');
-			})
-			.catch((err) => {
-				console.log('err', err);
-			});
-	};
-
-	/**
-	 * 切换列类型
-	 * @param value
-	 * @param prop
-	 */
-	const onChange = (value: string, prop: string) => {
-		if (prop == 'type') {
-			// 切换表单项列的类型时，根据type的是否存在值 规定校验规则
-			tableDataConfig.value.rules.list = configurationRule();
-		}
-	};
-	// =================================================== 按钮配置 start ================================================
-
-	/**
-	 * 增加按钮配置
-	 */
-	const addBtnItem = () => {
-		console.log('tableItemConfig.value', tableItemConfig.value);
-		// 追加按钮配置数据
-		tableItemConfig.value.btnData.push(_.cloneDeep(data));
-		// 按钮配置赋值
-		// let tempConfig = _.cloneDeep(config);
-		// 清空按钮配置校验规则
-		// tempConfig.rules = {};
-		// 追加按钮配置
-		// tableItemConfig.value.btnConfig.push(_.cloneDeep(tempConfig));
-	};
-	/**
-	 * 删除按钮配置
-	 * @param index
-	 */
-	const deleteBtnItem = (index: number) => {
-		// 获取按钮数据对象
-		let btnData = tableItemConfig.value.btnData[index];
-		console.log('btnData', btnData);
-
-		// 二次确认弹窗
-		ElMessageBox.confirm(`确认要删除该${btnData.name ? '【' + btnData.name + '】' : ''}按钮配置吗？`, '提示', {
-			confirmButtonText: '确认',
-			cancelButtonText: '取消',
-			type: 'warning',
-		})
-			.then(() => {
-				// 删除对应的data数据
-				tableItemConfig.value.btnData.splice(index, 1);
-				// 删除配置数据
-				// tableItemConfig.value.btnConfig.splice(index, 1);
-				// 给出操作提示
-				ElMessage.success('删除成功');
-			})
-			.catch((err) => {
-				console.log('err', err);
-			});
-	};
-	// =================================================== 按钮配置 end ================================================
-
-	// ======================================================================== 自动完成 start ================================================================
-	interface RestaurantItem {
-		field_code: string;
-		field_name: string;
-	}
-	/**
-	 * 自动完成回调
-	 * @param item
-	 */
-	const onChangeItem = (item: RestaurantItem) => {
-		tableItemConfig.value.data.title = item.field_name;
-		tableItemConfig.value.data.field = item.field_code;
-	};
-
-	// ======================================================================== 自动完成 end ==================================================================
-
-	return {
-		parentConfig,
-		visible,
-		tableItemConfig,
-		tableDataConfig,
-		onChangeItem,
-		saveData,
-		onChange,
-		// 过滤条件
-		addFilterItem,
-		deleteFilterConfig,
-		// 按钮
-		addBtnItem,
-		deleteBtnItem,
-	};
-}

package/src/components/business/bcPageConfig/components/hsTables/useTableConfigList.ts

@@ -1,77 +0,0 @@
-/* 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';
-
-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/components/business/bcPageConfig/components/hsTables/useTableParse.ts

@@ -1,78 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import IFormTable from '/@/types/formTable';
-import { Ref, ref } from 'vue';
-import { baseData, tableItemConfig, fieldList } from '../../default/baseTableConfig'; // 表单配置方法
-import _ from 'lodash';
-
-export function useHsTableParse(parseApi: Ref<string>, tableModel: Ref<IFormTable.Table | undefined>) {
-	/**
-	 * 初始化表格配置
-	 */
-	const initTableConfig = () => {
-		// 获取表格配置列基础配置
-		let seq_config = _.cloneDeep(tableItemConfig.value);
-		// 修改表格配置列的id
-		seq_config.id = new Date().getTime().toString();
-		// 将第一个表格列设置为序号
-		seq_config.data = _.assign(seq_config.data, {
-			type: 'seq',
-			title: '',
-		});
-		// seq_config.rules = {};
-		// 初始化表格配置数据
-		_.assign(tableModel.value, {
-			// 表格配置数据
-			baseData: _.assign(_.cloneDeep(baseData.value), { id: new Date().getTime().toString(), tableName: '表格配置名称' }),
-			// baseConfig: _.cloneDeep(baseConfig), // 表格配置
-			tableConfig: [seq_config],
-		});
-	};
-	interface Column {
-		field: string;
-		title: string;
-	}
-	/**
-	 * 一键解析表格
-	 * @returns
-	 */
-	const parseTable = () => {
-		if (parseApi.value) {
-			let list = _.cloneDeep(fieldList);
-			if (list.length > 0) {
-				if (!tableModel.value?.baseData.id) {
-					// 初始化配置
-					initTableConfig();
-				}
-
-				// 遍历表格所有列，过滤重复数据并向表格配置列中追加数据
-				list.forEach((column: Column) => {
-					// 获取表格配置项的field数组
-					let keys = _.map(tableModel.value?.tableConfig, (item: IFormTable.TableItem) => item.data.field);
-					// console.log('keys', keys, _.includes(keys, column.field));
-
-					// 判断是否存在重复的field
-					if (!_.includes(keys, column.field)) {
-						// 拷贝出默认配置
-						let column_config = _.cloneDeep(tableItemConfig.value);
-						// 更新配置的id title field 和组件el
-						column_config.id = column.field + new Date().getTime().toString();
-						column_config.data.field = column.field;
-						column_config.data.title = column.title || '展示列名称';
-						// 项表格配置中追加列配置
-						tableModel.value?.tableConfig.push(column_config);
-						// console.log('tableModel', tableModel.value, column_config);
-					}
-				});
-				return;
-			}
-		}
-		// 判断是否存在表格id,如果没有默认初始化配置
-		if (!tableModel.value?.baseData.id) {
-			// 初始化配置
-			initTableConfig();
-		}
-	};
-	return {
-		parseTable,
-	};
-}