@yukihong/schema-admin-x 1.0.0

package/app/pages/boot.js

@@ -0,0 +1,53 @@
+import { createApp } from 'vue';
+
+// 引入 elementUI
+import ElementUI from 'element-plus';
+import 'element-plus/theme-chalk/index.css';
+import 'element-plus/theme-chalk/dark/css-vars.css';
+
+import './asserts/custom.css';
+
+import pinia from '$elpisStore';
+
+import { createRouter, createWebHistory } from 'vue-router';
+
+/**
+ * vue 页面主入口，用于启动 vue
+ * @param pageComponent vue 入口组件
+ * @param routes 路由列表
+ * @param libs 页面依赖的第三方包
+ */
+export default (pageComponent, { routes, libs } = {}) => {
+	
+	const app = createApp(pageComponent);
+	
+	// 应用
+	app.use(ElementUI);
+	
+	// 引入 pinia
+	app.use(pinia);
+	
+	// 引入第三方包
+	if(libs && libs.length) {
+		for(let i = 0; i < libs.length; ++i) {
+			app.use(libs[i]);
+		}
+	}
+	
+	// 页面路由
+	if( routes && routes.length) {
+		const router = createRouter({
+			history: createWebHistory(), // 采用 history 模式
+			routes
+		});
+		
+		app.use(router);
+		router.isReady().then(() => {
+			app.mount('#root');
+		});
+	} else {
+		app.mount('#root');
+	}
+	
+	
+}

package/app/pages/common/curl.js

@@ -0,0 +1,91 @@
+const md5 = require("md5");
+import { ElMessage } from "element-plus";
+
+/**
+ * 前端封装的 curl 方法
+ * @param options 请求参数
+ */
+const curl = ({
+	url, // 请求地址
+	method = 'post', // 请求方法
+	headers = {}, // 请求头
+	query = {}, // url query
+	data = {}, // post body
+	responseType = 'json', // response data type
+	timeout = 6000, // timeout
+	errorMessage = '网络异常'
+}) => {
+	// 接口签名处理（让接口变动态）
+	const signKey = 'asd23fhakjs25dhaksdh5kjashcjk';
+	const st = Date.now();
+	
+	const dtoHeaders = {
+		...headers,
+		s_t: st,
+		s_sign: md5(`${signKey}_${st}`)
+	}
+	
+	if(!url) {
+		throw new Error(`$curl 方法缺少参数：url`);
+	}
+	
+	if(url.indexOf('/api/proj/') > -1 && window.projKey) {
+		dtoHeaders.proj_key = window.projKey;
+	}
+	
+	// 构造请求参数(把参数转换为 axios 参数)
+	const ajaxStting = {
+		url, 
+		method , 
+		params: query,
+		data,
+		responseType,
+		timeout,
+		headers: dtoHeaders
+	}
+	
+	return axios.request(ajaxStting).then((response) => {
+		const resData = response.data || {};
+		
+		// 后端 API 返回格式
+		const { success } = resData;
+		
+		// 失败
+		if(!success) {
+			const { message, code } = resData;
+			
+			if(code === 442) {
+				ElMessage.error('请求参数异常');
+			} else if(code === 445) {
+				ElMessage.error('请求不合法');
+			}  else if(code === 446) {
+				ElMessage.error('缺少项目必要参数');
+			}else if(code === 50000) {
+				ElMessage.error(message);
+			} else{
+				ElMessage.error(errorMessage);
+			}
+			
+			console.error(message);
+			
+			return Promise.resolve({ success, message, code })
+		}
+		
+		// 成功
+		const { data, metadata } = resData;
+		return Promise.resolve({success, data, metadata});
+	}).catch((error) => {
+		const {message} = error;
+		
+		if(message.match(/timeout/)) {
+			return Promise.resolve({
+				message: 'Request Timeout',
+				code: 504
+			})
+		}
+		
+		return Promise.resolve(error);
+	});
+} 
+
+export default curl;

package/app/pages/common/utils.js

@@ -0,0 +1,3 @@
+const utils = {};
+
+export default utils;

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

@@ -0,0 +1,21 @@
+<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"
+				:menuItem="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>
+</style>

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

