hs-admin-ui 1.0.6 → 1.0.8

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

@@ -0,0 +1,124 @@
+<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
+						:url="requestData.url"
+						:qry_key="requestData.qry_key"
+						:params="requestData.params"
+						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="item.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="item.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.data.name ? '【' + item.data.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="item.data" :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';
+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,
+	requestData,
+	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';
+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';
+
+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>

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

@@ -0,0 +1,53 @@
+<!-- 
+  desc: 表单配置项集合
+  author: lvling
+ -->
+<template>
+	<div>
+		<VueDraggable ref="dragRef" class="flex flex-wrap" handle=".drag-item" ghostClass="ghost" v-model="btnsModel" :animation="150">
+			<div class="drag-item p-2 relative" v-for="(item, index) in tableModel?.tableConfig" :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']['title']) || (item['data']['type'] && tableItemType[item['data']['type']]) || '' }}
+				</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 { useHsTableListConfig } from './../useTableConfigList';
+import { tableItemType } from './../../../default/baseTableConfig';
+import { IFormTable } from '/@/types';
+import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus';
+const dragRef = ref<UseDraggableReturn>();
+
+const emit = defineEmits(['chose']);
+
+const tableModel = defineModel<IFormTable.Table>();
+const prop = defineProps({
+	current: {
+		type: Object as PropType<Record<'id', string>>,
+		default: () => {},
+	},
+});
+
+const { appendField, deleteTagItem, choseTagItem } = useHsTableListConfig(emit, prop, tableModel.value);
+</script>
+
+<style lang="scss" scoped>
+.ghost {
+	opacity: 0.5;
+	background: #c8ebfb;
+}
+</style>

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

@@ -0,0 +1,68 @@
+<!-- 
+  desc: 配置表格面板
+  author: 吕玲
+ -->
+<template>
+	<div class="mx-auto flex flex-row h-full">
+		<div class="flex-1 grow overflow-y-auto">
+			<component :is="hsExpand" v-model="titleTableConfig.code.visible" :expandConfig="titleTableConfig.code"></component>
+			<div v-if="titleTableConfig.code.visible">{{ tableModel }}</div>
+			<component :is="hsTableParse" v-model="tableModel" />
+			<template v-if="tableModel?.baseData.id">
+				<component :is="hsExpand" v-model="titleTableConfig.table.visible" :expandConfig="titleTableConfig.table"></component>
+				<component :is="hsTableConfig" v-if="titleTableConfig.table.visible" v-model="tableModel" :config="baseParentConfig" />
+
+				<component :is="hsExpand" v-model="titleTableConfig.tableItem.visible" :expandConfig="titleTableConfig.tableItem"></component>
+				<component
+					:is="hsTableConfigList"
+					v-if="titleTableConfig.tableItem.visible"
+					v-model="tableModel"
+					:current="currentItem"
+					@chose="onChoseItem"
+				/>
+			</template>
+		</div>
+		<div v-if="(tableModel?.tableConfig || []).length > 0 && currentItem.id" class="flex-none basis-1/4 ml-4">
+			<component :is="hsAttrTable" :current="currentItem" :configList="tableModel?.tableConfig" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineModel } from 'vue';
+import hsAttrTable from './hsAttrTable.vue'; // 元素配置配置详情
+import hsTableParse from './hsTableParse.vue'; // 一键解析
+import hsTableConfig from './hsTableConfig.vue'; // 表格配置项
+import hsTableConfigList from './hsTableConfigList.vue'; // 表格元素配置项集合
+import { IFormTable } from '/@/types';
+//
+import { tableTitleConfig, emptyTableItemData, baseConfig } from '../../../default/baseTableConfig'; // 表格配置数据
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import _ from 'lodash';
+// 标题配置
+let titleTableConfig = ref(_.cloneDeep(tableTitleConfig.value));
+// 表格配置
+const tableModel = defineModel<IFormTable.Table>();
+const baseParentConfig = ref(_.cloneDeep(baseConfig));
+// 当前选中项配置
+let currentItem = _.cloneDeep(emptyTableItemData);
+let oldId = ref<string>('');
+
+watch(
+	() => tableModel.value,
+	(value) => {
+		if (oldId.value != value?.id) {
+			currentItem.value = _.cloneDeep(emptyTableItemData);
+			oldId.value = value?.id || '';
+		}
+	},
+	{
+		immediate: true,
+	}
+);
+const onChoseItem = (item: IFormTable.TableItem) => {
+	currentItem.value = item;
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,24 @@
+<!-- 
+  desc: 通过查询类名解析表格配置
+  author: 吕玲
+ -->
+<template>
+	<div class="flex flex-row">
+		<hs-input class="basis-1/4 mr-2" v-model="parseApi" placeholder="请输入解析接口" />
+		<hs-button @click="parseTable" type="primary">{{ parseApi ? '一键解析' : '初始化配置' }}</hs-button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineModel } from 'vue';
+import _ from 'lodash';
+import { useHsTableParse } from '../useTableParse';
+import { IFormTable } from '/@/types';
+
+let parseApi = ref('');
+let tableModel = defineModel<IFormTable.Table>();
+
+const { parseTable } = useHsTableParse(parseApi, tableModel);
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/business/bcPageConfig/components/hsTables/useAttrTable.ts

