fast-crud-ui3 1.5.15-beta2 → 1.5.16-tsc-beta1

package/packages/model/filterComponentConfig.js

@@ -0,0 +1,185 @@
+import {isUndefined} from "../util/util.js"
+import {escapeValToLabel} from "../util/escape.js"
+import Cond from './cond.js'
+import Opt from './opt.js'
+
+/**
+ * 筛选组件配置
+ */
+class FilterComponentConfig {
+    component; // 渲染组件
+    col; // 字段名
+    opt; // 操作符
+    val; // 值
+    label; // 显示中文名
+    props; // 组件对应的props
+    defaultVal; // 默认值
+    disabled; // 是否禁用: 表示该筛选项是否可用
+    type; // quick, easy, dynamic
+    condMapFn = (cond) => [cond];
+    index = 99; // 排序
+    condMsg = ''; // 条件文本描述
+
+    /**
+     * 构造函数
+     * @param component 组件
+     * @param col 字段名
+     * @param opt 操作符
+     * @param val 值
+     * @param label 中文名
+     * @param props 组件对应的props
+     * @param condMapFn 条件获取过滤函数
+     */
+    constructor({
+                    component,
+                    col,
+                    opt = Opt.LIKE,
+                    val,
+                    label,
+                    props,
+                    condMapFn = (cond) => [cond],
+                    type
+                }) {
+        this.component = component;
+        this.col = col;
+        this.opt = opt;
+        this.label = label;
+        this.condMsg = `${label} ${opt}`
+        const {disabled, ...validProps} = props; // 移除props中的disabled属性,disabled属性对查询时无效
+        this.props = validProps;
+        if (!isUndefined(condMapFn)) {
+            this.condMapFn = condMapFn;
+        }
+
+        this.defaultVal = val;
+        this.disabled = false;
+        this.type = type;
+        this.val = val;
+    }
+
+    /**
+     * 值为默认值
+     */
+    isDefaultVal() {
+        return this.val === this.defaultVal
+    }
+
+    /**
+     * 此筛选项是否有效
+     * @returns {boolean}
+     */
+    isEffective() {
+        if (this.opt === Opt.NULL || this.opt === Opt.NNULL || this.opt === Opt.EMPTY || this.opt === Opt.NEMPTY) {
+            return true;
+        }
+        return this.val !== null && this.val !== undefined && this.val !== '' && this.val.length !== 0;
+    }
+
+    /**
+     * 返回值是否变更
+     * @return {boolean}
+     */
+    reset() {
+        const valChanged = (this.val !== this.defaultVal)
+        this.val = this.defaultVal
+        return valChanged
+    }
+
+    getConds() {
+        if (this.opt === Opt.NULL || this.opt === Opt.NNULL || this.opt === Opt.EMPTY || this.opt === Opt.NEMPTY) {
+            return [new Cond(this.col, this.opt, null)]
+        }
+        return this.condMapFn(new Cond(this.col, this.opt, this.val));
+    }
+
+    /**
+     * 更新条件的文本描述, 例如用于回显在dynamic-filter-list上
+     */
+    updateCondMsg() {
+        return new Promise((resolve, reject) => {
+            const component = this.component
+            const label = this.label
+            const props = this.props
+            if (!this.isEffective()) {
+                this.disabled = true
+                this.condMsg = `[${label}]无有效值`
+                resolve()
+                return
+            }
+            const conds = this.getConds();
+            const allPromises = []
+            for (let i = 0; i < conds.length; i++) {
+                let {opt, val} = conds[i];
+                const promise = new Promise((resolve, reject) => {
+                    let text
+                    escapeValToLabel(component, val, props).then(showVal => {
+                        switch (opt) {
+                            case Opt.EQ:
+                            case Opt.NE:
+                            case Opt.GT:
+                            case Opt.GE:
+                            case Opt.LT:
+                            case Opt.LE:
+                                text = `${label} ${opt} ${showVal}`;
+                                break;
+                            case Opt.LIKE:
+                                text = `${label} 包含'${showVal}'`;
+                                break;
+                            case Opt.LLIKE:
+                                text = `${label}以'${showVal}'结尾`
+                                break;
+                            case Opt.RLIKE:
+                                text = `${label}以'${showVal}'打头`
+                                break;
+                            case Opt.NLIKE:
+                                text = `${label} 不包含'${showVal}'`;
+                                break;
+                            case Opt.IN:
+                                text = `${label} 包含 ${showVal}`;
+                                break;
+                            case Opt.NIN:
+                                text = `${label} 不包含 ${showVal}`;
+                                break;
+                            case Opt.NULL:
+                                text = `${label} 为null`;
+                                break;
+                            case Opt.NNULL:
+                                text = `${label} 不为null`;
+                                break;
+                            case Opt.EMPTY:
+                                text = `${label} 为空`;
+                                break;
+                            case Opt.NEMPTY:
+                                text = `${label} 不为空`;
+                                break;
+                            case Opt.BTW:
+                                text = `${label} 在${showVal}之间`;
+                                break;
+                            default:
+                                text = `${label}未知的比较符`
+                                break
+                        }
+                        resolve(text)
+                    }).catch(err => {
+                        console.error(err)
+                        resolve(`${label} ${opt} ${val}`)
+                    })
+                })
+                allPromises.push(promise)
+            }
+            Promise.all(allPromises).then(texts => {
+                let condMsg = '';
+                for (let i = 0; i < texts.length; i++) {
+                    condMsg += texts[i]
+                    if (i !== texts.length - 1) {
+                        condMsg += " 且 "
+                    }
+                }
+                this.condMsg = condMsg
+                resolve()
+            })
+        })
+    }
+}
+
+export default FilterComponentConfig

