ol-base-components 2.8.19 → 2.9.0

package/src/api/init.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 // 就是执行api.js和run.js脚本 npx init http://xxxx
 const { spawn } = require("child_process");
 const path = require("path");

package/src/api/run.js

@@ -141,8 +141,6 @@ function cleanSummary(summary) {
 }
 // 生成API模块
 const generateApiModules = swagger => {
-  console.log(2222, swagger);
-
   const { tags, paths } = swagger;
   const apiModules = {};
   // 初始化模块对象

package/src/bin/initTemplate.js

@@ -185,7 +185,7 @@ const vue2Template = (moduleName, config = {}) => {
   Author: 
 -->
 <template>
-  <div>
+  <div class="ol-container">
     <ol-search
       :url="swaggerUrl.${pageUrlKey}"
       :form-search-data="formSearchData"

package/src/package/form/src/index.vue

@@ -124,6 +124,13 @@
               :value="jtem.key"
             />
           </el-select>
+          <ol-number-range
+            v-else-if="item.type === 'numberRange'"
+            v-model="form.value[item.prop]"
+            v-bind="item.props || {}"
+            v-on="{ ...item.listeners, change: val => item.listeners?.change({ item, val }) }"
+          ></ol-number-range>
+
           <div v-else-if="item.type == 'inputSpecial'">
             <el-col :span="6">
               <el-form-item :prop="item.layerprop">
@@ -212,6 +219,7 @@
   -->
 <script>
 import { initForm } from "../../../utils/initData.js";
+import OlNumberRange from "../../numberRange/index.js";
 
 // interface FormItem {
 //   type: Number;
@@ -222,6 +230,9 @@ import { initForm } from "../../../utils/initData.js";
 // }
 export default {
   name: "form",
+  components: {
+    OlNumberRange,
+  },
   props: {
     url: {
       type: String,

package/src/package/formSearch/src/index.vue

@@ -109,6 +109,12 @@
               v-bind="item.props || { type: 'date' }"
               :default-time="item.props.type == 'datetimerange' ? ['00:00:00', '23:59:59'] : ''"
             />
+            <ol-number-range
+              v-else-if="item.inputType === 'numberRange'"
+              v-model="formSearch[item.value]"
+              v-bind="item.props || {}"
+              v-on="{ ...item.listeners, change: val => item.listeners?.change({ item, val }) }"
+            ></ol-number-range>
             <el-input
               v-else
               v-model="formSearch[item.value]"
@@ -177,10 +183,14 @@
 <script>
 import { getData } from "../../index.js";
 import { getEnum } from "../../../utils/getEnum.js";
+import OlNumberRange from "../../numberRange/index.js";
 import { camelCaseToChinese } from "./index.js";
 
 export default {
   name: "search",
+  components: {
+    OlNumberRange,
+  },
   directives: {
     "el-select-loadmore": {
       bind(el, binding) {

package/src/package/index.js

@@ -2,6 +2,8 @@ import OlTable from "./table";
 import OlSearch from "./formSearch";
 import Dialog from "./dialog";
 import OlForm from "./form";
+import OlNumberRange from "./numberRange";
+
 import SwaggerClient from "swagger-client";
 
 const consoleTooltip = () => {
@@ -53,16 +55,16 @@ function openDatabase() {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open(DB_NAME, DB_VERSION);
 
-    request.onupgradeneeded = (event) => {
+    request.onupgradeneeded = event => {
       const db = event.target.result;
       db.createObjectStore(STORE_NAME);
     };
 
-    request.onsuccess = (event) => {
+    request.onsuccess = event => {
       resolve(event.target.result);
     };
 
-    request.onerror = (event) => {
+    request.onerror = event => {
       reject(event.target.error);
     };
   });
@@ -70,30 +72,30 @@ function openDatabase() {
 
 // 存储数据
 function storeData(data) {
-  return openDatabase().then((db) => {
+  return openDatabase().then(db => {
     return new Promise((resolve, reject) => {
       const transaction = db.transaction(STORE_NAME, "readwrite");
       const store = transaction.objectStore(STORE_NAME);
       store.put(data, "swaggerData"); // 使用 'swaggerData' 作为键
       transaction.oncomplete = () => resolve();
-      transaction.onerror = (event) => reject(event.target.error);
+      transaction.onerror = event => reject(event.target.error);
     });
   });
 }
 
 // 获取数据
 export function getData() {
-  return openDatabase().then((db) => {
+  return openDatabase().then(db => {
     return new Promise((resolve, reject) => {
       const transaction = db.transaction(STORE_NAME, "readonly");
       const store = transaction.objectStore(STORE_NAME);
       const request = store.get("swaggerData");
 
-      request.onsuccess = (event) => {
+      request.onsuccess = event => {
         resolve(event.target.result);
       };
 
-      request.onerror = (event) => {
+      request.onerror = event => {
         reject(event.target.error);
       };
     });
@@ -102,19 +104,19 @@ export function getData() {
 
 // 清除数据
 function clearData() {
-  return openDatabase().then((db) => {
+  return openDatabase().then(db => {
     return new Promise((resolve, reject) => {
       const transaction = db.transaction(STORE_NAME, "readwrite");
       const store = transaction.objectStore(STORE_NAME);
       store.delete("swaggerData"); // 删除存储的数据
       transaction.oncomplete = () => resolve();
-      transaction.onerror = (event) => reject(event.target.error);
+      transaction.onerror = event => reject(event.target.error);
     });
   });
 }
 
 // 注册
-const swaggerInstall = async (swaggerUrl) => {
+const swaggerInstall = async swaggerUrl => {
   if (!swaggerUrl) return Promise.reject(new Error("Swagger URL is required.")); // 检查 Swagger URL
 
   // IndexedDB 获取 Swagger 数据
@@ -144,7 +146,6 @@ const swaggerUnload = async function () {
   await clearData(); // 清空 IndexedDB 中的缓存数据
 };
 
-
 // 自定义加载指示器
 function showLoading() {
   const style = document.createElement("style");
@@ -203,16 +204,15 @@ function hideLoading() {
   }
 }
 
-
-const components = [OlTable, OlSearch, Dialog, OlForm];
+const components = [OlTable, OlSearch, Dialog, OlForm, OlNumberRange];
 const install = async function (Vue) {
   // 设置全局数据
-  components.map((item) => {
+  components.map(item => {
     Vue.component(`ol-${item.name}`, item);
   });
   consoleTooltip();
 };
 
 export default install;
-export { OlTable, OlSearch, Dialog, OlForm };
+export { OlTable, OlSearch, Dialog, OlForm, OlNumberRange };
 export { swaggerInstall, swaggerUnload };

package/src/package/numberRange/index.js

@@ -0,0 +1,7 @@
+import OlNumberRange from "./src/index.vue";
+
+OlNumberRange.install = function (Vue) {
+  Vue.component("ol-number-range ", OlNumberRange);
+};
+
+export default OlNumberRange;

package/src/package/numberRange/src/index.vue

@@ -0,0 +1,351 @@
+<template>
+  <div class="ol-number-range" :class="{ 'is-disabled': disabled }">
+    <el-input
+      ref="startInput"
+      v-model="startValue"
+      type="number"
+      :placeholder="startPlaceholder"
+      :min="min"
+      :max="max"
+      :disabled="disabled"
+      class="range-input start-input"
+      @blur="handleStartBlur"
+      @input="handleStartInput"
+      @keyup.enter.native="handleStartBlur"
+    />
+    <span class="range-separator">-</span>
+    <el-input
+      ref="endInput"
+      v-model="endValue"
+      type="number"
+      :placeholder="endPlaceholder"
+      :min="min"
+      :max="max"
+      :disabled="disabled"
+      class="range-input end-input"
+      @blur="handleEndBlur"
+      @input="handleEndInput"
+      @keyup.enter.native="handleEndBlur"
+    />
+    <i
+      v-if="clearable && !disabled && (startValue || endValue)"
+      class="el-icon-circle-close clear-icon"
+      @click="handleClear"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NumberRange",
+  props: {
+    value: {
+      type: Array,
+      default: () => [null, null],
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 999999,
+    },
+    startPlaceholder: {
+      type: String,
+      default: "起始值",
+    },
+    endPlaceholder: {
+      type: String,
+      default: "终止值",
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否启用默认填充最大最小值
+    autoFillDefault: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 数值精度,类似el-input-Number组件precision
+    precision: {
+      type: Number,
+      default: 0,
+      validator(val) {
+        return val === undefined || (Number.isInteger(val) && val >= 0);
+      },
+    },
+  },
+  data() {
+    return {
+      startValue: null,
+      endValue: null,
+    };
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        if (Array.isArray(newVal) && newVal.length === 2) {
+          this.startValue =
+            newVal[0] !== null && newVal[0] !== undefined
+              ? this.formatPrecision(Number(newVal[0]))
+              : null;
+          this.endValue =
+            newVal[1] !== null && newVal[1] !== undefined
+              ? this.formatPrecision(Number(newVal[1]))
+              : null;
+        } else {
+          this.startValue = null;
+          this.endValue = null;
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    // 格式化精度
+    formatPrecision(num) {
+      if (this.precision !== undefined && this.precision !== null) {
+        return Number(Number(num).toFixed(this.precision));
+      }
+      return num;
+    },
+    // 处理起始值输入
+    handleStartInput(val) {
+      if (this.disabled) return;
+      if (val === "" || val === null || val === undefined) {
+        this.startValue = null;
+      } else {
+        let num = Number(val);
+        // 限制在 min 和 max 范围内
+        if (num < this.min) {
+          num = this.min;
+        } else if (num > this.max) {
+          num = this.max;
+        }
+        // 应用精度
+        this.startValue = this.formatPrecision(num);
+      }
+      this.emitValue();
+    },
+    // 处理结束值输入
+    handleEndInput(val) {
+      if (this.disabled) return;
+      if (val === "" || val === null || val === undefined) {
+        this.endValue = null;
+      } else {
+        let num = Number(val);
+        // 限制在 min 和 max 范围内
+        if (num < this.min) {
+          num = this.min;
+        } else if (num > this.max) {
+          num = this.max;
+        }
+        // 应用精度
+        this.endValue = this.formatPrecision(num);
+      }
+      this.emitValue();
+    },
+    // 处理起始值失焦
+    handleStartBlur() {
+      if (this.disabled) return;
+      // 只有当启用自动填充默认值，且只输入了起始值，结束值才默认为最大值
+      if (this.autoFillDefault && this.startValue !== null && this.endValue === null) {
+        this.endValue = this.formatPrecision(this.max);
+      }
+      // 应用精度
+      if (this.startValue !== null) {
+        this.startValue = this.formatPrecision(this.startValue);
+      }
+      // 验证范围
+      this.validateRange();
+      this.emitValue();
+    },
+    // 处理结束值失焦
+    handleEndBlur() {
+      if (this.disabled) return;
+      // 只有当启用自动填充默认值，且只输入了结束值，起始值才默认为最小值
+      if (this.autoFillDefault && this.endValue !== null && this.startValue === null) {
+        this.startValue = this.formatPrecision(this.min);
+      }
+      // 应用精度
+      if (this.endValue !== null) {
+        this.endValue = this.formatPrecision(this.endValue);
+      }
+      // 验证范围
+      this.validateRange();
+      this.emitValue();
+    },
+    // 验证范围
+    validateRange() {
+      if (this.startValue !== null && this.endValue !== null) {
+        // 确保起始值不大于结束值
+        if (this.startValue > this.endValue) {
+          // 如果起始值大于结束值，交换它们
+          const temp = this.startValue;
+          this.startValue = this.formatPrecision(this.endValue);
+          this.endValue = this.formatPrecision(temp);
+        }
+      }
+    },
+    // 清空
+    handleClear() {
+      if (this.disabled) return;
+      this.startValue = null;
+      this.endValue = null;
+      this.emitValue();
+    },
+    // 触发 v-model 更新
+    emitValue() {
+      const result = [this.startValue, this.endValue];
+      this.$emit("input", result);
+      this.$emit("change", result);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.ol-number-range {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  padding: 0 30px 0 10px;
+  box-sizing: border-box;
+  height: 32px;
+  line-height: 32px;
+
+  &:hover {
+    border-color: #c0c4cc;
+  }
+
+  &:focus-within {
+    border-color: #409eff;
+    outline: none;
+  }
+
+  .range-input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    padding: 0;
+    height: 100%;
+    line-height: inherit;
+
+    ::v-deep .el-input__inner {
+      border: none;
+      padding: 0;
+      height: 100%;
+      line-height: inherit;
+      background: transparent;
+      text-align: center;
+      font-size: 14px;
+      color: #606266;
+
+      &:focus {
+        border: none;
+        outline: none;
+      }
+
+      &::placeholder {
+        color: #c0c4cc;
+      }
+    }
+
+    ::v-deep .el-input__inner::-webkit-outer-spin-button,
+    ::v-deep .el-input__inner::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    ::v-deep .el-input__inner[type="number"] {
+      -moz-appearance: textfield;
+      appearance: textfield;
+    }
+  }
+
+  .start-input {
+    ::v-deep .el-input__inner {
+      text-align: center;
+    }
+  }
+
+  .end-input {
+    ::v-deep .el-input__inner {
+      text-align: center;
+    }
+  }
+
+  .range-separator {
+    flex-shrink: 0;
+    padding: 0 8px;
+    color: #c0c4cc;
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  .clear-icon {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: #c0c4cc;
+    font-size: 14px;
+    transition: color 0.2s;
+    z-index: 1;
+
+    &:hover {
+      color: #909399;
+    }
+  }
+}
+
+// 小尺寸适配
+::v-deep .el-form-item--small .ol-number-range {
+  padding: 0 30px 0 10px;
+  height: 28px;
+  line-height: 28px;
+
+  .range-input {
+    height: 28px;
+    line-height: 28px;
+
+    ::v-deep .el-input__inner {
+      height: 28px;
+      line-height: 28px;
+      font-size: 13px;
+    }
+  }
+}
+
+// 禁用状态
+.ol-number-range.is-disabled {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  cursor: not-allowed;
+
+  .range-input {
+    ::v-deep .el-input__inner {
+      background-color: #f5f7fa;
+      color: #c0c4cc;
+      cursor: not-allowed;
+    }
+  }
+
+  .clear-icon {
+    display: none;
+  }
+}
+</style>