@@ -0,0 +1,127 @@
+<template>
+	
+	<header-container :title="projName">
+		<template #menu-content>
+			<!-- 根据 menuStore.menuList 渲染 -->
+			<el-menu
+				:default-active="activeKey"
+				:ellipsis="false"
+				mode="horizontal"
+				@select="onMenuSelect"
+			>
+				<template  v-for="item in menuStore.menuList">
+					<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>
+				</template>
+			</el-menu>
+			
+		</template>
+		<template #setting-content>
+			<!-- 根据 projectStore.projectList 渲染 -->
+			<el-dropdown @command="handleProjectCommand">
+				<span class="project-list">
+					{{projName}}
+					<el-icon v-if="projectStore.projectList.length > 1" class="el-icon--right">
+						<ArrowDown></ArrowDown>
+					</el-icon>
+				</span>
+				<template v-if="projectStore.projectList.length > 1" #dropdown>
+					<el-dropdown-menu>
+						<el-dropdown-item
+							v-for="item in projectStore.projectList"
+							:key="item.key"
+							:command="item.key"
+							:disabled="item.name === projName"
+						>
+							{{ item.name}}
+						</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+		</template>
+		<template #main-content>
+			<slot name="main-content"></slot>
+		</template>
+	</header-container>
+	
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { ArrowDown } from '@element-plus/icons-vue';
+import HeaderContainer from '$elpisWidgets/header-container/header-container.vue'
+import SubMenu from './complex-view/sub-menu/sub-menu.vue'
+import { useMenuStore } from '$elpisStore/menu';
+import { useProjectStore } from '$elpisStore/project';
+
+const route = useRoute();
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+defineProps({
+	projName: String
+});
+
+const emit = defineEmits(['menu-select']);
+
+const activeKey = ref('');
+
+const setActiveKey = function() {
+	const menuItem = menuStore.findMenuItem({
+		key: 'key',
+		value: route.query.key
+	});
+	activeKey.value = menuItem?.key;
+}
+
+watch(() => route.query.key, () => {
+	setActiveKey();
+})
+
+watch(() => menuStore.menuList, () => {
+	setActiveKey();
+}, { deep: true})
+
+onMounted(() => {
+	setActiveKey();
+});
+
+const onMenuSelect = function (menuKey) {
+	const menuItem = menuStore.findMenuItem({
+		key: 'key',
+		value: menuKey
+	});
+	emit('menu-select', menuItem);
+}
+
+const handleProjectCommand = function (event) {
+	const projectItem = projectStore.projectList.find(item => item.key === event);
+	if(!projectItem || !projectItem.homePage) { return; }
+	const { host } = window.location;
+	console.log(`http://${host}/view/ddashboard${projectItem.homePage}`)
+	window.location.replace(`http://${host}/view/dashboard${projectItem.homePage}`);
+}
+
+</script>
+
+<style lang="less" scoped>
+.project-list {
+	margin-right: 20px;
+	cursor: pointer;
+	color: var(--el-color-primary);
+	display: flex;
+	align-items: center;
+	outline: none;
+}
+	
+:deep(.el-menu--horizontal>.el-menu-item) {
+	// border-bottom: 0;
+	// border-color: #fff;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+	
+	<iframe :src="path" class="iframe"></iframe>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMenuStore } from '$elpisStore/menu.js';
+
+const route = useRoute();
+const menuStore = useMenuStore();
+
+const path = ref('');
+const setPath = function () {
+	const { key, sider_key: siderKey } = route.query;
+	const menuItem = menuStore.findMenuItem({
+		key: 'key',
+		value: siderKey ?? key
+	});
+	path.value = menuItem?.iframeConfig?.path ?? '';
+}
+
+watch([
+	() => route.query.key,
+	() => route.query.sider_key,
+	() => menuStore.menuList
+], () => {
+	setPath();
+}, { deep: true});
+
+onMounted(() => {
+	setPath();
+});
+
+</script>
+
+<style lang="less" scoped>
+	.iframe {
+		border: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,41 @@
+<template>
+	<el-card class="search-panel">
+		<schema-search-bar
+			:schema="searchSchema"
+			@load="onLoad"
+			@search="onSearch"
+			@reset="onReset"
+		></schema-search-bar>
+	</el-card>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+import SchemaSearchBar from '$elpisWidgets/schema-search-bar/schema-search-bar.vue';
+const { searchSchema } = inject('schemaViewData');
+
+const emit = defineEmits(['search']);
+
+const onLoad = (searchValObj) => {
+	emit('search', searchValObj);
+}
+const onSearch = (searchValObj) => {
+	emit('search', searchValObj);
+	
+}
+const onReset = () => {
+	emit('search', {});
+	
+}
+
+</script>
+
+<style lang="less" scoped>
+.search-panel {
+	margin: 10px 10px 0 10px;
+	
+}
+:deep(.el-card__body) {
+	padding-bottom: 2px;
+}
+</style>

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

@@ -0,0 +1,131 @@
+<template>
+	<el-card class="table-panel">
+		<!-- operation-panel -->
+		<el-row
+			v-if="tableConfig?.headerButtons?.length > 0"
+			justify="end"
+			class="operation-panel"
+		>
+			<el-button
+				v-for="item in tableConfig?.headerButtons"
+				v-bind="item"
+				@click="operationHandler({ btnConfig: item })"
+			>{{item.label}}</el-button>
+		</el-row>
+		<!-- schema-table (组件 widdget) -->
+		<schema-table
+			ref="schemaTableRef"
+			:schema="tableSchema"
+			:api="api"
+			:apiParams="apiParams"
+			:buttons="tableConfig?.rowButtons ?? []"
+			@operate="operationHandler"
+		></schema-table>
+		
+	</el-card>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+import { ElMessageBox, ElNotification } from 'element-plus';
+import $curl from '$elpisCommon/curl.js';
+import SchemaTable from '$elpisWidgets/schema-table/schema-table.vue';
+
+const emit = defineEmits(['operate']);
+
+const {
+	api,
+	apiParams,
+	tableSchema, 
+	tableConfig 
+} = inject('schemaViewData');
+
+const schemaTableRef = ref(null);
+
+const EventHandlerMap = {
+	remove: removeData 
+}
+const operationHandler = ({ btnConfig, rowData }) => {
+	const { eventKey } = btnConfig;
+	if(EventHandlerMap[eventKey]) {
+		EventHandlerMap[eventKey]({ btnConfig, rowData });
+	} else {
+		emit('operate', { btnConfig, rowData });
+	}
+}
+function removeData({ btnConfig, rowData }) {
+	const { eventOption } = btnConfig;
+	if(!eventOption?.params) { return; }
+	
+	const { params } = eventOption;
+	
+	const removeKey = Object.keys(params)[0];
+	let removeValue;
+	const removeValueList = params[removeKey].split('::');
+	console.log('removeValueList',removeValueList)
+	if(removeValueList[0] === 'schema' && removeValueList[1]) {
+		removeValue = rowData[removeValueList[1]];
+	}
+	ElMessageBox.confirm(
+		`确认删除${removeKey}为：${removeValue}的数据？`,
+		'Warning',
+		{
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning'
+		}
+	).then(async () => {
+		schemaTableRef.value.showLoading();
+		const res = await $curl({
+			method: 'delete',
+			url: api.value,
+			data: {
+				[removeKey]: removeValue
+			},
+			errorMessage: '删除失败'
+		});
+		schemaTableRef.value.hideLoading();
+		
+		if(!res || !res.success || !res.data) {
+			return;
+		}
+		ElNotification({
+			title: '删除成功',
+			message: '删除成功',
+			type: 'success'
+		});
+		
+		await initTableData();
+	});
+}
+
+const initTableData = async () => {
+	await schemaTableRef.value.initData();
+}
+
+const loadTableData = async () => {
+	await schemaTableRef.value.loadTableData();
+}
+
+defineExpose({
+	loadTableData
+})
+
+</script>
+
+<style lang="less" scoped>
+.table-panel {
+	flex: 1;
+	margin: 10px;
+	
+	.operation-panel {
+		margin-bottom: 10px;
+	}
+}
+
+:deep(.el-card__body) {
+	height: 98%;
+	display: flex;
+	flex-direction: column;
+}
+</style>

package/app/pages/dashboard/complex-view/schema-view/components/component-config.js

@@ -0,0 +1,23 @@
+import createForm from './create-form/create-form.vue';
+import editForm from './edit-form/edit-form.vue';
+import detailPanel from './detail-panel/detail-panel.vue';
+
+// 业务扩展 component 配置
+import BusinessComponentConfig from '$businessComponentConfig';
+
+const ComponentConfig = {
+	createForm: {
+		component: createForm
+	},
+	editForm: {
+		component: editForm
+	},
+	detailPanel: {
+		component: detailPanel
+	}
+}
+
+export default {
+	...ComponentConfig,
+	...BusinessComponentConfig
+};

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

@@ -0,0 +1,100 @@
+<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" 
+			></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('createForm');
+
+const schemaFormRef = ref(null);
+const isShow = ref(false);
+const loading = ref(false);
+const title = ref('');
+const saveBtnText = ref('');
+
+const show = () => {
+	const { config } = components.value[name.value];
+	title.value = config.title;
+	saveBtnText.value = config.saveBtnText;
+	isShow.value = true;
+}
+
+const close = () => {
+	isShow.value = false;
+}
+
+const save = async () => {
+	if(loading.value) { return; }
+	
+	if(!schemaFormRef.value.validate()) { return ; }
+	
+	loading.value = true;
+	
+	const res = await $curl({
+		method: 'post',
+		url: api.value,
+		data: {
+			...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 lang="less" scoped>
+</style>