@mangjuxiong/elpis 1.0.2

package/app/pages/store/menu.js

@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useMenuStore = defineStore('menu', () => {
+  // 菜单列表
+  const menuList = ref([]);
+  // 设置菜单列表
+  const setMenuList = (newMenuList) => {
+    menuList.value = newMenuList;
+  };
+
+  /**
+   * 找出菜单目录
+   * @param key 搜索字段
+   * @param value 搜索值
+   * @param mList 要搜索的菜单列表
+   * @returns
+   */
+  const findMenuItem = ({ key, value }, mList = menuList.value) => {
+    for (let i = 0; i < mList.length; i++) {
+      const menuItem = mList[i];
+
+      if (!menuItem) return;
+
+      const { menuType, moduleType } = menuItem;
+      if (menuItem[key] === value) {
+        return menuItem;
+      }
+      if (menuType === 'group' && menuItem.subMenu) {
+        const mItem = findMenuItem({ key, value }, menuItem.subMenu);
+        if (mItem) return mItem;
+      }
+      if (moduleType === 'sider' && menuItem.siderConfig && menuItem.siderConfig.menu) {
+        const mItem = findMenuItem({ key, value }, menuItem.siderConfig.menu);
+        if (mItem) return mItem;
+      }
+    }
+  };
+
+  /**
+   * 找出第一个菜单
+   * @param {菜单列表} mList
+   */
+  const findFirstMenuItem = (mList = menuList.value) => {
+    if (!mList || !mList[0]) return;
+    let firstMenuItem = mList[0];
+    if (firstMenuItem.subMenu) {
+      firstMenuItem = findFirstMenuItem(firstMenuItem.subMenu);
+    }
+    return firstMenuItem;
+  };
+
+  return { menuList, setMenuList, findMenuItem, findFirstMenuItem };
+});

package/app/pages/store/project.js

@@ -0,0 +1,13 @@
+import { defineStore } from "pinia";
+import { ref } from 'vue';
+
+export const useProjectStore = defineStore('project', () => {
+    // 项目列表 
+    const projectList = ref([]);
+    // 设置项目列表
+    const setProjectList = (newProjectList)=>{
+      projectList.value = newProjectList;
+    };
+    
+    return { projectList,setProjectList };
+});

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

