hs-admin-ui 1.0.8 → 1.0.9

package/src/components/business/bcPageConfig/components/hsBtn/src/hsBtnPanel.vue

@@ -1,45 +0,0 @@
-<!-- 
-	desc: 配置按钮面板
-	author: 吕玲
- -->
-<template>
-	<div class="mx-auto flex flex-row h-full">
-		<div class="flex-1 grow overflow-y-auto">
-			<!-- 按钮配置 -->
-			<hsExpand v-model="btnTitleConfig.visible" :expandConfig="btnTitleConfig"></hsExpand>
-			<component v-if="btnTitleConfig.visible" :is="hsBtnConfigList" v-model="btnsConfig" :current="currentItem" @chose="onChoseItem"></component>
-		</div>
-		<div v-if="(btnsConfig || []).length > 0 && !!currentItem.id" class="flex-none basis-1/4 ml-4">
-			<component :is="hsAttrBtn" :btnList="btnsConfig" :current="currentItem"></component>
-		</div>
-	</div>
-</template>
-<script setup lang="ts" name="formPanel">
-import { defineModel, ref } from 'vue';
-import hsBtnConfigList from './hsBtnConfigList.vue';
-import hsAttrBtn from './hsAttrBtn.vue';
-import hsExpand from '../../hsExpand/src/hsExpand.vue';
-import { IFormTable } from '/@/types';
-import { emptyBtnItemData } from './../../../default/baseBtnConfig';
-
-import _ from 'lodash';
-
-const btnsConfig = defineModel<Array<IFormTable.BtnItem>>();
-const btnTitleConfig = ref({
-	visible: true,
-	subTitle: '按钮配置',
-	class: 'font-bold my-3',
-	iconSize: 20,
-});
-// 当前选中项配置
-let currentItem = ref(_.cloneDeep(emptyBtnItemData));
-
-/**
- * 选择某配置回调
- */
-const onChoseItem = (item: IFormTable.BtnItem) => {
-	currentItem.value = item;
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/business/bcPageConfig/components/hsBtn/useAttrBtn.ts

@@ -1,73 +0,0 @@
-import { ref, Ref, watch } from 'vue';
-import { ComponentAttr, IFormTable } from '/@/types';
-import hsAttrBtn from './src/hsAttrBtn.vue';
-import { config } from '../../default/baseBtnConfig';
-import { ElMessage } from 'element-plus';
-import { Session } from '/@/utils/storage';
-import { useFieldConfigController, PostRequest } from '/@/api';
-const fieldConfig = useFieldConfigController();
-
-import _ from 'lodash';
-interface BtnRef {
-	getSubmitData: () => boolean;
-}
-export function useHsAttrBtn(props: ComponentAttr.Props<typeof hsAttrBtn>, btnItemRef: Ref<BtnRef>) {
-	// 原始数据
-	let oldItem = ref(props.current);
-	// 当前项绑定数据
-	let btnItemConfig = ref(_.cloneDeep(props.current));
-	/**
-	 * 监听当前项
-	 */
-	watch(
-		() => props.current,
-		(value) => {
-			// 解决切换不同表单项不及时更新数据问题
-			if (value.id != btnItemConfig.value.id) {
-				// value.elConfig.visible = false;
-				oldItem.value = value;
-				btnItemConfig.value = _.cloneDeep(value);
-				// formData.value = props.data;
-			}
-		},
-		{ deep: true }
-	);
-	const btnConfig = ref(_.cloneDeep(config));
-	// 控制表单项属性的展开关闭
-	const visible = ref(false);
-	// 基本配置属性实例
-	/**
-	 * 保存功能
-	 */
-	const saveData = async function () {
-		try {
-			// 校验表单项属性
-			let flag = await btnItemRef.value.getSubmitData();
-			if (!flag) return;
-			// 增加按钮重复校验
-			let keys = _.map(props.btnList, (item: Record<string, IFormTable.Data>) => item.data.key);
-			if (_.includes(keys, btnItemConfig.value.data.key)) {
-				return ElMessage.warning('按钮key值重复');
-			}
-			// 保存表单配置
-			oldItem.value = Object.assign(oldItem.value, _.cloneDeep(btnItemConfig.value));
-			// 如果存在字段池id，则不重复调用保存字段池的方法
-			if (btnItemConfig.value.data.field_id) return;
-			let system = Session.get('CURRENT_SYSTEM');
-			// 整理保存字段池的数据
-			let obj = {
-				field_code: btnItemConfig.value.data.name,
-				field_name: btnItemConfig.value.data.key,
-				field_type: '1', // 【1按钮   2查询条件   3表格字段】
-				json_data: JSON.stringify(btnItemConfig.value),
-				project_code: system.project_code,
-			};
-			// 发送保存字段池的接口
-			fieldConfig.postSaveFieldPool4Config<PostRequest>(obj);
-		} catch (err) {
-			console.log('er', err);
-		}
-	};
-
-	return { visible, btnItemConfig, btnConfig, saveData };
-}

package/src/components/business/bcPageConfig/components/hsBtn/useBtnConfigList.ts

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

package/src/components/business/bcPageConfig/components/hsBtn/useBtnItemConfig.ts

@@ -1,39 +0,0 @@
-import { ref, Ref } from 'vue';
-import { IFormData } from '/@/types';
-import _ from 'lodash';
-
-interface hsBtnItemConfig {
-	getSubmitData: () => boolean;
-}
-export function useHsBtnItemConfig(data: Record<string, IFormData.Data>, baseConfigRef: Ref<hsBtnItemConfig>) {
-	// 表单配置项
-	const parentConfig = ref({
-		labelWidth: 150,
-		span: 24,
-		minWidth: 350,
-		style: 'padding:5px 10px',
-	});
-
-	// ======================================================================== 自动完成 start ================================================================
-	interface RestaurantItem {
-		id: string;
-		field_code: string;
-		field_name: string;
-		json_data: string;
-	}
-	/**
-	 * 切换选择按钮事件
-	 * @param item
-	 */
-	const onChangeItem = (item: RestaurantItem) => {
-		// 	赋值属性值，并把字段池id赋值给field_id【方便单项保存字段池的时候，判断是否存在field_id, 如果不存在则调用保存字段池的方法】
-		data.value = _.assign(data.value, JSON.parse(item.json_data).data, { field_id: item.id });
-		console.debug('handleSelect', data.value);
-	};
-	// ======================================================================== 自动完成 end ==================================================================
-	const getSubmitData = async () => {
-		let flag = await baseConfigRef.value.getSubmitData();
-		return flag;
-	};
-	return { parentConfig, onChangeItem, getSubmitData };
-}

package/src/components/business/bcPageConfig/components/hsExpand/src/hsExpand.vue

@@ -1,33 +0,0 @@
-<template>
-	<div class="flex align-center justify-between cursor-pointer hover:bg-red-200" :class="expandConfig.class">
-		<div class="flex align-center flex-1" @click="toggleExpand">
-			<svgIcon class="pt-1" :name="visible ? 'ele-CaretBottom' : 'ele-CaretRight'" :size="expandConfig.iconSize || 18"></svgIcon>
-			<div>{{ expandConfig['subTitle'] }}</div>
-		</div>
-		<div v-if="expandConfig.rightSlot">
-			<slot></slot>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { defineModel } from 'vue';
-import { useExpand } from '../useExpand';
-defineProps({
-	expandConfig: {
-		type: Object,
-		default: () => {
-			return {
-				iconSize: 18,
-				subTitle: '',
-				class: '',
-				rightSlot: '',
-			};
-		},
-	},
-});
-const visible = defineModel();
-const { toggleExpand } = useExpand(visible);
-</script>
-
-<style scoped></style>

package/src/components/business/bcPageConfig/components/hsExpand/useExpand.ts

@@ -1,9 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useExpand (visible:any) {
-  const toggleExpand = ()=>{
-    visible.value = !visible.value;
-  }
-  return {
-    toggleExpand,
-  }
-}

package/src/components/business/bcPageConfig/components/hsForm/src/hsAttrForm.vue

@@ -1,64 +0,0 @@
-<template>
-	<div class="bg-blue-200 h-full flex flex-col">
-		<div style="height: calc(100% -50px)" class="overflow-y-auto flex-1">
-			<component :is="hsExpand" v-model="visible" :expandConfig="{ subTitle: '表单项代码' }"></component>
-			<div v-if="visible">{{ formItemConfig }}</div>
-			<!-- <template v-if="formItemConfig?.base && (formItemConfig?.baseConfig.list || []).length > 0"> -->
-			<component :is="hsExpand" v-model="tableConfig.baseConfig.visible" :expandConfig="tableConfig.baseConfig.title"></component>
-			<component
-				ref="baseConfigRef"
-				v-show="tableConfig.baseConfig.visible"
-				:parentConfig="parentConfig"
-				:is="'bc-form-config'"
-				:data="formItemConfig?.data.baseData"
-				:config="tableConfig.baseConfig.list"
-				:rules="tableConfig.baseConfig.rules"
-				@change="onChange"
-			>
-				<template #label>
-					<bc-auto-complete
-						:url="requestData.url"
-						:qry_key="requestData.qry_key"
-						:params="requestData.params"
-						type="form"
-						v-model="formItemConfig.data.baseData.label"
-						@change="onChangeItem"
-					></bc-auto-complete>
-				</template>
-			</component>
-			<!-- </template> -->
-			<template v-if="formItemConfig?.data.baseData.el">
-				<component :is="hsExpand" v-model="tableConfig.elConfig.visible" :expandConfig="tableConfig.elConfig.title"></component>
-				<component v-if="tableConfig.elConfig.visible" :data="formItemConfig?.data.elData" :is="elComName" ref="elRef" isVModel></component>
-			</template>
-		</div>
-
-		<div class="text-center grow-0">
-			<hs-button @click="saveData" type="primary">保存</hs-button>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import hsExpand from '../../hsExpand/src/hsExpand.vue';
-import { useHsAttrForm } from './../useAttrForm';
-
-const props = defineProps({
-	current: {
-		type: Object,
-		default: () => {},
-	},
-	data: {
-		type: Object,
-		default: () => {},
-	},
-});
-const baseConfigRef = ref();
-const { parentConfig, visible, formItemConfig, elComName, tableConfig, requestData, onChange, saveData, onChangeItem } = useHsAttrForm(
-	props,
-	baseConfigRef
-);
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/business/bcPageConfig/components/hsForm/src/hsFormConfig.vue

@@ -1,180 +0,0 @@
-<!-- 
-  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/components/business/bcPageConfig/components/hsForm/src/hsFormConfigList.vue

@@ -1,52 +0,0 @@
-<!-- 
-  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)">
-				<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']['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>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref, PropType, defineModel } from 'vue';
-import { useHsFormListConfig } from './../useFormListConfig';
-import { IFormTable } from '/@/types';
-import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus';
-const dragRef = ref<UseDraggableReturn>();
-
-const emit = defineEmits(['chose']);
-
-const configModel = defineModel<IFormTable.FormTable>();
-const prop = defineProps({
-	current: {
-		type: Object as PropType<Record<'id', string>>,
-		default: () => {},
-	},
-});
-
-const { appendField, deleteTagItem, choseTagItem } = useHsFormListConfig(emit, prop, configModel);
-</script>
-
-<style lang="scss" scoped>
-.ghost {
-	opacity: 0.5;
-	background: #c8ebfb;
-}
-</style>

