@slice_cy/mint 1.2.0

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

@@ -0,0 +1,36 @@
+<template>
+  <div
+    v-if="Object.keys(searchSchema?.properties || {}).length"
+    class="search-panel"
+  >
+    <schema-search-bar
+      :schema="searchSchema"
+      @search="onSearch"
+      @load="onLoad"
+      @reset="reset"
+    ></schema-search-bar>
+  </div>
+</template>
+
+<script setup>
+import { inject } from "vue";
+import SchemaSearchBar from "$mintWidgets/schema-search-bar/index.vue";
+
+const emits = defineEmits(["search"]);
+
+const { searchSchema } = inject("schemaViewData");
+
+const onSearch = (searchParams) => {
+  emits("search", searchParams);
+};
+
+const onLoad = (searchParams) => {
+  emits("search", searchParams);
+};
+
+const reset = () => {
+  emits("search", {});
+};
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,123 @@
+<template>
+  <div class="table-panel">
+    <div
+      v-if="(tableConfig.headerButtons || []).length"
+      class="operation-panel"
+    >
+      <a-flex
+        justify="flex-end"
+        :gap="12"
+        align="center"
+      >
+        <a-button
+          v-for="(btnConfig, index) in tableConfig.headerButtons"
+          :key="index"
+          v-bind="getButtonConfig(btnConfig.uiButtonConfig)"
+          @click="operationHandler({ buttonConfig: btnConfig })"
+        >
+          {{ btnConfig.label }}
+        </a-button>
+      </a-flex>
+    </div>
+    <div
+      v-if="Object.keys(tableSchema?.properties || {}).length"
+      class="schema-table-panel"
+    >
+      <schema-table
+        ref="schemaTableRef"
+        :api="api"
+        :search-params="searchParams"
+        :schema="tableSchema"
+        :buttons="tableConfig.rowButtons"
+        @operation="operationHandler"
+      ></schema-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject, ref } from "vue";
+import SchemaTable from "$mintWidgets/schema-table/index.vue";
+import { message, Modal } from "ant-design-vue";
+import { httpDelete } from "$mintService";
+
+const emit = defineEmits(["operation"]);
+
+const { api, tableSchema, tableConfig, searchParams } = inject("schemaViewData");
+const EventHandlerMap = {
+  remove: removeHandler,
+};
+
+const schemaTableRef = ref();
+
+/**
+ * 按钮交互分发操作函数
+ * @param {object} param
+ */
+const operationHandler = ({ buttonConfig, rowData }) => {
+  const { eventKey } = buttonConfig;
+  if (EventHandlerMap[eventKey]) {
+    EventHandlerMap[eventKey]({ buttonConfig, rowData });
+    return;
+  }
+  // 如果没有找到继续往上分发
+  emit("operation", { buttonConfig, rowData });
+};
+
+/**
+ * 获取按钮配置(兼容性考虑：DSL中没有配置改选项，默认给空对象)
+ * @param {object} buttonConfig
+ */
+const getButtonConfig = (buttonConfig) => {
+  return {
+    ...(buttonConfig || {}),
+  };
+};
+
+/**
+ * 解析schema中的参数
+ * @param {object} params 举例： { [paramsKey]: 固定值 | schema::字段名（字段名从rowData中匹配获取） }
+ * @param {object} rowData 列表行数据
+ * @returns {object} { [key]: value }
+ */
+function parseSchemaParams(params = {}, rowData = {}) {
+  return Object.entries(params).reduce((pre, [key, value]) => {
+    return {
+      ...pre,
+      [key]: value.replace(/schema::(.*)/, (_, key) => rowData[key]),
+    };
+  }, {});
+}
+
+/**
+ * 删除操作，映射 eventKey === remove 的 handler方法
+ * @param {object} param
+ */
+async function removeHandler({ buttonConfig, rowData }) {
+  const { eventOption } = buttonConfig;
+  const { params } = eventOption;
+  const requestParams = parseSchemaParams(params, rowData);
+  Modal.confirm({
+    title: "确定要删除该数据吗?",
+    okText: "确定",
+    cancelText: "取消",
+    onOk: async () => {
+      await httpDelete(api.value, requestParams);
+      message.success("删除成功");
+      schemaTableRef.value?.getTableList("search");
+    },
+  });
+}
+
+const getTableList = (...args) => {
+  schemaTableRef.value?.getTableList(...args);
+};
+
+defineExpose({ getTableList });
+</script>
+
+<style lang="less" scoped>
+.operation-panel {
+  margin-bottom: 24px;
+}
+</style>

