hs-admin-ui 1.0.6 → 1.0.8

package/src/components/business/bcPageConfig/components/hsForm/useAttrForm.ts

@@ -0,0 +1,153 @@
+import { ref, Ref, watch, onMounted } from 'vue';
+import { ComponentAttr, IFormData } from '/@/types';
+import hsAttrForm from './src/hsAttrForm.vue';
+import { ElMessage } from 'element-plus';
+import { compConfig, config } from './../../default/baseFormConfig';
+import { Session } from '/@/utils/storage';
+import { useFieldConfigController, PostRequest } from '/@/api';
+const fieldConfig = useFieldConfigController();
+
+import _ from 'lodash';
+
+interface BaseConfigRef {
+	getSubmitData: () => boolean;
+}
+
+export function useHsAttrForm(props: ComponentAttr.Props<typeof hsAttrForm>, baseConfigRef: Ref<BaseConfigRef>) {
+	// 原始数据
+	let oldItem = ref<Record<string, IFormData.Data> | undefined>(props.current);
+	// 当前项绑定数据
+	let formItemConfig = ref(_.cloneDeep(props.current));
+	let formData = ref<Record<string, IFormData.Data> | undefined>(props.data);
+	let tableConfig = ref(_.cloneDeep(config));
+
+	/**
+	 * 监听当前项
+	 */
+	watch(
+		() => props.current,
+		(value) => {
+			// 解决切换不同表单项不及时更新数据问题
+			if (value && value.id != formItemConfig.value.id) {
+				tableConfig.value.elConfig.visible = false;
+				oldItem.value = value;
+				formItemConfig.value = _.cloneDeep(value);
+				formData.value = props.data;
+			}
+		},
+		{ deep: true }
+	);
+	// 自动完成查询的地址和参数
+	let requestData = ref({
+		url: '', // sysData.project_url + '/pri/field_config/get_field_pool_list',
+		params: {
+			currentPage: 1,
+			field_type: '2', // 【1按钮  2查询条件   3表格】
+			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,
+		});
+	});
+
+	// 表单配置项
+	const parentConfig = ref({
+		labelWidth: 150,
+		span: 24,
+		minWidth: 350,
+		style: 'padding:5px 10px',
+	});
+	// 控制表单项属性的展开关闭
+	const visible = ref(false);
+	// 基本配置属性实例
+	/**
+	 * 保存功能
+	 */
+	const saveData = async function () {
+		try {
+			// 校验表单项属性
+			let flag = await baseConfigRef.value.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));
+			// 如果存在字段池id，则不重复调用保存字段池的方法
+			if (formItemConfig.value.data.field_id) return;
+			let system = Session.get('CURRENT_SYSTEM');
+			// 整理保存字段池的数据
+			let obj = {
+				field_code: formItemConfig.value.data.name,
+				field_name: formItemConfig.value.data.key,
+				field_type: '2', // 【1按钮   2查询条件   3表格字段】
+				json_data: JSON.stringify(formItemConfig.value),
+				project_code: system.project_code,
+			};
+			// 发送保存字段池的接口
+			fieldConfig.postSaveFieldPool4Config<PostRequest>(obj);
+		} catch (err) {
+			console.log('er', err);
+		}
+	};
+	let elComName = ref<string>('hs-config-input');
+	/**
+	 * 组件类型切换回调方法
+	 * @param value
+	 * @param prop
+	 */
+	const onChange = function (value: string | number, prop: string) {
+		if (prop != 'el') return;
+		// 关闭元素项属性
+		tableConfig.value.elConfig.visible = false;
+		// 清空元素项数据
+		formItemConfig.value.data.elData = {};
+		// 组件名称赋值
+		let typeName: string = formItemConfig.value.data.baseData.el;
+		elComName.value = compConfig[typeName];
+		// 展开元素项属性
+		tableConfig.value.elConfig.visible = true;
+	};
+	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 });
+	};
+	return { parentConfig, visible, formItemConfig, elComName, tableConfig, requestData, onChange, saveData, onChangeItem };
+}

