hs-admin-ui 1.0.5 → 1.0.8

package/src/views/system/formSetting/components/hsBtn/src/hsBtnItemConfig.vue

@@ -0,0 +1,67 @@
+<template>
+	<component ref="baseConfigRef" :parentConfig="parentConfig" :is="'bc-form-config'" :data="data" :config="config.list" :rules="config.rules">
+		<template #name>
+			<bc-auto-complete
+				:url="requestData.url"
+				:qry_key="requestData.qry_key"
+				:params="requestData.params"
+				type="btn"
+				v-model="data.name"
+				@change="onChangeItem"
+			></bc-auto-complete>
+		</template>
+		<template #btnIcon>
+			<IconSelector placeholder="请选择图标" clearable :isShowPrepend="false" v-model="data.btnIcon" title="" />
+		</template>
+	</component>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import _ from 'lodash';
+import { Session } from '/@/utils/storage';
+import IconSelector from '/@/components/iconSelector/index.vue';
+import { useHsBtnItemConfig } from './../useBtnItemConfig';
+// const props =
+defineProps({
+	config: {
+		type: Object,
+		default: () => {},
+	},
+});
+
+let requestData = ref({
+	url: '', // sysData.project_url + '/pri/field_config/get_field_pool_list',
+	params: {
+		currentPage: 1,
+		field_type: '1', // 【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 data: Record<string, any> = defineModel();
+const baseConfigRef = ref();
+// let sysData = Session.get('CURRENT_SYSTEM');
+
+const { parentConfig, onChangeItem, getSubmitData } = useHsBtnItemConfig(data, baseConfigRef);
+
+defineExpose({ getSubmitData });
+</script>
+
+<style lang="scss" scoped></style>

package/src/views/system/formSetting/components/hsBtn/src/hsBtnPanel.vue

@@ -0,0 +1,45 @@
+<!-- 
+	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/views/system/formSetting/components/hsBtn/useAttrBtn.ts

@@ -0,0 +1,73 @@
+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/views/system/formSetting/components/hsBtn/useBtnConfigList.ts

@@ -0,0 +1,67 @@
+/* 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/views/system/formSetting/components/hsBtn/useBtnItemConfig.ts

@@ -0,0 +1,39 @@
+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/views/system/formSetting/components/hsExpand/src/hsExpand.vue

@@ -0,0 +1,27 @@
+<template>
+	<div @click="toggleExpand" class="flex align-center cursor-pointer hover:bg-red-200" :class="expandConfig.class" >
+		<svgIcon class="pt-1" :name="visible? 'ele-CaretBottom': 'ele-CaretRight'" :size="expandConfig.iconSize || 18"></svgIcon>
+		<div>{{expandConfig['subTitle']}}</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:''
+      }
+    }
+  }
+})
+const visible = defineModel()
+const {toggleExpand } = useExpand(visible);
+</script>
+
+<style scoped></style>

package/src/views/system/formSetting/components/hsExpand/useExpand.ts

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

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

@@ -0,0 +1,144 @@
+<template>
+	<transition name="el-zoom-in-center">
+		<div
+			aria-hidden="true"
+			class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
+			role="tooltip"
+			data-popper-placement="bottom"
+			:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
+			:key="Math.random()"
+			v-show="state.isShow"
+		>
+			<ul class="el-dropdown-menu">
+				<template v-for="(v, k) in dropdownList">
+					<li
+						class="el-dropdown-menu__item"
+						aria-disabled="false"
+						tabindex="-1"
+						:key="k"
+						v-if="!v.affix"
+						@click="onCurrentContextmenuClick(v.contextMenuClickId)"
+					>
+						<SvgIcon v-if="v.icon" :name="v.icon" />
+						<span>{{ v.txt }}</span>
+					</li>
+				</template>
+			</ul>
+			<div class="el-popper__arrow" :style="{ left: `${state.arrowLeft}px` }"></div>
+		</div>
+	</transition>
+</template>
+
+<script setup lang="ts" name="layoutTagsViewContextmenu">
+import { computed, reactive, onMounted, onUnmounted, watch } from 'vue';
+
+// 定义父组件传过来的值
+const props = defineProps({
+	dropdown: {
+		type: Object,
+		default: () => {
+			return {
+				x: 0,
+				y: 0,
+			};
+		},
+	},
+	dropdownList: {
+		type: Array as any,
+		default: () => {
+			return [
+				// { contextMenuClickId: 0, txt: '刷新1', affix: false, icon: '' },
+				// { contextMenuClickId: 1, txt: '关闭', affix: false, icon: 'ele-Close' },
+				// { contextMenuClickId: 2, txt: '关闭其它', affix: false, icon: 'ele-CircleClose' },
+				// { contextMenuClickId: 3, txt: '全部关闭', affix: false, icon: 'ele-FolderDelete' },
+				// { contextMenuClickId: 4, txt: '当前页全屏', affix: false, icon: 'iconfont icon-fullscreen' },
+			];
+		},
+	},
+});
+
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['currentContextmenuClick']);
+
+// 定义变量内容
+const state = reactive({
+	isShow: false,
+	// dropdownList: [
+	// 	{ contextMenuClickId: 0, txt: '刷新', affix: false, icon: 'ele-RefreshRight' },
+	// 	{ contextMenuClickId: 1, txt: '关闭', affix: false, icon: 'ele-Close' },
+	// 	{ contextMenuClickId: 2, txt: '关闭其它', affix: false, icon: 'ele-CircleClose' },
+	// 	{ contextMenuClickId: 3, txt: '全部关闭', affix: false, icon: 'ele-FolderDelete' },
+	// 	{ contextMenuClickId: 4, txt: '当前页全屏', affix: false, icon: 'iconfont icon-fullscreen' },
+	// ],
+	item: {},
+	arrowLeft: 10,
+});
+
+// 父级传过来的坐标 x,y 值
+const dropdowns = computed(() => {
+	// 117 为 `Dropdown 下拉菜单` 的宽度
+	if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
+		return {
+			x: document.documentElement.clientWidth - 117 - 5,
+			y: props.dropdown.y,
+		};
+	} else {
+		return props.dropdown;
+	}
+});
+// 当前项菜单点击
+const onCurrentContextmenuClick = (contextMenuClickId: number) => {
+	emit('currentContextmenuClick', Object.assign({}, { contextMenuClickId }, state.item));
+};
+// 打开右键菜单
+const openContextmenu = (item: any) => {
+	// state.item = item;
+	closeContextmenu();
+	setTimeout(() => {
+		state.isShow = true;
+	}, 10);
+};
+// 关闭右键菜单
+const closeContextmenu = () => {
+	state.isShow = false;
+};
+// 监听页面监听进行右键菜单的关闭
+onMounted(() => {
+	document.body.addEventListener('click', closeContextmenu);
+});
+// 页面卸载时，移除右键菜单监听事件
+onUnmounted(() => {
+	document.body.removeEventListener('click', closeContextmenu);
+});
+// 监听下拉菜单位置
+watch(
+	() => props.dropdown,
+	({ x }) => {
+		if (x + 117 > document.documentElement.clientWidth) state.arrowLeft = 117 - (document.documentElement.clientWidth - x);
+		else state.arrowLeft = 10;
+	},
+	{
+		deep: true,
+	}
+);
+
+// 暴露变量
+defineExpose({
+	openContextmenu,
+});
+</script>
+
+<style scoped lang="scss">
+.custom-contextmenu {
+	transform-origin: center top;
+	z-index: 2190;
+	position: fixed;
+	.el-dropdown-menu__item {
+		font-size: 12px !important;
+		white-space: nowrap;
+		i {
+			font-size: 12px !important;
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,100 @@
+<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?.data }}
+			</div>
+			<template v-if="formItemConfig?.baseConfig && (formItemConfig?.baseConfig.list || []).length > 0">
+				<el-tabs type="border-card" editable @edit="handleTabsEdit" class="w-full" v-model="editableTabsValue">
+					<el-tab-pane v-for="(item, index) in formItemConfig?.data.elementItem" :label="'子项' + (index + 1)" :key="index" :name="index">
+						<!-- 表单项属性 -->
+						<component :is="hsExpand" v-model="formItemConfig.baseConfig.visible" :expandConfig="formItemConfig.baseConfig.title"></component>
+						<component
+							ref="baseConfigRef"
+							v-show="formItemConfig.baseConfig.visible"
+							:parentConfig="parentConfig"
+							:is="'bc-form-config'"
+							:data="formItemConfig?.data.elementItem[index].baseData"
+							:config="index === 0 ? formItemConfig.baseConfig.list : formItemConfig.baseConfig2.list"
+							:rules="formBaseRule"
+							@change="(value: string, item: string) => onChange(value, item, index)"
+						>
+							<template #label>
+								<bc-auto-complete
+									:url="requestData.url"
+									:qry_key="requestData.qry_key"
+									:params="requestData.params"
+									type="form"
+									v-model="formItemConfig.data.elementItem[index].baseData.label"
+									@change="onChangeItem"
+								></bc-auto-complete>
+							</template>
+						</component>
+						<template v-if="formItemConfig?.data.elementItem[index].baseData.el">
+							<!-- 元素项属性 -->
+							<component :is="hsExpand" v-model="formItemConfig.elConfig.visible" :expandConfig="formItemConfig.elConfig.title"></component>
+							<component
+								v-if="formItemConfig.elConfig.visible"
+								:data="formItemConfig?.data.elementItem[index].elData"
+								:is="elComName[index]"
+								ref="elRef"
+								isVModel
+							></component>
+						</template>
+					</el-tab-pane>
+				</el-tabs>
+			</template>
+			<template v-if="formItemConfig?.layoutConfig && (formItemConfig?.layoutConfig.list || []).length > 0">
+				<component :is="hsExpand" v-model="formItemConfig.layoutConfig.visible" :expandConfig="formItemConfig.layoutConfig.title"></component>
+				<component
+					v-if="formItemConfig.layoutConfig.visible"
+					:parentConfig="parentConfig"
+					:is="'bc-form-config'"
+					:data="formItemConfig?.data.layoutData"
+					:config="formItemConfig?.layoutConfig.list"
+				/>
+			</template>
+		</div>
+
+		<div class="text-center grow-0">
+			<hs-button @click="saveData(editableTabsValue)" type="primary">保存</hs-button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import { formBaseRule } from '../../../default/baseFormConfig';
+import { useHsAttrForm } from './../useAttrForm';
+
+const props = defineProps({
+	current: {
+		type: Object,
+		default: () => {},
+	},
+	data: {
+		type: Object,
+		default: () => {},
+	},
+});
+// baseConfigRef是在循环中使用的，所以需要使用ref()包裹
+const baseConfigRef = ref([]);
+const editableTabsValue = ref(0);
+const { parentConfig, visible, formItemConfig, elComName, onChange, saveData, handleTabsEdit, requestData, onChangeItem } = useHsAttrForm(
+	props,
+	baseConfigRef
+);
+watch(
+	() => props.current,
+	(newVal, oldVal) => {
+		if (newVal.id !== oldVal.id) {
+			editableTabsValue.value = 0;
+		}
+	},
+	{ deep: true }
+);
+</script>
+
+<style lang="scss" scoped></style>