@siven-li/elpis 1.0.0

package/app/pages/boot.js

@@ -0,0 +1,53 @@
+// Vue 使用 createSSRApp 创建应用，并在客户端调用 hydrate 方法
+// createSSRApp 是 Vue 3 SSR 开发的标准入口，用于确保服务端渲染的内容能在客户端被高效、无缝地复用
+import { createSSRApp } from 'vue';
+
+// 引入 ElemnetPlus 组件库
+import ElementPlus from 'element-plus';
+import 'element-plus/theme-chalk/index.css';
+import 'element-plus/theme-chalk/dark/css-vars.css';
+
+import './assets/custom.css'
+
+import pinia from '$elpisStore';
+
+import { createRouter, createWebHistory } from 'vue-router';
+
+
+/**
+ * vue 页面主入口，用于启动 vue
+ * @params pageComponent vue 入口组件
+ * @params routes 页面路由配置
+ * @params libs 页面所需的第三方库
+ */
+export default (pageComponent, { routes, libs } = {}) => {
+  // 挂载时自动尝试水合
+  const app = createSSRApp(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,74 @@
+const md5 = require('md5');
+import { ElMessage } from 'element-plus';
+
+/**
+ * 前端封装 curl 方法
+ * @params options 请求参数
+ */
+const curl = ({
+  url, // 请求地址
+  method = 'post', // 请求方法
+  query = {}, // url query参数
+  data = {}, // post body参数
+  headers = {}, // 请求头
+  timeout = 60000, // 请求超时时间
+  responseType = 'json', // 响应类型
+  errorMsg = '网络异常'
+}) => {
+  // 接口签名处理
+  const signKey = 'li11shi08z2cx3shi0wen920';
+  const st = Date.now();
+  const dtoHeaders = {
+    ...headers,
+    s_t: st,
+    s_sign: md5(`${signKey}_${st}`)
+  }
+  if (url.indexOf('/api/proj/') > -1 && window.projKey) {
+    dtoHeaders.proj_key = window.projKey;
+  }
+
+  // 构造请求参数（把参数转为 axios 参数）
+  const axiosParams = {
+    url,
+    method,
+    params: query,
+    data,
+    responseType,
+    timeout,
+    headers: dtoHeaders
+  }
+  return axios.request(axiosParams).then((response) => {
+    const resData = response.data || {};
+    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(errorMsg);
+      }
+      console.log(message);
+      return Promise.resolve({ success, code, message });
+    }
+    // 成功
+    const { data, metadata } = resData;
+    return Promise.resolve({ success, data, metadata });
+  }).catch((error) => {
+    const { message } = error;
+    if (message.match(/timeout/i)) {
+      return Promise.resolve({
+        message: '请求超时',
+        code: 504
+      })
+    };
+    return Promise.resolve(error);
+  });
+}
+export default curl;

package/app/pages/common/utils.js

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

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

@@ -0,0 +1,35 @@
+<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"
+      />
+      <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 lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,132 @@
+<template>
+  <header-container :title="projName">
+    <template #menu-panel>
+      <!-- 根据 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"
+            :key="item.key"
+            :menu-item="item"
+          />
+          <el-menu-item
+            v-else
+            :key="item.name + item.key"
+            :index="item.key"
+          >
+            {{ item.name }}
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </template>
+    <template #setting-content>
+      <!-- 根据 projectStore.projectList 渲染 -->
+      <el-dropdown @command="handleProjCommand">
+        <span class="project-list">
+          {{ projName }}
+          <el-icon
+            v-if="projectStore.projectList.length > 1"
+            class="el-icon--right"
+          >
+            <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" />
+    </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.js'
+import { useProjectStore } from '$elpisStore/project.js'
+
+const route = useRoute();
+
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+defineProps({
+  projName: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits([ 'menu-select' ]);
+
+const activeKey = ref('');
+
+watch(() => route.query.key, () => {
+  setActiveKey();
+});
+watch(() => menuStore.menuList, () => {
+  setActiveKey();
+}, { deep: true })
+onMounted(() => {
+  setActiveKey();
+})
+
+const setActiveKey = () => {
+  const menuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: route.query.key
+  })
+  activeKey.value = menuItem?.key;
+}
+
+const onMenuSelect = (menuKey) => {
+  const menuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: menuKey
+  });
+  emit('menu-select', menuItem);
+}
+const handleProjCommand = (event) => {
+  const projItem = projectStore.projectList.find(item => item.key === event);
+  if (!projItem || !projItem.homePage) return;
+  const { origin } = window.location;
+  window.location.replace(`${origin}/view/dashboard${projItem.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) {
+  border-bottom: 0px;
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <iframe
+    :src="path"
+    class="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 = () => {
+  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 {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <el-card class="search-panel">
+    <schema-search-bar
+      :schema="searchSchema"
+      @load="onLoad"
+      @search="onSearch"
+      @reset="onReset"
+    />
+  </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,130 @@
+<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"
+        :key="item"
+        v-bind="item"
+        @click="operationHandler( { btnConfig: item })"
+      >
+        {{ item.label }}
+      </el-button>
+    </el-row>
+    <!-- schema-table (组件 widget) -->
+    <schema-table
+      ref="schemaTableRef"
+      :schema="tableSchema"
+      :api="api"
+      :api-params="apiParams"
+      :buttons="tableConfig?.rowButtons ?? []"
+      @operate="operationHandler"
+    />
+  </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('::');
+  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
+      },
+      errorMsg: '删除失败'
+    })
+    schemaTableRef.value.hideLoading();
+
+    if (!res || !res.success || !res.data) return;
+    ElNotification({
+      title: '提示',
+      message: '删除成功',
+      type: 'success'
+    });
+    await initTableData();
+  })
+}
+
+const loadTableData = async () => {
+  await schemaTableRef.value.loadTableData();
+}
+
+const initTableData = async () => {
+  await schemaTableRef.value.initData();
+}
+
+defineExpose({
+  loadTableData,
+  initTableData
+})
+
+</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,90 @@
+<template>
+  <el-drawer
+    v-model="isShow"
+    direction="rtl"
+    :destroy-on-close="true"
+    :size="550"
+  >
+    <template #header>
+      <h3>
+        {{ title }}
+      </h3>
+    </template>
+    <template #default>
+      <SchemaForm
+        ref="schemaFormRef"
+        v-loading="loading"
+        :schema="components[name]?.schema"
+      />
+    </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('createForm');
+const isShow = ref(false);
+const title = ref('');
+const saveBtnText = ref('');
+const schemaFormRef = ref(null);
+const loading = ref(false);
+
+const show = () => {
+  const { title: ttileCon, saveBtnText: saveBtnTextCon } = components.value[name.value].config;
+  title.value = ttileCon;
+  saveBtnText.value = saveBtnTextCon;
+  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: '创建成功' 
+  });
+  close();
+  emit('command', {
+    event: 'loadTableData'
+  });
+}
+
+defineExpose({
+  name,
+  show
+})
+</script>
+<style lang="less" scoped>
+
+</style>