@dmqweb/elpis 1.0.0

package/app/middleware/project-handler.js

@@ -0,0 +1,27 @@
+/**
+ * projectHandler 相关项目处理内容
+ */
+
+module.exports = (app) => {
+  return async (ctx, next) => {
+
+    if (ctx.path.indexOf('/api/proj/') < 0) {
+      return await next()
+    }
+
+    const { proj_key : projKey} = ctx.request.headers
+
+    if (!projKey) {
+      ctx.status = 200;
+      ctx.body = {
+        success: false,
+        message: 'no project key',
+        code: 446
+      };
+      return;
+    }
+    ctx.projKey = projKey
+
+    await next()
+  }
+}

package/app/middleware.js

@@ -0,0 +1,40 @@
+  const path = require('path');
+  // 模板渲染引擎中间件
+  module.exports = (app) => {
+    // 引入koa-static中间件，用于提供静态文件服务
+    const KoaStatic = require('koa-static');
+    // 将app/public目录设置为静态文件服务目录
+    // 这样可以直接通过URL访问该目录下的文件，如CSS、JS、图片等
+    // path.resolve(process.cwd(), './app/public')将相对路径解析为绝对路径
+    app.use(KoaStatic(path.resolve(process.cwd(), './app/public')))
+
+    // 引入koa-nunjucks-2中间件
+    const koaNunjucks = require('koa-nunjucks-2');
+    app.use(koaNunjucks({
+    ext: 'tpl', // 配置模板文件的扩展名
+    path: path.resolve(process.cwd(), './app/public'),  // 配置模板文件的查找路径
+    nunjucksConfig: {
+      nocache: true, // 开发时禁用缓存
+      trimBlocks: true // trimBlocks设置为true，表示自动去除块级标签后的空白字符
+    }
+  }));
+
+  // 引入koa-bodyparser中间件，用于解析HTTP请求体
+    const bodyParser = require('koa-bodyparser');
+    app.use(bodyParser({
+      formLimit: '1000mb', // 设置表单数据大小限制为1000MB
+      enableTypes:['json', 'form', 'text'] // 启用解析的请求体类型：JSON、表单、文本  
+    }));
+
+  // 引入 自定义的错误处理中间件
+  app.use(app.middlewares.errorHandler)
+
+  // 引入 签名合法校验
+  app.use(app.middlewares.apiSignVerify)
+
+  // 引入 API参数校验
+  app.use(app.middlewares.apiParamsVerify)
+
+  // 引入 项目处理中间件
+  app.use(app.middlewares.projectHandler)
+} 

package/app/pages/asserts/custom.css

@@ -0,0 +1,12 @@
+html, body{
+  height: 100%;
+}
+
+#root{
+  height: 100%;
+}
+
+input:-webkit-autofill {
+  /* 覆盖自动填充背景颜色 */
+  -webkit-box-shadow: 0 0 0px 1000px white inset ;
+}

package/app/pages/boot.js

