@lixianwei/elpis 1.0.0

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

@@ -0,0 +1,128 @@
+<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"
+      />
+    </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 title =ref('')
+const saveBtnText = ref('')
+const isShow = ref(false)
+const loading = ref(false)
+
+const mainKey = ref('')
+const mainValue = ref({})
+const dtoModel = ref({})
+
+const show = async (rowData)=>{
+  const {config} = components.value[name.value]
+  title.value = config.title
+  saveBtnText.value = config.saveBtnText
+  // 获取设置数据的唯一值字段
+  mainKey.value = config.mainKey
+  // 获取数据唯一值字段的值
+  mainValue.value = rowData[config.mainKey]
+
+  isShow.value = true
+
+  fetchFormData()
+}
+// 关闭弹窗
+const close =()=>{
+  isShow.value = false
+}
+// 获取form详情
+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 (rowData)=>{
+  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 scoped lang="less">
+
+</style>

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

@@ -0,0 +1,119 @@
+import {ref,watch,onMounted,nextTick} from 'vue';
+import {useRoute} from "vue-router";
+import {userMenuStore} from "$elpisStore/menu";
+
+export const useSchema = function (){
+    const menuStore = userMenuStore()
+    const route = useRoute()
+    const api = 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 = bindDtoSchema(configSchema,'table')
+                tableConfig.value = sConfig.tableConfig
+                // 构造searchSchema和searchConfig
+                const dtoSearchSchema= bindDtoSchema(configSchema,'search')
+                // 处理路由传参的现象，使用schema里面的数据和路由的数据进行匹配，查看是否有值，有值的情况下就进行赋值
+                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 = {key:{schema:{},config:{}}}
+                const {componentConfig} = sConfig
+                if(componentConfig && Object.keys(componentConfig).length>0){
+                    const dtoComponents ={}
+                    for(const comName in componentConfig){
+                        dtoComponents[comName]={
+                            schema: bindDtoSchema(configSchema,comName),
+                            config: componentConfig[comName]
+                        }
+                    }
+                    components.value = dtoComponents
+                }
+
+            })
+        }
+    }
+    // 通用构建schema方法
+    const bindDtoSchema =(_schema,comName)=>{
+        if(!_schema?.properties){ return {}}
+        const dtoSchema ={
+            type:'object',
+            properties:{}
+        }
+        // 提取有效的schema 字段信息
+        for(let 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`]})
+                dtoSchema.properties[key] = dtoProps;
+
+                // 处理required 字段
+                const {required} = _schema
+                if(required && required.find(pk=>pk===key)){
+                    dtoProps.option.required = true
+                }
+            }
+        }
+
+        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,96 @@
+<template>
+  <el-row class="schema-view">
+    <search-panel
+      v-if="searchSchema?.properties && Object.keys(searchSchema?.properties).length>0"
+      @search="onSearch"
+    />
+    <table-panel @operate="handelOperate" ref="tablePanelRef" />
+
+    <component
+      v-for="(item,key) in Object.keys(components)"
+      :is="ComponentConfig[item].component"
+      :key="key"
+      ref="comListRef"
+      @command="onComponentCommand"
+    />
+  </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/tabel-panel/tabel-panel.vue'
+import { useSchema } from './hook/schema.js'
+import ComponentConfig from "./components/component-config";
+const {api,tableConfig,tableSchema,searchSchema,searchConfig,components} = useSchema()
+
+// console.log
+
+const apiParams = ref({})
+provide('schemaViewData',{
+  api,
+  tableConfig,
+  tableSchema,
+  searchSchema,
+  searchConfig,
+  apiParams,
+  components
+})
+const tablePanelRef = ref(null)
+const comListRef = ref([])
+
+// 搜索
+const onSearch =(searchValObj)=>{
+  console.log(searchValObj)
+  apiParams.value =searchValObj
+}
+// showComponent 展示动态组件
+const showComponent =({btnConfig,rowData})=>{
+  // 提取规则配置里面的组件名称
+  const {comName} = btnConfig.eventOption
+  // 如果没有就阻止进行
+  if(!comName) {
+    console.error(`找不到组件:${comName}`)
+    return;
+  }
+ // 如果存在就根据组件名在组件中循环找到这相对应的组件
+  const comRef = comListRef.value.find((item)=>item.name === comName)
+  console.log(comRef)
+  // 如果没有找到,或者组件中没有 show 方法也阻止
+  if(!comRef || typeof comRef.show !== 'function') {return;}
+  // 如果找到了就调用组件中的 show 方法
+  comRef.show(rowData)
+}
+// table 事件映射
+const EventHandlerMap ={
+  showComponent:showComponent
+}
+// 点击按钮事件
+const handelOperate =({btnConfig,rowData})=>{
+  // 找到规则中的eventKey 事件名称
+  const {eventKey} = btnConfig;
+  // 判断事件映射是否存在
+  if(EventHandlerMap[eventKey]){
+    // 如果存在就调用这个方法
+    EventHandlerMap[eventKey]({btnConfig,rowData})
+  }
+}
+
+const onComponentCommand=(data)=>{
+  const {event} = data
+  if(event==='loadTableData'){
+    tablePanelRef.value.loadTableData()
+  }
+}
+
+</script>
+
+
+
+<style scoped lang="less">
+.schema-view {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 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 :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 scoped lang="less">
+
+</style>

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

@@ -0,0 +1,117 @@
+
+
+<template>
+  <sider-container>
+    <template #menu-content>
+      <el-menu :default-active="activeKey" :ellipsis="false" @select="onMenuSelect">
+        <template v-for="item in menuList" :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>
+        </template>
+      </el-menu>
+    </template>
+    <template #main-content>
+      <router-view />
+    </template>
+  </sider-container>
+</template>
+<script setup>
+import {ref,watch,onMounted} from 'vue'
+import {useRouter,useRoute} from 'vue-router'
+import {userMenuStore} from "$elpisStore/menu";
+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 = userMenuStore()
+
+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){
+        // 处理选中菜单逻辑
+        handleMenuSelect(siderMenuItem.key)
+      }
+    }
+  }
+  activeKey.value = siderMenuItem?.key
+
+}
+
+watch(()=> route.query.key, () => {
+  setActiveKey()
+  setMenuList()
+})
+
+watch(() => menuStore.menuList, () => {
+  setActiveKey()
+  setMenuList()
+})
+
+onMounted(() => {
+  setActiveKey()
+  setMenuList()
+})
+
+
+const  onMenuSelect =(menuKey)=>{
+  handleMenuSelect(menuKey)
+}
+
+const handleMenuSelect = (menuKey)=>{
+  const menuItem = menuStore.findMenuItem({key:'key',value:menuKey})
+  if(!menuItem) {return}
+
+  const {moduleType,key,customConfig} = menuItem
+
+  // 与顶部菜单的 key 区分：这里应判断当前左侧已选中的 sider_key
+  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 scoped lang="less">
+
+</style>

package/app/pages/dashboard/dashboard.vue

@@ -0,0 +1,88 @@
+
+
+<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 {userMenuStore} from '$elpisStore/menu.js'
+  import {userProjectStore} from '$elpisStore/project.js'
+
+  const router = useRouter()
+  const route = useRoute()
+  const menuStore = userMenuStore()
+  const projectStore = userProjectStore()
+  onMounted(()=>{
+    getProjectList();
+    getProjectConfig();
+  })
+  const projName = ref('')
+
+
+// 请求/api/project/list 接口 并缓存到project-store中
+  async function getProjectList(){
+    const res = await $curl({
+      url:'/api/project/list',
+      method:'get',
+      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({
+      url:'/api/project',
+      method:'get',
+      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}
+    let 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 scoped lang="less">
+:deep(.el-main){
+  padding: 0  ;
+}
+</style>

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

@@ -0,0 +1,41 @@
+import boot from '$elpisPages/boot.js'
+import dashBoard from './dashboard.vue'
+import businessDashboradRouterConfig from '$businessDashboradRouterConfig'
+
+let 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 siderRouters = [
+    {
+        path: 'iframe',
+        component:()=>import('./complex-view/iframe-view/iframe-view.vue')
+    },
+    {
+        path: 'schema',
+        component:()=>import('./complex-view/schema-view/schema-view.vue')
+    }
+]
+// 侧边栏（子路由必须用相对路径，才会挂到 /sider/* 下，供 sider-view 的 <router-view> 渲染）
+routes.push({
+    path: '/view/dashboard/sider',
+    component:()=>import('./complex-view/sider-view/sider-view.vue'),
+    children:siderRouters
+})
+
+if(typeof businessDashboradRouterConfig === 'function') {
+    businessDashboradRouterConfig({routes,siderRouters})
+}
+
+
+// 侧边栏兜底策略
+routes.push({
+    path:'/view/dashboard/sider/:chapters+',
+    component:()=>import('./complex-view/sider-view/sider-view.vue')
+})
+boot(dashBoard,{routes})

package/app/pages/router/index.js

@@ -0,0 +1,11 @@
+import {createRouter,createWebHistory} from 'vue-router'
+
+export default function setupRouter(routes){
+    if(!routes || !routes.length){
+        return null
+    }
+    return createRouter({
+        history: createWebHistory(), //采用history 模式
+        routes
+    })
+}

package/app/pages/store/index.js

@@ -0,0 +1,4 @@
+import {createPinia} from 'pinia'
+
+const pinia = createPinia()
+export default pinia

package/app/pages/store/menu.js

@@ -0,0 +1,65 @@
+import {defineStore} from 'pinia'
+import {ref} from 'vue'
+export const userMenuStore = 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 mItem = findMenuItem({key,value},menuItem.siderConfig.menu)
+                if(mItem){
+                    return mItem
+                }
+            }
+        }
+    }
+    /*
+    * 找出左侧第一个菜单
+    * @param mList 菜单列表
+    * */
+
+    const findFirstMenuItem =(mList = menuList.value)=>{
+        if(!mList || !mList[0]){return}
+        let firstMenuItem = mList[0]
+        if(firstMenuItem.subMenu){
+            firstMenuItem = findFirstMenuItem(firstMenuItem.subMenu)
+        }
+        return firstMenuItem
+    }
+
+    return {
+        menuList,
+        setMenuList,
+        findMenuItem,
+        findFirstMenuItem
+    }
+})