hs-admin-ui 1.0.6 → 1.0.8

package/src/components/business/bcFormTable/utils/onTableKey.ts

@@ -0,0 +1,120 @@
+import { onKeyStroke } from '@vueuse/core';
+import { ComponentAttr, ICustomData } from '/@/types';
+import { fetchTableData } from '/@parseTable';
+import BcFormTable from '../bcFormTable.vue';
+import { VxeTableInstance, VxePagerDefines } from 'vxe-table';
+import { Ref, reactive, computed, toValue } from 'vue';
+import _ from 'lodash';
+
+export const tableIndex = reactive({
+	rowIndex: 0,
+	columnIndex: 0,
+});
+export function onTableKey(
+	formRef: Ref<ICustomData.ANY>,
+	tablesRef: Ref<Record<string, VxeTableInstance>>,
+	activeTabs: Ref<string>,
+	props: ComponentAttr.Props<typeof BcFormTable>
+) {
+	const tableRef = computed(() => tablesRef.value[activeTabs.value]);
+	const cursor = ['checkbox', 'expand', 'radio', 'seq'];
+	const menuTable = [
+		{ label: '右键1', value: '111' },
+		{ label: '右键2', value: '222' },
+		{ label: '右键3', value: '333' },
+		{ label: '右键4', value: '444' },
+		{ label: '右键5', value: '555' },
+	];
+
+	function setFocus() {
+		const row = toValue(tableRef)?.getData(tableIndex.rowIndex);
+		// 获取可视列数据
+		const { visibleColumn } = toValue(tableRef)!.getTableColumn();
+		const columnField = visibleColumn[tableIndex.columnIndex].field;
+		toValue(tableRef)?.setCurrentRow(row); // 设置当前行
+		toValue(tableRef)
+			?.setEditRow(row, columnField)
+			.then(() => {
+				const { rowIndex, columnIndex } = toValue(tableRef)!.getEditRecord()!;
+				tableIndex.rowIndex = rowIndex ?? 0;
+				tableIndex.columnIndex = columnIndex ?? 0;
+			});
+	}
+
+	// 分页加载
+	async function onPageChange(params: VxePagerDefines.PageChangeEventParams) {
+		const table = props.data!.tables.find((i) => i.id === activeTabs.value)!;
+		const pager = table.baseData.table_page_data;
+		pager!.currentPage = params.currentPage;
+		table.tableData = await fetchTableData(pager!, props.data!.form!.formData);
+	}
+
+	// 键盘右移动
+	onKeyStroke('ArrowRight', (e) => {
+		e.preventDefault();
+		const activeElement = document.activeElement as Element;
+		if (!activeElement.closest('.bc-table__content')) return;
+		const { visibleColumn } = toValue(tableRef)!.getTableColumn();
+		tableIndex.columnIndex++;
+		if (tableIndex.columnIndex > visibleColumn.length - 1) {
+			tableIndex.columnIndex = 0;
+		}
+		if (cursor.includes(visibleColumn[tableIndex.columnIndex]?.type as string)) {
+			const num = visibleColumn.filter((i) => i.type).length;
+			tableIndex.columnIndex = tableIndex.columnIndex + num;
+		}
+		setFocus();
+	});
+
+	// 键盘左移动
+	onKeyStroke('ArrowLeft', (e) => {
+		e.preventDefault();
+		const activeElement = document.activeElement as Element;
+		if (!activeElement.closest('.bc-table__content')) return;
+		const { visibleColumn } = toValue(tableRef)!.getTableColumn();
+		tableIndex.columnIndex--;
+		if (cursor.includes(visibleColumn[tableIndex.columnIndex]?.type as string)) {
+			const num = visibleColumn.filter((i) => i.type).length;
+			tableIndex.columnIndex = tableIndex.columnIndex - num;
+		}
+		if (tableIndex.columnIndex < 0) {
+			tableIndex.columnIndex = visibleColumn.length - 1;
+		}
+		setFocus();
+	});
+
+	// 键盘上移动
+	onKeyStroke('ArrowUp', (e) => {
+		e.preventDefault();
+		const activeElement = document.activeElement as Element;
+		if (!activeElement.closest('.bc-table__content')) return;
+		const tableData = toValue(tableRef)!.getData();
+		tableIndex.rowIndex--;
+		if (tableIndex.rowIndex < 0) {
+			// 1. 表格循环上下切换
+			tableIndex.rowIndex = tableData.length - 1;
+			// 2. 切换表单查询
+			// tableIndex.rowIndex = 0
+			// _.get(toValue(formRef), 'componentRef.0')?.focus();
+		}
+		setFocus();
+	});
+
+	// 键盘下移动
+	onKeyStroke('ArrowDown', (e) => {
+		e.preventDefault();
+		const activeElement = document.activeElement as Element;
+		if (!activeElement.closest('.bc-table__content')) return;
+		const tableData = toValue(tableRef)!.getData();
+		tableIndex.rowIndex++;
+		if (tableIndex.rowIndex > tableData.length - 1) {
+			tableIndex.rowIndex = 0;
+		}
+		setFocus();
+	});
+
+	return {
+		menuTable,
+		onPageChange,
+	};
+}

