@james-zhang/elpis 1.0.0

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

@@ -0,0 +1,119 @@
+<template>
+  <el-drawer
+    v-model="isShow"
+    direction="rtl"
+    :destroy-on-close="true" 
+    :size="550"
+  >
+    <template #header>
+      <h3>{{ title }}</h3>
+    </template>
+    <template #default>
+      <SchemaForm
+        ref="schemaFormRef"
+        v-loading="loading"
+        :schema="schema"
+        :model="formModel"
+      />
+    </template>
+    <template #footer>
+      <el-button
+        type="primary"
+        @click="save"
+      >
+        {{ saveBtnText }}
+      </el-button>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { computed, inject, ref } 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 componentConfig = computed(() => components.value[name.value] ?? {});
+const schema = computed(() => componentConfig.value.schema ?? {});
+const config = computed(() => componentConfig.value.config ?? {});
+const title = computed(() => config.value.title ?? '');
+const saveBtnText = computed(() => config.value.saveBtnText ?? '');
+
+const schemaFormRef = ref(null);
+const loading = ref(false);
+// 控制抽屉显示隐藏
+const isShow = ref(false);
+// 新增表单数据对象
+const formModel = ref({});
+
+/**
+ * 父组件调用打开抽屉方法
+ * @param {Object} rowData 表格行数据：新增时为空，编辑时传入当前行详情
+ */
+const show = async () => {
+  let component = components.value[name.value];
+  let retryCount = 0;
+  while (!component && retryCount < 10) {
+    await new Promise(resolve => setTimeout(resolve, 100));
+    component = components.value[name.value];
+    retryCount++;
+  }
+  if (!component) {
+    return;
+  }
+  isShow.value = true;
+};
+
+const close = () => {
+  isShow.value = false;
+};
+
+const save = async () => {
+  if(loading.value){
+    return
+  }
+
+  if(!(await schemaFormRef.value.validate())) {
+    return;
+  }
+  loading.value = true;
+  const res=await $curl({
+    url: api.value,
+    method: 'POST',
+    data: {
+      ...schemaFormRef.value.getValue()
+    }
+  })
+  loading.value = false;
+  if(!res || !res.success){
+    return;
+  }
+  ElNotification.success({
+    title: '保存成功',
+    message: '保存成功',
+    type: 'success'
+  });
+  close();
+  emit('command', {
+    event:'loadTableData'
+  });
+};
+
+// 向外暴露方法、变量，供父组件通过ref调用
+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,131 @@
+<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"
+      >
+        <!-- 遍历schema配置里所有字段，自动渲染详情项 -->
+        <el-row
+          v-for="(item, key) in schema.properties"
+          :key="key"
+          class="row-item"
+        >
+          <!-- 字段标签名称 -->
+          <el-col
+            :span="6"
+            class="item-label"
+          >
+            {{ item.label }}：
+          </el-col>
+          <!-- 后端返回详情值 -->
+          <el-col
+            :span="18"
+            class="item-value"
+          >
+            {{ dtoModel[key] }}
+          </el-col>
+        </el-row>
+      </el-card>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { computed, inject, ref } from 'vue';
+import $curl from '$elpisCommon/curl';
+
+const {
+  api,
+  components
+}=inject('schemaViewData')
+
+const name=ref('detailPanel')
+const componentConfig = computed(() => components.value[name.value] ?? {});
+const schema = computed(() => componentConfig.value.schema ?? {});
+const config = computed(() => componentConfig.value.config ?? {});
+const title = computed(() => config.value.title ?? '');
+
+const isShow = ref(false);
+const loading=ref(false)
+const mainKey=ref('')
+const mainValue=ref()
+const dtoModel=ref({})
+
+// 打开抽屉方法，接收表格行数据
+const show = (rowData) => {
+  mainKey.value = config.value.mainKey ?? '';
+  if (mainKey.value && rowData) {
+    mainValue.value = rowData[mainKey.value];
+  }
+  dtoModel.value={}
+  isShow.value = true;
+
+  fetchFormData()
+};
+
+const close = () => {
+  isShow.value = false;
+};
+
+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.success || !res.data) {
+    return;
+  }
+  dtoModel.value = res.data;
+};
+
+// 向父组件暴露方法，父组件可通过ref调用show打开弹窗
+defineExpose({
+  show,
+  close
+})
+</script>
+
+<style lang="less" scoped>
+.detail-panel {
+  border: 1px solid #a6a6a6;
+  padding: 30px;
+}
+
+.row-item {
+  margin-bottom: 15px;
+  font-size: 16px;
+
+  .item-label {
+    color: #333333;
+    text-align: right;
+    padding-right: 10px;
+  }
+
+  .item-value {
+    color: #666666;
+    word-break: break-all;
+  }
+}
+</style>

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

