@mangjuxiong/elpis 1.0.2

package/app/pages/asserts/custom.css

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

package/app/pages/boot.js

@@ -0,0 +1,48 @@
+import { createApp } from 'vue';
+import pinia from '@elpisStore';
+import { createRouter, createWebHistory } from 'vue-router';
+import './asserts/custom.css';
+
+// 引入elementui
+import ElementPlus from 'element-plus';
+import 'element-plus/theme-chalk/index.css';
+import 'element-plus/theme-chalk/dark/css-vars.css';
+
+/**
+ * vue页面的主入口，用于启动vue
+ * @params pageComponent vue 入口组件
+ * @params routes 路由列表
+ * @params libs 页面依赖的第三方包
+ */
+export default (pageComponent, { routes, libs } = {}) => {
+  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(() => {
+      // 挂载到dom
+      app.mount('#root');
+    });
+  } else {
+    app.mount('#root');
+  }
+};

package/app/pages/common/curl.js

@@ -0,0 +1,80 @@
+const md5 = require('md5');
+import { ElMessage } from 'element-plus';
+
+/**
+ * 前端封装的curl方法
+ * @param {Object} options 请求参数
+ */
+
+const curl = ({
+  url = '', // 请求地址
+  method = 'get', // 请求方法
+  headers = {}, // 请求头
+  query = {}, // 请求参数 url query
+  data = {}, // post body
+  timeout = 30000, // 超时
+  responseType = 'json', // 返回数据类型
+  errorMessage = '网络异常',
+}) => {
+  // 接口签名处理（让接口变动态）
+  const signKey = 'mshsiksjksnnmsma';
+  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 ajaxSettings = {
+    url,
+    method,
+    params: query,
+    data,
+    timeout,
+    responseType,
+    headers: dtoHeaders,
+  };
+  return axios
+    .request(ajaxSettings)
+    .then((res) => {
+      const resData = res.data || {};
+      // 后端API返回数据格式
+      const { success } = resData;
+      // 失败
+      if (!success) {
+        const { message, code } = resData;
+        console.log('🚀 ~ returnaxios.request ~ message:', message);
+        if (code === 442) {
+          ElMessage.error('请求参数异常');
+        } else if (code === 445) {
+          ElMessage.error('请求不合法');
+        } else if (code === 446) {
+          ElMessage.error('项目标识不存在');
+        } else if (code === 5000) {
+          ElMessage.error(message);
+        } else {
+          ElMessage.error(errorMessage);
+        }
+        return Promise.resolve({ success, message, code });
+      }
+      // 成功
+      const { data, metadatas } = resData;
+      return Promise.resolve({ success, data, metadatas });
+    })
+    .catch((err) => {
+      const { message } = err;
+      if (message.match(/timeout/)) {
+        return Promise.resolve({
+          message: 'Request timeout',
+          code: 504,
+        });
+      }
+      return Promise.resolve(err);
+    });
+};
+
+export default curl;

package/app/pages/common/utils.js

@@ -0,0 +1,34 @@
+const utils = {
+  /**
+   * 防抖
+   * @param {防抖的方法} fn
+   * @param {防抖的时间} delay
+   */
+  debounce: (fn, delay=0) => {
+    let timer = null;
+    return function (...args) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        fn.apply(this, args);
+        timer = null;
+      }, delay);
+    };
+  },
+    
+  /**
+   * 节流
+   * @param {节流的方法} fn
+   * @param {节流的时间} delay
+   */
+  throttle: (fn, delay=0) => {
+    let lastTime = 0;
+    return function (...args) {
+      const now = Date.now();
+      if (now - lastTime > delay) {
+        fn.apply(this, args);
+        lastTime = now;
+      }
+    };
+  },
+};
+export default utils;

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