package/packages/model/opt.js

@@ -0,0 +1,21 @@
+const Opt = Object.freeze({
+    EQ: "=",
+    NE: "!=",
+    GT: ">",
+    GE: ">=",
+    LT: "<",
+    LE: "<=",
+    IN: "in",
+    NIN: "nin",
+    LIKE: "like",
+    LLIKE: "llike",
+    RLIKE: "rlike",
+    NLIKE: "nlike",
+    NULL: "null",
+    NNULL: "nnull",
+    EMPTY: "empty",
+    NEMPTY: "nempty",
+    BTW: "between",
+})
+
+export default Opt

package/packages/model/order.js

@@ -0,0 +1,37 @@
+/**
+ * 排序对象
+ */
+class Order {
+    /**
+     * 排序字段(英文字段),需要和后端分页响应的字段名对应
+     * @type {string}
+     */
+    col;
+    /**
+     * 是否升序
+     * @type {boolean}
+     */
+    asc;
+
+    /**
+     * 构造器
+     * @param col 排序字段
+     * @param asc 是否升序，默认false，即降序
+     */
+    constructor(col, asc = false) {
+        this.col = col;
+        this.asc = asc;
+    }
+
+    /**
+     * 设置是否升序
+     * @param asc
+     * @return {Order}
+     */
+    setAsc(asc) {
+        this.asc = asc;
+        return this;
+    }
+}
+
+export default Order

package/packages/model/pageQuery.js

@@ -0,0 +1,52 @@
+import Query from "./query.js";
+
+/**
+ * 分页请求参数模型
+ */
+class PageQuery extends Query {
+    /**
+     * 当前页，默认1
+     * @type {number}
+     */
+    current = 1;
+    /**
+     * 每页条数，默认20条
+     * @type {number}
+     */
+    size = 20;
+
+    /**
+     * 构造器
+     * @param current 当前页(默认1)
+     * @param size 每页条数(默认20)
+     */
+    constructor(current = 1, size = 20) {
+        super();
+        this.current = current;
+        this.size = size;
+    }
+
+    /**
+     * 设置每页大小
+     * @param size
+     */
+    setSize(size) {
+        this.size = size;
+        return this;
+    }
+
+    /**
+     * 将当前对象转为json
+     * @return {{current: number, size: number, conds: *, extra: {[p: string]: null|*}, distinct: *, orders: *, cols: *}}
+     */
+    toJson() {
+        const json = super.toJson();
+        return {
+            ...json,
+            current: this.current,
+            size: this.size
+        }
+    }
+}
+
+export default PageQuery

package/packages/model/query.js

