@wanglindoc/elpis 1.0.0

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

@@ -0,0 +1,129 @@
+<template>
+  <el-form
+    v-if="schema && schema.properties"
+    :inline="true"
+    class="schema-search-bar"
+  >
+    <!-- 动态组件 -->
+    <el-form-item
+      v-for="(schemaItem, key) in schema.properties"
+      :key="key"
+      :label="schemaItem.label"
+    >
+      <component
+        :ref="searchComList"
+        :is="SearchItemConfig[schemaItem.option?.comType]?.component"
+        :schemaKey="key"
+        :schema="schemaItem"
+        @loaded="handleChildLoaded"
+      />
+    </el-form-item>
+
+    <!-- 操作区域 -->
+    <el-form-item>
+      <el-button type="primary" plain 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: "", // 字段中文名
+   *           // 字段在 search-bar 中的相关配置
+   *           option: {
+   *               ...eleComponentConfig, // 标准 el-component-column 配置
+   *               comType: "", // 配置组件类型 input/select…
+   *               default: "", // 默认值
+   *           }
+   *       }
+   *       // ...
+   *   }
+   * }
+   */
+  schema: Object,
+})
+
+const { schema } = toRefs(props)
+
+const emits = defineEmits(['load', 'search', 'reset'])
+
+const search = () => {
+  emits('search', getValue())
+}
+
+const reset = () => {
+  searchComList.value.forEach((component) => component?.reset())
+  emits('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) {
+    emits('load', getValue())
+  }
+}
+
+defineExpose({
+  reset,
+})
+</script>
+
+<style lang="less">
+.schema-search-bar {
+  min-width: 500px;
+
+  .input {
+    width: 180px;
+  }
+
+  .select {
+    width: 180px;
+  }
+
+  .dynamic-select {
+    width: 180px;
+  }
+
+  //   .date-range {
+  //     width: 300px;
+  //   }
+
+  .search-btn {
+    width: 100px;
+  }
+
+  .reset-btn {
+    width: 100px;
+  }
+}
+</style>

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