package/src/components/business/bcPageConfig/components/hsForm/useFormListConfig.ts

@@ -0,0 +1,69 @@
+/* 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>
+) {
+	/**
+	 * 选择配置项
+	 * @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,
+	};
+}

package/src/components/business/bcPageConfig/components/hsForm/useFormParse.ts

@@ -0,0 +1,152 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IFormTable } from '/@/types';
+import { Ref, ref, watch } from 'vue';
+import { inputAttrConfigMap } from '/@/components/config/inputAttrConfig/config';
+import { ElMessage } from 'element-plus';
+import { parentFormData, formItemConfig } from './../../default/baseFormConfig'; // 表单配置方法
+import { usePostMan } from '/@/api/test/index';
+import { Session } from '/@/utils/storage';
+import { useFieldConfigController, FieldConfigGetPoolByFieldMap } from '/@/api';
+const fieldConfig = useFieldConfigController();
+import _ from 'lodash';
+const postMan = usePostMan();
+
+export function useHsFormParse(parseApi: Ref<string>, configModel: Ref<IFormTable.FormTable | undefined>) {
+	// 定义参数类型
+	type paramData = {
+		name: string;
+		in: string;
+		description: string;
+		required: boolean;
+		type: string;
+	};
+	// 自定义双向绑定值 start ===========
+	watch(
+		() => configModel.value,
+		(val) => {
+			if (val?.form) {
+				parseApi.value = val.form.baseData.searchUrl || '';
+			} else {
+				parseApi.value = '';
+			}
+		},
+		{
+			deep: true,
+		}
+	);
+	watch(
+		() => parseApi.value,
+		(value) => {
+			if (configModel.value?.form) {
+				configModel.value.form.baseData.searchUrl = value;
+			}
+		},
+		{
+			deep: true,
+		}
+	);
+	// 自定义双向绑定值 end ===========
+
+	/**
+	 * 初始化表单配置
+	 */
+	const initBaseConfig = () => {
+		let parentData = _.cloneDeep(parentFormData);
+		configModel.value = _.assign(configModel.value, {
+			form: {
+				id: new Date().getTime().toString(), // 表单id
+				baseData: parentData, // 表单配置数据
+				formData: {}, // 表单绑定值
+				formConfig: [], // 表单配置项数组
+			},
+		});
+	};
+	type Option = Record<string, string>;
+	/**
+	 * 根据参数调接口查询字段池中的数据
+	 * @param paramData
+	 * @param systemData
+	 */
+	const formatParamData = (parameters: paramData[], systemData: Record<string, string>) => {
+		// 将参数的value值整理为一个数组
+		let fieldCode = parameters.map((item: paramData) => item.name);
+		// 请求接口向字段池中查询
+		fieldConfig
+			.getPoolByFieldMap<FieldConfigGetPoolByFieldMap>({
+				fieldCodes: fieldCode, // 字段代码集合
+				field_type: '2', // 字段池类型
+				project_code: systemData && systemData.project_code, // 所属系统
+			})
+			.then((res) => {
+				console.log('res', res);
+				// 遍历参数数组，解析追加字段
+				parameters.forEach((param: paramData) => {
+					console.log('param', param);
+					let keys = configModel.value?.form?.formConfig.map((item) => item.data.baseData.prop);
+					// 如果不存在param.name的值，则向配置中追加【如果字段中存在，则不更新】
+					if (!_.includes(keys, param.name)) {
+						// 给配置赋默认值
+						let tempFormItemConfig = _.cloneDeep(formItemConfig.value);
+						tempFormItemConfig.id = param.name + new Date().getTime().toString(); // id
+						tempFormItemConfig.data.baseData.label = param.description; // label名称
+						tempFormItemConfig.data.baseData.prop = param.name; // 参数prop
+						// 将组件设置默认hs-input组件
+						tempFormItemConfig.data.baseData.el = 'hs-input'; // 组件名称
+						// 向表单项中追加hs-input的默认数据
+						tempFormItemConfig.data.elData = _.cloneDeep(inputAttrConfigMap);
+						// 如果请求成功 && 能从返回参数中取到值，则向配置中追加字段数据
+						if (res.code == 1 && res.data && res.data[param.name]) {
+							let fieldData = JSON.parse(res.data[param.name].json_data); // 字段池数据
+							// 更新配置项数据
+							tempFormItemConfig.data = _.assign(tempFormItemConfig.data, fieldData, { field_id: res.data[param.name].id });
+						}
+						// 项配置数组中追加配置项
+						configModel.value?.form?.formConfig.push(tempFormItemConfig); // // 项配置数组中追加配置项
+					}
+				});
+			});
+	};
+	/**
+	 * 解析表单配置
+	 */
+	const parseForm = async () => {
+		// 判断是否输入值
+		if (parseApi.value) {
+			// 获取系统数据
+			let systemData: Option = Session.get('CURRENT_SYSTEM');
+			// 请求接口文档数据
+			let res = await postMan.getApiDocs({ proxy: systemData.project_url });
+			// 筛选符合输入值的接口数组
+			let apiKey = (_.keys(res.paths) || []).filter((str: string) => _.includes(str, parseApi.value) || _.includes(parseApi.value, str));
+
+			// 获取第一条符合的接口url
+			let apiData = (res.paths && res.paths[apiKey[0]]) || undefined;
+			if (apiData) {
+				let key: string = Object.keys(apiData)[0]; // method
+				let value = (key && apiData[key]) || {}; // api_data
+				let parameters = value['parameters'] || []; // 请求参数数组
+
+				// 如果没有form属性，则向配置中追加form配置
+				if (!configModel.value?.form) {
+					await initBaseConfig();
+				}
+				// 更新查询地址的请求方式
+				if (configModel.value?.form) {
+					configModel.value.form.baseData.searchUrlMethod = key || '';
+				}
+				console.log('parameters', parameters);
+				// 查字段池中的数据 并解析
+				formatParamData(parameters, systemData);
+			} else {
+				ElMessage.warning('请检查url是否正确');
+			}
+		} else {
+			initBaseConfig();
+			// ElMessage.warning('请输入接口地址');
+		}
+	};
+
+	return {
+		parseForm,
+	};
+}