@@ -0,0 +1,161 @@
+import {caseToCamel, isBoolean, isEmpty} from "../util/util.js"
+import Cond from './cond.js'
+import Order from './order.js'
+
+/**
+ * 请求参数模型
+ */
+class Query {
+    /**
+     * 请求的字段列表。若为空，则表示请求所有字段。字段必须是分页请求返回的字段(且对应数据表字段)
+     * @type {[]}
+     */
+    cols = [];
+    /**
+     * 查询条件
+     * @type {Cond[]}
+     */
+    conds = [];
+    /**
+     * 是否distinct去重。默认false
+     * @type {boolean}
+     */
+    distinct = false;
+    /**
+     * 排序数组
+     * @type {Order[]}
+     */
+    orders = [];
+    /**
+     * 扩展字段
+     * @type {{}}
+     */
+    extra = {};
+
+    constructor() {
+    }
+
+    /**
+     * 设置查询字段数组
+     * @param cols {string[]} 字段必须是分页请求返回的字段(且对应数据表字段)
+     * @return {Query} 返回当前对象
+     */
+    setCols(cols) {
+        this.cols = cols;
+        return this;
+    }
+
+    /**
+     * 添加筛选条件
+     * @param cond {Cond} 筛选条件
+     * @param repeatable {boolean} 是否允许重复的col, 默认true, 即若多次添加相同col的条件, 只会保留最新的
+     * @return {Query} 返回当前对象
+     */
+    addCond(cond, repeatable = true) {
+        if (repeatable === false) {
+            this.removeCond(c.col)
+        }
+        this.conds.push(cond);
+        return this;
+    }
+
+    /**
+     * 按照字段移除已有条件。此字段所有条件都会被移除
+     * @param col {string} 字段名
+     * @return {Query} 返回当前对象
+     */
+    removeCond(col) {
+        this.conds = this.conds.filter(cond => cond.col !== col);
+        return this;
+    }
+
+    /**
+     * 设置条件。会覆盖已有条件！
+     * @param conds {Array[Cond]} 条件数组
+     * @return {Query} 返回当前对象
+     */
+    setConds(conds) {
+        this.conds = conds;
+        return this;
+    }
+
+    /**
+     * 获取指定字段的所有条件
+     * @param col {string}
+     * @return {Cond[]}
+     */
+    getConds(col) {
+        return this.conds.filter(cond => cond.col === col);
+    }
+
+    /**
+     * 设置distinct去重
+     * @return {Query} 返回当前对象
+     */
+    setDistinct() {
+        this.distinct = true;
+        return this;
+    }
+
+    /**
+     * 添加排序规则
+     * @param col {string} 字段名
+     * @param asc {boolean} 是否升序
+     * @return {Query} 返回当前对象
+     */
+    addOrder(col, asc) {
+        if (isEmpty(col) || !isBoolean(asc)) {
+            return this;
+        }
+        this.removeOrder(col)
+        this.orders.push(new Order(col, asc));
+        return this;
+    }
+
+    /**
+     * 移除排序规则
+     * @param col {string} 字段名
+     * @return {Query} 返回当前对象
+     */
+    removeOrder(col) {
+        const idx = this.orders.findIndex(o => o.col === col);
+        if (idx > -1) {
+            this.orders.splice(idx, 1)
+        }
+        return this;
+    }
+
+    /**
+     * 获取排序规则
+     * @param col {string}
+     * @return {Order} 可能为undefined
+     */
+    getOrder(col) {
+        return this.orders.find(order => order.col === col);
+    }
+
+    /**
+     * 将当前查询实例转换为json
+     * @return {{conds: Cond[], extra: {[p: string]: null|*}, distinct: boolean, orders: Order[], cols: (*)[]}}
+     */
+    toJson() {
+        // 防止后端序列化策略为下划线, 这里将col、conds、orders中涉及的字段全部转换为驼峰, 因为这些值接口传输给后端时不受反序影响
+        //  为了保证后端能正常对应到entity中的字段, 因此转为驼峰(这里是坚信entity中属性是驼峰命名).
+        const cols = this.cols.map(col => caseToCamel(col, '_'));
+        const conds = this.conds.map(cond => new Cond(caseToCamel(cond.col, '_'), cond.opt, cond.val));
+        const orders = this.orders.map(order => new Order(caseToCamel(order.col, '_'), order.asc));
+        // 将扩展参数中的"空值"都转换为null, 避免后端获取时参数类型不符引起问题
+        const extra = Object.fromEntries(
+            Object.entries(this.extra).map(([key, value]) => [key, isEmpty(value) ? null : value])
+        );
+        return {
+            cols: cols,
+            conds: conds,
+            orders: orders,
+            distinct: this.distinct,
+            extra: extra
+        };
+    }
+}
+
+export default Query

