hs-admin-ui 1.0.0

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

@@ -0,0 +1,69 @@
+/* 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,
+	};
+}

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

@@ -0,0 +1,120 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import IFormTable from '/@/types/formTable';
+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 apis from './../../default/apis.json';
+import { usePostMan } from '/@/api/test/index';
+import { Session } from '/@/utils/storage';
+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.submitUrl || '';
+			} else {
+				parseApi.value = '';
+			}
+		},
+		{
+			deep: true,
+		}
+	);
+	watch(
+		() => parseApi.value,
+		(value) => {
+			if (configModel.value?.form) {
+				configModel.value.form.baseData.submitUrl = value;
+			}
+		},
+		{
+			deep: true,
+		}
+	);
+	// 自定义双向绑定值 end ===========
+
+	/**
+	 * 初始化表单配置
+	 */
+	const initBaseConfig = () => {
+		let parentData = _.cloneDeep(parentFormData);
+		configModel.value = _.assign(configModel.value, {
+			form: {
+				id: new Date().getTime().toString(), // 表单id
+				baseData: parentData, // 表单配置数据
+				// baseConfig: _.cloneDeep(parentFormConfig), // 表单配置
+				formData: {}, // 表单绑定值
+				formConfig: [], // 表单配置项数组
+			},
+		});
+	};
+	type Option = Record<string, string>;
+
+	/**
+	 * 解析表单配置
+	 */
+	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 = Object.keys(apiData)[0]; // method
+				let value = (key && apiData[key]) || {}; // api_data
+				let parameters = value['parameters'] || []; // 请求参数数组
+
+				// 如果没有form属性，则向配置中追加form配置
+				if (!configModel.value?.form) {
+					await initBaseConfig();
+				}
+				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);
+						// 项配置数组中追加配置项
+						configModel.value?.form?.formConfig.push(tempFormItemConfig);
+					}
+				});
+				// 开始解析
+			} 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,48 @@
+<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" @click="addConfig">新增配置</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/formTable';
+
+import { useSaveForm } from './../useSaveForm';
+defineOptions({
+	inheritAttrs: false,
+});
+const props = defineProps({
+	configs: {
+		type: Array<IFormTable.FormTable>,
+		default: [],
+	},
+});
+
+const saveFormRef = ref();
+
+const emits = defineEmits(['save', 'change']);
+
+const { parentConfig, formConfig, isEdit, saveConfig, changeConfig, initOriginConfig, addConfig, cancel } = useSaveForm(emits, saveFormRef, props);
+// 暴露内部方法
+defineExpose({
+	initOriginConfig,
+});
+</script>

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

@@ -0,0 +1,148 @@
+import { Ref, ref } from 'vue';
+import _ from 'lodash';
+import ComponentAttr from '/@/types/components';
+import IFormTable from '/@/types/formTable';
+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', ...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: '表格配置名称' },
+					baseConfig: {}, // 表格配置
+					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 item = _.assign(tempFormConfig.formConfig[index], {
+				op: list,
+			});
+			// 替换保存表单数据
+			tempFormConfig.formConfig.splice(index, 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));
+	};
+
+	return { parentConfig, formConfig, isEdit, saveConfig, changeConfig, initOriginConfig, addConfig, cancel };
+}

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