@@ -0,0 +1,24 @@
+<template>
+  <el-sub-menu :index="menuItem.key || ''">
+    <template #title>
+      {{ menuItem.name }}
+    </template>
+    <div v-for="subMenuItem in menuItem.subMenu" :key="subMenuItem.key">
+      <sub-menu v-if="subMenuItem.subMenu && subMenuItem.subMenu.length > 0" :menu-item="subMenuItem" />
+      <el-menu-item v-else :index="subMenuItem.key">
+        {{ subMenuItem.name }}
+      </el-menu-item>
+    </div>
+  </el-sub-menu>
+</template>
+
+<script setup>
+const { menuItem } = defineProps({
+  menuItem: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,113 @@
+<template>
+  <header-container :title="projectName">
+    <template #menu-content>
+      <!-- 根据menuStore的menuList的渲染 -->
+      <el-menu :default-active="activeMenuKey" :ellipsis="false" mode="horizontal" @select="onMenuSelect">
+        <template v-for="menuItem in menuStore.menuList">
+          <sub-menu v-if="menuItem.subMenu && menuItem.subMenu.length > 0" :menu-item="menuItem" />
+          <el-menu-item v-else :index="menuItem.key">
+            {{ menuItem.name }}
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </template>
+    <template #setting-content>
+      <!-- 根据projectStore的projectList的渲染 -->
+      <el-dropdown @command="handleProjectCommand">
+        <span class="project-list">
+          {{ projectName }}
+          <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="projectItem in projectStore.projectList"
+              :command="projectItem.key"
+              :disabled="projectItem.name === projectName"
+            >
+              {{ projectItem.name }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+        <el-dropdown-menu slot="dropdown" />
+      </el-dropdown>
+    </template>
+    <template #main-content>
+      <slot name="main-content" />
+    </template>
+  </header-container>
+</template>
+
+<script setup>
+import HeaderContainer from '@elpisWidgets/head-container/head-container';
+import { ref, watch, onMounted } from 'vue';
+import { ArrowDown } from '@element-plus/icons-vue';
+import SubMenu from './complex-view/sub-menu/sub-menu';
+import { useMenuStore } from '@elpisStore/menu.js';
+import { useProjectStore } from '@elpisStore/project.js';
+import { useRoute } from 'vue-router';
+
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+const route = useRoute();
+
+defineProps({
+  projectName: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['menu-select']);
+
+const activeMenuKey = ref('');
+const setActiveMenuKey = () => {
+  const menuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: route.query.key,
+  });
+  activeMenuKey.value = menuItem?.key;
+};
+
+watch(
+  [() => route.query.key, () => menuStore.menuList],
+  () => {
+    setActiveMenuKey();
+  },
+  { deep: true }
+);
+onMounted(() => {
+  setActiveMenuKey();
+});
+
+const onMenuSelect = (menuKey) => {
+  const menuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: menuKey,
+  });
+  emit('menu-select', menuItem);
+};
+
+const handleProjectCommand = (command) => {
+  const projectItem = projectStore.projectList.find((item) => item.key === command);
+  if (!projectItem || !projectItem.homePage) return;
+  const { origin } = window.location;
+  window.location.replace(`${origin}/view/dashboard${projectItem.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) {
+  border-bottom: 0;
+}
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+  <iframe :src="path" class="iframe"></iframe>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMenuStore } from '@elpisStore/menu';
+
+const route = useRoute();
+const menuStore = useMenuStore();
+
+const path = ref('');
+const setPath = () => {
+  const { key, sider_key } = route.query;
+
+  const menuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: sider_key ?? 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 {
+  border: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <el-card class="search-panel">
+    <schema-search-bar :schema="searchSchema" @loaded="onLoad" @search="onSearch" @reset="onReset" />
+  </el-card>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+import SchemaSearchBar from '@elpisWidgets/schema-search-bar/schema-search-bar';
+
+const { searchSchema } = inject('schemaViewData');
+
+const emit = defineEmits(['search']);
+
+const onLoad = (searchObj) => {
+  emit('search', searchObj);
+};
+
+const onSearch = (searchObj) => {
+  emit('search', searchObj);
+};
+
+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,118 @@
+<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="(btn, index) in tableConfig.headerButtons"
+        :key="index"
+        v-bind="btn"
+        @click="operationHandler({ btnConfig: btn })"
+      >
+        {{ btn.label }}
+      </el-button>
+    </el-row>
+    <!-- schema-table(组件widgets) -->
+    <schema-table
+      ref="SchemaTableRef"
+      :schema="tableSchema"
+      :api="api"
+      :buttons="tableConfig?.rowButtons ?? []"
+      :api-params="apiParams"
+      @operate="operationHandler"
+    />
+  </el-card>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+import $curl from '@elpisCommon/curl';
+import { ElMessageBox, ElNotification } from 'element-plus';
+import SchemaTable from '@elpisWidgets/schema-table/schema-table.vue';
+
+const emit = defineEmits(['operate']);
+
+const { api, tableSchema, tableConfig, apiParams } = inject('schemaViewData');
+
+const SchemaTableRef = ref(null);
+
+const EventHandlerMap = {
+  remove: removeData,
+};
+const operationHandler = ({ rowData, btnConfig }) => {
+  const { eventKey } = btnConfig;
+  if (EventHandlerMap[eventKey]) {
+    EventHandlerMap[eventKey]({ rowData, btnConfig });
+  } else {
+    emit('operate', { btnConfig, rowData });
+  }
+};
+
+function removeData({ rowData, btnConfig }) {
+  console.log('🚀 ~ removeData ~ rowData:', rowData);
+  const { eventOptions } = btnConfig;
+  const { params } = eventOptions;
+  const removeKey = Object.keys(params)[0];
+
+  if (!eventOptions?.params || !removeKey) return;
+
+  let removeValue = rowData[params[removeKey]] || '';
+  const removeValueList = params[removeKey].split('::');
+  if (removeValueList[0] === 'schema' && removeValueList[1]) {
+    removeValue = rowData[removeValueList[1]];
+  }
+
+  ElMessageBox.confirm(`确认删除${removeKey}为：${removeValue} 的数据?`, 'Warning', {
+    confirmButtonText: '确认',
+    cancleButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    SchemaTableRef.value.showLoading();
+    const res = await $curl({
+      url: api.value,
+      method: 'delete',
+      data: {
+        [removeKey]: removeValue,
+      },
+      errorMessage: '删除失败',
+    });
+    SchemaTableRef.value.hideLoading();
+
+    if (!res || !res.success || !res.data) return;
+
+    ElNotification({
+      title: '成功',
+      message: '删除成功',
+      type: 'success',
+    });
+
+    initTableData();
+  });
+}
+
+const initTableData = () => {
+  SchemaTableRef.value.initData();
+};
+const loadTableData = () => {
+  SchemaTableRef.value.loadTableData();
+};
+
+defineExpose({
+  loadTableData,
+});
+</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/components-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,85 @@
+<template>
+  <el-drawer v-model="isShow" direction="rtl" :destory-on-close="true" :size="550">
+    <template #header>
+      <h3>{{ title }}</h3>
+    </template>
+    <template #default>
+      <schema-form 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 SchemaForm from '@elpisWidgets/schema-form/schema-form.vue';
+import $curl from '@elpisCommon/curl.js';
+import { ElNotification } from 'element-plus';
+
+// 接收的参数
+const { api, components } = inject('schemaViewData');
+
+const emit = defineEmits(['command']);
+
+const name = ref('createForm');
+
+const schemaFormRef = ref(null);
+const isShow = ref(false);
+const title = ref('');
+const saveBtnText = ref('');
+const loading = ref(false);
+
+const show = (rowData) => {
+  const { config } = components.value[name.value];
+
+  title.value = config.title;
+  saveBtnText.value = config.saveBtnText;
+
+  isShow.value = true;
+  console.log(rowData);
+};
+
+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: '创建成功',
+    type: 'success',
+  });
+  close();
+  emit('command', {
+    event: 'loadTableData',
+  });
+};
+
+defineExpose({
+  name,
+  show,
+});
+</script>
+
+<style lang="less" scoped></style>