package/src/components/business/bcFormTable/utils/parseTable.ts

@@ -0,0 +1,209 @@
+import _ from 'lodash';
+import { Ref, ComputedRef } from 'vue';
+import { VxeTableInstance, VxePagerProps } from 'vxe-table';
+import { Component } from '/@/components/component';
+import { IFormData, IFormTable, ICustomData } from '/@/types';
+import { getFormDataType, getTableDataType, formStore } from '/@/utils';
+import CustomeMethods from '../methods';
+
+/** 对外导出表格参数实例 */
+export interface TableParams {
+	tableApi: Ref<Record<string, VxeTableInstance>>;
+	activeTabs: Ref<string>;
+	api: ComputedRef<VxeTableInstance>;
+}
+
+/** 递归遍历属性，设置更新值 */
+export function setPropertyData<T extends IFormTable.Data>(params: T) {
+	const method = /method=/;
+	const string = /string=/;
+
+	function setProperty(property: T) {
+		for (let i in property) {
+			// 1.解析自定义方法
+			if (method.test(property[`${i}_2`])) {
+				property[i] = CustomeMethods[property[`${i}_2`].split('=')[1]];
+			} else if (method.test(property[i]) && property[i].split('=')[1]) {
+				(property as ICustomData.ANY)[`${i}_2`] = property[i];
+				property[i] = CustomeMethods[property[i].split('=')[1]];
+			}
+			// 2.解析自定义数据
+			if (string.test(property[i])) {
+				if (property[i].split('=')[1]) {
+					property[i] = new Function('return ' + property[i].split('=')[1])();
+				} else {
+					(property as ICustomData.ANY)[i] = [];
+				}
+			}
+			if (_.isObject(property[i]) && !_.isEmpty(property[i])) {
+				setProperty(property[i]);
+			}
+		}
+	}
+	setProperty(params);
+
+	return params;
+}
+
+/** 根据权限获取是否显示 */
+function getAuth(config: ICustomData.FormItemConfigData['baseData']) {
+	if (!config.isShow) return false;
+	return true;
+}
+
+export function getRender(el: Component) {
+	// 解析下拉框
+	if (el === 'hs-select') return 'bc-select';
+	// 解析下拉树组件
+	if (el === 'hs-tree-select') return 'bc-tree-select';
+	return el;
+}
+
+/** 格式化搜索区域表单数据 */
+export async function getSearchForm<T = ICustomData.Form>(data: ICustomData.FormTable): Promise<T> {
+	if (!data.form) return Promise.resolve({} as T);
+	// 获取缓存类配置项信息
+	const { form } = await formStore.get<ICustomData.FormTable>(data.config_unique_id);
+	const formConfig = form?.formConfig.filter((i) => {
+		const isShow = getAuth(i.data.baseData);
+		if (isShow) {
+			// 解构属性数据
+			const elData = setPropertyData(i.data.elData);
+			i.data.elData = {
+				...elData.attrs,
+				..._.omit(elData, 'attrs'),
+			};
+
+			i.data.baseData.el = getRender(i.data.baseData.el);
+		}
+
+		return isShow;
+	});
+
+	const baseData = _.omit(setPropertyData(data.form.baseData), ['inline', 'gutter', 'justify', 'align']);
+
+	return {
+		baseData,
+		formConfig,
+		formData: data.form.formData,
+	} as T;
+}
+
+export function getTableDatas<T = ICustomData.Table[]>(params: ICustomData.FormTable) {
+	const tables = params.tables.map((i) => getTableCache(i, params));
+	return Promise.all(tables) as Promise<T>;
+}
+
+/** 获取表格缓存本地列配置信息 */
+async function getTableCache(data: ICustomData.Table, config: ICustomData.FormTable) {
+	const result = await formStore.get<ICustomData.FormTable>(config.config_unique_id);
+	const tableCache = result?.tables?.find((i) => i.id === data.id);
+	// 1. 缓存数据不存在
+	if (!tableCache) {
+		return {};
+	}
+	// 2.缓存存在，本地与接口列字段数据相同，取缓存值
+	if (columnIsEqual(tableCache, data)) {
+		const table = await getTableData(tableCache, config.form!.formData);
+		return table;
+	}
+	// 3.缓存存在，本地与接口列字段数据不相同，取接口值
+	const table = await getTableData(data, config.form!.formData);
+	return table;
+}
+/** 判断数据列字段是否变动 */
+function columnIsEqual(cache: ICustomData.Table, origin: ICustomData.Table) {
+	const cacheData = cache.tableConfig.map((i) => i.data.field).sort();
+	const originData = origin.tableConfig.map((i) => i.data.field).sort();
+	return _.isEqual(cacheData, originData);
+}
+
+/** 格式化表数据 */
+export async function getTableData(data: ICustomData.Table, formData: ICustomData.Form['formData']) {
+	const params = _.cloneDeep(data) as ICustomData.Table;
+	params.baseData = setPropertyData(_.omit(params.baseData, 'data'));
+	params.tableConfig = params.tableConfig.filter((i) => {
+		const isShow = getAuth(i.data as ICustomData.ANY);
+
+		if (isShow) {
+			i.data = setPropertyData(i.data);
+			i.btnData = i.btnData?.map((i) => setPropertyData(i)) || [];
+		}
+
+		return isShow;
+	});
+	const tableData = await fetchTableData(params.baseData.table_page_data!, formData);
+
+	return {
+		id: params.id,
+		baseData: params.baseData,
+		tableConfig: params.tableConfig,
+		tableData,
+	};
+}
+
+/** 调用接口获取表格数据 */
+export async function fetchTableData(pager: VxePagerProps, formData: ICustomData.Form['formData']) {
+	pager.pagerCount = 2;
+	pager.total = 18;
+	const item = (i: number) => {
+		return {
+			order_no: i,
+			order_type: i,
+			pay_state: i,
+			commodity_no: i,
+			common_name: i,
+			btns: i,
+		};
+	};
+	if (pager.currentPage === 2) {
+		return Array.from({ length: 8 }, (_, i) => item(i));
+	}
+	return Array.from({ length: 10 }, (_, i) => item(i));
+}
+
+/** 接口数据
+ * 1. 获取配置项目
+ * 2. 加载权限数据
+ * 3. 整合配置数据信息
+ * 4. 根据配置项获取数据
+ */
+export async function getLoadData(data: ICustomData.FormTable) {
+	const config = _.cloneDeep(data) as ICustomData.FormTable;
+	// 更新原始缓存
+	await formStore.set(`${config.config_unique_id}_origin`, config);
+	// 获取当前缓存
+	const cache = await formStore.get<ICustomData.FormTable>(config.config_unique_id);
+	if (!cache) {
+		await formStore.set(config.config_unique_id, config);
+	}
+	const form = await getSearchForm(config);
+	const tables = await getTableDatas(config);
+
+	if (__IS_DEV__) {
+		getTableDataType(tables);
+	}
+
+	return {
+		...config,
+		form,
+		tables,
+	} as ICustomData.FormTable;
+}
+
+export function getFormData(data: IFormData.Form) {
+	const result = _.cloneDeep(data) as IFormData.Form;
+	const form = result.form.map((i) => {
+		i.config = setPropertyData(i.config);
+		return i;
+	});
+
+	if (__IS_DEV__) {
+		console.debug(getFormDataType(result));
+	}
+
+	return {
+		...result,
+		form,
+	};
+}