@@ -0,0 +1,257 @@
+import { ref, watch, Ref, onMounted } from 'vue';
+import { ComponentAttr, IFormTable } from '/@/types';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import hsAttrTable from './src/hsAttrTable.vue';
+import { tableConfig, tableColumnRule } from '../../default/baseTableConfig';
+import { btnItemConfig } from '../../default/baseBtnConfig';
+import { useFieldConfigController, PostRequest } from '/@/api';
+const fieldConfig = useFieldConfigController();
+import { Session } from '/@/utils/storage';
+import _ from 'lodash';
+
+interface TableRef {
+	getSubmitData: () => boolean;
+}
+export function useHsAttrTable(props: ComponentAttr.Props<typeof hsAttrTable>, baseTableRef: Ref<TableRef>) {
+	// 原始数据
+	let oldItem = ref(props.current);
+	// 表格项数据配置
+	let tableDataConfig = ref(_.cloneDeep(tableConfig));
+
+	// 当前项绑定数据
+	let tableItemConfig = ref(_.cloneDeep(props.current));
+	let fieldList = ref(_.cloneDeep(props.configList).map((item: IFormTable.TableItem) => item.data.field));
+
+	/**
+	 * 根据类型判断标题和字段名是否必填
+	 * @returns
+	 */
+	const configurationRule = () => {
+		// 获取配置规则数据
+		let rules: Record<string, IFormTable.Data> = _.cloneDeep(tableColumnRule);
+		// 获取配置规则的key值并遍历
+		_.keys(rules).forEach((key: string) => {
+			// 根据列类型的值判断是否必填，返回key的规则校验数据
+			let arr = rules[key].map((item: Record<'required', boolean>) => {
+				item.required = !tableItemConfig.value.data.type;
+				return item;
+			});
+			// 替换修改后的规则
+			rules[key] = arr;
+		});
+		return rules;
+	};
+	/**
+	 * 监听当前项
+	 */
+	watch(
+		() => props.current,
+		(value: Record<string, IFormTable.Data> | undefined) => {
+			// 解决切换不同表单项不及时更新数据问题
+			if (value && value.id != tableItemConfig.value.id) {
+				oldItem.value = value;
+				tableItemConfig.value = _.cloneDeep(value);
+				// (IFormTable.TableItem)
+				fieldList.value = _.cloneDeep(props.configList).map((item: IFormTable.TableItem) => item.data.field);
+				// 更新表单校验规则
+				tableDataConfig.value.rules.list = configurationRule();
+			}
+		},
+		{ deep: true }
+	);
+
+	// 表单配置项
+	const parentConfig = ref({
+		labelWidth: 150,
+		span: 24,
+		style: 'padding:5px 10px',
+	});
+	// 控制表单项属性的展开关闭
+	const visible = ref(false);
+	// 基本配置属性实例
+	/**
+	 * 保存功能
+	 */
+	const saveData = async function () {
+		try {
+			// 校验表单项属性
+			let flag = await baseTableRef.value.getSubmitData();
+			if (!flag) return;
+			// 将默认值根据key值赋值给data中
+			let oldKey = oldItem.value.data.field; // 表单项【old】key值
+			let newKey = tableItemConfig.value.data.field; // 表单项【new】key值
+			// 去除旧数据
+			let tempFieldList = _.cloneDeep(fieldList.value); //.findIndex((item: String) => item != oldKey);
+			let idx = tempFieldList.findIndex((item: String) => item == oldKey);
+			tempFieldList.splice(idx, 1);
+			// 如果修改过key后，修改后的key不能tableConfig 中的field重复
+			if (newKey && _.includes(tempFieldList, newKey)) {
+				return ElMessage.warning(`列字段名重复，请修改`);
+			}
+			// 保存表单配置
+			oldItem.value = Object.assign(oldItem.value, _.cloneDeep(tableItemConfig.value));
+			// 如果存在字段池id，则不重复调用保存字段池的方法
+			if (tableItemConfig.value.data.field_id) return;
+			let system = Session.get('CURRENT_SYSTEM');
+			// 整理保存字段池的数据
+			let obj = {
+				field_code: tableItemConfig.value.data.name,
+				field_name: tableItemConfig.value.data.key,
+				field_type: '2', // 【1按钮   2查询条件   3表格字段】
+				json_data: JSON.stringify(tableItemConfig.value),
+				project_code: system.project_code,
+			};
+			// 发送保存字段池的接口
+			fieldConfig.postSaveFieldPool4Config<PostRequest>(obj);
+		} catch (err) {
+			console.log('er', err);
+		}
+	};
+
+	/**
+	 * 追加筛选配置
+	 */
+	const addFilterItem = () => {
+		// 设置初始化筛选配置
+		tableItemConfig.value?.data.filters?.push({ label: '', value: '', checked: false, resetValue: '', data: '' });
+		// let tempFilterConfig = _.cloneDeep(filterItemConfig.value);
+		// 项筛选配置数组中追加配置
+		// tableItemConfig.value?.filterConfig.push(tempFilterConfig);
+	};
+	/**
+	 * 删除数据筛选配置和数据
+	 * @param index 当前删除项所在的下标
+	 */
+	const deleteFilterConfig = (index: number) => {
+		// 获取筛选条件对象
+		let filterData = tableItemConfig.value.data.filters[index];
+		ElMessageBox.confirm(`确认要删除该${filterData.label}配置吗？`, '提示', {
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning',
+		})
+			.then(() => {
+				// 删除对应的data数据
+				tableItemConfig.value.data.filters.splice(index, 1);
+				// 删除配置数据
+				tableItemConfig.value.filterConfig.splice(index, 1);
+				ElMessage.success('删除成功');
+			})
+			.catch((err) => {
+				console.log('err', err);
+			});
+	};
+
+	/**
+	 * 切换列类型
+	 * @param value
+	 * @param prop
+	 */
+	const onChange = (value: string, prop: string) => {
+		if (prop == 'type') {
+			// 切换表单项列的类型时，根据type的是否存在值 规定校验规则
+			tableDataConfig.value.rules.list = configurationRule();
+		}
+	};
+	// =================================================== 按钮配置 start ================================================
+
+	/**
+	 * 增加按钮配置
+	 */
+	const addBtnItem = () => {
+		console.log('tableItemConfig.value', tableItemConfig.value);
+		let btnItem = _.cloneDeep(btnItemConfig);
+		btnItem.id = new Date().getTime().toString();
+		// 追加按钮配置数据
+		tableItemConfig.value.btnData.push(btnItem);
+	};
+	/**
+	 * 删除按钮配置
+	 * @param index
+	 */
+	const deleteBtnItem = (index: number) => {
+		// 获取按钮数据对象
+		let btnData = tableItemConfig.value.btnData[index];
+		console.log('btnData', btnData);
+
+		// 二次确认弹窗
+		ElMessageBox.confirm(`确认要删除该${btnData.name ? '【' + btnData.name + '】' : ''}按钮配置吗？`, '提示', {
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning',
+		})
+			.then(() => {
+				// 删除对应的data数据
+				tableItemConfig.value.btnData.splice(index, 1);
+				// 给出操作提示
+				ElMessage.success('删除成功');
+			})
+			.catch((err) => {
+				console.log('err', err);
+			});
+	};
+	// =================================================== 按钮配置 end ================================================
+
+	// ======================================================================== 自动完成 start ================================================================
+	interface RestaurantItem {
+		field_code: string;
+		field_name: string;
+		json_data: string;
+		id: string;
+	}
+
+	// 自动完成查询的地址和参数
+	let requestData = ref({
+		url: '', // sysData.project_url + '/pri/field_config/get_field_pool_list',
+		params: {
+			currentPage: 1,
+			field_type: '3', // 【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,
+		});
+	});
+
+	/**
+	 * 自动完成切换事件回调
+	 * @param item
+	 */
+	const onChangeItem = (item: RestaurantItem) => {
+		let fieldData = JSON.parse(item.json_data);
+		// 字段池数据赋值
+		tableItemConfig.value.data = _.assign(tableItemConfig.value.data, fieldData.data, { field_id: fieldData.id });
+	};
+
+	// ======================================================================== 自动完成 end ==================================================================
+
+	return {
+		parentConfig,
+		visible,
+		tableItemConfig,
+		tableDataConfig,
+		requestData,
+		onChangeItem,
+		saveData,
+		onChange,
+		// 过滤条件
+		addFilterItem,
+		deleteFilterConfig,
+		// 按钮
+		addBtnItem,
+		deleteBtnItem,
+	};
+}