hs-admin-ui 1.0.0

package/src/views/test/test/useFormConfig.ts

@@ -0,0 +1,192 @@
+import _ from 'lodash';
+import { Ref, ref } from 'vue';
+import { ElMessageBox, ElMessage, TabPaneName } from 'element-plus';
+import IFormTable from '/@/types/formTable';
+import { find } from 'lodash';
+
+export function useHsFormTable(panelConfig: Ref<IFormTable.FormConfig>, tabsActiveName: Ref<string>) {
+	/**
+	 * 添加表格配置
+	 */
+	const addTabPanel = () => {
+		panelConfig.value.forms.push({
+			id: 'form_' + (panelConfig.value.forms.length + 1),
+			base: { label: '表单配置名称', fieldID: '', grid: 3 },
+			form: {
+				baseData: { rowGap: 0, columnGap: 0 },
+				formConfig: [],
+				formData: {},
+			},
+			component: {
+				baseData: {},
+			},
+			slot: {
+				baseData: {},
+			},
+			formItemType: 'form',
+		});
+	};
+	/**
+	 * 移除tabs项
+	 * @param targetName
+	 * @returns
+	 */
+	const removeTabPanel = (targetName: TabPaneName | undefined) => {
+		// 查询当前表单配置对象
+		let form = find(panelConfig.value.forms, (item: IFormTable.FormbaseData) => item['id'] == targetName);
+		console.log('form', form);
+		// 删除表单配置提示
+		ElMessageBox.confirm(`确定删除${form?.base['formName'] || '表单配置'}吗？`, '提示', {
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning',
+		})
+			.then(() => {
+				// 移除配置
+				_.remove(panelConfig.value.forms, (item: IFormTable.FormbaseData) => targetName && item.id == targetName);
+				// 给出操作成功提示
+				ElMessage.success('删除成功');
+				if (tabsActiveName.value == targetName) {
+					tabsActiveName.value = 'form_1';
+				}
+			})
+			.catch((err) => {
+				console.log('err', err);
+			});
+	};
+	/**
+	 * 编辑tabs
+	 * @param targetName
+	 * @param action
+	 */
+	const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' | 'add') => {
+		switch (action) {
+			case 'remove':
+				// 删除配置
+				removeTabPanel(targetName);
+				break;
+			case 'add':
+				// 新增配置
+				addTabPanel();
+				break;
+		}
+	};
+	let config = ref();
+	/**
+	 * 保存表单表格配置
+	 */
+	const saveFormTableConfig = (form: any) => {
+		console.debug('form====>>>>>>', form, panelConfig.value);
+		let tempPanelConfig = _.cloneDeep(panelConfig.value);
+		let formData = {
+			config_name: form['config_name'],
+			config_unique_id: form['config_unique_id'],
+			attrs: setPropertyData(tempPanelConfig.BaseForm), // 删除属性值为空的属性,
+			data: transformData(tempPanelConfig.forms),
+			form: tempPanelConfig.forms.map((item: any) => {
+				let obj: any = {
+					label: item.base.label,
+					fieldID: item.base.fieldID,
+					grid: item.base.grid,
+					formItemType: item.formItemType,
+					config:
+						item.formItemType == 'form'
+							? getFormType(item.formItemType, item.form.formConfig)
+							: item.formItemType == 'component'
+								? getFormType(item.formItemType, item.component.baseData)
+								: getFormType(item.formItemType, item.slot.baseData),
+				};
+				if (item.formItemType == 'form') {
+					obj.attrs = setPropertyData(item.form.baseData); // 删除属性值为空的属性
+				}
+				return obj;
+			}),
+		};
+		console.debug('tempPanelConfig====>>>>>>', JSON.stringify(formData));
+		ElMessage.success('保存配置成功, 可在控制台打印中查看配置数据');
+	};
+	/**
+	 * 切换表单表格配置
+	 * @param formItemType
+	 * @param configData
+	 * @returns 根据 formItemType 类型返回对应的配置项 form、component、slot
+	 */
+	const getFormType = (formItemType: string, configData: any) => {
+		switch (formItemType) {
+			case 'form':
+				const arr = configData.map((item: any) => {
+					return {
+						label: item.data.elementItem[0].baseData.label,
+						config: setPropertyData(item.data.elementItem), // 删除属性值为空的属性
+						layoutData: item.data.layoutData,
+					};
+				});
+				return arr;
+			case 'component':
+				return configData;
+			case 'slot':
+				return configData;
+		}
+	};
+	/**
+	 * @param originalData
+	 * @returns 转换数据
+	 * @description 将表单配置数据转换成对象
+	 */
+	function transformData(originalData: any[]) {
+		console.log('originalData', originalData);
+
+		const transformedData: any = {};
+		originalData.forEach((item: any) => {
+			const key = item.base.fieldID;
+			const value: any = {};
+			if (item.formItemType != 'form') return (transformedData[key] = {}); // 只处理表单配置
+			item.form.formConfig.forEach((config: any) => {
+				console.log('config)', config);
+				const prop = config.data.elementItem[0].baseData.prop;
+				value[prop] = '';
+			});
+			transformedData[key] = value;
+		});
+		return transformedData;
+	}
+	/**
+	 * @param params
+	 * @returns 删除属性值为空的属性
+	 */
+	function setPropertyData(params: any) {
+		function setProperty(property: any) {
+			if (property.editRender?.enabled) {
+				delete property.cellRender;
+			} else if (property.editRender) {
+				delete property.editRender;
+			}
+			for (let i in property) {
+				if (_.isString(property[i]) && property[i].trim() === '') {
+					delete property[i];
+				}
+				if (_.isObject(property[i]) && !_.isEmpty(property[i])) {
+					setProperty(property[i]);
+				}
+			}
+		}
+		setProperty(params);
+
+		return params;
+	}
+	/**
+	 * 切换表单表格配置
+	 * @param config
+	 */
+	// value: string, type: string,
+	const changeConfig = (config: IFormTable.FormConfig) => {
+		panelConfig.value = config;
+	};
+
+	return {
+		handleTabsEdit,
+		saveFormTableConfig,
+		changeConfig,
+		config,
+	};
+}