@@ -0,0 +1,122 @@
+<template>
+	<div class="h-full">
+		<div style="height: 94%" class="overflow-y-auto">
+			<component v-model="visible" :is="hsExpand" :expandConfig="{ subTitle: '表格属性' }"></component>
+			<component
+				v-show="visible"
+				:parentConfig="parentConfig"
+				:is="'bc-form-config'"
+				:data="tableItemConfig?.data"
+				:config="tableDataConfig.list"
+				ref="baseTableRef"
+				:rules="tableDataConfig.rules.list || {}"
+				@change="onChange"
+			>
+				<template #title>
+					<bc-auto-complete type="table" v-model="tableItemConfig.data.title" @change="onChangeItem"></bc-auto-complete>
+				</template>
+			</component>
+			<div v-for="(item, index) in tableDataConfig?.second_config" :key="index">
+				<component v-model="item.visible" :is="hsExpand" :expandConfig="{ subTitle: item.title }"></component>
+				<component
+					v-if="item.visible"
+					:parentConfig="parentConfig"
+					:is="'bc-form-config'"
+					:config="item[item.key]"
+					:data="tableItemConfig?.data[item.key]"
+				></component>
+			</div>
+			<!-- 筛选配置 -->
+			<div>
+				<div v-for="(item, index) in tableItemConfig?.data.filters" :key="index">
+					<component
+						v-model="tableDataConfig.filterConfig.visible"
+						:is="hsExpand"
+						:expandConfig="{
+							subTitle: '筛选配置项' + (item['label'] ? '【' + item['label'] + '】' : ''),
+							rightSlot: true,
+						}"
+					>
+						<svgIcon @click="deleteFilterConfig(index)" color="#F56C6C" class="pt-1" name="ele-RemoveFilled" size="18"></svgIcon
+					></component>
+					<component
+						v-if="tableDataConfig.filterConfig.visible"
+						:parentConfig="parentConfig"
+						:is="'bc-form-config'"
+						:config="tableDataConfig.filterConfig.filters"
+						:data="item"
+					></component>
+				</div>
+				<div class="flex align-center justify-center p-2" @click="addFilterItem">
+					<div class="bg-red-200 py-1 px-3 rounded">新增数据筛选配置</div>
+				</div>
+			</div>
+			<!-- 按钮配置 -->
+			<div>
+				<div v-for="(item, index) in tableItemConfig.btnData" :key="index">
+					<component
+						v-model="item.visible"
+						:is="hsExpand"
+						:expandConfig="{
+							subTitle: '按钮配置' + (item.name ? '【' + item.name + '】' : ''),
+							rightSlot: true,
+						}"
+					>
+						<svgIcon @click="deleteBtnItem(index)" color="#F56C6C" class="pt-1" name="ele-RemoveFilled" size="18"></svgIcon
+					></component>
+					<component
+						:is="hsBtnItemConfig"
+						v-show="item.visible"
+						ref="btnItemRef"
+						v-model="tableItemConfig.btnData[index]"
+						:config="btnConfig"
+					></component>
+				</div>
+				<div class="flex align-center justify-center p-2" @click="addBtnItem">
+					<div class="bg-red-200 py-1 px-3 rounded">新增按钮配置</div>
+				</div>
+			</div>
+		</div>
+		<div class="text-center" style="height: 40px">
+			<hs-button @click="saveData" type="primary">保存</hs-button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import IFormTable from '/@/types/formTable';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import hsBtnItemConfig from './../../hsBtn/src/hsBtnItemConfig.vue';
+import { useHsAttrTable } from './../useAttrTable';
+import { config } from '../../../default/baseBtnConfig';
+
+import _ from 'lodash';
+const props = defineProps({
+	current: {
+		type: Object,
+		default: () => {},
+	},
+	configList: {
+		type: Array<IFormTable.TableItem>,
+		default: () => [],
+	},
+});
+let baseTableRef = ref();
+let btnConfig = ref(_.cloneDeep(config));
+const {
+	parentConfig,
+	visible,
+	tableItemConfig,
+	tableDataConfig,
+	onChangeItem,
+	addFilterItem,
+	saveData,
+	onChange,
+	deleteFilterConfig,
+	addBtnItem,
+	deleteBtnItem,
+} = useHsAttrTable(props, baseTableRef);
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,36 @@
+<template>
+	<div v-for="(item, index) in config" :key="index">
+		<component class="pl-4" :is="hsExpand" v-model="item.visible" :expandConfig="{ subTitle: item.title }"></component>
+		<!-- {{ item.key }} -->
+		<template v-if="item.visible && item.second_config">
+			<div v-for="(value, key) in item.second_config" :key="key">
+				<component :is="hsExpand" class="pl-8" v-model="value.visible" :expandConfig="{ subTitle: value.title }"></component>
+				<component
+					v-if="value.visible"
+					:is="'bc-form-config'"
+					:data="_.get(tableData, `${item.key}.${value.key}`)"
+					:config="value[value.key]"
+				></component>
+			</div>
+		</template>
+
+		<component v-if="item.visible" :is="'bc-form-config'" :data="_.get(tableData, item.key, {})" :config="item[item.key]"></component>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineModel } from 'vue';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import IFormTable from '/@/types/formTable';
+import _ from 'lodash';
+
+defineProps({
+	config: {
+		type: Array<IFormTable.Data>,
+		default: () => [],
+	},
+});
+const tableData = defineModel<IFormTable.TableBaseData>();
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,51 @@
+<template>
+	{{ tableModel?.baseData }}
+	<component class="pl-4" :is="hsExpand" v-model="baseConfig.baseVisible" :expandConfig="{ subTitle: '表格基本配置' }"></component>
+	<component v-if="baseConfig.baseVisible" :is="'bc-form-config'" :data="tableModel?.baseData" :config="baseConfig.baseTableConfig"></component>
+	<component
+		v-if="tableModel?.baseData?.is_apply_page"
+		class="pl-4"
+		:is="hsExpand"
+		v-model="baseConfig.pageVisible"
+		:expandConfig="{ subTitle: '表格分页配置' }"
+	></component>
+	<component
+		v-if="baseConfig.pageVisible && tableModel?.baseData?.is_apply_page"
+		:is="'bc-form-config'"
+		:data="tableModel?.baseData?.table_page_data"
+		:config="baseConfig.tablePageConfig"
+	></component>
+	<component v-if="tableModel" :is="hsRecursionConfig" :config="baseConfig.tableAttrConfig" v-model="tableModel.baseData"></component>
+</template>
+<script setup lang="ts">
+import { ref, watch, defineModel } from 'vue';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import hsRecursionConfig from './hsRecursionConfig.vue';
+import IFormTable from '/@/types/formTable';
+
+const props = defineProps({
+	config: {
+		type: Object,
+		default: () => {
+			return {
+				baseTableConfig: [],
+				baseVisible: false,
+				tableAttrConfig: [],
+				tablePageConfig: [],
+				pageVisible: false,
+			};
+		},
+	},
+});
+let baseConfig = ref();
+watch(
+	() => props.config,
+	(value) => {
+		baseConfig.value = value;
+	},
+	{ deep: true, immediate: true }
+);
+let tableModel = defineModel<IFormTable.Table>();
+</script>
+
+<style scoped></style>