@@ -0,0 +1,77 @@
+<template>
+  <el-container class="header-container">
+    <el-header class="header">
+      <el-row type="flex" align="middle" class="header-row">
+        <!-- 左上方title -->
+        <el-row type="flex" align="middle" class="title-panel">
+          <img src="./asserts/logo.png" class="logo" />
+          <el-row class="text">
+            {{ title }}
+          </el-row>
+        </el-row>
+        <!-- 插槽：菜单区域 -->
+        <slot name="menu-content" />
+        <!-- 右上方区域 -->
+        <el-row type="flex" align="middle" justify="end" class="setting-panel">
+          <!-- 插槽：设置区域 -->
+          <slot name="setting-content" />
+          <component v-if="BussinessHeaderConfig?.userPanel" :is="BussinessHeaderConfig?.userPanel.component" />
+        </el-row>
+      </el-row>
+    </el-header>
+    <el-main class="main-container">
+      <!-- 外部拓展填充区域 -->
+      <slot name="main-content" />
+    </el-main>
+  </el-container>
+</template>
+
+<script setup>
+import BussinessHeaderConfig from '@bussinessHeaderConfig';
+
+defineProps({
+  title: {
+    type: String,
+    default: 'elpis',
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.header-container {
+  height: 100%;
+  min-width: 1000px;
+  overflow: hidden;
+  .header {
+    max-height: 120px;
+    border-bottom: 1px solid #ebeef5;
+    .header-row {
+      height: 60px;
+      padding: 0 20px;
+      .title-panel {
+        width: 180px;
+        .logo {
+          margin-right: 10px;
+          width: 25px;
+          border-radius: 50%;
+        }
+        .text {
+          font-size: 16px;
+          line-height: 60px;
+          font-weight: 800;
+        }
+      }
+      .setting-panel {
+        margin-left: auto;
+        min-width: 180px;
+      }
+    }
+  }
+  .main-container {
+  }
+}
+
+:deep(.el-header) {
+  padding: 0;
+}
+</style>

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

@@ -0,0 +1,134 @@
+<template>
+  <el-row type="flex" align="middle" class="form-item">
+    <!-- label -->
+    <el-row class="item-label" justify="end">
+      <el-row v-if="schema.options?.required" type="flex" class="required">*</el-row>
+      {{ schema.label }}
+    </el-row>
+    <!-- value -->
+    <el-row class="item-value">
+      <el-input
+        v-model="dtoValue"
+        v-bind="schema.options"
+        class="component"
+        :class="validTips ? 'valid-boder' : ''"
+        :placeholder="placeholder"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </el-row>
+    <!-- 错误信息 -->
+    <el-row v-if="validTips" class="valid-tips">
+      {{ validTips }}
+    </el-row>
+  </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue';
+const ajv = inject('ajv');
+
+const props = defineProps({
+  schemaKey: String,
+  schema: Object,
+  model: String,
+});
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const name = ref('input');
+const dtoValue = ref();
+const validTips = ref('');
+const placeholder = ref('');
+
+const initData = () => {
+  dtoValue.value = model.value ?? schema.options?.default;
+  validTips.value = '';
+
+  const { minLength, maxLength, pattern } = schema;
+
+  const ruleList = [];
+  if (schema.options?.placeholder) {
+    ruleList.push(schema.options.placeholder);
+  }
+  if (minLength) {
+    ruleList.push(`最小长度为：${minLength}`);
+  }
+  if (maxLength) {
+    ruleList.push(`最大长度为：${maxLength}`);
+  }
+  if (pattern) {
+    ruleList.push(`格式为：${pattern}`);
+  }
+
+  placeholder.value = ruleList.join(' | ');
+};
+
+onMounted(() => {
+  initData();
+});
+
+watch(
+  [model, schema],
+  () => {
+    initData();
+  },
+  { deep: true }
+);
+
+const validate = () => {
+  validTips.value = '';
+  const { type } = schema;
+
+  // 检验是否必填
+  if (schema.options?.required && !dtoValue.value) {
+    validTips.value = '不能为空';
+    return false;
+  }
+  // ajv校验schema
+  if (dtoValue.value) {
+    const validate = ajv.compile(schema);
+    const valid = validate(dtoValue.value);
+    if (!valid && validate.errors && validate.errors[0]) {
+      const { keyword, params } = validate.errors[0];
+      if (keyword === 'type') {
+        validTips.value = `类型必须为 ${type}`;
+      } else if (keyword === 'maxLength') {
+        validTips.value = `最大长度应为 ${params.limit}`;
+      } else if (keyword === 'minLength') {
+        validTips.value = `最小长度应为 ${params.limit}`;
+      } else if (keyword === 'pattern') {
+        validTips.value = '格式不正确';
+      } else {
+        console.log(validate.errors[0]);
+        validTips.value = '不符合要求';
+      }
+      return false;
+    }
+  }
+  return true;
+};
+const getValue = () => {
+  return dtoValue.value !== undefined
+    ? {
+        [schemaKey]: dtoValue.value,
+      }
+    : {};
+};
+
+const onFocus = () => {
+  validTips.value = '';
+};
+
+const onBlur = () => {
+  validate();
+};
+
+defineExpose({
+  validate,
+  getValue,
+  name,
+});
+</script>
+
+<style lang="less" scpoed></style>

package/app/pages/widgets/schema-form/complex-view/input-number/input-number.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-row type="flex" align="middle" class="form-item">
+    <!-- label -->
+    <el-row class="item-label" justify="end">
+      <el-row v-if="schema.options?.required" type="flex" class="required">*</el-row>
+      {{ schema.label }}
+    </el-row>
+    <!-- value -->
+    <el-row class="item-value">
+      <el-input-number
+        v-model="dtoValue"
+        v-bind="schema.options"
+        class="component"
+        :class="validTips ? 'valid-boder' : ''"
+        :placeholder="placeholder"
+        :controls="false"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </el-row>
+    <!-- 错误信息 -->
+    <el-row v-if="validTips" class="valid-tips">
+      {{ validTips }}
+    </el-row>
+  </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue';
+const ajv = inject('ajv');
+
+const props = defineProps({
+  schemaKey: String,
+  schema: Object,
+  model: Number,
+});
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const name = ref('input-number');
+const dtoValue = ref();
+const validTips = ref('');
+const placeholder = ref('');
+
+const initData = () => {
+  dtoValue.value = model.value ?? schema.options?.default;
+  validTips.value = '';
+
+  const { minimum, maximum } = schema;
+
+  const ruleList = [];
+
+  if (schema.options?.placeholder) {
+    ruleList.push(schema.options.placeholder);
+  }
+  if (minimum !== undefined) {
+    ruleList.push(`最小值：${minimum}`);
+  }
+  if (maximum !== undefined) {
+    ruleList.push(`最大值：${maximum}`);
+  }
+
+  placeholder.value = ruleList.join(' | ');
+};
+
+onMounted(() => {
+  initData();
+});
+
+watch(
+  [model, schema],
+  () => {
+    initData();
+  },
+  { deep: true }
+);
+
+const validate = () => {
+  validTips.value = '';
+  const { type } = schema;
+
+  // 检验是否必填
+  if (schema.options?.required && !dtoValue.value) {
+    validTips.value = '不能为空';
+    return false;
+  }
+  // ajv校验schema
+  if (dtoValue.value) {
+    const validate = ajv.compile(schema);
+    const valid = validate(dtoValue.value);
+    if (!valid && validate.errors && validate.errors[0]) {
+      const { keyword, params } = validate.errors[0];
+      if (keyword === 'type') {
+        validTips.value = `类型必须为 ${type}`;
+      } else if (keyword === 'minimum') {
+        validTips.value = `最小值应为${params.limit}`;
+      } else if (keyword === 'maximum') {
+        validTips.value = `最大值应为：${params.limit}`;
+      } else {
+        console.log(validate.errors[0]);
+        validTips.value = '不符合要求';
+      }
+      return false;
+    }
+  }
+  return true;
+};
+const getValue = () => {
+  return dtoValue.value !== undefined
+    ? {
+        [schemaKey]: dtoValue.value,
+      }
+    : {};
+};
+
+const onFocus = () => {
+  validTips.value = '';
+};
+
+const onBlur = () => {
+  validate();
+};
+
+defineExpose({
+  validate,
+  getValue,
+  name,
+});
+</script>
+
+<style lang="less" scoped>
+:deep(.el-input-number .el-input__inner) {
+  text-align: left !important;
+}
+</style>

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

@@ -0,0 +1,120 @@
+<template>
+  <el-row type="flex" align="middle" class="form-item">
+    <!-- label -->
+    <el-row class="item-label" justify="end">
+      <el-row v-if="schema.options?.required" type="flex" class="required">*</el-row>
+      {{ schema.label }}
+    </el-row>
+    <!-- value -->
+    <el-row class="item-value">
+      <el-select
+        v-model="dtoValue"
+        v-bind="schema.options"
+        class="component"
+        :class="validTips ? 'valid-boder' : ''"
+        @change="onChange"
+      >
+        <el-option
+          v-for="item in schema.options?.enumList || []"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-row>
+    <!-- 错误信息 -->
+    <el-row v-if="validTips" class="valid-tips">
+      {{ validTips }}
+    </el-row>
+  </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue';
+const ajv = inject('ajv');
+
+const props = defineProps({
+  schemaKey: String,
+  schema: Object,
+  model: [String, Number],
+});
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const name = ref('select');
+const dtoValue = ref();
+const validTips = ref('');
+
+const initData = () => {
+  dtoValue.value = model.value ?? schema.options?.default;
+  validTips.value = '';
+};
+
+onMounted(() => {
+  initData();
+});
+
+watch(
+  [model, schema],
+  () => {
+    initData();
+  },
+  { deep: true }
+);
+
+const validate = () => {
+  validTips.value = '';
+
+  // 检验是否必填
+  if (schema.options?.required && !dtoValue.value) {
+    validTips.value = '不能为空';
+    return false;
+  }
+  // ajv校验schema
+  if (dtoValue.value) {
+    let dtoEnum = [];
+    if (schema.options?.enumList) {
+      dtoEnum = schema.options.enumList.map((item) => item.value);
+    }
+    const validate = ajv.compile({
+      schema,
+      ...{ enum: dtoEnum },
+    });
+
+    const valid = validate(dtoValue.value);
+    if (!valid && validate.errors && validate.errors[0]) {
+      if (validate.errors[0].keyword === 'enum') {
+        validTips.value = '取值超出枚举范围';
+      } else {
+        console.log(validate.errors[0]);
+        validTips.value = '不符合要求';
+      }
+      return false;
+    }
+  }
+  return true;
+};
+const getValue = () => {
+  return dtoValue.value !== undefined
+    ? {
+        [schemaKey]: dtoValue.value,
+      }
+    : {};
+};
+
+const onChange = () => {
+  validate();
+};
+
+defineExpose({
+  validate,
+  getValue,
+  name,
+});
+</script>
+
+<style lang="less" scpoed>
+:deep(.el-input-number .el-input__inner) {
+  text-align: 'left';
+}
+</style>

package/app/pages/widgets/schema-form/form-item-config.js

@@ -0,0 +1,23 @@
+import input from './complex-view/input/input.vue';
+import inputNumber from './complex-view/input-number/input-number.vue';
+import select from './complex-view/select/select.vue';
+
+// 业务拓展 form-item 配置
+import BusinessFormItemConfig from '@businessFormItemConfig';
+
+const FormItemConfig = {
+  input: {
+    component: input,
+  },
+  inputNumber: {
+    component: inputNumber,
+  },
+  select: {
+    component: select,
+  },
+};
+
+export default {
+  ...FormItemConfig,
+  ...BusinessFormItemConfig,
+};

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

@@ -0,0 +1,130 @@
+<template>
+  <el-row
+    v-if="schema && schema.properties"
+    class="schema-form"
+  >
+    <template v-for="(itemSchema, key) in schema.properties">
+      <component
+        :is="FormItemConfig[itemSchema.options?.comType]?.component"
+        v-show="itemSchema.options.visible !== false"
+        ref="formComList"
+        :schema-key="key"
+        :schema="itemSchema"
+        :model="model ? model[key] : undefined"
+      />
+    </template>
+  </el-row>
+</template>
+
+<script setup>
+import { toRefs, provide, ref } from 'vue';
+import FormItemConfig from './form-item-config';
+
+const Ajv = require('ajv');
+const ajv = new Ajv();
+provide('ajv', ajv);
+
+// 属性
+const props = defineProps({
+  /**
+	 * schema配置
+	 * { // 板块数据结构
+				type:'object',
+				properties:{
+						key:{
+							...schema,// 标准的shema配置
+							type:'',// 字段类型
+							label:'',// 字段的中文名
+							// 字段在 createForm 中相关配置
+							options: {
+									...eleComponentConfig,// 标准的el-component配置
+									comType: '', // 空间类型 input/select/input-number
+									visible: true, // 是否展示(true/flase), 默认为true
+									disable: false, // 是否禁用
+									default: '', // 默认值
+									required: false, // 表单项是否必填，默认为false
+
+									// comType === 'select' 时生效
+									enumList: [], // 枚举列表
+							}
+						},
+						...
+				},
+		}
+	 */
+  schema: Object,
+
+  /**
+   * 表单数据
+   */
+  model: Object,
+});
+const { schema } = toRefs(props);
+
+const formComList = ref([]);
+
+// 校验
+const validate = () => {
+  return formComList.value.every((component) => component.validate());
+};
+// 获取表单值
+const getValue = () => {
+  return formComList.value.reduce((dtoObj, component) => {
+    return {
+      ...dtoObj,
+      ...component.getValue(),
+    };
+  }, {});
+};
+
+defineExpose({
+  validate,
+  getValue,
+});
+</script>
+
+<style lang="less">
+.schema-form {
+  .form-item {
+    margin-bottom: 20px;
+    min-width: 500px;
+    .item-label {
+      margin-right: 15px;
+      min-width: 70px;
+      text-align: right;
+      font-size: 14px;
+      color: #ffffff;
+      word-break: break-all;
+      .required {
+        top: 2px;
+        padding-left: 4px;
+        color: #f56c6c;
+        font-size: 20px;
+      }
+    }
+    .item-value {
+      .component {
+        width: 320px;
+      }
+      .valid-boder {
+        .el-input__wrapper {
+          border: 1px solid #f93f3f;
+          box-shadow: 0 0 0 0;
+        }
+        .el-select__wrapper {
+          border: 1px solid #f93f3f;
+          box-shadow: 0 0 0 0;
+        }
+      }
+    }
+    .valid-tips {
+      margin-left: 10px;
+      height: 36px;
+      line-height: 36px;
+      overflow: hidden;
+      font-size: 12px;
+      color: #f93f3f;
+    }
+  }
+}
+</style>