@jiangliffey/elpis 1.0.0

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

@@ -0,0 +1,100 @@
+<template>
+    <el-drawer
+        v-model="isShow"
+        direction="rtl"
+        :destroy-on-close="true"
+        :size="550"
+    >
+        <template #header>
+            <h3>{{ title }}</h3>
+        </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 { inject, ref } 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: white;
+        }
+        .item-value {
+            color: #d2dae4;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,118 @@
+<template>
+    <el-drawer
+        v-model="isShow"
+        direction="rtl"
+        :destroy-on-close="true"
+        :size="550"
+    >
+        <template #header>
+            <h3>{{ title }}</h3>
+        </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 $curl from '$elpisCommon/curl.js';
+import { ElNotification } from 'element-plus';
+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 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 close = () => {
+    isShow.value = false;
+}
+
+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?.success) {
+        ElNotification.success({
+            title: '修改成功',
+            message: '修改成功'
+        });
+        isShow.value = false;
+    } else {
+        ElNotification.error({
+            title: '修改失败',
+            message: '修改失败'
+        });
+    }
+
+    close();
+
+    emit('command', {event: 'loadTableData'});
+}
+
+defineExpose({ name, show })
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,124 @@
+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 apiParams = ref({});
+    const tableSchema = ref({});
+    const tableConfig = ref();
+    const searchSchema = ref({});
+    const searchConfig = ref();
+    const components = ref({});
+
+    // 构造 schemaConfig 相关配置，输送给 schemaView 解释
+    const buildData = () => {
+        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 = {};
+            searchConfig.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];
+            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（将当前组件的 xxxOption 统一改名为 option，方便组件内部统一读取）
+                dtoProps = Object.assign({}, dtoProps, { option: props[`${comName}Option`]});
+
+                // 处理 required 字段
+                const { required } = _schema;
+                if(required && required.find(pk => pk === key)) {
+                    if(dtoProps.option) {
+                        dtoProps.option.required = true;
+                    }
+                }
+
+                dtoSchema.properties[key] = dtoProps;
+            }
+        }
+
+        return dtoSchema;
+    }
+
+    watch(
+        [() => route.query.key, () => route.query.sider_key, () => menuStore.menuList],
+        () => {
+            buildData();
+        },
+        {
+            immediate: true,
+            deep: true 
+        }
+    );
+
+    // onMounted(() => {
+    //     buildData();
+    // })
+
+    return { api, apiParams, tableSchema, tableConfig, searchSchema, searchConfig, components };
+}

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

@@ -0,0 +1,80 @@
+<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 { provide, ref } 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.js';
+import { useSchema } from './hook/schema.js';
+
+const { api, apiParams, tableSchema, tableConfig, searchSchema, searchConfig, components } = useSchema();
+
+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 });
+    }
+}
+
+// showComponent 展示动态组件
+function showComponent ({ btnConfig, rowData }) {
+    const { comName } = btnConfig.eventOption;
+    if(!comName) { return; }
+    
+    const comRef = comListRef.value.find(item => item.name === comName);
+    if(comRef) {
+        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,21 @@
+<template>
+    <el-sub-menu :index="menuItem.key">
+        <template #title>{{ menuItem.name }}</template>
+        <div v-for="item in menuItem.subMenu" :key="item.key">
+            <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,135 @@
+<template>
+    <sider-container>
+        <template #menu-content>
+            <el-menu
+                :key="activeKey"
+                :default-active="activeKey"
+                :ellipsis="false"
+                @select="onMenuSelect"
+            >
+                <template v-for="item in menuList" :key="item.key">
+                    <!-- 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, onMounted, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useMenuStore } from '$elpisStore/menu.js';
+import SiderContainer from '$elpisWidgets/sider-container/sider-container.vue';
+import SubMenu from './complex-view/sub-menu/sub-menu.vue';
+
+const router = useRouter();
+const route = useRoute();
+const menuStore = useMenuStore();
+
+const menuList = ref([]);
+const setMenuList = () => {
+    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 = () => {
+    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) {
+                // TODO: 处理选中菜单逻辑
+                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 = (menuKey) => {
+    handleMenuSelect(menuKey);
+}
+
+const handleMenuSelect = (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: `/sider${pathMap[moduleType]}`,
+        query: {
+            key: route.query.key,
+            sider_key: menuKey,
+            proj_key: route.query.proj_key
+        }
+    })
+}
+
+watch(
+    [() => route.query.key, () => menuStore.menuList],
+    () => {
+        setMenuList();
+        setActiveKey();
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+);
+</script>
+
+<style lang="less" scoped>
+
+</style>

package/app/pages/dashboard/dashboard.vue

@@ -0,0 +1,96 @@
+<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 $curl from '$elpisCommon/curl.js'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import HeaderView from './complex-view/header-view/header-view.vue';
+import { useMenuStore } from '$elpisStore/menu.js';
+import { useProjectStore } from '$elpisStore/project.js';
+
+const router = useRouter();
+const route = useRoute();
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+const projName = ref('');
+
+onMounted(() => {
+    getProjectList();
+    getProjectConfig();
+})
+
+// 请求 /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 = (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: pathMap[moduleType],
+        query: {
+            key,
+            proj_key: route.query.proj_key
+        }
+    })
+}
+</script>
+
+<style lang="less" scoped>
+:deep(.el-main) {
+    padding: 0;
+}
+</style>