package/packages/model/rel.js

@@ -0,0 +1,5 @@
+const Rel = Object.freeze({
+    AND: "and", OR: "or"
+})
+
+export default Rel

package/packages/style.scss

@@ -0,0 +1,5 @@
+.fc-dynamic-dialog {
+  .el-dialog__body {
+    padding: 15px;
+  }
+}

package/packages/util/cache.js

@@ -0,0 +1,92 @@
+import {isEmpty, isNumber, ternary} from "./util.js";
+
+/**
+ * 带有过期时间的 localStorage 封装
+ * 实现了 set 和 get 方法来模拟缓存有效期
+ */
+const STORAGE_KEY_PREFIX = 'FC:';
+
+
+/**
+ * 保存到localStorage中
+ * @param key 会拼接"FC:"前缀
+ * @param value any
+ * @param minutes 缓存有效期(null/undefined, 均表示不设置有效期)
+ */
+export function setToLocalStorage(key, value, minutes) {
+    setItem(localStorage, key, value, minutes)
+}
+
+/**
+ * 从localStorage中获取
+ * @param key 会拼接"FC:"前缀
+ * @return {string}
+ */
+export function getFromLocalStorage(key) {
+    return getItem(localStorage, key)
+}
+
+export function deleteFromLocalStorage(key) {
+    localStorage.removeItem(`${STORAGE_KEY_PREFIX}:${key}`)
+}
+
+export function setToSessionStorage(key, value, minutes) {
+    setItem(sessionStorage, key, value, minutes)
+}
+
+export function getFromSessionStorage(key) {
+    return getItem(sessionStorage, key)
+}
+
+export function deleteFromSessionStorage(key) {
+    sessionStorage.removeItem(`${STORAGE_KEY_PREFIX}${key}`)
+}
+
+/**
+ * 将数据存储到 localStorage，并设置过期时间
+ * @param storage localStorage或sessionStorage
+ * @param {string} key 存储的键名 (会被添加前缀)
+ * @param {*} value 要存储的任何类型的数据
+ * @param {number} minutes 有效期，单位为分钟
+ */
+const setItem = (storage, key, value, minutes) => {
+    const item = {
+        value: value,
+        expiry: ternary(isEmpty(minutes), null, new Date().getTime() + minutes * 60 * 1000)
+    };
+
+    try {
+        storage.setItem(STORAGE_KEY_PREFIX + key, JSON.stringify(item));
+    } catch (error) {
+        console.error('存储数据失败:', error);
+    }
+}
+
+/**
+ * 从 localStorage 中获取数据，并检查是否过期
+ * @param storage localStorage或sessionStorage
+ * @param {string} key 存储的键名
+ * @returns {*} 如果数据有效则返回存储的值，否则返回 null
+ */
+const getItem = (storage, key) => {
+    const storedItem = storage.getItem(STORAGE_KEY_PREFIX + key);
+    if (!storedItem) {
+        return null; // 没有找到缓存
+    }
+    let item;
+    try {
+        // 解析存储的 JSON 字符串
+        item = JSON.parse(storedItem);
+    } catch (error) {
+        console.error('解析存储数据失败，清除缓存:', error);
+        storage.removeItem(STORAGE_KEY_PREFIX + key);
+        return null;
+    }
+    // 检查是否过期
+    if (!isEmpty(item.expiry) && isNumber(item.expiry) && new Date().getTime() > item.expiry) {
+        console.log(`${key} has bean expired, removed..`);
+        storage.removeItem(STORAGE_KEY_PREFIX + key);
+        return null;
+    }
+    return item.value;
+}

package/packages/util/dialog.js

