@yukihong/schema-admin-x 1.0.0

package/app/pages/dashboard/complex-view/schema-view/components/detail-panel/detail-panel.vue

@@ -0,0 +1,106 @@
+<template>
+	<el-drawer
+		v-model="isShow"
+		direction="rtl"
+		:destroy-on-close="true"
+		:size="550"
+	>
+		<template #header>
+			<h4>{{title}}</h4>
+		</template>
+		<template #default>
+			<el-card v-loading="loading" shadow="always" class="detail-panel">
+				<el-row
+					v-for="(item,key) in components[name]?.schema?.properties"
+					:key="key"
+					type="flex"
+					align="middle"
+					class="row-item"
+				>
+					<el-row class="item-label">{{item.label}}：</el-row>
+					<el-row class="item-value">{{dtoModel[key]}}：</el-row>
+				</el-row>
+			</el-card>
+		</template>
+	</el-drawer>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+import $curl from '$elpisCommon/curl.js';
+
+const {
+	api,
+	components
+} = inject('schemaViewData');
+
+const name = ref('detailPanel');
+const isShow = ref(false);
+const loading = ref(false);
+const title = ref('');
+const mainKey = ref('');
+const mainValue = ref();
+const dtoModel = ref({});
+
+const show = (rowData) => {
+	const { config } = components.value[name.value];
+	
+	title.value = config.title;
+	mainKey.value = config.mainKey; // 表单主键
+	mainValue.value = rowData[config.mainKey]; // 表单主键值
+	dtoModel.value = {};
+	
+	isShow.value = true;
+	
+	fetchFormData();
+}
+
+
+const fetchFormData = async () => {
+	if(loading.value) { return; }
+	
+	loading.value = true;
+	const res = await $curl({
+		method: 'get',
+		url: api.value,
+		query: {
+			[mainKey.value]: mainValue.value
+		}
+	})
+	loading.value = false;
+	
+	if(!res || !res.success || !res.data) {
+		return;
+	}
+	
+	dtoModel.value = res.data;
+}
+
+defineExpose({
+	name,
+	show
+});
+
+</script>
+
+<style lang="less" scoped>
+.detail-panel {
+	border: 1px solid #a6a6a6;
+	padding: 30px;
+	
+	.row-item {
+		height: 40px;
+		line-height: 40px;
+		font-size: 20px;
+		
+		.item-label {
+			margin-right: 20px;
+			width: 120px;
+			color: #fff;
+		}
+		.item-value {
+			color: #d2dae4;
+		}
+	}
+}
+</style>

package/app/pages/dashboard/complex-view/schema-view/components/edit-form/edit-form.vue

@@ -0,0 +1,131 @@
+<template>
+	<el-drawer
+		v-model="isShow"
+		direction="rtl"
+		:destroy-on-close="true"
+		:size="550"
+	>
+		<template #header>
+			<h4>{{title}}</h4>
+		</template>
+		<template #default>
+			<schema-form 
+				ref="schemaFormRef" 
+				v-loading="loading"
+				:schema="components[name]?.schema" 
+				:model="dtoModel"
+			></schema-form>
+		</template>
+		<template #footer>
+			<el-button 
+				type="primary" 
+				@click="save"
+			>{{saveBtnText}}</el-button>
+		</template>
+	</el-drawer>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+import { ElNotification } from 'element-plus';
+import $curl from '$elpisCommon/curl.js';
+import SchemaForm from '$elpisWidgets/schema-form/schema-form.vue';
+
+const {
+	api,
+	components
+} = inject('schemaViewData');
+
+const emit = defineEmits([ 'command' ]);
+
+const name = ref('editForm');
+
+const schemaFormRef = ref(null);
+const isShow = ref(false);
+const loading = ref(false);
+const title = ref('');
+const saveBtnText = ref('');
+const mainKey = ref('');
+const mainValue = ref();
+const dtoModel = ref({});
+
+const show = (rowData) => {
+	const { config } = components.value[name.value];
+	title.value = config.title;
+	saveBtnText.value = config.saveBtnText;
+	mainKey.value = config.mainKey; // 表单主键
+	mainValue.value = rowData[config.mainKey]; // 表单主键值
+	dtoModel.value = {};
+	
+	isShow.value = true;
+	
+	fetchFormData();
+}
+
+const close = () => {
+	isShow.value = false;
+}
+
+const fetchFormData = async () => {
+	if(loading.value) { return; }
+	
+	loading.value = true;
+	const res = await $curl({
+		method: 'get',
+		url: api.value,
+		query: {
+			[mainKey.value]: mainValue.value
+		}
+	})
+	loading.value = false;
+	
+	if(!res || !res.success || !res.data) {
+		return;
+	}
+	
+	dtoModel.value = res.data;
+}
+
+const save = async () => {
+	if(loading.value) { return; }
+	
+	if(!schemaFormRef.value.validate()) { return; }
+	
+	loading.value = true;
+	
+	const res = await $curl({
+		method: 'put',
+		url: api.value,
+		data: {
+			[mainKey.value]: mainValue.value,
+			...schemaFormRef.value.getValue()
+		}
+	});
+	
+	loading.value = false;
+	
+	if(!res || !res.success) {
+		return;
+	}
+	
+	ElNotification({
+		title: '修改成功',
+		message: '修改成功',
+		type: 'success'
+	});
+	
+	close();
+	
+	emit('command', {
+		event: 'loadTableData'
+	});
+}
+
+defineExpose({
+	name,
+	show
+});
+</script>
+
+<style>
+</style>

