@dmqweb/elpis 1.0.0

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

@@ -0,0 +1,118 @@
+<template>
+  <el-drawer
+    v-model="isShow"
+    directory="rtl"
+    size="550"
+    destroy-on-close
+  >
+    <template #header>
+      <h2>
+        {{ title }}
+      </h2>
+    </template>
+    <template #default>
+      <schema-form
+        ref="schemaFormRef"
+        v-loading="loading"
+        :schema="currentSchema"
+      />
+    </template>
+    <template #footer>
+      <el-button
+        type="primary"
+        @click="save"
+      >
+        {{ saveBtnText }}
+      </el-button>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { inject, ref, computed } from 'vue';
+import schemaForm from '$elpisWidgets/schema-form/schema-form.vue';
+import $curl from '$elpisCommon/curl.js'
+import { ElNotification } from 'element-plus';
+const {
+  api,
+  components
+} = inject('schemaViewData')
+const emit = defineEmits(['command'])
+const title = ref('')
+const saveBtnText = ref('')
+// 用来外部识别组件名称
+const name = ref('createForm')
+
+// 使用 computed 确保响应式更新
+const currentSchema = computed(() => {
+  return components.value?.[name.value]?.schema || {}
+})
+
+const schemaFormRef = ref(null)
+const loading = ref(false)
+
+// 抽屉窗口是否显示
+const isShow = ref(false)
+// 显示表单
+const show = () => {
+  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()) {
+    console.log('表单校验失败')
+    return
+  }
+
+  loading.value = true
+  const res = await $curl({
+    method: 'post',
+    url: api.value,
+    data: {
+      ...schemaFormRef.value.getValue()
+    }
+  })
+  loading.value = false
+  if(!res || !res.success) {
+    ElNotification({
+      title: '保存失败',
+      message: '保存失败',
+      type: 'error'
+    })
+    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,177 @@
+<template>
+  <el-drawer
+    v-model="isShow"
+    directory="rtl"
+    size="550"
+    destroy-on-close
+  >
+    <!--  -->
+    <template #header>
+      <h2>
+        {{ title }}
+      </h2>
+    </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 }}:
+            <br>  
+          </el-row>
+          <el-row class="item-value">
+            {{ dotModel[key] }}
+          </el-row>
+        </el-row>
+      </el-card>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+import $curl from '$elpisCommon/curl.js'
+import { ElNotification } from 'element-plus';
+
+const isShow = ref(false)
+const loading = ref(false)
+const name = ref('detailPanel')
+const title = ref('')
+const mainKey = ref('')
+const mainValue = ref('')
+const dotModel = ref({})
+
+const {
+  api,
+  components
+} = inject('schemaViewData')
+
+
+// 显示表单
+const show = (rowData) => {
+  const { config } = components.value[name.value]
+
+  title.value = config.title
+  mainKey.value = config.mainKey // 表单的主键
+  mainValue.value = rowData[mainKey.value] // 主键的值
+  dotModel.value = {}
+
+  isShow.value = true
+
+  fetchFormData()
+}
+
+
+// 获取表单数据
+const fetchFormData = async () => {
+   // 防止重复提交
+   if(loading.value) return
+
+  loading.value = true
+  const res = await $curl({
+    method: 'get',
+    url: api.value,
+    params: {
+      [mainKey.value]: mainValue.value
+    }
+  })
+  loading.value = false
+
+  if(!res || !res.success || !res.data) {
+    ElNotification({
+      title: '提示',
+      message: '获取数据失败',
+      type: 'error'
+    })
+    return // 添加return防止继续执行
+  }
+  
+  // 确保res.data是对象类型，如果是数字则包装成对象
+  if (typeof res.data === 'object' && res.data !== null) {
+    dotModel.value = res.data
+  } else {
+    // 如果res.data不是对象，可能是直接返回的值，需要包装
+    console.warn('API返回的数据格式不正确，期望对象但收到:', typeof res.data, res.data)
+    dotModel.value = {}
+  }
+}
+
+defineExpose({
+  show,
+  name
+})
+</script>
+
+<style lang="less" scoped>
+.detail-panel {
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  border: none;
+  
+  .row-item {
+    height: auto;
+    min-height: 50px;
+    line-height: 1.6;
+    padding: 15px 0;
+    border-bottom: 1px solid #eaeef5;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .item-label {
+      margin-right: 20px;
+      width: 130px;
+      font-weight: 600;
+      color: #2d3748;
+      font-size: 15px;
+    }
+    
+    .item-value {
+      color: #4a5568;
+      font-size: 15px;
+      flex: 1;
+      word-break: break-word;
+    }
+  }
+}
+
+// 响应式设计，适配不同屏幕尺寸
+@media (max-width: 768px) {
+  .detail-panel {
+    padding: 20px;
+    
+    .row-item {
+      flex-direction: column;
+      align-items: flex-start;
+      
+      .item-label {
+        width: 100%;
+        margin-right: 0;
+        margin-bottom: 5px;
+      }
+    }
+  }
+}
+
+// 暗色主题适配
+:deep(.el-card) {
+  background: transparent;
+  border: none;
+}
+
+:deep(.el-drawer__body) {
+  padding: 20px;
+}
+</style>

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