@@ -0,0 +1,133 @@
+import {h, defineComponent, reactive, createVNode, render} from 'vue'
+import {ElDialog, ElButton} from 'element-plus'
+import {getAppContext} from "../index.js"
+import {isFunction} from "./util.js";
+
+/**
+ * 动态打开弹窗。
+ * @param component 弹窗中的组件，可通过emit('ok', data)触发后续then, 或者 通过emit('cancel')取消弹窗触发catch
+ * @param props 传递给component的props
+ * @param dialogProps 传递给dialog的props, 其中还支持自定义的buttons数组，描述dialog按钮
+ * @example
+ * openDialog({
+ *  component: YourComponent,
+ *  props: {
+ *      model: {...}
+ *  },
+ *  dialogProps: {
+ *      width: '50%',
+ *      // dialog支持的props...
+ *      ...
+ *      // 自定义的配置
+ *      okClose: true, // 弹出组件如果emit ok后是否关闭dialog, 默认关闭
+ *      handleOk: (param) => {}, // ok事件处理的回调函数(作用同then, 但当okClose=true时, then只会执行一次, 单handleOk可以多次执行)
+ *      handleCancel: (param) => {}, // cancel事件处理回调函数
+ *      handleCancel: () => {},
+ *      buttons: [
+ *          {
+ *              text: '确定',
+ *              type: 'primary',
+ *              onClick: (component) => { // component是你传入的YourComponent组件实例
+ *                  if (!component.validate()) { // YourComponent里提供的校验方法
+ *                      ElMessage.warning('校验不通过!')
+ *                      return // 返回非Promise则不会关闭对话框
+ *                  }
+ *                  return Promise.resolve(component.getModel()) // YourComponent提供的getModel获取表单数据, 走resolve逻辑
+ *              }
+ *          },
+ *          {
+ *              text: '取消',
+ *              onClick: (component) => {
+ *                  return Promise.reject() // 走catch逻辑
+ *              }
+ *          }
+ *          // 其它自定义按钮
+ *      ]
+ *  }
+ * })
+ * @returns {Promise<unknown>} 可以通过返回的Promise.then和catch分别处理ok事件(可获取component抛出的参数)和弹窗关闭事件
+ */
+export function openDialog({component, props = {}, dialogProps = {}}) {
+    // 1.5.12 即使okClose设置为false, 第二次及之后触发ok事件并执行resolve后，外部仍然无法第二次走then逻辑, 因为promise已经成为终态了。
+    // 解决方案是：同时支持传入回调函数: handleOk和handleCancel
+    const {
+        buttons = [],
+        okClose = true,
+        handleOk: _handleOk,
+        handleCancel: _handleCancel,
+        ...validDialogProps
+    } = dialogProps
+
+    return new Promise((resolve, reject) => {
+        const container = document.createElement('div')
+        document.body.appendChild(container)
+
+        const state = reactive({visible: true})
+        let componentRef = null
+        let _this = this
+
+        const DialogWrapper = defineComponent({
+            setup() {
+                const handleCancel = (who) => {
+                    state.visible = false
+                    cleanup()
+                    if (isFunction(_handleCancel)) {
+                        _handleCancel.call(_this, who)
+                    }
+                    reject(who)
+                }
+
+                const handleOk = (data) => {
+                    if (okClose === true) {
+                        state.visible = false
+                        cleanup()
+                    }
+                    if (isFunction(_handleOk)) {
+                        _handleOk.call(_this, data)
+                    }
+                    resolve(data)
+                }
+
+                const cleanup = () => {
+                    render(null, container) // 卸载 vnode
+                    container.remove()      // 清理 DOM
+                }
+
+                return () => h(ElDialog, {
+                    modelValue: state.visible,
+                    'update:modelValue': (val) => {
+                        state.visible = val
+                        if (!val) cleanup()
+                    },
+                    onClose: () => handleCancel('dialog'),
+                    ...validDialogProps
+                }, {
+                    default: () => {
+                        return h(component, {
+                            ref: (el) => (componentRef = el),
+                            ...props,
+                            onOk: (data) => handleOk(data),
+                            onCancel: () => handleCancel('component')
+                        })
+                    },
+                    footer: () => buttons.map(btn =>
+                        h(ElButton, {
+                            type: btn.type,
+                            icon: btn.icon,
+                            size: btn.size,
+                            onClick: () => {
+                                const returnVal = btn.onClick?.(componentRef)
+                                if (!(returnVal instanceof Promise)) return
+                                returnVal.then(handleOk).catch(() => handleCancel('dialog'))
+                            }
+                        }, () => btn.text)
+                    )
+                })
+            }
+        })
+
+        const vnode = createVNode(DialogWrapper)
+        vnode.appContext = getAppContext() // 集成app的上下文，保证<component :is="" /> 可以找到全局注册的组件
+        render(vnode, container)
+    })
+}