package/src/components/business/bcPageConfig/components/hsSaveForm/saveFormConfig.ts

@@ -0,0 +1,66 @@
+import _ from 'lodash';
+// ============================= 新配置 start ==============================
+// 表单绑定值
+let formData = {
+	config_name: '',
+	config_unique_id: '', // new Date().getTime().toString(),
+};
+// 表单校验规则
+const formRule = {
+	config_name: [{ required: true, message: '请输入配置名称' }],
+	config_unique_id: [{ required: true, message: '请输入配置标识' }],
+};
+// 表单配置项
+const formConfig = [
+	{
+		prop: 'config_name',
+		label: '配置名称',
+		el: 'hs-input',
+		required: true,
+	},
+	{
+		prop: 'config_unique_id',
+		label: '配置标识',
+		el: 'hs-input',
+		show: false,
+		required: true,
+	},
+];
+const newConfig = {
+	formData,
+	formRule,
+	formConfig,
+};
+// ============================= 新配置 end ==============================
+// ============================= 选择配置 start ==============================
+// 表单绑定值
+let selectFormData = {
+	name: '',
+	config_name: '',
+	config_unique_id: '', // new Date().getTime().toString(),
+};
+// 表单配置项
+const selectFormConfig = [
+	{
+		prop: 'name',
+		label: '配置',
+		el: 'hs-select',
+		cel: 'hs-option',
+		multiple: false,
+		clearable: false,
+		op: [
+			// { label: ' 配置1', value: 'left' },
+			// { label: '配置2', value: 'right' },
+			// { label: '配置3', value: 'top' },
+		],
+	},
+];
+
+const selectConfig = {
+	formData: selectFormData,
+	formRule: formRule,
+	formConfig: _.concat(selectFormConfig, formConfig),
+};
+// ============================= 选择配置 end ==============================
+
+export { newConfig, selectConfig };