package/app/pages/dashboard/complex-view/schema-view/components/component-config.js

@@ -0,0 +1,14 @@
+import businessComponentConfig from "$businessComponentConfig";
+
+export default {
+  createForm: {
+    loader: () => import(/* webpackChunkName: "schema-create-form" */ "./createForm/index.vue"),
+  },
+  editForm: {
+    loader: () => import(/* webpackChunkName: "schema-edit-form" */ "./editForm/index.vue"),
+  },
+  detailPanel: {
+    loader: () => import(/* webpackChunkName: "schema-detail-panel" */ "./detailPanel/index.vue"),
+  },
+  ...businessComponentConfig,
+};

package/app/pages/dashboard/complex-view/schema-view/components/createForm/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="create-form">
+    <a-drawer
+      v-model:open="visible"
+      :title="title"
+    >
+      <a-spin :spinning="loading">
+        <schema-form
+          ref="schemaFormRef"
+          :schema="schema"
+        ></schema-form>
+      </a-spin>
+
+      <template #footer>
+        <a-button
+          type="primary"
+          @click="save"
+        >
+          {{ saveBtnText }}
+        </a-button>
+      </template>
+    </a-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref, inject } from "vue";
+import SchemaForm from "$mintWidgets/schema-form/index.vue";
+import { httpPost } from "$mintService";
+import { message } from "ant-design-vue";
+const emit = defineEmits(["command"]);
+
+const { components, api } = inject("schemaViewData");
+
+const name = "createForm";
+
+const { schema, config } = components.value[name];
+
+const visible = ref(false);
+const schemaFormRef = ref();
+const title = ref("");
+const saveBtnText = ref("");
+
+const loading = ref(false);
+const show = ({ buttonConfig, rowData }) => {
+  title.value = config.title;
+  saveBtnText.value = config.saveBtnText;
+  visible.value = true;
+};
+
+const save = async () => {
+  try {
+    if (loading.value) return;
+    loading.value = true;
+    const valid = await schemaFormRef.value.validate();
+    if (!valid) return;
+    await httpPost(api.value, schemaFormRef.value.getValue());
+    message.success("保存成功");
+    visible.value = false;
+    emit("command", {
+      eventKey: config.eventKey,
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+defineExpose({
+  show,
+  name,
+});
+</script>

package/app/pages/dashboard/complex-view/schema-view/components/detailPanel/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <a-drawer
+    :title="title"
+    :visible="visible"
+    @close="close"
+  >
+    <a-spin :spinning="loading">
+      <schema-form
+        :schema="components[name].schema"
+        :model="dtoModel"
+      />
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script setup>
+import { ref, inject } from "vue";
+import { httpGet } from "$mintService";
+import SchemaForm from "$mintWidgets/schema-form/index.vue";
+const { api, components } = inject("schemaViewData");
+
+const name = "detailPanel";
+
+const visible = ref(false);
+const loading = ref(false);
+const title = ref("");
+const dtoModel = ref({});
+
+const show = async ({ buttonConfig, rowData }) => {
+  try {
+    const { config } = components.value[name];
+    loading.value = true;
+    title.value = config.title;
+    const mainKeyValue = rowData[config.mainKey];
+    const { data } = await httpGet(`${api.value}/${mainKeyValue}`, {});
+    dtoModel.value = { ...data };
+  } finally {
+    loading.value = false;
+  }
+  visible.value = true;
+};
+
+const close = () => {
+  visible.value = false;
+};
+defineExpose({
+  name,
+  show,
+});
+</script>
+
+<style scoped lang="less"></style>

package/app/pages/dashboard/complex-view/schema-view/components/editForm/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="edit-form">
+    <a-drawer
+      v-model:open="visible"
+      :title="title"
+    >
+      <a-spin :spinning="loading">
+        <schema-form
+          ref="schemaFormRef"
+          :schema="components[name].schema"
+          :model="dtoModel"
+        ></schema-form>
+      </a-spin>
+
+      <template #footer>
+        <a-button
+          type="primary"
+          @click="save"
+        >
+          {{ saveBtnText }}
+        </a-button>
+      </template>
+    </a-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref, inject } from "vue";
+import SchemaForm from "$mintWidgets/schema-form/index.vue";
+import { httpPut, httpGet } from "$mintService";
+import { message } from "ant-design-vue";
+const emit = defineEmits(["command"]);
+
+const { components, api } = inject("schemaViewData");
+
+const name = "editForm";
+
+const visible = ref(false);
+const schemaFormRef = ref();
+const title = ref("");
+const saveBtnText = ref("");
+const dtoModel = ref({});
+const loading = ref(false);
+const rowDataValue = ref({});
+const show = async ({ buttonConfig, rowData }) => {
+  const { config } = components.value[name];
+  title.value = config.title;
+  saveBtnText.value = config.saveBtnText;
+  visible.value = true;
+  rowData && (rowDataValue.value = rowData);
+  try {
+    loading.value = true;
+    // 获取数据
+    const mainKeyValue = rowData[config.mainKey];
+    const { data } = await httpGet(`${api.value}/${mainKeyValue}`, {});
+    dtoModel.value = { ...data };
+  } finally {
+    loading.value = false;
+  }
+};
+
+const save = async () => {
+  try {
+    if (loading.value) return;
+    const { config } = components.value[name];
+    loading.value = true;
+    const valid = await schemaFormRef.value.validate();
+    if (!valid) return;
+    await httpPut(`${api.value}/${1}`, {
+      ...schemaFormRef.value.getValue(),
+      [config.mainKey]: rowDataValue.value[config.mainKey],
+    });
+    message.success("保存成功");
+    visible.value = false;
+    emit("command", {
+      eventKey: config.eventKey,
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+defineExpose({
+  show,
+  name,
+});
+</script>

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

@@ -0,0 +1,113 @@
+import { ref, watch, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useMenuStore } from "$mintPage/store/menu";
+
+/**
+ * 解析DSL配置最开始的地方
+ * @returns
+ */
+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({});
+
+  const initData = () => {
+    const { sider_key, key } = route.query;
+    const menuItem = menuStore.findMenuItem({
+      key: "key",
+      value: sider_key || key,
+    });
+    if (!menuItem) return;
+    if (!menuItem.schemaConfig) return;
+    resetData();
+    const { schemaConfig: sConfig } = menuItem;
+    api.value = sConfig.api;
+    tableSchema.value = buildSchema(sConfig.schema, "table");
+    tableConfig.value = sConfig.tableConfig;
+
+    searchSchema.value = buildSchema(sConfig.schema, "search");
+    const routeQuery = route.query;
+    Object.entries(routeQuery).forEach(([key, value]) => {
+      if (searchSchema.value?.properties?.[key] && routeQuery[key] !== undefined) {
+        searchSchema.value.properties[key].option.default = value;
+      }
+    });
+    searchConfig.value = sConfig.searchConfig;
+
+    // 处理动态组件配置
+    components.value = Object.entries(sConfig.componentConfig || {}).reduce((pre, cur) => {
+      const [comName, comConfig] = cur;
+      // 构建动态数据
+      pre[comName] = {
+        schema: buildSchema(sConfig.schema, comName),
+        config: comConfig,
+      };
+      return pre;
+    }, {});
+  };
+
+  const resetData = () => {
+    api.value = "";
+    tableSchema.value = {};
+    tableConfig.value = {};
+    searchSchema.value = {};
+    searchConfig.value = {};
+  };
+
+  const buildSchema = (schema, type) => {
+    if (!schema?.properties) return {};
+    const newSchema = {
+      type: "object",
+      properties: {},
+    };
+
+    const { properties, required } = schema;
+    for (let [key, value] of Object.entries(properties)) {
+      if (value[`${type}Option`]) {
+        const newProps = {};
+        for (let valueKey in value) {
+          if (valueKey.indexOf("Option") <= -1) {
+            newProps[valueKey] = value[valueKey];
+          }
+        }
+        Object.assign(newProps, {
+          option: {
+            ...(value[`${type}Option`] || {}),
+            required: required?.includes(key) ? true : false,
+          },
+        });
+        newSchema.properties[key] = newProps;
+      }
+    }
+    return newSchema;
+  };
+
+  watch(
+    [() => route.query.sider_key, () => route.query.key, () => menuStore.menuList],
+    () => {
+      initData();
+    },
+    { deep: true },
+  );
+
+  onMounted(() => {
+    initData();
+  });
+
+  return {
+    api,
+    tableSchema,
+    tableConfig,
+    searchSchema,
+    searchConfig,
+    components,
+  };
+};
+
+export default useSchema;

package/app/pages/dashboard/complex-view/schema-view/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="schema-view">
+    <search-panel
+      ref="searchPanelRef"
+      @search="onSearch"
+    ></search-panel>
+    <table-panel
+      ref="tablePanelRef"
+      @operation="handleOperation"
+    ></table-panel>
+    <component
+      :is="loadedComponentMap[comName]"
+      v-for="comName in loadedComponentNames"
+      ref="componentRefList"
+      :key="comName"
+      @command="handleCommand"
+    ></component>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, provide, ref, shallowRef, watch } from "vue";
+import SearchPanel from "./complex-view/search-panel/index.vue";
+import TablePanel from "./complex-view/table-panel/index.vue";
+import useSchema from "./hook/use-schema";
+import { message } from "ant-design-vue";
+import componentConfig from "./components/component-config";
+const { api, tableConfig, tableSchema, searchSchema, searchConfig, components } = useSchema();
+const searchParams = ref({});
+const onSearch = (params) => {
+  searchParams.value = params;
+};
+
+const componentRefList = ref([]);
+const tablePanelRef = ref();
+const searchPanelRef = ref();
+const loadedComponentMap = shallowRef({});
+const loadedComponentNames = computed(() =>
+  Object.keys(components.value).filter((comName) => loadedComponentMap.value[comName]),
+);
+provide("schemaViewData", {
+  api,
+  tableConfig,
+  tableSchema,
+  searchSchema,
+  searchConfig,
+  searchParams,
+  components,
+});
+
+const EventKeyMap = {
+  showComponent: showComponentHandler,
+};
+
+watch(
+  () => components.value,
+  () => {
+    loadedComponentMap.value = {};
+    componentRefList.value = [];
+  },
+);
+
+async function loadComponent(comName) {
+  if (loadedComponentMap.value[comName]) return;
+  const config = componentConfig[comName];
+  if (!config) return;
+  const loadedModule = config.loader ? await config.loader() : null;
+  const component = config.component || loadedModule?.default;
+  if (!component) return;
+  loadedComponentMap.value = {
+    ...loadedComponentMap.value,
+    [comName]: component,
+  };
+  await nextTick();
+}
+
+async function showComponentHandler({ buttonConfig, rowData }) {
+  console.log("{ buttonConfig, rawData }", { buttonConfig, rowData });
+  const { eventOption } = buttonConfig;
+  const { comName } = eventOption;
+  if (!comName) {
+    message.error("请配置comName");
+    return;
+  }
+
+  await loadComponent(comName);
+  const component = componentRefList.value.find((i) => i.name === comName);
+  if (!component) {
+    message.error("无法找到组件");
+    return;
+  }
+  component?.show?.({ buttonConfig, rowData });
+}
+const handleOperation = ({ buttonConfig, rowData }) => {
+  const { eventKey } = buttonConfig;
+  if (EventKeyMap[eventKey]) {
+    EventKeyMap[eventKey]({ buttonConfig, rowData });
+    return;
+  }
+  message.error("暂不支持该操作");
+};
+
+const handleCommand = ({ eventKey }) => {
+  if (eventKey === "loadTableList") {
+    tablePanelRef.value.getTableList("search");
+  }
+};
+</script>
+
+<style scoped>
+.schema-view {
+  padding: 24px;
+}
+</style>