@mangjuxiong/elpis 1.0.2

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

@@ -0,0 +1,51 @@
+<template>
+  <el-date-picker
+    v-model="dtoValue"
+    v-bind="schema.options"
+    type="daterange"
+    range-separator="至"
+    :start-placeholder="`${schema.label}开始日期`"
+    :end-placeholder="`${schema.label}结束日期`"
+    class="date-range"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import moment from 'moment';
+
+const { schemaKey, schema } = defineProps({
+  schemaKey: { type: String, default: '' },
+  schema: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['loaded']);
+
+const dtoValue = ref();
+const getValue = () => {
+  return dtoValue.value?.length === 2
+    ? {
+        [`${schemaKey}_start`]: moment(dtoValue.value[0]).format('YYYY-MM-DD'),
+        [`${schemaKey}_end`]: moment(dtoValue.value[1]).format('YYYY-MM-DD'),
+      }
+    : {};
+};
+
+onMounted(() => {
+  reset();
+  emit('loaded');
+});
+
+const reset = () => {
+  dtoValue.value = [];
+};
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+<style lang="less" scoped>
+.date-range {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+  <el-select v-model="dtoValue" v-bind="schema.options" class="select">
+    <el-option v-for="(item, index) in enumList" :key="index" :label="item.label" :value="item.value" />
+  </el-select>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import $curl from '@elpisCommon/curl';
+
+const { schemaKey, schema } = defineProps({
+  schemaKey: { type: String, default: '' },
+  schema: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['loaded']);
+
+const dtoValue = ref();
+const getValue = () => {
+  return dtoValue.value !== undefined
+    ? {
+        [schemaKey]: dtoValue.value,
+      }
+    : {};
+};
+
+const enumList = ref([]);
+const fecthEnumList = async () => {
+  const res = await $curl({
+    url: schema?.options?.api,
+    method: 'get',
+    data: {},
+    errorMessage: '获取枚举列表失败',
+  });
+  if (res?.data?.length > 0) {
+    enumList.value.push(...res.data);
+  }
+};
+
+onMounted(async () => {
+  await fecthEnumList();
+  reset();
+  emit('loaded');
+});
+
+const reset = () => {
+  dtoValue.value = schema?.options?.default ?? enumList.value[0]?.value ?? '';
+};
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style lang="less" scoped></style>

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

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

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

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

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

@@ -0,0 +1,100 @@
+<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
+        :is="SearchItemConfig[SchemaItem?.options?.comType]?.component"
+        ref="SearchComList"
+        :schema-key="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,// 标准的shema配置
+            type:'',// 字段类型
+            label:'',// 字段的中文名
+            // 字段在search-bar中的相关配置
+            options:{
+                ...eleComponentConfig,// 标准的el-component-column配置
+                comType: '',// 配置组件类型，input/select/...
+                default: '',// 默认值
+            }
+        },
+   */
+  schema: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { schema } = toRefs(props);
+
+const emit = defineEmits(['loaded', 'search', 'reset']);
+
+const SearchComList = ref([]);
+
+const getValue = () => {
+  let dtoObj = {};
+  SearchComList.value.forEach((item) => {
+    dtoObj = { ...dtoObj, ...item?.getValue() };
+  });
+  return dtoObj;
+};
+let childComLoadedCount = 0;
+const handleChildLoaded = () => {
+  childComLoadedCount++;
+  if (childComLoadedCount === Object.keys(schema?.value?.properties).length) {
+    emit('loaded', getValue());
+  }
+};
+
+const search = () => {
+  emit('search', getValue());
+};
+const reset = () => {
+  SearchComList.value.forEach((item) => {
+    item?.reset();
+  });
+  emit('reset');
+};
+
+defineExpose({
+  reset,
+  search,
+  getValue,
+});
+</script>
+
+<style lang="less">
+.schema-search-bar {
+  min-width: 500px;
+  .search-btn {
+    width: 100px;
+  }
+  .reset-btn {
+    width: 100px;
+  }
+  .select {
+    width: 180px;
+  }
+}
+</style>

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

@@ -0,0 +1,31 @@
+import input from './complex-view/input/input';
+import select from './complex-view/select/select';
+import dynamicSelect from './complex-view/dynamic-select/dynamic-select';
+import dataRange from './complex-view/date-range/date-range';
+
+// 业务拓展 search-item  配置
+import BusinessSearchItemConfig from '@businessSearchItemConfig';
+
+const SearchItemConfig = {
+  // 输入框
+  input: {
+    component: input,
+  },
+  // 选择框
+  select: {
+    component: select,
+  },
+  // 动态选择框
+  dynamicSelect: {
+    component: dynamicSelect,
+  },
+  // 日期选择
+  dateRange: {
+    component: dataRange,
+  },
+};
+
+export default {
+  ...SearchItemConfig,
+  ...BusinessSearchItemConfig,
+};

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

@@ -0,0 +1,225 @@
+<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.options.visible !== false"
+          :key="key"
+          :prop="key"
+          :label="schemaItem.label"
+          v-bind="schemaItem.options"
+        />
+      </template>
+      <el-table-column v-if="buttons?.length > 0" label="操作" fixed="right" :width="operationWidth">
+        <template #default="scope">
+          <el-button
+            v-for="(button, index) in buttons"
+            :key="index"
+            link
+            v-bind="button"
+            @click="operationHandler({ rowData: scope.row, btnConfig: button })"
+          >
+            {{ button.label }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-row class="pagination" justify="end">
+      <el-pagination
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 50, 200]"
+        :total="total"
+        layout="total,sizes,prev,pager,next,jumper"
+        @current-change="onCurrentPageChange"
+        @size-change="onPageSizeChange"
+      />
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, toRefs, computed, onMounted, nextTick, watch } from 'vue';
+import $curl from '@elpisCommon/curl';
+import utils from '@elpisCommon/utils';
+
+const { debounce } = utils;
+
+const props = defineProps({
+  /**
+	 * schema配置, 结构如下
+	 * {
+			type:'object',
+			properties:{
+					key:{
+							...schema,// 标准的shema配置
+							type:'',// 字段类型
+							label:'',// 字段的中文名
+							// 字段在 table中的相关配置
+							options:{
+									...elTableColumnConfig,// 标准的el-table-column配置
+									visible: true,// 是否在表单中显示,默认为true
+							}
+					},
+					...
+			}
+	 */
+  schema: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * 表格数据源APi
+   */
+  api: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调用接口传参
+   */
+  apiParams: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+	 * 操作按钮相关配置，结构如下
+	 * [{
+  			label: '',// 按钮名称
+				eventKey: '',// 按钮事件key
+				eventOptions:{} // 按钮事件具体配置
+				...elButtonConfig,// 标准的el-button配置
+		},...]
+	 */
+  buttons: {
+    type: Array,
+    default: () => [],
+  },
+});
+const { schema, api, buttons, 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(10);
+const total = ref(0);
+
+onMounted(() => {
+  initData();
+});
+watch(
+  [api, schema, apiParams],
+  () => {
+    initData();
+  },
+  { deep: true }
+);
+
+const initData = () => {
+  currentPage.value = 1;
+  pageSize.value = 10;
+  nextTick(() => {
+    fetchTableData();
+  });
+};
+
+const fetchTableData = debounce(async () => {
+  if (!api.value) return;
+  showLoading();
+
+  // 请求table数据
+  const res = await $curl({
+    url: `${api.value}/list`,
+    method: 'get',
+    query: {
+      ...apiParams.value,
+      page: currentPage.value,
+      pageSize: 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.metadatas?.total ?? 0;
+}, 500);
+
+/**
+ * 对后端返回的数据进行渲染前的预处理
+ * @param {Array} data 后端返回的数据
+ */
+const buildTableData = (listData) => {
+  if (!schema.value?.properties) return listData;
+  return listData.map((rowData) => {
+    Object.keys(rowData).forEach((key) => {
+      const schemaItem = schema.value.properties[key];
+      // 处理toFixed
+      if (schemaItem?.options?.toFixed) {
+        rowData[key] = rowData[key].toFixed && rowData[key].toFixed(schemaItem.options.toFixed);
+      }
+    });
+    return rowData;
+  });
+};
+
+const showLoading = () => {
+  loading.value = true;
+};
+
+const hideLoading = () => {
+  loading.value = false;
+};
+
+const operationHandler = ({ rowData, btnConfig }) => {
+  emit('operate', { rowData, btnConfig });
+};
+
+const onCurrentPageChange = (page) => {
+  currentPage.value = page;
+  fetchTableData();
+};
+
+const onPageSizeChange = (pageSize) => {
+  pageSize.value = pageSize;
+  fetchTableData();
+};
+
+defineExpose({
+  initData,
+  loadTableData: fetchTableData,
+  showLoading,
+  hideLoading,
+});
+</script>
+
+<style lang="less" scoped>
+.schema-table {
+  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,27 @@
+<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 lang="less" scoped>
+.sider-container {
+  height: 100%;
+  .aside {
+    border-right: 1px solid #e8e8e8;
+  }
+  .main {
+    overflow: scroll;
+  }
+}
+:deep(.el-menu) {
+  border-right: none;
+}
+</style>

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

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>{{name}}</title>
+		<link href="/static/normalize.css" rel="stylesheet"/>
+		<link href="/static/logo.jpg" rel="icon" type="image/x-icon"/>
+	</head>
+	<body style="color: red;">
+		<h1>Hello World 1</h1>
+		<input id="env" value="{{env}}" style="display: none;"/>
+		<input id="options" value="{{options}}" style="display: none;"/>
+		<button onclick="handleClick()">发送请求</button>
+	</body>
+	<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js" type="text/javascript"></script>
+	<script src="https://cdn.jsdelivr.net/npm/js-md5@0.8.3/src/md5.min.js" type="text/javascript"></script>
+	<script type="text/javascript">
+		try{
+			window.env = document.getElementById("env").value;
+			console.log("🚀 ~ window.env:", window.env)
+			const options = document.getElementById("options").value;
+			window.options = JSON.parse(options);
+			console.log("🚀 ~ window.options:", window.options)
+		}catch(e){
+			console.log("🚀 ~ e:", e)
+		}
+		const handleClick = ()=>{
+			const signKey = 'mshsiksjksnnmsma'
+			const st = Date.now()
+			axios.request({
+				url: "/api/project/list",
+				method: "get",
+				params: {proj_key:1},
+				headers: {
+					"s_t": st,
+					"s_sign": md5(`${signKey}_${st}`)
+				}
+			}).then(res=>{
+				console.log("🚀 ~ res:", res)
+			})
+		}
+	</script>
+</html>