@@ -0,0 +1,157 @@
+<template>
+  <el-drawer
+    v-model="isShow"
+    directory="rtl"
+    size="550"
+    destroy-on-close
+  >
+    <template #header>
+      <h2>
+        {{ title }}
+      </h2>
+    </template> 
+    <template #default>
+      <schema-form
+        ref="schemaFormRef"
+        v-loading="loading"
+        :schema="currentSchema"
+        :model="dotModel"
+      />
+    </template>
+    <template #footer>
+      <el-button
+        type="primary"
+        @click="save"
+      >
+        {{ saveBtnText }}
+      </el-button>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { ref, inject, computed } from 'vue';
+import schemaForm from '$elpisWidgets/schema-form/schema-form.vue';
+import $curl from '$elpisCommon/curl.js'
+import { ElNotification } from 'element-plus';
+
+const {
+  api,
+  components
+} = inject('schemaViewData')
+
+const emit = defineEmits(['command'])
+
+const name = ref('editForm')
+
+const schemaFormRef = ref(null)
+const isShow = ref(false)
+const loading = ref(false)
+const title = ref('')
+const saveBtnText = ref('')
+const mainKey = ref('')
+const mainValue = ref('')
+const dotModel = ref({})
+
+// 使用 computed 确保响应式更新
+const currentSchema = computed(() => {
+  return components.value?.[name.value]?.schema || {}
+})
+
+const show = (rowData) => {
+  const { config } = components.value[name.value]
+
+  title.value = config.title
+  saveBtnText.value = config.saveBtnText
+  mainKey.value = config.mainKey // 表单的主键
+  mainValue.value = rowData[mainKey.value] // 主键的值
+  dotModel.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,
+    params: {
+      [mainKey.value]: mainValue.value
+    }
+  })
+  loading.value = false
+
+  if(!res || !res.success || !res.data) {
+    ElNotification({
+      title: '提示',
+      message: '获取数据失败',
+      type: 'error'
+    })
+    return // 添加return防止继续执行
+  }
+  
+  // 确保res.data是对象类型，如果是数字则包装成对象
+  if (typeof res.data === 'object' && res.data !== null) {
+    dotModel.value = res.data
+  } else {
+    // 如果res.data不是对象，可能是直接返回的值，需要包装
+    console.warn('API返回的数据格式不正确，期望对象但收到:', typeof res.data, res.data)
+    dotModel.value = {}
+  }
+}
+
+// 表单点击
+const save = async () => {
+  if(loading.value) return
+  // 校验表单
+  if(!schemaFormRef.value.validate()) {
+    console.log('表单校验失败')
+    return
+  }
+
+  loading.value = true
+  const res = await $curl({
+    method: 'put',
+    url: api.value,
+    data: {
+      [mainKey.value]: mainValue.value,
+      ...schemaFormRef.value.getValue()
+    }
+  })
+  loading.value = false
+  if(!res || !res.success) {
+    ElNotification({
+      title: '提示',
+      message: '修改失败',
+      type: 'error'
+    })
+    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,150 @@
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useMenuStore } from '$elpisStore/menu'
+import { cloneDeep } from 'lodash';
+export const useSchema = function() {
+  const route = useRoute()
+  const menuStore = useMenuStore()
+
+  const api = ref('')
+  const tableConfig = ref()
+  const tableSchema = ref({})
+  const searchConfig = ref()
+  const searchSchema = ref({})
+  const components = ref()
+
+  // 构造 schemaConfig 相关配置， 输送给 schemaView 解释
+  const buildData = function() {
+    const { key, sider_key } = route.query
+
+    // 添加菜单项存在性检查
+    if (!key && !sider_key) {
+      resetSchemaData()
+      return
+    }
+    if (!menuStore.menuList || menuStore.menuList.length === 0) {
+      // 初始化早期静默返回，等 watch 触发
+      return
+    }
+
+    const mItem = menuStore.findMenuItem({
+      key: 'key',
+      value: key ?? sider_key
+    })
+
+    // 不是 schema 模块时，清空并退出（不警告）
+    if (!mItem || mItem.moduleType !== 'schema') {
+      resetSchemaData()
+      return
+    }
+
+    const sConfig = mItem.schemaConfig
+    if (!sConfig) {
+      // 理论上继承后会有；异常也静默，避免刷屏
+      resetSchemaData()
+      return
+    }
+  
+    const configSchema = cloneDeep((sConfig.schema ?? {}))
+    api.value = sConfig.api ?? ''
+    tableConfig.value = undefined
+    tableSchema.value = {}
+    searchConfig.value = undefined
+    searchSchema.value = {}
+    components.value = {}
+  
+    // 构造 tableSchema 和 tableConfig
+    tableSchema.value = buildDtoSchema(configSchema, 'table')
+    tableConfig.value = sConfig.tableConfig ?? {}
+
+    // 构造 searchSchema 和 searchConfig
+    const dtoSearchSchema = buildDtoSchema(configSchema, 'search')
+    // 循环遍历searchSchema的属性，将路由参数的值赋给searchSchema的属性的option的default属性
+    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 = { comKey: { schema:{} config: {} }
+    const { componentConfig } = sConfig
+    if(componentConfig && Object.keys(componentConfig).length > 0){
+      const dtoComponents = {}
+
+      for(const comKey in componentConfig) {
+        dtoComponents[comKey] = {
+          schema: buildDtoSchema(configSchema, comKey),
+          config: componentConfig[comKey]
+        }
+      }
+      components.value = dtoComponents
+    }
+  }
+
+// 重置所有schema相关数据为默认值
+const resetSchemaData = function() {
+  tableSchema.value = {}
+  tableConfig.value = {}
+  searchConfig.value = {}
+  searchSchema.value = {}
+  api.value = ''
+  components.value = {}
+}
+
+  // 通用构建 schema 方法 （清除掉无效字段）
+  const buildDtoSchema = (_schema, comName) => {
+    if (!_schema?.properties) return {}
+
+    const dtoSchema = {
+      type: 'object',
+      properties: {}
+    }
+
+    // 提取有效 schema 字段信息
+    // 循环遍历每个properties字段属性 
+    for (const key in _schema.properties) {
+      // 拿取properties下的每个字段key
+      const props = _schema.properties[key]
+      // 筛选出需要显示的字段
+      if (props[`${comName}Option`]) {
+        let dtoProps = {}
+        // 循环遍历key下的每个属性
+        for (const pKey in props) {
+          // 过滤掉非option的属性， 筛选出存储基本属性先存放到dtoProps中,
+          if (pKey.indexOf('Option') < 0) {
+            dtoProps[pKey] = props[pKey]
+          }
+        } 
+          // 将指定的comName的option属性存放到dtoProps中
+          dtoProps = Object.assign({},dtoProps, {option: props[`${comName}Option`]})
+
+          const { required } = _schema
+          if(required && required.find(item => item === key)){
+              dtoProps.option.required = true
+          }
+          // 将处理好的字段存放到dtoSchema的properties中  
+          dtoSchema.properties[key] = dtoProps
+      }
+    }
+      return dtoSchema
+  }
+
+  watch([
+    () => route.query.key,
+    () => route.query.sider_key,
+    () => menuStore.menuList
+  ], () => {
+    buildData()
+  }, { deep: true, immediate: true})
+
+  return {
+    api,
+    tableConfig,
+    tableSchema,
+    searchConfig,
+    searchSchema,
+    components
+  }
+}

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

@@ -0,0 +1,113 @@
+<template>
+  <el-row
+    v-loading="loading"
+    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="(component, key) in components"
+      :key="key"
+      ref="comListRef"
+      @command="handleComCommand"
+    />
+  </el-row>
+</template>
+
+<script setup>
+import { ref, provide, computed } from 'vue';
+import SearchPanel from './complex-view/search-panel/search-panel.vue'
+import TablePanel from './complex-view/table-panel/table-panel.vue'
+import ComponentConfig from './components/component-config';
+import { useSchema } from './hook/schema';
+
+const apiParams = ref({});
+// 从menulist中获取各种配置
+const {
+  api,
+  tableSchema,
+  tableConfig,
+  searchSchema,
+  searchConfig,
+  components
+} = useSchema();
+
+const loading = computed(() => {
+  return !tableSchema.value || Object.keys(tableSchema.value).length === 0
+})
+// 跨层级传递数据
+provide('schemaViewData', {
+  api,
+  apiParams,
+  tableSchema,
+  tableConfig,
+  searchSchema,
+  searchConfig,
+  components
+});
+
+const comListRef = ref([]);
+const tablePanelRef = ref(null);
+
+const onSearch = (searchValObj) => {
+  apiParams.value = searchValObj;
+}
+
+const eventHandlerMap = {
+  showComponent: showComponent
+}
+
+// 表格操作
+const onTableOperate = ({ btnConfig, rowData }) => {
+  const { eventKey } = btnConfig;
+  if(eventHandlerMap[eventKey]){
+    eventHandlerMap[eventKey]({ btnConfig, rowData })
+  }
+}
+
+// 显示组件
+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('配置不正确');
+    return
+  };
+  
+  comRef.show(rowData);
+}
+
+// 处理来自子组件的命令
+const handleComCommand = (data) => {
+  const { event } = data;
+  if(event === 'loadTableData'){
+    tablePanelRef.value.loadTableData();
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.schema-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.loading-container {
+    flex: 1;
+    position: relative;
+    min-height: 400px;
+  }
+</style>