@isxiaoyuan/elpis 1.0.0

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

@@ -0,0 +1,98 @@
+<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>
+    <template #footer> </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { ref, inject } from "vue";
+import $curl from "$elpisCommon/curl.js";
+
+const name = ref("detailPanel");
+const { api, components } = inject("schemaViewData");
+const isShow = ref(false);
+const title = ref("");
+const mainKey = ref("");
+const mainValue = ref("");
+const dtoModel = ref({});
+const loading = ref(false);
+
+const show = (rowData) => {
+  const { config } = components.value[name.value];
+  title.value = config.title;
+  mainKey.value = config.mainKey;
+  mainValue.value = rowData[mainKey.value];
+  dtoModel.value = {};
+
+  isShow.value = true;
+
+  fetchFormData();
+};
+
+const fetchFormData = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  try {
+    const res = await $curl({
+      url: api.value,
+      method: "get",
+      query: {
+        [mainKey.value]: mainValue.value,
+      },
+    });
+    if (res && res.success) {
+      dtoModel.value = res.data;
+    }
+    loading.value = false;
+  } catch (error) {
+    loading.value = false;
+  }
+};
+
+defineExpose({
+  name,
+  show,
+});
+</script>
+
+<style scoped lang="less">
+.detail-panel {
+  border: 1px solid #a6a6a6;
+  padding: 30px;
+  .row-item {
+    height: 40px;
+    line-height: 40px;
+    font-size: 20px;
+    .item-label {
+      margin-right: 20px;
+      width: 120px;
+      color: #fff;
+    }
+    .item-value {
+      color: #d2dae4;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,123 @@
+<template>
+  <el-drawer
+    v-model="isShow"
+    direction="rtl"
+    :destroy-on-close="true"
+    :size="550"
+  >
+    <template #header>
+      <h3>{{ title }}</h3>
+    </template>
+    <template #default>
+      <schema-form
+        v-loading="loading"
+        ref="schemaFormRef"
+        :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 isShow = ref(false);
+const loading = ref(false);
+const title = ref("");
+const saveBtnText = ref("");
+const mainKey = ref("");
+const mainValue = ref();
+const dtoModel = ref({});
+const schemaFormRef = ref(null);
+
+const show = (rowData) => {
+  const { config } = components.value[name.value];
+
+  title.value = config.title;
+  saveBtnText.value = config.saveBtnText;
+  mainKey.value = config.mainKey; // 表单主键
+  mainValue.value = rowData[config.mainKey]; // 主键值
+  dtoModel.value = {};
+
+  isShow.value = true;
+
+  fetchFormData();
+};
+
+const close = () => {
+  isShow.value = false;
+};
+
+const fetchFormData = async () => {
+  if (loading.value) {
+    return;
+  }
+  loading.value = true;
+  try {
+    const res = await $curl({
+      url: api.value,
+      method: "get",
+      query: {
+        [mainKey.value]: mainValue.value,
+      },
+    });
+    dtoModel.value = res.data;
+    loading.value = false;
+  } catch (error) {
+    loading.value = false;
+  }
+};
+
+const save = async () => {
+  if (loading.value) {
+    return;
+  }
+  if (!schemaFormRef.value.validate()) {
+    return;
+  }
+  loading.value = true;
+  try {
+    const res = await $curl({
+      url: api.value,
+      method: "put",
+      data: {
+        [mainKey.value]: mainValue.value,
+        ...schemaFormRef.value.getValue(),
+      },
+    });
+    dtoModel.value = res.data;
+    ElNotification({
+      title: "修改成功",
+      message: "修改成功",
+      type: "success",
+    });
+    close();
+    loading.value = false;
+    emit("command", {
+      event: "loadTableData",
+    });
+  } catch (error) {
+    loading.value = false;
+  }
+};
+
+defineExpose({
+  name,
+  show,
+});
+</script>
+
+<style scoped lang="less"></style>

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

@@ -0,0 +1,129 @@
+import { ref, watch, onMounted, nextTick } from "vue";
+import { useRoute } from "vue-router";
+import { useMenuStore } from "$elpisStore/menu.js";
+
+export const useSchema = () => {
+  const route = useRoute();
+  const menuStore = useMenuStore();
+
+  const api = ref("");
+  const tableSchema = ref({});
+  const tableConfig = ref();
+  const searchSchema = ref({});
+  const searchConfig = ref();
+  const components = ref({});
+
+  // 构造 schemaConfig 相关配置 输送给 schemaView 解析
+  const buildData = async () => {
+    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 = {};
+
+      await nextTick();
+      //处理构造 tableSchema 和 tableConfig
+      tableSchema.value = buildDtoSchema(configSchema, "table");
+      tableConfig.value = sConfig.tableConfig;
+      //处理构造 searchSchema 和 searchConfig
+      const dtoSearchSchema = buildDtoSchema(configSchema, "search");
+      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 dtoComponent = {};
+        for (const comName in componentConfig) {
+          dtoComponent[comName] = {
+            schema: buildDtoSchema(configSchema, comName),
+            config: componentConfig[comName],
+          };
+        }
+
+        components.value = dtoComponent;
+      }
+    }
+  };
+
+  // 通用构建 schema
+  const buildDtoSchema = (_schema, comName) => {
+    if (!_schema?.properties) return {};
+
+    const dtoSchema = {
+      type: "object",
+      properties: {},
+    };
+
+    // 提取有效 shema 字段信息
+    for (const key in _schema.properties) {
+      const props = _schema.properties[key];
+      //xxxOption
+      if (props[`${comName}Option`]) {
+        let dtoProps = {};
+        // 提取props中非Option字段
+        for (const pkey in props) {
+          if (pkey.indexOf("Option") < 0) {
+            dtoProps[pkey] = props[pkey];
+          }
+        }
+        // 处理comname option
+        dtoProps = Object.assign({}, dtoProps, {
+          option: props[`${comName}Option`],
+        });
+
+        // 处理 required 字段
+        const { required } = _schema;
+        if (required && required.find((pk) => pk === key)) {
+          dtoProps.option.required = true;
+        }
+
+        dtoSchema.properties[key] = dtoProps;
+      }
+    }
+    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,98 @@
+<template>
+  <el-row class="schema-view">
+    <search-panel
+      v-if="
+        searchSchema?.properties &&
+        Object.keys(searchSchema.properties).length > 0
+      "
+      @search="onSearch"
+    >
+    </search-panel>
+    <table-panel ref="tablePanelRef" @operate="onTableOperate"></table-panel>
+    <component
+      v-for="(item, key) in components"
+      :key="key"
+      :is="ComponentConfig[key]?.component"
+      ref="comListRef"
+      @command="onComponentCommand"
+    />
+  </el-row>
+</template>
+
+<script setup>
+import { ref, provide } from "vue";
+import SearchPanel from "./complex-view/search-panel/search-panel.vue";
+import TablePanel from "./complex-view/table-panel/table-panel.vue";
+import { useSchema } from "./hook/schema.js";
+import ComponentConfig from "./components/component-config.js";
+const {
+  api,
+  tableSchema,
+  tableConfig,
+  searchSchema,
+  searchConfig,
+  components,
+} = useSchema();
+
+const apiParams = ref({});
+// 感觉
+provide("schemaViewData", {
+  api,
+  apiParams,
+  tableSchema,
+  tableConfig,
+  searchSchema,
+  searchConfig,
+  components,
+});
+
+const tablePanelRef = ref(null);
+const comListRef = ref([]);
+
+const onSearch = (searchValObj) => {
+  apiParams.value = searchValObj;
+};
+
+// table 事件映射
+const EventHandleMap = {
+  showComponent: showComponent,
+};
+
+const onTableOperate = ({ btnConfig, rowData }) => {
+  const { eventKey } = btnConfig;
+  if (EventHandleMap[eventKey]) {
+    EventHandleMap[eventKey]({ btnConfig, rowData });
+  }
+};
+
+// showComponent 展示动态组件
+function showComponent({ btnConfig, rowData }) {
+  const { comName } = btnConfig.eventOption;
+  if (!comName) {
+    console.error("无组件配置");
+    return;
+  }
+  const comRef = comListRef.value.find((item) => item.name === comName);
+  if (!comRef || typeof comRef.show !== "function") {
+    console.error(`找不到组件${comName}`);
+    return;
+  }
+  comRef.show(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;
+  height: 100%;
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,127 @@
+<template>
+  <sider-container>
+    <template #menu-container>
+      <el-menu
+        :default-active="activeKey"
+        :ellipsis="false"
+        @select="onMenuSelect"
+      >
+        <template v-for="item in menuList">
+          <!-- group -->
+          <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>
+          <!-- module -->
+        </template>
+      </el-menu>
+    </template>
+    <template #main-container>
+      <router-view />
+    </template>
+  </sider-container>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useMenuStore } from "$elpisStore/menu.js";
+import SiderContainer from "$elpisWidgets/sider-container/sider-container.vue";
+import SubMenu from "../header-view/complex-view/sub-menu/sub-menu.vue";
+
+const route = useRoute();
+const router = useRouter();
+const menuStore = useMenuStore();
+
+const menuList = ref([]);
+
+const activeKey = ref("");
+
+const setActiveKey = () => {
+  let siderMenuItem = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.sider_key,
+  });
+  // 默认选中第一个
+  if (!siderMenuItem) {
+    const headerMenuItem = menuStore.findMenuItem({
+      key: "key",
+      value: route.query.key,
+    });
+    const siderMenuList = headerMenuItem?.siderConfig?.menu || [];
+    if (siderMenuList && siderMenuList.length > 0) {
+      //找出左侧菜单第一项
+      siderMenuItem = menuStore.findFirstMemuItem(siderMenuList);
+      if (siderMenuItem) {
+        // TODE: 处理选中菜单逻辑
+        handleMenuSelect(siderMenuItem.key);
+      }
+    }
+  }
+  activeKey.value = siderMenuItem?.key || "";
+};
+
+const setMenuList = () => {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.key,
+  });
+  menuList.value = menuItem?.siderConfig?.menu || [];
+  // if (menuItem && menuItem.siderConfig && menuItem.siderConfig.menu) {
+  //   menuList.value = menuItem.siderConfig || [];
+  // }
+};
+watch(
+  () => route.query.key,
+  () => {
+    setMenuList();
+    setActiveKey();
+  },
+);
+watch(
+  () => menuStore.menuList,
+  () => {
+    setMenuList();
+    setActiveKey();
+  },
+  { deep: true },
+);
+
+const onMenuSelect = (menuKey) => {
+  handleMenuSelect(menuKey);
+};
+
+const handleMenuSelect = (menuKey) => {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: menuKey,
+  });
+  const { moduleType, key, customConfig } = menuItem;
+
+  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,
+    },
+  });
+};
+
+onMounted(() => {
+  setMenuList();
+  setActiveKey();
+});
+</script>
+
+<style scoped lang="scss"></style>

