el-crud-page 1.0.3 → 1.0.5

package/dist/index.esm.js

@@ -1377,21 +1377,21 @@ __vue_render__$4._withStripped = true;
 /* style */
 var __vue_inject_styles__$4 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-8bcd2094_0", {
-    source: ".crud-table[data-v-8bcd2094] .el-table__body-wrapper .el-table__cell .cell:empty::after {\n  content: \"/\";\n  color: #c0c4cc;\n}\n\n/*# sourceMappingURL=table.vue.map */",
+  inject("data-v-00cd4ad2_0", {
+    source: ".crud-table[data-v-00cd4ad2] .el-table__fixed .el-table__cell .cell:empty::after,\n.crud-table[data-v-00cd4ad2] .el-table__body-wrapper .el-table__cell .cell:empty::after {\n  content: \"/\";\n  color: #c0c4cc;\n}\n\n/*# sourceMappingURL=table.vue.map */",
     map: {
       "version": 3,
       "sources": ["/Users/tonwe/git/el-crud-page/src/table.vue", "table.vue"],
       "names": [],
-      "mappings": "AAsJA;EACA,YAAA;EACA,cAAA;ACrJA;;AAEA,oCAAoC",
+      "mappings": "AAuJA;;EACA,YAAA;EACA,cAAA;ACrJA;;AAEA,oCAAoC",
       "file": "table.vue",
-      "sourcesContent": ["<!-- crud table 组件 -->\n<template>\n    <el-table :data=\"data\" class=\"crud-table\" ref=\"table\" v-bind=\"combinedProps\" v-on=\"combinedEvents\">\n        <crud-table-column v-for=\"(column,index) in columns\" :key=\"`${ column.key || ('column_'+index) }`\" :indexMethod=\"(index)=>( baseIndex + 1 + index )\"\n            v-if=\"!column[`v-hasPermi`] || !column[`v-hasPermi`].length || $auth.hasPermiOr(column[`v-hasPermi`] || [])\"\n            :column=\"column\" @action=\"onRowAction\">\n        </crud-table-column>\n    </el-table>\n</template>\n<script>\n\n\n/**\n * CRUD table组件\n */\n\nimport CrudTableColumn from \"./tableColumn.js\";\n\nexport default {\n    name: \"CrudTable\",\n    components: {\n        CrudTableColumn\n    },\n    inject: [\"crud\"],\n    props: {\n        columns: {\n            type: Array,\n            default: () => []\n        },\n        on: {\n            type: Object,\n            default: () => {\n                return {};\n            }\n        },\n        data: {\n            type: Array,\n            default: () => {\n                return [];\n            }\n        }\n    },\n    data() {\n        return {\n            emit: {},\n            defaultProps: {\n                stripe: true,\n                size: \"mini\",\n            }\n        };\n    },\n    computed: {\n        // 将外部传入的 props 与 crud 内部样式合并\n        combinedProps() {\n            return Object.assign({}, this.defaultProps, this.$attrs);\n        },\n        // 将各事件处理函数合并，包括 emit 与 on 上的回调\n        combinedEvents() {\n            return Object.assign(\n                {},\n                {\n                    \"selection-change\": this.onSelectionChange,\n                    \"sort-change\": this.onSortChange,\n                    \"row-contextmenu\": this.onRowContextMenu\n                },\n                this.emit,\n                this.on\n            );\n        },\n        baseIndex(){\n            if( this.crud?.pagination ){\n                return (this.crud?.pagination?.pageNum-1) * this.crud?.pagination?.pageSize;\n            }else{\n                return 0;\n            }\n        }\n    },\n    mounted() {\n        this.bindEmits();\n        this.bindMethods();\n    },\n    methods: {\n        // 绑定 el-table 回调\n        bindEmits() {\n            const emits = [\n                \"select\",\n                \"select-all\",\n                \"cell-mouse-enter\",\n                \"cell-mouse-leave\",\n                \"cell-click\",\n                \"cell-dblclick\",\n                \"row-click\",\n                \"row-contextmenu\",\n                \"row-dblclick\",\n                \"header-click\",\n                \"header-contextmenu\",\n                \"filter-change\",\n                \"current-change\",\n                \"header-dragend\",\n                \"expand-change\"\n            ];\n\n            emits.forEach((name) => {\n                this.emit[name] = (...args) => {\n                    this.$emit(name, ...args);\n                };\n            });\n        },\n\n        // 绑定 el-table 事件\n        bindMethods() {\n            const methods = [\n                \"clearSelection\",\n                \"toggleRowSelection\",\n                \"toggleAllSelection\",\n                \"toggleRowExpansion\",\n                \"setCurrentRow\",\n                \"clearSort\",\n                \"clearFilter\",\n                \"doLayout\",\n                \"sort\"\n            ];\n\n            methods.forEach((n) => {\n                this[n] = this.$refs[\"table\"][n];\n            });\n        },\n        onSelectionChange(selection) {\n            this.$emit(\"selection-change\", selection);\n        },\n        onSortChange({ prop, order }) {\n            this.$emit(\"sort-change\", { prop, order });\n        },\n        onRowContextMenu(row, column, event) {\n            this.$emit(\"row-contextmenu\", row, column, event);\n        },\n        onRowAction(action, scope) {\n            this.$emit(\"row-action\", action, scope);\n            this.$emit(`row-${action}`, scope);\n        }\n    }\n\n}\n</script>\n\n<style scoped lang=\"scss\">\n.crud-table {\n    &::v-deep {\n        .el-table__body-wrapper {\n            .el-table__cell {\n                .cell:empty::after {\n                    content: '/';\n                    color: #c0c4cc;\n                }\n            }\n        }\n    }\n}\n</style>\n", ".crud-table::v-deep .el-table__body-wrapper .el-table__cell .cell:empty::after {\n  content: \"/\";\n  color: #c0c4cc;\n}\n\n/*# sourceMappingURL=table.vue.map */"]
+      "sourcesContent": ["<!-- crud table 组件 -->\n<template>\n    <el-table :data=\"data\" class=\"crud-table\" ref=\"table\" v-bind=\"combinedProps\" v-on=\"combinedEvents\">\n        <crud-table-column v-for=\"(column,index) in columns\" :key=\"`${ column.key || ('column_'+index) }`\" :indexMethod=\"(index)=>( baseIndex + 1 + index )\"\n            v-if=\"!column[`v-hasPermi`] || !column[`v-hasPermi`].length || $auth.hasPermiOr(column[`v-hasPermi`] || [])\"\n            :column=\"column\" @action=\"onRowAction\">\n        </crud-table-column>\n    </el-table>\n</template>\n<script>\n\n\n/**\n * CRUD table组件\n */\n\nimport CrudTableColumn from \"./tableColumn.js\";\n\nexport default {\n    name: \"CrudTable\",\n    components: {\n        CrudTableColumn\n    },\n    inject: [\"crud\"],\n    props: {\n        columns: {\n            type: Array,\n            default: () => []\n        },\n        on: {\n            type: Object,\n            default: () => {\n                return {};\n            }\n        },\n        data: {\n            type: Array,\n            default: () => {\n                return [];\n            }\n        }\n    },\n    data() {\n        return {\n            emit: {},\n            defaultProps: {\n                stripe: true,\n                size: \"mini\",\n            }\n        };\n    },\n    computed: {\n        // 将外部传入的 props 与 crud 内部样式合并\n        combinedProps() {\n            return Object.assign({}, this.defaultProps, this.$attrs);\n        },\n        // 将各事件处理函数合并，包括 emit 与 on 上的回调\n        combinedEvents() {\n            return Object.assign(\n                {},\n                {\n                    \"selection-change\": this.onSelectionChange,\n                    \"sort-change\": this.onSortChange,\n                    \"row-contextmenu\": this.onRowContextMenu\n                },\n                this.emit,\n                this.on\n            );\n        },\n        baseIndex(){\n            if( this.crud?.pagination ){\n                return (this.crud?.pagination?.pageNum-1) * this.crud?.pagination?.pageSize;\n            }else{\n                return 0;\n            }\n        }\n    },\n    mounted() {\n        this.bindEmits();\n        this.bindMethods();\n    },\n    methods: {\n        // 绑定 el-table 回调\n        bindEmits() {\n            const emits = [\n                \"select\",\n                \"select-all\",\n                \"cell-mouse-enter\",\n                \"cell-mouse-leave\",\n                \"cell-click\",\n                \"cell-dblclick\",\n                \"row-click\",\n                \"row-contextmenu\",\n                \"row-dblclick\",\n                \"header-click\",\n                \"header-contextmenu\",\n                \"filter-change\",\n                \"current-change\",\n                \"header-dragend\",\n                \"expand-change\"\n            ];\n\n            emits.forEach((name) => {\n                this.emit[name] = (...args) => {\n                    this.$emit(name, ...args);\n                };\n            });\n        },\n\n        // 绑定 el-table 事件\n        bindMethods() {\n            const methods = [\n                \"clearSelection\",\n                \"toggleRowSelection\",\n                \"toggleAllSelection\",\n                \"toggleRowExpansion\",\n                \"setCurrentRow\",\n                \"clearSort\",\n                \"clearFilter\",\n                \"doLayout\",\n                \"sort\"\n            ];\n\n            methods.forEach((n) => {\n                this[n] = this.$refs[\"table\"][n];\n            });\n        },\n        onSelectionChange(selection) {\n            this.$emit(\"selection-change\", selection);\n        },\n        onSortChange({ prop, order }) {\n            this.$emit(\"sort-change\", { prop, order });\n        },\n        onRowContextMenu(row, column, event) {\n            this.$emit(\"row-contextmenu\", row, column, event);\n        },\n        onRowAction(action, scope) {\n            this.$emit(\"row-action\", action, scope);\n            this.$emit(`row-${action}`, scope);\n        }\n    }\n\n}\n</script>\n\n<style scoped lang=\"scss\">\n.crud-table {\n    &::v-deep {\n        .el-table__fixed,\n        .el-table__body-wrapper {\n            .el-table__cell {\n                .cell:empty::after {\n                    content: '/';\n                    color: #c0c4cc;\n                }\n            }\n        }\n    }\n}\n</style>\n", ".crud-table::v-deep .el-table__fixed .el-table__cell .cell:empty::after,\n.crud-table::v-deep .el-table__body-wrapper .el-table__cell .cell:empty::after {\n  content: \"/\";\n  color: #c0c4cc;\n}\n\n/*# sourceMappingURL=table.vue.map */"]
     },
     media: undefined
   });
 };
 /* scoped */
