fast-crud-ui3 1.5.16 → 1.5.18-beta

package/packages/index.js

@@ -0,0 +1,145 @@
+import FastCheckboxGroup from "./components/checkbox-group";
+import FastCellContent from "./components/content-dialog/src/fast-cell-content.vue";
+import FastJsonViewer from "./components/json-viewer/src/fast-json-viewer.vue";
+import FastSelect from "./components/select";
+import FastUpload from "./components/upload";
+import FastObjectPicker from './components/object-picker'
+import FastTable from './components/table'
+import FastTableColumn from './components/table-column'
+import FastTableColumnDatePicker from './components/table-column-date-picker'
+import FastTableColumnImg from './components/table-column-img'
+import FastTableColumnFile from './components/table-column-file'
+import FastTableColumnInput from './components/table-column-input'
+import FastTableColumnNumber from './components/table-column-number'
+import FastTableColumnObject from './components/table-column-object'
+import FastTableColumnSelect from './components/table-column-select'
+import FastTableColumnSwitch from './components/table-column-switch'
+import FastTableColumnTextarea from './components/table-column-textarea'
+import FastTableColumnTimePicker from './components/table-column-time-picker'
+import {openDialog} from "./util/dialog";
+import {pick} from "./util/pick";
+import "./style.scss"
+import FastTableOption from "./model/fastTableOption.js";
+import Opt from './model/opt.js'
+import Cond from './model/cond.js'
+import Order from './model/order.js'
+import Query from './model/query.js'
+import PageQuery from './model/pageQuery.js'
+import {
+    isEmpty,
+    isString,
+    isNumber,
+    isArray,
+    ifBlank,
+    isFunction,
+    isObject,
+    isBoolean,
+    isNull,
+    isUndefined,
+    defaultIfEmpty,
+    defaultIfBlank,
+    camelCaseTo,
+    caseToCamel,
+    clear,
+    deepClone,
+    merge,
+    coverMerge
+} from "./util/util";
+
+const components = [
+    FastCheckboxGroup,
+    FastSelect,
+    FastUpload,
+    FastObjectPicker,
+    FastTable,
+    FastTableColumn,
+    FastTableColumnDatePicker,
+    FastTableColumnFile,
+    FastTableColumnImg,
+    FastTableColumnInput,
+    FastTableColumnNumber,
+    FastTableColumnObject,
+    FastTableColumnSelect,
+    FastTableColumnSwitch,
+    FastTableColumnTextarea,
+    FastTableColumnTimePicker
+];
+
+const directives = [
+]
+
+// 全局应用上下文
+let globalAppContext = null
+const install = function (app, opts = {}) {
+    globalAppContext = app._context // 保存上下文
+    if (opts.hasOwnProperty('$http')) {
+        FastTableOption.$http = opts.$http
+    }
+    if (opts.hasOwnProperty('$router')) {
+        FastTableOption.$router = opts.$router
+    }
+    components.forEach(component => {
+        app.component(component.name, component);
+    });
+    directives.forEach(directive => {
+        app.use(directive)
+    })
+};
+
+const util = {
+    isEmpty,
+    isString,
+    isNumber,
+    isArray,
+    ifBlank,
+    isFunction,
+    isObject,
+    isBoolean,
+    isNull,
+    isUndefined,
+    defaultIfEmpty,
+    defaultIfBlank,
+    camelCaseTo,
+    caseToCamel,
+    clear,
+    deepClone,
+    merge,
+    coverMerge,
+    openDialog,
+    pick
+}
+
+export {
+    FastCheckboxGroup,
+    FastCellContent,
+    FastJsonViewer,
+    FastSelect,
+    FastUpload,
+    FastObjectPicker,
+    FastTable,
+    FastTableColumn,
+    FastTableColumnDatePicker,
+    FastTableColumnFile,
+    FastTableColumnImg,
+    FastTableColumnInput,
+    FastTableColumnNumber,
+    FastTableColumnObject,
+    FastTableColumnSelect,
+    FastTableColumnSwitch,
+    FastTableColumnTextarea,
+    FastTableColumnTimePicker,
+    FastTableOption,
+    Opt,
+    PageQuery,
+    Query,
+    Order,
+    Cond,
+    util
+}
+
+// 获取App上下文
+export const getAppContext = () => globalAppContext
+
+export default {
+    install
+};

package/packages/mixins/table-column.js

