@jetlinks-web/components 2.0.32 → 2.0.33

package/lib/ProTable/ProTable.js

@@ -0,0 +1,310 @@
+function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+        return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+        lastAccessLHS = value;
+        value = fn(value);
+    }
+    else if (op === 'call' || op === 'optionalCall') {
+        value = fn((...args) => value.call(lastAccessLHS, ...args));
+        lastAccessLHS = undefined;
+    }
+} return value; }
+/* Analyzed bindings: {
+  "proTableProps": "setup-maybe-ref",
+  "Spin": "setup-maybe-ref",
+  "Header": "setup-const",
+  "Alert": "setup-const",
+  "Content": "setup-const",
+  "Pagination": "setup-const",
+  "useSlots": "setup-const",
+  "watch": "setup-const",
+  "onMounted": "setup-const",
+  "onUnmounted": "setup-const",
+  "computed": "setup-const",
+  "ref": "setup-const",
+  "reactive": "setup-const",
+  "debounce": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "slots": "setup-maybe-ref",
+  "loading": "setup-ref",
+  "_dataSource": "setup-ref",
+  "_mode": "setup-ref",
+  "column": "setup-ref",
+  "page": "setup-reactive-const",
+  "extraSlots": "setup-const",
+  "showAlert": "setup-ref",
+  "showPagination": "setup-ref",
+  "onCheck": "setup-const",
+  "handleData": "setup-const",
+  "handleSearch": "setup-const",
+  "_debounceFn": "setup-maybe-ref",
+  "onPageChange": "setup-const",
+  "onClose": "setup-const",
+  "reload": "setup-const",
+  "_gridColumns": "setup-ref",
+  "windowChange": "setup-const"
+} */
+import { defineComponent as _defineComponent } from 'vue';
+import { renderSlot as _renderSlot, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, unref as _unref, normalizeProps as _normalizeProps, mergeProps as _mergeProps, renderList as _renderList, createSlots as _createSlots, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "jtable-body" };
+import { proTableProps } from "./setting";
+import { Spin } from 'ant-design-vue';
+import Header from './Header.js';
+import Alert from './Alert.js';
+import Content from './Content.js';
+import Pagination from './Pagination.js';
+import { useSlots, watch, onMounted, onUnmounted, computed, ref, reactive } from "vue";
+import { debounce } from 'lodash-es';
+const __sfc_main__ = _defineComponent({
+    ...{
+        name: 'JProTable'
+    },
+    props: {
+        ...proTableProps
+    },
+    setup(__props, { expose: __expose }) {
+        const props = __props;
+        const slots = useSlots();
+        const loading = ref(false);
+        const _dataSource = ref([]);
+        const _mode = ref(!props.mode ? (props.modeValue || 'CARD') : props.mode);
+        const column = ref(4);
+        const page = reactive({
+            pageIndex: 0,
+            pageSize: 12,
+            total: 0
+        });
+        const extraSlots = ['headerRightRender', 'headerLeftRender', 'paginationRender', 'alertRender'];
+        const showAlert = computed(() => {
+            return props.alertShow && _optionalChain([props, 'optionalAccess', _2 => _2.rowSelection, 'optionalAccess', _3 => _3.selectedRowKeys, 'optionalAccess', _4 => _4.length]);
+        });
+        const showPagination = computed(() => {
+            return !!_dataSource.value.length && !props.noPagination && props.type === 'PAGE';
+        });
+        const onCheck = (e) => {
+            _mode.value = e.target.value;
+        };
+        const handleData = (result) => {
+            if (props.type === 'PAGE') {
+                // 判断如果是最后一页且最后一页为空，就跳转到前一页
+                if (_optionalChain([result, 'optionalAccess', _5 => _5.total]) &&
+                    _optionalChain([result, 'optionalAccess', _6 => _6.pageSize]) &&
+                    _optionalChain([result, 'optionalAccess', _7 => _7.pageIndex]) &&
+                    _optionalChain([result, 'optionalAccess', _8 => _8.data, 'optionalAccess', _9 => _9.length]) === 0) {
+                    return true;
+                }
+                else {
+                    _dataSource.value = _optionalChain([result, 'optionalAccess', _10 => _10.data]) || [];
+                    page.pageIndex = _optionalChain([result, 'optionalAccess', _11 => _11.pageIndex]) || 0;
+                    page.pageSize = _optionalChain([result, 'optionalAccess', _12 => _12.pageSize]) || 12;
+                    page.total = _optionalChain([result, 'optionalAccess', _13 => _13.total]) || 0;
+                }
+            }
+            else {
+                _dataSource.value = result || [];
+            }
+            return false;
+        };
+        const handleSearch = async (_params) => {
+            if (Array.isArray(props.dataSource)) {
+                _dataSource.value = [];
+            }
+            else if (props.request) {
+                const __params = {
+                    pageIndex: page.pageIndex,
+                    pageSize: Number(page.pageSize),
+                    ...props.defaultParams,
+                    ..._params,
+                    terms: [
+                        ...(_optionalChain([props, 'access', _14 => _14.defaultParams, 'optionalAccess', _15 => _15.terms]) || []),
+                        ...(_optionalChain([_params, 'optionalAccess', _16 => _16.terms]) || []),
+                    ],
+                };
+                loading.value = true;
+                const resp = await props.request(__params).finally(() => {
+                    loading.value = false;
+                });
+                if (resp.success) {
+                    const flag = handleData(resp.result || {});
+                    if (flag) { // 判断如果是最后一页且最后一页为空，就跳转到前一页
+                        page.pageIndex = page.pageIndex > 0 ? page.pageIndex - 1 : 0;
+                        handleSearch({
+                            ..._params,
+                            pageSize: page.pageSize,
+                            pageIndex: page.pageIndex,
+                        });
+                    }
+                }
+                else {
+                    _dataSource.value = [];
+                }
+            }
+            else {
+                _dataSource.value = [];
+            }
+        };
+        const _debounceFn = debounce(handleSearch, 300);
+        watch(() => props.params, (newValue) => {
+            _debounceFn(newValue || {});
+        }, { deep: true, immediate: true });
+        watch(() => props.dataSource, () => {
+            handleSearch(props.params);
+        }, { deep: true, immediate: true });
+        const onPageChange = (_page, size) => {
+            handleSearch({
+                ...props.params,
+                pageSize: size,
+                pageIndex: page.pageSize === size ? (_page ? _page - 1 : 0) : 0
+            });
+        };
+        const onClose = () => {
+            _optionalChain([props, 'access', _17 => _17.rowSelection, 'optionalAccess', _18 => _18.onChange, 'optionalCall', _19 => _19([], [])]);
+            _optionalChain([props, 'access', _20 => _20.rowSelection, 'optionalAccess', _21 => _21.onSelectNone, 'optionalCall', _22 => _22()]);
+        };
+        /**
+         * 刷新数据
+         * @param _params
+         */
+        const reload = (_params) => {
+            handleSearch({
+                ...props.params,
+                ..._params,
+                pageSize: page.pageSize || 12,
+                pageIndex: page.pageIndex || 0,
+            });
+        };
+        const _gridColumns = computed(() => {
+            if (_optionalChain([props, 'access', _23 => _23.gridColumns, 'optionalAccess', _24 => _24.length])) {
+                const arr = props.gridColumns;
+                const lastValue = _optionalChain([arr, 'access', _25 => _25.slice, 'call', _26 => _26(-1), 'optionalAccess', _27 => _27[0]]);
+                if (_optionalChain([arr, 'optionalAccess', _28 => _28.length]) < 4) {
+                    while (arr.length < 4) {
+                        arr.push(lastValue);
+                    }
+                    return arr;
+                }
+                else {
+                    return props.gridColumns.slice(0, 4);
+                }
+            }
+            else {
+                return [1, 2, 3, 4];
+            }
+        });
+        // 监听宽度，计算显示卡片个数
+        const windowChange = () => {
+            const ele = document.getElementById('jtable-body-spin');
+            if (ele) {
+                const styles = window.getComputedStyle(ele);
+                const width = parseFloat(styles.width);
+                if (width <= 992) {
+                    column.value = _optionalChain([_gridColumns, 'access', _29 => _29.value, 'optionalAccess', _30 => _30[0]]) || 1;
+                }
+                else if (width > 992 && width <= 1440) {
+                    column.value = _optionalChain([_gridColumns, 'access', _31 => _31.value, 'optionalAccess', _32 => _32[1]]) || 2;
+                }
+                else if (width > 1440 && width <= 1600) {
+                    column.value = _optionalChain([_gridColumns, 'access', _33 => _33.value, 'optionalAccess', _34 => _34[2]]) || 3;
+                }
+                else if (width > 1600) {
+                    column.value = _optionalChain([_gridColumns, 'access', _35 => _35.value, 'optionalAccess', _36 => _36[3]]) || 4;
+                }
+            }
+        };
+        onMounted(() => {
+            windowChange(); // 初始化
+            window.onresize = () => {
+                windowChange();
+            };
+        });
+        onUnmounted(() => {
+            window.onresize = null;
+        });
+        __expose({ reload, dataSource: _dataSource });
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock("div", {
+                class: "jtable-body-spin",
+                style: _normalizeStyle(_ctx.bodyStyle),
+                id: "jtable-body-spin"
+            }, [
+                _createVNode(_unref(Spin), { spinning: loading.value }, {
+                    default: _withCtx(() => [
+                        _createElementVNode("div", _hoisted_1, [
+                            _createVNode(Header, {
+                                initMode: _ctx.mode,
+                                mode: _mode.value,
+                                modeValue: _ctx.modeValue,
+                                onChange: onCheck
+                            }, {
+                                headerLeftRender: _withCtx(() => [
+                                    _renderSlot(_ctx.$slots, "headerLeftRender")
+                                ]),
+                                headerRightRender: _withCtx(() => [
+                                    _renderSlot(_ctx.$slots, "headerRightRender")
+                                ]),
+                                _: 3 /* FORWARDED */
+                            }, 8 /* PROPS */, ["initMode", "mode", "modeValue"]),
+                            (showAlert.value)
+                                ? (_openBlock(), _createBlock(Alert, {
+                                    key: 0,
+                                    rowSelection: _ctx.rowSelection,
+                                    onClose: onClose
+                                }, {
+                                    default: _withCtx(() => [
+                                        _renderSlot(_ctx.$slots, "alertRender", {
+                                            rowSelection: _ctx.rowSelection,
+                                            onClose: onClose
+                                        })
+                                    ]),
+                                    _: 3 /* FORWARDED */
+                                }, 8 /* PROPS */, ["rowSelection"]))
+                                : _createCommentVNode("v-if", true),
+                            _createVNode(Content, _mergeProps(props, {
+                                mode: _mode.value,
+                                dataSource: _dataSource.value,
+                                column: column.value
+                            }), _createSlots({ _: 2 /* DYNAMIC */ }, [
+                                _renderList(_unref(slots), (_, key) => {
+                                    return {
+                                        name: key,
+                                        fn: _withCtx((slotProps) => [
+                                            (!extraSlots.includes(key))
+                                                ? _renderSlot(_ctx.$slots, key, _normalizeProps(_mergeProps({ key: 0 }, slotProps)))
+                                                : _createCommentVNode("v-if", true)
+                                        ])
+                                    };
+                                })
+                            ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["mode", "dataSource", "column"]),
+                            (showPagination.value)
+                                ? (_openBlock(), _createBlock(Pagination, {
+                                    key: 1,
+                                    onChange: onPageChange,
+                                    total: page.total,
+                                    pageIndex: page.pageIndex,
+                                    pageSize: page.pageSize
+                                }, {
+                                    default: _withCtx(() => [
+                                        _renderSlot(_ctx.$slots, "paginationRender", {
+                                            total: page.total,
+                                            pageSize: page.pageSize,
+                                            current: page.pageIndex + 1,
+                                            onChange: onPageChange
+                                        })
+                                    ]),
+                                    _: 3 /* FORWARDED */
+                                }, 8 /* PROPS */, ["total", "pageIndex", "pageSize"]))
+                                : _createCommentVNode("v-if", true)
+                        ])
+                    ]),
+                    _: 3 /* FORWARDED */
+                }, 8 /* PROPS */, ["spinning"])
+            ], 4 /* STYLE */));
+        };
+    }
+});
+export default __sfc_main__;