package/app/pages/dashboard/complex-view/schema-view/hook/schema.js

@@ -0,0 +1,126 @@
+import { ref, watch, onMounted, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMenuStore } from '$elpisStore/menu.js';
+
+export const useSchema = function() {
+	const route = useRoute();
+	const menuStore = useMenuStore();
+	
+	const api = ref('');
+	const tableSchema = ref({});
+	const tableConfig = ref();
+	const searchSchema = ref({});
+	const searchConfig = ref();
+	const components = ref({});
+	
+	// 构造 schemaConfig 相关配置，输送给 schemaView 解析
+	const buildData = function() {
+		const { key, sider_key: siderKey } = route.query;
+		const mItem = menuStore.findMenuItem({
+			key: 'key',
+			value: siderKey ?? key
+		});
+		if(mItem && mItem.schemaConfig) {
+			const { schemaConfig: sConfig } = mItem;
+			
+			const configSchema = JSON.parse(JSON.stringify(sConfig.schema));
+			
+			api.value = sConfig.api ?? '';
+			tableSchema.value = {};
+			tableConfig.value = undefined;
+			searchSchema.value = {};
+			searchSchema.value = undefined;
+			components.value = {};
+			
+			nextTick(() => {
+				// 构造 tableSchema 和 tableConfig
+				tableSchema.value = buildDtoSchema(configSchema, 'table');
+				tableConfig.value = sConfig.tableConfig;
+				
+				// 构造 searchSchema 和 searchConfig
+				const dtoSearchSchema = buildDtoSchema(configSchema, 'search');
+				// 处理当路由带指定搜索项和内容时，给搜索控件赋默认值
+				for(const key in dtoSearchSchema.properties) {
+					if(route.query[key] !== undefined) {
+						dtoSearchSchema.properties[key].option.default = route.query[key];
+					}
+				}
+				searchSchema.value = dtoSearchSchema;
+				searchConfig.value = sConfig.searchConfig;
+				
+				// 构造 components = { comKey: { schema: {}, config: {} }}
+				const { componentConfig } = sConfig;
+				if(componentConfig && Object.keys(componentConfig).length > 0) {
+					const dtoComponents = {};
+					
+					for(const comName in componentConfig) {
+						dtoComponents[comName] = {
+							schema: buildDtoSchema(configSchema, comName),
+							config: componentConfig[comName]
+						}
+					}
+					components.value = dtoComponents;
+				}
+			});
+		}
+	}
+	
+	// 通用构建 schema 方法（清除噪音）
+	const buildDtoSchema = (_schema, comName) => {
+		if(!_schema?.properties) { return {}; }
+		
+		const dtoSchema = {
+			type: 'object',
+			properties: {}
+		}
+		
+		// 提取有效 schema 字段信息
+		for(const key in _schema.properties) {
+			const props = _schema.properties[key];
+			// tableOption searchBarOption ...
+			if(props[`${comName}Option`]) {
+				let dtoProps = {};
+				// 提取 props 中非 option 的部分，存放到 dtoProps 中
+				for(const pKey in props) {
+					if(pKey.indexOf(Option) < 0) {
+						dtoProps[pKey] = props[pKey];
+					}
+				}
+				// 处理 comName Option
+				dtoProps = Object.assign({}, dtoProps, { 'option': props[`${comName}Option`]});
+				
+				
+				// 处理 required 字段
+				const { required } = _schema;
+				if(required && required.find(pk => pk === key)) {
+					dtoProps.option.required = true;
+				}
+				
+				dtoSchema.properties[key] = dtoProps;
+			}
+		}
+		
+		return dtoSchema;
+	}
+	
+	watch([
+		() => route.query.key,
+		() => route.query.sider_key,
+		() => menuStore.menuList
+	], () => {
+		buildData();
+	}, { deep: true})
+	
+	onMounted(() => {
+		buildData();
+	});
+	
+	return {
+		api,
+		tableSchema,
+		tableConfig,
+		searchSchema,
+		searchConfig,
+		components
+	}
+}

