@xujingquan/elpis 1.0.0

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

@@ -0,0 +1,243 @@
+<template>
+  <div class="schema-table">
+    <el-table
+      v-if="schema && schema.properties"
+      v-loading="loading"
+      :data="tableData"
+      class="table"
+    >
+      <template v-for="(schemaItem, key) in schema.properties">
+        <!-- v-bind 透传，将 schemaItem.option 内的属性全部传入-->
+        <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"
+        label="操作"
+        fixed="right"
+        :width="operationWidth"
+      >
+        <template #default="scoped">
+          <el-button
+            v-for="item in buttons"
+            link
+            v-bind="item"
+            @click="
+              operationHandler({
+                btnConfig: item,
+                rowData: scoped.row,
+              })
+            "
+            >{{ item.label }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-row justify="end" class="pagination">
+      <el-pagination
+        :current-page="currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="onPageSizeChange"
+        @current-change="onCurrentChange"
+      />
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, toRefs, computed, watch, nextTick, onMounted } from 'vue';
+import { tableDataPort } from '$elpisCommon/api/business-api';
+
+const emits = defineEmits(['operate']);
+const props = defineProps({
+  /**
+   * schema 配置，结构如下
+   * {
+   *   type: 'object',
+   *   properties: {
+   *     key: {
+   *       ...schema, // 标准 schema 配置
+   *       type: '', //字段类型
+   *       label: '', // 字段的中文名
+   *       option:{
+   *         ...elTableColumnConfig, // 标准 el-table-column
+   *         visible: true, // 默认为 true（false 或 不配置时，表示不在表单中显示）
+   *       }
+   *     }
+   *     ...
+   *   }
+   * }
+   */
+  schema: Object,
+  /**
+   * 表格数据源 api
+   * */
+  api: String,
+  /**
+   * API 请求参数，请求 API 时携带
+   * */
+  apiParams: Object,
+  /**
+   * buttons 操作按钮相关配置，结构如下
+   * [{
+   *   label: '', // 按钮中文名
+   *   eventKey: '', // 按钮事件名
+   *   eventOption: {}, // 按钮事件具体配置
+   *   ...elButtonConfig // 标准的 el-botton 配置
+   * },...]
+   * */
+  buttons: Array,
+});
+
+// 把参数变成可响应 Vue version 3.5 前需要，3.5 后不需要，
+const { schema, api, apiParams, buttons } = toRefs(props);
+
+const loading = ref(false);
+const tableData = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(50);
+const total = ref(0);
+
+const operationWidth = computed(() => {
+  return buttons?.value?.length > 0
+    ? buttons.value.reduce((pre, cur) => {
+        return pre + cur.label.length * 18;
+      }, 50)
+    : 50;
+});
+
+onMounted(() => {
+  initData();
+});
+
+watch(
+  [schema, api, apiParams],
+  () => {
+    initData();
+  },
+  { deep: true }
+);
+
+const initData = function () {
+  currentPage.value = 1;
+  pageSize.value = 50;
+  nextTick(async () => {
+    await loadTableData();
+  });
+};
+
+// 截流处理
+let timerId = null;
+const loadTableData = function () {
+  clearTimeout(timerId);
+  timerId = setTimeout(async () => {
+    await fetchTableData();
+    timerId = null; // 清除内存
+  }, 100);
+};
+
+const fetchTableData = async function () {
+  if (!api.value) return;
+
+  showLoading();
+  try {
+    // 请求数据
+    const res = await tableDataPort({
+      method: 'get',
+      url: `${api.value}/list`,
+      params: {
+        ...apiParams.value,
+        page: currentPage.value,
+        size: pageSize.value,
+      },
+      errorMessage: '请求列表失败',
+    });
+
+    if (!res?.success || !Array.isArray(res?.data)) {
+      tableData.value = [];
+      total.value = 0;
+      return;
+    }
+
+    tableData.value = buildTableData(res.data);
+    total.value = res.metadata.total ?? 0;
+  } finally {
+    hideLoading();
+  }
+};
+
+/**
+ * 对后端返回的数据进行渲染前的预处理
+ * @param {Object} listData 列表数据
+ * */
+const buildTableData = function (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 && rowData[dKey].toFixed(schemaItem.option.toFixed);
+      }
+    }
+
+    return rowData;
+  });
+};
+
+const showLoading = function () {
+  loading.value = true;
+};
+
+const hideLoading = function () {
+  loading.value = false;
+};
+
+const operationHandler = function ({ btnConfig, rowData }) {
+  emits('operate', { btnConfig, rowData });
+};
+
+const onPageSizeChange = async function (value) {
+  pageSize.value = value;
+  await loadTableData();
+};
+
+const onCurrentChange = async function (value) {
+  currentPage.value = value;
+  await loadTableData();
+};
+
+// 暴露方法给外部使用
+defineExpose({
+  initData,
+  loadTableData,
+  showLoading,
+  hideLoading,
+});
+</script>
+
+<style lang="less" scoped>
+.schema-table {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: auto;
+
+  .table {
+    flex: 1;
+  }
+
+  .pagination {
+    margin: 10px 0;
+  }
+}
+</style>

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

@@ -0,0 +1,26 @@
+<template>
+  <el-container>
+    <el-aside width="200px" class="aside">
+      <slot name="menu-content"></slot>
+    </el-aside>
+    <el-main class="main">
+      <slot name="main-content"></slot>
+    </el-main>
+  </el-container>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped>
+.aside {
+  border-right: 1px solid #e8e8e8;
+}
+
+.main {
+  overflow: scroll;
+}
+
+:deep(.el-menu) {
+  border-right: 0;
+}
+</style>