package/src/views/test/test2/test2.vue

@@ -0,0 +1,17 @@
+<template>
+	<div class="system-user-container layout-padding">
+		<el-card shadow="hover" class="layout-padding-auto">
+			<bc-page-config class="h-full"></bc-page-config>
+			<!-- <div class="bg-green-200" style="height: 100%">99</div> -->
+		</el-card>
+	</div>
+</template>
+
+<script setup lang="ts" name="systemUser"></script>
+<style scoped lang="scss">
+.layout-padding-auto {
+	:deep(.el-card__body) {
+		height: 100% !important;
+	}
+}
+</style>

package/src/views/test/test3/test.vue

@@ -0,0 +1,20 @@
+<template>
+	<div class="layout-padding">
+		<el-card shadow="hover" class="layout-padding-auto">
+			<hsGetApis />
+		</el-card>
+	</div>
+</template>
+
+<script setup lang="ts" name="test3_1">
+import hsGetApis from '/@/components/base/hsGetApi/src/hsGetApis.vue';
+</script>
+
+<style scoped lang="scss">
+:deep(.el-card__body) {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	overflow: auto;
+}
+</style>

package/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+	corePlugins: {
+		// 防止打包冲掉 element-plus 的样式
+		preflight: false, // 禁用 Preflight
+	},
+};

package/tsconfig.json

@@ -0,0 +1,75 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+		/* Basic Options */
+		// "incremental": true,                   /* Enable incremental compilation */
+		"target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+		"module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+		"lib": ["esnext", "dom", "dom.iterable", "scripthost"] /* Specify library files to be included in the compilation. */,
+		// "allowJs": true,                       /* Allow javascript files to be compiled. */
+		// "checkJs": true,                       /* Report errors in .js files. */
+		"jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+		// "declaration": true /* Generates corresponding '.d.ts' file. */,
+		// "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+		// "sourceMap": true,                     /* Generates corresponding '.map' file. */
+		// "outFile": "./",                       /* Concatenate and emit output to single file. */
+		// "outDir": "./",                        /* Redirect output structure to the directory. */
+		// "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+		// "composite": true,                     /* Enable project compilation */
+		// "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+		// "removeComments": true,                /* Do not emit comments to output. */
+		// "noEmit": true,                        /* Do not emit outputs. */
+		// "importHelpers": true /* Import emit helpers from 'tslib'. */,
+		// "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
+		"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+
+		/* Strict Type-Checking Options */
+		"strict": true /* Enable all strict type-checking options. */,
+		// "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+		// "strictNullChecks": true,              /* Enable strict null checks. */
+		// "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+		// "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+		// "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+		// "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+		// "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+		/* Additional Checks */
+		// "noUnusedLocals": true,                /* Report errors on unused locals. */
+		// "noUnusedParameters": true,            /* Report errors on unused parameters. */
+		// "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+		// "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
+
+		/* Module Resolution Options */
+		"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+		"baseUrl": "." /* Base directory to resolve non-absolute module names. */,
+		"paths": {
+			"/@/*": ["src/*"],
+			"/@parseTable": ["src/components/business/bcFormTable/utils/parseTable"],
+		} /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
+		// "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+		// "typeRoots": [],                       /* List of folders to include type definitions from. */
+		"types": ["vite/client"] /* Type declaration files to be included in compilation. */,
+		"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+		// "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+		// "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+
+		/* Source Map Options */
+		// "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+		// "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+		// "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+		/* Experimental Options */
+		"experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
+		// "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+		/* Advanced Options */
+		"skipLibCheck": true /* Skip type checking of declaration files. */,
+		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+	},
+	"include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
+	"exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled
+}