@@ -0,0 +1,133 @@
+import {colEditable} from "../components/table/src/util"
+import FastTableHeadCell from "../components/table/src/table-head-cell.vue"
+import FastCellContent from "../components/content-dialog/src/fast-cell-content.vue";
+import {convertKeyFromCaseToCamel, replaceKey} from "../util/util.js";
+
+export default {
+    inject: ['openDynamicFilterForm', 'tableStyle', 'context'],
+    emits: ['change', 'focus', 'blur', 'input', 'clear'],
+    components: {FastTableHeadCell, FastCellContent},
+    props: {
+        prop: {
+            type: String,
+            required: true
+        },
+        label: {
+            type: String,
+            required: true
+        },
+        // 值为Boolean且为true时, 则将单元格内容作为链接地址; 值为字符串其非空时，将值作为跳转地址,且以超链接的形式展示单元格内容, 并支持点击, 值支持路由地址、路由名、绝对地址
+        link: {
+            type: [Boolean, String],
+            default: () => false
+        },
+        // 以实现某一列不显示, 仍然可以参与生成筛选项
+        hidden: {
+            type: Boolean,
+            default: () => false
+        },
+        // 此列是否支持过滤. 若为false, 则简筛、快筛、动筛都将不支持。此优先级高于quickFilter和dynamicFilter
+        filter: {
+            type: [Boolean, Number],
+            default: () => true
+        },
+        // 此列是否支持快筛
+        quickFilter: {
+            type: [Boolean, Number],
+            default: () => false
+        },
+        quickFilterBlock: {
+            type: Boolean,
+            default: () => false
+        },
+        // 快筛更多配置: 解决筛选项级联问题
+        quickFilterConfig: Object, // {onChange: Function, onClick: Function}
+        // 此列是否支持动筛: 若为false, 则列头不可点击
+        dynamicFilter: {
+            type: Boolean,
+            default: () => true
+        },
+        /**
+         * 1.5.12 是否唯一, 若为true, 新增或更新时, 会校验此值的唯一性(前后端均校验)
+         */
+        unique: {
+            type: Boolean,
+            default: () => false
+        },
+        // deprecated: 1.6.0
+        firstFilter: {
+            type: Boolean,
+            default: () => false
+        },
+        showOverflowTooltip: {
+            type: Boolean,
+            default: () => false
+        },
+        /**
+         * 显示的字符长度, 超长时会显示"...", 并支持弹窗预览完整信息
+         */
+        showLength: {
+            type: Number,
+            default: () => Number.MAX_VALUE
+        }
+    },
+    data() {
+        let attrs = convertKeyFromCaseToCamel(this.$attrs, '-');
+        attrs = replaceKey(attrs, '_q')
+        attrs = replaceKey(attrs, '_e')
+        return {
+            columnProp: {
+                ...attrs,
+                prop: this.prop,
+                label: this.label,
+                filter: this.filter,
+                dynamicFilter: this.dynamicFilter,
+                order: '' // '', 'asc', 'desc'
+            }
+        }
+    },
+    methods: {
+        /**
+         * 是否展示编辑模式
+         * @param fatRow
+         * @param column element原生列配置
+         * @param $index 当前行索引
+         * @returns {boolean}
+         */
+        canEdit(fatRow, column, $index) {
+            return colEditable.call(this.context !== null && this.context !== undefined ? this.context : this, fatRow, column.property);
+        },
+        showLabel(fatRow) {
+            const {row, editRow, status} = fatRow;
+            return status === 'normal' ? row[this.prop] : editRow[this.prop];
+        },
+        headCellClick(column) {
+            if (this.filter !== false && this.dynamicFilter !== false) {
+                this.openDynamicFilterForm(this.columnProp)
+            }
+        },
+        // change事件上抛并触发验证
+        handleChange(val, scope) {
+            this.$emit('change', val, scope);
+            const {column, $index, row: {editRow, config}} = scope;
+            const {property} = column;
+            const ref = this.$refs[property + $index];
+            const {eventMethods: {valid} = {}, props} = config[property]
+            if (valid) {
+                valid(val, editRow, ref, props);
+            }
+        },
+        handleFocus(event, scope) {
+            this.$emit('focus', event, scope)
+        },
+        handleBlur(event, scope) {
+            this.$emit('blur', event, scope)
+        },
+        handleInput(val, scope) {
+            this.$emit('input', val, scope);
+        },
+        handleClear(scope) {
+            this.$emit('clear', scope);
+        }
+    }
+}

package/packages/mixins/upload.js

@@ -0,0 +1,14 @@
+export default {
+    props: {
+        onPreview: Function,
+        beforeRemove: Function,
+        onRemove: Function,
+        onSuccess: Function,
+        onError: Function,
+        onProgress: Function,
+        onChange: Function,
+        onExceed: Function,
+        beforeUpload: Function,
+        responseHandler: Function
+    }
+}

package/packages/model/cond.js