package/app/pages/dashboard/complex-view/schema-view/schema-view.vue

@@ -0,0 +1,102 @@
+<template>
+	<el-row class="schema-view">
+		<search-panel
+			v-if="searchSchema?.properties && Object.keys(searchSchema.properties).length > 0"
+			@search="onSearch"
+		></search-panel>
+		<table-panel
+			ref="tablePanelRef"
+			@operate="onTableOperate"
+		></table-panel>
+		<!-- 动态组件 -->
+		<component
+			v-for="(item,key) in components"
+			:key="key"
+			:is="ComponentConfig[key]?.component"
+			ref="comListRef"
+			@command="onComponentCommand"
+		></component>
+	</el-row>
+</template>
+
+<script setup>
+import { ref, provide } from 'vue';
+import SearchPanel from './complex-view/search-panel/search-panel.vue';
+import TablePanel from './complex-view/table-panel/table-panel.vue';
+import ComponentConfig from './components/component-config';
+import { useSchema } from './hook/schema.js'; 
+
+const { 
+	api, 
+	tableSchema, 
+	tableConfig,
+	searchSchema,
+	searchConfig,
+	components
+} = useSchema();
+
+const apiParams = ref({});
+provide('schemaViewData', {
+	api,
+	apiParams,
+	tableSchema, 
+	tableConfig,
+	searchSchema,
+	searchConfig,
+	components
+});
+
+const tablePanelRef = ref(null);
+const comListRef = ref([]);
+
+const onSearch = (searchValObj) => {
+	apiParams.value = searchValObj;
+}
+
+// table 事件映射
+const EventHandlerMap = {
+	showComponent: showComponent
+}
+
+const onTableOperate = ({ btnConfig, rowData }) => {
+	const { eventKey } = btnConfig;
+	if(EventHandlerMap[eventKey]) {
+		EventHandlerMap[eventKey]({ btnConfig, rowData })
+	}
+}
+
+// 展示动态组件
+function showComponent({ btnConfig, rowData }) {
+	const { comName } = btnConfig.eventOption;
+	if(!comName) {
+		console.error(`未配置组件名`);
+		return; 
+	}
+	const comRef = comListRef.value.find(item => {
+		return item.name === comName
+	});
+	if(!comRef ||  typeof comRef.show !== 'function' ) { 
+		console.error(`找不到组件：${comName}`);
+		return;
+	}
+	comRef.show(rowData);
+}
+
+// 响应组件事件
+const onComponentCommand = (data) => {
+	const { event } = data;
+	if(event === 'loadTableData') {
+		tablePanelRef.value.loadTableData();
+	}
+}
+
+</script>
+
+<style lang="less" scoped>
+.schema-view {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+}
+</style>

package/app/pages/dashboard/complex-view/sider-view/complex-view/sub-menu/sub-menu.vue

@@ -0,0 +1,26 @@
+<template>
+	<el-sub-menu :index="menuItem.key" >
+		<template #title>
+			{{ menuItem.name }}
+		</template>
+		<div :key="item.key" v-for="item in menuItem.subMenu">
+			<sub-menu
+				v-if="item.subMenu && item.subMenu.length > 0"
+				:menu-item="item"
+			></sub-menu>
+			<el-menu-item 
+				v-else
+				:index="item.key"
+			>
+				{{ item.name }}
+			</el-menu-item>
+		</div>
+	</el-sub-menu>
+</template>
+
+<script setup>
+const { menuItem } = defineProps(['menuItem']);
+</script>
+
+<style lang="less" scoped>
+</style>

package/app/pages/dashboard/complex-view/sider-view/sider-view.vue