package/src/components/business/bcPageConfig/components/hsForm/src/hsFormPanel.vue

@@ -1,64 +0,0 @@
-<!-- 
-	desc: 配置表单面板
-	author: 吕玲
- -->
-<template>
-	<!-- flex flex-row -->
-	<div class="mx-auto flex flex-row h-full">
-		<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" />
-			<template v-if="configModel?.form">
-				<component :is="hsExpand" v-model="formTitleConfig.form.visible" :expandConfig="formTitleConfig.form"></component>
-				<component :is="'bc-form-config'" v-if="formTitleConfig.form.visible" :data="configModel.form.baseData" :config="baseParentConfig" />
-
-				<component :is="hsExpand" v-model="formTitleConfig.formItem.visible" :expandConfig="formTitleConfig.formItem"></component>
-				<component :is="hsFormConfigList" v-if="formTitleConfig.formItem.visible" v-model="configModel" :current="currentItem" @chose="onChoseItem" />
-			</template>
-		</div>
-		<div v-if="(configModel?.form?.formConfig || []).length > 0 && currentItem.id" class="flex-none basis-1/4 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 { emptyFormItemData, formTitleConfig, parentFormConfig } from '../../../default/baseFormConfig'; // 表单配置方法
-import { IFormTable } from '/@/types';
-import hsExpand from '../../hsExpand/src/hsExpand.vue';
-import _ from 'lodash';
-
-const configModel = defineModel<IFormTable.FormTable>();
-let baseParentConfig = ref(_.cloneDeep(parentFormConfig));
-// 当前选中项配置
-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;
-	// currentItem.value.elConfig.visible = true;
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/business/bcPageConfig/components/hsForm/src/hsFormParse.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="parseForm" type="primary">{{ parseApi ? '一键解析' : '初始化配置' }}</hs-button>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { IFormTable } from '/@/types';
-// /Users/lvping/huasuProjects/pc-admin/src/components/config/inputAttrConfig/config.ts
-import { ref, defineModel } from 'vue';
-import { useHsFormParse } from './../useFormParse';
-
-let configModel = defineModel<IFormTable.FormTable>();
-let parseApi = ref<string>('');
-
-const { parseForm } = useHsFormParse(parseApi, configModel);
-</script>
-
-<style lang="scss" scoped></style>