tenghui-ui 2.2.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tenghui-ui",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "vue 2x, tenghui-ui",
   "files": [
     "dist",

package/packages/form-item/src/index.vue

@@ -154,14 +154,14 @@
 					</div>
 					<el-date-picker :class="{ inline_content: inlineLabel }" :ref="type" 
 						v-model="modelForm[0]" 
-						v-bind="{ ...setDefaultAttrs($attrs), type: 'datetime' }" 
+						v-bind="{ ...setDefaultAttrs($attrs), type: 'datetime', defaultTime: defaultTime ? defaultTime[0] : '' }" 
 						placeholder="请选择开始时间"
 						v-on="$listeners">
 					</el-date-picker>
 					<span style="color: #dcdfe6">-</span>
 					<el-date-picker :class="{ inline_content: inlineLabel }" :ref="type" 
 						v-model="modelForm[1]" 
-						v-bind="{ ...setDefaultAttrs($attrs), type: 'datetime' }" 
+						v-bind="{ ...setDefaultAttrs($attrs), type: 'datetime', defaultTime: defaultTime ? defaultTime[1] : '' }" 
 						placeholder="请选择结束时间"
 						v-on="$listeners">
 					</el-date-picker>
@@ -309,7 +309,9 @@ export default {
 
 		filterMethod: {
 			type: Function
-		}
+		},
+
+		defaultTime: [Array, String]
 	},
 	data() {
 		return {

package/packages/search/src/index_old.vue

@@ -0,0 +1,598 @@
+<template>
+    <div class="ui-search" ref="Search" v-loading="loadSearch">
+        <div class="ui-search__main" v-show="collspase">
+            <!-- <slot v-if="!useConfig"></slot> -->
+            <!-- <div v-else v-show="false"><slot></slot></div> -->
+            <template v-if="!loadSearch && useConfig">
+                <DefaultItem :ref="`Config_${vnode.ref || vnode.$options.propsData.label || index}`" v-for="(vnode, index) in childItems" :key="index" :vnode="vnode"></DefaultItem>
+            </template>
+        </div>
+        <div class="ui-search__footer" v-show="collspase">
+            <el-button size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
+            <el-button style="margin-right: 10px;" size="small" icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
+            <div style="align-self: flex-end;">
+                <el-popover
+                    placement="bottom-start"
+                    trigger="click"
+                    popper-class="ui-search__popover"
+                    v-if="showMore"
+                    :offset="-172"
+                    :width="containerWidth">
+                    <div class="ui-more__select">
+                        <el-row>
+                            <el-col v-for="(vnode, index) in hideItems" :key="index" v-bind="{ span: 4, ...vnode.$attrs, ...vnode.$options.propsData }">
+                                <template v-if="!loadSearch && useConfig">
+                                    <DefaultItem :vnode="vnode" :ref="`Config_${vnode.ref || vnode.$options.propsData.label || index}`"></DefaultItem>
+                                </template>
+                                <template v-else-if="!loadSearch">
+                                    <DefaultItem :vnode="vnode" :ref="`Config_${vnode.ref || vnode.$options.propsData.label || index}`"></DefaultItem>
+                                </template>
+                            </el-col>
+                        </el-row>
+                    </div>
+                    <el-button slot="reference" class="ui-search__button--more" type="text">更多筛选 <i class="el-icon-caret-right"></i></el-button>
+                </el-popover>
+            </div>
+            <el-button v-if="useConfig" @click="handleShowConfig" class="ui-search__button--more" type="text">筛选配置 <i class="el-icon-setting"></i></el-button>
+            <Record :config-key="configKey" :current="searchLoc" />
+            <slot name="footer"></slot>
+            <div class="ui-search__cache" v-show="searchLoc.length" :title="searchLoc.map(v => `${v.label}：${v.valueLabel || v.value}`).join('；')">
+                <span v-for="(item, index) in searchLoc" :key="index">{{item.label}}：{{item.valueLabel || item.value}}</span>
+            </div>
+        </div>
+        <div v-show="!collspase" class="ui-collspase--cache">
+            <el-tooltip class="item" effect="dark" 
+                popper-class="ui-search__cache__popper"
+                placement="bottom-start">
+                <div class="ui-search__cache" v-show="searchLoc.length">
+                    <span v-for="(item, index) in searchLoc" :key="index">{{item.label}}：{{item.valueLabel || item.value}}</span>
+                </div>
+                <template v-slot:content>
+                    <p style="line-height: 18px;">{{ searchLoc.map(v => `${v.label}：${v.valueLabel || v.value}`).join('；') }}</p>
+                </template>
+            </el-tooltip>
+        </div>
+        <div class="ui-collspase" 
+                :class="{ 'ui-collspase--open': collspase }" 
+            @click="collspase = !collspase">
+            <span :class="collspase ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></span>
+        </div>
+        <el-drawer
+            title="筛选配置"
+            direction="btt"
+            size="100%"
+            :withHeader="false"
+            :modal="false"
+            :modal-append-to-body="false"
+            :visible.sync="showConfig">
+            <div class="ui-search--sort">
+                <div class="ui-sort__content">
+                    <el-checkbox-group v-model="checkItems" size="mini">
+                        <draggable class="ui-draggable" v-model="sortItems"
+                            animation="100" chosenClass="ui-dragmove">
+                            <el-checkbox border :label="item" v-for="(item, index) in sortItems" :key="index"></el-checkbox>
+                        </draggable>
+                    </el-checkbox-group>
+                </div>
+                <div class="ui-sort__footer">
+                    <el-button type="primary" size="mini" @click="handleRenderConfig">确认</el-button>
+                    <el-button size="mini" @click="showConfig = !showConfig">取消</el-button>
+                </div>
+            </div>
+        </el-drawer>
+    </div>
+</template>
+<script>
+import draggable from 'vuedraggable';
+import Record from './Record.vue';
+import DefaultItem from './DefaultItem.vue';
+import { debounce } from 'throttle-debounce';
+import { sleep } from '@/utils';
+export default {
+    name: 'ComSearch',
+    components: {
+        draggable,
+        Record,
+        DefaultItem
+    },
+    props: {
+        searchCfg: {
+            type: Array,
+            default() {
+                return []
+            }
+        },
+        
+        // flagId 为空则取路由
+        flagId: {
+            type: String,
+            default: ''
+        },
+
+        useConfig: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            containerWidth: '200px',
+            hideItems: [],
+
+            // 默认的搜索条件
+            defaultVNode: [],
+            defaultItems: [],
+            showConfig: false,
+            checkItems: [],
+            sortItems: [],
+
+            loadSearch: false,
+
+            // 搜索缓存
+            searchLoc: [],
+
+            // 搜索items
+            childItems: [],
+
+            // 初始化
+            initLoad: false,
+
+            configKey: this.flagId || this.$route.path,
+
+            handleWindowResize: null,
+
+            waitTimeout: '',
+
+            searchHeight: '',
+            listenerSearchTimes: '',
+            collspase: true,
+            showTip: false
+        }
+    },
+    computed: {
+        showMore() {
+            return !!this.hideItems.length;
+        },
+        ConfigRefs() {
+            return Object.entries(this.$refs).reduce((temp, [key, ref]) => {
+                if (key.indexOf('Config_') > -1) {
+                    const oKey = key.replace('Config_', '');
+                    const oRefs = ref[0].$refs[oKey];
+                    return {
+                        ...temp,
+                        ...(oRefs ? { [oKey]: oRefs.$refs[oRefs.type] } : {})
+                    }
+                }
+            }, {});
+        }
+    },
+    methods: {
+        handleQuery() {
+
+            const empty = (value, type) => {
+                if (value) {
+                    if (value instanceof Date) return false;
+
+                    if (Array.isArray(value) && type == 'inputrange') {
+                        return !value[0] && !value[1];
+                    } else {
+                        return value instanceof Object ? !Object.entries(value).length : false
+                    }
+                } else if (typeof value === 'boolean') {
+                    return false;
+                }
+                return true;
+            }
+
+            this.searchLoc = this.$children.reduce((temp, item) => {
+                if (item.label && !empty(item.modelForm, item.type)) {
+
+                    let valueLabel;
+                    if (item.options && Object.entries(item.options).length > 0) {
+                        if (Array.isArray(item.modelForm)) {
+                            valueLabel = item.modelForm.map(iv => item.selectOption.find(v => v.value == iv)?.label || iv)
+                        } else {
+                            valueLabel = item.selectOption.find(v => v.value == item.modelForm)?.label || item.modelForm
+                        }
+                    }
+
+                    return [
+                        ...temp,
+                        {
+                            label: item.label,
+                            value: item.modelForm,
+                            valueLabel
+                        }
+                    ]
+                } else {
+                    return temp;
+                }
+            }, []);
+
+            const queryFn = this.$parent.handleQuery;
+            const SearchConfig = this.$UICONFIG ? this.$UICONFIG.searchConfig || {} : {};
+            if (queryFn) {
+                queryFn({ ...(SearchConfig.defaultParams || {}) });
+            } else {
+                this.$emit('query');
+            }
+        },
+        handleReset() {
+            const resetFn = this.$parent.handleReset;
+            if (resetFn) {
+                resetFn();
+            } else {
+                this.$emit('reset');
+            }
+        },
+
+        waitRenderItem() {
+            return new Promise((resolve) => {
+                clearTimeout(this.waitTimeout);
+                const itemEls = this.$refs.Search.querySelectorAll('.ui-form__item:not([class*=prepend] .ui-form__item)');
+                for (let i = 0; i < itemEls.length; i++) {
+                    const el = itemEls[i];
+                    if (el.getBoundingClientRect().right > 0) {
+                        return resolve(true);
+                    }
+                }
+                
+                this.waitTimeout = setTimeout(async () => {
+                    resolve(await this.waitRenderItem());
+                }, 100)
+            })
+        },
+
+        async handleLayoutItem(renderEle = false) {
+            
+            await this.waitRenderItem();
+
+            const containerEl = this.$refs.Search;
+            const itemEls = containerEl.querySelectorAll('.ui-form__item:not([class*=prepend] .ui-form__item)');
+            
+            // 重置item 状态
+            itemEls.forEach(ele => ele.className = ele.className.replace('ui-form__item--hide', ''))
+
+            const { right: containerRight } = containerEl.getBoundingClientRect();
+            this.containerWidth = containerEl.offsetWidth - 80;
+
+            if (this.useConfig) {
+                itemEls.forEach(ele => {
+                    try {
+                        const eleFlagLabel = ele.__vue__.label || ele.__vue__.$children[0].label;
+                        if (!this.checkItems.includes(eleFlagLabel)) {
+                            ele.style.display = 'none';
+                        } else {
+                            ele.style.display = 'block';
+                        }
+                    } catch(e) {
+                        console.log(ele.__vue__, ele);
+                    }
+                })   
+            }
+
+            const hideEls = [];
+            itemEls.forEach(ele => {
+                const { right: itemRight } = ele.getBoundingClientRect();
+                if (itemRight > containerRight) {
+                    ele.className = `${ele.className} ui-form__item--hide`;
+                    hideEls.push(ele);
+                }
+            })
+            if (renderEle === true) return;
+
+            if (this.useConfig) {
+                this.hideItems = hideEls.map(item => {
+                    return this.childItems.find((v, i) => {
+                        const options = item.__vue__.vnode ? item.__vue__.vnode.$options : item.__vue__.$options;
+                        return v.$options.propsData.label == options.propsData.label;
+                    })
+                }).filter(item => !!item);
+            } else {
+                this.hideItems = this.$children.filter(item => item.$el.className.indexOf('ui-form__item--hide') > -1);
+            }
+            this.loadSearch = false;
+        },
+        changeOptions(item) {
+            this.$parent.changeOptions(item);
+        },
+
+        // 显示配置
+        handleShowConfig() {
+            this.showConfig = true;
+        },
+
+        // 渲染配置
+        async handleRenderConfig() {
+
+            // 配置存至缓存
+            const saveConfig = {
+                checkItems: this.checkItems,
+                sortItems: this.sortItems
+            }
+            localStorage.setItem(`SearchCfg__${this.configKey}`, JSON.stringify(saveConfig));
+
+            const sortItems = this.sortItems.map(item => {
+                const findItem = this.childItems.find(v => v.$options.propsData.label == item);
+                return findItem;
+            })
+
+            this.childItems = sortItems;
+
+            await this.$nextTick();
+
+            this.showConfig = false;
+            this.handleLayoutItem();
+        },
+
+        // 监听Search高度
+        listenerSearchHeight() {
+            this.searchHeight = this.$refs.Search.offsetHeight;
+            this.listenerSearchTimes = setInterval(() => {
+                if (this.searchHeight != this.$refs.Search.offsetHeight) {
+                    this.searchHeight = this.$refs.Search.offsetHeight;
+                    const findTableRes = this.$parent.$children.find(refItem => refItem.$options._componentTag == 'com-table');
+                    findTableRes && findTableRes.handleRefreshHeight();
+                }
+            }, 200);
+        }
+    },
+    async mounted() {
+
+        // this.childItems = this.$slots.default.map(vnode => {
+        //     return {
+        //         componentOptions: vnode.componentOptions,
+        //         $attrs: vnode.componentInstance.$attrs,
+        //         constructor: vnode.componentInstance.constructor,
+        //         $listeners: vnode.componentInstance.$listeners,
+        //         $options: vnode.componentInstance.$options,
+        //         $scopedSlots: vnode.componentInstance.$scopedSlots,
+        //         $slots: vnode.componentInstance.$slots,
+        //         staticStyle: vnode.data.staticStyle,
+        //         ref: vnode.data.ref
+        //     }
+        // });
+        console.log(this.$slots, 'this.$slots.default');
+        return;
+        this.initLoad = true;
+        await this.$nextTick();
+
+        if (this.useConfig) {
+            
+            this.checkItems = this.childItems.map(item => item.$options.propsData.label);
+            this.sortItems = this.childItems.map(item => item.$options.propsData.label);
+            this.handleLayoutItem();
+
+            
+            // 读取缓存配置
+            const locConfig = JSON.parse(localStorage.getItem(`SearchCfg__${this.configKey}`) || "{}");
+            if (locConfig.checkItems) {
+                await this.$nextTick();
+                this.checkItems = locConfig.checkItems;
+                this.sortItems = locConfig.sortItems;
+                this.handleRenderConfig();
+            }
+        } else {
+            this.loadSearch = false;
+            this.handleLayoutItem();
+        }
+
+        this.handleWindowResize = debounce(100, this.handleLayoutItem);
+
+        window.addEventListener('resize', this.handleWindowResize);
+
+        await sleep(300);
+        this.listenerSearchHeight();
+    },
+    activated() {
+		this.handleLayoutItem();
+	},
+    beforeDestroy() {
+        window.removeEventListener('resize', this.handleWindowResize);
+        clearInterval(this.listenerSearchTimes);
+    },
+    watch: {
+        childItems() {
+            this.loadSearch = true;
+            this.$nextTick().then(() => {
+                this.loadSearch = false;
+            })
+        },
+        hideItems(val, oldVal) {
+
+            if (oldVal.length == val.length && oldVal.length == 0) return;
+
+            this.loadSearch = true;
+            this.$nextTick().then(async () => {
+                this.loadSearch = false;
+
+                await this.$nextTick();
+                this.handleLayoutItem(true);
+            })
+        },
+        collspase() {
+            const findTableRes = this.$parent.$children.find(refItem => refItem.$options._componentTag == 'com-table');
+            findTableRes && findTableRes.handleRefreshHeight();
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .ui-search {
+        // height: 138px;
+        box-sizing: border-box;
+        margin: 10px 10px 0 10px;
+        padding: 20px;
+        // box-shadow: 0 0 5px 2px #e7e7e7;
+        background-color: #FFF;
+        border: 1px solid @color-border;
+        border-radius: 4px;
+        box-shadow: 0 0 4px 2px #eee;
+        position: relative;
+        transition: all .1s linear;
+
+        /deep/ .el-drawer__wrapper {
+            position: absolute;
+        }
+
+        &__main {
+            display: flex;
+        }
+
+        &__footer {
+            display: flex;
+            margin-top: 10px;
+            align-items: center;
+        }
+
+        &__cache {
+            font-size: 12px;
+            // margin-left: auto;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            border: 1px solid #f1f1f1;
+            padding: 5px;
+            background: #fefefe;
+            border-radius: 4px;
+            color: #666;
+            align-self: flex-end;
+            cursor: pointer;
+
+            span {
+                background-color: #f1f1f1;
+                padding: 2px 4px;
+                margin-left: 5px;
+                border-radius: 4px;
+
+                &:first-child {
+                    margin-left: 0;
+                }
+            }
+        }
+
+        .ui-search__button {
+
+            &--more {
+                padding: 0 0 4px 0;
+                vertical-align: bottom;
+                border-bottom: 1px solid #409EFF;
+                border-radius: 0;
+                margin-right: 10px;
+                align-self: flex-end;
+                margin-bottom: 2px;
+            }
+        }
+
+        /deep/ .ui-form__item {
+            display: block;
+            min-width: 150px;
+
+            &--inputrange {
+                min-width: 160px;
+            }
+
+            &--hide {
+                display: none !important;
+            }
+
+            &--daterange {
+                min-width: 200px;
+            }
+        }
+
+        /deep/ .ui-item__label {
+            width: unset;
+            text-align: left;
+            margin-bottom: 5px;
+        }
+
+        /deep/ .el-cascader .el-input {
+            display: flex;
+        }
+
+        /deep/ .ui-input__range {
+            max-width: unset;
+        }
+
+        &--sort {
+            padding: 10px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .ui-sort__content {
+
+            flex: 1;
+            margin-bottom: 10px;
+            border-bottom: 1px solid #f1f1f1;
+
+            .el-checkbox {
+                margin-right: 10px;
+                margin-left: 0 !important;
+                margin-bottom: 10px;
+            }
+        }
+
+        .ui-sort__footer {
+            // margin-top: auto;
+        }
+    }
+
+    .ui-more__select {
+        
+        .el-col {
+            margin-bottom: 10px;
+        }
+
+        /deep/ .ui-input__range {
+            max-width: unset;
+        }
+
+        /deep/ .el-cascader .el-input {
+            display: flex;
+        }
+    }
+
+    .ui-dragmove {
+        background-color: #FFF;
+    }
+
+    .ui-collspase {
+        position: absolute;
+        width: 70px;
+        height: 20px;
+        text-align: center;
+        background-color: rgba(0,0,0,.3);
+        left: 50%;
+        margin-left: -35px;
+        color: #FFF;
+        transition: all .1s linear;
+        cursor: pointer;
+        line-height: 20px;
+        z-index: 2;
+        bottom: -20px;
+        border-radius: 0 0 35px 35px;
+
+        &:hover {
+            box-shadow: inset 0 0 10px 4px rgba(0,0,0,.4);
+        }
+
+        &--open {
+            bottom: 0;
+            border-radius: 35px 35px 0 0;
+        }
+
+        &--cache {
+            display: flex;
+            position: absolute;
+            top: 6px;
+            left: 0;
+            padding-left: 6px;
+            padding-right: 6px;
+            box-sizing: border-box;
+            width: 100%;
+        }
+    }
+</style>

package/packages/table/src/index.vue

@@ -96,7 +96,7 @@
 				ref="pageRef"
 				layout="total, sizes, prev, pager, next, jumper"
 				:current-page="Number(pageData.offset)"
-				:page-sizes="pageSizes"
+				:page-sizes="defaultPageSizes"
 				:page-size="Number(pageData.limit)"
 				:total="Number(pageData.total)"
 				@size-change="(val) => handlePageChange('limit', val)"
@@ -252,13 +252,16 @@ export default {
 		hoverStyle: {
 			type: Boolean,
 			default: true
+		},
+		pageSizes: {
+			type: Array
 		}
 	},
 
 	data() {
 		return {
 			isPresetProp,
-			pageSizes: [20, 50, 100, 200, 500, 1000],
+			defaultPageSizes: [20, 50, 100, 200, 500, 1000],
 			tableHeight: '',
 			checkTab: '',
 			useMaps: {},
@@ -397,6 +400,8 @@ export default {
 		// 设置默认tab
 		this.checkTab = this.defaultTab;
 
+		this.defaultPageSizes = this.pageSizes || this.$UICONFIG.pageSizes;
+
 		// 默认map
 		this.useMaps = JSON.parse(JSON.stringify(this.tableMap));
 	},