package/src/components/business/bcPageConfig/components/hsSaveForm/src/saveForm.vue

@@ -0,0 +1,53 @@
+<template>
+	<div class="flex justify-around items-center">
+		<div class="basis-3/4">
+			<component
+				ref="saveFormRef"
+				:parentConfig="parentConfig"
+				:is="'bc-form-config'"
+				:data="formConfig.formData"
+				:config="formConfig.formConfig"
+				:rules="formConfig.formRule"
+				:watchConfig="true"
+				@change="changeConfig"
+			></component>
+		</div>
+
+		<div class="basis-1/4 flex justify-end">
+			<hs-button v-if="!isEdit || (isEdit && formConfig.formData.name)" @click="saveConfig" type="primary">保存配置</hs-button>
+			<hs-button v-if="isEdit" type="primary" @click="addConfig">新增配置</hs-button>
+			<hs-button v-if="isEdit && formConfig.formData.name" @click="deleteConfig">删除配置</hs-button>
+			<hs-button v-if="!isEdit" @click="cancel">取消</hs-button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IFormTable } from '/@/types';
+
+import { useSaveForm } from './../useSaveForm';
+defineOptions({
+	inheritAttrs: false,
+});
+const props = defineProps({
+	configs: {
+		type: Array<IFormTable.FormTable>,
+		default: [],
+	},
+});
+
+const saveFormRef = ref();
+
+const emits = defineEmits(['save', 'change', 'delete']);
+
+const { parentConfig, formConfig, isEdit, saveConfig, changeConfig, initOriginConfig, addConfig, cancel, deleteConfig } = useSaveForm(
+	emits,
+	saveFormRef,
+	props
+);
+// 暴露内部方法
+defineExpose({
+	initOriginConfig,
+});
+</script>

package/src/components/business/bcPageConfig/components/hsSaveForm/useSaveForm.ts