@@ -0,0 +1,74 @@
+import {assert, defaultIfBlank, isEmpty, isObject, isString} from "../util/util.js";
+import Opt from "./opt.js";
+
+/**
+ * @typedef {typeof Opt[keyof typeof Opt]} OptValue
+ */
+class Cond {
+    /**
+     * 字段名
+     * @type {string}
+     */
+    col;
+    /**
+     * 操作符
+     * @type {OptValue}
+     */
+    opt;
+    /**
+     * 值
+     * @type {object}
+     */
+    val;
+
+    /**
+     * 构造函数
+     * @param col 字段
+     * @param opt {OptValue} 操作符,可以使用常量
+     * @param val 值
+     */
+    constructor(col, opt, val) {
+        assert(isString(col) && !isEmpty(col), 'col必须为有效字符串')
+        assert(Object.values(Opt).indexOf(opt) > -1, `opt无效:${opt}`)
+        this.col = col;
+        this.opt = opt;
+        this.val = val;
+    }
+
+    /**
+     * 设置操作符
+     * @param opt {string}
+     * @return {Cond}
+     */
+    setOpt(opt) {
+        this.opt = opt;
+        return this;
+    }
+
+    /**
+     * 设置值
+     * @param val {object}
+     * @return {Cond}
+     */
+    setVal(val) {
+        this.val = val;
+        return this;
+    }
+
+    /**
+     * 通过json构建一个Cond条件对象
+     * @param condJson {object} 条件的json
+     * @return {Cond}
+     */
+    static build(condJson) {
+        if (condJson instanceof Cond) {
+            return condJson;
+        }
+        assert(isObject(condJson), 'cond不是json格式!')
+        const {col, opt = Opt.EQ, val} = condJson
+        assert(!isEmpty(col), 'cond格式不正确: 无col属性或其值为空!')
+        return new Cond(col, defaultIfBlank(opt, Opt.EQ), val);
+    }
+}
+
+export default Cond

package/packages/model/editComponentConfig.js

@@ -0,0 +1,72 @@
+import {isEmpty, isFunction, isNull, isUndefined} from "../util/util.js";
+import FastTableOption from "./fastTableOption.js";
+import Opt from './opt.js'
+
+/**
+ * 编辑组件配置
+ */
+class EditComponentConfig {
+    component;
+    col;
+    label;
+    props;
+    val;
+    editable; // 是否可编辑, true 表示可编辑, false表示不可编辑, insert-表示新增时可编辑, update-表示更新时可编辑. 默认为true.
+    type; // inline, form
+    eventMethods; // 组件事件触发时调用其中的方法，例如参数验证
+
+    constructor({component, col, label, props, val, eventMethods, type, unique, tableOption}) {
+        this.component = component;
+        this.col = col;
+        this.label = label;
+        const {editable, ...validProps} = props; // 移除props中的editable属性,避免editable对组件影响
+        this.props = validProps;
+        this.val = val;
+        this.editable = editable;
+        this.eventMethods = eventMethods;
+        this.type = type;
+        // 将unique转换为 props.rules一部分
+        if (unique !== false && (tableOption instanceof FastTableOption)) {
+            const pkField = tableOption.idField
+            const uniqueValidator = async (rule, value, callback, source, options) => {
+                if (isNull(value) || isUndefined(value)) {
+                    return Promise.resolve()
+                }
+
+                const {getRow} = rule
+                if (!isFunction(getRow)) {
+                    // 无法获取当前行
+                    console.error('无法进行唯一性校验:无法获取当前记录完整数据')
+                    return Promise.resolve()
+                }
+                const currentRow = getRow()
+                const pkVal = currentRow[pkField]
+                if (type === 'inline') {
+                    if (isEmpty(tableOption.ref?.editRows)) {
+                        return Promise.resolve()
+                    }
+                    const editRows = tableOption.ref.editRows.map(fatRow => fatRow.editRow)
+                    const duplicates = editRows.filter(row => row[rule.field] === value && row[pkField] !== pkVal)
+                    if (duplicates.length > 0) {
+                        return Promise.reject(`【${label}】${value}已存在于其它编辑行`)
+                    }
+                }
+
+                // 后端唯一性校验
+                const result = await tableOption._exist([
+                    {col: pkField, opt: Opt.NE, val: pkVal}, // 避免自身编辑时误报
+                    {col: col, opt: Opt.EQ, val: value}
+                ])
+                if (result) { // 表示存在
+                    return Promise.reject(`【${label}】${value}已存在`)
+                }
+                return Promise.resolve()
+            }
+            props?.rules.push({
+                validator: uniqueValidator, trigger: 'blur'
+            })
+        }
+    }
+}
+
+export default EditComponentConfig