hs-admin-ui 1.0.6 → 1.0.8

package/src/views/system/formSetting/components/hsForm/src/hsFormConfig.vue

@@ -0,0 +1,180 @@
+<!-- 
+  desc: 父类配置
+  author:lvling
+ -->
+<template>
+	<div>
+		<hs-form
+			ref="formRef"
+			:label-width="parentConfig['labelWidth']"
+			:inline="false"
+			label-position="right"
+			label-suffix=":"
+			:hide-required-asterisk="false"
+			require-asterisk-position="right"
+			show-message
+			inline-message
+			status-icon
+			:disabled="false"
+			v-bind="$attrs"
+			scroll-to-error
+			:rules="rules"
+			:model="formData"
+		>
+			<hs-row :gutter="0" justify="start" align="middle" class="hs-row">
+				<template v-for="(item, index) in formConfig">
+					<hs-col
+						:key="index"
+						v-if="item['show'] !== false"
+						:span="item['span'] || parentConfig['span']"
+						:xs="item['xs'] || parentConfig['xs']"
+						:sm="item['sm'] || parentConfig['sm']"
+						:md="item['md'] || parentConfig['md']"
+						:lg="item['lg'] || parentConfig['lg']"
+						:xl="item['xl'] || parentConfig['xl']"
+						:style="parentConfig.style"
+					>
+						<template v-if="item.slot">
+							<slot :name="item.slot" v-bind="item"></slot>
+						</template>
+						<hs-form-item v-else :label="item['label']" :prop="item['prop']" :required="item['required']">
+							<template #label>
+								<span class="text-[#606266] truncate">&nbsp; {{ item['label'] }}&nbsp; <span v-if="parentConfig.showColon">: &nbsp; </span></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>
+							<template v-if="item.slotValue">
+								<slot :name="item.slotValue" v-bind="item"></slot>
+							</template>
+							<!-- placeholder="请输入" -->
+
+							<component
+								v-else
+								:is="item['el']"
+								v-model="formData[item.prop]"
+								:multiple="item['multiple']"
+								:size="item['size']"
+								:type="item['type']"
+								:disabled="item['disabled']"
+								border
+								:clearable="item.clearable != false"
+								@change="onChange($event, item)"
+							>
+								<component
+									:is="item['cel']"
+									v-for="(value, idx) in item['op'] || []"
+									:key="idx"
+									:label="value['label']"
+									:value="value['value']"
+								></component>
+							</component>
+						</hs-form-item>
+					</hs-col>
+				</template>
+				<div></div>
+			</hs-row>
+		</hs-form>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { IFormTable } from '/@/types';
+
+const props = defineProps({
+	// 表单配置
+	parentConfig: {
+		type: Object,
+		default: () => {
+			return {
+				labelWidth: 200,
+				xs: 24,
+				sm: 24,
+				md: 12,
+				lg: 12,
+				xl: 8,
+				style: '',
+				showColon: false, // 显示冒号
+			};
+		},
+	},
+	// 表单绑定数据
+	data: {
+		type: Object,
+		default: () => {},
+	},
+	// 表单配置项数组
+	config: {
+		type: Array<IFormTable.FormItem>,
+		default: () => [],
+	},
+	rules: {
+		type: Object,
+		default: () => {},
+	},
+});
+let formData = ref(props.data);
+
+let formConfig = ref(props.config);
+
+watch(
+	() => props.data,
+	(value) => {
+		formData.value = value;
+	},
+	{
+		deep: true,
+	}
+);
+// 表单实例
+const formRef = ref();
+/**
+ * 校验formdata
+ */
+const getSubmitData = () => {
+	return new Promise((resolve) => {
+		if (!formRef.value) {
+			resolve(false);
+			return;
+		}
+		formRef.value.validate((valid: 'undefined' | boolean) => {
+			if (valid) {
+				// console.log('submit!', formData.value);
+				// oldData.value = Object.assign(oldData.value, formData.value);
+				resolve(true);
+			} else {
+				// console.log('error submit!', formData.value);
+				resolve(false);
+			}
+		});
+	});
+};
+// 派生事件
+let emits = defineEmits(['change']);
+/**
+ *选择器切换事件
+ * @param e
+ */
+const onChange = (value: string, item) => {
+	let prop = item.prop;
+	emits('change', value, prop);
+};
+defineExpose({ getSubmitData });
+</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;
+	}
+}
+//
+</style>

package/src/views/system/formSetting/components/hsForm/src/hsFormConfigList.vue