-var __vue_scope_id__$4 = "data-v-8bcd2094";
+var __vue_scope_id__$4 = "data-v-00cd4ad2";
 /* module identifier */
 var __vue_module_identifier__$4 = undefined;
 /* functional template */
@@ -2018,7 +2018,7 @@ var __vue_render__$2 = function __vue_render__() {
         }
       });
     })], 2) : item.type === "date" ? _c("el-date-picker", {
-      style: item.range ? _vm.dateRangeStyle : _vm.inputStyle,
+      style: _vm.inputStyle,
       attrs: {
         type: item.range ? "daterange" : "date",
         placeholder: item.placeholder,
@@ -2091,21 +2091,21 @@ __vue_render__$2._withStripped = true;
 /* style */
 var __vue_inject_styles__$2 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-ba1b80d0_0", {
-    source: ".container-main[data-v-ba1b80d0] {\n  background-color: #fff;\n}\n.el-crud-query[data-v-ba1b80d0] {\n  overflow: hidden;\n  padding: 10px;\n}\n.el-crud-query .el-crud-query-form[data-v-ba1b80d0] {\n  margin-bottom: -10px;\n}\n.el-crud-query .el-crud-query-form[data-v-ba1b80d0] .el-form-item--mini.el-form-item, .el-crud-query .el-crud-query-form[data-v-ba1b80d0] .el-form-item--small.el-form-item {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=queryForm.vue.map */",
+  inject("data-v-b77b7a9a_0", {
+    source: ".container-main[data-v-b77b7a9a] {\n  background-color: #fff;\n}\n.el-crud-query[data-v-b77b7a9a] {\n  overflow: hidden;\n  padding: 10px;\n}\n.el-crud-query .el-crud-query-form[data-v-b77b7a9a] {\n  margin-bottom: -10px;\n}\n.el-crud-query .el-crud-query-form[data-v-b77b7a9a] .el-form-item--mini.el-form-item, .el-crud-query .el-crud-query-form[data-v-b77b7a9a] .el-form-item--small.el-form-item {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=queryForm.vue.map */",
     map: {
       "version": 3,
       "sources": ["/Users/tonwe/git/el-crud-page/src/queryForm.vue", "queryForm.vue"],
       "names": [],
       "mappings": "AAgUA;EACA,sBAAA;AC/TA;ADiUA;EACA,gBAAA;EACA,aAAA;AC9TA;AD+TA;EACA,oBAAA;AC7TA;ADgUA;EACA,mBAAA;AC9TA;;AAEA,wCAAwC",
       "file": "queryForm.vue",
-      "sourcesContent": ["<template>\n    <!-- \n     \n    queryItems: [\n                // input string\n                {\n                    label: \"项目名称\",\n                    prop: \"name\",\n                    type: \"input\",\n                    placeholder: \"请输入项目名称\",\n                },\n                // select\n                {\n                    label: \"申办单位\",\n                    prop: \"sponsorId\",\n                    type: \"select\",\n                    placeholder: \"请选择申办单位\",\n                    options: [],\n                },\n                // date日期\n                {\n                    label: \"创建日期\",\n                    prop: [\"createDateStart\", \"createDateEnd\"],\n                    type: \"date\",\n                    range: true,\n                    placeholder: \"请选择创建日期\",\n                },\n                // datetime 时间\n                {\n                    label: \"更新时间\",\n                    prop: \"updateTime\",\n                    type: \"datetime\",\n                    placeholder: \"请选择更新时间\",\n                },\n            ],\n    \n    -->\n    <div class=\"container-main el-crud-query\" v-if=\"queryItems.length\">\n        <el-form :model=\"queryParams\" :size=\"size\" :style=\"{ maxHeight: expand ? '' : (formMaxHeight + 'px') }\"\n            ref=\"queryForm\" :inline=\"inline\" :label-width=\"labelWidthStr\" class=\"el-crud-query-form\" @submit.native.prevent>\n            <el-form-item v-for=\"item in queryFormItems\" v-show=\"expand || !item.hidden\" :label=\"item.label\"\n                :prop=\"item.prop\" :key=\"item.prop\">\n                <el-input v-if=\"item.type === 'input'\" v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\"\n                    clearable @keyup.enter.native=\"handleQuery\" :style=\"inputStyle\"></el-input>\n                <el-select v-else-if=\"item.type === 'select'\" v-model=\"queryParams[item.prop]\"\n                    :placeholder=\"item.placeholder\" clearable filterable\n                    @visible-change=\"($event) => item.visibleChange && item.visibleChange($event, queryParams)\"\n                    :style=\"inputStyle\">\n                    \n                    <template v-if=\"typeof item.options === 'function'\">\n                        <el-option v-for=\"option in item.options()\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n                    </template>\n                    <template v-else>\n                        <el-option v-for=\"option in item.options\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n                    </template>\n\n                </el-select>\n\n                <el-date-picker v-else-if=\"item.type === 'date'\" :type=\"item.range ? 'daterange' : 'date'\"\n                    v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n                    :start-placeholder=\"item['startPlaceholder'] || '开始日期'\"\n                    :end-placeholder=\"item['endPlaceholder'] || '结束日期'\" :range-separator=\"item['rangeSeparator']\"\n                    :value-format=\"item['valueFormat'] || 'yyyy-MM-dd'\"\n                    :style=\"item.range ? dateRangeStyle : inputStyle\"></el-date-picker>\n                <el-date-picker v-else-if=\"item.type === 'datetime'\" :type=\"item.range ? 'datetimerange' : 'datetime'\"\n                    v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n                    :start-placeholder=\"item['startPlaceholder'] || '开始时间'\"\n                    :end-placeholder=\"item['endPlaceholder'] || '结束时间'\" :range-separator=\"item['rangeSeparator']\"\n                    :value-format=\"item['valueFormat'] || 'yyyy-MM-dd HH:mm:ss'\"\n                    :style=\"item.range ? dateRangeStyle : inputStyle\"></el-date-picker>\n            </el-form-item>\n            <el-form-item label=\" \" ref=\"queryFormBtn\">\n                <el-button type=\"primary\" icon=\"el-icon-search\" @click=\"handleQuery\">搜索</el-button>\n                <el-button icon=\"el-icon-refresh\" @click=\"resetQuery\">重置</el-button>\n                <el-button type=\"text\" @click=\"handelExpand\" v-if=\"needExpand\">\n                    <span>更多</span>\n                    <i :class=\"expand ? 'el-icon-arrow-up' : 'el-icon-arrow-down'\"></i>\n                </el-button>\n            </el-form-item>\n        </el-form>\n    </div>\n\n</template>\n\n<script>\n\nimport { debounce } from './utils'\nexport default {\n    props: {\n\n        // queryParams: {\n        //     type: Object,\n        //     required: true\n        // },\n        queryItems: {\n            type: Array,\n            required: true\n        },\n        size: {\n            type: String,\n            default: 'mini'\n        },\n        labelWidth: {\n            type: Number,\n            default: 80\n        },\n        inputWidth: {\n            type: Number,\n            default: 200\n        },\n        lineClamp: {\n            type: Number,\n            default: 1\n        },\n        inline: {\n            type: Boolean,\n            default: true\n        }\n\n    },\n    watch: {\n        queryItems: {\n            handler(val) {\n                this.reset()\n            },\n            deep: true,\n            immediate: true\n        }\n    },\n    created() {\n         \n    },\n    data() {\n        return {\n            queryParams: {},\n            queryFormItems: [],\n            formMaxHeight: 0,\n            expand: false,\n            needExpand: false,\n            // 用于展示窗口大小变化绑定\n            $_sidebarElm: null,\n            $_resizeHandler: null\n        }\n    },\n    computed: {\n        labelWidthStr() {\n            if (typeof this.labelWidth === 'number') {\n                return this.labelWidth + 'px';\n            }\n            return this.labelWidth + 'px';\n        },\n        inputStyle() {\n            return {\n                width: this.inputWidth + 'px'\n            };\n        },\n        dateRangeStyle() {\n            return {\n                width: (this.inputWidth * 2 + this.labelWidth + 10) + 'px'\n            };\n        }\n    },\n    mounted() {\n        this.$nextTick(() => {\n            this.formMaxHeight = this.measureHeight() * this.lineClamp; \n            // this.handleNeedExpand()\n            this.redraw();\n            this.bindResize();\n            setTimeout(() => {\n                this.$_resizeHandler && this.$_resizeHandler();\n            }, 100);\n            \n        });\n\n    },\n    activated() {\n        if (!this.$_resizeHandler) {\n            this.bindResize();\n        }\n    },\n    beforeDestroy() {\n        this.unbindResize();\n    },\n    deactivated() {\n        this.unbindResize();\n    },\n    methods: {\n        $_sidebarResizeHandler(e) {\n            if (e.propertyName === 'width') {\n                this.$_resizeHandler()\n            }\n        },\n        // 展示窗口大小变化绑定\n        bindResize() {\n            this.$_resizeHandler = debounce(() => {\n                this.drawTime = 0;\n                this.queryFormItems.forEach(item => {\n                    item.hidden = false;\n                });\n                this.$nextTick(() => {\n                    this.handleNeedExpand()\n                    this.redraw();\n                })\n\n            }, 100)\n\n            window.addEventListener('resize', this.$_resizeHandler);\n            this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]\n            this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)\n\n\n        },\n        // unbindResize \n        unbindResize() {\n            window.removeEventListener('resize', this.$_resizeHandler)\n            this.$_resizeHandler = null\n            this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)\n        },\n        handelExpand() {\n            this.drawTime = 0;\n            this.expand = !this.expand;\n            this.$_resizeHandler();\n\n        },\n        handleNeedExpand() {\n            const $queryForm = this.$refs?.queryForm?.$el;\n            let scrollHeight = $queryForm.scrollHeight;\n            if ( this.formMaxHeight < scrollHeight) {\n                this.needExpand = true;\n            } else {\n                this.needExpand = false;\n            }\n\n        },\n        // \n        redraw() {\n            if (typeof this.drawTime == 'undefined') {\n                this.drawTime = 0;\n            }\n            if (this.drawTime > 60) {\n                return;\n            }\n            // 确保DOM完全渲染后再执行某些操作\n            const $queryForm = this.$refs?.queryForm?.$el;\n            if ($queryForm) {\n                $queryForm.style.overflow = \"hidden\";\n            }\n            this.$nextTick(() => {\n                let scrollHeight = $queryForm.scrollHeight;\n                let clientHeight = $queryForm.clientHeight;\n                if (scrollHeight > clientHeight) {\n                    this.drawTime++;\n                    let noHiddenItems = this.queryFormItems.filter(item => !item.hidden);\n                    let lastItem = noHiddenItems.find((item, index) => (noHiddenItems.length - 1 == index))\n                    if (lastItem) {\n                        this.$set(lastItem, 'hidden', true);\n                        this.redraw();\n                    }\n\n                }\n                // 判断是否有滚动条\n\n            });\n\n\n        },\n\n        //测量单行高度 + margin-top + margin-bottom\n        measureHeight() {\n            let queryFormBtn = this.$refs.queryFormBtn;\n            if(queryFormBtn){\n                let queryFormBtnHeight = queryFormBtn.$el.clientHeight || 29;\n                let queryFormItemsMarginTop = parseInt(window.getComputedStyle(queryFormBtn.$el).marginTop);\n                let queryFormItemsMarginBottom = parseInt(window.getComputedStyle(queryFormBtn.$el).marginBottom);\n                return queryFormBtnHeight + queryFormItemsMarginTop + queryFormItemsMarginBottom\n            }\n            \n        },\n\n        reset() {\n            this.queryItems.forEach(item => {\n                this.$set(this.queryParams, item.prop, null);\n            });\n            this.queryFormItems = this.queryItems.map(item => {\n                let placeholder = item.placeholder;\n                if( !placeholder){\n\n                    switch (item.type) {\n                        case 'input':\n                            placeholder = '请输入' + item.label;\n                            break;\n                        default:\n                            placeholder = '请选择' + item.label;\n                    }\n\n                }\n\n\n                return {\n                    ...item,\n                    placeholder,\n                    hidden: false\n                }\n            }); \n        },\n        resetQuery() {\n\n            this.$refs.queryForm?.resetFields();\n            this.handleQuery();\n        },\n        handleQuery() {\n            this.$emit('queryTable', this.queryParams);\n        }\n\n    }\n}\n\n</script>\n\n<style scoped lang=\"scss\">\n.container-main{\n    background-color: #fff;\n}\n.el-crud-query{\n    overflow: hidden;\n    padding: 10px;\n    .el-crud-query-form {\n        margin-bottom: -10px;\n\n        &::v-deep {\n            .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{\n                margin-bottom: 10px;\n            }\n        }\n    }\n}\n\n\n</style>\n", ".container-main {\n  background-color: #fff;\n}\n\n.el-crud-query {\n  overflow: hidden;\n  padding: 10px;\n}\n.el-crud-query .el-crud-query-form {\n  margin-bottom: -10px;\n}\n.el-crud-query .el-crud-query-form::v-deep .el-form-item--mini.el-form-item, .el-crud-query .el-crud-query-form::v-deep .el-form-item--small.el-form-item {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=queryForm.vue.map */"]
+      "sourcesContent": ["<template>\n    <!-- \n     \n    queryItems: [\n                // input string\n                {\n                    label: \"项目名称\",\n                    prop: \"name\",\n                    type: \"input\",\n                    placeholder: \"请输入项目名称\",\n                },\n                // select\n                {\n                    label: \"申办单位\",\n                    prop: \"sponsorId\",\n                    type: \"select\",\n                    placeholder: \"请选择申办单位\",\n                    options: [],\n                },\n                // date日期\n                {\n                    label: \"创建日期\",\n                    prop: [\"createDateStart\", \"createDateEnd\"],\n                    type: \"date\",\n                    range: true,\n                    placeholder: \"请选择创建日期\",\n                },\n                // datetime 时间\n                {\n                    label: \"更新时间\",\n                    prop: \"updateTime\",\n                    type: \"datetime\",\n                    placeholder: \"请选择更新时间\",\n                },\n            ],\n    \n    -->\n    <div class=\"container-main el-crud-query\" v-if=\"queryItems.length\">\n        <el-form :model=\"queryParams\" :size=\"size\" :style=\"{ maxHeight: expand ? '' : (formMaxHeight + 'px') }\"\n            ref=\"queryForm\" :inline=\"inline\" :label-width=\"labelWidthStr\" class=\"el-crud-query-form\" @submit.native.prevent>\n            <el-form-item v-for=\"item in queryFormItems\" v-show=\"expand || !item.hidden\" :label=\"item.label\"\n                :prop=\"item.prop\" :key=\"item.prop\">\n                <el-input v-if=\"item.type === 'input'\" v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\"\n                    clearable @keyup.enter.native=\"handleQuery\" :style=\"inputStyle\"></el-input>\n                <el-select v-else-if=\"item.type === 'select'\" v-model=\"queryParams[item.prop]\"\n                    :placeholder=\"item.placeholder\" clearable filterable\n                    @visible-change=\"($event) => item.visibleChange && item.visibleChange($event, queryParams)\"\n                    :style=\"inputStyle\">\n                    \n                    <template v-if=\"typeof item.options === 'function'\">\n                        <el-option v-for=\"option in item.options()\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n                    </template>\n                    <template v-else>\n                        <el-option v-for=\"option in item.options\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n                    </template>\n\n                </el-select>\n\n                <el-date-picker v-else-if=\"item.type === 'date'\" :type=\"item.range ? 'daterange' : 'date'\"\n                    v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n                    :start-placeholder=\"item['startPlaceholder'] || '开始日期'\"\n                    :end-placeholder=\"item['endPlaceholder'] || '结束日期'\" :range-separator=\"item['rangeSeparator']\"\n                    :value-format=\"item['valueFormat'] || 'yyyy-MM-dd'\"\n                    :style=\"inputStyle\"></el-date-picker>\n                <el-date-picker v-else-if=\"item.type === 'datetime'\" :type=\"item.range ? 'datetimerange' : 'datetime'\"\n                    v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n                    :start-placeholder=\"item['startPlaceholder'] || '开始时间'\"\n                    :end-placeholder=\"item['endPlaceholder'] || '结束时间'\" :range-separator=\"item['rangeSeparator']\"\n                    :value-format=\"item['valueFormat'] || 'yyyy-MM-dd HH:mm:ss'\"\n                    :style=\"item.range ? dateRangeStyle : inputStyle\"></el-date-picker>\n            </el-form-item>\n            <el-form-item label=\" \" ref=\"queryFormBtn\">\n                <el-button type=\"primary\" icon=\"el-icon-search\" @click=\"handleQuery\">搜索</el-button>\n                <el-button icon=\"el-icon-refresh\" @click=\"resetQuery\">重置</el-button>\n                <el-button type=\"text\" @click=\"handelExpand\" v-if=\"needExpand\">\n                    <span>更多</span>\n                    <i :class=\"expand ? 'el-icon-arrow-up' : 'el-icon-arrow-down'\"></i>\n                </el-button>\n            </el-form-item>\n        </el-form>\n    </div>\n\n</template>\n\n<script>\n\nimport { debounce } from './utils'\nexport default {\n    props: {\n\n        // queryParams: {\n        //     type: Object,\n        //     required: true\n        // },\n        queryItems: {\n            type: Array,\n            required: true\n        },\n        size: {\n            type: String,\n            default: 'mini'\n        },\n        labelWidth: {\n            type: Number,\n            default: 80\n        },\n        inputWidth: {\n            type: Number,\n            default: 200\n        },\n        lineClamp: {\n            type: Number,\n            default: 1\n        },\n        inline: {\n            type: Boolean,\n            default: true\n        }\n\n    },\n    watch: {\n        queryItems: {\n            handler(val) {\n                this.reset()\n            },\n            deep: true,\n            immediate: true\n        }\n    },\n    created() {\n         \n    },\n    data() {\n        return {\n            queryParams: {},\n            queryFormItems: [],\n            formMaxHeight: 0,\n            expand: false,\n            needExpand: false,\n            // 用于展示窗口大小变化绑定\n            $_sidebarElm: null,\n            $_resizeHandler: null\n        }\n    },\n    computed: {\n        labelWidthStr() {\n            if (typeof this.labelWidth === 'number') {\n                return this.labelWidth + 'px';\n            }\n            return this.labelWidth + 'px';\n        },\n        inputStyle() {\n            return {\n                width: this.inputWidth + 'px'\n            };\n        },\n        dateRangeStyle() {\n            return {\n                width: (this.inputWidth * 2 + this.labelWidth + 10) + 'px'\n            };\n        }\n    },\n    mounted() {\n        this.$nextTick(() => {\n            this.formMaxHeight = this.measureHeight() * this.lineClamp; \n            // this.handleNeedExpand()\n            this.redraw();\n            this.bindResize();\n            setTimeout(() => {\n                this.$_resizeHandler && this.$_resizeHandler();\n            }, 100);\n            \n        });\n\n    },\n    activated() {\n        if (!this.$_resizeHandler) {\n            this.bindResize();\n        }\n    },\n    beforeDestroy() {\n        this.unbindResize();\n    },\n    deactivated() {\n        this.unbindResize();\n    },\n    methods: {\n        $_sidebarResizeHandler(e) {\n            if (e.propertyName === 'width') {\n                this.$_resizeHandler()\n            }\n        },\n        // 展示窗口大小变化绑定\n        bindResize() {\n            this.$_resizeHandler = debounce(() => {\n                this.drawTime = 0;\n                this.queryFormItems.forEach(item => {\n                    item.hidden = false;\n                });\n                this.$nextTick(() => {\n                    this.handleNeedExpand()\n                    this.redraw();\n                })\n\n            }, 100)\n\n            window.addEventListener('resize', this.$_resizeHandler);\n            this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]\n            this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)\n\n\n        },\n        // unbindResize \n        unbindResize() {\n            window.removeEventListener('resize', this.$_resizeHandler)\n            this.$_resizeHandler = null\n            this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)\n        },\n        handelExpand() {\n            this.drawTime = 0;\n            this.expand = !this.expand;\n            this.$_resizeHandler();\n\n        },\n        handleNeedExpand() {\n            const $queryForm = this.$refs?.queryForm?.$el;\n            let scrollHeight = $queryForm.scrollHeight;\n            if ( this.formMaxHeight < scrollHeight) {\n                this.needExpand = true;\n            } else {\n                this.needExpand = false;\n            }\n\n        },\n        // \n        redraw() {\n            if (typeof this.drawTime == 'undefined') {\n                this.drawTime = 0;\n            }\n            if (this.drawTime > 60) {\n                return;\n            }\n            // 确保DOM完全渲染后再执行某些操作\n            const $queryForm = this.$refs?.queryForm?.$el;\n            if ($queryForm) {\n                $queryForm.style.overflow = \"hidden\";\n            }\n            this.$nextTick(() => {\n                let scrollHeight = $queryForm.scrollHeight;\n                let clientHeight = $queryForm.clientHeight;\n                if (scrollHeight > clientHeight) {\n                    this.drawTime++;\n                    let noHiddenItems = this.queryFormItems.filter(item => !item.hidden);\n                    let lastItem = noHiddenItems.find((item, index) => (noHiddenItems.length - 1 == index))\n                    if (lastItem) {\n                        this.$set(lastItem, 'hidden', true);\n                        this.redraw();\n                    }\n\n                }\n                // 判断是否有滚动条\n\n            });\n\n\n        },\n\n        //测量单行高度 + margin-top + margin-bottom\n        measureHeight() {\n            let queryFormBtn = this.$refs.queryFormBtn;\n            if(queryFormBtn){\n                let queryFormBtnHeight = queryFormBtn.$el.clientHeight || 29;\n                let queryFormItemsMarginTop = parseInt(window.getComputedStyle(queryFormBtn.$el).marginTop);\n                let queryFormItemsMarginBottom = parseInt(window.getComputedStyle(queryFormBtn.$el).marginBottom);\n                return queryFormBtnHeight + queryFormItemsMarginTop + queryFormItemsMarginBottom\n            }\n            \n        },\n\n        reset() {\n            this.queryItems.forEach(item => {\n                this.$set(this.queryParams, item.prop, null);\n            });\n            this.queryFormItems = this.queryItems.map(item => {\n                let placeholder = item.placeholder;\n                if( !placeholder){\n\n                    switch (item.type) {\n                        case 'input':\n                            placeholder = '请输入' + item.label;\n                            break;\n                        default:\n                            placeholder = '请选择' + item.label;\n                    }\n\n                }\n\n\n                return {\n                    ...item,\n                    placeholder,\n                    hidden: false\n                }\n            }); \n        },\n        resetQuery() {\n\n            this.$refs.queryForm?.resetFields();\n            this.handleQuery();\n        },\n        handleQuery() {\n            this.$emit('queryTable', this.queryParams);\n        }\n\n    }\n}\n\n</script>\n\n<style scoped lang=\"scss\">\n.container-main{\n    background-color: #fff;\n}\n.el-crud-query{\n    overflow: hidden;\n    padding: 10px;\n    .el-crud-query-form {\n        margin-bottom: -10px;\n\n        &::v-deep {\n            .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{\n                margin-bottom: 10px;\n            }\n        }\n    }\n}\n\n\n</style>\n", ".container-main {\n  background-color: #fff;\n}\n\n.el-crud-query {\n  overflow: hidden;\n  padding: 10px;\n}\n.el-crud-query .el-crud-query-form {\n  margin-bottom: -10px;\n}\n.el-crud-query .el-crud-query-form::v-deep .el-form-item--mini.el-form-item, .el-crud-query .el-crud-query-form::v-deep .el-form-item--small.el-form-item {\n  margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=queryForm.vue.map */"]
     },
     media: undefined
   });
 };
 /* scoped */
-var __vue_scope_id__$2 = "data-v-ba1b80d0";
+var __vue_scope_id__$2 = "data-v-b77b7a9a";
 /* module identifier */
 var __vue_module_identifier__$2 = undefined;
 /* functional template */