@@ -0,0 +1,128 @@
+<template>
+	<sider-container>
+		<template #menu-content>
+			<el-menu
+				:default-active="activeKey"
+				:ellipsis="false"
+				@select="onMenuSelect"
+			>
+				<template v-for="item in menuList">
+					<!-- group -->
+					<sub-menu
+						v-if="item.subMenu && item.subMenu.length > 0"
+						:menu-item="item"
+					></sub-menu>
+					<!-- module -->
+					<el-menu-item
+						v-else
+						:index="item.key"
+					>
+						{{item.name}}
+					</el-menu-item>
+				</template>
+			</el-menu>
+		</template>
+		<template #main-content>
+			<router-view></router-view>
+		</template>
+	</sider-container>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useMenuStore } from '$elpisStore/menu.js';
+import SiderContainer from '$elpisWidgets/sider-container/sider-container';
+import SubMenu from './complex-view/sub-menu/sub-menu.vue';
+
+const router = useRouter();
+const route = useRoute();
+const menuStore = useMenuStore();
+
+const menuList = ref([]);
+const setMenuList = function () {
+	const menuItem = menuStore.findMenuItem({
+		key: 'key',
+		value: route.query.key
+	});
+	if(menuItem && menuItem.siderConfig && menuItem.siderConfig.menu) {
+		menuList.value = menuItem.siderConfig.menu;
+	}
+}
+
+
+const activeKey = ref('');
+const setActiveKey = function () {
+	let siderMenuItem = menuStore.findMenuItem({
+		key: 'key',
+		value: route.query.sider_key
+	});
+	// 如果首次加载 sider-view，用户未选中左侧菜单，需要默认选中第一个
+	if(!siderMenuItem) {
+		const hMenuItem = menuStore.findMenuItem({
+			key: 'key',
+			value: route.query.key
+		});
+		if(hMenuItem && hMenuItem.siderConfig && hMenuItem.siderConfig.menu) {
+			const siderMenuList = hMenuItem.siderConfig.menu;
+			siderMenuItem = menuStore.findFirstMenuItem(siderMenuList); // 找出左侧菜单中的第一项
+			if(siderMenuItem) {
+				handleMenuSelect(siderMenuItem.key);
+			}
+		}
+	}
+	activeKey.value = siderMenuItem?.key;
+}
+
+
+
+watch(() => route.query.key, () => {
+	setMenuList();
+	setActiveKey();
+})
+
+watch(() => menuStore.menuList, () => {
+	setMenuList();
+	setActiveKey();
+}, { deep: true})
+
+onMounted(() => {
+	setMenuList();
+	setActiveKey();
+})
+
+const onMenuSelect = function (menuKey) {
+	handleMenuSelect(menuKey);
+}
+
+const handleMenuSelect = function(menuKey) {
+	const menuItem = menuStore.findMenuItem({
+		key: 'key',
+		value: menuKey
+	});
+	
+	const { moduleType, key, customConfig } = menuItem;
+	
+	// 如果是当前页面，不处理
+	if(key === route.query.sider_key) { return; }
+	
+	const pathMap = {
+		iframe: '/iframe',
+		schema: '/schema',
+		custom: customConfig?.path
+	};
+	
+	router.push({
+		path: `/view/dashboard/sider${pathMap[moduleType]}`,
+		query: {
+			key:route.query.key,
+			sider_key: key,
+			proj_key: route.query.proj_key
+		}
+	})
+}
+
+</script>
+
+<style lang="less" scoped>
+</style>

package/app/pages/dashboard/dashboard.vue

@@ -0,0 +1,99 @@
+<template>
+	
+	<el-config-provider :locale="zhCn">
+		<header-view :proj-name="projName" @menu-select="onMenuSelect">
+			<template #main-content>
+				<router-view></router-view>
+			</template>
+		</header-view>
+	</el-config-provider>
+	
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import HeaderView from './complex-view/header-view/header-view.vue';
+import $curl from '$elpisCommon/curl.js';
+import { useMenuStore } from '$elpisStore/menu';
+import { useProjectStore } from '$elpisStore/project';
+
+const router = useRouter();
+const route = useRoute();
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+onMounted(() => {
+	getProjectList();
+	getProjectConfig();
+});
+
+const projName = ref('');
+
+
+// 请求 /api/project/list 接口，并缓存到 project-store 中
+async function getProjectList() {
+	const res = await $curl({
+		method: 'get',
+		url: '/api/project/list',
+		query: {
+			proj_key: route.query.proj_key,
+		}
+	});
+	
+	if(!res || !res.success || !res.data) {
+		return;
+	}
+	projectStore.setProjectList(res.data);
+}
+
+
+// 请求 /api/project 接口，并缓存到 menu-store 中
+async function getProjectConfig() {
+	const res = await $curl({
+		method: 'get',
+		url: '/api/project',
+		query: {
+			proj_key: route.query.proj_key,
+		}
+	});
+	
+	if(!res || !res.success || !res.data) {
+		return;
+	}
+	const { name, menu } = res.data;
+	projName.value = name;
+	menuStore.setMenuList(menu);
+}
+
+// 点击菜单回调方法
+const onMenuSelect = function(menuItem) {
+	const { moduleType, key, customConfig } = menuItem;
+	
+	// 如果是当前页面，不处理
+	if(key === route.query.key) { return; }
+	
+	const pathMap = {
+		sider: '/sider',
+		iframe: '/iframe',
+		schema: '/schema',
+		custom: customConfig?.path
+	};
+	
+	router.push({
+		path: `/view/dashboard${pathMap[moduleType]}`,
+		query: {
+			key,
+			proj_key: route.query.proj_key
+		}
+	})
+}
+
+</script>
+
+<style lang="less" scoped>
+	:deep(.el-main) {
+		padding: 0;
+	}
+</style>