@dmqweb/elpis 1.0.0

package/app/pages/widgets/schema-search-bar/complex-view/dynamic-select/dynamic-select.vue

@@ -0,0 +1,77 @@
+<template>
+  <el-select
+    v-model="dtoValue"
+    v-bind="schema.option"
+    class="dynamic-select"
+  >
+    <el-option
+      v-for="item in enumList"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script setup>
+import { ref, onMounted} from 'vue'
+import $curl from '$elpisCommon/curl'
+
+const { schema, schemaKey} = defineProps({
+  schema: {
+    type: Object,
+    default: () => ({})
+  },
+  schemaKey: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['loaded'])
+
+const dtoValue = ref()
+
+const getValue = () => {
+  return dtoValue.value !== undefined ? {
+    [schemaKey]: dtoValue.value
+  } : {}
+}
+
+
+
+const enumList = ref([])
+const fetchEnumList = async () => {
+  try{
+    const res = await $curl({
+      method: 'get',
+      url: schema.option?.api,
+      params: {}
+    })
+    if(res?.data?.length > 0){
+      enumList.value.push(...res?.data)
+    }
+
+  }catch(e) {
+    console.log(e)
+  }
+}
+const reset = () => {
+  dtoValue.value = schema?.option?.default ?? enumList?.value[0]?.value;
+  return
+}
+onMounted(async () => {
+  await fetchEnumList()
+  reset()
+  emit('loaded')
+})
+
+defineExpose({
+  getValue,
+  reset
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>

package/app/pages/widgets/schema-search-bar/complex-view/input/input.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-input
+    v-model="dtoValue"
+    v-bind="schema.option"
+    class="input"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted} from 'vue'
+
+const { schema, schemaKey} = defineProps({
+  schema: {
+    type: Object,
+    default: () => ({})
+  },
+  schemaKey: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['loaded'])
+
+const dtoValue = ref()
+
+const getValue = () => {
+  return dtoValue.value !== undefined ? {
+    [schemaKey]: dtoValue.value
+  } : {}
+}
+
+const reset = () => {
+  dtoValue.value = schema?.option?.default;
+  return
+}
+
+onMounted(() => {
+  reset()
+  emit('loaded')
+})
+
+defineExpose({
+  getValue,
+  reset
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>

package/app/pages/widgets/schema-search-bar/complex-view/select/select.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-select
+    v-model="dtoValue"
+    v-bind="schema.option"
+    class="select"
+  >
+    <el-option
+      v-for="item in schema.option?.enumList"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script setup>
+import { ref, onMounted} from 'vue'
+
+const { schema, schemaKey} = defineProps({
+  schema: {
+    type: Object,
+    default: () => ({})
+  },
+  schemaKey: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['loaded'])
+
+const dtoValue = ref()
+
+const getValue = () => {
+  return dtoValue.value !== undefined ? {
+    [schemaKey]: dtoValue.value
+  } : {}
+}
+
+const reset = () => {
+  dtoValue.value = schema?.option?.default ?? schema.option?.enumList?.[0]?.value ?? '';
+  return
+}
+
+onMounted(() => {
+  reset()
+  emit('loaded')
+})
+
+defineExpose({
+  getValue,
+  reset
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>

package/app/pages/widgets/schema-search-bar/schema-search-bar.vue

@@ -0,0 +1,138 @@
+<template>
+  <el-form
+    v-if="schema && schema.properties"
+    class="schema-search-bar"
+    :inline="true"
+  >
+    <!-- 动态组件 -->
+    <el-form-item
+      v-for="(schemaItem, key) in schema.properties"
+      :key="key"
+      :label="schemaItem.label"
+    >
+      <!-- 展示子组件 -->
+      <component
+        :is="SearchItemConfig[schemaItem.option?.comType]?.component"
+        :ref="searchComList"
+        :schema-key="key"
+        :schema="schemaItem"
+        @loaded="handleChildLoaded"
+      />
+    </el-form-item>
+    <!-- 操作区域 -->
+    <el-form-item>
+      <el-button
+        plain
+        type="primary"
+        class="search-btn"
+        @click="search"
+      >
+        搜索
+      </el-button>
+      <el-button
+        plain
+        class="reset-btn"
+        @click="reset"
+      >
+        重置
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, toRefs} from 'vue'
+import SearchItemConfig from './search-item-config'
+
+const props = defineProps({
+  /**
+   * schema 配置, 结构如下
+   * {
+  *     type: 'object',
+        properties: {
+          key: {
+            ...schema, // 标准 schema 配置
+            type: '', // 字段类型
+            label: '', // 字段名称
+            option: {
+              ...elComponentConfig, // 标准 el-component-column 配置
+              comType: '', // 配置组件类型 input/select....
+              default: '', // 默认值
+            }
+          }
+        }
+      }
+  */
+  schema: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const { schema } = toRefs(props)
+
+const emit = defineEmits([ 'load', 'search', 'reset' ])
+
+const searchComList = ref([])
+
+// 获取动态组件实例里的数据
+const getValue = () => {
+  let dtoObj = {}
+  searchComList.value.forEach(component => {
+    dtoObj = {
+      ...dtoObj,
+      ...component.getValue(  )
+    }
+  })
+  return dtoObj
+}
+
+let childComLoadedCount = 0
+const handleChildLoaded = () => {
+  childComLoadedCount++
+  if (childComLoadedCount >= Object.keys(schema?.value?.properties).length) {
+    emit('load',getValue())
+  }
+}
+
+const search = () => {
+  emit('search', getValue())
+}
+const reset = () => {
+  searchComList.value.forEach(component => {
+    component.reset()
+  })
+  emit('reset')
+}
+
+defineExpose({
+  reset,
+  getValue
+})
+</script>
+
+<style lang="less">
+.schema-search-bar{
+  min-width: 500px;
+
+  // 库存
+  .input{
+    width: 100px;
+  }
+  // 商品名称
+  .dynamic-select{ 
+    width: 250px;
+  }
+  // 价格
+  .select{
+    width: 150px;
+  }
+  // 搜索按钮
+  .search-btn{
+    width: 100px;
+  }
+  // 重置按钮
+  .reset-btn{
+    width: 100px;
+  }
+}
+</style>

package/app/pages/widgets/schema-search-bar/search-item-config.js

@@ -0,0 +1,27 @@
+import input from './complex-view/input/input.vue'
+import select from './complex-view/select/select.vue';
+import dynamicSelect from './complex-view/dynamic-select/dynamic-select.vue';
+import dateRange from './complex-view/date-range/date-range.vue';
+
+// 自定义业务搜索项组件
+import BusinessSearchItemConfig from "$businessSearchItemConfig"
+
+const SearchItemConfig = {
+  input: {
+    component: input
+  },
+  select: {
+    component: select
+  },
+  dynamicSelect: {
+    component: dynamicSelect
+  },
+  dateRange: {
+    component: dateRange
+  }
+}
+
+export default {
+  ...SearchItemConfig,
+  ...BusinessSearchItemConfig
+};

package/app/pages/widgets/schema-table/schema-table.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="search-panel"> 
+    <!-- 表格  -->
+    <el-table
+      v-if="schema && schema.properties"
+      v-loading="loading"
+      class="table"
+      :data="tableData"
+    >
+      <template v-for="(schemaItem, key) in schema.properties">
+        <el-table-column
+          v-if="schemaItem?.option?.visible !== false"
+          :key="key"
+          :prop="key"
+          :label="schemaItem.label"
+          v-bind="schemaItem?.option"
+        />
+      </template>
+      <!-- 行为按钮组 -->
+      <el-table-column
+        v-if="buttons?.length > 0"
+        fixed="right"
+        label="操作"
+        :width="operationWidth"
+      >
+        <template #default="scope">
+          <el-button
+            v-for="item in buttons"
+            link
+            v-bind="item"
+            @click="operationHandler({ btnConfig: item, rowData: scope.row })"
+          >
+            {{ item.label }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-row
+      justify="end"
+      class="pagination"
+    >
+      <el-pagination
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="onPageSizeChange"
+        @current-change="onCurrentPageChange"
+      />
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, toRefs, onMounted, computed, watch, nextTick,} from 'vue'
+import $curl from '$elpisCommon/curl'
+
+const props =  defineProps({
+  /**
+   * schema 配置, 结构如下
+   * {
+  *     type: 'object',
+        properties: {   
+          key: { 
+            ...schema, // 标准 schema 配置
+            type: '', // 字段类型
+            label: '', // 字段名称
+            option: { 
+              ...elTableColumnConfig, // 标准 el-table-column 配置
+              visible: true // 是否在 表单 中显示
+            }
+          },
+          ...}
+   * }
+   */
+  schema: {
+    type: Object,
+    default: () => ({}) // 为Object类型设置默认值
+  },
+
+  /**
+   * 表格数据源 api
+   */
+  api: {
+    type: String,
+    default: '' // 为String类型设置默认值
+  },
+  /**
+   * 表格数据源 api 参数
+   */
+  apiParams: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * buttons 按钮配置, 结构如下
+   * [{
+   *    label: '', // 按钮名称
+        eventKey: '', // 按钮事件名
+        eventOptions: {}, // 按钮配置
+        ...elButton, // 标准 el-button 配置
+   * }, ...]
+   */
+  buttons: {
+    type: Array,
+    default: () => [] // 为Array类型设置默认值
+  }
+})
+
+const { schema, buttons, api, apiParams } = toRefs(props);
+
+const emit = defineEmits(['operate']);
+
+// 计算按钮宽度
+const operationWidth = computed( () => {
+  return buttons?.value?.length > 0 ? buttons?.value.reduce(( pre, cur) => {
+    return pre + cur.label.length * 18
+  }, 50) : 50
+})
+
+// 表格数据
+const loading = ref(false); // 表格加载状态
+const tableData = ref([]); // 表格数据
+const currentPage = ref(1); // 当前页码
+const pageSize = ref(50); // 每页条数
+const total = ref(0); // 数据总数
+
+onMounted(() => {
+  initData();
+});
+
+watch([api, schema, apiParams], () => { 
+  initData();
+}, { deep: true}) 
+
+// 初始化数据
+const initData = () => { 
+  currentPage.value = 1;
+  pageSize.value = 50;
+  nextTick( async () => {
+    await loadTableData();
+  });
+}
+
+// 防抖加载表格数据
+let timer = null;
+const loadTableData = () => { 
+  clearTimeout(timer);
+  timer = setTimeout(() => { 
+    fetchTableData();
+    timer = null;
+  }, 300);
+}
+
+// 获取表格数据
+const fetchTableData = async () => { 
+  if (!api.value) return;
+  
+  showLoading();
+
+  // 获取数据
+  const res = await $curl({
+    method: 'get',
+    url: `${api.value}/list`,
+    params: {
+      ...apiParams.value,
+      page: currentPage.value,
+      pageSize: pageSize.value
+    }
+  })
+
+  hideLoading();
+
+  if (!res || !Array.isArray(res.data) || !res.success) {
+    tableData.value = [];
+    total.value = 0;
+    return;
+  }
+  tableData.value = buildTableData(res.data);
+  total.value = res.metadata.total;
+}
+
+/**
+ * 处理后端返回的数据，根据 schema 配置进行数据预处理
+ * @param listData 列表数据
+ */
+const buildTableData = (listData) => {
+  if (!schema?.value.properties) return listData;
+
+  return listData.map(rowData => {
+    for (const dKey in rowData) {
+      const schemaItem = schema.value.properties[dKey];
+      
+      // 处理toFixed
+      if (schemaItem?.option?.toFixed) {
+        rowData[dKey] = rowData[dKey].toFixed(schemaItem.option.toFixed);
+      }
+  }
+    return rowData;
+  })
+}
+
+const showLoading = () => { 
+  loading.value = true;
+}
+
+const hideLoading = () => { 
+  loading.value = false;
+}
+
+// 按钮点击处理
+const operationHandler = ( { btnConfig, rowData }) => {
+  emit('operate', { btnConfig, rowData });
+}
+
+// 处理每页显示条目数
+const onPageSizeChange = async (value) => {
+  pageSize.value = value
+  await loadTableData();
+}
+
+// 处理当前页码的改变
+const onCurrentPageChange = async (value) => {
+  currentPage.value = value
+  await loadTableData();
+}
+
+defineExpose({
+  initData,
+  loadTableData,
+  hideLoading,
+  showLoading
+})
+</script>
+
+<style lang="less" scoped>
+.search-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  .table{
+    flex: 1;
+  }
+  .pagination{
+    margin: 10px 0;
+    text-align: right;
+  }
+}
+
+</style>

package/app/pages/widgets/sider-container/sider-container.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-container class="sider-container">
+    <!-- 侧边栏模板 -->
+    <el-aside
+      width="200px"
+      class="aside"
+    >
+      <slot name="menu-content" />
+    </el-aside>
+    <!-- 主内容模板 -->
+    <el-main class="main">
+      <slot name="main-content" />
+    </el-main>
+  </el-container>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+.sider-container {
+  height: 100%;
+
+  .aside{
+    border-right: 1px solid #eee;
+  }
+  .main{
+    overflow: auto;
+  }
+}
+</style>

package/app/router/business.js

@@ -0,0 +1,15 @@
+module.exports = (app,router) => {
+  const { business: businessController} = app.controller;
+
+  router.post('/api/proj/product',businessController.create.bind(businessController));
+
+  router.get('/api/proj/product',businessController.get.bind(businessController));
+
+  router.put('/api/proj/product',businessController.update.bind(businessController));
+
+  router.delete('/api/proj/product',businessController.remove.bind(businessController));
+
+  router.get('/api/proj/product/list',businessController.getProductList.bind(businessController));
+
+  router.get('/api/proj/product_enum/list',businessController.getProductEnumList.bind(businessController));
+}

package/app/router/project.js

@@ -0,0 +1,10 @@
+module.exports = (app,router) => {
+  const { project: projectController} = app.controller;
+  
+  // 获取项目配置接口
+  router.get('/api/project',projectController.get.bind(projectController))
+  // 获取项目列表接口
+  router.get('/api/project/list',projectController.getProjectList.bind(projectController))
+  // 获取项目列表关键数据接口
+  router.get('/api/project/model_list',projectController.getModelList.bind(projectController))
+}

package/app/router/view.js

@@ -0,0 +1,11 @@
+// 导出一个函数，接收 app（Koa 应用实例）和 router（路由实例）两个参数
+module.exports = (app,router) => {
+  // 从 app.controller 中获取 view 控制器实例，并重命名为 viewController
+  // 这里的 view 对应 app/controller/view.js 文件
+  const { view: viewController} = app.controller;
+  // 定义一个 GET 路由，用于处理 GET 请求
+  // viewController.renderPage.bind(viewController) 是路由处理函数
+  // 使用 bind 确保 renderPage 方法内部的 this 指向正确的 viewController 实例
+  router.get('/view/:page',viewController.renderPage.bind(viewController));
+  router.get('/view/:page/*',viewController.renderPage.bind(viewController));
+}