@@ -0,0 +1,70 @@
+<!-- 
+  desc: 表单配置项集合
+  author: lvling
+ -->
+<template>
+	<div>
+		<VueDraggable ref="dragRef" class="flex flex-wrap" handle=".drag-item" ghostClass="ghost" v-model="configModel.form.formConfig" :animation="150">
+			<div class="drag-item p-2 relative" v-for="(item, index) in configModel?.form?.formConfig" :key="index" @click="choseTagItem(item)">
+				<!-- @contextmenu.prevent="contextmenu(item, $event)" -->
+				<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?.elementItem[0]?.baseData['label'] }}
+				</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>
+		</VueDraggable>
+		<Contextmenu :dropdown="state.dropdown" ref="contextmenuRef" @currentContextmenuClick="onCurrentContextmenuClick" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { PropType, defineModel, ref, defineAsyncComponent, reactive } from 'vue';
+import { useHsFormListConfig } from './../useFormListConfig';
+import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus';
+// 引入组件
+const Contextmenu = defineAsyncComponent(() => import('./contextmenu.vue'));
+import { IFormTable } from '/@/types';
+// 拖动组件ref
+const dragRef = ref<UseDraggableReturn>();
+// 下拉菜单ref
+const contextmenuRef = ref();
+// state
+const state = reactive<{ dropdown: { x: number; y: number } }>({
+	dropdown: {
+		x: 0,
+		y: 0,
+	},
+});
+const emit = defineEmits(['chose']);
+
+const configModel = defineModel<IFormTable.FormTable>();
+const prop = defineProps({
+	current: {
+		type: Object as PropType<Record<'id', string>>,
+		default: () => {},
+	},
+	panelConfig: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+const { appendField, deleteTagItem, choseTagItem, contextmenu, onCurrentContextmenuClick } = useHsFormListConfig(
+	emit,
+	prop,
+	configModel,
+	state,
+	contextmenuRef
+);
+</script>
+
+<style lang="scss" scoped></style>

package/src/views/system/formSetting/components/hsForm/src/hsFormPanel.vue

@@ -0,0 +1,155 @@
+<!-- 
+	desc: 配置表单面板
+	author: 吕玲
+ -->
+<template>
+	<!-- flex flex-row -->
+	<div class="mx-auto flex flex-row h-full">
+		<!-- grid-cols-subgrid gap-5 -->
+		<div class="flex-1 grow overflow-y-auto">
+			<hsExpand v-model="formTitleConfig.code.visible" :expandConfig="formTitleConfig.code"></hsExpand>
+			<div v-if="formTitleConfig.code.visible">
+				{{ configModel }}
+			</div>
+			<hsFormParse :is="hsFormParse" v-model="configModel" />
+			<!-- 表单基础配置 -->
+			<component :is="hsExpand" v-model="formTitleConfig.baseForm.visible" :expandConfig="formTitleConfig.baseForm"></component>
+			<component :is="'bc-form-config'" v-if="formTitleConfig.baseForm.visible" :data="BaseFormModel" :config="parentBaseFormConfig" />
+			<!-- 基础配置 -->
+			<component :is="hsExpand" v-model="formTitleConfig.base.visible" :expandConfig="formTitleConfig.base"></component>
+			<component :is="'bc-form-config'" v-if="formTitleConfig.base.visible" :data="configModel?.base" :config="parentBaseConfig" />
+			<!-- 表单配置项 -->
+			<template v-if="configModel?.form">
+				<!-- 表单配置项 类型 -->
+				<el-radio-group v-model="configModel.formItemType">
+					<el-radio label="form">启用表单配置项</el-radio>
+					<el-radio label="component">启用组件</el-radio>
+					<el-radio label="slot">启用插槽</el-radio>
+				</el-radio-group>
+				<component
+					:is="hsExpand"
+					v-if="configModel.formItemType == 'form'"
+					v-model="formTitleConfig.form.visible"
+					:expandConfig="formTitleConfig.form"
+				></component>
+				<component
+					:is="'bc-form-config'"
+					v-if="formTitleConfig.form.visible && configModel.formItemType == 'form'"
+					:data="configModel.form.baseData"
+					:config="parentFormConfig"
+				/>
+				<!-- 启用组件 -->
+				<component
+					:is="hsExpand"
+					v-if="configModel.formItemType == 'component'"
+					v-model="formTitleConfig.component.visible"
+					:expandConfig="formTitleConfig.component"
+				></component>
+				<component
+					:is="'bc-form-config'"
+					v-if="formTitleConfig.component.visible && configModel.formItemType == 'component'"
+					:data="configModel.component?.baseData"
+					:config="parentComponentConfig"
+				/>
+				<!-- 启用插槽 -->
+				<component
+					:is="hsExpand"
+					v-if="configModel.formItemType == 'slot'"
+					v-model="formTitleConfig.slot.visible"
+					:expandConfig="formTitleConfig.slot"
+				></component>
+				<component
+					:is="'bc-form-config'"
+					v-if="formTitleConfig.slot.visible && configModel.formItemType == 'slot'"
+					:data="configModel.slot?.baseData"
+					:config="parentSlotConfig"
+				/>
+
+				<component
+					:is="hsExpand"
+					v-if="configModel.formItemType == 'form'"
+					v-model="formTitleConfig.formItem.visible"
+					:expandConfig="formTitleConfig.formItem"
+				></component>
+				<component
+					:is="hsFormConfigList"
+					v-if="formTitleConfig.formItem.visible && configModel.formItemType == 'form'"
+					v-model="configModel"
+					:current="currentItem"
+					@chose="onChoseItem"
+					:panelConfig="panelConfig"
+				/>
+				<!-- =={{ configModel?.form?.formData }} -->
+			</template>
+		</div>
+		<!-- grid-cols-subgrid gap-4 -->
+		<div
+			v-if="
+				(configModel?.form?.formConfig || []).length > 0 && (currentItem?.baseConfig?.list || []).length > 0 && configModel?.formItemType == 'form'
+			"
+			class="flex-none basis-1/3 ml-4"
+		>
+			<component :is="hsAttrForm" :current="currentItem" :data="configModel?.form?.formData" />
+		</div>
+	</div>
+</template>
+<script setup lang="ts" name="formPanel">
+import { defineModel, watch, ref } from 'vue';
+import hsFormParse from './hsFormParse.vue'; // 一键解析
+import hsFormConfigList from './hsFormConfigList.vue'; // 表单元素配置项集合
+import hsAttrForm from './hsAttrForm.vue'; // 元素配置配置详情
+import {
+	parentFormConfig,
+	emptyFormItemData,
+	formTitleConfig,
+	parentComponentConfig,
+	parentSlotConfig,
+	parentBaseConfig,
+	parentBaseFormConfig,
+} from '../../../default/baseFormConfig'; // 表单配置方法
+import { IFormTable } from '/@/types';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import { useVModel } from '/@/hooks';
+import _ from 'lodash';
+
+const props = defineProps({
+	BaseForm: {
+		type: Object,
+		default: () => ({}),
+	},
+	panelConfig: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+const configModel = defineModel<IFormTable.FormConfig>();
+// emit 事件
+const emit = defineEmits(['update:BaseForm']);
+const BaseFormModel = useVModel(props, 'BaseForm', emit);
+
+// 当前选中项配置
+let currentItem = _.cloneDeep(emptyFormItemData);
+let oldId = ref<String>('');
+watch(
+	() => configModel.value,
+	(value) => {
+		if (oldId.value != value?.config_unique_id) {
+			currentItem.value = _.cloneDeep(emptyFormItemData);
+			oldId.value = value?.config_unique_id || '';
+		}
+	},
+	{
+		immediate: true,
+	}
+);
+/**
+ * 选择某配置回调
+ */
+const onChoseItem = (item: IFormTable.ConfigItemType) => {
+	currentItem.value = item;
+};
+const formItemType = ref('form');
+</script>
+
+<style lang="scss" scoped></style>

package/src/views/system/formSetting/components/hsForm/src/hsFormParse.vue

@@ -0,0 +1,33 @@
+<!-- 
+  desc: 通过查询类名解析表单配置
+  author: 吕玲
+ -->
+<template>
+	<div class="flex flex-row">
+		<hs-input class="basis-1/4 mr-2" v-model="parseApi" placeholder="请输入解析接口" />
+		<hs-button @click="parseForm" type="primary">一键解析</hs-button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineModel } from 'vue';
+import _ from 'lodash';
+import { parentFormData } from '../../../default/baseFormConfig'; // 表单配置方法
+
+let parseApi = ref('');
+let configModel = defineModel();
+/**
+ * 解析表单配置
+ */
+const parseForm = () => {
+	configModel.value = _.assign(configModel.value, {
+		form: {
+			baseData: _.cloneDeep(parentFormData.value),
+			formData: {},
+			formConfig: [],
+		},
+	});
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,135 @@
+import { ref, watch, onMounted } from 'vue';
+import { ComponentAttr } from '/@/types';
+import hsAttrForm from './src/hsAttrForm.vue';
+import { compConfig, formItemChildConfig } from './../../default/baseFormConfig';
+import { Session } from '/@/utils/storage';
+
+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);
+	let elComName = ref<string[]>([]);
+	/**
+	 * 监听当前项
+	 */
+	watch(
+		() => props.current,
+		(value) => {
+			// 解决切换不同表单项不及时更新数据问题
+			if (value.id != formItemConfig.value.id) {
+				value.elConfig.visible = false;
+				oldItem.value = value;
+				formItemConfig.value = _.cloneDeep(value);
+				formData.value = props.data;
+			}
+			// 当第一次进入时，elComName为空数组，需要初始化！不初始化会导致elComName为空数组，导致页面渲染不出来
+			if (elComName.value.length == 0) {
+				formItemConfig.value.data.elementItem.forEach((item: any) => {
+					elComName.value.push(compConfig[item.baseData.el]);
+				});
+			}
+		},
+		{ deep: true, immediate: 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;
+			// // 保存表单配置
+			oldItem.value = Object.assign(oldItem.value, _.cloneDeep(formItemConfig.value));
+		} catch (err) {
+			console.log('er', err);
+		}
+	};
+	/**
+	 * 组件类型切换回调方法
+	 * @param value
+	 * @param prop
+	 */
+	const onChange = function (value: string | number, prop: string, index: number) {
+		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) => {
+		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);
+		}
+	};
+	// 自动完成查询的地址和参数
+	let requestData = ref({
+		url: '', // sysData.project_url + '/pri/field_config/get_field_pool_list',
+		params: {
+			currentPage: 1,
+			field_type: '2', // 【1按钮  2查询条件   3表格 4表单】
+			pageSize: '10',
+			qry_field_name_like: '',
+			project_code: '', // sysData.project_code || '',
+		},
+		qry_key: 'qry_field_name_like',
+	});
+	// 生命周期 渲染完成后 从缓存中读出系统数据并追加值请求参数中
+	onMounted(() => {
+		// 根据缓存中的系统数据，赋值请求地址和参数
+		let systemData = Session.get('CURRENT_SYSTEM');
+		// 请求参数赋值
+		let param = requestData.value.params;
+		param.project_code = systemData.project_code || '';
+		// 请求地址赋值
+		requestData.value = _.assign(requestData.value, {
+			url: '/' + systemData.project_url + '/pri/field_config/get_field_pool_list',
+			params: param,
+		});
+	});
+	interface RestaurantItem {
+		field_code: string;
+		field_name: string;
+		json_data: string;
+		id: string;
+	}
+	/**
+	 * 自动完成组件的切换事件
+	 * @param item
+	 */
+	const onChangeItem = (item: RestaurantItem) => {
+		let fieldData = JSON.parse(item.json_data);
+		// 字段池数据赋值
+		// formItemConfig.value.data = _.assign(formItemConfig.value.data, fieldData.data, { field_id: fieldData.id });
+		console.log('onChangeItem===>>>>', item);
+	};
+	return { parentConfig, visible, formItemConfig, elComName, onChange, saveData, handleTabsEdit, requestData, onChangeItem };
+}

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

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IFormTable, ComponentAttr } from '/@/types';
+import { Ref } from 'vue';
+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>,
+	state: { dropdown: { x: number; y: number } },
+	contextmenuRef: Ref<any>
+) {
+	/**
+	 * 选择配置项
+	 * @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);
+			});
+	};
+	/**
+	 *
+	 * @param item
+	 * @param event
+	 * @returns
+	 * 右键菜单
+	 */
+	const contextmenu = (item: IFormTable.ConfigItemType, event: MouseEvent) => {
+		console.log('contextmenu', item, event, prop);
+		const { clientX, clientY } = event;
+		state.dropdown.x = clientX;
+		state.dropdown.y = clientY;
+		contextmenuRef.value.openContextmenu(item);
+	};
+	const onCurrentContextmenuClick = () => {
+		console.log('onCurrentContextmenuClick');
+	};
+	return {
+		// configList,
+		choseTagItem,
+		appendField,
+		deleteTagItem,
+		contextmenu,
+		onCurrentContextmenuClick,
+	};
+}