@xujingquan/elpis 1.0.0

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 {
+  ...BusinessComponentConfig,
+  ...ComponentConfig,
+};

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

@@ -0,0 +1,86 @@
+<template>
+  <el-drawer v-model="isShow" direction="rtl" :destroy-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 SchemaForm from '$elpisWidgets/schema-form/schema-form.vue';
+
+import { ref, inject } from 'vue';
+import { ElNotification } from 'element-plus';
+import { tableDataPort } from '$elpisCommon/api/business-api';
+
+const { api, components } = inject('schemaViewData');
+
+const emits = defineEmits(['command']);
+
+// name 提供给外面匹配
+const name = ref('createForm');
+
+const schemaFormRef = ref(null);
+const loading = ref(false);
+const isShow = ref(false);
+const title = ref('');
+const saveBtnText = ref('');
+const show = function () {
+  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;
+
+  try {
+    const res = await tableDataPort({
+      method: 'post',
+      url: api.value,
+      data: {
+        ...schemaFormRef.value.getValue(),
+      },
+    });
+
+    if (!res || !res.success) return;
+
+    ElNotification({
+      title: '创建成功',
+      message: '创建成功',
+      type: 'success',
+    });
+
+    close();
+    emits('command', {
+      event: 'loadTableData',
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+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,82 @@
+<template>
+  <el-drawer v-model="isShow" direction="rtl" :destroy-on-close="true" :size="550">
+    <template #header>
+      <h3>{{ title }}</h3>
+    </template>
+    <template #default>
+      <schema-form
+        ref="schemaFormRef"
+        v-loading="loading"
+        :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 SchemaForm from '$elpisWidgets/schema-form/schema-form.vue';
+
+import { ref, inject } from 'vue';
+import { tableDataPort } from '$elpisCommon/api/business-api';
+
+const { api, components } = inject('schemaViewData');
+
+const schemaFormRef = ref(null);
+const name = ref('detailPanel');
+const loading = ref(false);
+const isShow = ref(false);
+const title = ref('');
+const saveBtnText = ref('');
+const mainKey = ref('');
+const mainValue = ref(undefined);
+const dtoModel = ref({});
+
+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]; // 表单主键值
+
+  isShow.value = true;
+
+  ferchFormData();
+};
+
+const close = () => {
+  isShow.value = false;
+};
+
+const ferchFormData = async () => {
+  if (loading.value) return;
+
+  loading.value = true;
+  try {
+    const res = await tableDataPort({
+      method: 'get',
+      url: api.value,
+      params: {
+        [mainKey.value]: mainValue.value,
+      },
+    });
+
+    if (!res || !res.data || !res.success) return;
+    dtoModel.value = res.data;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const save = () => {
+  close();
+};
+
+defineExpose({
+  name,
+  show,
+});
+</script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,115 @@
+<template>
+  <el-drawer v-model="isShow" direction="rtl" :destroy-on-close="true" :size="550">
+    <template #header>
+      <h3>{{ title }}</h3>
+    </template>
+    <template #default>
+      <schema-form
+        ref="schemaFormRef"
+        v-loading="loading"
+        :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 SchemaForm from '$elpisWidgets/schema-form/schema-form.vue';
+
+import { ref, inject } from 'vue';
+import { ElNotification } from 'element-plus';
+import { tableDataPort } from '$elpisCommon/api/business-api';
+
+const { api, components } = inject('schemaViewData');
+
+const emits = defineEmits(['command']);
+const schemaFormRef = ref(null);
+const name = ref('editForm');
+const loading = ref(false);
+const isShow = ref(false);
+const title = ref('');
+const saveBtnText = ref('');
+const mainKey = ref('');
+const mainValue = ref(undefined);
+const dtoModel = ref({});
+
+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]; // 表单主键值
+
+  isShow.value = true;
+
+  ferchFormData();
+};
+
+const close = () => {
+  isShow.value = false;
+};
+
+const ferchFormData = async () => {
+  if (loading.value) return;
+
+  loading.value = true;
+  try {
+    const res = await tableDataPort({
+      method: 'get',
+      url: api.value,
+      params: {
+        [mainKey.value]: mainValue.value,
+      },
+    });
+
+    if (!res || !res.data || !res.success) return;
+    dtoModel.value = res.data;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const save = async () => {
+  if (loading.value) return;
+
+  if (!schemaFormRef.value.validate()) return;
+
+  loading.value = true;
+  try {
+    const res = await tableDataPort({
+      method: 'put',
+      url: api.value,
+      data: {
+        [mainKey.value]: mainValue.value,
+        ...schemaFormRef.value.getValue(),
+      },
+    });
+
+    if (!res || !res.success) return;
+
+    ElNotification({
+      title: '修改成功',
+      message: '修改成功',
+      type: 'success',
+    });
+
+    close(); // 关闭弹窗
+    emits('command', {
+      event: 'loadTableData',
+    }); // 发送事件，请求表格
+  } finally {
+    loading.value = false;
+  }
+};
+
+defineExpose({
+  name,
+  show,
+});
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,135 @@
+import { ref, watch, onMounted, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMenuStore } from '$elpisStore/menu';
+
+export const useSchema = function () {
+  const route = useRoute();
+  const menuStore = useMenuStore();
+
+  const api = ref('');
+  const tableSchema = ref({});
+  const tableConfig = ref(undefined);
+  const searchSchema = ref({});
+  const searchConfig = ref(undefined);
+  const components = ref({});
+
+  //  构造 schemaConfig 相关配置，输送给 schemaView 解析。
+  const buildData = function () {
+    const { key, sider_key: siderKey } = route.query;
+
+    const menuItem = menuStore.findMenuItem({
+      key: 'key',
+      value: siderKey ?? key,
+    });
+
+    if (menuItem && menuItem.schemaConfig) {
+      const { schemaConfig } = menuItem;
+      const sConfig = schemaConfig?.schema;
+      const configScheam = JSON.parse(JSON.stringify(sConfig));
+      api.value = schemaConfig.api ?? '';
+
+      tableSchema.value = {};
+      tableConfig.value = undefined;
+
+      searchSchema.value = {};
+      searchConfig.value = undefined;
+
+      components.value = {};
+
+      nextTick(() => {
+        // 构造 tableSchema 和 tableConfig
+        tableSchema.value = buildDtoSchema(configScheam, 'table');
+        tableConfig.value = sConfig?.tableConfig ?? {};
+
+        // 构造 searchSchema 和 searchConfig
+        const dtoSchearSchema = buildDtoSchema(configScheam, 'search');
+        // 给默认参数 defalut 填充上路由参数值
+        for (const key in dtoSchearSchema?.properties ?? {}) {
+          if (route.query[key] !== undefined) {
+            dtoSchearSchema.properties[key].option.default = route.query[key];
+          }
+        }
+        searchSchema.value = dtoSchearSchema;
+        searchConfig.value = sConfig?.searchConfig ?? {};
+
+        // 构造 components = { key: { schema: {}, config: {} } }
+        const { componentConfig } = sConfig;
+
+        if (componentConfig && Object.keys(componentConfig).length > 0) {
+          const dtoComponents = {};
+
+          for (const comName in componentConfig) {
+            dtoComponents[comName] = {
+              schema: buildDtoSchema(configScheam, comName),
+              config: componentConfig[comName],
+            };
+          }
+
+          components.value = dtoComponents;
+        }
+      });
+    }
+  };
+
+  // 通用构建方法
+  const buildDtoSchema = function (_schema, comName) {
+    if (!_schema?.properties) return {};
+
+    const dtoSchema = {
+      type: 'object',
+      properties: {},
+    };
+
+    // 提取有效 schema 字段信息
+    for (const key in _schema.properties) {
+      const props = _schema.properties[key];
+      // tableOption schearBarOption form Option
+      if (props[`${comName}Option`]) {
+        let dtoProps = {};
+        for (const pKey in props) {
+          // 提取 props 非 option 的部分，存放到 dtoProps 中
+          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;
+  };
+
+  // 用户切换菜单时，重新构建 schemaConfig 相关配置。
+  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,93 @@
+<template>
+  <el-row class="schema-view">
+    <search-panel
+      v-if="searchSchema?.properties && Object.keys(searchSchema.properties).length > 0"
+      @search="onSearch"
+    />
+    <table-panel ref="tablePanelRef" @operate="onTableOperate" />
+    <component
+      :is="ComponentConfig[key]?.component"
+      v-for="(item, key) in components"
+      :key="key"
+      ref="comListRef"
+      @command="onComponentCommand"
+    />
+  </el-row>
+</template>
+
+<script setup>
+import SearchPanel from './complex-view/search-panel/search-panel.vue';
+import TablePanel from './complex-view/table-panel/table-panel.vue';
+
+import { provide, ref } from 'vue';
+import { useSchema } from './hook/schema';
+import ComponentConfig from './components/component-config';
+
+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,
+};
+function 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);
+  // name & show 是组件内部 defineExpose 暴露出来的
+  if (!comRef || typeof comRef.show !== 'function') {
+    console.error(`找不: ${comName} 组件`);
+    return;
+  }
+
+  comRef.show(rowData);
+}
+
+// 响应组件事件
+function onComponentCommand(data) {
+  const { event } = data;
+  if (event === 'loadTableData') {
+    tablePanelRef.value.loadTableData();
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.schema-view {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <el-sub-menu :index="menuItem.key">
+    <template #title>
+      {{ menuItem.name }}
+    </template>
+    <div v-for="item in menuItem.subMenu" :key="item.key">
+      <!-- 存在 subMenu 递归调用自己-->
+      <sub-menu v-if="item.subMenu && item.subMenu.length > 0" :menu-item="item" />
+      <!-- 否则使用el-menu-item -->
+      <el-menu-item v-else :index="item.key">{{ item.name }}</el-menu-item>
+    </div>
+  </el-sub-menu>
+</template>
+
+<script setup>
+defineProps({
+  menuItem: Object,
+});
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,115 @@
+<template>
+  <sider-container>
+    <template #menu-content>
+      <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" />
+          <!-- module 的情况 -->
+          <el-menu-item v-else :index="item.key">{{ item.name }}</el-menu-item>
+        </template>
+      </el-menu>
+    </template>
+    <template #main-content>
+      <router-view />
+    </template>
+  </sider-container>
+</template>
+
+<script setup>
+import siderContainer from '$elpisPages/widgets/sider-container/sider-container.vue';
+import SubMenu from './complex-view/sub-menu/sub-menu.vue';
+
+import { ref, watch, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useMenuStore } from '$elpisStore/menu';
+
+const router = useRouter();
+const route = useRoute();
+const menuStore = useMenuStore();
+
+const menuList = ref([]);
+const setMenuList = function () {
+  const menuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: route.query.key,
+  });
+  if (menuItem && menuItem.siderConfig && menuItem.siderConfig.menu) {
+    menuList.value = menuItem.siderConfig.menu;
+  }
+};
+
+const activeKey = ref('');
+const setActiveKey = function () {
+  let siderMenuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: route.query.sider_key,
+  });
+
+  // 如果首次加载 sider-view
+  if (!siderMenuItem) {
+    const hMenuItem = menuStore.findMenuItem({
+      key: 'key',
+      value: route.query.key,
+    });
+
+    if (hMenuItem && hMenuItem.siderConfig && hMenuItem.siderConfig.menu) {
+      const siderMenuList = hMenuItem.siderConfig.menu;
+      siderMenuItem = menuStore.findFirstMenuItem(siderMenuList); // 找出左侧菜单中的第一个
+
+      if (siderMenuItem) {
+        handleMenuSelect(siderMenuItem.key);
+      }
+    }
+  }
+
+  activeKey.value = siderMenuItem?.key;
+};
+
+watch(
+  [() => route.query.key, () => menuStore.menuList],
+  () => {
+    setMenuList();
+    setActiveKey();
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  setMenuList();
+  setActiveKey();
+});
+
+const onMenuSelect = function (menuKey) {
+  handleMenuSelect(menuKey);
+};
+
+const handleMenuSelect = function (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,
+    },
+  });
+};
+</script>
+
+<style lang="less" scoped></style>