@pixel-shell/elpis 1.0.0

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

@@ -0,0 +1,102 @@
+<template>
+  <div class="header-container">
+    <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"></slot>
+          <!-- 用户信息区域 -->
+          <el-row type="flex" align="middle" justify="end" class="user-panel">
+             <slot name="setting-content"></slot>
+             <img src="./asserts/avatar.png" class="avatar" />
+             <el-dropdown @command="handleUserCommand">
+               <span class="username">
+                {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
+               </span>
+               <template #dropdown>
+                 <el-breadcrumb-item command="logout">退出登录</el-breadcrumb-item>
+               </template>
+             </el-dropdown>
+          </el-row>
+        </el-row>
+      </el-header>
+      <el-main class="main-container">
+        <slot name="main-content"></slot>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+defineProps({
+  title: {
+    type: String,
+    default: "ELPIS",
+  },
+})
+const userName = ref('Miguo')
+const handleUserCommand = (command) => {
+  console.log(command)
+}
+</script>
+<style lang="less" scoped>
+.header-container {
+  height: 100%;
+  min-width: 1000px;
+  overflow: hidden;
+
+  .header {
+    max-height: 120px;
+    border-bottom: 1px solid #E8E8E8;
+
+    .header-row {
+      height: 60px;
+      padding: 0 20px;
+      .title-panel {
+        width: 180px;
+        min-width: 180px;
+        .logo {
+          margin-right: 10px;
+          width: 25px;
+          height: 25px;
+          border-radius: 50%;
+        }
+        .text {
+          font-size: 16px;
+          font-weight: 500;
+        }
+      }
+
+      .user-panel {
+        margin-left: auto;
+        min-width: 190px;
+        .avatar {
+          margin-right: 12px;
+          width: 25px;
+          height: 25px;
+          border-radius: 50%;
+        }
+        .username {
+          font-size: 16px;
+          font-weight: 500;
+          cursor: pointer;
+          height: 60px;
+          line-height: 60px;
+          outline: none;
+        }
+      }
+    }
+  }
+  .main-container {
+    padding: 0;
+  }
+}
+:deep(.el-header) {
+  padding: 0;
+}
+</style>

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

@@ -0,0 +1,129 @@
+<template>
+  <el-row type="flex" align="middle" class="form-item">
+    <!-- label -->
+    <el-row class="item-label" justify="end">
+      <el-row v-if="schema.option.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.option"
+        :placeholder="placeholder"
+        class="component"
+        :class="validTips ? 'valid-border' : ''"
+        @focus="onFocus"
+        @blur="onBlur"
+      ></el-input>
+    </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(undefined);
+const placeholder = ref("");
+const validTips = ref(null);
+
+const initData = () => {
+  dtoValue.value = model.value ?? schema.option?.default;
+  validTips.value = null;
+
+  const { minlength, maxlength, pattern } = schema.option;
+  const ruleList = [];
+  if (schema.option?.placeholder) {
+    ruleList.push(schema.option.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 = null;
+  const { type } = schema;
+  // 校验是否必填
+  if (schema.option?.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 {
+        validTips.value = `校验失败`;
+      }
+      return false;
+    }
+  }
+  return true;
+};
+
+// 获取表单值
+const getValue = () => {
+  return dtoValue.value !== undefined ? { [schemaKey]: dtoValue.value } : {};
+};
+
+const onFocus = () => {
+  validTips.value = null;
+};
+
+const onBlur = () => {
+  validate();
+};
+
+defineExpose({
+  name,
+  validate,
+  getValue,
+});
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,130 @@
+<template>
+  <el-row type="flex" align="middle" class="form-item">
+    <!-- label -->
+    <el-row class="item-label" justify="end">
+      <el-row v-if="schema.option.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.option"
+        :controls="false"
+        :placeholder="placeholder"
+        class="component"
+        :class="validTips ? 'valid-border' : ''"
+        @focus="onFocus"
+        @blur="onBlur"
+      ></el-input-number>
+    </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("inputNumber");
+const dtoValue = ref(undefined);
+const placeholder = ref("");
+const validTips = ref(null);
+
+const initData = () => {
+  dtoValue.value = model.value ?? schema.option?.default;
+  validTips.value = null;
+
+  const { minimum, maximum } = schema;
+
+  const ruleList = [];
+  if (schema.option?.placeholder) {
+    ruleList.push(schema.option.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 = null;
+  const { type } = schema;
+  // 校验是否必填
+  if (schema.option?.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 {
+        validTips.value = `校验失败`;
+      }
+      return false;
+    }
+  }
+  return true;
+};
+
+// 获取表单值
+const getValue = () => {
+  return dtoValue.value !== undefined ? { [schemaKey]: dtoValue.value } : {};
+};
+
+const onFocus = () => {
+  validTips.value = null;
+};
+
+const onBlur = () => {
+  validate();
+};
+
+defineExpose({
+  name,
+  validate,
+  getValue,
+});
+</script>
+
+<style lang="less" scoped>
+:deep(.el-input-number, .el-input__inner) {
+  text-align: left;
+}
+</style>

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

@@ -0,0 +1,116 @@
+<template>
+  <el-row type="flex" align="middle" class="form-item">
+    <!-- label -->
+    <el-row class="item-label" justify="end">
+      <el-row v-if="schema.option.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.option"
+        class="component"
+        :class="validTips ? 'valid-border' : ''"
+        @change="onChange"
+      >
+        <el-option
+          v-for="item in schema.option?.enumList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
+      </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: null,
+});
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+const name = ref("select");
+const dtoValue = ref(undefined);
+const validTips = ref(null);
+
+const initData = () => {
+  dtoValue.value = model.value ?? schema.option?.default;
+  validTips.value = null;
+};
+
+onMounted(() => {
+  initData();
+});
+
+watch(
+  [model, schema],
+  () => {
+    initData();
+  },
+  { deep: true },
+);
+
+// 表单校验
+const validate = () => {
+  validTips.value = null;
+  // 校验是否必填
+  if (schema.option?.required && !dtoValue.value) {
+    validTips.value = "不能为空";
+    return false;
+  }
+  // ajv 校验 schema
+  if (dtoValue.value) {
+    let dtoEnum = [];
+    if (schema.option?.enumList) {
+      dtoEnum = schema.option.enumList.map((item) => item.value);
+    }
+    const validate = ajv.compile({
+      schema,
+      ...{ enum: dtoEnum },
+    })
+    const valid = validate(dtoValue.value);
+    if(!valid && validate.errors && validate.errors[0]) {
+      const { keyword } = validate.errors[0];
+      if(keyword === "enum") {
+        validTips.value = "取值超出枚举范围";
+      } else {
+        validTips.value = "不符合要求";
+      }
+      return false;
+    }
+  }
+  return true;
+};
+
+// 获取表单值
+const getValue = () => {
+  return dtoValue.value !== undefined ? { [schemaKey]: dtoValue.value } : {};
+};
+
+const onChange = () => {
+  validate();
+};
+
+defineExpose({
+  name,
+  validate,
+  getValue,
+});
+</script>
+
+<style lang="less" scoped>
+: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";
+
+// 业务扩展FormItem 配置
+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,121 @@
+<template>
+  <el-row v-if="schema && schema.properties" class="schema-form">
+    <template v-for="(itemSchema, key) in schema.properties">
+      <component
+        v-show="itemSchema.option.visible !== false"
+        ref="formComList"
+        :is="FormItemConfig[itemSchema.option.comType]?.component"
+        :schemaKey="key"
+        :schema="itemSchema"
+        :model="model ? model[key] : undefined"
+      ></component>
+    </template>
+  </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, provide } from "vue";
+import FormItemConfig from "./form-item-config.js";
+
+const Ajv = require("ajv");
+const ajv = new Ajv();
+provide("ajv", ajv);
+
+const props = defineProps({
+  /**
+   * schema 配置，机构如下：
+   * {
+   *    type: "object",
+        properties: {
+          key: {
+            ...schema, // 标准schema配置
+            type: "", // 字段类型
+            label: "", // 字段中文名
+            option: {
+              ...elComponentConfig, //标准 el-component 配置
+              comType: "", // 控件类型，枚举值：input,select 。。。
+              visible: true, // 是否显示
+              disabled: false, // 是否禁用
+              default: "", // 默认值
+
+             // comType === select 时，相关配置
+              enumList: [], // 下拉选项列表
+            }
+          },
+        },
+      }
+   */
+  schema: Object,
+  /**
+   * 表单数据
+   */
+  model: Object,
+});
+const { schema } = toRefs(props);
+const formComList = ref([]);
+
+// 表单校验
+const validate = () => {
+  return formComList.value.every((item) => {
+    return item.validate();
+  });
+};
+// 获取表单值
+const getValue = () => {
+  return formComList.value.reduce((dtoObj, item) => {
+    return { ...dtoObj, ...item.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: #fff;
+      word-break: break-all;
+
+      .required {
+        top: 2px;
+        padding-left: 4px;
+        color: #f56c6c;
+        font-size: 20px;
+      }
+    }
+    .item-value {
+      .component {
+        width: 320px;
+      }
+      .valid-border {
+        .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>

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

@@ -0,0 +1,41 @@
+<template>
+  <el-date-picker
+    v-model="dtoValue"
+    v-bind="schema.option"
+    type="daterange"
+    range-separator="至"
+    :start-placeholder="schema.label + '(开始)'"
+    :end-placeholder="schema.label + '(结束)'"
+    class="date-range"
+  ></el-date-picker>
+</template>
+<script setup>
+import { ref, onMounted } from "vue";
+import moment from "moment";
+
+const { schemaKey, schema } = defineProps({
+  schemaKey: String,
+  schema: Object,
+});
+
+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"),
+  } : {};
+};
+const reset = () => {
+  dtoValue.value = [];
+};
+onMounted(() => {
+  reset();
+  emit("loaded");
+});
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,51 @@
+<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-option
+  ></el-select>
+</template>
+<script setup>
+import { ref, onMounted } from "vue";
+import $curl from "$elpisCommon/curl";
+
+const { schemaKey, schema } = defineProps({
+  schemaKey: String,
+  schema: Object,
+});
+const emit = defineEmits(["loaded"]);
+
+const enumList = ref([]);
+const fetchEnumList = async () => {
+  const res = await $curl({
+    method: "GET",
+    url: schema?.option?.api,
+    data: {}
+  })
+
+  if(res?.data?.length > 0) {
+    enumList.value.push(...res?.data)
+  }
+}
+
+const dtoValue = ref();
+const getValue = () => {
+  return dtoValue.value !== undefined ? { [schemaKey]: dtoValue.value } : {};
+};
+const reset = () => {
+  dtoValue.value = schema?.option?.default ?? enumList.value[0]?.value;
+};
+onMounted(async() => {
+  await fetchEnumList();
+  reset();
+  emit("loaded");
+})
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+<style lang="scss" scoped></style>