hs-admin-ui 1.0.8 → 1.0.9

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

@@ -1,120 +0,0 @@
-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

@@ -1,209 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,11 +0,0 @@
-<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

@@ -1,91 +0,0 @@
-<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

@@ -1,39 +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">
-				{{ 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

@@ -1,52 +0,0 @@
-<!-- 
-  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

@@ -1,67 +0,0 @@
-<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>