@@ -0,0 +1,149 @@
+<template>
+  <el-drawer
+    v-model="isShow"
+    direction="rtl"
+    :destroy-on-close="true"
+    :size="550"
+  >
+    <template #header>
+      <h3>{{ title }}</h3>
+    </template>
+
+    <template #default>
+      <SchemaForm
+        ref="schemaFormRef"
+        v-loading="loading"
+        :schema="schema"
+        :model="dtoModel"
+      />
+    </template>
+
+    <template #footer>
+      <el-button
+        type="primary"
+        @click="save"
+      >
+        {{ saveBtnText }}
+      </el-button>
+    </template>
+  </el-drawer>
+</template>
+<script setup>
+import { computed, 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 schemaFormRef = ref(null);
+const name = ref('editForm');
+const componentConfig = computed(() => components.value[name.value] ?? {});
+const schema = computed(() => componentConfig.value.schema ?? {});
+const config = computed(() => componentConfig.value.config ?? {});
+const title = computed(() => config.value.title ?? '');
+const saveBtnText = computed(() => config.value.saveBtnText ?? '');
+const mainKey = ref('')
+const mainValue = ref('')
+const isShow = ref(false);
+const loading=ref(false)
+const dtoModel=ref({})
+
+const show = async (rowData) => {
+  let component = components.value[name.value];
+  let retryCount = 0;
+  while (!component && retryCount < 10) {
+    await new Promise(resolve => setTimeout(resolve, 100));
+    component = components.value[name.value];
+    retryCount++;
+  }
+  if (!component) {
+    return;
+  }
+  mainKey.value = config.value.mainKey ?? ''; // 表单主键
+  if (mainKey.value && rowData) {
+    mainValue.value = rowData[mainKey.value]; // 表单主键值
+  }
+
+  dtoModel.value = {};
+  isShow.value = true;
+  fetchFormData();
+};
+
+const close = () => {
+  isShow.value = false;
+};
+
+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.success || !res.data) {
+    return;
+  }
+  dtoModel.value = res.data;
+};
+
+const save = async () => {
+  if (loading.value) {
+    return;
+  }
+  // 表单校验，校验失败直接终止提交
+  if (!(await schemaFormRef.value.validate())) {
+    return;
+  }
+
+  loading.value = true;
+  // 发起编辑PUT请求
+  const res = await $curl({
+    method: 'put',
+    url: api.value,
+    data: {
+      [mainKey.value]: mainValue.value,
+      ...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>

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

@@ -0,0 +1,126 @@
+import { ref, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { useMenuStore } from '$elpisStore/menu.js'
+
+export function useSchema() {
+  const route = useRoute()
+  const menuStore = useMenuStore()
+  const { menuList } = storeToRefs(menuStore)
+
+  const tableSchema = ref({})
+  const tableConfig = ref()
+  const searchSchema = ref({})
+  const searchConfig = ref()
+  const components = ref({})
+
+  const api = ref('')
+
+  // 构造schemaConfig相关配置，输送给schemaView解释
+  const buildData = function () {
+    const { key, sider_key: siderKey } = route.query
+
+    const mItem = menuStore.findMenuItem({
+      key: 'key',
+      value: key ?? siderKey
+    })
+
+    if (mItem && mItem.schemaConfig) {
+      const { schemaConfig: sConfig } = mItem
+
+      const configSchema = JSON.parse(JSON.stringify(sConfig.schema))
+
+      api.value = sConfig.api ?? ''
+
+      // 构造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
+
+      // 构造component = {comName: {schema:{},config={}}}
+      const { componentConfig } = sConfig
+      if (componentConfig && Object.keys(componentConfig).length > 0) {
+        const dtoComponents = {}
+        for (const comName in componentConfig) {
+          dtoComponents[comName] = {
+            schema: buildDtoSchema(configSchema, comName),
+            config: componentConfig[comName]
+          }
+        }
+        components.value = dtoComponents
+      } else {
+        components.value = {}
+      }
+    }
+  }
+
+  // 通用构建 schema 方法（清除噪音）
+  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]
+      // 优先取当前组件自己的 option，没有则复用 createFormOption
+      let optionKey = `${comName}Option`
+      if (!props[optionKey] && props.createFormOption) {
+        optionKey = 'createFormOption'
+      }
+      if (props[optionKey]) {
+        let dtoProps = {}
+        // 提取props中非option的部分，存放到dtoprops
+        for (const pKey in props) {
+          if (pKey.indexOf('Option') < 0) {
+            dtoProps[pKey] = props[pKey]
+          }
+        }
+        // 处理 comName Option
+        dtoProps = Object.assign({}, dtoProps, { option: props[optionKey] })
+
+        // 处理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,
+    () => menuList.value
+  ], () => {
+    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,111 @@
+<template>
+  <div class="schema-view">
+    <SearchPanel v-if="searchSchema?.properties && Object.keys(searchSchema.properties).length>0" class="search-panel-wrapper" @search="onSearch" @reset="onReset" @load="onLoad" />
+    <TablePanel ref="tablePanelRef" @operate="onTableOperate" class="table-panel-wrapper" />
+    <template v-for="(item,key) in components">
+      <component 
+        :key="key"
+        v-if="ComponentConfig[key] && ComponentConfig[key].component"
+        :is="ComponentConfig[key].component"
+        :ref="(el) => setComRef(el, key)"
+        @command="onComponentCommand"
+      ></component>
+    </template>
+  </div>
+</template>
+<script setup>
+import {provide,ref} from 'vue'
+import SearchPanel from './complex-view/search-pannel/search-pannel.vue'
+import TablePanel from './complex-view/table-pannel/table-pannel.vue'
+import ComponentConfig from './components/component-config.js'
+import {useSchema} from './hook/schema'
+
+const {api,tableSchema,tableConfig,searchSchema,searchConfig,components}=useSchema()
+
+const apiParams=ref({})
+provide('schemaViewData',{
+  api,
+  apiParams,
+  tableSchema,
+  tableConfig,
+  SearchSchema:searchSchema,
+  SearchConfig:searchConfig,
+  components 
+})
+
+const tablePanelRef=ref(null)
+
+const comRefMap=ref({})
+const setComRef=(el, key)=>{
+  if(el){
+    comRefMap.value[key]=el
+  }
+}
+
+
+const onSearch=(searchValObj)=>{
+  apiParams.value=searchValObj
+}
+
+//table事件映射
+const EventHandlerMap={
+  showComponent:showComponent,
+}
+
+const onTableOperate=({btnConfig,rowData})=>{
+  const {eventKey}=btnConfig
+   if(EventHandlerMap[eventKey]){
+    EventHandlerMap[eventKey]({btnConfig,rowData})
+  }
+}
+//table事件处理
+async function showComponent({btnConfig,rowData}){
+  const {comName}=btnConfig.eventOption
+  if(!comName){
+    return
+  }
+  // 等待组件被渲染
+  let comRef=comRefMap.value[comName]
+  let retryCount=0
+  while(!comRef && retryCount<10){
+    await new Promise(resolve=>setTimeout(resolve,100))
+    comRef=comRefMap.value[comName]
+    retryCount++
+  }
+  if(!comRef || typeof comRef.show!=='function'){
+    return
+  }
+  comRef.show(rowData)
+}
+
+//响应组件事件
+const onComponentCommand = (data)=>{
+  const {event}=data
+  if(event==='loadTableData'){
+    tablePanelRef.value.loadTableData()
+  }
+}
+
+
+
+</script>
+
+<style lang="less" scoped>
+.schema-view{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+
+  .search-panel-wrapper {
+    flex-shrink: 0;
+  }
+
+  .table-panel-wrapper {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+}
+</style>

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

@@ -0,0 +1,28 @@
+<template>
+  <!-- 父级折叠子菜单 -->
+  <el-sub-menu :index="menuItem.key">
+    <template #title>
+      {{ menuItem.name }}
+    </template>
+
+    <!-- 遍历当前菜单的子项 -->
+    <template v-for="item in menuItem.subMenu" :key="item.key">
+      <!-- 递归调用自身：存在下级子菜单则继续嵌套 -->
+      <sub-menu
+        v-if="item.subMenu && item.subMenu.length > 0"
+        :menu-item="item"
+      />
+      <!-- 无子菜单则渲染普通菜单项 -->
+      <el-menu-item v-else :index="item.key">
+        {{ item.name }}
+      </el-menu-item>
+    </template>
+  </el-sub-menu>
+</template>
+
+<script setup>
+// 接收父组件传入的单条菜单对象
+const { menuItem } = defineProps(['menuItem']);
+</script>
+
+<style lang="less" scoped></style>