package/src/components/business/bcFormTable/utils/useButon.ts

@@ -0,0 +1,19 @@
+import { ComponentAttr, ICustomData } from '/@/types';
+import { Ref, ComputedRef, computed } from 'vue';
+import { VxeTableInstance } from 'vxe-table';
+import BcFormTable from '../bcFormTable.vue';
+
+export function useButon(
+	formRef: Ref<ICustomData.ANY>,
+	tablesRef: Ref<Record<string, VxeTableInstance>>,
+	activeTabs: Ref<string>,
+	props: ComponentAttr.Props<typeof BcFormTable>
+) {
+	const btns: ComputedRef<ICustomData.Btns[]> = computed(() => {
+		return props.data?.btns || [];
+	});
+
+	return {
+		btns,
+	};
+}

package/src/components/business/bcFormTable/utils/useTableHeight.ts

@@ -0,0 +1,44 @@
+import { computed, ref, nextTick } from 'vue';
+import { VxeTableInstance } from 'vxe-table';
+import { useElementSize } from '@vueuse/core';
+
+export function useTableHeight() {
+	const isOverHide = ref(false); // 解决切换查询条件时，出现滚动条造成弹屏问题
+	const wrapRef = ref<HTMLElement>();
+	const btnRef = ref<HTMLElement>();
+	const formRef = ref<HTMLElement>();
+	const tableApi = ref<Record<string, VxeTableInstance>>({});
+
+	const { height: wrapHeight } = useElementSize(wrapRef);
+	const { height: btnHeight } = useElementSize(btnRef, { height: 0, width: 0 });
+	const { height: formHeight } = useElementSize(formRef, { height: 0, width: 0 });
+
+	const style = computed(() => {
+		const height = wrapHeight.value > 0 ? `${wrapHeight.value - btnHeight.value - formHeight.value}px` : '0px';
+		return {
+			height,
+		};
+	});
+
+	function onReady(api: VxeTableInstance, id: string) {
+		tableApi.value[id] = api;
+	}
+
+	function onHeightChange() {
+		isOverHide.value = true;
+		nextTick(() => {
+			isOverHide.value = false;
+		});
+	}
+
+	return {
+		wrapRef,
+		btnRef,
+		formRef,
+		tableApi,
+		style,
+		isOverHide,
+		onReady,
+		onHeightChange,
+	};
+}

