hs-admin-ui 1.0.0

package/src/views/system/formSetting/components/hsForm/useAttrForm.ts

@@ -0,0 +1,109 @@
+import { ref, Ref, watch } from 'vue';
+import ComponentAttr from '/@/types/components';
+import hsAttrForm from './src/hsAttrForm.vue';
+import { ElMessage } from 'element-plus';
+import { compConfig, formItemChildConfig } from './../../default/baseFormConfig';
+
+interface BaseConfigRef {
+	getSubmitData: () => boolean;
+}
+import _ from 'lodash';
+export function useHsAttrForm(props: ComponentAttr.Props<typeof hsAttrForm>, baseConfigRef: any) {
+	console.log('baseConfigRef===>>>>', baseConfigRef);
+	// 原始数据
+	let oldItem = ref(props.current);
+	// 当前项绑定数据
+	let formItemConfig = ref(_.cloneDeep(props.current));
+	let formData = ref(props.data);
+	/**
+	 * 监听当前项
+	 */
+	watch(
+		() => props.current,
+		(value) => {
+			// 解决切换不同表单项不及时更新数据问题
+			if (value.id != formItemConfig.value.id) {
+				// console.log('value.id=====>>>>>>>', value.id, formItemConfig.value.id);
+				value.elConfig.visible = false;
+				oldItem.value = value;
+				formItemConfig.value = _.cloneDeep(value);
+				formData.value = props.data;
+			}
+		},
+		{ deep: true }
+	);
+
+	// 表单配置项
+	const parentConfig = ref({
+		labelWidth: 150,
+		span: 24,
+		style: 'padding:5px 10px',
+	});
+	// 控制表单项属性的展开关闭
+	const visible = ref(false);
+	// 基本配置属性实例
+	/**
+	 * 保存功能
+	 */
+	const saveData = async function (index: number) {
+		try {
+			// 校验表单项属性
+			let flag = await baseConfigRef.value[index].getSubmitData();
+			if (!flag) return;
+			// 将默认值根据key值赋值给data中
+			// let oldKey = oldItem.value.data.baseData.prop; // 表单项【old】key值
+			// let newKey = formItemConfig.value.data.baseData.prop; // 表单项【new】key值
+			// let value = formItemConfig.value.data.elData?.attrs?.defaultValue || ''; // 表单项【new】value值
+			// // 如果修改过key后，修改后的key不能formData中的key重复
+			// if (_.has(formData.value, newKey) && newKey != oldKey) {
+			// 	return ElMessage.warning(`查询参数重复，请修改`);
+			// }
+			// // 如果修改了表单中字段的key值
+			// if (_.has(formData.value, oldKey) && oldKey != newKey) {
+			// 	delete formData.value[oldKey]; // 删除原来的key值
+			// }
+			// // 更新formData数据
+			// formData.value = Object.assign(formData.value, {
+			// 	[newKey]: value,
+			// });
+			// // 保存表单配置
+			oldItem.value = Object.assign(oldItem.value, _.cloneDeep(formItemConfig.value));
+			// formData.value = Object.assign(formData.value, _.cloneDeep(formItemConfig.value.data.elementItem));
+			// console.log('oldItem.value====>>>>>>>>>>>>', oldItem.value);
+		} catch (err) {
+			console.log('er', err);
+		}
+	};
+	let elComName = ref<string[]>([]);
+	/**
+	 * 组件类型切换回调方法
+	 * @param value
+	 * @param prop
+	 */
+	const onChange = function (value: string | number, prop: string, index: number) {
+		console.log('value', value, prop, formItemConfig.value.data, index);
+		if (prop != 'el') return;
+		// 关闭元素项属性
+		formItemConfig.value.elConfig.visible = false;
+		// 清空元素项数据
+		formItemConfig.value.data.elementItem[index].elData = {};
+		// 组件名称赋值
+		let typeName: string = formItemConfig.value.data.baseData.el || value + '';
+		elComName.value[index] = compConfig[typeName];
+		// 展开元素项属性
+		formItemConfig.value.elConfig.visible = true;
+	};
+	const handleTabsEdit = (targetName: string, action: string) => {
+		console.log('targetName', targetName, action);
+		if (action === 'add') {
+			// 添加元素项
+			formItemConfig.value.data.elementItem.push(_.cloneDeep(formItemChildConfig));
+		}
+		if (action === 'remove') {
+			// 删除元素项
+			formItemConfig.value.data.elementItem.splice(targetName, 1);
+			elComName.value.splice(+targetName, 1);
+		}
+	};
+	return { parentConfig, visible, formItemConfig, elComName, onChange, saveData, handleTabsEdit };
+}

package/src/views/system/formSetting/components/hsForm/useFormListConfig.ts

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import IFormTable from '/@/types/formTable';
+import { Ref } from 'vue';
+import ComponentAttr from '/@/types/components';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { formItemConfig, emptyFormItemData } from '../../default/baseFormConfig'; // 表单配置方法
+import hsFormConfigList from './src/hsFormConfigList.vue';
+import _ from 'lodash';
+
+export function useHsFormListConfig(
+	emit: (event: 'chose', ...args: any[]) => void,
+	prop: ComponentAttr.Props<typeof hsFormConfigList>,
+	configModel: Ref<IFormTable.FormTable | undefined>
+) {
+	/**
+	 * 选择配置项
+	 * @param item
+	 */
+	const choseTagItem = (item: IFormTable.ConfigItemType) => {
+		// 获取操作项
+		let current = item.id == prop.current?.id ? _.cloneDeep(emptyFormItemData.value) : item;
+		emit('chose', current);
+	};
+
+	/**
+	 * 添加字段
+	 * @returns
+	 */
+	const appendField = () => {
+		// 用时间戳设置唯一id
+		let defaultItemConfig: IFormTable.ConfigItemType = _.cloneDeep(formItemConfig.value);
+		defaultItemConfig.id = new Date().getTime().toString();
+		// 追加字段配置项
+		configModel.value?.form?.formConfig.push(defaultItemConfig);
+		// 获取新增的配置对象
+		let obj = configModel.value?.form?.formConfig[configModel.value?.form.formConfig.length - 1] || _.cloneDeep(emptyFormItemData.value);
+		// 设置默认选中
+		choseTagItem(obj);
+	};
+
+	/**
+	 * 删除配置
+	 * @param item
+	 */
+	const deleteTagItem = (item: IFormTable.ConfigItemType) => {
+		ElMessageBox.confirm(`确定删除“${item['data'] && item['data']['baseData']['label']}”字段吗？`, '提示', {
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning',
+		})
+			.then(() => {
+				// 获取被删除的配置所在id
+				_.remove(configModel.value?.form?.formConfig || [], item);
+				// 更新当前选中配置
+				choseTagItem(item);
+				// 给出操作成功提示
+				ElMessage.success('删除成功');
+			})
+			.catch((err) => {
+				console.log('err', err);
+			});
+	};
+
+	return {
+		// configList,
+		choseTagItem,
+		appendField,
+		deleteTagItem,
+	};
+}