@@ -0,0 +1,157 @@
+import { Ref, ref } from 'vue';
+import _ from 'lodash';
+import { ComponentAttr, IFormTable } from '/@/types';
+import { newConfig, selectConfig } from './saveFormConfig';
+import saveForm from './src/saveForm.vue';
+
+interface BcFormRef {
+	getSubmitData: () => boolean;
+}
+
+export function useSaveForm(
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	emits: (event: 'save' | 'change' | 'delete', ...args: any[]) => void,
+	saveFormRef: Ref<BcFormRef>,
+	props: ComponentAttr.Props<typeof saveForm>
+) {
+	const parentConfig = ref({
+		showColon: true,
+		xs: 8,
+		sm: 8,
+		md: 8,
+		lg: 8,
+		xl: 8,
+		minWidth: 350,
+	});
+	// 区分当前是新增还是修改
+	let isEdit = ref(true);
+	// 配置表单
+	let formConfig = ref(
+		_.assign(_.cloneDeep(selectConfig), {
+			formData: {
+				name: '',
+				config_name: '',
+				config_unique_id: new Date().getTime().toString(),
+			},
+		})
+	);
+	/**
+	 * 切换配置方法
+	 * @param value
+	 * @param type
+	 */
+	const changeConfig = (value: string, type: string) => {
+		// 初始化表格表单配置
+		if (type == 'name') {
+			let config = _.cloneDeep(props.configs).find((item: IFormTable.FormTable) => item.config_unique_id == value);
+			formConfig.value.formData = _.assign(formConfig.value.formData, {
+				config_name: config.config_name,
+				config_unique_id: config.config_unique_id,
+			});
+			emits('change', config);
+		}
+	};
+	/**
+	 * 初始化基本配置
+	 * @returns
+	 */
+	const initBaseConfig = () => {
+		let config = {
+			id: '', // 配置id
+			config_type: '1', // 配置类型
+			tables: [
+				{
+					id: 'table_' + new Date().getTime().toString(),
+					baseData: { id: '', tableName: '表格配置名称' },
+					tableConfig: [], // 表格列数组配置
+				},
+			],
+			btns: [],
+		};
+		return config;
+	};
+	/**
+	 * 初始化配置
+	 * @param configList
+	 */
+	const initOriginConfig = (configList: Array<IFormTable.FormTable>, index: number = 0) => {
+		// 保存表单数据赋值
+		let tempFormConfig = _.cloneDeep(selectConfig);
+		// 更新保存表单的配置
+		tempFormConfig.formData.name = (configList[index] && configList[index].config_name) || '';
+		// 更新保存表单的配置名称
+		tempFormConfig.formData.config_name = (configList[index] && configList[index].config_name) || '';
+		// 更新保存表单的配置唯一标识
+		tempFormConfig.formData.config_unique_id = (configList[index] && configList[index].config_unique_id) || new Date().getTime().toString();
+		// 更新表单配置
+		if (configList.length > 0) {
+			// 将配置列表追加到配置下拉选择数据中
+			let list = configList.map((item: IFormTable.FormTable) => {
+				return { label: item.config_name, value: item.config_unique_id };
+			});
+			// 获取表格配置中【配置】所在下标
+			let idx = _.findIndex(tempFormConfig.formConfig, (item: IFormTable.FormItem) => item.prop == 'name');
+			if (idx < 0) return;
+			// 修改配置的下拉数据
+			let item = _.assign(tempFormConfig.formConfig[idx], {
+				op: list,
+			});
+			// 替换保存表单数据
+			tempFormConfig.formConfig.splice(idx, 1, item);
+		}
+		// 保存表单配置数据赋值
+		formConfig.value = tempFormConfig;
+		// 编辑类型 改为true
+		isEdit.value = true;
+		// 初始化表格配置
+		let initConfig = initBaseConfig();
+		console.log('configList[index]', configList[index]);
+
+		// 初始化表格表单配置
+		emits('change', configList[index] || initConfig);
+	};
+
+	/**
+	 * 保存配置
+	 */
+	const saveConfig = async () => {
+		let flag = await saveFormRef.value.getSubmitData();
+		if (flag) {
+			emits('save', {
+				config_name: formConfig.value.formData.config_name,
+				config_unique_id: formConfig.value.formData.config_unique_id,
+			});
+		}
+	};
+	/**
+	 * 新增配置
+	 */
+	const addConfig = () => {
+		// 如果菜单下有配置数组，此时点击新增配置，会初始化页面中的配置数据
+		if (!(isEdit.value && !formConfig.value.formData.name)) {
+			// 初始化配置
+			let initConfig = initBaseConfig();
+			// 初始化表格表单配置
+			emits('change', initConfig);
+		}
+		// 更新保存配置
+		formConfig.value = _.cloneDeep(newConfig);
+		formConfig.value.formData.config_unique_id = new Date().getTime().toString();
+		// 将编辑类型改为false
+		isEdit.value = false;
+	};
+	/**
+	 * 取消新增配置
+	 */
+	const cancel = () => {
+		// 初始化配置
+		initOriginConfig(_.cloneDeep(props.configs));
+	};
+	/**
+	 * 删除配置
+	 */
+	const deleteConfig = () => {
+		emits('delete');
+	};
+	return { parentConfig, formConfig, isEdit, saveConfig, changeConfig, initOriginConfig, addConfig, cancel, deleteConfig };
+}