@pixel-shell/elpis 1.0.0

package/app/pages/common/curl.js

@@ -0,0 +1,88 @@
+const md5 = require("md5");
+const axios = require("axios");
+import { ElMessage } from "element-plus";
+
+/**
+ * 前端封装的 curl 方法
+ * @param {options} 请求参数
+ */
+const curl = ({
+  url, // 请求地址
+  method = "post", // 请求方法
+  headers = {}, // 请求头
+  query = {}, // url query 参数
+  data = {}, // post body 参数
+  responseType = "json", // 响应类型
+  timeout = 10000, // 请求超时时间
+  errorMessage = "请求失败", // 错误信息
+}) => {
+  // 处理签名
+  const signKey = "hgy3ghj5gyu03ghjk2ghje3kgu4ghj";
+  const st = Date.now(); // 当前时间戳
+  const signature = md5(`${signKey}_${st}`);
+
+  const dtoHeaders = {
+    ...headers,
+    s_t: st,
+    s_sign: signature,
+  };
+  if (url.indexOf("/api/proj/") > -1 && window.projKey) {
+    dtoHeaders.proj_key = window.projKey;
+  }
+  // 构造请求参数（把参数转化为 axios 请求参数）
+  const ajaxSetting = {
+    url,
+    method,
+    params: query,
+    data,
+    responseType,
+    timeout,
+    headers: dtoHeaders,
+  };
+
+  return axios
+    .request(ajaxSetting)
+    .then((response) => {
+      const resData = response.data || {};
+
+      // 后端API返回格式
+      const { success, message, code, data } = resData;
+
+      // 处理失败返回
+      if (!success) {
+        if (code === 442) {
+          ElMessage.error("请求参数异常");
+        } else if (code === 445) {
+          ElMessage.error("请求不合法");
+        } else if (code === 446) {
+          console.log("缺少项目必要参数");
+          ElMessage.error("缺少项目必要参数");
+        } else if (code === 50000) {
+          ElMessage.error(message);
+        } else {
+          ElMessage.error(errorMessage);
+        }
+        return Promise.resolve({ success, message, code });
+      }
+      // 处理成功返回
+      return Promise.resolve({
+        success,
+        data,
+        message,
+        metadata: resData.metadata,
+      });
+    })
+    .catch((error) => {
+      const { message } = error;
+
+      if (message.match(/timeout/)) {
+        return Promise.resolve({
+          message: "Response Timeout!!",
+          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,17 @@
+<template>
+  <el-sub-menu :index="menuItem.key">
+    <template #title>{{ menuItem.name }} </template>
+    <div v-for="item in menuItem.subMenu" :key="item.key">
+      <SubMenu v-if="item.subMenu && item.subMenu.length > 0" :menuItem="item"></SubMenu>
+      <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 lang="less" scoped></style>

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

@@ -0,0 +1,129 @@
+<template>
+  <header-container :title="projName">
+    <template #menu-content>
+      <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"
+            :key="'sub-' + item.key"
+          ></sub-menu>
+          <el-menu-item v-else :key="'menu-' + item.key" :index="item.key">{{
+            item.name
+          }}</el-menu-item>
+        </template>
+      </el-menu>
+    </template>
+    <template #setting-content>
+      <!-- 根据projectStore.projectList渲染setting -->
+      <el-dropdown @command="handleProjectCommand">
+        <span class="projcet-list">
+          {{ projName }}
+          <el-icon
+            v-if="projectStore.projList.length > 1"
+            class="el-icon--right"
+          >
+            <ArrowDown />
+          </el-icon>
+        </span>
+        <template v-if="projectStore.projList.length > 1" #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              v-for="item in projectStore.projList"
+              :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"></slot>
+    </template>
+  </header-container>
+</template>
+<script setup>
+import { ref, onMounted, watch } 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 { useProjectStore } from "$elpisStore/project.js";
+import { useMenuStore } from "$elpisStore/menu.js";
+
+const route = useRoute();
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+defineProps({
+  projName: {
+    type: String,
+    default: "项目列表",
+  },
+});
+const emit = defineEmits(["menu-select"]);
+onMounted(() => {
+  setActiveKey();
+});
+const activeKey = ref("");
+const setActiveKey = () => {
+  const menItem = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.key,
+  });
+  activeKey.value = menItem?.key;
+};
+const onMenuSelect = (menuKey) => {
+  const menItem = menuStore.findMenuItem({
+    key: "key",
+    value: menuKey,
+  });
+  emit("menu-select", menItem);
+};
+const handleProjectCommand = (command) => {
+  const projItem = projectStore.projList.find((item) => item.key === command);
+  if (!projItem || !projItem.homePage) {
+    return;
+  }
+  const { host } = window.location;
+  window.location.replace(`http://${host}/view/dashboard${projItem.homePage}`);
+};
+watch(
+  () => route.query.key,
+  () => {
+    setActiveKey();
+  },
+);
+watch(
+  () => menuStore.menuList,
+  () => {
+    setActiveKey();
+  },
+  { deep: true },
+);
+</script>
+
+<style lang="less" scoped>
+.projcet-list {
+  margin-right: 20px;
+  cursor: pointer;
+  color: var(--el-color-primary);
+  display: flex;
+  align-items: center;
+  outline: none;
+}
+:deep(.el-menu) {
+  background-color: transparent;
+}
+:deep(.el-menu--horizontal.el-menu) {
+  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.js";
+const path = ref("");
+const route = useRoute();
+const menuStore = useMenuStore();
+onMounted(() => {
+  setPath();
+});
+const setPath = () => {
+  const { key, sider_key: siderKey } = route.query;
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: siderKey ?? key,
+  })
+  path.value = menuItem?.iframeConfig?.path ?? '';
+  console.log(path.value);
+};
+watch(
+  [
+    () => route.query.key,
+    () => route.query.sider_key,
+    () => menuStore.menuList,
+  ],
+  () => {
+    setPath();
+  },
+  { deep: true },
+);
+</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,37 @@
+<template>
+  <el-card class="search-panel">
+    <schema-search-bar
+      :schema="searchSchema"
+      @load="onLoad"
+      @search="onSearch"
+      @reset="onReset"
+    ></schema-search-bar>
+  </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;
+}
+: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,114 @@
+<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="operationHandle({ btnConfig: item })"
+      >{{ item.label }}</el-button>
+    </el-row>
+    <!-- schema-table (组件 widget) -->
+    <schema-table
+      ref="schemaTableRef"
+      :schema="tableSchema"
+      :api="api"
+      :apiParams="apiParams"
+      :buttons="tableConfig?.rowButtons ?? []"
+      @operate="operationHandle"
+    ></schema-table>
+  </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 EventHandleMap = {
+  remove: removeData,
+};
+const operationHandle = ({ btnConfig, rowData }) => {
+  const { eventKey } = btnConfig;
+  if (EventHandleMap[eventKey]) {
+    EventHandleMap[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,
+      },
+      errorMessage: "删除失败",
+    });
+    schemaTableRef.value.hideLoading();
+    if (!res || !res.data || !res.success) {
+      return;
+    }
+    ElNotification({
+      message: "删除成功",
+      type: "success",
+    });
+    await initTableData();
+  });
+}
+
+const initTableData = async () => {
+  await schemaTableRef.value.initData();
+};
+
+const loadTableData = async () => {
+  await 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/component-config.js

@@ -0,0 +1,22 @@
+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 "$businessSchemaViewConfig";
+
+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"
+    :destroy-on-close="true"
+    :size="550"
+  >
+    <template #header>
+      <h3 class="title">{{ title }}</h3>
+    </template>
+    <template #default>
+      <schema-form
+        ref="schemaFormRef"
+        v-loading="loading"
+        :schema="components[name]?.schema"
+      ></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 name = ref("createForm");
+
+const loading = ref(false);
+const schemaFormRef = ref(null);
+const isShow = ref(false);
+const title = ref("");
+const saveBtnText = ref("");
+const show = (rowData) => {
+  const { config } = components.value[name.value];
+  title.value = config?.title;
+  saveBtnText.value = config?.saveBtnText;
+  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.success || !res) 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/components/detail-panel/detail-panel.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-drawer
+    v-model="isShow"
+    direction="rtl"
+    :destroy-on-close="true"
+    :size="550"
+  >
+    <template #header>
+      <h3>{{ title }}</h3>
+    </template>
+    <template #default>
+      <el-card v-loading="loading" shadow="always" class="detail-panel">
+        <el-row
+          v-for="(item, key) in components[name]?.schema?.properties"
+          :key="key"
+          type="flex"
+          align="middle"
+          class="row-item"
+        >
+          <el-row class="item-label">{{ item.label }}：</el-row>
+          <el-row class="item-value">{{ dtoModel[key] }}</el-row>
+        </el-row>
+      </el-card>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { ref, inject } from "vue";
+import $curl from "$elpisCommon/curl";
+
+const { api, components } = inject("schemaViewData");
+
+const name = ref("detailPanel");
+const loading = ref(false);
+const isShow = ref(false);
+const title = ref("");
+const mainKey = ref("");
+const mainValue = ref("");
+const dtoModel = ref({});
+
+const show = (rowData) => {
+  const { config } = components.value[name.value];
+
+  title.value = config.title;
+  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.data || !res.success) return;
+  dtoModel.value = res.data;
+};
+
+defineExpose({
+  name,
+  show,
+});
+</script>
+
+<style lang="less" scoped>
+.detail-panel {
+  border: 1px solid #a6a6a6;
+  padding: 30px;
+  .row-item {
+    height: 40px;
+    line-height: 40px;
+    font-size: 20px;
+    .item-label {
+      width: 120px;
+      margin-right: 20px;
+      color: #fff;
+    }
+    .item-value {
+      color: #d2dae4;
+    }
+  }
+}
+</style>