package/vite.config.ts

@@ -0,0 +1,123 @@
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+import { defineConfig, loadEnv, ConfigEnv } from 'vite';
+import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus';
+import viteCompression from 'vite-plugin-compression';
+import { buildConfig } from './src/utils/build';
+const pathResolve = (dir: string) => {
+	return resolve(__dirname, '.', dir);
+};
+
+const alias: Record<string, string> = {
+	'/@': pathResolve('./src/'),
+	'/@parseTable': pathResolve('./src/components/business/bcFormTable/utils/parseTable'),
+};
+const viteConfig = defineConfig((mode: ConfigEnv) => {
+	const env = loadEnv(mode.mode, process.cwd());
+	return {
+		plugins: [vue(), vueSetupExtend(), viteCompression(), JSON.parse(env.VITE_OPEN_CDN) ? buildConfig.cdn() : null],
+		root: process.cwd(),
+		resolve: { alias },
+		base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
+		optimizeDeps: {
+			exclude: ['vue-demi'],
+		},
+		server: {
+			host: '0.0.0.0',
+			port: env.VITE_PORT as unknown as number,
+			open: JSON.parse(env.VITE_OPEN),
+			hmr: true,
+			proxy: {
+				'/json': {
+					target: 'http://www.hsfrp.top/',
+					changeOrigin: true,
+					pathRewrite: {
+						'^/json': '',
+					},
+				},
+				'/demo': {
+					target: 'https://api.vxetable.cn/',
+					changeOrigin: true,
+					pathRewrite: {
+						'^/demo': '',
+					},
+				},
+				'/cms-web': {
+					target: 'http://huasuerp.com:9092/',
+					changeOrigin: true,
+					pathRewrite: {
+						'^/cms-web': '',
+					},
+				},
+				'/scmp-web': {
+					target: 'https://huasuerp.com:7077/',
+					changeOrigin: true,
+					pathRewrite: {
+						'^/scmp-web': '',
+					},
+				},
+				'/xypms-web': {
+					target: 'https://xy.huasuerp.com:7082/',
+					changeOrigin: true,
+					pathRewrite: {
+						'^/xypms-web': '',
+					},
+				},
+				'/qwp-web': {
+					target: 'https://huasuerp.com:7076/',
+					changeOrigin: true,
+					pathRewrite: {
+						'^/qwp-web': '',
+					},
+				},
+			},
+		},
+		build: {
+			lib: {
+				entry: resolve(__dirname, 'src/main.ts'),
+				formats: ['umd'],
+				name: 'hsadmin',
+				fileName: (format) => `${format}/index.js`,
+			},
+			cssCodeSplit: true,
+			rollupOptions: {
+				external: ['@alicloud/console-fetcher', 'react'],
+				plugins: [],
+			},
+			emptyOutDir: false,
+			minify: false,
+		},
+		// build: {
+		// 	outDir: 'dist',
+		// 	chunkSizeWarningLimit: 1500,
+		// 	rollupOptions: {
+		// 		output: {
+		// 			chunkFileNames: 'assets/js/[name]-[hash].js',
+		// 			entryFileNames: 'assets/js/[name]-[hash].js',
+		// 			assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
+		// 			manualChunks(id) {
+		// 				if (id.includes('node_modules')) {
+		// 					return id.toString().match(/\/node_modules\/(?!.pnpm)(?<moduleName>[^\/]*)\//)?.groups!.moduleName ?? 'vender';
+		// 				}
+		// 			},
+		// 		},
+		// 		...(JSON.parse(env.VITE_OPEN_CDN) ? { external: buildConfig.external } : {}),
+		// 	},
+		// },
+		css: {
+			preprocessorOptions: {
+				css: { charset: false },
+			},
+			postcss: {
+				plugins: [require('tailwindcss')],
+			},
+		},
+		define: {
+			__NEXT_VERSION__: JSON.stringify(process.env.npm_package_version),
+			__NEXT_NAME__: JSON.stringify(process.env.npm_package_name),
+			__IS_DEV__: JSON.stringify(mode.command == 'serve'),
+		},
+	};
+});
+
+export default viteConfig;