fast-crud-ui3 1.5.16-tsc-beta → 1.5.16

package/packages/model/filterComponentConfig.js

@@ -1,185 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,16 +0,0 @@
-class Order {
-    col;
-    asc;
-
-    constructor(col, asc = false) {
-        this.col = col;
-        this.asc = asc;
-    }
-
-    setAsc(asc) {
-        this.asc = asc;
-        return this;
-    }
-}
-
-export default Order

package/packages/model/pageQuery.js

@@ -1,31 +0,0 @@
-import Query from "./query.js";
-class PageQuery extends Query {
-    current = 1;
-    size = 20;
-
-    constructor(current = 1, size = 20) {
-        super();
-        this.current = current;
-        this.size = size;
-    }
-
-    /**
-     * 设置每页大小
-     * @param size
-     */
-    setSize(size) {
-        this.size = size;
-        return this;
-    }
-
-    toJson() {
-        const json = super.toJson();
-        return {
-            ...json,
-            current: this.current,
-            size: this.size
-        }
-    }
-}
-
-export default PageQuery

package/packages/model/query.js

@@ -1,93 +0,0 @@
-import {caseToCamel, isBoolean, isEmpty} from "../util/util.js"
-import Cond from './cond.js'
-import Order from './order.js'
-
-class Query {
-    cols = [];
-    conds = [];
-    distinct = false;
-    orders = [];
-    extra = {}; // 扩展字段
-
-    constructor() {
-    }
-
-    setCols(cols) {
-        this.cols = cols;
-        return this;
-    }
-
-    /**
-     * @param cond
-     * @param repeatable 是否允许重复的col, 默认true, 即若多次添加相同col的条件, 只会保留最新的
-     * @return {Query}
-     */
-    addCond(cond, repeatable = true) {
-        if (repeatable === false) {
-            this.removeCond(c.col)
-        }
-        this.conds.push(cond);
-        return this;
-    }
-
-    removeCond(col) {
-        this.conds = this.conds.filter(cond => cond.col !== col);
-        return this;
-    }
-
-    setConds(conds) {
-        this.conds = conds;
-        return this;
-    }
-
-    getCond(col) {
-        return this.conds.find(cond => cond.col === col);
-    }
-
-    setDistinct() {
-        this.distinct = true;
-        return this;
-    }
-
-    addOrder(col, asc) {
-        if (isEmpty(col) || !isBoolean(asc)) {
-            return;
-        }
-        this.removeOrder(col)
-        this.orders.push(new Order(col, asc));
-        return this;
-    }
-
-    removeOrder(col) {
-        const idx = this.orders.findIndex(o => o.col === col);
-        if (idx > -1) {
-            this.orders.splice(idx, 1)
-        }
-        return this;
-    }
-
-    getOrder(col) {
-        return this.orders.find(order => order.col === col);
-    }
-
-    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

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

package/packages/style.scss

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

package/packages/util/cache.js

@@ -1,92 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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)
-    })
-}

package/packages/util/escape.js

@@ -1,34 +0,0 @@
-import * as util from './util.js'
-import FastTableOption from '../model/fastTableOption.js'
-import Query from '../model/query.js'
-
-// 需要转义值的组件
-const components = ['fast-checkbox-group', 'fast-select']
-
-/**
- * 根据组件判断将值转义为显示值
- * @param component 组件名
- * @param val 待转义的原始值, 如果是数组，返回的label也是对应的数组
- * @param props 转义依据的配置
- */
-export function escapeValToLabel(component, val, props) {
-    return new Promise((resolve, reject) => {
-        if (components.indexOf(component) === -1) {
-            resolve(val);
-            return
-        }
-        const {options, valKey = 'value', labelKey = 'label'} = props
-        if (util.isArray(options)) {
-            const label = util.escapeLabel(val, options, valKey, labelKey)
-            resolve(label)
-        } else if (options instanceof FastTableOption) {
-            const query = new Query().setDistinct().setCols([valKey, labelKey])
-            options._buildSelectOptions(query, valKey, labelKey).then(optionList => {
-                const label = util.escapeLabel(val, optionList, valKey, labelKey)
-                resolve(label)
-            }).catch(err => {
-                reject(err)
-            })
-        }
-    })
-}

package/packages/util/http.js

@@ -1,18 +0,0 @@
-import {v4 as uuidv4} from 'uuid'
-import FastTableOption from "../model/fastTableOption.js";
-
-/**
- * 发起post请求
- * @param url
- * @param data
- * @param config
- * @return {*}
- */
-export function post(url, data, config = {}) {
-    return FastTableOption.$http.post(url, data, {
-        headers: {
-            'Fc-Request-Id': uuidv4()
-        },
-        ...config
-    })
-}