@@ -0,0 +1,24 @@
+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";
+
+// 业务拓展 form-item 配置
+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,212 @@
+<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">
+        <el-table-column
+          v-if="schemaItem.option.visible !== false"
+          :key="key"
+          :prop="key"
+          :label="schemaItem.label"
+          v-bind="schemaItem.option"
+        ></el-table-column>
+      </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="operationHander({ 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-size="pageSize"
+        :page-sizes="[10, 20, 30, 40, 50, 100]"
+        :total="total"
+        layout="prev, pager, next, jumper, ->, total"
+        @size-change="onPageSizeChange"
+        @current-change="onCurrentPageChange"
+      ></el-pagination>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, nextTick, watch, computed } from "vue";
+import $curl from "$elpisCommon/curl.js";
+
+const props = defineProps({
+  schema: Object, // schema 配置
+  api: String, // 表格数据源 API
+  apiParams: Object, // 列表接口参数
+  buttons: Array, // 操作按钮相关配置
+});
+
+const emits = defineEmits(["operate"]);
+
+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);
+
+watch(
+  [schema, api, apiParams],
+  () => {
+    initData();
+  },
+  { deep: true },
+);
+
+/**
+ * 计算 table 操作列宽度
+ */
+const operationWidth = computed(() => {
+  return buttons?.value?.length > 0
+    ? buttons.value.reduce((pre, cur) => {
+        return pre + cur.label.length * 18;
+      }, 50)
+    : 50;
+});
+
+onMounted(() => {
+  initData();
+});
+
+/**
+ * 初始化数据
+ */
+const initData = () => {
+  currentPage.value = 1;
+  pageSize.value = 50;
+  nextTick(async () => {
+    await loadTableData();
+  });
+};
+
+let timerId = null;
+
+/**
+ * 防抖处理
+ */
+const loadTableData = async () => {
+  clearTimeout(timerId);
+  timerId = setTimeout(async () => {
+    await fetchTableData();
+    timerId = null;
+  }, 100);
+};
+
+/**
+ * 加载表格数据
+ */
+const fetchTableData = async () => {
+  if (!api.value) {
+    return;
+  }
+
+  showLoading();
+
+  const res = await $curl({
+    method: "get",
+    url: `${api.value}/list`,
+    query: {
+      ...apiParams.value,
+      page: currentPage.value,
+      size: pageSize.value,
+    },
+  });
+
+  hideLoading();
+
+  if (!res || !res.success || !Array.isArray(res.data)) {
+    tableData.value = [];
+    total.value = 0;
+    return;
+  }
+
+  tableData.value = buildTableData(res.data);
+  total.value = res.metadata.total;
+};
+
+/**
+ * 处理元数据
+ * @param listData
+ */
+const buildTableData = (listData) => {
+  if (!schema.value?.properties) {
+    return listData;
+  }
+
+  return listData.map((rowData) => {
+    for (const rKey in rowData) {
+      const schemaItem = schema.value.properties[rKey];
+
+      if (schemaItem?.option?.toFixed) {
+        rowData[rKey] =
+          rowData[rKey].toFixed &&
+          rowData[rKey].toFixed(schemaItem.option.toFixed);
+      }
+    }
+    return rowData;
+  });
+};
+
+const showLoading = () => (loading.value = true);
+const hideLoading = () => (loading.value = false);
+
+const operationHander = ({ btnConfig, rowData }) => {
+  emits("operate", { btnConfig, rowData });
+};
+
+const onPageSizeChange = async (value) => {
+  pageSize.value = value;
+  await loadTableData();
+};
+
+const onCurrentPageChange = async (value) => {
+  currentPage.value = value;
+  await loadTableData();
+};
+
+defineExpose({
+  initData,
+  loadTableData,
+  showLoading,
+  hideLoading,
+});
+</script>
+
+<style scoped lang="less">
+.schema-table {
+  flex: 1;
+  display: flex;
+  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 class="sider-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 scoped lang="less">
+.sider-container {
+  height: 100%;
+
+  .aside {
+    border: 1px solid #e8e8e8;
+  }
+
+  .main {
+    overflow: scroll;
+  }
+}
+</style>

package/app/public/output/entry.page1.tpl

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>{{ name }}</title>
+    <link href="/static/normalize.css" rel="stylesheet" />
+    <link href="/static/favicon.ico" rel="icon" type="image/x-icon" />
+  </head>
+  <body>
+    <h1 style="color: red">
+      entry.page1
+      <span id="env">{{ env }}</span>
+      <button onclick="handleClick()">发送请求</button>
+    </h1>
+  </body>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/js-md5@0.8.3/src/md5.min.js"></script>
+  <script>
+    try {
+      window.env = document.getElementById("env").textContent;
+    } catch (e) {
+      console.log(e);
+    }
+
+    function handleClick() {
+      const signKey = "ajflskjflaskdjfqoiwefjlaskdjflka";
+      const s_t = Date.now();
+      const s_sign = md5(`${signKey}_${s_t}`);
+
+      // axios.request({
+      //    method:"post",
+      //    url:'/api/project/list',
+      //    headers:{
+      //        s_t,
+      //        s_sign
+      //    },
+      //    data:{a:1,b:2,c:3}
+      // })
+
+      axios.request({
+        method: "get",
+        url: "/api/project/list",
+        params: { proj_key: "123" },
+        headers: {
+          s_t,
+          s_sign,
+        },
+      });
+
+      // axios.get('/api/project/list').then(res=>{
+      //    console.log(res,'res')
+      // })
+    }
+  </script>
+</html>

package/app/public/output/entry.page2.tpl

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link href="/static/favicon.ico" rel="icon" type="image/x-icon" />
+    <title>entry.page1</title>
+  </head>
+  <body>
+    <h1 style="color: darkgreen">entry.page2</h1>
+  </body>
+</html>