@misstalor17/elpis 1.0.0

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

@@ -0,0 +1,113 @@
+<template>
+    <el-drawer v-model="isShow" direction="rtl" :destroy-on-close="true" :size="550">
+        <template #header>
+            <h3>{{ title }}</h3>
+        </template>
+        <template #default>
+            <schema-form v-loading="loading" ref="schemaFormRef" :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'
+import SchemaForm from '$elpisWidgets/schema-form/schema-form.vue';
+
+const { api, components } = inject('schemaViewData')
+
+const emit = defineEmits(['command'])
+const schemaFormRef = ref(null)
+const name = ref('editForm')
+const isShow = ref(false)
+const title = ref('')
+const saveBtnText = ref('')
+const mainKey = ref('')
+const mainValue = ref()
+const dtoModel = ref({})
+const loading = ref(false)
+
+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 || !res.success) {
+        return;
+    }
+
+    ElNotification({
+        title: '修改成功',
+        message: '修改成功',
+        type: 'success'
+    })
+
+    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,109 @@
+import { ref, onMounted, watch, 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({})
+
+    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 = {}
+            searchConfig.value = undefined;
+            components.value = {}
+            nextTick(() => {
+                //构造tableSchema 和tableConfig
+                tableSchema.value = buildDtoSchema(configSchema, 'table')
+                tableConfig.value = sConfig.schema.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.schema.searchConfig
+
+                //构造 compoents = { 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: {}
+        }
+
+        //提取有效 scema 字段信息
+        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
+                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,66 @@
+<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'
+
+const { api, tableSchema, tableConfig, searchSchema, searchConfig, components } = useSchema()
+const apiParams = ref({})
+provide('schemaViewData', {
+    api, tableSchema, tableConfig, searchSchema, searchConfig, apiParams, 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 }) {
+    console.log({ btnConfig, rowData }, '99999');
+    const { comName } = btnConfig.eventOption
+    if (!comName) { return; }
+    const comRef = comListRef.value.find(item => item.name === comName)
+
+    if (!comRef || typeof comRef.show !== 'function') { 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,17 @@
+<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>
+// import { ref } from 'vue'
+const { menuItem } = defineProps(['menuItem'])
+</script>
+    
+<style lang='less' scoped></style>
+    

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

@@ -0,0 +1,116 @@
+<template>
+    <sider-container>
+        <template #menu-content>
+            <el-menu :default-active="activeKey" :ellipsis="false" @select="onMenuSelect">
+                <template v-for="item in 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 #main-content>
+            <router-view></router-view>
+        </template>
+    </sider-container>
+</template>
+    
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { useRoute, useRouter } 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 route = useRoute()
+const router = useRouter()
+const menuStore = useMenuStore()
+
+const menuList = ref([])
+const setMenuList = function () {
+    const menuItem = menuStore.findMenuItem({
+        key: 'key',
+        value: route.query.key
+    })
+    console.log(menuItem, 'menuItem');
+    if (menuItem && menuItem.siderConfig && menuItem.siderConfig.menu) {
+        menuList.value = menuItem.siderConfig.menu
+    }
+    console.log(menuList, 'menuList');
+}
+
+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();
+    console.log('进入----');
+})
+
+
+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,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 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.js'
+import { useProjectStore } from '$elpisStore/project.js'
+
+
+const route = useRoute()
+const router = useRouter()
+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: {
+            //TODO: 动态获取当前项目的key
+            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: {
+            //TODO: 动态获取当前项目的key
+            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 (menuItme) {
+    console.log(menuItme, 'menuItme');
+    const { moduleType, key, customConfig } = menuItme
+    //如果是当前页，不处理
+    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>
+    

package/app/pages/dashboard/entry.dashboard.js

@@ -0,0 +1,45 @@
+import boot from '$elpisPages/boot.js'
+import dashboard from './dashboard.vue'
+import businessDashboardRouterConfig from '$businessDashboardRouterConfig'
+
+const routes = []
+
+//头部菜单路由
+routes.push({
+    path: '/view/dashboard/iframe',
+    component: () => import('./complex-view/iframe-view/iframe-view.vue')
+})
+routes.push({
+    path: '/view/dashboard/schema',
+    component: () => import('./complex-view/schema-view/schema-view.vue')
+})
+
+const siderRoutes = [{
+  path:'iframe',
+  component:() => import('./complex-view/iframe-view/iframe-view.vue')
+},
+{
+  path:'schema',
+  component:() => import('./complex-view/schema-view/schema-view.vue')
+}]
+
+//侧边栏菜单路由
+routes.push({
+  path: '/view/dashboard/sider',
+  component: () => import('./complex-view/sider-view/sider-view.vue'),
+    // 所有子路由都放在 children 数组里
+  children:siderRoutes
+})
+
+//业务扩展路由
+if(typeof businessDashboardRouterConfig === 'function'){
+  businessDashboardRouterConfig({routes,siderRoutes})
+}
+
+//侧边栏兜底菜单路由
+routes.push({
+    path:'/view/dashboard/sider/:chapters+',
+    component: () => import('./complex-view/sider-view/sider-view.vue')
+})
+
+boot(dashboard, { routes })

package/app/pages/store/index.js

@@ -0,0 +1,3 @@
+import { createPinia } from "pinia";
+const pinia = createPinia()
+export default pinia;

package/app/pages/store/menu.js

@@ -0,0 +1,60 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useMenuStore = defineStore('menu', () => {
+    // 菜单列表
+    const menuList = ref([])
+
+    //设置菜单配置
+    const setMenuList = function (list) {
+        menuList.value = list
+    }
+    /**
+     * 找出菜单目录
+     * @param {key}  搜索字段
+     * @param {value} 搜索值 
+     * @param {mList} 要搜索的菜单列表 
+     */
+
+    const findMenuItem = function ({ key, value }, mList = menuList.value) {
+        for (let i = 0; i < mList.length; i++) {
+            const menuItem = mList[i]
+
+            if (!menuItem) { continue; }
+
+            const { menuType, moduleType } = menuItem
+            if (menuItem[key] === value) {
+                return menuItem;
+            }
+            if (menuType === 'group' && menuItem.subMenu) {
+                const mItem = findMenuItem({ key, value }, menuItem.subMenu)
+                if (mItem) { return mItem };
+            }
+
+            if (moduleType === 'sider' && menuItem.siderConfig && menuItem.siderConfig.menu) {
+                const mItme = findMenuItem({ key, value }, menuItem.siderConfig.menu)
+                if (mItme) { return mItme }
+            }
+        }
+    }
+
+    /**
+     * 找出第一个菜单目录
+     * @param {mList} 要搜索的菜单列表 
+     */
+    const findFirstMenuItem = function(mList = menuList.value) {
+        if(!mList || !mList[0]){return;}
+        let firstMenuItme = mList[0]
+        if(firstMenuItme.subMenu){
+            firstMenuItme = findFirstMenuItem(firstMenuItme.subMenu)
+        }
+        return firstMenuItme;
+    }
+
+    return {
+        menuList,
+        setMenuList,
+        findMenuItem,
+        findFirstMenuItem
+    }
+})

package/app/pages/store/project.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useProjectStore = defineStore('project',() => {
+    // 菜单列表
+    const projectList = ref([])
+
+    //设置菜单配置
+    const setProjectList = function(list){
+        projectList.value = list
+    }
+
+    return {
+        projectList,
+        setProjectList
+    }
+})