@xujingquan/elpis 1.0.0

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

@@ -0,0 +1,119 @@
+<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-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: Number || String,
+});
+
+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?.[0]) {
+      if (validate.error[0].keyword === 'enum') {
+        validTips.value = '取值超出枚举范围';
+      } else {
+        console.error('不符合要求');
+        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></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 {
+  ...BusinessFormItemConfig,
+  ...FormItemConfig,
+};

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.option?.comType]?.component"
+        v-show="itemSchema.option.visible !== false"
+        ref="formComList"
+        :schemaKey="key"
+        :schema="itemSchema"
+        :model="model ? model[key] : undefined"
+      />
+    </template>
+  </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, provide } from 'vue';
+import FormItemConfig from './form-item-config';
+
+import Ajv from 'ajv';
+const ajv = new Ajv();
+provide('ajv', ajv);
+
+const props = defineProps({
+  /**
+   * schema 配置如下
+   * schema: {
+   *   // 板块数据结构
+   *   type: 'object',
+   *   properties: {
+   *   key: {
+   *     ...schema, // 标准 schema 配置
+   *     type: '', //字段类型
+   *     label: '', // 字段的中文名
+   *     // 字段在不同动态 component 中的相关配置，前缀对应 componentConfig 中的键值
+   *     // 如 componentConfig.createForm 这里对应 createFormOption
+   *     createFormOption: {
+   *       ...eleComponentConfig, // 标准 el-component-column 配置
+   *       comType: '', // 控件类型 如 input/select/input-number
+   *       required: false, // 是否必填，默认false
+   *       visible: true, // 是否展示 true/false 默认 true
+   *       disabled: false, // 是否禁用 true/false 默认 fasle
+   *       default: '', // 默认值
+   *
+   *       // 当 comType === 'select' 时生效
+   *       enumList: [] // 枚举列表
+   *       }
+   *     },
+   *      ...,
+   *   },
+   * },
+   * */
+  schema: Object,
+  /**
+   * 表单数据
+   * */
+  model: Object,
+});
+
+const { schema } = toRefs(props);
+
+const formComList = ref([]);
+// 表单校验
+const validate = () => {
+  return formComList.value.every((com) => com.validate());
+};
+
+// 获取表单项
+const getValue = () => {
+  return formComList.value.reduce((dtoObj, component) => {
+    return {
+      ...dtoObj,
+      ...component.getValue(),
+    };
+  }, {});
+};
+
+defineExpose({
+  validate,
+  getValue,
+});
+</script>
+
+<style lang="less">
+.schema-form {
+  .form-item {
+    min-width: 500px;
+    margin-bottom: 20px;
+
+    .item-label {
+      min-width: 70px;
+      margin-right: 15px;
+      color: #ffffff;
+      font-size: 14px;
+      text-align: right;
+      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,
+        .el-select__wrapper {
+          border: 1px solid #f93f3f;
+          box-shadow: 0 0 0 0;
+        }
+      }
+    }
+
+    .valid-tips {
+      height: 36px;
+      margin-left: 10px;
+      overflow: hidden;
+      color: #f93f3f;
+      font-size: 12px;
+      line-height: 36px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,50 @@
+<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 moment from 'moment';
+import { ref, onMounted } from 'vue';
+
+const { schemaKey, schema } = defineProps({
+  schemaKey: String,
+  schema: Object,
+});
+
+const emits = defineEmits(['loaded']);
+
+const dtoValue = ref(undefined);
+
+const getValue = function () {
+  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 = function () {
+  dtoValue.value = [];
+};
+
+onMounted(() => {
+  reset();
+  emits('loaded');
+});
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,62 @@
+<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 { tableDataPort } from '$elpisCommon/api/business-api';
+
+const { schemaKey, schema } = defineProps({
+  schemaKey: String,
+  schema: Object,
+});
+
+const emits = defineEmits(['loaded']);
+
+const dtoValue = ref(undefined);
+
+const getValue = function () {
+  return dtoValue.value !== 'undefined'
+    ? {
+        [schemaKey]: dtoValue.value,
+      }
+    : {};
+};
+
+const reset = function () {
+  dtoValue.value = schema?.option?.default ?? enumList.value?.[0]?.value;
+};
+
+const enumList = ref([]);
+const fetchEnumList = async function () {
+  try {
+    const req = {
+      method: 'get',
+      url: schema?.option?.api ?? '',
+      data: {},
+    };
+    const res = await tableDataPort(req);
+
+    if (res?.data?.length > 0) {
+      enumList.value = res?.data;
+    }
+  } finally {
+  }
+};
+
+onMounted(async () => {
+  await fetchEnumList();
+  reset();
+  emits('loaded');
+});
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style lang="less" scoped></style>

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

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

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

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

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

@@ -0,0 +1,121 @@
+<template>
+  <el-form v-if="schema?.properties" :inline="true" class="schema-search-bar">
+    <!-- 动态组件 -->
+    <el-form-item
+      v-for="(schemaItem, key) in schema.properties"
+      :key="key"
+      :label="schemaItem.label"
+    >
+      <!--展示子组件 -->
+      <!-- component  动态组件使用 https://cn.vuejs.org/api/built-in-special-elements.html#component -->
+      <!-- schemaItem.option?.comType  是schemaConfig 中的配置 -->
+      <!-- component 是 SearchItemConfig 中的key -->
+      <component
+        :is="SearchItemConfig[schemaItem.option?.comType].component"
+        :ref="handleSearchComList"
+        :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: '', // 字段的中文名
+            // 字段在 table 中的相关配置
+            option: {
+              ...eleComponentConfig, // 标准 el-component-column 配置
+              comType: '', // 配置控件类型 input/select/...
+              default: '', // 默认值
+            }
+          },
+          ...,
+        }
+     }
+   */
+  schema: Object,
+});
+
+const emits = defineEmits(['load', 'search', 'reset']);
+
+const { schema } = toRefs(props);
+
+const searchComList = ref([]);
+const handleSearchComList = (el) => {
+  searchComList.value.push(el);
+};
+
+// 所有子组件value
+const getValue = function () {
+  let dtoObj = {};
+  searchComList.value.forEach((component) => {
+    dtoObj = {
+      ...dtoObj,
+      ...component?.getValue(),
+    };
+  });
+
+  return dtoObj;
+};
+
+let childComLoadedCount = 0;
+const handleChildLoaded = function () {
+  childComLoadedCount++;
+  if (childComLoadedCount >= Object.keys(schema?.value?.properties).length) {
+    // 加载完成调用，将子组件的 value 返回
+    emits('load', getValue());
+  }
+};
+
+const search = function () {
+  emits('search', getValue());
+};
+
+const reset = function () {
+  searchComList.value.forEach((component) => component?.reset());
+  emits('reset');
+};
+
+defineExpose({
+  reset,
+  getValue,
+});
+</script>
+
+<style lang="less">
+.schema-search-bar {
+  min-width: 500px;
+
+  .input,
+  .select,
+  .dynamic-select {
+    width: 180px;
+  }
+
+  .search-btn {
+    width: 100px;
+  }
+
+  .reset-btn {
+    width: 100px;
+  }
+}
+</style>

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

@@ -0,0 +1,27 @@
+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';
+
+// 业务扩展 search-item 配置
+import BusinessSearchItemConfig from '$businessSearchItemConfig';
+
+const SearchItemConfig = {
+  input: {
+    component: input,
+  },
+  select: {
+    component: select,
+  },
+  dynamicSelect: {
+    component: dynamicSelect,
+  },
+  dateRange: {
+    component: dateRange,
+  },
+};
+
+export default {
+  ...BusinessSearchItemConfig,
+  ...SearchItemConfig,
+};