@@ -0,0 +1,59 @@
+import { createApp } from "vue";
+
+// 引入 elementUI
+import ElementPlus 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/index.js'
+import { createWebHistory, createRouter } from 'vue-router'
+
+/**
+ * vue 页面主入口， 用于启动 vue
+ * @param  pageComponent vue 入口组件
+ * @param  routes 路由列表   
+ * @param  libs 页面依赖的第三方包
+ */
+export default (pageComponent, { routes, libs } = {}) => { 
+  // 添加passive事件监听器支持，解决Chrome中关于非被动事件监听器的警告
+  (function() {
+    if (typeof EventTarget !== "undefined") {
+      let func = EventTarget.prototype.addEventListener;
+      EventTarget.prototype.addEventListener = function(type, fn, capture) {
+        capture = capture || {};
+        if (type === "touchstart" || type === "touchmove" || type === "wheel" || type === "mousewheel") {
+          capture.passive = capture.passive || !capture.once;
+        }
+        func.call(this, type, fn, capture);
+      };
+    }
+  })();
+
+  const app = createApp(pageComponent);
+
+  // 挂载 elementUI 
+  app.use(ElementPlus);
+  // 挂载 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,88 @@
+import { ElMessage } from "element-plus";
+
+const md5 = require("md5");
+/**
+ * 前端封装的 curl 方法
+ * @param {Object} options 请求参数
+ */
+
+const curl = ({
+  url, // 请求地址
+  method = 'post', // 请求方法
+  headers = {}, // 请求头
+  params = {}, // 请求参数
+  data = {}, // 请求体
+  responseType = 'json', // 响应数据类型
+  timeout = 60000, // 请求超时时间
+  errorMsg = '请求超时', // 请求超时错误信息
+}) => {
+
+  // 接口签名处理（让接口变动态）
+  const signKey = 'elpis-sign-key'
+  const st = Date.now()
+  const signature = md5(`${signKey}_${st}`)
+
+  const dotHeaders = {
+    ...headers,
+    s_t: st,
+    s_sign: signature,
+  }
+
+  if(url.indexOf('/api/proj/') > -1 && window.projKey && window.projKey !== 'undefined') {
+
+    dotHeaders.proj_key = window.projKey
+  }
+
+  // 构造请求参数 把参数转换为 axios 参数
+  const ajaxSetting = {
+    method,
+    url,
+    params,
+    data,
+    responseType,
+    timeout,
+    headers: dotHeaders
+  }
+
+  return axios.request(ajaxSetting).then((response) => {
+    const resData = response.data
+
+    // 后端API返回格式
+    const { success } = resData;
+
+    // 失败
+    if(!success){
+      const { message, code } = resData;
+      if ( code === 402){
+        ElMessage.error('请求参数异常')
+      } else if ( code === 445){
+        ElMessage.error('请求不合法')
+      }else if ( code === 446){
+        ElMessage.error('缺少项目必要参数 ')
+      } else if ( code === 50000){
+        ElMessage.error(message)
+      }else {
+        ElMessage.error(errorMsg)
+      }
+      console.error(message)
+      return Promise.resolve({ success, code, message})
+  }
+    // 成功
+    const { data, metadata} = resData;
+    return Promise.resolve({ success, data, metadata})
+
+  }).catch((e) => {
+    const { message } = e
+
+    if (message.match(/timeout/)){
+      return Promise.resolve({
+        message: '请求超时',
+        code: 504
+      })
+    }
+
+    return Promise.resolve(e)
+  })
+}
+
+export default curl;

package/app/pages/common/util.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,40 @@
+<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: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<style scoped lang="less">
+
+</style>

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

@@ -0,0 +1,141 @@
+<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"
+          />
+          <el-menu-item
+            v-else 
+            :index="item.key"
+          >
+            {{ item.name }}
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </template>
+    <!-- 右侧上方设置区域 -->
+    <template #setting-content>
+      <!-- 根据 projStore.projList 渲染 -->
+      <el-dropdown @command="handleProjectCommand">
+        <span class="project-list">
+          {{ projName }}
+          <el-icon
+            v-if="projectStore.projectList.length > 1"
+            class="el-icon--right"
+          >
+            <arrow-down />
+          </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.key === route.query.proj_key"
+            >
+              {{ item. name }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </template>
+    <!-- 主内容区域 -->
+    <template #main-content>
+      <slot name="main-content" />
+    </template>
+  </header-container>
+</template>
+
+<script setup>
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ref, watch, onMounted } from 'vue'
+import {  useRoute } from 'vue-router'
+import HeaderContainer from '$elpisWidgets/header-container/header-container.vue'
+import SubMenu from './complex-view/sub-menu/sub-menu.vue'
+import { useProjectStore } from '$elpisStore/project.js'
+import { useMenuStore } from '$elpisStore/menu.js'
+
+const route = useRoute()
+const projectStore = useProjectStore()
+const menuStore = useMenuStore()
+
+defineProps({
+  // eslint-disable-next-line vue/require-default-prop
+  projName: {
+    type: String,
+  }
+})
+// 传给父组件 menu-select 事件
+const emit = defineEmits(['menu-select'])
+
+const activeKey = ref('')
+
+// 设置 activeKey
+const setActiveKey = function() {
+  const menuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: route.query.key
+  })
+  activeKey.value = menuItem?.key
+}
+
+// 监听路由变化，设置 activeKey
+watch( [
+  () => route.query.key,
+  () => menuStore.menuList
+], () => {
+  setActiveKey()
+}, { deep: true, immediate: true})
+// 当页面加载完成并且该组件被挂载到DOM上时
+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 { origin} = window.location
+  window.location.href = `${origin}/view/dashboard${projectItem.homePage}`
+}
+</script>
+
+<style scoped lang="less">
+.project-list {
+  margin-right: 20px;
+  cursor: pointer;
+  color: var(--el-color-primary);
+  display: flex;
+  align-items: center;
+  outline: none;
+}
+</style>

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

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

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