package/app/pages/dashboard/dashboard.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-config-provider :locale="zhCn">
+    <header-view :projName="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 { useRoute, useRouter } from "vue-router";
+import $curl from "$elpisCommon/curl.js";
+import { useProjectStore } from "$elpisStore/project.js";
+import { useMenuStore } from "$elpisStore/menu.js";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import HeaderView from "./complex-view/header-view/header-view.vue";
+
+const router = useRouter();
+const route = useRoute();
+const projectStore = useProjectStore();
+const menuStore = useMenuStore();
+
+const projName = ref("");
+
+// 请求 /project/list 接口  存store里面
+const getProjectList = async () => {
+  try {
+    const res = await $curl({
+      url: "/api/project/list",
+      method: "get",
+      query: {
+        proj_key: route.query.proj_key,
+      },
+      //   errorMessage: "获取项目列表失败",
+    });
+    projectStore.setProjectList(res.data || []);
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+// 请求 /api/project 接口
+const getProjectConfig = async () => {
+  try {
+    const res = await $curl({
+      url: "/api/project",
+      method: "get",
+      query: {
+        proj_key: route.query.proj_key,
+      },
+    });
+    projName.value = res.data?.name || "";
+    menuStore.setMenuList(res.data?.menu || []);
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+// 点击菜单回调
+const onMenuSelect = (menuItem) => {
+  const { customConfig, key, moduleType } = menuItem;
+  // 当前页不处理
+  if (key === route.query.key) {
+    return;
+  }
+
+  const pathMap = {
+    sider: "/sider",
+    iframe: "/iframe",
+    schema: "/schema",
+    custom: customConfig?.path || "/",
+  };
+  const path = pathMap[moduleType] || "/";
+  router.push({
+    path: `/view/dashboard${path}`,
+    query: {
+      key,
+      proj_key: route.query.proj_key,
+    },
+  });
+};
+
+onMounted(async () => {
+  await getProjectList();
+  await getProjectConfig();
+});
+</script>
+
+<style lang="less" scoped>
+:deep(.el-main) {
+  height: 100%;
+  --el-main-padding: 0 20px;
+}
+</style>