package/src/components/business/bcIcon/bcIcon.vue

@@ -0,0 +1,11 @@
+<template>
+	<i v-if="icon.indexOf('iconfont') > -1" :class="[icon]" />
+	<el-icon v-else><component :is="icon" /></el-icon>
+</template>
+<script lang="ts" setup name="bcIcon">
+interface Props {
+	icon: string;
+}
+defineProps<Props>();
+</script>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,91 @@
+<template>
+	<div class="flex flex-col h-full">
+		<div class="flex-1 system-user-container" style="height: 300px">
+			<hs-tabs ref="tabsRef" v-model="tabsActiveName" class="h-full tabs" type="border-card" addable @edit="handleTabsEdit">
+				<hs-tab-pane class="tab-pane" label="按钮配置" name="btn">
+					<component :is="hsBtnPanel" v-model="panelConfig.btns" />
+				</hs-tab-pane>
+				<hs-tab-pane class="tab-pane" label="查询条件配置" name="form">
+					<component :is="hsFormPanel" v-model="panelConfig" />
+				</hs-tab-pane>
+				<hs-tab-pane
+					v-for="(item, index) in panelConfig.tables"
+					:key="index"
+					class="tab-pane"
+					:label="item.baseData['tableName'] || '表格配置名称'"
+					:name="item.id"
+					closable
+				>
+					<component :is="hsTablePanels" closable v-model="panelConfig.tables[index]" />
+				</hs-tab-pane>
+			</hs-tabs>
+		</div>
+		<component
+			:configs="configs"
+			ref="saveFormRef"
+			:is="saveForm"
+			@change="changeConfig"
+			@save="saveFormTableConfig"
+			@delete="deleteConfig"
+		></component>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import hsFormPanel from './components/hsForm/src/hsFormPanel.vue';
+// import hsTablePanel from './components/hsTable/src/hsTablePanel.vue';
+import { IFormTable } from '/@/types';
+import hsTablePanels from './components/hsTables/src/hsTablePanel.vue';
+import hsBtnPanel from './components/hsBtn/src/hsBtnPanel.vue';
+import saveForm from './components/hsSaveForm/src/saveForm.vue';
+import { useHsPageConfig } from './usePageConfig'; //'./usePageConfig';
+
+let panelConfig = ref<IFormTable.FormTable>({
+	id: '', // 配置id
+	config_type: '1', // 配置类型
+	config_unique_id: '', // 配置唯一标识
+	config_name: '', // 配置名称
+	btns: [], // 按钮配置
+	tables: [
+		{
+			id: 'table_' + new Date().getTime().toString(),
+			baseData: { id: '', tableName: '表格配置名称' },
+			tableConfig: [],
+		},
+	],
+});
+// 页面所在的所有配置
+let configs = ref<Array<IFormTable.FormTable>>([]);
+let saveFormRef = ref();
+const emits = defineEmits(['refresh']);
+
+// 将方法暴露
+const { handleTabsEdit, saveFormTableConfig, changeConfig, initData, tabsActiveName, deleteConfig } = useHsPageConfig(
+	panelConfig,
+	configs,
+	saveFormRef,
+	emits
+);
+defineExpose({ initData });
+</script>
+
+<style scoped lang="scss">
+.system-user-container {
+	:deep(.el-card__body) {
+		height: 100% !important;
+	}
+
+	:deep(.el-tabs__content) {
+		height: calc(100% - 39px);
+	}
+}
+.tabs {
+	:deep(.el-tabs__new-tab) {
+		margin: 10px 10px 10px 0px;
+	}
+}
+.tab-pane {
+	height: 100% !important;
+}
+</style>

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

@@ -0,0 +1,39 @@
+<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">
+				{{ btnItemConfig }}
+			</div>
+			<component :is="hsExpand" v-model="btnConfig.visible" :expandConfig="btnConfig.title"></component>
+			<component :is="hsBtnItemConfig" v-show="btnConfig.visible" ref="btnItemRef" v-model="btnItemConfig.data" :config="btnConfig"></component>
+		</div>
+
+		<div class="text-center grow-0" style="height: 50rpx">
+			<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 hsBtnItemConfig from './hsBtnItemConfig.vue';
+import { useHsAttrBtn } from './../useAttrBtn';
+import { IFormTable } from '/@/types';
+const props = defineProps({
+	current: {
+		type: Object,
+		default: () => {},
+	},
+	btnList: {
+		type: Array<IFormTable.BtnItem>,
+		default: () => [],
+	},
+});
+const btnItemRef = ref();
+const { visible, btnItemConfig, btnConfig, saveData } = useHsAttrBtn(props, btnItemRef);
+</script>
+
+<style lang="scss" scoped></style>
+<!--  -->

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

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

package/src/components/business/bcPageConfig/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>