@@ -0,0 +1,39 @@
+<template>
+  <el-card class="search-panel">
+    <schema-search-bar
+      :schema="searchSchema"
+      @reset="onReset"
+      @load="onLoad"
+      @search="onSearch"
+    />
+  </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,146 @@
+<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（组件 ） -->
+    <schema-table
+      ref="schemaTableRef"
+      :api="api"
+      :schema="tableSchema"
+      :api-params="apiParams"
+      :buttons="tableConfig?.rowButtons ?? []"
+      @operate="operationHandler"
+    >
+      <!--  -->
+    </schema-table>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue'
+import $curl from '$elpisCommon/curl.js'
+import {  ElMessageBox, ElNotification } from 'element-plus'
+import SchemaTable from '$elpisWidgets/schema-table/schema-table.vue'
+
+const {
+  api,
+  apiParams,
+  tableSchema,
+  tableConfig,
+} = inject('schemaViewData')
+
+const schemaTableRef = ref(null)
+const emit = defineEmits(['operate'])
+
+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 = params[removeKey];
+
+  const removeValueList = removeValue.split('::')
+  if (removeValueList[0] === 'schema' && removeValueList[1]) {
+    removeValue = rowData[removeValueList[1]]
+  }
+
+  ElMessageBox.confirm(
+    `确认删除 ${rowData['product_name']} 数据吗？`,
+    '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.success({
+      title: '删除成功',
+      message: `${removeKey}: ${removeValue} 删除成功`,
+      type: 'success'
+    })
+
+    await initTableData()
+  })
+  .catch(() => {
+    ElNotification.info({
+      title: '取消删除',
+      message: '已取消删除操作',
+      type: 'info'
+    })
+  })
+}
+const initTableData = async () => { 
+  await schemaTableRef.value.initData()
+}
+const loadTableData = async () => { 
+  await schemaTableRef.value.loadTableData()
+}
+
+defineExpose({
+  loadTableData,
+  initTableData
+})
+</script>
+
+<style lang="less" scoped>
+.table-panel {
+  flex: 1;
+  margin: 10px;
+  width: 100%;
+  height: 100%;
+
+  .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,24 @@
+import createForm from "./create-form/create-form.vue"
+import editForm from "./edit-form/edit-form.vue"
+import detailPanel from "./detail-panel/detail-panel.vue";
+
+// 业务自定义组件注册
+import BusinessComponentConfig from "$businessComponentConfig";
+
+
+const ComponentConfig = {
+  createForm: {
+    component: createForm
+  },
+  editForm: {
+    component: editForm
+  },
+  detailPanel: {
+    component: detailPanel
+  }
+}
+
+export default {
+  ...ComponentConfig,
+  ...BusinessComponentConfig
+}